Factorise colours + tidy

.vscode/settings.json

@@ -5,6 +5,7 @@
     "colours",
     "contactez",
     "defaulticon",
+    "Depfu",
     "Échecs",
     "Fédération",
     "Florifourchette",

README.md

@@ -26,4 +26,4 @@ and is deployed on [Vercel](https://vercel.com/)
 ## Contributions
 
 Contributions are encouraged. Please open an issue to discuss your ideas.
-Add your code into a feature branch such as `feature/feature-name`. We utilise a [GitHub Flow](https://www.gitkraken.com/learn/git/best-practices/git-branch-strategy#github-flow-considerations) branching strategy.
+Add your code into a feature branch such as `feature/feature-name`. We use the [GitHub Flow](https://www.gitkraken.com/learn/git/best-practices/git-branch-strategy#github-flow-considerations) branching strategy.

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" },
+        TimeControl.Classic,
-        { tc: TimeControl.Rapid, colour: "#0086c7" },
+        TimeControl.Rapid,
-        { tc: TimeControl.Blitz, colour: "#cec348" },
+        TimeControl.Blitz,
-        { tc: TimeControl.Other, colour: "#d10c3e" },
+        TimeControl.Other,
-      ].filter(({ tc }) => tournaments.some((t) => t.timeControl === tc)),
+      ].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(
+                    <span class="block h-4 w-7 border border-[#999] float-left mr-1" style="background: ${
-                      "timeControlEnum",
+                      TimeControlColours[tc]
-                      { 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>
-
+        ${generatePieSVG(
-        ${pie("absolute w-[30px] -z-10", 15, [
+          "absolute w-[30px]",
-          {
+          15,
-            value: timeControlCounts[TimeControl.Classic] ?? 0,
+          [
-            colour: "#00ac39",
+            TimeControl.Classic,
-          },
+            TimeControl.Rapid,
-          {
+            TimeControl.Blitz,
-            value: timeControlCounts[TimeControl.Rapid] ?? 0,
+            TimeControl.Other,
-            colour: "#0086c7",
+          ].map((tc) => ({
-          },
+            value: timeControlCounts[tc] ?? 0,
-          {
+            colour: TimeControlColours[tc],
-            value: timeControlCounts[TimeControl.Blitz] ?? 0,
+          })),
-            colour: "#cec348",
+        )}
-          },
-          {
-            value: timeControlCounts[TimeControl.Other] ?? 0,
-            colour: "#d10c3e",
-          },
-        ])}
         <span class="text-white font-semibold relative z-[300]">${childCount}</span>
       </div>
     `;

app/constants.ts

@@ -0,0 +1,8 @@
+import { TimeControl } from "@/types"
+
+export const TimeControlColours = {
+  [TimeControl.Classic]: "#00ac39",
+  [TimeControl.Rapid]: "#0086c7",
+  [TimeControl.Blitz]: "#cec348",
+  [TimeControl.Other]: "#d10c3e",
+}

lib/pie.ts

@@ -14,9 +14,7 @@ function polarToCartesian(radius: number, angleInDegrees: number) {
 function getDAttribute(radius: number, startAngle: number, endAngle: number) {
   const isCircle = endAngle - startAngle === 360;
 
-  if (isCircle) {
+  if (isCircle) endAngle--;
-      endAngle--;
-  }
 
   const start = polarToCartesian(radius, startAngle);
   const end = polarToCartesian(radius, endAngle);
@@ -24,14 +22,14 @@ function getDAttribute(radius: number, startAngle: number, endAngle: number) {
   const largeArcFlag = endAngle - startAngle <= 180 ? 0 : 1;
   const d = [
     "M", start.x, start.y,
-      "A", radius, radius, 0, largeArcFlag, 1, end.x, end.y];
+    "A", radius, radius, 0, largeArcFlag, 1, end.x, end.y
+  ];
 
   if (isCircle) {
     d.push("Z");
   } else {
     d.push("L", radius, radius, "L", start.x, start.y, "Z");
   }
-
   return d.join(" ");
 }
 
@@ -43,35 +41,28 @@ function svg(className: string, width: number, content: string ) {
   return `<svg class="${className}" viewBox="0 0 ${width} ${width}"><g class='pie'>${content}</g></svg>`;
 }
 
-type PieSector = {
+type PieSlice = {
   value: number;
   colour: string;
 }
 
-export function pie(className: string, radius: number, values: PieSector[]) {
+export function generatePieSVG(className: string, radius: number, values: PieSlice[]) {
-
   type Sector = {
     colour: string;
     degrees: number;
     from?: number;
     to?: number;
-    path?: string;
   }
 
   const total = values.reduce((a, b) => a + b.value, 0);
   const data: Sector[] = values.map(({ value, colour }) => ({ colour, degrees: value / total * 360 }));
 
-  data.forEach((value, i, arr) => {
+  const paths = data.reduce<[number, string][]>((prev, value, i) => {
-    if (i === 0) {
+    const from = i === 0 ? 0 : prev[i - 1][0];
-      value.from = 0;
+    const to = from + value.degrees;
-      value.to = value.degrees;
-    } else {
-      value.from = arr[i - 1].to!;
-      value.to = value.from + value.degrees;
-    }
 
-    value.path = path(getDAttribute(radius, value.from, value.to ), value.colour);
+    return [...prev, [to, path(getDAttribute(radius, from, to ), value.colour)]];
-  });
+  }, []);
 
-  return svg(className, radius * 2, data.map(o => o.path).join(''));
+  return svg(className, radius * 2, paths.map(([to, path]) => path) .join(''));
 }