added zone settings in admin ui

traque-front/components/admin/mapPicker.jsx

@@ -1,6 +1,6 @@
 "use client";
 import { useLocation } from "@/hook/useLocation";
-import { use, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import "leaflet/dist/leaflet.css";
 import { Circle, MapContainer, TileLayer, useMap } from "react-leaflet";
 import { useMapCircleDraw } from "@/hook/mapDrawing";
@@ -18,7 +18,7 @@ function MapPan(props) {
     return null;
 }
 
-function MapEventListener({onClick, onMouseMove}) {
+function MapEventListener({ onClick, onMouseMove }) {
     const map = useMap();
     useEffect(() => {
         map.on('click', onClick);
@@ -36,16 +36,16 @@ function MapEventListener({onClick, onMouseMove}) {
 }
 
 const DEFAULT_ZOOM = 17;
-export function CircularAreaPicker({area, setArea, ...props}) {
+export function CircularAreaPicker({ area, setArea, ...props }) {
     const location = useLocation(Infinity);
-    const {handleClick, handleMouseMove, center, radius} = useMapCircleDraw(area, setArea);
+    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"/>}
+            {center && radius && <Circle center={center} radius={radius} fillColor="blue" />}
             <MapPan center={location} zoom={DEFAULT_ZOOM} />
             <MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
         </MapContainer>)
@@ -54,10 +54,10 @@ export const EditMode = {
     MIN: 0,
     MAX: 1
 }
-export function ZonePicker({minArea, setMinArea, maxArea, setMaxArea,editMode, ...props}) {
+export function ZonePicker({ minZone, setMinZone, maxZone, setMaxZone, editMode, ...props }) {
     const location = useLocation(Infinity);
-    const {handleClick: maxClick, handleMouseMove: maxHover, center: maxCenter, radius: maxRadius} = useMapCircleDraw(minArea, setMinArea);
+    const { handleClick: maxClick, handleMouseMove: maxHover, center: maxCenter, radius: maxRadius } = useMapCircleDraw(minZone, setMinZone);
-    const {handleClick: minClick, handleMouseMove: minHover, center: minCenter, radius: minRadius} = useMapCircleDraw(maxArea, setMaxArea);
+    const { handleClick: minClick, handleMouseMove: minHover, center: minCenter, radius: minRadius } = useMapCircleDraw(maxZone, setMaxZone);
     function handleClick(e) {
         if (editMode == EditMode.MAX) {
             maxClick(e);
@@ -78,9 +78,10 @@ export function ZonePicker({minArea, setMinArea, maxArea, setMaxArea,editMode, .
                 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"/>}
+            {minCenter && minRadius && <Circle center={minCenter} radius={minRadius} color="blue" fillColor="blue" />}
-            {maxCenter && maxRadius && <Circle center={maxCenter} radius={maxRadius} color="red" fillColor="red"/>}
+            {maxCenter && maxRadius && <Circle center={maxCenter} radius={maxRadius} color="red" fillColor="red" />}
             <MapPan center={location} zoom={DEFAULT_ZOOM} />
             <MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
-        </MapContainer>)
+        </MapContainer>
+    )
 }

traque-front/components/admin/zoneSelector.jsx

@@ -1,17 +1,51 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
-import BlueButton, { RedButton } from "../util/button";
+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() {
     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)});
+    }
+
     return <div className='w-2/5 h-full gap-1 bg-gray-200 p-10 flex flex-col text-center shadow-2xl overflow-y-scroll'>
-        <h2 className="text-2xl">Teams ready status</h2>
+        <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} />
         </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}>Save</GreenButton>
     </div>
 }

traque-front/context/adminContext.jsx

@@ -7,11 +7,11 @@ import { GameState } from "@/util/gameState";
 
 const adminContext = createContext();
 
-function AdminProvider({children}) {
+function AdminProvider({ children }) {
     const [teams, setTeams] = useState([]);
-    const [zone, setZone] = useState(null)
+    const [zoneSettings, setZoneSettings] = useState(null)
     const { adminSocket } = useSocket();
-    const {loggedIn} = useAdminConnexion();
+    const { loggedIn } = useAdminConnexion();
     const [gameState, setGameState] = useState(GameState.SETUP);
 
     useSocketListener(adminSocket, "game_state", setGameState);
@@ -22,9 +22,9 @@ function AdminProvider({children}) {
 
     //Bind listeners to update the team list and the game status on socket message
     useSocketListener(adminSocket, "teams", setTeams);
-    useSocketListener(adminSocket, "zone", setZone);
+    useSocketListener(adminSocket, "zone_settings", setZoneSettings);
 
-    const value = useMemo(() => ({teams, zone, setZone, setTeams, gameState}), [zone,teams, gameState]);
+    const value = useMemo(() => ({ teams, zoneSettings, setZoneSettings, setTeams, gameState }), [zoneSettings, teams, gameState]);
     return (
         <adminContext.Provider value={value}>
             {children}

traque-front/hook/mapDrawing.jsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import { useLocation } from "./useLocation";
 
 export function useMapCircleDraw(area, setArea) {
     const [drawing, setDrawing] = useState(false);

traque-front/hook/useAdmin.jsx

@@ -2,7 +2,7 @@ import { useAdminContext } from "@/context/adminContext";
 import { useSocket } from "@/context/socketContext";
 
 export default function useAdmin(){
-    const {teams, gameState, zone } = useAdminContext();
+    const {teams, gameState, zoneSettings } = useAdminContext();
     const {adminSocket} = useSocket();
 
     function pollTeams() {
@@ -38,10 +38,10 @@ export default function useAdmin(){
         adminSocket.emit("change_state", state);
     }
 
-    function setZone(zone) {
+    function changeZoneSettings(zone) {
-        adminSocket.emit("set_zone", zone);
+        adminSocket.emit("set_zone_settings", zone);
     }
 
-    return {teams, zone, gameState,setZone, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, changeState, updateTeam };
+    return {teams, zoneSettings, gameState,changeZoneSettings, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, changeState, updateTeam };
 
 }