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

filtered tournament hooks

Browse Source
This commit is contained in:
Owen Rees
2023-06-06 17:08:38 +02:00
parent 5396df5d2b
commit 3f2509d429
6 changed files with 151 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/TournamentMap.tsx
+1 -31
View File
@@ -1,18 +1,15 @@
"use client";
// Types
import { TournamentDataProps } from "@/types";
import { LatLngLiteral } from "leaflet";
// Leaflet + icon fixes
import "leaflet/dist/leaflet.css";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
import L from "leaflet";
import "leaflet-defaulticon-compatibility";
import { MapContainer, TileLayer, LayersControl, useMap } from "react-leaflet";
import { createLayerGroups } from "@/utils/layerGroups";
import { useEffect } from "react";
import Legend from "@/components/Legend";
export default function TournamentMap({ tournamentData }: TournamentDataProps) {
const center: LatLngLiteral = { lat: 47.0844, lng: 2.3964 };
@@ -24,33 +21,6 @@ export default function TournamentMap({ tournamentData }: TournamentDataProps) {
const blitzMarkers = createLayerGroups("Blitz", "yellow", { tournamentData });
const otherMarkers = createLayerGroups("1h KO", "red", { tournamentData });
// TODO move into its own hook
function Legend() {
const map = useMap();
useEffect(() => {
if (map) {
const legend = L.control({ position: "bottomleft" });
legend.onAdd = () => {
const div = L.DomUtil.create("div", "map-legend");
div.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>Cadence Lente</li>
<li><span style='background:#0086c7; display: block; height: 16px; width: 30px; border: 1px solid #999; float: left; margin-right: 5px'></span>Rapide</li>
<li><span style='background:#cec348; display: block; height: 16px; width: 30px; border: 1px solid #999; float: left; margin-right: 5px'></span>Blitz</li>
<li><span style='background:#d10c3e; display: block; height: 16px; width: 30px; border: 1px solid #999; float: left; margin-right: 5px'></span>1h KO</li>
</ul>`;
return div;
};
legend.addTo(map);
}
}, [map]);
return null;
}
return (
<section id="tournament-map" className="w-full lg:col-start-1 lg:col-end-2">
<MapContainer