From 55d0525b371ca2867e92eda3b3e52b5e7b437297 Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Thu, 27 Feb 2025 00:51:49 +0100
Subject: [PATCH] Racepicks: Fix "Your Race Pick" accordion opening lag

---
 src/routes/racepicks/+page.svelte | 180 +++++++++++++++---------------
 1 file changed, 89 insertions(+), 91 deletions(-)

diff --git a/src/routes/racepicks/+page.svelte b/src/routes/racepicks/+page.svelte
index 469be36..096909b 100644
--- a/src/routes/racepicks/+page.svelte
+++ b/src/routes/racepicks/+page.svelte
@@ -69,60 +69,60 @@
 </svelte:head>
 
 {#if data.currentrace}
-  <Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-0" width="w-full">
-    <AccordionItem>
-      <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="justify-center gap-2 lg:flex">
-          <!-- 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">
-                Step {data.currentrace.step}: {data.currentrace.name}
-              </span>
-              {#if data.currentrace.sprintdate}
+  {#await data.drivers then drivers}
+    <Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-0" width="w-full">
+      <AccordionItem>
+        <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="justify-center gap-2 lg:flex">
+            <!-- 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, dateformat)}</span>
+                  </div>
+                  <div class="flex gap-2">
+                    <span class="w-12">SRace:</span>
+                    <span>{format_date(data.currentrace.sprintdate, dateformat)}</span>
+                  </div>
+                {/if}
                 <div class="flex gap-2">
-                  <span class="w-12">SQuali:</span>
-                  <span>{format_date(data.currentrace.sprintqualidate, dateformat)}</span>
+                  <span class="w-12">Quali:</span>
+                  <span>{format_date(data.currentrace.qualidate, dateformat)}</span>
                 </div>
                 <div class="flex gap-2">
-                  <span class="w-12">SRace:</span>
-                  <span>{format_date(data.currentrace.sprintdate, dateformat)}</span>
+                  <span class="w-12">Race:</span>
+                  <span>{format_date(data.currentrace.racedate, dateformat)}</span>
                 </div>
-              {/if}
-              <div class="flex gap-2">
-                <span class="w-12">Quali:</span>
-                <span>{format_date(data.currentrace.qualidate, dateformat)}</span>
-              </div>
-              <div class="flex gap-2">
-                <span class="w-12">Race:</span>
-                <span>{format_date(data.currentrace.racedate, dateformat)}</span>
-              </div>
-              <div class="m-auto flex">
-                <div class="mr-1 mt-1">
-                  <StopwatchIcon />
+                <div class="m-auto flex">
+                  <div class="mr-1 mt-1">
+                    <StopwatchIcon />
+                  </div>
+                  <Countdown date={data.currentrace.racedate} extraclass="font-bold" />
                 </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>
-            <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>
 
-          <!-- Only show the userguess if signed in -->
-          {#if data.user}
-            {#await data.drivers then drivers}
+            <!-- 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>
@@ -151,56 +151,55 @@
                   />
                 </div>
               </div>
-            {/await}
-          {/if}
+            {/if}
 
-          <!-- Show users that have and have not picked yet -->
-          {#await Promise.all( [data.currentpickedusers, pickedusers, outstandingusers], ) then [currentpicked, picked, outstanding]}
-            <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}
+            <!-- Show users that have and have not picked yet -->
+            {#await Promise.all( [data.currentpickedusers, pickedusers, outstandingusers], ) then [currentpicked, picked, outstanding]}
+              <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>
+                </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>
               </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>
-            </div>
-          {/await}
-        </div>
-      </svelte:fragment>
-    </AccordionItem>
-  </Accordion>
+            {/await}
+          </div>
+        </svelte:fragment>
+      </AccordionItem>
+    </Accordion>
+  {/await}
 {/if}
 
 <!-- The fookin table -->
-<!-- TODO: Hide this thing if no picks... -->
 <div class="flex">
   <div>
     <!-- Points color coding legend -->
@@ -301,7 +300,6 @@
     {/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 -->