Lib: Simplify RacePickCard

src/lib/components/cards/RacePickCard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Card, Button, Dropdown } from "$lib/components";
-  import type { Driver, Race, RacePick, User } from "$lib/schema";
+  import type { Driver, Race, RacePick, Substitution } from "$lib/schema";
-  import { get_by_value } from "$lib/database";
+  import { get_by_value, get_driver_headshot_template } from "$lib/database";
   import type { Action } from "svelte/action";
   import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
   import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
@@ -9,158 +9,158 @@
   import { enhance } from "$app/forms";
 
   interface RacePickCardProps {
+    /** Data passed from the page context */
+    data: any;
+
     /** The [RacePick] object used to prefill values. */
-    racepick?: RacePick | undefined;
+    racepick?: RacePick;
-
-    /** The [Race] object containing the place to guess */
-    currentrace: Race | null;
-
-    /** The [User] currently logged in */
-    user?: User;
-
-    /** The drivers (to display the headshot) */
-    drivers: Driver[];
-
-    /** Disable all inputs if [true] */
-    disable_inputs?: boolean;
-
-    /** The [src] of the driver headshot template preview */
-    headshot_template?: string;
-
-    /** The value this component's pxx select dropdown will bind to */
-    pxx_select_value: string;
-
-    /** The value this component's dnf select dropdown will bind to */
-    dnf_select_value: string;
   }
 
-  let {
+  let { data, racepick = undefined }: RacePickCardProps = $props();
-    racepick = undefined,
-    currentrace = null,
-    user = undefined,
-    drivers,
-    disable_inputs = false,
-    headshot_template = "",
-    pxx_select_value,
-    dnf_select_value,
-  }: RacePickCardProps = $props();
 
   const modalStore: ModalStore = getModalStore();
   if ($modalStore[0].meta) {
     const meta = $modalStore[0].meta;
 
-    // Stuff thats required for the "update" card
+    data = meta.data;
     racepick = meta.racepick;
-    currentrace = meta.currentrace;
-    user = meta.user;
-    drivers = meta.drivers;
-    disable_inputs = meta.disable_inputs;
-    headshot_template = meta.headshot_template;
-    pxx_select_value = meta.pxx_select_value;
-    dnf_select_value = meta.dnf_select_value;
   }
 
-  // This action is used on the <Dropdown> element.
+  // This is executed on mount of the element specifying the "action"
-  // It will trigger once the Dropdown's <input> elements is mounted.
-  // This way we'll receive a reference to the object so we can register our event handler.
   const register_pxx_preview_handler: Action = (node: HTMLElement) => {
     node.addEventListener("DropdownChange", update_pxx_preview);
   };
 
   // This event handler is registered to the Dropdown's <input> element through the action above.
