Remove out of zone penality + upgrades

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">