From 0add3977164e25d119332bad1143eab5b9b505f7 Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Tue, 28 Jan 2025 20:40:16 +0100
Subject: [PATCH] Data/Season: Display avatars of users that did and didn't
 pick the current race

---
 src/routes/racepicks/+page.svelte | 176 +++++++++++++++---------------
 1 file changed, 88 insertions(+), 88 deletions(-)

diff --git a/src/routes/racepicks/+page.svelte b/src/routes/racepicks/+page.svelte
index 93a21fc..84e1f54 100644
--- a/src/routes/racepicks/+page.svelte
+++ b/src/routes/racepicks/+page.svelte
@@ -9,12 +9,14 @@
   } from "@skeletonlabs/skeleton";
   import type { PageData } from "./$types";
   import {
+    AVATAR_HEIGHT,
+    AVATAR_WIDTH,
     DRIVER_HEADSHOT_HEIGHT,
     DRIVER_HEADSHOT_WIDTH,
     RACE_PICTOGRAM_HEIGHT,
     RACE_PICTOGRAM_WIDTH,
   } from "$lib/config";
-  import type { Driver, Race, RacePick } from "$lib/schema";
+  import type { CurrentPickedUser, Driver, Race, RacePick } from "$lib/schema";
   import { get_by_value } from "$lib/database";
 
   let { data }: { data: PageData } = $props();
@@ -66,24 +68,28 @@
   const race = (id: string): Race | undefined => get_by_value(data.races, "id", id);
   const driver = (id: string): Driver | undefined => get_by_value(data.drivers, "id", id);
 
