christoph/svelte-formula11
1
Fork 0
Code Issues 23 Actions Packages Projects 1 Activity

Compare commits

base: christoph:e7d78883b35644700c8437db315c60d26dcd05b3
Branches Tags
christoph:master
...
compare: christoph:082bb72ec1756fed08b5a0090b771415c95725b9
Branches Tags
christoph:master

4 Commits
e7d78883b3 ... 082bb72ec1

Author SHA1 Message Date
Christoph Urlacher
082bb72ec1 Seasonpicks: Disable countdown until seasonpicks will be locked
All checks were successful
Build Formula11 Docker Image / pocketbase-docker (push) Successful in 28s
Details
2025-03-14 01:45:57 +01:00
Christoph Urlacher
b9413fcfcd Lib: Allow customizing finished text in Countdown 2025-03-14 01:45:40 +01:00
Christoph Urlacher
a0d75d6411 Lib: Rename fetch_seasonpicks to fetch_visibleseasonpicks 2025-03-14 01:24:24 +01:00
Christoph Urlacher
8ee212bbf3 Seasonpicks: Fix slightly scrollable teamwinner/podiums in accordion 2025-03-14 01:20:25 +01:00
5 changed files with 27 additions and 10 deletions
Expand all files Collapse all files

5
src/app.html
View File

@ -18,6 +18,9 @@
<!-- Prefetch data specified in "load" functions on link hover --> <!-- Prefetch data specified in "load" functions on link hover -->
<body data-theme="formula11Theme" data-sveltekit-preload-data="hover"> <body data-theme="formula11Theme" data-sveltekit-preload-data="hover">
<!-- SvelteKit inserts the body contents here --> <!-- SvelteKit inserts the body contents here -->
<div style="display: contents; user-select: none; -moz-user-select: none">%sveltekit.body%</div> <!-- TODO: The fucking user-select: none doesn't work in firefox -->
<div style="display: contents; user-select: none; -moz-user-select: -moz-none">
%sveltekit.body%
</div>
</body> </body>
</html> </html>

5
src/lib/components/Countdown.svelte
View File

@ -1,10 +1,11 @@
<script lang="ts"> <script lang="ts">
interface CountdownProps { interface CountdownProps {
date: string; date: string;
gotext?: string;
extraclass?: string; extraclass?: string;
} }
let { date, extraclass = "" }: CountdownProps = $props(); let { date, gotext = "Go Go Go", extraclass = "" }: CountdownProps = $props();
// Set the date we're counting down to // Set the date we're counting down to
const countDownDate = new Date(date).getTime(); const countDownDate = new Date(date).getTime();
@ -35,6 +36,6 @@
{#if distance > 0} {#if distance > 0}
{days + "d " + hours + "h " + minutes + "m "} {days + "d " + hours + "h " + minutes + "m "}
{:else} {:else}
GO GO GO GO {gotext}
{/if} {/if}
</span> </span>

6
src/lib/fetch.ts
View File

@ -140,7 +140,7 @@ export const fetch_currentrace = async (
}; };
/** /**
* Fetch all [RacePicks] from the database * Fetch all visible [RacePicks] from the database
*/ */
export const fetch_visibleracepicks = async ( export const fetch_visibleracepicks = async (
fetch: (_: any) => Promise<Response>, fetch: (_: any) => Promise<Response>,
@ -174,9 +174,9 @@ export const fetch_currentracepick = async (
}; };
/** /**
* Fetch all [SeasonPicks] from the database * Fetch all visible [SeasonPicks] from the database
*/ */
export const fetch_seasonpicks = async ( export const fetch_visibleseasonpicks = async (
fetch: (_: any) => Promise<Response>, fetch: (_: any) => Promise<Response>,
): Promise<SeasonPick[]> => { ): Promise<SeasonPick[]> => {
const seasonpicks: SeasonPick[] = await pb const seasonpicks: SeasonPick[] = await pb

15
src/routes/seasonpicks/+page.svelte
View File

@ -22,6 +22,7 @@
TEAM_BANNER_HEIGHT, TEAM_BANNER_HEIGHT,
TEAM_BANNER_WIDTH, TEAM_BANNER_WIDTH,
} from "$lib/config"; } from "$lib/config";
import Countdown from "$lib/components/Countdown.svelte";
let { data }: { data: PageData } = $props(); let { data }: { data: PageData } = $props();
@ -165,7 +166,7 @@
<div <div
class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow lg:max-w-40" class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow lg:max-w-40"
> >
<h1 class="mb-2 text-nowrap font-bold">Teamwinners:</h1> <h1 class="text-nowrap font-bold">Teamwinners:</h1>
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5"> <div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
{#each teamwinners.slice(0, 12) as winner} {#each teamwinners.slice(0, 12) as winner}
<LazyImage <LazyImage
@ -183,7 +184,7 @@
<div <div
class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow lg:max-w-40" class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow lg:max-w-40"
> >
<h1 class="mb-2 text-nowrap font-bold">Podiums:</h1> <h1 class="text-nowrap font-bold">Podiums:</h1>
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5"> <div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
{#each podiums as podium} {#each podiums as podium}
<LazyImage <LazyImage
@ -481,3 +482,13 @@
{/await} {/await}
</div> </div>
</div> </div>
{#await Promise.all([data.seasonpicks, data.currentrace]) then [seasonpicks, currentrace]}
{#if seasonpicks.length <= 0 && currentrace}
<div class="card mx-auto w-fit p-2 shadow">
<span class="mr-2 text-xl font-medium">Season pick modification will be locked in</span>
<Countdown date={currentrace.qualidate} gotext="0d 0h 0m" extraclass="font-bold text-xl" />
<span class="ml-2 text-xl font-medium">.</span>
</div>
{/if}
{/await}

6
src/routes/seasonpicks/+page.ts
View File

@ -3,8 +3,9 @@ import {
fetch_drivers, fetch_drivers,
fetch_hottakes, fetch_hottakes,
fetch_seasonpickedusers, fetch_seasonpickedusers,
fetch_seasonpicks, fetch_visibleseasonpicks,
fetch_teams, fetch_teams,
fetch_currentrace,
} from "$lib/fetch"; } from "$lib/fetch";
import type { PageLoad } from "../$types"; import type { PageLoad } from "../$types";
@ -14,9 +15,10 @@ export const load: PageLoad = async ({ fetch, depends }) => {
return { return {
teams: fetch_teams(fetch), teams: fetch_teams(fetch),
drivers: fetch_drivers(fetch), drivers: fetch_drivers(fetch),
seasonpicks: fetch_seasonpicks(fetch), seasonpicks: fetch_visibleseasonpicks(fetch),
hottakes: fetch_hottakes(fetch), hottakes: fetch_hottakes(fetch),
seasonpickedusers: fetch_seasonpickedusers(fetch), seasonpickedusers: fetch_seasonpickedusers(fetch),
currentrace: fetch_currentrace(fetch), // Used for countdown
seasonpick: await fetch_currentseasonpick(fetch), seasonpick: await fetch_currentseasonpick(fetch),
}; };