MVP systeme de zone quadrillage

traque-front/components/admin/mapPicker.jsx

@@ -1,118 +0,0 @@
-"use client";
-import { useLocation } from "@/hook/useLocation";
-import { useEffect, useState } from "react";
-import "leaflet/dist/leaflet.css";
-import L from "leaflet";
-import { Circle, LayersControl, MapContainer, Marker, Popup, TileLayer, useMap} from "react-leaflet";
-import { useMapCircleDraw } from "@/hook/mapDrawing";
-import useAdmin from "@/hook/useAdmin";
-import { MapGridZoneSelector } from "./mapZoneSelector.jsx";
-
-
-function MapPan(props) {
-    const map = useMap();
-    const [initialized, setInitialized] = useState(false);
-
-    useEffect(() => {
-        if (!initialized && props.center) {
-            map.flyTo(props.center, props.zoom, { animate: false });
-            setInitialized(true)
-        }
-    }, [props.center]);
-    return null;
-}
-
-function MapEventListener({ onClick, onMouseMove }) {
-    const map = useMap();
-    useEffect(() => {
-        map.on('click', onClick);
-        return () => {
-            map.off('click', onClick);
-        }
-    }, [onClick]);
-    useEffect(() => {
-        map.on('mousemove', onMouseMove);
-        return () => {
-            map.off('mousemove', onMouseMove);
-        }
-    });
-    return null;
-}
-
-const DEFAULT_ZOOM = 13;
-export function CircularAreaPicker({ area, setArea, markerPosition, ...props }) {
-    const location = useLocation(Infinity);
-    const { handleClick, handleMouseMove, center, radius } = useMapCircleDraw(area, setArea);
-    return (
-        <MapContainer  {...props} className='min-h-full w-full ' center={[0, 0]} zoom={0} scrollWheelZoom={true}>
-            <TileLayer
-                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-            />
-            {center && radius && <Circle center={center} radius={radius} fillColor="blue" />}
-            {markerPosition && <Marker position={markerPosition} icon={new L.Icon({
-                iconUrl: '/icons/location.png',
-                iconSize: [41, 41],
-                iconAnchor: [12, 41],
-                popupAnchor: [1, -34],
-                shadowSize: [41, 41]
-            })}></Marker>}
-            <MapPan center={location} zoom={DEFAULT_ZOOM} />
-            <MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
-        </MapContainer>)
-}
-
-//https://stackoverflow.com/questions/71231865/show-fixed-100-m-x-100-m-grid-on-lowest-zoom-level
-
-export function ZonePicker({ ...props }) {
-    const location = useLocation(Infinity);
-    const [coloredTiles, setColoredTiles] = useState([]);
-
-    useEffect(() => {
-        console.log(coloredTiles)
-    }, [coloredTiles]);
-    return (
-        <MapContainer  {...props} className='min-h-full w-full ' center={[0, 0]} zoom={0} scrollWheelZoom={true}>
-            <TileLayer
-                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-            />
-            <MapPan center={location} zoom={DEFAULT_ZOOM} />
-            <LayersControl>
-                <LayersControl.Overlay name="Grid" checked={true}>
-                    <MapGridZoneSelector onSelectedTile={setColoredTiles} tileSize={16}/>
-                </LayersControl.Overlay>
-            </LayersControl>
-        </MapContainer>
-    )
-}
-
-export function LiveMap() {
-    const location = useLocation(Infinity);
-    const { zone, zoneExtremities, teams, getTeamName } = useAdmin();
-    return (
-        <MapContainer className='min-h-full w-full ' center={location} zoom={DEFAULT_ZOOM} scrollWheelZoom={true}>
-            <TileLayer
-                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-            />
-            <MapPan center={location} zoom={DEFAULT_ZOOM} />
-            {zone && <Circle center={zone.center} radius={zone.radius} color="blue" />}
-            {zoneExtremities && <Circle center={zoneExtremities.begin.center} radius={zoneExtremities.begin.radius} color='black' fill={false} />}
-            {zoneExtremities && <Circle center={zoneExtremities.end.center} radius={zoneExtremities.end.radius} color='red' fill={false} />}
-            {teams.map((team) => team.currentLocation && !team.captured && <Marker key={team.id} position={team.currentLocation} icon={new L.Icon({
-                iconUrl: '/icons/location.png',
-                iconSize: [41, 41],
-                iconAnchor: [12, 41],
-                popupAnchor: [1, -34],
-                shadowSize: [41, 41]
-            })}>
-                <Popup>
-                    <strong className="text-lg">{team.name}</strong>
-                    <p className="text-md">Chasing : {getTeamName(team.chasing)}</p>
-                    <p className="text-md">Chased by : {getTeamName(team.chased)}</p>
-                </Popup>
-            </Marker>)}
-        </MapContainer>
-    )
-}

traque-front/components/admin/mapZoneSelector.jsx

@@ -1,29 +1,15 @@
-import { useEffect, useState } from 'react';
-import { useLeafletContext } from '@react-leaflet/core';
 import { useMapGrid } from '@/hook/mapDrawing';
