Remove out of zone penality + upgrades

traque-front/app/admin/components/liveMap.jsx

@@ -19,7 +19,7 @@ const zoneTypes = {
 }
 
 export default function LiveMap({mapStyle, showZones, showNames, showArrows}) {
-    const { zoneSettings, zoneExtremities, teams, nextZoneDate, getTeam, gameState } = useAdmin();
+    const { zoneType, zoneExtremities, teams, nextZoneDate, getTeam, gameState } = useAdmin();
     const [timeLeftNextZone, setTimeLeftNextZone] = useState(null);
 
     // Remaining time before sending position
@@ -48,16 +48,16 @@ export default function LiveMap({mapStyle, showZones, showNames, showArrows}) {
         if (pos1 && pos2) {
             return (
                 <Polyline positions={[pos1, pos2]} pathOptions={{ color: 'black', weight: 3 }}/>
-            )
+            );
         } else {
             return null;
         }
     }
 
     function Zones() {
-        if (!(showZones && gameState == GameState.PLAYING && zoneSettings)) return null;
+        if (!(showZones && gameState == GameState.PLAYING && zoneType)) return null;
 
-        switch (zoneSettings.type) {
+        switch (zoneType) {
             case zoneTypes.circle:
                 return (
                     <div>
@@ -83,10 +83,12 @@ export default function LiveMap({mapStyle, showZones, showNames, showArrows}) {
             <CustomMapContainer mapStyle={mapStyle}>
                 <Zones/>
                 {teams.map((team) => team.currentLocation && !team.captured &&
-                    <Marker key={team.id} position={team.currentLocation} icon={positionIcon}>
-                        {showNames && <Tooltip permanent direction="top" offset={[0.5, -15]} className="custom-tooltip">{team.name}</Tooltip>}
-                        {showArrows && <Arrow pos1={team.currentLocation} pos2={getTeam(team.chasing).currentLocation}/>}
-                    </Marker>
+                    <div>
+                        <Marker key={team.id} position={team.currentLocation} icon={positionIcon}>
+                            {showNames && <Tooltip permanent direction="top" offset={[0.5, -15]} className="custom-tooltip">{team.name}</Tooltip>}
+                        </Marker>
+                        {showArrows && <Arrow key={team.id} pos1={team.currentLocation} pos2={getTeam(team.chased).currentLocation}/>}
+                    </div>
                 )}
             </CustomMapContainer>
         </div>

traque-front/app/admin/components/teamSidePanel.jsx

@@ -50,7 +50,7 @@ function getStatus(team, gamestate) {
 }
 
 export default function TeamSidePanel({ selectedTeamId, onClose }) {
-    const { getTeam, getTeamName, startDate, gameState } = useAdmin();
+    const { getTeam, startDate, gameState } = useAdmin();
     const [imgSrc, setImgSrc] = useState("");
     const team = getTeam(selectedTeamId);
     const NO_VALUE = "XX";
@@ -115,8 +115,8 @@ export default function TeamSidePanel({ selectedTeamId, onClose }) {
                 <DotLine label="ID de capture" value={String(team.captureCode).padStart(4, '0')} />
             </div>
             <div>
-                <DotLine label="Chasse" value={getTeamName(team.chasing) ?? NO_VALUE} />
-                <DotLine label="Chassé par" value={getTeamName(team.chased) ?? NO_VALUE} />
+                <DotLine label="Chasse" value={getTeam(team.chasing).name ?? NO_VALUE} />
+                <DotLine label="Chassé par" value={getTeam(team.chased).name ?? NO_VALUE} />
             </div>
             <div>
                 <DotLine label="Distance" value={formatDistance(team.distance)} />

traque-front/app/admin/parameters/components/circleZoneSelector.jsx

@@ -6,6 +6,7 @@ import { CustomMapContainer, MapEventListener } from "@/components/map";
 import { TextInput } from "@/components/input";
 import useAdmin from "@/hook/useAdmin";
 import useMapCircleDraw from "@/hook/useMapCircleDraw";
+import useLocalVariable from "@/hook/useLocalVariable";
 
 const EditMode = {
     MIN: 0,
@@ -43,38 +44,36 @@ function Drawings({ minZone, setMinZone, maxZone, setMaxZone, editMode }) {
     return (
         <div>
             <MapEventListener onLeftClick={handleLeftClick}  onRightClick={handleRightClick} onMouseMove={handleMouseMove}/>
-            {minCenter && minRadius && <Circle center={minCenter} radius={minRadius} color="blue" fillColor="blue" />}
-            {maxCenter && maxRadius && <Circle center={maxCenter} radius={maxRadius} color="red" fillColor="red" />}
+            {minCenter && minRadius && <Circle center={minCenter} radius={minRadius} color="red" fillColor="red" />}
+            {maxCenter && maxRadius && <Circle center={maxCenter} radius={maxRadius} color="blue" fillColor="blue" />}
         </div>
     );
 }
 
-export default function CircleZoneSelector({zoneSettings, updateZoneSettings, applyZoneSettings}) {
-    const {penaltySettings, changePenaltySettings} = useAdmin();
-    const [allowedTimeOutOfZone, setAllowedTimeOutOfZone] = useState("");
+export default function CircleZoneSelector({zoneSettings, modifyZoneSettings, applyZoneSettings}) {
+    const {outOfZoneDelay, updateSettings} = useAdmin();
+    const [localOutOfZoneDelay, setLocalOutOfZoneDelay, applyLocalOutOfZoneDelay] = useLocalVariable(outOfZoneDelay, (e) => updateSettings({outOfZoneDelay: e}));
     const [editMode, setEditMode] = useState(EditMode.MIN);
 
     useEffect(() => {
         setEditMode(editMode == EditMode.MIN ? EditMode.MAX : EditMode.MIN);
-    }, [zoneSettings.min, zoneSettings.max])
-
-    useEffect(() => {
-        if (penaltySettings) {
-            setAllowedTimeOutOfZone(penaltySettings.allowedTimeOutOfZone.toString());
-        }
-    }, [penaltySettings]);
+    }, [zoneSettings.min, zoneSettings.max]);
 
     function handleSettingsSubmit() {
-        console.log(zoneSettings)
         applyZoneSettings();
-        changePenaltySettings({allowedTimeOutOfZone: Number(allowedTimeOutOfZone)});
+        applyLocalOutOfZoneDelay();
+    }
+
+    function customStringToInt(e) {
+        const res = parseInt(e, 10);
+        return isNaN(res) ? null : res;
     }
 
     return (
-        <div className='h-full w-full bg-white p-3 gap-3 flex flex-row shadow-2xl'>
+        <div className='h-full w-full gap-3 flex flex-row'>
             <div className="h-full flex-1">
                 <CustomMapContainer>
-                    <Drawings minZone={zoneSettings.min} setMinZone={(e) => updateZoneSettings("min", e)} maxZone={zoneSettings.max} setMaxZone={(e) => updateZoneSettings("max", e)} editMode={editMode} />
+                    <Drawings minZone={zoneSettings.min} setMinZone={(e) => modifyZoneSettings("min", e)} maxZone={zoneSettings.max} setMaxZone={(e) => modifyZoneSettings("max", e)} editMode={editMode} />
                 </CustomMapContainer>
             </div>
             <div className="h-full w-1/6 flex flex-col gap-3">
@@ -83,21 +82,21 @@ export default function CircleZoneSelector({zoneSettings, updateZoneSettings, ap
                     {editMode == EditMode.MAX && <RedButton onClick={() => setEditMode(EditMode.MIN)}>Click to edit last zone</RedButton>}
                 </div>
                 <div className="w-full flex flex-row gap-2 items-center justify-between">
-                    <p>Number</p>
+                    <p>Reduction number</p>
                     <div className="w-16 h-10">
-                        <TextInput value={zoneSettings.reductionCount} onChange={(e) => updateZoneSettings("reductionCount", e.target.value)} />
+                        <TextInput id="reduction-number" value={zoneSettings?.reductionCount ?? ""} onChange={(e) => modifyZoneSettings("reductionCount", customStringToInt(e.target.value))} />
                     </div>
                 </div>
                 <div className="w-full flex flex-row gap-2 items-center justify-between">
-                    <p>Duration</p>
+                    <p>Zone duration</p>
                     <div className="w-16 h-10">
-                        <TextInput value={zoneSettings.duration} onChange={(e) => updateZoneSettings("duration", e.target.value)} />
+                        <TextInput id="duration" value={zoneSettings?.duration ?? ""} onChange={(e) => modifyZoneSettings("duration", customStringToInt(e.target.value))} />
                     </div>
                 </div>
                 <div className="w-full flex flex-row gap-2 items-center justify-between">
                     <p>Timeout</p>
                     <div className="w-16 h-10">
-                        <TextInput value={allowedTimeOutOfZone} onChange={(e) => setAllowedTimeOutOfZone(e.target.value)} />
+                        <TextInput id="timeout" value={localOutOfZoneDelay ?? ""} onChange={(e) => setLocalOutOfZoneDelay(customStringToInt(e.target.value))} />
                     </div>
                 </div>
                 <div className="w-full h-15">

traque-front/app/admin/parameters/components/messages.jsx

@@ -1,6 +1,6 @@
-import { useEffect, useState } from "react";
 import { Section } from "@/components/section";
 import useAdmin from "@/hook/useAdmin";
+import useLocalVariable from "@/hook/useLocalVariable";
 
 function MessageInput({title, ...props}) {
     return (
@@ -12,33 +12,19 @@ function MessageInput({title, ...props}) {
 }
 
 export default function Messages() {
-    const {gameSettings, changeGameSettings} = useAdmin();
-    const [capturedMessage, setCapturedMessage] = useState("");
-    const [winnerEndMessage, setWinnerEndMessage] = useState("");
-    const [loserEndMessage, setLoserEndMessage] = useState("");
-    const [waitingMessage, setWaitingMessage] = useState("");
+    const {messages, updateSettings} = useAdmin();
+    const [localGameSettings, setLocalGameSettings, applyLocalGameSettings] = useLocalVariable(messages, (e) => updateSettings({messages: e}));
 
-    useEffect(() => {
-        if (gameSettings) {
-            setCapturedMessage(gameSettings.capturedMessage);
-            setWinnerEndMessage(gameSettings.winnerEndGameMessage);
-            setLoserEndMessage(gameSettings.loserEndGameMessage);
-            setWaitingMessage(gameSettings.waitingMessage);
-        }
-    }, [gameSettings]);
-
-    function applySettings() {
-        changeGameSettings({capturedMessage: capturedMessage, winnerEndGameMessage: winnerEndMessage, loserEndGameMessage: loserEndMessage, waitingMessage: waitingMessage});
-    }
+    function modifyLocalZoneSettings(key, value) {
+        setLocalGameSettings(prev => ({...prev, [key]: value}));
+    };
 
     return (
-        <Section title="Message">
-            <div className="w-full h-full flex flex-col gap-3 items-center">
-                <MessageInput title="Attente  :" value={waitingMessage} onChange={(e) => setWaitingMessage(e.target.value)} onBlur={applySettings}/>
-                <MessageInput title="Capture :" value={capturedMessage} onChange={(e) => setCapturedMessage(e.target.value)} onBlur={applySettings}/>
-                <MessageInput title="Victoire :" value={winnerEndMessage} onChange={(e) => setWinnerEndMessage(e.target.value)} onBlur={applySettings}/>
-                <MessageInput title="Défaite  :" value={loserEndMessage} onChange={(e) => setLoserEndMessage(e.target.value)} onBlur={applySettings}/>
-            </div>
+        <Section title="Message" innerClassName="w-full h-full flex flex-col gap-3 items-center">
+            <MessageInput id="waiting" title="Attente  :" value={localGameSettings?.waiting ?? ""} onChange={(e) => modifyLocalZoneSettings("waiting", e.target.value)} onBlur={applyLocalGameSettings}/>
+            <MessageInput id="captured" title="Capture :" value={localGameSettings?.captured ?? ""} onChange={(e) => modifyLocalZoneSettings("captured", e.target.value)} onBlur={applyLocalGameSettings}/>
+            <MessageInput id="winner" title="Victoire :" value={localGameSettings?.winner ?? ""} onChange={(e) => modifyLocalZoneSettings("winner", e.target.value)} onBlur={applyLocalGameSettings}/>
+            <MessageInput id="loser" title="Défaite  :" value={localGameSettings?.loser ?? ""} onChange={(e) => modifyLocalZoneSettings("loser", e.target.value)} onBlur={applyLocalGameSettings}/>
         </Section>
     );
 }

traque-front/app/admin/parameters/components/polygonZoneSelector.jsx

@@ -7,6 +7,7 @@ import { CustomMapContainer, MapEventListener } from "@/components/map";
 import { TextInput } from "@/components/input";
 import useAdmin from "@/hook/useAdmin";
 import useMapPolygonDraw from "@/hook/useMapPolygonDraw";
+import useLocalVariable from "@/hook/useLocalVariable";
 
 function Drawings({ polygons, addPolygon, removePolygon }) {
     const { currentPolygon, highlightNodes, handleLeftClick, handleRightClick, handleMouseMove } = useMapPolygonDraw(polygons, addPolygon, removePolygon);
@@ -94,51 +95,44 @@ function Drawings({ polygons, addPolygon, removePolygon }) {
     );
 }
 
-export default function PolygonZoneSelector({zoneSettings, updateZoneSettings, applyZoneSettings}) {
+export default function PolygonZoneSelector({zoneSettings, modifyZoneSettings, applyZoneSettings}) {
     const defaultDuration = 10;
     const [polygons, setPolygons] = useState([]);
-    const {penaltySettings, changePenaltySettings} = useAdmin();
-    const [allowedTimeOutOfZone, setAllowedTimeOutOfZone] = useState("");
+    const {outOfZoneDelay, updateSettings} = useAdmin();
+    const [localOutOfZoneDelay, setLocalOutOfZoneDelay, applyLocalOutOfZoneDelay] = useLocalVariable(outOfZoneDelay, (e) => updateSettings({outOfZoneDelay: e}));
 
     useEffect(() => {
         if (zoneSettings) {
-            const newPolygons = zoneSettings.polygons.map((zone) => ({id: idFromPolygon(zone.polygon), polygon: zone.polygon, duration: zone.duration}));
-            setPolygons(newPolygons.map((zone) => zone.polygon));
+            setPolygons(zoneSettings.polygons.map((zone) => zone.polygon));
         }
     }, [zoneSettings]);
 
-    useEffect(() => {
-        if (penaltySettings) {
-            setAllowedTimeOutOfZone(penaltySettings.allowedTimeOutOfZone.toString());
-        }
-    }, [penaltySettings]);
-
     function idFromPolygon(polygon) {
         return (polygon[0].lat + polygon[1].lat + polygon[2].lat).toString() + (polygon[0].lng + polygon[1].lng + polygon[2].lng).toString();
     }
 
     function addPolygon(polygon) {
         const newPolygons = [...zoneSettings.polygons, {id: idFromPolygon(polygon), polygon: polygon, duration: defaultDuration}];
-        updateZoneSettings("polygons", newPolygons);
+        modifyZoneSettings("polygons", newPolygons);
     }
 
     function removePolygon(i) {
         const newPolygons = zoneSettings.polygons.filter((_, index) => index !== i);
-        updateZoneSettings("polygons", newPolygons);
+        modifyZoneSettings("polygons", newPolygons);
     }
 
     function updateDuration(i, duration) {
         const newPolygons = zoneSettings.polygons.map((zone, index) => index === i ? {id: zone.id, polygon: zone.polygon, duration: duration} : zone);
-        updateZoneSettings("polygons", newPolygons);
+        modifyZoneSettings("polygons", newPolygons);
     }
 
     function handleSettingsSubmit() {
         applyZoneSettings();
-        changePenaltySettings({allowedTimeOutOfZone: Number(allowedTimeOutOfZone)});
+        applyLocalOutOfZoneDelay();
     }
     
     return (
-        <div className='h-full w-full bg-white p-3 gap-3 flex flex-row shadow-2xl'>
+        <div className='h-full w-full gap-3 flex flex-row'>
             <div className="h-full flex-1">
                 <CustomMapContainer>
                     <Drawings polygons={polygons} addPolygon={addPolygon} removePolygon={removePolygon} />
@@ -148,12 +142,12 @@ export default function PolygonZoneSelector({zoneSettings, updateZoneSettings, a
                 <div className="w-full text-center">
                     <h2 className="text-xl">Reduction order</h2>
                 </div>
-                <ReorderList droppableId="zones-order" array={zoneSettings.polygons} setArray={(polygons) => updateZoneSettings("polygons", polygons)}>
+                <ReorderList droppableId="zones-order" array={zoneSettings.polygons} setArray={(polygons) => modifyZoneSettings("polygons", polygons)}>
                     { (zone, i) =>
                         <div className="w-full p-2 bg-white flex flex-row gap-2 items-center justify-between">
                             <p>Zone {i+1}</p>
                             <div className="w-16 h-10">
-                                <TextInput value={zone.duration} onChange={(e) => updateDuration(i, e.target.value)}/>
+                                <TextInput value={zone?.duration || ""} onChange={(e) => updateDuration(i, parseInt(e.target.value, 10))}/>
                             </div>
                         </div>
                     }
@@ -161,7 +155,7 @@ export default function PolygonZoneSelector({zoneSettings, updateZoneSettings, a
                 <div className="w-full flex flex-row gap-2 items-center justify-between">
                     <p>Timeout</p>
                     <div className="w-16 h-10">
-                        <TextInput value={allowedTimeOutOfZone} onChange={(e) => setAllowedTimeOutOfZone(e.target.value)} />
+                        <TextInput id="timeout" value={localOutOfZoneDelay ?? ""} onChange={(e) => setLocalOutOfZoneDelay(parseInt(e.target.value, 10))} />
                     </div>
                 </div>
                 <div className="w-full h-15">

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

@@ -1,5 +1,5 @@
 "use client";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import dynamic from "next/dynamic";
 import Link from "next/link";
 import { TextInput } from "@/components/input";
@@ -9,6 +9,7 @@ import { useAdminConnexion } from "@/context/adminConnexionContext";
 import useAdmin from '@/hook/useAdmin';
 import Messages from "./components/messages";
 import TeamManager from './components/teamManager';
+import useLocalVariable from "@/hook/useLocalVariable";
 
 // Imported at runtime and not at compile time
 const PolygonZoneSelector = dynamic(() => import('./components/polygonZoneSelector'), { ssr: false });
@@ -23,41 +24,23 @@ const defaultCircleSettings = {type: zoneTypes.circle, min: null, max: null, red
 const defaultPolygonSettings = {type: zoneTypes.polygon, polygons: []}
 
 export default function ConfigurationPage() {
-    const {zoneSettings, changeZoneSettings, penaltySettings, changePenaltySettings, addTeam} = useAdmin();
     const { useProtect } = useAdminConnexion();
-    const [allowedTimeBetweenUpdates, setAllowedTimeBetweenUpdates] = useState("");
+    const {zoneSettings, sendPositionDelay, updateSettings, addTeam} = useAdmin();
     const [teamName, setTeamName] = useState('');
-    const [localZoneSettings, setLocalZoneSettings] = useState(zoneSettings);
+    const [localZoneSettings, setLocalZoneSettings, applyLocalZoneSettings] = useLocalVariable(zoneSettings, (e) => updateSettings({zone: e}));
+    const [localSendPositionDelay, setLocalSendPositionDelay, applyLocalSendPositionDelay] = useLocalVariable(sendPositionDelay, (e) => updateSettings({sendPositionDelay: e}));
 
     useProtect();
-    
-    useEffect(() => {
-        if (penaltySettings) {
-            setAllowedTimeBetweenUpdates(penaltySettings.allowedTimeBetweenPositionUpdate.toString());
-        }
-    }, [penaltySettings]);
-    
-    useEffect(() => {
-        if (zoneSettings) {
-            setLocalZoneSettings(zoneSettings);
-        }
-    }, [zoneSettings]);
 
-    function updateLocalZoneSettings(key, value) {
+    function modifyLocalZoneSettings(key, value) {
         setLocalZoneSettings(prev => ({...prev, [key]: value}));
     };
 
-    function applySettings() {
-        if (Number(allowedTimeBetweenUpdates) != penaltySettings.allowedTimeBetweenPositionUpdate) {
-            changePenaltySettings({allowedTimeBetweenPositionUpdate: Number(allowedTimeBetweenUpdates)});
-        }
-    }
-
     function handleChangeZoneType() {
         setLocalZoneSettings(localZoneSettings.type == zoneTypes.circle ? defaultPolygonSettings : defaultCircleSettings)
     }
     
-    function handleSubmit(e) {
+    function handleTeamSubmit(e) {
         e.preventDefault();
         if (teamName !== "") {
             addTeam(teamName);
@@ -76,7 +59,7 @@ export default function ConfigurationPage() {
                 </div>
                 <Messages/>
                 <Section title="Équipe" outerClassName="flex-1 min-h-0" innerClassName="flex flex-col items-center gap-3">
-                    <form className='w-full flex flex-row gap-3' onSubmit={handleSubmit}>
+                    <form className='w-full flex flex-row gap-3' onSubmit={handleTeamSubmit}>
                         <div className='w-full'>
                             <input name="teamName" label='Team name' value={teamName} onChange={(e) => setTeamName(e.target.value)} type="text" className="w-full h-full p-4 ring-1 ring-inset ring-gray-300" />
                         </div>
@@ -90,21 +73,21 @@ export default function ConfigurationPage() {
                     <div className="w-full flex flex-row gap-2 items-center justify-between">
                         <p>Interval between position updates</p>
                         <div className="w-16 h-10">
-                            <TextInput value={allowedTimeBetweenUpdates} onChange={(e) => setAllowedTimeBetweenUpdates(e.target.value)} onBlur={applySettings} />
+                            <TextInput id="position-update" value={localSendPositionDelay ?? ""} onChange={(e) => setLocalSendPositionDelay(parseInt(e.target.value, 10))} onBlur={applyLocalSendPositionDelay} />
                         </div>
                     </div>
                 </Section>
             </div>
-            <div className="h-full flex-1 flex flex-col">
-                <div className="w-full h-20">
+            <div className="h-full flex-1 flex flex-col p-3 gap-3 bg-white shadow-2xl">
+                <div className="w-full h-15">
                     {localZoneSettings && <BlueButton onClick={handleChangeZoneType}>Change zone type</BlueButton>}
                 </div>
                 <div className="w-full flex-1">
                     {localZoneSettings && localZoneSettings.type == zoneTypes.circle &&
-                        <CircleZoneSelector zoneSettings={localZoneSettings} updateZoneSettings={updateLocalZoneSettings} applyZoneSettings={() => changeZoneSettings(localZoneSettings)}/>
+                        <CircleZoneSelector zoneSettings={localZoneSettings} modifyZoneSettings={modifyLocalZoneSettings} applyZoneSettings={applyLocalZoneSettings}/>
                     }
                     {localZoneSettings && localZoneSettings.type == zoneTypes.polygon &&
-                        <PolygonZoneSelector zoneSettings={localZoneSettings} updateZoneSettings={updateLocalZoneSettings} applyZoneSettings={() => changeZoneSettings(localZoneSettings)}/>
+                        <PolygonZoneSelector zoneSettings={localZoneSettings} modifyZoneSettings={modifyLocalZoneSettings} applyZoneSettings={applyLocalZoneSettings}/>
                     }
                 </div>
             </div>