MVP systeme de zone quadrillage

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 LiveMap = dynamic(() => import('@/components/admin/maps').then((mod) => mod.ZoneEditor), {
     ssr: false
 });
 export default function AdminPage() {

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 }) {
+export function MapGridZoneSelector({ tilesColor, onClickTile, tileSize }) {
-    const [coloredTiles, setColoredTiles] = useState([]);
+    useMapEvent('click', (e) => {
-    const { map } = useLeafletContext();
-
-    useEffect(() => {
-        map.on('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))) {
+            onClickTile(tileNumber);
-                setColoredTiles(coloredTiles.filter(t => !t.equals(tileNumber)));
-            } else {
-                setColoredTiles([...coloredTiles, tileNumber]);
-            }
-        });
     });
 
-    useEffect(() => {
+    useMapGrid(tilesColor, tileSize);
-        onSelectedTile(coloredTiles);
-    }, [coloredTiles]);
-
-    useMapGrid(coloredTiles, 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 {  ZoneInitializer } from "./maps";
-import BlueButton, { GreenButton, RedButton } from "../util/button";
-import { EditMode, ZonePicker } from "./mapPicker";
-import TextInput from "../util/textInput";
-import useAdmin from "@/hook/useAdmin";
 
 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>
 }

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 />
+            <LayersControl>
-            <ZoneExtremities />
+                <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/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,12 @@ 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 => new TileNumber(t.x, t.y))));
     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

@@ -38,7 +38,7 @@ export function useMapCircleDraw(area, setArea) {
     }
 }
 
-export function useMapGrid(coloredTiles, tileSize) {
+export function useMapGrid(tilesColor, tileSize) {
     const { layerContainer, map } = useLeafletContext();
     const [grid, setGrid] = useState(null);
 
@@ -79,15 +79,12 @@ export function useMapGrid(coloredTiles, tileSize) {
                     const yMinPixel = Math.round(size.y * (y - minTileY) / (maxTileY - minTileY));
                     const yMaxPixel = Math.round(size.y * (y + 1 - minTileY) / (maxTileY - minTileY));
 
-                    // fill the rectangle with a color
+                    if (this.tilesColor?.some(t => t.x == tile.x && t.y == tile.y)) {
-                    // if(coloredTiles.some(t => t.equals(tile))) {
+                        ctx.fillStyle = this.tilesColor.find(t => t.x == tile.x && t.y == tile.y).color;
-                    //     console.log(coloredTiles, "filling tile " + tile.x + " " + tile.y)
+                    }
-                    // } else {
+                    else {
-                    //     console.log(coloredTiles, "not filling tile " + tile.x + " " + tile.y)
+                        ctx.fillStyle = 'rgba(255, 255, 255, 0)';
-                    // }
+                    }
-                    ctx.fillStyle = this.coloredTiles && this.coloredTiles.some(t => t.equals(tile))
-                        ? 'rgba(0, 0, 255, 0.3)'
-                        : 'rgba(255, 255, 255, 0)';
                     ctx.fillRect(xMinPixel, yMinPixel, xMaxPixel - xMinPixel, yMaxPixel - yMinPixel);
                 }
             }
@@ -105,8 +102,25 @@ export function useMapGrid(coloredTiles, tileSize) {
 
     useEffect(() => {
         if (grid) {
-            grid.coloredTiles = coloredTiles;
+            grid.tilesColor = tilesColor;
             grid.redraw();
         }
-    }, [coloredTiles]);
+    }, [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) {
+    function initZone(zone) {
-        adminSocket.emit("set_zone_settings", 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 };
 
 }