owenrees/echecsfrance
1
0
Fork 0
mirror of https://github.com/TheRealOwenRees/echecsfrance.git synced 2026-07-23 04:26:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace 1h KO with a catch all category - display only when required

Browse Source
This commit is contained in:
Timothy Armes
2023-07-07 09:42:05 +02:00
parent 88e75511d7
commit d8a5b4393a
10 changed files with 67 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[lang]/tournois/Legend.tsx
+33 -20
View File
@@ -1,12 +1,27 @@
import { useMap } from "react-leaflet";
import { useEffect } from "react";
import { useEffect, useMemo } from "react";
import { useTranslations } from "next-intl";
import L from "leaflet";
import { useAtomValue } from "jotai";
import { TimeControl } from "@/types";
import { filteredTournamentsByTimeControlAtom } from "@/app/atoms";
const Legend = () => {
const t = useTranslations("Tournaments");
const map = useMap();
const tournaments = useAtomValue(filteredTournamentsByTimeControlAtom);
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)),
[tournaments]
);
useEffect(() => {
if (map) {
@@ -19,30 +34,28 @@ const Legend = () => {
"style",
"background: white; color: black; border: 2px solid grey; border-radius: 6px; padding: 10px;"
);
div.innerHTML = `<ul>
<li><span style='background:#00ac39; display: block; height: 16px; width: 30px; border: 1px solid #999; float: left; margin-right: 5px'></span>${t(
"timeControlEnum",
{ tc: TimeControl.Classic }
)}</li>
<li><span style='background:#0086c7; display: block; height: 16px; width: 30px; border: 1px solid #999; float: left; margin-right: 5px'></span>${t(
"timeControlEnum",
{ tc: TimeControl.Rapid }
)}</li>
<li><span style='background:#cec348; display: block; height: 16px; width: 30px; border: 1px solid #999; float: left; margin-right: 5px'></span>${t(
"timeControlEnum",
{ tc: TimeControl.Blitz }
)}</li>
<li><span style='background:#d10c3e; display: block; height: 16px; width: 30px; border: 1px solid #999; float: left; margin-right: 5px'></span>${t(
"timeControlEnum",
{ tc: TimeControl.KO }
)}</li>
</ul>`;
div.innerHTML = `
<ul>
${timeControls
.map(
({ tc, colour }) => `
<li>
<span class="block h-4 w-7 border border-[#999] float-left mr-1" style="background: ${colour}"></span>${t(
"timeControlEnum",
{ tc }
)}
</li>
`
)
.join("")}
</ul>`;
return div;
};
legend.addTo(map);
}
}, [map, t]);
}, [map, t, timeControls]);
return null;
};