Racepicks: Add initial unstyled elements ("Guess" button + Next Race overview)

src/routes/racepicks/+page.server.ts

@@ -3,10 +3,12 @@ import type { PageServerLoad } from "./$types";
 
 export const load: PageServerLoad = async ({ fetch, locals }) => {
   const fetch_racepicks = async (): Promise<RacePick[]> => {
-    // PXX/DNF is not expanded, as we have the drivers anyways (for guessing)
+    // Don't expand race/pxx/dnf since we already fetched those
     const racepicks: RacePick[] = await locals.pb
       .collection("racepicks")
-      .getFullList({ fetch: fetch, expand: "user,race" });
+      .getFullList({ fetch: fetch, expand: "user" });
+
+    // TODO: Fill in the expanded race pictogram_url fields
 
     return racepicks;
   };
@@ -15,13 +17,19 @@ export const load: PageServerLoad = async ({ fetch, locals }) => {
     const currentrace: Race[] = await locals.pb.collection("currentrace").getFullList();
 
     // The currentrace collection either has a single or no entries
-    return currentrace[0] ?? null;
+    if (currentrace.length == 0) return null;
+
+    currentrace[0].pictogram_url = await locals.pb.files.getURL(
+      currentrace[0],
+      currentrace[0].pictogram,
+    );
+
+    return currentrace[0];
   };
 
   const fetch_raceresults = async (): Promise<RaceResult[]> => {
-    const raceresults: RaceResult[] = await locals.pb
-      .collection("raceresults")
-      .getFullList({ expand: "race,pxxs,dnfs" });
+    // Don't expand races/pxxs/dnfs since we already fetched those
+    const raceresults: RaceResult[] = await locals.pb.collection("raceresults").getFullList();
 
     return raceresults;
   };
@@ -40,10 +48,25 @@ export const load: PageServerLoad = async ({ fetch, locals }) => {
     return drivers;
   };
 
+  // TODO: Duplicated code from data/season/+layout.server.ts
+  const fetch_races = async (): Promise<Race[]> => {
+    const races: Race[] = await locals.pb.collection("races").getFullList({
+      sort: "+step",
+      fetch: fetch,
+    });
+
+    races.map((race: Race) => {
+      race.pictogram_url = locals.pb.files.getURL(race, race.pictogram);
+    });
+
+    return races;
+  };
+
   return {
     racepicks: await fetch_racepicks(),
     currentrace: await fetch_currentrace(),
     raceresults: await fetch_raceresults(),
     drivers: await fetch_drivers(),
+    races: await fetch_races(),
   };
 };

src/routes/racepicks/+page.svelte

@@ -1 +1,66 @@
-<h1>Race Picks</h1>
+<script lang="ts">
+  import { Button, LazyImage } from "$lib/components";
+  import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
+  import type { PageData } from "./$types";
+  import { RACE_PICTOGRAM_HEIGHT, RACE_PICTOGRAM_WIDTH } from "$lib/config";
+
+  let { data }: { data: PageData } = $props();
+
+  const modalStore: ModalStore = getModalStore();
+  const create_guess_handler = async (event: Event) => {};
+</script>
+
+<div class="pb-2">
+  <Button width="w-full" color="tertiary" onclick={create_guess_handler}>
+    <b>Make Guess</b>
+  </Button>
+</div>
+
+{#if data.currentrace}
+  <div class="bg-surface-800">
+    <h1>Next Race</h1>
+    <div class="flex w-full gap-2 bg-surface-500">
+      <div class="flex w-full gap-2 bg-surface-300">
+        <LazyImage
+          src={data.currentrace.pictogram_url ?? "Invalid"}
+          imgwidth={RACE_PICTOGRAM_WIDTH}
+          imgheight={RACE_PICTOGRAM_HEIGHT}
+          containerstyle="width: 175px;"
+          imgstyle="background: transparent;"
+        />
+        <div>
+          Name: {data.currentrace.name}<br />
+          Step: {data.currentrace.step}<br />
+          {#if data.currentrace.sprintqualidate}
+            Sprint Quali: {data.currentrace.sprintqualidate}<br />
+            Sprint Race: {data.currentrace.sprintdate}<br />
+          {:else}
+            Sprint: No Sprint this time :)<br />
+          {/if}
+          Quali: {data.currentrace.qualidate}<br />
+          Race: {data.currentrace.racedate}
+        </div>
+      </div>
+
+      <div class="bg-surface-300">
+        <!-- If the user has already made a guess for the next race, display it inside a box to the right -->
+        Hello
+      </div>
+    </div>
+  </div>
+{/if}
+
+<!-- "Make Guess"/"Update Guess" button at the top -->
+
+<!-- Full-Width box with information about the upcoming race: -->
+<!-- - Name, step, track pictogram, date of (squali), (srace), quali and race -->
+<!-- - Countdown to next step (either squali, srace, quali or race) -->
+
+<!-- "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? -->