Handle PXXs below 4

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

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>`,
           ),
         );
 

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]}