Fix PXX color offsets (hopefully?)

src/lib/components/Table.svelte

@@ -40,7 +40,7 @@
             {#each columns as col}
               {#if col.valuefun}
                 <td class="!align-middle">
-                  {#await col.valuefun(row[col.data_value_name]) then value}{@html value}{/await}
+                  {#await col.valuefun(row[col.data_value_name], row) then value}{@html value}{/await}
                 </td>
               {:else}
                 <td class="!align-middle">{row[col.data_value_name]}</td>

src/lib/components/Table.ts

@@ -6,5 +6,5 @@ export interface TableColumn {
   label: string;
 
   /** Any function to further customize the displayed value. May return HTML. */
-  valuefun?: (value: any) => Promise<string>;
+  valuefun?: (value: any, row?: any) => Promise<string>;
 }

src/lib/components/cards/RaceCard.svelte

@@ -217,7 +217,7 @@
       placeholder="The place to guess"
       type="number"
       min={1}
-      max={20}
+      max={22}
       {labelwidth}
       {disabled}
       {required}

src/lib/components/cards/RaceResultCard.svelte

@@ -66,22 +66,19 @@
     return raceresults.map((raceresult: RaceResult) => raceresult.race);
   });
 
+  const MAX_GRID_POSITION = 22;
+
+  let max_pxxs_count: number = $derived.by(() => {
+    if (!currentrace) return 7;
+    const pxx = currentrace.pxx ?? 4;
+    return Math.min(pxx + 3, MAX_GRID_POSITION) - Math.max(1, pxx - 3) + 1;
+  });
+
   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;
-    }
-
+    if (!currentrace) return "Select race first...";
+    const pxx = currentrace.pxx ?? -10;
+    const start = Math.max(1, pxx - 3);
+    const end = Math.min(pxx + 3, MAX_GRID_POSITION);
     return `Select P${start} to P${end}...`;
   });
 
@@ -146,8 +143,7 @@
   const on_pxxs_chip_select = (event: CustomEvent<AutocompleteOption<string>>): void => {
     if (disabled || !drivers) return;
 
-    // Can only select 7 drivers or less
-    if (pxxs_chips.length >= 7) return;
+    if (pxxs_chips.length >= max_pxxs_count) return;
 
     // Can only select a driver once
     if (pxxs_chips.includes(event.detail.value)) return;

src/routes/data/raceresults/+page.svelte

@@ -56,12 +56,13 @@
     {
       data_value_name: "pxxs",
       label: "Standing",
-      valuefun: async (value: string): Promise<string> => {
+      valuefun: async (value: string, row?: any): Promise<string> => {
         if (value.length === 0 || value === "") return "";
 
-
+        const race = get_by_value(await data.races, "id", row?.race);
+        const pxx: number = race?.pxx ?? 4;
         const pxxs_array: string[] = value.toString().split(",");
-        const offset: number = 7 - pxxs_array.length;
+        const offset: number = Math.max(0, 4 - pxx);
         const pxxs_codes: string[] = await Promise.all(
           pxxs_array.map(
             async (id: string, index: number) =>

src/routes/racepicks/+page.svelte

@@ -319,7 +319,7 @@
                 {@const driver = get_by_value(drivers, "id", pxx)}
                 <div class="flex gap-2">
                   <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)]};">
+                  <span class="badge w-10 p-1 text-center" style="background: {PXX_COLORS[index + Math.max(0, 4 - (race?.pxx ?? 4))]};">
                     {driver?.code}
                   </span>
                 </div>
@@ -355,7 +355,9 @@
             {#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") + (7 - result.pxxs.length)]}
+              {@const rawPxxIndex = result.pxxs.indexOf(pick?.pxx ?? "Invalid")}
+              {@const pxxoffset = Math.max(0, 4 - (race?.pxx ?? 4))}
+              {@const pxxcolor = rawPxxIndex === -1 ? PXX_COLORS[-1] : PXX_COLORS[rawPxxIndex + pxxoffset]}
               {@const dnfcolor =
                 result.dnfs.indexOf(pick?.dnf ?? "Invalid") >= 0 ? PXX_COLORS[3] : PXX_COLORS[-1]}