Merge branch 'main' of github.com:quentinrsl/traque into main

traque-front/app/admin/layout.js

@@ -11,6 +11,7 @@ export default function AdminLayout({ children}) {
                         <ul className='flex' >
                             <Link href="/admin"><li className="p-5 bg-gray-800 hover:bg-gray-600 transition-all cursor-pointer h-full">Admin</li></Link>
                             <Link href="/admin/teams"><li className="p-5 bg-gray-800 hover:bg-gray-600 transition-all cursor-pointer h-full">Teams</li></Link>
+                            <Link href="/admin/map"><li className="p-5 bg-gray-800 hover:bg-gray-600 transition-all cursor-pointer h-full">Map</li></Link>
                         </ul> 
                     </div>
                     <div className="h-full overflow-y-scroll">

traque-front/app/admin/map/page.js

@@ -0,0 +1,9 @@
+"use client";
+import dynamic from 'next/dynamic';
+
+const LiveMap = dynamic(() => import('@/components/admin/maps').then((mod) => mod.LiveMap), {
+    ssr: false
+});
+export default function LiveMapPage() {
+    return <LiveMap />
+}

traque-front/app/admin/page.js

@@ -11,7 +11,7 @@ import dynamic from "next/dynamic";
 const ZoneSelector = dynamic(() => import('@/components/admin/zoneSelector').then((mod) => mod.ZoneSelector), {
     ssr: false
 });
-const LiveMap = dynamic(() => import('@/components/admin/mapPicker').then((mod) => mod.LiveMap), {
+const ZoneEditor = dynamic(() => import('@/components/admin/maps').then((mod) => mod.ZoneEditor), {
     ssr: false
 });
 export default function AdminPage() {
@@ -36,7 +36,7 @@ export default function AdminPage() {
             {(gameState == GameState.SETUP || gameState == GameState.PLACEMENT) && <ZoneSelector />}
             {(gameState == GameState.SETUP || gameState == GameState.PLACEMENT) && <PenaltySettings />}
             {gameState == GameState.PLAYING && <div className='grow flex-1 row-span-2 bg-white p-10 flex shadow-2xl'>
-                <LiveMap />
+                <ZoneEditor />
             </div>}
         </div>
     )

traque-front/components/admin/mapPicker.jsx

@@ -1,125 +0,0 @@
-"use client";
-import { useLocation } from "@/hook/useLocation";
-import { useEffect, useState } from "react";
-import "leaflet/dist/leaflet.css";
-import { Circle, MapContainer, Marker, Popup, TileLayer, useMap } from "react-leaflet";
-import { useMapCircleDraw } from "@/hook/mapDrawing";
-import useAdmin from "@/hook/useAdmin";
-
-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 = 17;
-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>)
-}
-export const EditMode = {
-    MIN: 0,
-    MAX: 1
-}
-export function ZonePicker({ minZone, setMinZone, maxZone, setMaxZone, editMode, ...props }) {
-    const location = useLocation(Infinity);
-    const { handleClick: maxClick, handleMouseMove: maxHover, center: maxCenter, radius: maxRadius } = useMapCircleDraw(minZone, setMinZone);
-    const { handleClick: minClick, handleMouseMove: minHover, center: minCenter, radius: minRadius } = useMapCircleDraw(maxZone, setMaxZone);
-    function handleClick(e) {
-        if (editMode == EditMode.MAX) {
-            maxClick(e);
-        } else {
-            minClick(e);
-        }
-    }
-    function handleMouseMove(e) {
-        if (editMode == EditMode.MAX) {
-            maxHover(e);
-        } else {
-            minHover(e);
-        }
-    }
-    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"
-            />
-            {minCenter && minRadius && <Circle center={minCenter} radius={minRadius} color="blue" fillColor="blue" />}
-            {maxCenter && maxRadius && <Circle center={maxCenter} radius={maxRadius} color="red" fillColor="red" />}
-            <MapPan center={location} zoom={DEFAULT_ZOOM} />
-            <MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
-        </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

@@ -0,0 +1,15 @@
+import { useMapGrid } from '@/hook/mapDrawing';
+import { TileNumber, latLngToTileNumber } from '../util/map';
+import { useMapEvent } from 'react-leaflet';
+
+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));
+            onClickTile(tileNumber);
+    });
+
+    useMapGrid(tilesColor, tileSize);
+
+    return null;
+}

traque-front/components/admin/maps.jsx

