Seasonpicks: Implement first (rough) seasonpick display page

src/lib/components/LazyImage.svelte

@@ -56,8 +56,8 @@
   use:lazyload
   onLazyVisible={lazy_visible_handler}
   class="overflow-hidden"
-  style="aspect-ratio: {imgwidth} / {imgheight}; {containerstyle ??
-    ''}; max-width: {imgwidth}px; max-height: {imgheight}px"
+  style="aspect-ratio: {imgwidth} / {imgheight}; max-width: {imgwidth}px; max-height: {imgheight}px; {containerstyle ??
+    ''}"
 >
   {#if load}
     {#await fetch_image_base64(src) then data}

src/lib/components/cards/DriverCard.svelte

@@ -147,33 +147,20 @@
   };
 </script>
 
-{#await data.graphics then graphics}
-  <Card
-    imgsrc={driver?.headshot_url ?? get_driver_headshot_template(graphics)}
+<Card
+  imgsrc={driver?.headshot_url ?? get_driver_headshot_template(data.graphics)}
   imgid="headshot_preview"
   width="w-full sm:w-auto"
   imgwidth={DRIVER_HEADSHOT_WIDTH}
   imgheight={DRIVER_HEADSHOT_HEIGHT}
   imgonclick={(event: Event) => modalStore.close()}
-  >
+>
   <div class="flex flex-col gap-2">
     <!-- Driver name input -->
-      <Input
-        bind:value={firstname_input_value}
-        autocomplete="off"
-        {labelwidth}
-        {disabled}
-        {required}
-      >
+    <Input bind:value={firstname_input_value} autocomplete="off" {labelwidth} {disabled} {required}>
       First Name
     </Input>
-      <Input
-        bind:value={lastname_input_value}
-        autocomplete="off"
-        {labelwidth}
-        {disabled}
-        {required}
-      >
+    <Input bind:value={lastname_input_value} autocomplete="off" {labelwidth} {disabled} {required}>
       Last Name
     </Input>
     <Input
@@ -235,5 +222,4 @@
       {/if}
     </div>
   </div>
-  </Card>
-{/await}
+</Card>

src/lib/components/cards/RaceCard.svelte

@@ -173,15 +173,14 @@
   };
 </script>
 
-{#await data.graphics then graphics}
-  <Card
-    imgsrc={race?.pictogram_url ?? get_race_pictogram_template(graphics)}
+<Card
+  imgsrc={race?.pictogram_url ?? get_race_pictogram_template(data.graphics)}
   imgid="pictogram_preview"
   width="w-full sm:w-auto"
   imgwidth={RACE_PICTOGRAM_WIDTH}
   imgheight={RACE_PICTOGRAM_HEIGHT}
   imgonclick={(event: Event) => modalStore.close()}
-  >
+>
   <div class="flex flex-col gap-2">
     <!-- Driver name input -->
     <Input bind:value={name_value} autocomplete="off" {labelwidth} {disabled} {required}>
@@ -269,12 +268,7 @@
 
     <!-- Save/Delete buttons -->
     <div class="flex justify-end gap-2">
-        <Button
-          onclick={clear_sprint}
-          color="secondary"
-          {disabled}
-          width={race ? "w-1/3" : "w-1/2"}
-        >
+      <Button onclick={clear_sprint} color="secondary" {disabled} width={race ? "w-1/3" : "w-1/2"}>
         Remove Sprint
       </Button>
       {#if race}
@@ -289,5 +283,4 @@
       {/if}
     </div>
   </div>
-  </Card>
-{/await}
+</Card>

src/lib/components/cards/RaceResultCard.svelte

@@ -47,7 +47,7 @@
 
   // Reactive state
   let required: boolean = $derived(!result);
-  let disabled: boolean = $derived(!data.admin);
+  let disabled: boolean = $derived(!data.admin); // TODO: Datelock (prevent entering future result)
   let race_select_value: string = $state(result?.race ?? "");
 
   let currentrace: Race | undefined = $derived(

src/lib/components/cards/TeamCard.svelte

@@ -176,15 +176,14 @@
   };
 </script>
 
-{#await data.graphics then graphics}
-  <Card
-    imgsrc={team?.banner_url ?? get_team_banner_template(graphics)}
+<Card
+  imgsrc={team?.banner_url ?? get_team_banner_template(data.graphics)}
   imgid="banner_preview"
   width="w-full sm:w-auto"
   imgwidth={TEAM_BANNER_WIDTH}
   imgheight={TEAM_BANNER_HEIGHT}
   imgonclick={(event: Event) => modalStore.close()}
-  >
+>
   <div class="flex flex-col gap-2">
     <!-- Team name input -->
     <Input bind:value={name_value} autocomplete="off" {labelwidth} {disabled} {required}>
@@ -233,7 +232,7 @@
         <div class="inline-flex flex-nowrap items-center gap-2">
           <span class="font-bold">Upload Logo</span>
           <LazyImage
-              src={team?.logo_url ?? get_team_logo_template(graphics)}
+            src={team?.logo_url ?? get_team_logo_template(data.graphics)}
             id="logo_preview"
             imgwidth={32}
             imgheight={32}
@@ -254,5 +253,4 @@
       {/if}
     </div>
   </div>
-  </Card>
-{/await}
+</Card>

src/lib/fetch.ts

@@ -6,6 +6,8 @@ import type {
   Race,
   RacePick,
   RaceResult,
+  SeasonPick,
+  SeasonPickedUser,
   Substitution,
   Team,
   User,
@@ -142,7 +144,6 @@ export const fetch_currentrace = async (
 export const fetch_racepicks = async (
   fetch: (_: any) => Promise<Response>,
 ): Promise<RacePick[]> => {
-  // Don't expand race/pxx/dnf since we already fetched those
   const racepicks: RacePick[] = await pb
     .collection("racepicks")
     .getFullList({ fetch: fetch, expand: "user" });
@@ -150,6 +151,19 @@ export const fetch_racepicks = async (
   return racepicks;
 };
 
+/**
+ * Fetch all [SeasonPicks] from the database
+ */
+export const fetch_seasonpicks = async (
+  fetch: (_: any) => Promise<Response>,
+): Promise<SeasonPick[]> => {
+  const seasonpicks: SeasonPick[] = await pb
+    .collection("seasonpicks")
+    .getFullList({ fetch: fetch, expand: "user" });
+
+  return seasonpicks;
+};
+
 /**
  * Fetch all [Users] (with the extra field "picked" that is truthy
  * if the user already picked for the current race)
@@ -170,3 +184,23 @@ export const fetch_currentpickedusers = async (
 
   return currentpickedusers;
 };
+
+/**
+ * Fetch all [Users] (with the extra field "picked" that is truthy
+ * if the user already picked for the season) with file URLs for the avatars
+ */
+export const fetch_seasonpickedusers = async (
+  fetch: (_: any) => Promise<Response>,
+): Promise<SeasonPickedUser[]> => {
+  const seasonpickedusers: SeasonPickedUser[] = await pb
+    .collection("seasonpickedusers")
+    .getFullList({ fetch: fetch });
+
+  seasonpickedusers.map((seasonpickeduser: SeasonPickedUser) => {
+    if (seasonpickeduser.avatar) {
+      seasonpickeduser.avatar_url = pb.files.getURL(seasonpickeduser, seasonpickeduser.avatar);
+    }
+  });
+
+  return seasonpickedusers;
+};

src/lib/schema.ts

@@ -77,6 +77,22 @@ export interface RacePick {
   };
 }
 
+export interface SeasonPick {
+  id: string;
+  user: string;
+  hottake: string;
+  wdcwinner: string;
+  wccwinner: string;
+  mostovertakes: string;
+  mostdnfs: string;
+  doohanstarts: number;
+  teamwinners: string[];
+  podiums: string[];
+  expand: {
+    user: User;
+  };
+}
+
 export interface RaceResult {
   id: string;
   race: string;
@@ -93,3 +109,13 @@ export interface CurrentPickedUser {
   admin: boolean;
   picked: boolean;
 }
+
+export interface SeasonPickedUser {
+  id: string;
+  username: string;
+  firstname: string;
+  avatar: string;
+  avatar_url?: string;
+  admin: boolean;
+  picked: boolean;
+}

src/routes/data/users/+page.svelte

@@ -21,7 +21,7 @@
       data_value_name: "avatar_url",
       label: "Avatar",
       valuefun: async (value: string): Promise<string> =>
-        `<img class='rounded-full w-10 bg-surface-400' src='${value ? value : get_by_value(await data.graphics, "name", "driver_headshot_template")?.file_url}'/>`,
+        `<img class='rounded-full w-10 bg-surface-400' src='${value ? value : get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url}'/>`,
     },
     {
       data_value_name: "admin",

src/routes/racepicks/+page.svelte

@@ -131,13 +131,13 @@
 
           <!-- Only show the userguess if signed in -->
           {#if data.user}
-            {#await Promise.all( [data.graphics, data.drivers, racepick], ) then [graphics, drivers, pick]}
+            {#await Promise.all([data.drivers, racepick]) then [drivers, pick]}
               <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", pick?.pxx ?? "")?.headshot_url ??
-                      get_driver_headshot_template(graphics)}
+                      get_driver_headshot_template(data.graphics)}
                     imgwidth={DRIVER_HEADSHOT_WIDTH}
                     imgheight={DRIVER_HEADSHOT_HEIGHT}
                     containerstyle="height: 115px; margin: auto;"
@@ -150,7 +150,7 @@
                   <h1 class="mb-2 text-nowrap font-bold">Your DNF Pick:</h1>
                   <LazyImage
                     src={get_by_value(drivers, "id", pick?.dnf ?? "")?.headshot_url ??
-                      get_driver_headshot_template(graphics)}
+                      get_driver_headshot_template(data.graphics)}
                     imgwidth={DRIVER_HEADSHOT_WIDTH}
                     imgheight={DRIVER_HEADSHOT_HEIGHT}
                     containerstyle="height: 115px; margin: auto;"
@@ -164,7 +164,7 @@
           {/if}
 
           <!-- Show users that have and have not picked yet -->
-          {#await Promise.all( [data.graphics, data.currentpickedusers, pickedusers, outstandingusers], ) then [graphics, currentpicked, picked, outstanding]}
+          {#await Promise.all( [data.currentpickedusers, pickedusers, outstandingusers], ) then [currentpicked, picked, outstanding]}
             <div class="mt-2 flex gap-2">
               <div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
                 <h1 class="text-nowrap font-bold">
@@ -173,7 +173,7 @@
                 <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(graphics)}
+                      src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
                       imgwidth={AVATAR_WIDTH}
                       imgheight={AVATAR_HEIGHT}
                       containerstyle="height: 35px; width: 35px;"
@@ -189,7 +189,7 @@
                 <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(graphics)}
+                      src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
                       imgwidth={AVATAR_WIDTH}
                       imgheight={AVATAR_HEIGHT}
                       containerstyle="height: 35px; width: 35px;"
@@ -254,20 +254,24 @@
       {#each raceresults as result}
         {@const race = get_by_value(races, "id", result.race)}
 
+        <!-- Race name display -->
         <div
           use:popup={race_popupsettings(race?.id ?? "Invalid")}
-          class="card mt-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-36"
+          class="card mt-2 flex h-20 w-7 cursor-pointer flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-36"
         >
+          <!-- For large screens -->
           <span class="hidden text-sm font-bold lg:block">
             {race?.step}: {race?.name}
           </span>
-          <span class="block rotate-90 text-sm font-bold lg:hidden">
-            {race?.name.slice(0, 8)}{(race?.name.length ?? 8) > 8 ? "." : ""}
-          </span>
           <span class="hidden text-sm lg:block">
             Date: {format_date(race?.racedate ?? "", dateformat)}
           </span>
           <span class="hidden text-sm lg:block">Guessed: P{race?.pxx}</span>
+
+          <!-- For small screens -->
+          <span class="block rotate-90 text-xs font-bold lg:hidden">
+            {race?.name.slice(0, 9)}{(race?.name.length ?? 9) > 9 ? "." : ""}
+          </span>
         </div>
 
         <!-- The race result popup is triggered on click on the race -->
@@ -303,6 +307,7 @@
     {/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 -->
@@ -318,15 +323,13 @@
         >
           <!-- Avatar + name display at the top -->
           <div class="mx-auto flex h-10 w-fit">
-            {#await data.graphics then graphics}
             <LazyImage
-                src={user.avatar_url ?? get_driver_headshot_template(graphics)}
+              src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
               imgwidth={AVATAR_WIDTH}
               imgheight={AVATAR_HEIGHT}
               containerstyle="height: 40px; width: 40px;"
               imgclass="bg-surface-400 rounded-full"
             />
-            {/await}
             <div
               style="height: 40px; line-height: 40px;"
               class="ml-2 hidden text-nowrap text-center align-middle lg:block"

src/routes/seasonpicks/+page.svelte

@@ -1,3 +1,276 @@
+<script lang="ts">
+  import {
+    Accordion,
+    AccordionItem,
+    getModalStore,
+    type ModalSettings,
+    type ModalStore,
+  } from "@skeletonlabs/skeleton";
+  import type { PageData } from "./$types";
+  import type { SeasonPick, SeasonPickedUser } from "$lib/schema";
+  import { ChequeredFlagIcon, LazyImage } from "$lib/components";
+  import {
+    get_by_value,
+    get_driver_headshot_template,
+    get_team_banner_template,
+  } from "$lib/database";
+  import {
+    AVATAR_HEIGHT,
+    AVATAR_WIDTH,
+    DRIVER_HEADSHOT_HEIGHT,
+    DRIVER_HEADSHOT_WIDTH,
+    TEAM_BANNER_HEIGHT,
+    TEAM_BANNER_WIDTH,
+  } from "$lib/config";
+
+  let { data }: { data: PageData } = $props();
+
+  const seasonpick: Promise<SeasonPick | undefined> = $derived.by(
+    async () =>
+      (await data.seasonpicks).filter(
+        (seasonpick: SeasonPick) => seasonpick.expand.user.username === data.user?.username,
+      )[0] ?? undefined,
+  );
+
+  const modalStore: ModalStore = getModalStore();
+  const seasonpick_handler = async (event: Event) => {
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "seasonPickcard",
+      meta: {
+        data,
+        seasonpick: await seasonpick,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+</script>
+
 <svelte:head>
   <title>Formula 11 - Season Picks</title>
 </svelte:head>
+
+{#await seasonpick then pick}
+  <Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-2" width="w-full">
+    <AccordionItem>
+      <svelte:fragment slot="lead"><ChequeredFlagIcon /></svelte:fragment>
+      <svelte:fragment slot="summary">
+        <span class="font-bold">Your Season Pick</span>
+      </svelte:fragment>
+      <svelte:fragment slot="content">
+        {pick?.hottake ?? "Invalid"}
+      </svelte:fragment>
+    </AccordionItem>
+  </Accordion>
+{/await}
+
+<!-- The fookin table -->
+<div class="flex">
+  <div>
+    <!-- TODO: Points popup? -->
+    <div class="mt-4 h-10 w-7 lg:w-32"></div>
+
+    <!-- TODO: Show the guess categories like the races in racepicks -->
+    <!-- Hottake -->
+    <div class="card mt-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-32">
+      <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>
+
+    <!-- Drivers Champion -->
+    <div class="card mt-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-32">
+      <span class="hidden text-nowrap text-sm font-bold lg:block">Drivers<br />Champion</span>
+      <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">WDC</span>
+    </div>
+
+    <!-- Constructors Champion -->
+    <div class="card mt-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-32">
+      <span class="hidden text-nowrap text-sm font-bold lg:block">Constructors<br />Champion</span>
+      <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">WCC</span>
+    </div>
+
+    <!-- Overtakes -->
+    <div class="card mt-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-32">
+      <span class="hidden text-nowrap text-sm font-bold lg:block">Most Overtakes</span>
+      <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Overtakes</span>
+    </div>
+
+    <!-- DNFs -->
+    <div class="card mt-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-32">
+      <span class="hidden text-nowrap text-sm font-bold lg:block">Most DNFs</span>
+      <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">DNFs</span>
+    </div>
+
+    <!-- Doohan Starts -->
+    <div class="card mt-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-32">
+      <span class="hidden text-nowrap text-sm font-bold lg:block">Doohan Starts</span>
+      <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Doohan</span>
+    </div>
+
+    <!-- Teamwinners -->
+    <div
+      class="card mt-2 flex h-[360px] w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow sm:h-[220px] md:h-[150px] lg:w-32"
+    >
+      <span class="hidden text-nowrap text-sm font-bold lg:block">Team-Battle<br />Winners</span>
+      <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Teamwin.</span>
+    </div>
+
+    <!-- Podiums -->
+    <div
+      class="card mt-2 flex h-[360px] w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow md:h-[220px] lg:w-32 xl:h-[150px]"
+    >
+      <span class="hidden text-nowrap text-sm font-bold lg:block">Podiums</span>
+      <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Podiums</span>
+    </div>
+  </div>
+
+  <!-- TODO: Datelock the guess display (except hottake for review) -->
+  <div class="flex w-full overflow-x-scroll pb-2">
+    {#await Promise.all( [data.seasonpickedusers, data.seasonpicks, data.drivers, data.teams], ) then [seasonpicked, seasonpicks, drivers, teams]}
+      {#each seasonpicked.filter((user: SeasonPickedUser) => user.picked) as user}
+        {@const pick = seasonpicks.filter((pick: SeasonPick) => pick.user === user.id)[0]}
+        {@const wdcwinner = get_by_value(drivers, "id", pick.wdcwinner)}
+        {@const wccwinner = get_by_value(teams, "id", pick.wccwinner)}
+        {@const mostovertakes = get_by_value(drivers, "id", pick.mostovertakes)}
+        {@const mostdnfs = get_by_value(drivers, "id", pick.mostdnfs)}
+        {@const teamwinners = pick.teamwinners.map((id: string) => get_by_value(drivers, "id", id))}
+        {@const podiums = pick.podiums.map((id: string) => get_by_value(drivers, "id", id))}
+
+        <div
+          class="card ml-1 mt-2 w-full min-w-36 overflow-hidden py-2 shadow lg:ml-2 {data.user &&
+          data.user.username === user.username
+            ? 'bg-primary-300'
+            : ''}"
+        >
+          <!-- Avatar + name display at the top -->
+          <div class="mx-auto flex h-10 w-fit">
+            <LazyImage
+              src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
+              imgwidth={AVATAR_WIDTH}
+              imgheight={AVATAR_HEIGHT}
+              containerstyle="height: 40px; width: 40px;"
+              imgclass="bg-surface-400 rounded-full"
+            />
+            <div
+              style="height: 40px; line-height: 40px;"
+              class="ml-2 hidden text-nowrap text-center align-middle lg:block"
+            >
+              <!-- TODO: Setting to toggle between username or firstname display -->
+              {user.username}
+            </div>
+          </div>
+
+          <!-- 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"
+          >
+            <div class="mx-auto w-fit text-xs lg:text-sm">{pick.hottake}</div>
+          </div>
+
+          <!-- Drivers Champion -->
+          <div class="mt-2 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:px-2">
+            <div class="mx-auto w-fit">
+              <!-- NOTE: The containerstyle should be 64x64, don't know why that doesn't fit... (also below) -->
+              <LazyImage
+                src={wdcwinner?.headshot_url ?? get_driver_headshot_template(data.graphics)}
+                imgwidth={DRIVER_HEADSHOT_HEIGHT}
+                imgheight={DRIVER_HEADSHOT_WIDTH}
+                containerstyle="height: 62px;"
+                imgclass="bg-surface-400 rounded-md"
+              />
+            </div>
+          </div>
+
+          <!-- Constructors Champion -->
+          <div class="mt-2 h-20 w-full border bg-surface-300 p-1 px-1 py-2 leading-3 lg:px-2">
+            <div class="mx-auto w-fit">
+              <LazyImage
+                src={wccwinner?.banner_url ?? get_team_banner_template(data.graphics)}
+                imgwidth={TEAM_BANNER_WIDTH}
+                imgheight={TEAM_BANNER_HEIGHT}
+                containerstyle="height: 62px;"
+                imgclass="bg-surface-400 rounded-md"
+              />
+            </div>
+          </div>
+
+          <!-- Most Overtakes -->
+          <div class="mt-2 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:px-2">
+            <div class="mx-auto w-fit">
+              <LazyImage
+                src={mostovertakes?.headshot_url ?? get_driver_headshot_template(data.graphics)}
+                imgwidth={DRIVER_HEADSHOT_HEIGHT}
+                imgheight={DRIVER_HEADSHOT_WIDTH}
+                containerstyle="height: 62px;"
+                imgclass="bg-surface-400 rounded-md"
+              />
+            </div>
+          </div>
+
+          <!-- Most DNFs -->
+          <div class="mt-2 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:px-2">
+            <div class="mx-auto w-fit">
+              <LazyImage
+                src={mostdnfs?.headshot_url ?? get_driver_headshot_template(data.graphics)}
+                imgwidth={DRIVER_HEADSHOT_HEIGHT}
+                imgheight={DRIVER_HEADSHOT_WIDTH}
+                containerstyle="height: 62px;"
+                imgclass="bg-surface-400 rounded-md"
+              />
+            </div>
+          </div>
+
+          <!-- Doohan Starts -->
+          <div class="mt-2 h-20 w-full border bg-surface-300 p-1 px-1 py-2 leading-3 lg:px-2">
+            <div class="mx-auto w-fit text-xs lg:text-sm">
+              Jack Doohan startet <span class="font-bold">{pick.doohanstarts}</span> mal.
+            </div>
+          </div>
+
+          <!-- Teamwinners -->
+          <!-- TODO: The grid spacing is not correct (too much space in the middle). Also for the grid below... -->
+          <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"
+          >
+            <div
+              class="grid gap-2"
+              style="grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); grid-template-rows: repeat(auto, 62px);"
+            >
+              {#each teamwinners as teamwinner}
+                <LazyImage
+                  src={teamwinner?.headshot_url ?? get_driver_headshot_template(data.graphics)}
+                  imgwidth={DRIVER_HEADSHOT_HEIGHT}
+                  imgheight={DRIVER_HEADSHOT_WIDTH}
+                  containerstyle="height: 62px;"
+                  imgclass="bg-surface-400 rounded-md"
+                />
+              {/each}
+            </div>
+          </div>
+
+          <!-- Podiums -->
+          <!-- TODO: Replace all style tags with custom classes like height here -->
+          <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]"
+          >
+            <div
+              class="mx-auto grid gap-2"
+              style="grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));"
+            >
+              {#each podiums as podium}
+                <LazyImage
+                  src={podium?.headshot_url ?? get_driver_headshot_template(data.graphics)}
+                  imgwidth={DRIVER_HEADSHOT_HEIGHT}
+                  imgheight={DRIVER_HEADSHOT_WIDTH}
+                  containerstyle="height: 62px; width: 62px;"
+                  imgclass="bg-surface-400 rounded-md"
+                />
+              {/each}
+            </div>
+          </div>
+        </div>
+      {/each}
+    {/await}
+  </div>
+</div>

src/routes/seasonpicks/+page.ts

@@ -0,0 +1,13 @@
+import { fetch_drivers, fetch_seasonpickedusers, fetch_seasonpicks, fetch_teams } from "$lib/fetch";
+import type { PageLoad } from "../$types";
+
+export const load: PageLoad = async ({ fetch, depends }) => {
+  depends("data:teams", "data:drivers", "data:seasonpicks");
+
+  return {
+    teams: fetch_teams(fetch),
+    drivers: fetch_drivers(fetch),
+    seasonpicks: fetch_seasonpicks(fetch),
+    seasonpickedusers: fetch_seasonpickedusers(fetch),
+  };
+};