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

Mutual Highlighting (#41) (#55)

Browse Source 
* Mutual Highlighting (#41)

* Tidy up

* Delete unused API route
This commit is contained in:
Timothy Armes
2023-07-05 13:55:56 +02:00
committed by GitHub
parent 96fda01929
commit 1715b1646b
18 changed files with 451 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[lang]/tournois/TournamentMap.tsx
+45 -14
View File
@@ -1,31 +1,62 @@
"use client";
import { TournamentDataProps } from "@/types";
import { Tournament } from "@/types";
import { LatLngLiteral } from "leaflet";
import {
MapContainer,
TileLayer,
LayersControl,
LayerGroup,
} from "react-leaflet";
import { useAtomValue } from "jotai";
import "leaflet/dist/leaflet.css";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
import "leaflet-defaulticon-compatibility";
import { MapContainer, TileLayer, LayersControl } from "react-leaflet";
import { tournamentsAtom } from "@/app/atoms";
import { createLayerGroups } from "@/utils/layerGroups";
import Legend from "./Legend";
import { TournamentMarker } from "./TournamentMarker";
export default function TournamentMap({ tournamentData }: TournamentDataProps) {
export default function TournamentMap() {
const tournaments = useAtomValue(tournamentsAtom);
const center: LatLngLiteral = { lat: 47.0844, lng: 2.3964 };
const classicalMarkers = createLayerGroups("Cadence Lente", "green", {
tournamentData,
});
const rapidMarkers = createLayerGroups("Rapide", "blue", {
tournamentData,
});
const blitzMarkers = createLayerGroups("Blitz", "yellow", {
tournamentData,
});
const createLayerGroups = (
timeControl: string,
colour: string,
tournaments: Tournament[]
) => {
const filteredTournaments = tournaments.filter(
(t) => t.time_control === timeControl
);
const otherMarkers = createLayerGroups("1h KO", "red", { tournamentData });
const layerGroup = filteredTournaments.map((tournament) => {
return (
<TournamentMarker
key={tournament._id}
tournament={tournament}
colour={colour}
/>
);
});
return (
<LayersControl.Overlay checked name={timeControl}>
<LayerGroup>{layerGroup}</LayerGroup>
</LayersControl.Overlay>
);
};
const classicalMarkers = createLayerGroups(
"Cadence Lente",
"green",
tournaments
);
const rapidMarkers = createLayerGroups("Rapide", "blue", tournaments);
const blitzMarkers = createLayerGroups("Blitz", "yellow", tournaments);
const otherMarkers = createLayerGroups("1h KO", "red", tournaments);
return (
<section id="tournament-map" className="grid h-[calc(100vh-144px)]">