@@ -0,0 +1,244 @@
+"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(null);
+
+    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 => {
+                    console.log(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) => {
+        if (timeBeforeDeletion == null) {
+            return;
+        }
+        e.preventDefault();
+        removeZone(zonesToDelete, timeBeforeDeletion);
+        setZonesToDelete([]);
+        setTimeBeforeDeletion(null);
+    }
+
+
+    return (
+        <div className="flex flex-col w-full">
+            <div className="h-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>
+            </div>
+            <div className="flex flex-row h-20">
+
+                <TextInput className="w-4/5" placeholder="Time before deletion" value={timeBeforeDeletion} onChange={(e) => setTimeBeforeDeletion(Number(e.target.value))}></TextInput>
+                <GreenButton className="w-1/5" onClick={handleSubmit}>Delete selected zones</GreenButton>
+            </div>
+        </div>
+    )
+}
+
+export function LiveMap({ ...props }) {
+    const location = useLocation(Infinity);
+    const { zone, teams, getTeamName  } = useAdmin();
+    const tilesColor = useTilesColor(zone);
+
+    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={() => { }} tileSize={16} />
+                    </LayerGroup>
+                </LayersControl.Overlay>
+                <LayersControl.Overlay name="Players live position" checked={true}>
+                    <LayerGroup>
+                        {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>)}
+                    </LayerGroup>
+                </LayersControl.Overlay>
+                <LayersControl.Overlay name="Players last sent position" checked={false}>
+                    <LayerGroup>
+                        {teams.map((team) => team.currentLocation && !team.captured && <Marker key={team.id} position={team.lastSentLocation} icon={new L.Icon({
+                            iconUrl: '/icons/clock.png',
+                            iconSize: [41, 41],
+                            iconAnchor: [12, 41],
+                            popupAnchor: [1, -34],
+                            shadowSize: [41, 41]
+                        })}>
+                            <Popup>
+                                <strong className="text-lg">Last position of {team.name}</strong>
+                            </Popup>
+                        </Marker>)}
+                    </LayerGroup>
+                </LayersControl.Overlay>
+            </LayersControl>
+        </MapContainer>
+    )
+}

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,61 +1,12 @@
-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() {
-    const [editMode, setEditMode] = useState(EditMode.MIN);
-    const [minZone, setMinZone] = useState(null);
-    const [maxZone, setMaxZone] = useState(null);
-    const [reductionCount, setReductionCount] = useState("");
-    const [reductionDuration, setReductionDuration] = useState("");
-    const [reductionInterval, setReductionInterval] = useState("");
-    const {zoneSettings, changeZoneSettings} = useAdmin();
-
-    useEffect(() => {
-        if (zoneSettings) {
-            setMinZone(zoneSettings.min);
-            setMaxZone(zoneSettings.max);
-            setReductionCount(zoneSettings.reductionCount.toString());
-            setReductionDuration(zoneSettings.reductionDuration.toString());
-            setReductionInterval(zoneSettings.reductionInterval.toString());
-        }
-    }, [zoneSettings]);
-
-    function handleSettingsSubmit() {
-        changeZoneSettings({min:minZone, max:maxZone, reductionCount: Number(reductionCount), reductionDuration: Number(reductionDuration), reductionInterval: Number(reductionInterval)});
-    }
 
     //When the user set one zone, switch to the other
-    useEffect(() => {
-        if(editMode == EditMode.MIN) {
-            setEditMode(EditMode.MAX);
-        }else {
-            setEditMode(EditMode.MIN);
-        }
-
-    }, [minZone, maxZone]);
-
     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>
-        {editMode == EditMode.MIN && <RedButton onClick={() => setEditMode(EditMode.MAX)}>Edit end zone</RedButton>}
-        {editMode == EditMode.MAX && <BlueButton onClick={() => setEditMode(EditMode.MIN)}>Edit start zone</BlueButton>}
         <div className='h-96'>
-            <ZonePicker minZone={minZone} maxZone={maxZone} editMode={editMode} setMinZone={setMinZone} setMaxZone={setMaxZone} />
+            <ZoneInitializer />
         </div>
-        <div>
-            <p>Number of reductions</p>
-            <TextInput value={reductionCount} onChange={(e) => setReductionCount(e.target.value)}></TextInput>
-        </div>
-        <div>
-            <p>Duration of each reduction</p>
-            <TextInput value={reductionDuration} onChange={(e) => setReductionDuration(e.target.value)}></TextInput>
-        </div>
-        <div>
-            <p>Interval between reductions</p>
-            <TextInput value={reductionInterval} onChange={(e) => setReductionInterval(e.target.value)}></TextInput>
-        </div>
-        <GreenButton onClick={handleSettingsSubmit}>Apply</GreenButton>
     </div>
 }

