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

Compare commits

base: christoph:17a1ea85247be71e8b358cab473a141c71d9f396
Branches Tags
christoph:master
...
compare: christoph:8c18cef7aad93ede472d335fffee64d00d71a9b6
Branches Tags
christoph:master

3 Commits
17a1ea8524 ... 8c18cef7aa

Author SHA1 Message Date
Christoph Urlacher
8c18cef7aa Racepicks: Use grid for accordion
All checks were successful
Build Formula11 Docker Image / pocketbase-docker (push) Successful in 27s
Details
2025-03-14 00:27:40 +01:00
Christoph Urlacher
e63c905f0e Seasonpicks: Use grid for accordion + adjust breakpoints 2025-03-14 00:27:33 +01:00
Christoph Urlacher
b36ec6c3cd Seasonpicks: Increase hottake row height in table 2025-03-14 00:13:23 +01:00
2 changed files with 242 additions and 238 deletions
Expand all files Collapse all files

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

@ -75,118 +75,118 @@
<span class="font-bold">Next Race Guess</span>
</svelte:fragment>
<svelte:fragment slot="content">
<div class="justify-center gap-2 lg:flex">
<div class="grid grid-cols-2 gap-2 lg:mx-auto lg:w-fit lg:grid-cols-6">
<!-- 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, shortdatetimeformat)}</span
>
</div>
<div class="flex gap-2">
<span class="w-12">SRace:</span>
<span>{format_date(data.currentrace.sprintdate, shortdatetimeformat)}</span>
</div>
{/if}
<div class="card flex w-full min-w-40 flex-col p-2 shadow lg:max-w-40">
<span class="font-bold">
{data.currentrace.name}
</span>
{#if data.currentrace.sprintdate}
<div class="flex gap-2">
<span class="w-12">Quali:</span>
<span>{format_date(data.currentrace.qualidate, shortdatetimeformat)}</span>
<span class="w-12">SQuali:</span>
<span>{format_date(data.currentrace.sprintqualidate, shortdatetimeformat)}</span>
</div>
<div class="flex gap-2">
<span class="w-12">Race:</span>
<span>{format_date(data.currentrace.racedate, shortdatetimeformat)}</span>
<span class="w-12">SRace:</span>
<span>{format_date(data.currentrace.sprintdate, shortdatetimeformat)}</span>
</div>
<div class="m-auto flex">
<div class="mr-1 mt-1">
<StopwatchIcon />
</div>
<Countdown date={data.currentrace.racedate} extraclass="font-bold" />
{/if}
<div class="flex gap-2">
<span class="w-12">Quali:</span>
<span>{format_date(data.currentrace.qualidate, shortdatetimeformat)}</span>
</div>
<div class="flex gap-2">
<span class="w-12">Race:</span>
<span>{format_date(data.currentrace.racedate, shortdatetimeformat)}</span>
</div>
<div class="m-auto flex">
<div class="mr-1 mt-1">
<StopwatchIcon />
</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>
<!-- Show race pictogram -->
<div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
<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>
<!-- 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>
<LazyImage
src={get_by_value(drivers, "id", data.racepick?.pxx ?? "")?.headshot_url ??
get_driver_headshot_template(data.graphics)}
imgwidth={DRIVER_HEADSHOT_WIDTH}
imgheight={DRIVER_HEADSHOT_HEIGHT}
containerstyle="height: 115px; margin: auto;"
imgclass="bg-transparent cursor-pointer"
hoverzoom
onclick={racepick_handler}
/>
</div>
<div class="card w-full min-w-40 p-2 pb-0 shadow">
<h1 class="mb-2 text-nowrap font-bold">Your DNF Pick:</h1>
<LazyImage
src={get_by_value(drivers, "id", data.racepick?.dnf ?? "")?.headshot_url ??
get_driver_headshot_template(data.graphics)}
imgwidth={DRIVER_HEADSHOT_WIDTH}
imgheight={DRIVER_HEADSHOT_HEIGHT}
containerstyle="height: 115px; margin: auto;"
imgclass="bg-transparent cursor-pointer"
hoverzoom
onclick={racepick_handler}
/>
</div>
<!-- PXX pick -->
<div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
<h1 class="mb-2 text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1>
<LazyImage
src={get_by_value(drivers, "id", data.racepick?.pxx ?? "")?.headshot_url ??
get_driver_headshot_template(data.graphics)}
imgwidth={DRIVER_HEADSHOT_WIDTH}
imgheight={DRIVER_HEADSHOT_HEIGHT}
containerstyle="height: 115px; margin: auto;"
imgclass="bg-transparent cursor-pointer"
hoverzoom
onclick={racepick_handler}
/>
</div>
<!-- DNF pick -->
<div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
<h1 class="mb-2 text-nowrap font-bold">Your DNF Pick:</h1>
<LazyImage
src={get_by_value(drivers, "id", data.racepick?.dnf ?? "")?.headshot_url ??
get_driver_headshot_template(data.graphics)}
imgwidth={DRIVER_HEADSHOT_WIDTH}
imgheight={DRIVER_HEADSHOT_HEIGHT}
containerstyle="height: 115px; margin: auto;"
imgclass="bg-transparent cursor-pointer"
hoverzoom
onclick={racepick_handler}
/>
</div>
{/if}
<!-- Show users that have and have not picked yet -->
<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>
<!-- Show users that have picked -->
<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
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>
<!-- Show users that have not picked yet -->
<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>

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

@ -67,7 +67,7 @@
<span class="font-bold">Your Season Pick</span>
</svelte:fragment>
<svelte:fragment slot="content">
<div class="justify-center gap-2 lg:flex">
<div class="grid grid-cols-2 gap-2 lg:mx-auto lg:w-fit lg:grid-cols-5 2xl:grid-cols-10">
<!-- Only show the stuff if signed in -->
{#if data.user}
{@const teamwinners = data.seasonpick
@ -81,153 +81,157 @@
.sort((a: Driver, b: Driver) => a.code.localeCompare(b.code))
: [undefined]}
<!-- Hottake + Doohanstarts -->
<div class="mt-2 flex gap-2">
<div class="card w-full min-w-40 p-2 shadow">
<h1 class="mb-2 text-nowrap font-bold">Hottake:</h1>
<span class="text-sm">{data.seasonpick?.hottake}</span>
</div>
<div class="card w-full min-w-40 p-2 shadow">
<h1 class="mb-2 text-nowrap font-bold">Doohan Starts:</h1>
{#if data.seasonpick}
<span class="text-sm">
Jack Doohan startet {data.seasonpick?.doohanstarts} mal.
</span>
{/if}
<!-- Hottake -->
<div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
<h1 class="mb-2 text-nowrap font-bold">Hottake:</h1>
<span class="text-sm">{data.seasonpick?.hottake}</span>
</div>
<!-- Doohanstarts -->
<div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
<h1 class="mb-2 text-nowrap font-bold">Doohan Starts:</h1>
{#if data.seasonpick}
<span class="text-sm">
Jack Doohan startet {data.seasonpick?.doohanstarts} mal.
</span>
{/if}
</div>
<!-- WDC -->
<div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
<h1 class="mb-2 text-nowrap font-bold">WDC:</h1>
<LazyImage
src={get_by_value(drivers, "id", data.seasonpick?.wdcwinner ?? "")?.headshot_url ??
get_driver_headshot_template(data.graphics)}
imgwidth={DRIVER_HEADSHOT_WIDTH}
imgheight={DRIVER_HEADSHOT_HEIGHT}
containerstyle="height: 115px; margin: auto;"
imgclass="bg-transparent cursor-pointer"
hoverzoom
onclick={seasonpick_handler}
/>
</div>
<!-- WDC -->
<div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
<h1 class="mb-2 text-nowrap font-bold">WCC:</h1>
<LazyImage
src={get_by_value(teams, "id", data.seasonpick?.wccwinner ?? "")?.banner_url ??
get_team_banner_template(data.graphics)}
imgwidth={TEAM_BANNER_WIDTH}
imgheight={TEAM_BANNER_HEIGHT}
containerstyle="height: 80px; margin: auto;"
imgclass="bg-transparent cursor-pointer rounded-md"
hoverzoom
onclick={seasonpick_handler}
/>
</div>
<!-- Overtakes -->
<div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
<h1 class="mb-2 text-nowrap font-bold">Most Overtakes:</h1>
<LazyImage
src={get_by_value(drivers, "id", data.seasonpick?.mostovertakes ?? "")
?.headshot_url ?? get_driver_headshot_template(data.graphics)}
imgwidth={DRIVER_HEADSHOT_WIDTH}
imgheight={DRIVER_HEADSHOT_HEIGHT}
containerstyle="height: 115px; margin: auto;"
imgclass="bg-transparent cursor-pointer"
hoverzoom
onclick={seasonpick_handler}
/>
</div>
<!-- DNFs -->
<div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
<h1 class="mb-2 text-nowrap font-bold">Most DNFs:</h1>
<LazyImage
src={get_by_value(drivers, "id", data.seasonpick?.mostdnfs ?? "")?.headshot_url ??
get_driver_headshot_template(data.graphics)}
imgwidth={DRIVER_HEADSHOT_WIDTH}
imgheight={DRIVER_HEADSHOT_HEIGHT}
containerstyle="height: 115px; margin: auto;"
imgclass="bg-transparent cursor-pointer"
hoverzoom
onclick={seasonpick_handler}
/>
</div>
<!-- Teamwinners -->
<div
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>
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
{#each teamwinners.slice(0, 12) as winner}
<LazyImage
src={winner?.headshot_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>
<!-- WDC + WCC -->
<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">WDC:</h1>
<LazyImage
src={get_by_value(drivers, "id", data.seasonpick?.wdcwinner ?? "")
?.headshot_url ?? get_driver_headshot_template(data.graphics)}
imgwidth={DRIVER_HEADSHOT_WIDTH}
imgheight={DRIVER_HEADSHOT_HEIGHT}
containerstyle="height: 115px; margin: auto;"
imgclass="bg-transparent cursor-pointer"
hoverzoom
onclick={seasonpick_handler}
/>
</div>
<div class="card w-full min-w-40 p-2 pb-0 shadow">
<h1 class="mb-2 text-nowrap font-bold">WCC:</h1>
<LazyImage
src={get_by_value(teams, "id", data.seasonpick?.wccwinner ?? "")?.banner_url ??
get_team_banner_template(data.graphics)}
imgwidth={TEAM_BANNER_WIDTH}
imgheight={TEAM_BANNER_HEIGHT}
containerstyle="height: 80px; margin: auto;"
imgclass="bg-transparent cursor-pointer rounded-md"
hoverzoom
onclick={seasonpick_handler}
/>
</div>
</div>
<!-- Overtakes + DNFs -->
<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">Most Overtakes:</h1>
<LazyImage
src={get_by_value(drivers, "id", data.seasonpick?.mostovertakes ?? "")
?.headshot_url ?? get_driver_headshot_template(data.graphics)}
imgwidth={DRIVER_HEADSHOT_WIDTH}
imgheight={DRIVER_HEADSHOT_HEIGHT}
containerstyle="height: 115px; margin: auto;"
imgclass="bg-transparent cursor-pointer"
hoverzoom
onclick={seasonpick_handler}
/>
</div>
<div class="card w-full min-w-40 p-2 pb-0 shadow">
<h1 class="mb-2 text-nowrap font-bold">Most DNFs:</h1>
<LazyImage
src={get_by_value(drivers, "id", data.seasonpick?.mostdnfs ?? "")?.headshot_url ??
get_driver_headshot_template(data.graphics)}
imgwidth={DRIVER_HEADSHOT_WIDTH}
imgheight={DRIVER_HEADSHOT_HEIGHT}
containerstyle="height: 115px; margin: auto;"
imgclass="bg-transparent cursor-pointer"
hoverzoom
onclick={seasonpick_handler}
/>
</div>
</div>
<!-- Teamwinners + Podiums -->
<div class="mt-2 flex gap-2">
<div class="card max-h-[155px] w-full min-w-40 overflow-y-scroll p-2 shadow">
<h1 class="mb-2 text-nowrap font-bold">Teamwinners:</h1>
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
{#each teamwinners.slice(0, 12) as winner}
<LazyImage
src={winner?.headshot_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">
<h1 class="mb-2 text-nowrap font-bold">Podiums:</h1>
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
{#each podiums as podium}
<LazyImage
src={podium?.headshot_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>
<!-- Podiums -->
<div
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>
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
{#each podiums as podium}
<LazyImage
src={podium?.headshot_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>
{/if}
<!-- Show users that have and have not picked yet -->
<!-- Show users that have picked -->
{#if seasonpicks.length === 0}
<div class="mt-2 flex gap-2">
<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">
Picked ({picked.length}/{currentpicked.length}):
</h1>
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
{#each picked.slice(0, 16) 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
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">
Picked ({picked.length}/{currentpicked.length}):
</h1>
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
{#each picked.slice(0, 16) 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
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.slice(0, 16) 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>
<!-- Show users that have not picked yet -->
<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.slice(0, 16) 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>
{/if}
@ -244,7 +248,7 @@
<div class="mt-4 h-10 w-7 lg:w-36"></div>
<!-- Hottake -->
<div class="card mt-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-36">
<div class="card mt-2 flex h-32 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-36">
<span class="hidden text-nowrap text-sm font-bold lg:block">Hottake</span>
<span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Hottake</span>
</div>
@ -361,7 +365,7 @@
<!-- Hottake -->
<div
class="mt-2 h-20 w-full overflow-y-scroll border bg-surface-300 px-1 py-2 leading-3 lg:px-2"
class="mt-2 h-32 w-full overflow-y-scroll border bg-surface-300 px-1 py-2 leading-3 lg:px-2"
>
<div class="mx-auto w-fit text-xs font-bold lg:text-sm">{hottake?.hottake ?? "?"}</div>
</div>