-import { latLngToTileNumber } from '../util/map';
+import { TileNumber, latLngToTileNumber } from '../util/map';
+import { useMapEvent } from 'react-leaflet';
 
-export function MapGridZoneSelector({ onSelectedTile, tileSize }) {
-    const [coloredTiles, setColoredTiles] = useState([]);
-    const { map } = useLeafletContext();
-
-    useEffect(() => {
-        map.on('click', (e) => {
+export function MapGridZoneSelector({ tilesColor, onClickTile, tileSize }) {
+    useMapEvent('click', (e) => {
             const fractionalTileNumber = latLngToTileNumber(e.latlng, tileSize);
             const tileNumber = new TileNumber(Math.floor(fractionalTileNumber.x), Math.floor(fractionalTileNumber.y));
-            if (coloredTiles.some(t => t.equals(tileNumber))) {
-                setColoredTiles(coloredTiles.filter(t => !t.equals(tileNumber)));
-            } else {
-                setColoredTiles([...coloredTiles, tileNumber]);
-            }
-        });
+            onClickTile(tileNumber);
     });
 
-    useEffect(() => {
-        onSelectedTile(coloredTiles);
-    }, [coloredTiles]);
-
-    useMapGrid(coloredTiles, tileSize);
+    useMapGrid(tilesColor, tileSize);
 
     return null;
-}
+}

traque-front/components/admin/maps.jsx

@@ -0,0 +1,180 @@
+"use client";
+import { useLocation } from "@/hook/useLocation";
+import { use, useEffect, useState } from "react";
+import "leaflet/dist/leaflet.css";
+import L from "leaflet";
+import { Circle, LayerGroup, LayersControl, MapContainer, Marker, Popup, TileLayer, useMap } from "react-leaflet";
+import { useMapCircleDraw, useTilesColor } from "@/hook/mapDrawing";
+import useAdmin from "@/hook/useAdmin";
+import { MapGridZoneSelector } from "./mapZoneSelector.jsx";
+import { useAdminContext } from "@/context/adminContext.jsx";
+import { GreenButton } from "../util/button.jsx";
+import TextInput from "../util/textInput.jsx";
+
+
+function MapPan(props) {
+    const map = useMap();
+    const [initialized, setInitialized] = useState(false);
+
+    useEffect(() => {
+        if (!initialized && props.center) {
+            map.flyTo(props.center, props.zoom, { animate: false });
+            setInitialized(true)
+        }
+    }, [props.center]);
+    return null;
+}
+
+function MapEventListener({ onClick, onMouseMove }) {
+    const map = useMap();
+    useEffect(() => {
+        map.on('click', onClick);
+        return () => {
+            map.off('click', onClick);
+        }
+    }, [onClick]);
+    useEffect(() => {
+        map.on('mousemove', onMouseMove);
+        return () => {
+            map.off('mousemove', onMouseMove);
+        }
+    });
+    return null;
+}
+
+const DEFAULT_ZOOM = 13;
+export function CircularAreaPicker({ area, setArea, markerPosition, ...props }) {
+    const location = useLocation(Infinity);
+    const { handleClick, handleMouseMove, center, radius } = useMapCircleDraw(area, setArea);
+    return (
+        <MapContainer  {...props} className='min-h-full w-full ' center={[0, 0]} zoom={0} scrollWheelZoom={true}>
+            <TileLayer
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            />
+            {center && radius && <Circle center={center} radius={radius} fillColor="blue" />}
+            {markerPosition && <Marker position={markerPosition} icon={new L.Icon({
+                iconUrl: '/icons/location.png',
+                iconSize: [41, 41],
+                iconAnchor: [12, 41],
+                popupAnchor: [1, -34],
+                shadowSize: [41, 41]
+            })}></Marker>}
+            <MapPan center={location} zoom={DEFAULT_ZOOM} />
+            <MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
+        </MapContainer>)
+}
+
+//https://stackoverflow.com/questions/71231865/show-fixed-100-m-x-100-m-grid-on-lowest-zoom-level
+
+export function ZoneInitializer({ ...props }) {
+    const location = useLocation(Infinity);
+    const { zone } = useAdminContext();
+    const { initZone } = useAdmin();
+
+    const tilesColor = useTilesColor(zone);
+
+    const handleClickTile = (tile) => {
+        if (zone) {
+            if (zone.some(t => t.x === tile.x && t.y === tile.y)) {
+                initZone(zone.filter(t => t.x !== tile.x || t.y !== tile.y));
+            } else {
+                initZone([...zone, tile]);
+            }
+        }
+    }
+
+    return (
+        <MapContainer  {...props} className='min-h-full w-full ' center={[0, 0]} zoom={0} scrollWheelZoom={true}>
+            <TileLayer
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            />
+            <MapPan center={location} zoom={DEFAULT_ZOOM} />
+            <LayersControl>
+                <LayersControl.Overlay name="Play area" checked={true}>
+                    <LayerGroup>
+                        <MapGridZoneSelector tilesColor={tilesColor} onClickTile={handleClickTile} tileSize={16} />
+                    </LayerGroup>
+                </LayersControl.Overlay>
+            </LayersControl>
+        </MapContainer>
+    )
+}
+
+export function ZoneEditor() {
+    const location = useLocation(Infinity);
+    const { zone, teams, getTeamName, removeZone } = useAdmin();
+    const [zonesToDelete, setZonesToDelete] = useState([]);
+    const [tilesColor, setTilesColor] = useState([]);
+    const [timeBeforeDeletion, setTimeBeforeDeletion] = useState(0);
+
+    function handleClickTile(tile) {
+        if (!zone.some(t => t.x === tile.x && t.y === tile.y)) return;
+        console.log(tile, "click", zonesToDelete);
+        if (!zonesToDelete.some(t => t.x === tile.x && t.y === tile.y)) {
+            setZonesToDelete([...zonesToDelete, tile]);
+            console.log("delete", tile);
+        } else {
+            setZonesToDelete(zonesToDelete.filter(t => t.x !== tile.x || t.y !== tile.y));
+        }
+    }
+
+    useEffect(() => {
+        console.log(zone);
+        setTilesColor([
+            ...zonesToDelete.map(t => ({ x: t.x, y: t.y, color: 'rgba(255, 0, 0, 0.5)' })),
+            ...zone
+                .filter(t => !zonesToDelete.some(t2 => t.x == t2.x && t.y == t2.y))
+                .map(t => {
+                    if (t.removeDate == null) {
+                        return { x: t.x, y: t.y, color: 'rgba(0, 0, 255, 0.5)' }
+                    } else {
+                        return { x: t.x, y: t.y, color: 'rgba(255, 255, 0, 0.5)' }
+                    }
+                }),
+        ]);
+    }, [zone, zonesToDelete]);
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        removeZone(zonesToDelete, timeBeforeDeletion);
+        setZonesToDelete([]);
+        setTimeBeforeDeletion(0);
+    }
+
+
+    return (
+        <div className="flex flex-col w-full">
+            <MapContainer className='min-h-full w-full ' center={location} zoom={DEFAULT_ZOOM} scrollWheelZoom={true}>
+                <TileLayer
+                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                />
+                <MapPan center={location} zoom={DEFAULT_ZOOM} />
+                {teams.map((team) => team.currentLocation && !team.captured && <Marker key={team.id} position={team.currentLocation} icon={new L.Icon({
+                    iconUrl: '/icons/location.png',
+                    iconSize: [41, 41],
+                    iconAnchor: [12, 41],
+                    popupAnchor: [1, -34],
+                    shadowSize: [41, 41]
+                })}>
+                    <Popup>
+                        <strong className="text-lg">{team.name}</strong>
+                        <p className="text-md">Chasing : {getTeamName(team.chasing)}</p>
+                        <p className="text-md">Chased by : {getTeamName(team.chased)}</p>
+                    </Popup>
+                </Marker>)}
+                <LayersControl>
+                    <LayersControl.Overlay name="Play area" checked={true}>
+                        <LayerGroup>
+                            <MapGridZoneSelector tilesColor={tilesColor} onClickTile={handleClickTile} tileSize={16} />
+                        </LayerGroup>
+                    </LayersControl.Overlay>
+                </LayersControl>
+            </MapContainer>
+            <TextInput placeholder="Time before deletion" value={timeBeforeDeletion} onChange={(e) => setTimeBeforeDeletion(Number(e.target.value))}></TextInput>
+            <GreenButton onClick={handleSubmit}>Delete selected zones</GreenButton>
+        </div>
+    )
+}

traque-front/components/admin/teamEdit.jsx

@@ -4,7 +4,7 @@ import BlueButton, { RedButton } from '../util/button';
 import useAdmin from '@/hook/useAdmin';
 import dynamic from 'next/dynamic';
 
-const CircularAreaPicker = dynamic(() => import('./mapPicker').then((mod) => mod.CircularAreaPicker), {
+const CircularAreaPicker = dynamic(() => import('./maps').then((mod) => mod.CircularAreaPicker), {
     ssr: false
 });
 

traque-front/components/admin/zoneSelector.jsx

@@ -1,8 +1,4 @@
-import { useEffect, useState } from "react";
-import BlueButton, { GreenButton, RedButton } from "../util/button";
-import { EditMode, ZonePicker } from "./mapPicker";
-import TextInput from "../util/textInput";
-import useAdmin from "@/hook/useAdmin";
+import {  ZoneInitializer } from "./maps";
 
 export function ZoneSelector() {
 
@@ -10,8 +6,7 @@ export function ZoneSelector() {
     return <div className='w-2/5 h-full gap-1 bg-white p-10 flex flex-col text-center shadow-2xl overflow-y-scroll'>
         <h2 className="text-2xl">Edit zones</h2>
         <div className='h-96'>
-            <ZonePicker />
+            <ZoneInitializer />
         </div>
-        <GreenButton >Apply</GreenButton>
     </div>
 }