-  // const pickedusers = data.currentpickedusers.filter(
-  //   (currentpickeduser: CurrentPickedUser) => currentpickeduser.picked,
-  // );
-  // const outstandingusers = data.currentpickedusers.filter(
-  //   (currentpickeduser: CurrentPickedUser) => !currentpickeduser.picked,
-  // );
+  const pickedusers = data.currentpickedusers.filter(
+    (currentpickeduser: CurrentPickedUser) => currentpickeduser.picked,
+  );
+  const outstandingusers = data.currentpickedusers.filter(
+    (currentpickeduser: CurrentPickedUser) => !currentpickeduser.picked,
+  );
 </script>
 
 <!-- TODO: This thing must display the boxes as a column on mobile -->
 {#if data.currentrace}
-  <Accordion class="card bg-tertiary-500 shadow" regionPanel="pt-0" width="w-auto">
-    <AccordionItem>
+  <Accordion
+    class="card mx-auto bg-tertiary-500 shadow"
+    regionPanel="pt-0"
+    width="w-full xl:w-[1211px]"
+  >
+    <AccordionItem open>
       <svelte:fragment slot="lead"><ChequeredFlagIcon /></svelte:fragment>
       <svelte:fragment slot="summary">
         <span class="font-bold">Next Race Guess</span>
       </svelte:fragment>
       <svelte:fragment slot="content">
-        <div class="gap-2 lg:flex">
+        <div class="gap-2 xl:flex">
           <!-- TODO: Make the contents into 2 columns -->
           <div class="card mt-2 flex flex-col bg-tertiary-400 p-2 shadow">
             <span class="text-nowrap font-bold">
@@ -110,91 +116,85 @@
           </div>
 
           {#if currentpick}
-            <div class="mt-2 flex flex-col gap-2">
-              <div class="flex gap-2">
-                <div class="card w-full bg-tertiary-400 p-2 pb-0 shadow">
-                  <h1 class="mb-2 text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1>
-                  <LazyImage
-                    src={driver(currentpick.pxx ?? "Invalid")?.headshot_url ??
-                      get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ??
-                      "Invalid"}
-                    imgwidth={DRIVER_HEADSHOT_WIDTH}
-                    imgheight={DRIVER_HEADSHOT_HEIGHT}
-                    containerstyle="height: 150px; margin: auto;"
-                    imgstyle="background: transparent;"
-                  />
-                </div>
-                <div class="card w-full bg-tertiary-400 p-2 pb-0 shadow">
-                  <h1 class="mb-2 text-nowrap font-bold">Your DNF Pick:</h1>
-                  <LazyImage
-                    src={driver(currentpick.dnf ?? "Invalid")?.headshot_url ??
-                      get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ??
-                      "Invalid"}
-                    imgwidth={DRIVER_HEADSHOT_WIDTH}
-                    imgheight={DRIVER_HEADSHOT_HEIGHT}
-                    containerstyle="height: 150px; margin: auto;"
-                    imgstyle="background: transparent;"
-                  />
-                </div>
+            <div class="mt-2 flex gap-2">
+              <div class="card w-full bg-tertiary-400 p-2 pb-0 shadow">
+                <h1 class="mb-2 text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1>
+                <LazyImage
+                  src={driver(currentpick.pxx ?? "Invalid")?.headshot_url ??
+                    get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ??
+                    "Invalid"}
+                  imgwidth={DRIVER_HEADSHOT_WIDTH}
+                  imgheight={DRIVER_HEADSHOT_HEIGHT}
+                  containerstyle="height: 150px; margin: auto;"
+                  imgstyle="background: transparent;"
+                />
+              </div>
+              <div class="card w-full bg-tertiary-400 p-2 pb-0 shadow">
+                <h1 class="mb-2 text-nowrap font-bold">Your DNF Pick:</h1>
+                <LazyImage
+                  src={driver(currentpick.dnf ?? "Invalid")?.headshot_url ??
+                    get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ??
+                    "Invalid"}
+                  imgwidth={DRIVER_HEADSHOT_WIDTH}
+                  imgheight={DRIVER_HEADSHOT_HEIGHT}
+                  containerstyle="height: 150px; margin: auto;"
+                  imgstyle="background: transparent;"
+                />
               </div>
             </div>
           {/if}
-          <Button
-            width="w-full"
-            color="tertiary"
-            extraclass="bg-tertiary-400 mt-2"
-            onclick={create_guess_handler}
-            style="height: 100%;"
-            shadow
-          >
-            <span class="font-bold">{currentpick ? "Edit Picks" : "Make Picks"}</span>
-          </Button>
 
-          <!-- <div class="mt-2 flex gap-2"> -->
-          <!--   <div class="card w-full bg-tertiary-400 p-2 shadow"> -->
-          <!--     <h1 class="text-nowrap font-bold"> -->
-          <!--       Picked ({pickedusers.length}/{data.currentpickedusers.length}): -->
-          <!--     </h1> -->
-          <!-- Width: 50px * 4 + 8px * 3 -->
-          <!--     <div class="grid grid-cols-2 gap-2 lg:grid-cols-4"> -->
-          <!--       {#each pickedusers as user} -->
-          <!--         <LazyImage -->
-          <!--           src={user.avatar_url ?? -->
-          <!--             get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ?? -->
-          <!--             "Invalid"} -->
-          <!--           imgwidth={AVATAR_WIDTH} -->
-          <!--           imgheight={AVATAR_HEIGHT} -->
-          <!--           containerstyle="height: 50px; width: 50px;" -->
-          <!--           imgclass="shadow bg-transparent rounded-full" -->
-          <!--         /> -->
-          <!--       {/each} -->
-          <!--     </div> -->
-          <!--   </div> -->
-          <!--   <div class="card w-full bg-tertiary-400 p-2 shadow"> -->
-          <!--     <h1 class="text-nowrap font-bold"> -->
-          <!--       Outstanding ({outstandingusers.length}/{data.currentpickedusers.length}): -->
-          <!--     </h1> -->
-          <!--     <div class="grid grid-cols-2 gap-2 lg:grid-cols-4"> -->
-          <!--       {#each outstandingusers as user} -->
-          <!--         <LazyImage -->
-          <!--           src={user.avatar_url ?? -->
-          <!--             get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ?? -->
-          <!--             "Invalid"} -->
-          <!--           imgwidth={AVATAR_WIDTH} -->
-          <!--           imgheight={AVATAR_HEIGHT} -->
-          <!--           containerstyle="height: 50px; width: 50px;" -->
-          <!--           imgclass="shadow bg-transparent rounded-full" -->
-          <!--         /> -->
-          <!--       {/each} -->
-          <!--     </div> -->
-          <!--   </div> -->
-          <!-- </div> -->
+          <div class="mt-2 flex gap-2">
+            <div class="card w-full bg-tertiary-400 p-2 shadow">
+              <h1 class="text-nowrap font-bold">
+                Picked ({pickedusers.length}/{data.currentpickedusers.length}):
+              </h1>
+              <div class="mt-1 grid grid-cols-4 gap-x-2 gap-y-0.5">
+                {#each pickedusers.slice(0, 16) as user}
+                  <LazyImage
+                    src={user.avatar_url ??
+                      get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ??
+                      "Invalid"}
+                    imgwidth={AVATAR_WIDTH}
+                    imgheight={AVATAR_HEIGHT}
+                    containerstyle="height: 35px; width: 35px;"
+                    imgclass="shadow bg-transparent rounded-full"
+                  />
+                {/each}
+              </div>
+            </div>
+            <div class="card w-full bg-tertiary-400 p-2 shadow">
+              <h1 class="text-nowrap font-bold">
+                Outstanding ({outstandingusers.length}/{data.currentpickedusers.length}):
+              </h1>
+              <div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
+                {#each outstandingusers.slice(0, 16) as user}
+                  <LazyImage
+                    src={user.avatar_url ??
+                      get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ??
+                      "Invalid"}
+                    imgwidth={AVATAR_WIDTH}
+                    imgheight={AVATAR_HEIGHT}
+                    containerstyle="height: 35px; width: 35px;"
+                    imgclass="shadow bg-transparent rounded-full"
+                  />
+                {/each}
+              </div>
+            </div>
+          </div>
 
-          <!-- Spacer -->
-          <!-- <div class="w-full"></div> -->
           <!-- TODO: Track weather report? -->
-          <!-- <div class="mt-2">{data.currentracepicks.length}</div> -->
         </div>
+        <Button
+          width="w-full"
+          color="tertiary"
+          extraclass="bg-tertiary-400 mt-2"
+          onclick={create_guess_handler}
+          style="height: 100%;"
+          shadow
+        >
+          <span class="font-bold">{currentpick ? "Edit Picks" : "Make Picks"}</span>
+        </Button>
       </svelte:fragment>
     </AccordionItem>
   </Accordion>