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

Compare commits

base: christoph:1933ad8ca8940351195c1fff426502bc08cd9e32
Branches Tags
christoph:master
...
compare: christoph:750c89823d31adaeaab88e8ceab18492b507a991
Branches Tags
christoph:master

3 Commits
1933ad8ca8 ... 750c89823d

Author SHA1 Message Date
Christoph Urlacher
750c89823d Seasonpicks: Sort teamwinners and podiums
All checks were successful
Build Formula11 Docker Image / pocketbase-docker (push) Successful in 27s
Details
2025-02-27 00:52:00 +01:00
Christoph Urlacher
55d0525b37 Racepicks: Fix "Your Race Pick" accordion opening lag 2025-02-27 00:51:49 +01:00
Christoph Urlacher
a80f2e6fcd Lib: Comments 2025-02-27 00:51:26 +01:00
3 changed files with 102 additions and 100 deletions
Expand all files Collapse all files

2
src/lib/fetch.ts
View File

@ -139,7 +139,6 @@ export const fetch_currentrace = async (
return currentrace[0]; return currentrace[0];
}; };
// TODO: This will make the hidden racepicks by other users visible inside the browser console...
/** /**
* Fetch all [RacePicks] from the database * Fetch all [RacePicks] from the database
*/ */
@ -174,7 +173,6 @@ export const fetch_currentracepick = async (
return racepick; return racepick;
}; };
// TODO: This will make the hidden seasonpicks by other users visible inside the browser console...
/** /**
* Fetch all [SeasonPicks] from the database * Fetch all [SeasonPicks] from the database
*/ */

180
src/routes/racepicks/+page.svelte
View File

