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,93 +147,79 @@
   };
 </script>
 
-{#await data.graphics then graphics}
-  <Card
-    imgsrc={driver?.headshot_url ?? get_driver_headshot_template(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}
-      >
-        First Name
-      </Input>
-      <Input
-        bind:value={lastname_input_value}
-        autocomplete="off"
-        {labelwidth}
-        {disabled}
-        {required}
-      >
-        Last Name
-      </Input>
-      <Input
-        bind:value={code_input_value}
-        autocomplete="off"
-        minlength={3}
-        maxlength={3}
-        {labelwidth}
-        {disabled}
-        {required}
-      >
-        Driver Code
-      </Input>
+<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}>
+      First Name
+    </Input>
+    <Input bind:value={lastname_input_value} autocomplete="off" {labelwidth} {disabled} {required}>
+      Last Name
+    </Input>
+    <Input
+      bind:value={code_input_value}
+      autocomplete="off"
+      minlength={3}
+      maxlength={3}
+      {labelwidth}
+      {disabled}
+      {required}
+    >
+      Driver Code
+    </Input>
 
-      <!-- Driver team input -->
-      {#await data.teams then teams}
-        <Dropdown
-          bind:value={team_select_value}
-          options={team_dropdown_options(teams)}
-          {labelwidth}
+    <!-- Driver team input -->
+    {#await data.teams then teams}
+      <Dropdown
+        bind:value={team_select_value}
+        options={team_dropdown_options(teams)}
+        {labelwidth}
+        {disabled}
+        {required}
+      >
+        Team
+      </Dropdown>
+    {/await}
+
+    <!-- Headshot upload -->
+    <FileDropzone
+      name="headshot"
+      bind:files={headshot_file_value}
+      onchange={get_image_preview_event_handler("headshot_preview")}
+      {disabled}
+      {required}
+    >
+      <svelte:fragment slot="message">
+        <span class="font-bold">Upload Headshot</span>
+      </svelte:fragment>
+    </FileDropzone>
+
+    <!-- Save/Delete buttons -->
+    <div class="flex items-center justify-end gap-2">
+      <div class="mr-auto">
+        <SlideToggle
+          name="active"
+          background="bg-primary-500"
+          active="bg-tertiary-500"
+          bind:checked={active_value}
           {disabled}
-          {required}
-        >
-          Team
-        </Dropdown>
-      {/await}
-
-      <!-- Headshot upload -->
-      <FileDropzone
-        name="headshot"
-        bind:files={headshot_file_value}
-        onchange={get_image_preview_event_handler("headshot_preview")}
-        {disabled}
-        {required}
-      >
-        <svelte:fragment slot="message">
-          <span class="font-bold">Upload Headshot</span>
-        </svelte:fragment>
-      </FileDropzone>
-
-      <!-- Save/Delete buttons -->
-      <div class="flex items-center justify-end gap-2">
-        <div class="mr-auto">
-          <SlideToggle
-            name="active"
-            background="bg-primary-500"
-            active="bg-tertiary-500"
-            bind:checked={active_value}
-            {disabled}
-          />
-        </div>
-        {#if driver}
-          <Button onclick={update_driver()} color="secondary" {disabled} width="w-1/2">Save</Button>
-          <Button onclick={delete_driver} color="primary" {disabled} width="w-1/2">Delete</Button>
-        {:else}
-          <Button onclick={update_driver(true)} color="tertiary" {disabled} width="w-full">
-            Create Driver
-          </Button>
-        {/if}
+        />
       </div>
+      {#if driver}
+        <Button onclick={update_driver()} color="secondary" {disabled} width="w-1/2">Save</Button>
+        <Button onclick={delete_driver} color="primary" {disabled} width="w-1/2">Delete</Button>
+      {:else}
+        <Button onclick={update_driver(true)} color="tertiary" {disabled} width="w-full">
+          Create Driver
+        </Button>
+      {/if}
     </div>
-  </Card>
-{/await}
+  </div>
+</Card>

src/lib/components/cards/RaceCard.svelte

@@ -173,121 +173,114 @@
   };
 </script>
 
-{#await data.graphics then graphics}
-  <Card
-    imgsrc={race?.pictogram_url ?? get_race_pictogram_template(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}>
-        Name
-      </Input>
-      <Input
-        bind:value={step_value}
-        autocomplete="off"
-        type="number"
-        min={1}
-        max={24}
-        {labelwidth}
-        {disabled}
-        {required}
-      >
-        Step
-      </Input>
-      <Input
-        bind:value={pxx_value}
-        autocomplete="off"
-        type="number"
-        min={1}
-        max={20}
-        {labelwidth}
-        {disabled}
-        {required}
-      >
-        PXX
-      </Input>
+<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}>
+      Name
+    </Input>
+    <Input
+      bind:value={step_value}
+      autocomplete="off"
+      type="number"
+      min={1}
+      max={24}
+      {labelwidth}
+      {disabled}
+      {required}
+    >
+      Step
+    </Input>
+    <Input
+      bind:value={pxx_value}
+      autocomplete="off"
+      type="number"
+      min={1}
+      max={20}
+      {labelwidth}
+      {disabled}
+      {required}
+    >
+      PXX
+    </Input>
 
-      <!-- NOTE: Input datetime-local accepts YYYY-mm-ddTHH:MM format -->
-      <Input
-        id="sqdate"
-        bind:value={sprintqualidate_value}
-        autocomplete="off"
-        type="datetime-local"
-        {labelwidth}
-        {disabled}
-      >
-        SQuali
-      </Input>
-      <Input
-        id="sdate"
-        bind:value={sprintdate_value}
-        autocomplete="off"
-        type="datetime-local"
-        {labelwidth}
-        {disabled}
-      >
-        SRace
-      </Input>
-      <Input
-        bind:value={qualidate_value}
-        autocomplete="off"
-        type="datetime-local"
-        {labelwidth}
-        {disabled}
-        {required}
-      >
-        Quali
-      </Input>
-      <Input
-        bind:value={racedate_value}
-        autocomplete="off"
-        type="datetime-local"
-        {labelwidth}
-        {disabled}
-        {required}
-      >
-        Race
-      </Input>
+    <!-- NOTE: Input datetime-local accepts YYYY-mm-ddTHH:MM format -->
+    <Input
+      id="sqdate"
+      bind:value={sprintqualidate_value}
+      autocomplete="off"
+      type="datetime-local"
+      {labelwidth}
+      {disabled}
+    >
+      SQuali
+    </Input>
+    <Input
+      id="sdate"
+      bind:value={sprintdate_value}
+      autocomplete="off"
+      type="datetime-local"
+      {labelwidth}
+      {disabled}
+    >
+      SRace
+    </Input>
+    <Input
+      bind:value={qualidate_value}
+      autocomplete="off"
+      type="datetime-local"
+      {labelwidth}
+      {disabled}
+      {required}
+    >
+      Quali
+    </Input>
+    <Input
+      bind:value={racedate_value}
+      autocomplete="off"
+      type="datetime-local"
+      {labelwidth}
+      {disabled}
+      {required}
+    >
+      Race
+    </Input>
 
-      <!-- Headshot upload -->
-      <FileDropzone
-        name="pictogram"
-        onchange={get_image_preview_event_handler("pictogram_preview")}
-        bind:files={pictogram_value}
-        {disabled}
-        {required}
-      >
-        <svelte:fragment slot="message">
-          <span class="font-bold">Upload Pictogram</span>
-        </svelte:fragment>
-      </FileDropzone>
+    <!-- Headshot upload -->
+    <FileDropzone
+      name="pictogram"
+      onchange={get_image_preview_event_handler("pictogram_preview")}
+      bind:files={pictogram_value}
+      {disabled}
+      {required}
+    >
+      <svelte:fragment slot="message">
+        <span class="font-bold">Upload Pictogram</span>
+      </svelte:fragment>
+    </FileDropzone>
 
-      <!-- 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"}
-        >
-          Remove Sprint
+    <!-- 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"}>
+        Remove Sprint
+      </Button>
+      {#if race}
+        <Button onclick={update_race()} color="secondary" {disabled} width="w-1/3">
+          Save Changes
         </Button>
-        {#if race}
-          <Button onclick={update_race()} color="secondary" {disabled} width="w-1/3">
-            Save Changes
-          </Button>
-          <Button onclick={delete_race} color="primary" {disabled} width="w-1/3">Delete</Button>
-        {:else}
-          <Button onclick={update_race(true)} color="tertiary" {disabled} width="w-1/2">
-            Create Race
-          </Button>
-        {/if}
-      </div>
+        <Button onclick={delete_race} color="primary" {disabled} width="w-1/3">Delete</Button>
+      {:else}
+        <Button onclick={update_race(true)} color="tertiary" {disabled} width="w-1/2">
+          Create Race
+        </Button>
+      {/if}
     </div>
-  </Card>
-{/await}
+  </div>
+</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,83 +176,81 @@
   };
 </script>
 
-{#await data.graphics then graphics}
-  <Card
-    imgsrc={team?.banner_url ?? get_team_banner_template(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}>
-        Name
-      </Input>
+<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}>
+      Name
+    </Input>
 
-      <!-- Team color input -->
-      <Input
-        bind:value={color_value}
-        autocomplete="off"
-        placeholder="Enter as '#XXXXXX'"
-        minlength={7}
-        maxlength={7}
-        {labelwidth}
-        {disabled}
-        {required}
-      >
-        Color
-        <span class="badge ml-2 border" style="color: {color_value}; background: {color_value}">
-          C
-        </span>
-      </Input>
+    <!-- Team color input -->
+    <Input
+      bind:value={color_value}
+      autocomplete="off"
+      placeholder="Enter as '#XXXXXX'"
+      minlength={7}
+      maxlength={7}
+      {labelwidth}
+      {disabled}
+      {required}
+    >
+      Color
+      <span class="badge ml-2 border" style="color: {color_value}; background: {color_value}">
+        C
+      </span>
+    </Input>
 
-      <!-- Banner upload -->
-      <FileDropzone
-        name="banner"
-        bind:files={banner_value}
-        onchange={get_image_preview_event_handler("banner_preview")}
-        {disabled}
-        {required}
-      >
-        <svelte:fragment slot="message">
-          <span class="font-bold">Upload Banner</span>
-        </svelte:fragment>
-      </FileDropzone>
+    <!-- Banner upload -->
+    <FileDropzone
+      name="banner"
+      bind:files={banner_value}
+      onchange={get_image_preview_event_handler("banner_preview")}
+      {disabled}
+      {required}
+    >
+      <svelte:fragment slot="message">
+        <span class="font-bold">Upload Banner</span>
+      </svelte:fragment>
+    </FileDropzone>
 
-      <!-- Logo upload -->
-      <FileDropzone
-        name="logo"
-        bind:files={logo_value}
-        onchange={get_image_preview_event_handler("logo_preview")}
-        {disabled}
-        {required}
-      >
-        <svelte:fragment slot="message">
-          <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)}
-              id="logo_preview"
-              imgwidth={32}
-              imgheight={32}
-            />
-          </div>
-        </svelte:fragment>
-      </FileDropzone>
+    <!-- Logo upload -->
+    <FileDropzone
+      name="logo"
+      bind:files={logo_value}
+      onchange={get_image_preview_event_handler("logo_preview")}
+      {disabled}
+      {required}
+    >
+      <svelte:fragment slot="message">
+        <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(data.graphics)}
+            id="logo_preview"
+            imgwidth={32}
+            imgheight={32}
+          />
+        </div>
+      </svelte:fragment>
+    </FileDropzone>
 
-      <!-- Save/Delete buttons -->
-      <div class="flex justify-end gap-2">
-        {#if team}
-          <Button onclick={update_team()} color="secondary" {disabled} width="w-1/2">Save</Button>
-          <Button onclick={delete_team} color="primary" {disabled} width="w-1/2">Delete</Button>
-        {:else}
-          <Button onclick={update_team(true)} color="tertiary" {disabled} width="w-full">
-            Create Team
-          </Button>
-        {/if}
-      </div>
+    <!-- Save/Delete buttons -->
+    <div class="flex justify-end gap-2">
+      {#if team}
+        <Button onclick={update_team()} color="secondary" {disabled} width="w-1/2">Save</Button>
+        <Button onclick={delete_team} color="primary" {disabled} width="w-1/2">Delete</Button>
+      {:else}
+        <Button onclick={update_team(true)} color="tertiary" {disabled} width="w-full">
+          Create Team
+        </Button>
+      {/if}
     </div>
-  </Card>
-{/await}
+  </div>
+</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)}
-                imgwidth={AVATAR_WIDTH}
-                imgheight={AVATAR_HEIGHT}
-                containerstyle="height: 40px; width: 40px;"
-                imgclass="bg-surface-400 rounded-full"
-              />
-            {/await}
+            <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"

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),
+  };
+};