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

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

@ -69,60 +69,60 @@
</svelte:head>
{#if data.currentrace}
<Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-0" width="w-full">
<AccordionItem>
<svelte:fragment slot="lead"><ChequeredFlagIcon /></svelte:fragment>
<svelte:fragment slot="summary">
<span class="font-bold">Next Race Guess</span>
</svelte:fragment>
<svelte:fragment slot="content">
<div class="justify-center gap-2 lg:flex">
<!-- Show information about the next race -->
<div class="mt-2 flex gap-2">
<div class="card flex w-full min-w-40 flex-col p-2 shadow">
<span class="font-bold">
Step {data.currentrace.step}: {data.currentrace.name}
</span>
{#if data.currentrace.sprintdate}
{#await data.drivers then drivers}
<Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-0" width="w-full">
<AccordionItem>
<svelte:fragment slot="lead"><ChequeredFlagIcon /></svelte:fragment>
<svelte:fragment slot="summary">
<span class="font-bold">Next Race Guess</span>
</svelte:fragment>
<svelte:fragment slot="content">
<div class="justify-center gap-2 lg:flex">
<!-- Show information about the next race -->
<div class="mt-2 flex gap-2">
<div class="card flex w-full min-w-40 flex-col p-2 shadow">
<span class="font-bold">
{data.currentrace.name}
</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">
<span class="w-12">SQuali:</span>
<span>{format_date(data.currentrace.sprintqualidate, dateformat)}</span>
<span class="w-12">Quali:</span>
<span>{format_date(data.currentrace.qualidate, dateformat)}</span>
</div>
<div class="flex gap-2">
<span class="w-12">SRace:</span>
<span>{format_date(data.currentrace.sprintdate, dateformat)}</span>
<span class="w-12">Race:</span>
<span>{format_date(data.currentrace.racedate, dateformat)}</span>
</div>
{/if}
<div class="flex gap-2">
<span class="w-12">Quali:</span>
<span>{format_date(data.currentrace.qualidate, dateformat)}</span>
</div>
<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 class="m-auto flex">
<div class="mr-1 mt-1">
<StopwatchIcon />
</div>
<Countdown date={data.currentrace.racedate} extraclass="font-bold" />
</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 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 -->
{#if data.user}
{#await data.drivers then drivers}
<!-- Only show the userguess if signed in -->
{#if data.user}
<div class="mt-2 flex gap-2">
<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>
@ -151,56 +151,55 @@
/>
</div>
</div>
{/await}
{/if}
{/if}
<!-- Show users that have and have not picked yet -->
{#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="card w-full min-w-40 p-2 shadow lg:max-w-40">
<h1 class="text-nowrap font-bold">
Picked ({picked.length}/{currentpicked.length}):
</h1>
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
{#each picked 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}
<!-- Show users that have and have not picked yet -->
{#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="card w-full min-w-40 p-2 shadow lg:max-w-40">
<h1 class="text-nowrap font-bold">
Picked ({picked.length}/{currentpicked.length}):
</h1>
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
{#each picked 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
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
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>
{/await}
</div>
</svelte:fragment>
</AccordionItem>
</Accordion>
{/await}
</div>
</svelte:fragment>
</AccordionItem>
</Accordion>
{/await}
{/if}
<!-- The fookin table -->
<!-- TODO: Hide this thing if no picks... -->
<div class="flex">
<div>
<!-- Points color coding legend -->
@ -301,7 +300,6 @@
{/await}
</div>
<!-- TODO: If no guess is made, the table will probably be too short? -->
<!-- TODO: Horizontal scrollbar missing in desktop chrome (fuck chrome)??? -->
<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 -->

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

@ -7,7 +7,7 @@
type ModalStore,
} from "@skeletonlabs/skeleton";
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 {
get_by_value,
@ -71,10 +71,14 @@
<!-- Only show the stuff if signed in -->
{#if data.user}
{@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]}
{@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]}
<!-- Hottake + Doohanstarts -->
@ -323,10 +327,14 @@
{@const mostovertakes = pick ? get_by_value(drivers, "id", pick.mostovertakes) : undefined}
{@const mostdnfs = pick ? get_by_value(drivers, "id", pick.mostdnfs) : undefined}
{@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]}
{@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]}
<div
@ -422,7 +430,6 @@
</div>
<!-- Teamwinners -->
<!-- TODO: Sort teamwinners by team (and by code inside teams), so they are sorted equally for each column -->
<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"
>
@ -444,7 +451,6 @@
<!-- Podiums -->
<!-- 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
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]"
>