From 7fd1b2957676f4791f1c4de2bc41c586cf03e3a7 Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Tue, 17 Feb 2026 16:06:29 +0100
Subject: [PATCH] Handle PXXs below 4

---
 .../components/cards/RaceResultCard.svelte    | 25 ++++++++++++++-----
 src/routes/data/raceresults/+page.svelte      |  4 ++-
 src/routes/racepicks/+page.svelte             |  6 ++---
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/cards/RaceResultCard.svelte b/src/lib/components/cards/RaceResultCard.svelte
index 6e7f372..1cda6e2 100644
--- a/src/lib/components/cards/RaceResultCard.svelte
+++ b/src/lib/components/cards/RaceResultCard.svelte
@@ -66,11 +66,24 @@
     return raceresults.map((raceresult: RaceResult) => raceresult.race);
   });
 
-  let pxxs_placeholder: string = $derived(
-    currentrace
-      ? `Select P${(currentrace.pxx ?? -10) - 3} to P${(currentrace.pxx ?? -10) + 3}...`
-      : `Select race first...`,
-  );
+  let pxxs_placeholder: string = $derived.by(() => {
+    if (!currentrace) {
+      return "Select race first...";
+    }
+
+    let start = Math.max(1, (currentrace.pxx ?? -10) - 3);
+    let end = start + 6;
+
+    if (currentrace.pxx === 1) {
+      end = start + 3;
+    } else if (currentrace.pxx === 2) {
+      end = start + 4;
+    } else if (currentrace.pxx === 3) {
+      end = start + 5;
+    }
+
+    return `Select P${start} to P${end}...`;
+  });
 
   let pxxs_input: string = $state("");
   let pxxs_chips: string[] = $state([]);
@@ -133,7 +146,7 @@
   const on_pxxs_chip_select = (event: CustomEvent<AutocompleteOption<string>>): void => {
     if (disabled || !drivers) return;
 
-    // Can only select 7 drivers
+    // Can only select 7 drivers or less
     if (pxxs_chips.length >= 7) return;
 
     // Can only select a driver once
diff --git a/src/routes/data/raceresults/+page.svelte b/src/routes/data/raceresults/+page.svelte
index e25d8be..b2b083d 100644
--- a/src/routes/data/raceresults/+page.svelte
+++ b/src/routes/data/raceresults/+page.svelte
@@ -59,11 +59,13 @@
       valuefun: async (value: string): Promise<string> => {
         if (value.length === 0 || value === "") return "";
 
+
         const pxxs_array: string[] = value.toString().split(",");
+        const offset: number = 7 - pxxs_array.length;
         const pxxs_codes: string[] = await Promise.all(
           pxxs_array.map(
             async (id: string, index: number) =>
-              `<span class='w-10 badge mr-2 text-center' style='background: ${PXX_COLORS[index]};'>${get_by_value(await data.drivers, "id", id)?.code ?? "Invalid"}</span>`,
+              `<span class='w-10 badge mr-2 text-center' style='background: ${PXX_COLORS[index + offset]};'>${get_by_value(await data.drivers, "id", id)?.code ?? "Invalid"}</span>`,
           ),
         );
 
diff --git a/src/routes/racepicks/+page.svelte b/src/routes/racepicks/+page.svelte
index 6cb4cd7..1ffa7f5 100644
--- a/src/routes/racepicks/+page.svelte
+++ b/src/routes/racepicks/+page.svelte
@@ -318,8 +318,8 @@
               {#each result.pxxs as pxx, index}
                 {@const driver = get_by_value(drivers, "id", pxx)}
                 <div class="flex gap-2">
-                  <span class="w-8">P{(race?.pxx ?? -100) - 3 + index}:</span>
-                  <span class="badge w-10 p-1 text-center" style="background: {PXX_COLORS[index]};">
+                  <span class="w-8">P{Math.max(1, (race?.pxx ?? -100) - 3) + index}:</span>
+                  <span class="badge w-10 p-1 text-center" style="background: {PXX_COLORS[index + (7 - result.pxxs.length)]};">
                     {driver?.code}
                   </span>
                 </div>
@@ -355,7 +355,7 @@
             {#each raceresults as result}
               {@const race = get_by_value(races, "id", result.race)}
               {@const pick = picks.filter((pick: RacePick) => pick.race === race?.id)[0]}
-              {@const pxxcolor = PXX_COLORS[result.pxxs.indexOf(pick?.pxx ?? "Invalid")]}
+              {@const pxxcolor = PXX_COLORS[result.pxxs.indexOf(pick?.pxx ?? "Invalid") + (7 - result.pxxs.length)]}
               {@const dnfcolor =
                 result.dnfs.indexOf(pick?.dnf ?? "Invalid") >= 0 ? PXX_COLORS[3] : PXX_COLORS[-1]}