traque-front/components/team/actionDrawer.jsx

@@ -16,7 +16,6 @@ export default function ActionDrawer() {
 
     useEffect(() => {
         const interval = setInterval(() => {
-            console.log(locationSendDeadline)
             const timeLeft = locationSendDeadline - Date.now();
             setTimeLeftBeforePenalty(Math.floor(timeLeft / 1000 / 60));
         }, 1000);

traque-front/components/team/map.jsx

@@ -1,11 +1,13 @@
 'use client';
 import React, { useEffect, useState } from 'react'
-import { Circle, MapContainer, Marker, Popup, TileLayer, useMap } from 'react-leaflet'
+import { Circle, LayerGroup, LayersControl, MapContainer, Marker, Popup, TileLayer, useMap } from 'react-leaflet'
 import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'
 import "leaflet-defaulticon-compatibility";
 import "leaflet/dist/leaflet.css";
 import useGame from '@/hook/useGame';
 import { useTeamContext } from '@/context/teamContext';
+import {  useTilesColor } from '@/hook/mapDrawing';
+import { MapGridZoneSelector } from '../admin/mapZoneSelector';
 
 const DEFAULT_ZOOM = 17;
 
@@ -25,27 +27,11 @@ function MapPan(props) {
     return null;
 }
 
-function LiveZone() {
-    const { zone } = useTeamContext();
-    console.log('Zone', zone);
-    return zone && <Circle center={zone.center} radius={zone.radius} color='blue' fill={false} />
-}
-
-function ZoneExtremities() {
-    const { zoneExtremities } = useTeamContext();
-    console.log('Zone extremities', zoneExtremities);
-    return zoneExtremities?.begin && zoneExtremities?.end && <>
-        {/* <Circle center={zoneExtremities.begin.center} radius={zoneExtremities.begin.radius} color='black' fill={false} /> */}
-        <Circle center={zoneExtremities.end.center} radius={zoneExtremities.end.radius} color='red' fill={false} />
-    </>
-
-}
-
 export function LiveMap({ ...props }) {
+    const {zone} = useTeamContext();
+    const tilesColor = useTilesColor(zone);
     const { currentPosition, enemyPosition } = useGame();
-    useEffect(() => {
-        console.log('Current position', currentPosition);
-    }, [currentPosition]);
+
     return (
         <MapContainer  {...props} className='min-h-full z-0' center={[0, 0]} zoom={0} scrollWheelZoom={true}>
             <TileLayer
@@ -75,8 +61,13 @@ export function LiveMap({ ...props }) {
                 </Popup>
             </Marker>}
             <MapPan center={currentPosition} />
-            <LiveZone />
-            <ZoneExtremities />
+            <LayersControl>
+                <LayersControl.Overlay name="Play area" checked={true}>
+                    <LayerGroup>
+                        <MapGridZoneSelector tilesColor={tilesColor} onClickTile={()=>{}} tileSize={16}/>
+                    </LayerGroup>
+                </LayersControl.Overlay>
+            </LayersControl>
         </MapContainer>
     )
 }

traque-front/components/team/placementOverlay.jsx

@@ -1,6 +1,5 @@
 import { useTeamConnexion } from "@/context/teamConnexionContext";
 import useGame from "@/hook/useGame"
-import Image from "next/image";
 
 export default function PlacementOverlay() {
     const { name, ready } = useGame();

traque-front/components/util/map.jsx

@@ -0,0 +1,21 @@
+export class TileNumber {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+        this.removeDate = null;
+    }
+    equals(other) {
+        return this.x === other.x && this.y === other.y;
+    }
+}
+
+export function latLngToTileNumber(latLng, tileSize) {
+    const numTilesX = 2 ** tileSize;
+    const numTilesY = 2 ** tileSize;
+    const lngDegrees = latLng.lng;
+    const latRadians = latLng.lat * (Math.PI / 180);
+    return new L.Point(
+        numTilesX * ((lngDegrees + 180) / 360),
+        numTilesY * (1 - Math.log(Math.tan(latRadians) + 1 / Math.cos(latRadians)) / Math.PI) / 2
+    );
+}

traque-front/context/adminContext.jsx

@@ -4,15 +4,15 @@ import { useSocket } from "./socketContext";
 import { useSocketListener } from "@/hook/useSocketListener";
 import { useAdminConnexion } from "./adminConnexionContext";
 import { GameState } from "@/util/gameState";
+import { TileNumber } from "@/components/util/map";
 
 const adminContext = createContext();
 
 function AdminProvider({ children }) {
     const [teams, setTeams] = useState([]);
-    const [zoneSettings, setZoneSettings] = useState(null)
+    const [zone, setZone] = useState([])
     const [penaltySettings, setPenaltySettings] = useState(null);
     const [gameSettings, setGameSettings] = useState(null);
-    const [zone, setZone] = useState(null);
     const [zoneExtremities, setZoneExtremities] = useState(null);
     const { adminSocket } = useSocket();
     const { loggedIn } = useAdminConnexion();
@@ -26,13 +26,16 @@ function AdminProvider({ children }) {
 
     //Bind listeners to update the team list and the game status on socket message
     useSocketListener(adminSocket, "teams", setTeams);
-    useSocketListener(adminSocket, "zone_settings", setZoneSettings);
     useSocketListener(adminSocket, "game_settings", setGameSettings);
     useSocketListener(adminSocket, "penalty_settings", setPenaltySettings);
-    useSocketListener(adminSocket, "zone", setZone);
+    useSocketListener(adminSocket, "zone", (zone) => setZone(zone.map(t => {
+        let tile = new TileNumber(t.x, t.y);
+        tile.removeDate = t.removeDate;
+        return tile;
+    })));
     useSocketListener(adminSocket, "new_zone", setZoneExtremities);
 
-    const value = useMemo(() => ({ zone, zoneExtremities, teams, zoneSettings, penaltySettings, gameSettings, gameState }), [zoneSettings, teams, gameState, zone, zoneExtremities, penaltySettings, gameSettings]);
+    const value = useMemo(() => ({ zone, zoneExtremities, teams, penaltySettings, gameSettings, gameState }), [teams, gameState, zone, zoneExtremities, penaltySettings, gameSettings]);
     return (
         <adminContext.Provider value={value}>
             {children}

traque-front/context/teamContext.jsx

@@ -13,7 +13,6 @@ function TeamProvider({children}) {
     const [gameState, setGameState] = useState(GameState.SETUP);
     const [gameSettings, setGameSettings] = useState(null);
     const [zone, setZone] = useState(null);
-    const [zoneExtremities, setZoneExtremities] = useState(null);
     const measuredLocation = useLocation(5000);
     const {teamSocket} = useSocket();
     const {loggedIn} = useTeamConnexion();
@@ -27,7 +26,6 @@ function TeamProvider({children}) {
     
     useSocketListener(teamSocket, "game_state", setGameState);
     useSocketListener(teamSocket, "zone", setZone);
-    useSocketListener(teamSocket, "new_zone", setZoneExtremities);
     useSocketListener(teamSocket, "game_settings", setGameSettings);
 
 
@@ -40,7 +38,7 @@ function TeamProvider({children}) {
         }
     }, [loggedIn, measuredLocation]);
     
-    const value = useMemo(() => ({teamInfos, gameState, zone, zoneExtremities, gameSettings}), [gameSettings, teamInfos, gameState, zone, zoneExtremities]);
+    const value = useMemo(() => ({teamInfos, gameState, zone, gameSettings}), [gameSettings, teamInfos, gameState, zone]);
     return (
         <teamContext.Provider value={value}>
             {children}

traque-front/hook/mapDrawing.jsx

@@ -1,4 +1,7 @@
+import { TileNumber, latLngToTileNumber } from "@/components/util/map";
 import { useEffect, useState } from "react";
+import { useLeafletContext } from '@react-leaflet/core';
+import L from 'leaflet';
 
 export function useMapCircleDraw(area, setArea) {
     const [drawing, setDrawing] = useState(false);
@@ -12,18 +15,18 @@ export function useMapCircleDraw(area, setArea) {
     }, [area])
 
     function handleClick(e) {
-        if(!drawing) {
+        if (!drawing) {
             setCenter(e.latlng);
             setRadius(null);
             setDrawing(true);
         } else {
             setDrawing(false);
-            setArea({center, radius});
+            setArea({ center, radius });
         }
     }
 
     function handleMouseMove(e) {
-        if(drawing) {
+        if (drawing) {
             setRadius(e.latlng.distanceTo(center));
         }
     }
@@ -33,4 +36,91 @@ export function useMapCircleDraw(area, setArea) {
         center,
         radius,
     }
+}
+
+export function useMapGrid(tilesColor, tileSize) {
+    const { layerContainer, map } = useLeafletContext();
+    const [grid, setGrid] = useState(null);
+
+    const Grid = L.GridLayer.extend({
+        createTile: function (coords) {
+            const tile = L.DomUtil.create('canvas', 'leaflet-tile');
+            const ctx = tile.getContext('2d');
+            const size = this.getTileSize();
+            tile.width = size.x
+            tile.height = size.y
+
+            // calculate projection coordinates of top left tile pixel
+            const nwPoint = coords.scaleBy(size);
+            // calculate geographic coordinates of top left tile pixel
+            const nw = map.unproject(nwPoint, coords.z);
+            // calculate fraction tile number at top left point
+            const nwTile = latLngToTileNumber(nw, tileSize)
+
+            // calculate projection coordinates of bottom right tile pixel
+            const sePoint = new L.Point(nwPoint.x + size.x - 1, nwPoint.y + size.y - 1)
+            // calculate geographic coordinates of bottom right tile pixel
+            const se = map.unproject(sePoint, coords.z);
+            // calculate fractional tile number at bottom right point
+            const seTile = latLngToTileNumber(se, tileSize)
+
+            const minTileX = nwTile.x
+            const maxTileX = seTile.x
+            const minTileY = nwTile.y
+            const maxTileY = seTile.y
+
+            for (let x = Math.ceil(minTileX) - 1; x <= Math.floor(maxTileX) + 1; x++) {
+                for (let y = Math.ceil(minTileY) - 1; y <= Math.floor(maxTileY) + 1; y++) {
+
+                    let tile = new TileNumber(x, y)
+
+                    const xMinPixel = Math.round(size.x * (x - minTileX) / (maxTileX - minTileX));
+                    const xMaxPixel = Math.round(size.x * (x + 1 - minTileX) / (maxTileX - minTileX));
+                    const yMinPixel = Math.round(size.y * (y - minTileY) / (maxTileY - minTileY));
+                    const yMaxPixel = Math.round(size.y * (y + 1 - minTileY) / (maxTileY - minTileY));
+
+                    if (this.tilesColor?.some(t => t.x == tile.x && t.y == tile.y)) {
+                        ctx.fillStyle = this.tilesColor.find(t => t.x == tile.x && t.y == tile.y).color;
+                    }
+                    else {
+                        ctx.fillStyle = 'rgba(255, 255, 255, 0)';
+                    }
+                    ctx.fillRect(xMinPixel, yMinPixel, xMaxPixel - xMinPixel, yMaxPixel - yMinPixel);
+                }
+            }
+            return tile;
+        },
+    });
+
+    useEffect(() => {
+        let g = new Grid({
+            minZoom: 12,
+        });
+        setGrid(g);
+        layerContainer.addLayer(g);
+    }, [])
+
+    useEffect(() => {
+        if (grid) {
+            grid.tilesColor = tilesColor;
+            grid.redraw();
+        }
+    }, [tilesColor,grid]);
+}
+
+export function useTilesColor(zone) {
+    const [tilesColor, setTilesColor] = useState([]);
+    useEffect(() => {
+        if (zone) {
+            setTilesColor(zone.map(t => {
+                if(t.removeDate == null) {
+                    return { x: t.x, y: t.y, color: 'rgba(0, 0, 255, 0.3'}
+                }else {
+                    return { x: t.x, y: t.y, color: 'rgba(255, 255, 0, 0.3'}
+                }
+
+            }));
+        }
+    }, [zone]);
+    return tilesColor;
 }

traque-front/hook/useAdmin.jsx

@@ -39,8 +39,12 @@ export default function useAdmin(){
         adminSocket.emit("change_state", state);
     }
 
-    function changeZoneSettings(zone) {
-        adminSocket.emit("set_zone_settings", zone);
+    function initZone(zone) {
+        adminSocket.emit("set_zone", zone);
+    }
+
+    function removeZone(zone, time) {
+        adminSocket.emit("remove_zone", zone, time);
     }
 
     function changePenaltySettings(penalties) {
@@ -50,6 +54,6 @@ export default function useAdmin(){
     function changeGameSettings(settings) {
         adminSocket.emit("set_game_settings", settings);
     }
-    return {...adminContext,changeGameSettings, changeZoneSettings, changePenaltySettings, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, changeState, updateTeam };
+    return {...adminContext,changeGameSettings, removeZone, initZone, changePenaltySettings, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, changeState, updateTeam };
 
 }