Factorise colours + tidy

app/[lang]/tournois/Legend.tsx

@@ -6,6 +6,7 @@ import { useAtomValue } from "jotai";
 
 import { TimeControl } from "@/types";
 import { filteredTournamentsByTimeControlAtom } from "@/app/atoms";
+import { TimeControlColours } from "@/app/constants";
 
 const Legend = () => {
   const t = useTranslations("Tournaments");
@@ -15,11 +16,11 @@ const Legend = () => {
   const timeControls = useMemo(
     () =>
       [
-        { tc: TimeControl.Classic, colour: "#00ac39" },
-        { tc: TimeControl.Rapid, colour: "#0086c7" },
-        { tc: TimeControl.Blitz, colour: "#cec348" },
-        { tc: TimeControl.Other, colour: "#d10c3e" },
-      ].filter(({ tc }) => tournaments.some((t) => t.timeControl === tc)),
+        TimeControl.Classic,
+        TimeControl.Rapid,
+        TimeControl.Blitz,
+        TimeControl.Other,
+      ].filter((tc) => tournaments.some((t) => t.timeControl === tc)),
     [tournaments],
   );
 
@@ -39,12 +40,11 @@ const Legend = () => {
           <ul>
             ${timeControls
               .map(
-                ({ tc, colour }) => `
+                (tc) => `
                   <li>
-                    <span class="block h-4 w-7 border border-[#999] float-left mr-1" style="background: ${colour}"></span>${t(
-                      "timeControlEnum",
-                      { tc },
-                    )}
+                    <span class="block h-4 w-7 border border-[#999] float-left mr-1" style="background: ${
+                      TimeControlColours[tc]
+                    }"></span>${t("timeControlEnum", { tc })}
                   </li>
                 `,
               )

app/[lang]/tournois/TournamentMap.tsx

@@ -26,7 +26,8 @@ import {
   filteredTournamentsByTimeControlAtom,
   normsOnlyAtom,
 } from "@/app/atoms";
-import { pie } from "@/lib/pie";
+import { generatePieSVG } from "@/lib/pie";
+import { TimeControlColours } from "@/app/constants";
 
 import Legend from "./Legend";
 import { TournamentMarker } from "./TournamentMarker";
@@ -234,8 +235,7 @@ export default function TournamentMap() {
   }, [expandAndBounceIfNeeded, hoveredListTournamentId]);
 
   const createClusterCustomIcon = useCallback((cluster: any) => {
-    let childCount = cluster.getChildCount();
-
+    const childCount = cluster.getChildCount();
     const children = cluster.getAllChildMarkers();
 
     // We added the time control to the icon options when creating the marker
@@ -246,25 +246,19 @@ export default function TournamentMap() {
 
     const html = `
       <div>
-
-        ${pie("absolute w-[30px] -z-10", 15, [
-          {
-            value: timeControlCounts[TimeControl.Classic] ?? 0,
-            colour: "#00ac39",
-          },
-          {
-            value: timeControlCounts[TimeControl.Rapid] ?? 0,
-            colour: "#0086c7",
-          },
-          {
-            value: timeControlCounts[TimeControl.Blitz] ?? 0,
-            colour: "#cec348",
-          },
-          {
-            value: timeControlCounts[TimeControl.Other] ?? 0,
-            colour: "#d10c3e",
-          },
-        ])}
+        ${generatePieSVG(
+          "absolute w-[30px]",
+          15,
+          [
+            TimeControl.Classic,
+            TimeControl.Rapid,
+            TimeControl.Blitz,
+            TimeControl.Other,
+          ].map((tc) => ({
+            value: timeControlCounts[tc] ?? 0,
+            colour: TimeControlColours[tc],
+          })),
+        )}
         <span class="text-white font-semibold relative z-[300]">${childCount}</span>
       </div>
     `;