@ -69,60 +69,60 @@
</svelte:head> </svelte:head>
{#if data.currentrace} {#if data.currentrace}
<Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-0" width="w-full"> {#await data.drivers then drivers}
<AccordionItem> <Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-0" width="w-full">
<svelte:fragment slot="lead"><ChequeredFlagIcon /></svelte:fragment> <AccordionItem>
<svelte:fragment slot="summary"> <svelte:fragment slot="lead"><ChequeredFlagIcon /></svelte:fragment>
<span class="font-bold">Next Race Guess</span> <svelte:fragment slot="summary">
</svelte:fragment> <span class="font-bold">Next Race Guess</span>
<svelte:fragment slot="content"> </svelte:fragment>
<div class="justify-center gap-2 lg:flex"> <svelte:fragment slot="content">
<!-- Show information about the next race --> <div class="justify-center gap-2 lg:flex">
<div class="mt-2 flex gap-2"> <!-- Show information about the next race -->
<div class="card flex w-full min-w-40 flex-col p-2 shadow"> <div class="mt-2 flex gap-2">
<span class="font-bold"> <div class="card flex w-full min-w-40 flex-col p-2 shadow">
Step {data.currentrace.step}: {data.currentrace.name} <span class="font-bold">
</span> {data.currentrace.name}
{#if data.currentrace.sprintdate} </span>
{#if data.currentrace.sprintdate}
<div class="flex gap-2">
<span class="w-12">SQuali:</span>
<span>{format_date(data.currentrace.sprintqualidate, dateformat)}</span>
</div>
<div class="flex gap-2">
<span class="w-12">SRace:</span>
<span>{format_date(data.currentrace.sprintdate, dateformat)}</span>
</div>
{/if}
<div class="flex gap-2"> <div class="flex gap-2">
<span class="w-12">SQuali:</span> <span class="w-12">Quali:</span>
<span>{format_date(data.currentrace.sprintqualidate, dateformat)}</span> <span>{format_date(data.currentrace.qualidate, dateformat)}</span>
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<span class="w-12">SRace:</span> <span class="w-12">Race:</span>
<span>{format_date(data.currentrace.sprintdate, dateformat)}</span> <span>{format_date(data.currentrace.racedate, dateformat)}</span>
</div> </div>
{/if} <div class="m-auto flex">
<div class="flex gap-2"> <div class="mr-1 mt-1">
<span class="w-12">Quali:</span> <StopwatchIcon />
<span>{format_date(data.currentrace.qualidate, dateformat)}</span> </div>
</div> <Countdown date={data.currentrace.racedate} extraclass="font-bold" />
<div class="flex gap-2">
<span class="w-12">Race:</span>
<span>{format_date(data.currentrace.racedate, dateformat)}</span>
</div>
<div class="m-auto flex">
<div class="mr-1 mt-1">
<StopwatchIcon />
</div> </div>
<Countdown date={data.currentrace.racedate} extraclass="font-bold" /> </div>
<div class="card w-full min-w-40 p-2 shadow">
<h1 class="mb-2 text-nowrap font-bold">Track Layout:</h1>
<LazyImage
src={data.currentrace.pictogram_url ?? "Invalid"}
imgwidth={RACE_PICTOGRAM_WIDTH}
imgheight={RACE_PICTOGRAM_HEIGHT}
containerstyle="height: 105px; margin: auto;"
imgstyle="background: transparent;"
/>
</div> </div>
</div> </div>
<div class="card w-full min-w-40 p-2 shadow">
<h1 class="mb-2 text-nowrap font-bold">Track Layout:</h1>
<LazyImage
src={data.currentrace.pictogram_url ?? "Invalid"}
imgwidth={RACE_PICTOGRAM_WIDTH}
imgheight={RACE_PICTOGRAM_HEIGHT}
containerstyle="height: 105px; margin: auto;"
imgstyle="background: transparent;"
/>
</div>
</div>
<!-- Only show the userguess if signed in --> <!-- Only show the userguess if signed in -->
{#if data.user} {#if data.user}
{#await data.drivers then drivers}
<div class="mt-2 flex gap-2"> <div class="mt-2 flex gap-2">
<div class="card w-full min-w-40 p-2 pb-0 shadow"> <div class="card w-full min-w-40 p-2 pb-0 shadow">
<h1 class="mb-2 text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1> <h1 class="mb-2 text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1>
@ -151,56 +151,55 @@
/> />
</div> </div>
</div> </div>
{/await} {/if}
{/if}
<!-- Show users that have and have not picked yet --> <!-- Show users that have and have not picked yet -->
{#await Promise.all( [data.currentpickedusers, pickedusers, outstandingusers], ) then [currentpicked, picked, outstanding]} {#await Promise.all( [data.currentpickedusers, pickedusers, outstandingusers], ) then [currentpicked, picked, outstanding]}
<div class="mt-2 flex max-h-[155px] gap-2 overflow-y-scroll"> <div class="mt-2 flex max-h-[155px] gap-2 overflow-y-scroll">
<div class="card w-full min-w-40 p-2 shadow lg:max-w-40"> <div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
<h1 class="text-nowrap font-bold"> <h1 class="text-nowrap font-bold">
Picked ({picked.length}/{currentpicked.length}): Picked ({picked.length}/{currentpicked.length}):
</h1> </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 picked as user} {#each picked as user}
<LazyImage <LazyImage
src={user.avatar_url ?? get_driver_headshot_template(data.graphics)} src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
imgwidth={AVATAR_WIDTH} imgwidth={AVATAR_WIDTH}
imgheight={AVATAR_HEIGHT} imgheight={AVATAR_HEIGHT}
containerstyle="height: 35px; width: 35px;" containerstyle="height: 35px; width: 35px;"
imgclass="bg-surface-400 rounded-full" imgclass="bg-surface-400 rounded-full"
/> />
{/each} {/each}
</div>
</div>
<div
class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow lg:max-w-40"
>
<h1 class="text-nowrap font-bold">
Missing ({outstanding.length}/{currentpicked.length}):
</h1>
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
{#each outstanding as user}
<LazyImage
src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
imgwidth={AVATAR_WIDTH}
imgheight={AVATAR_HEIGHT}
containerstyle="height: 35px; width: 35px;"
imgclass="bg-surface-400 rounded-full"
/>
{/each}
</div>
</div> </div>
</div> </div>
<div {/await}
class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow lg:max-w-40" </div>
> </svelte:fragment>
<h1 class="text-nowrap font-bold"> </AccordionItem>
Missing ({outstanding.length}/{currentpicked.length}): </Accordion>
</h1> {/await}
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
{#each outstanding as user}
<LazyImage
src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
imgwidth={AVATAR_WIDTH}
imgheight={AVATAR_HEIGHT}
containerstyle="height: 35px; width: 35px;"
imgclass="bg-surface-400 rounded-full"
/>
{/each}
</div>
</div>
</div>
{/await}
</div>
</svelte:fragment>
</AccordionItem>
</Accordion>
{/if} {/if}
<!-- The fookin table --> <!-- The fookin table -->
<!-- TODO: Hide this thing if no picks... -->
<div class="flex"> <div class="flex">
<div> <div>
<!-- Points color coding legend --> <!-- Points color coding legend -->
@ -301,7 +300,6 @@
{/await} {/await}
</div> </div>
<!-- TODO: If no guess is made, the table will probably be too short? -->
<!-- TODO: Horizontal scrollbar missing in desktop chrome (fuck chrome)??? --> <!-- TODO: Horizontal scrollbar missing in desktop chrome (fuck chrome)??? -->
<div class="flex w-full overflow-x-scroll pb-2"> <div class="flex w-full overflow-x-scroll pb-2">
<!-- Not ideal but currentpickedusers contains all users, so we do not need to fetch the users separately --> <!-- Not ideal but currentpickedusers contains all users, so we do not need to fetch the users separately -->

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

@ -7,7 +7,7 @@
type ModalStore, type ModalStore,
} from "@skeletonlabs/skeleton"; } from "@skeletonlabs/skeleton";
import type { PageData } from "./$types"; import type { PageData } from "./$types";
import type { Hottake, SeasonPick, SeasonPickedUser } from "$lib/schema"; import type { Driver, Hottake, SeasonPick, SeasonPickedUser } from "$lib/schema";
import { ChequeredFlagIcon, LazyImage } from "$lib/components"; import { ChequeredFlagIcon, LazyImage } from "$lib/components";
import { import {
get_by_value, get_by_value,
@ -71,10 +71,14 @@
<!-- Only show the stuff if signed in --> <!-- Only show the stuff if signed in -->
{#if data.user} {#if data.user}
{@const teamwinners = data.seasonpick {@const teamwinners = data.seasonpick
? data.seasonpick.teamwinners.map((id: string) => get_by_value(drivers, "id", id)) ? data.seasonpick.teamwinners
.map((id: string) => get_by_value(drivers, "id", id) as Driver)
.sort((a: Driver, b: Driver) => a.team.localeCompare(b.team))
: [undefined]} : [undefined]}
{@const podiums = data.seasonpick {@const podiums = data.seasonpick
? data.seasonpick.podiums.map((id: string) => get_by_value(drivers, "id", id)) ? data.seasonpick.podiums
.map((id: string) => get_by_value(drivers, "id", id) as Driver)
.sort((a: Driver, b: Driver) => a.code.localeCompare(b.code))
: [undefined]} : [undefined]}
<!-- Hottake + Doohanstarts --> <!-- Hottake + Doohanstarts -->
@ -323,10 +327,14 @@
{@const mostovertakes = pick ? get_by_value(drivers, "id", pick.mostovertakes) : undefined} {@const mostovertakes = pick ? get_by_value(drivers, "id", pick.mostovertakes) : undefined}
{@const mostdnfs = pick ? get_by_value(drivers, "id", pick.mostdnfs) : undefined} {@const mostdnfs = pick ? get_by_value(drivers, "id", pick.mostdnfs) : undefined}
{@const teamwinners = pick {@const teamwinners = pick
? pick.teamwinners.map((id: string) => get_by_value(drivers, "id", id)) ? pick.teamwinners
.map((id: string) => get_by_value(drivers, "id", id) as Driver)
.sort((a: Driver, b: Driver) => a.team.localeCompare(b.team))
: [undefined]} : [undefined]}
{@const podiums = pick {@const podiums = pick
? pick.podiums.map((id: string) => get_by_value(drivers, "id", id)) ? pick.podiums
.map((id: string) => get_by_value(drivers, "id", id) as Driver)
.sort((a: Driver, b: Driver) => a.code.localeCompare(b.code))
: [undefined]} : [undefined]}
<div <div
@ -422,7 +430,6 @@
</div> </div>
<!-- Teamwinners --> <!-- Teamwinners -->
<!-- TODO: Sort teamwinners by team (and by code inside teams), so they are sorted equally for each column -->
<div <div
class="mt-2 h-[360px] w-full overflow-y-scroll border bg-surface-300 p-1 px-1 py-2 leading-3 sm:h-[220px] md:h-[150px] lg:px-2" class="mt-2 h-[360px] w-full overflow-y-scroll border bg-surface-300 p-1 px-1 py-2 leading-3 sm:h-[220px] md:h-[150px] lg:px-2"
> >
@ -444,7 +451,6 @@
<!-- Podiums --> <!-- Podiums -->
<!-- TODO: Replace all style tags throughout the page with custom classes like height here --> <!-- TODO: Replace all style tags throughout the page with custom classes like height here -->
<!-- TODO: Sort podiums by driver code, so they are sorted equally for each column -->
<div <div
class="mt-2 h-[360px] w-full overflow-y-scroll border bg-surface-300 p-1 px-1 py-2 leading-3 md:h-[220px] lg:px-2 xl:h-[150px]" class="mt-2 h-[360px] w-full overflow-y-scroll border bg-surface-300 p-1 px-1 py-2 leading-3 md:h-[220px] lg:px-2 xl:h-[150px]"
> >