-  const update_pxx_preview = (event: Event) => {
+  const update_pxx_preview = async (event: Event) => {
     const target: HTMLInputElement = event.target as HTMLInputElement;
 
-    // The option "label" gets put into the Dropdown's input value,
+    const src: string =
-    // so we need to lookup the driver by "code".
+      get_by_value<Driver>(await data.drivers, "code", target.value)?.headshot_url || "";
-    const src: string = get_by_value(drivers, "code", target.value)?.headshot_url || "";
+    (document.getElementById("headshot_preview") as HTMLImageElement).src = src;
-    if (src) {
-      const preview: HTMLImageElement = document.getElementById(
-        `update_substitution_headshot_preview_${racepick?.id ?? "create"}`,
-      ) as HTMLImageElement;
-
-      if (preview) preview.src = src;
-    }
   };
+
+  const required: boolean = $derived(!racepick);
+  const disabled: boolean = $derived(!data.admin);
+  const labelwidth: string = "60px";
+
+  const active_drivers_and_substitutes: Promise<Driver[]> = $derived.by(async () => {
+    if (!data.currentrace) return [];
+
+    let drivers: Driver[] = await data.drivers;
+    let substitutions: Substitution[] = await data.substitutions;
+
+    let active_and_substitutes: Driver[] = drivers.filter((driver: Driver) => driver.active);
+
+    substitutions
+      .filter((substitution: Substitution) => substitution.race === data.currentrace?.id)
+      .forEach((substitution: Substitution) => {
+        const for_index = active_and_substitutes.findIndex(
+          (driver: Driver) => driver.id === substitution.for,
+        );
+        const sub_index = drivers.findIndex(
+          (driver: Driver) => driver.id === substitution.substitute,
+        );
+
+        active_and_substitutes[for_index] = drivers[sub_index];
+      });
+
+    return active_and_substitutes.sort((a: Driver, b: Driver) => a.code.localeCompare(b.code));
+  });
+
+  let pxx_select_value: string = $state(racepick?.pxx ?? "");
+  let dnf_select_value: string = $state(racepick?.dnf ?? "");
 </script>
 
-<Card
+{#await data.graphics then graphics}
-  imgsrc={get_by_value(drivers, "id", racepick?.pxx ?? "")?.headshot_url ?? headshot_template}
+  {#await data.drivers then drivers}
-  imgid="update_substitution_headshot_preview_{racepick?.id ?? 'create'}"
+    <Card
-  width="w-full sm:w-auto"
+      imgsrc={get_by_value<Driver>(drivers, "id", racepick?.pxx ?? "")?.headshot_url ??
-  imgwidth={DRIVER_HEADSHOT_WIDTH}
+        get_driver_headshot_template(graphics)}
-  imgheight={DRIVER_HEADSHOT_HEIGHT}
+      imgid="headshot_preview"
-  imgonclick={(event: Event) => modalStore.close()}
+      width="w-full sm:w-auto"
->
+      imgwidth={DRIVER_HEADSHOT_WIDTH}
-  <form method="POST" enctype="multipart/form-data" use:enhance>
+      imgheight={DRIVER_HEADSHOT_HEIGHT}
-    <!-- This is also disabled, because the ID should only be -->
+      imgonclick={(event: Event) => modalStore.close()}
-    <!-- "leaked" to users that are allowed to use the inputs -->
+    >
-    {#if racepick && !disable_inputs}
+      <form
-      <input name="id" type="hidden" value={racepick.id} />
+        method="POST"
-    {/if}
+        enctype="multipart/form-data"
-
+        use:enhance
-    <input name="user" type="hidden" value={user?.id} />
+        onsubmit={() => modalStore.close()}
-    <input name="race" type="hidden" value={currentrace?.id} />
-
-    <div class="flex flex-col gap-2">
-      <!-- PXX select -->
-      <Dropdown
-        name="pxx"
-        input_variable={pxx_select_value}
-        action={register_pxx_preview_handler}
-        options={driver_dropdown_options(drivers)}
-        labelwidth="60px"
-        disabled={disable_inputs}
       >
-        P{currentrace?.pxx ?? "XX"}
+        <!-- This is also disabled, because the ID should only be -->
-      </Dropdown>
+        <!-- "leaked" to users that are allowed to use the inputs -->
-
+        {#if racepick && !disabled}
-      <!-- DNF select -->
+          <input name="id" type="hidden" value={racepick.id} />
-      <Dropdown
-        name="dnf"
-        input_variable={dnf_select_value}
-        options={driver_dropdown_options(drivers)}
-        labelwidth="60px"
-        disabled={disable_inputs}
-      >
-        DNF
-      </Dropdown>
-
-      <!-- Save/Delete buttons -->
-      <div class="flex justify-end gap-2">
-        {#if racepick}
-          <Button
-            formaction="?/update_racepick"
-            color="secondary"
-            disabled={disable_inputs}
-            submit
-            width="w-1/2"
-            onclick={() => modalStore.close()}
-          >
-            Save Changes
-          </Button>
-          <Button
-            color="primary"
-            submit
-            disabled={disable_inputs}
-            formaction="?/delete_racepick"
-            width="w-1/2"
-            onclick={() => modalStore.close()}
-          >
-            Delete
-          </Button>
-        {:else}
-          <Button
-            formaction="?/create_racepick"
-            color="tertiary"
-            submit
-            width="w-full"
-            onclick={() => modalStore.close()}
-          >
-            Make Pick
-          </Button>
         {/if}
-      </div>
+
-    </div>
+        <input name="user" type="hidden" value={data.user?.id} />
-  </form>
+        <input name="race" type="hidden" value={data.currentrace?.id} />
-</Card>
+
+        <div class="flex flex-col gap-2">
+          <!-- PXX select -->
+          {#await active_drivers_and_substitutes then pxx_drivers}
+            <Dropdown
+              name="pxx"
+              input_variable={pxx_select_value}
+              action={register_pxx_preview_handler}
+              options={driver_dropdown_options(pxx_drivers)}
+              {labelwidth}
+              {disabled}
+            >
+              P{data.currentrace?.pxx ?? "XX"}
+            </Dropdown>
+          {/await}
+
+          <!-- DNF select -->
+          {#await active_drivers_and_substitutes then pxx_drivers}
+            <Dropdown
+              name="dnf"
+              input_variable={dnf_select_value}
+              options={driver_dropdown_options(pxx_drivers)}
+              {labelwidth}
+              {disabled}
+            >
+              DNF
+            </Dropdown>
+          {/await}
+
+          <!-- Save/Delete buttons -->
+          <div class="flex justify-end gap-2">
+            {#if racepick}
+              <Button
+                formaction="?/update_racepick"
+                color="secondary"
+                {disabled}
+                submit
+                width="w-1/2"
+              >
+                Save Changes
+              </Button>
+              <Button
+                formaction="?/delete_racepick"
+                color="primary"
+                {disabled}
+                submit
+                width="w-1/2"
+              >
+                Delete
+              </Button>
+            {:else}
+              <Button
+                formaction="?/create_racepick"
+                color="tertiary"
+                {disabled}
+                submit
+                width="w-full"
+              >
+                Make Pick
+              </Button>
+            {/if}
+          </div>
+        </div>
+      </form>
+    </Card>
+  {/await}
+{/await}

src/routes/racepicks/+page.svelte

@@ -19,13 +19,13 @@
     RACE_PICTOGRAM_HEIGHT,
     RACE_PICTOGRAM_WIDTH,
   } from "$lib/config";
-  import type { CurrentPickedUser, Driver, RacePick, Substitution } from "$lib/schema";
+  import type { CurrentPickedUser, RacePick } from "$lib/schema";
   import { get_by_value, get_driver_headshot_template } from "$lib/database";
   import { format } from "date-fns";
 
   let { data }: { data: PageData } = $props();
 
-  const currentpick: RacePick | undefined = $derived(
+  const racepick: RacePick | undefined = $derived(
     data.racepicks.filter(
       (racepick: RacePick) =>
         racepick.expand.user.username === data.user?.username &&
@@ -33,58 +33,28 @@
     )[0] ?? undefined,
   );
 
-  const pxx_select_value: string = $derived(currentpick?.pxx ?? "");
-  const dnf_select_value: string = $derived(currentpick?.dnf ?? "");
-
-  const active_drivers_and_substitutes: Promise<Driver[]> = $derived.by(async () => {
-    if (!data.currentrace) return [];
-
-    let drivers: Driver[] = await data.drivers;
-    let substitutions: Substitution[] = await data.substitutions;
-
-    let active_and_substitutes: Driver[] = drivers.filter((driver: Driver) => driver.active);
-
-    substitutions
-      .filter((substitution: Substitution) => substitution.race === data.currentrace?.id)
-      .forEach((substitution: Substitution) => {
-        const for_index = active_and_substitutes.findIndex(
-          (driver: Driver) => driver.id === substitution.for,
-        );
-        const sub_index = drivers.findIndex(
-          (driver: Driver) => driver.id === substitution.substitute,
-        );
-
-        active_and_substitutes[for_index] = drivers[sub_index];
-      });
-
-    return active_and_substitutes.sort((a: Driver, b: Driver) => a.code.localeCompare(b.code));
-  });
-
   const modalStore: ModalStore = getModalStore();
-  const create_guess_handler = async (event: Event) => {
+  const racepick_handler = async (event: Event) => {
     const modalSettings: ModalSettings = {
       type: "component",
       component: "racePickCard",
       meta: {
-        racepick: currentpick,
+        data,
-        currentrace: data.currentrace,
+        racepick,
-        user: data.user,
-        drivers: await active_drivers_and_substitutes,
-        disable_inputs: false, // TODO: Datelock
-        headshot_template: get_driver_headshot_template(await data.graphics),
-        pxx_select_value: pxx_select_value,
-        dnf_select_value: dnf_select_value,
       },
     };
 
     modalStore.trigger(modalSettings);
   };
 
+  // Users that have already picked the current race
   let pickedusers: CurrentPickedUser[] = $derived(
     data.currentpickedusers.filter(
       (currentpickeduser: CurrentPickedUser) => currentpickeduser.picked,
     ),
   );
+
+  // Users that didn't already pick the current race
   let outstandingusers: CurrentPickedUser[] = $derived(
     data.currentpickedusers.filter(
       (currentpickeduser: CurrentPickedUser) => !currentpickeduser.picked,
@@ -114,7 +84,7 @@
         <!-- Show information about the next race -->
         <div class="justify-center gap-2 lg:flex">
           <div class="mt-2 flex gap-2">
-            <div class="card flex w-full flex-col p-2 shadow">
+            <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>
@@ -143,13 +113,13 @@
                 <Countdown date={data.currentrace.racedate} extraclass="font-bold" />
               </div>
             </div>
-            <div class="card w-full p-2 shadow">
+            <div class="card w-full min-w-40 p-2 shadow">
-              <span class="text-nowrap font-bold">Track Layout:</span>
+              <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: 115px; margin: auto;"
+                containerstyle="height: 105px; margin: auto;"
                 imgstyle="background: transparent;"
               />
             </div>
@@ -158,36 +128,36 @@
           <!-- Only show the userguess if signed in -->
           {#if data.user}
             <div class="mt-2 flex gap-2">
-              <div class="card w-full 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>
                 {#await data.graphics then graphics}
                   {#await data.drivers then drivers}
                     <LazyImage
-                      src={get_by_value(drivers, "id", currentpick?.pxx ?? "")?.headshot_url ??
+                      src={get_by_value(drivers, "id", racepick?.pxx ?? "")?.headshot_url ??
                         get_driver_headshot_template(graphics)}
                       imgwidth={DRIVER_HEADSHOT_WIDTH}
                       imgheight={DRIVER_HEADSHOT_HEIGHT}
                       containerstyle="height: 115px; margin: auto;"
                       imgclass="bg-transparent cursor-pointer"
                       hoverzoom
-                      onclick={create_guess_handler}
+                      onclick={racepick_handler}
                     />
                   {/await}
                 {/await}
               </div>
-              <div class="card w-full 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 DNF Pick:</h1>
                 {#await data.graphics then graphics}
                   {#await data.drivers then drivers}
                     <LazyImage
-                      src={get_by_value(drivers, "id", currentpick?.dnf ?? "")?.headshot_url ??
+                      src={get_by_value(drivers, "id", racepick?.dnf ?? "")?.headshot_url ??
                         get_driver_headshot_template(graphics)}
                       imgwidth={DRIVER_HEADSHOT_WIDTH}
                       imgheight={DRIVER_HEADSHOT_HEIGHT}
                       containerstyle="height: 115px; margin: auto;"
                       imgclass="bg-transparent cursor-pointer"
                       hoverzoom
-                      onclick={create_guess_handler}
+                      onclick={racepick_handler}
                     />
                   {/await}
                 {/await}
@@ -197,7 +167,7 @@
 
           <!-- Show users that have and have not picked yet -->
           <div class="mt-2 flex gap-2">
-            <div class="card w-full p-2 shadow">
+            <div class="card w-full min-w-40 p-2 shadow">
               <h1 class="text-nowrap font-bold">
                 Picked ({pickedusers.length}/{data.currentpickedusers.length}):
               </h1>
@@ -215,7 +185,7 @@
                 {/await}
               </div>
             </div>
-            <div class="card w-full p-2 shadow">
+            <div class="card w-full min-w-40 p-2 shadow">
               <h1 class="text-nowrap font-bold">
                 Outstanding ({outstandingusers.length}/{data.currentpickedusers.length}):
               </h1>
@@ -404,12 +374,3 @@
     {/each}
   </div>
 </div>
-
-<!-- "Table" of past guesses (not an actual table this time): -->
-<!-- - Left column (rounded div column with race information: name, step, pxx) -->
-<!--   - Show full result on-click? -->
-<!-- - Rounded middle block (rest of width) with guesses: -->
-<!--   - Just avatar at the top (reduce width) with points below, username on hover? -->
-<!--   - Color-coded compact pxx + dnf picks (with podium + skull icons to differentiate?) -->
-
-<!-- Make 2 variations (races as rows and races as columns) + settings toggle? -->