From 623d1c05bf1f014a3cfb5f1c2c1af48f58cbebd6 Mon Sep 17 00:00:00 2001
From: Sebastien Riviere <sebastien.riviere@telecom-paris.fr>
Date: Sun, 10 Aug 2025 18:18:25 +0200
Subject: [PATCH] Improved zone selection

---
 traque-back/zone_manager.js                   | 17 +++++-
 traque-front/app/admin/parameters/page.js     |  8 +--
 .../components/admin/gameSettings.jsx         | 34 ++++++------
 .../components/admin/polygonZoneMap.jsx       | 52 +++++++++++++------
 4 files changed, 75 insertions(+), 36 deletions(-)

diff --git a/traque-back/zone_manager.js b/traque-back/zone_manager.js
index ecebf60..26cd2aa 100644
--- a/traque-back/zone_manager.js
+++ b/traque-back/zone_manager.js
@@ -168,7 +168,9 @@ export default {
     isRunning: false,
     zones: [], // A zone has to be connected space that doesn't contain an earth pole
     currentZone: { id: 0, timeoutId: null, endDate: null },
+    zoneType: "polygon",
     settings: defaultPolygonSettings,
+    settingsToZones: polygonSettingsToZones,
 
     start() {
         this.isRunning = true;
@@ -213,13 +215,26 @@ export default {
     },
 
     changeSettings(settings) {
-        const zones = polygonSettingsToZones(settings);
+        const zones = this.settingsToZones(settings);
         if (!zones) return false;
         this.zones = zones;
         this.settings = settings;
         this.zoneBroadcast();
         return true;
     },
+
+    changeZoneType(type) {
+        if (this.zoneType == type) return;
+        if (type == "circle") {
+            this.zoneType = "circle";
+            this.settings = defaultCircleSettings;
+            this.settingsToZones = circleSettingsToZones;
+        } else if (type == "polygon") {
+            this.zoneType = "polygon";
+            this.settings = defaultPolygonSettings;
+            this.settingsToZones = polygonSettingsToZones;
+        }
+    },
     
     zoneBroadcast() {
         const zone = {
diff --git a/traque-front/app/admin/parameters/page.js b/traque-front/app/admin/parameters/page.js
index 8e39b6f..58e8e44 100644
--- a/traque-front/app/admin/parameters/page.js
+++ b/traque-front/app/admin/parameters/page.js
@@ -1,6 +1,5 @@
 "use client";
 import GameSettings from "@/components/admin/gameSettings";
-import PenaltySettings from "@/components/admin/penaltySettings";
 import { useAdminConnexion } from "@/context/adminConnexionContext";
 import dynamic from "next/dynamic";
 
@@ -13,12 +12,13 @@ export default function AdminPage() {
     useProtect();
 
     return (
-        <div className='min-h-full bg-gray-200 p-10 flex flex-row content-start gap-5'>
+        <div className='h-full bg-gray-200 p-10 flex flex-row gap-5'>
             <div className="h-full w-2/6">
                 <GameSettings />
             </div>
-            <ZoneSelector />
-            <PenaltySettings />
+            <div className="h-full w-full">
+                <ZoneSelector />
+            </div>
         </div>
     );
 }
\ No newline at end of file
diff --git a/traque-front/components/admin/gameSettings.jsx b/traque-front/components/admin/gameSettings.jsx
index 8c02dc7..3f0dfe4 100644
--- a/traque-front/components/admin/gameSettings.jsx
+++ b/traque-front/components/admin/gameSettings.jsx
@@ -24,25 +24,27 @@ export default function GameSettings() {
     }
 
     return (
-        <div className='w-full h-full gap-1 bg-white p-10 flex flex-col text-center shadow-2xl overflow-y-scroll'>
-            <h2 className="text-2xl">Other settings</h2>
-            <div>
-                <p>Waiting message</p>
-                <TextArea value={waitingMessage} onChange={(e) => setWaitingMessage(e.target.value)} />
+        <div className='w-full h-full gap-5 bg-white p-10 flex flex-col text-center shadow-2xl overflow-y-scroll'>
+            <h2 className="text-2xl">Messages</h2>
+            <div className='w-full gap-1 flex flex-col text-center'>
+                <p>Game setup</p>
+                <TextArea style={{height: 60}} value={waitingMessage} onChange={(e) => setWaitingMessage(e.target.value)} />
+            </div>
+            <div className='w-full gap-1 flex flex-col text-center'>
+                <p>Team captured</p>
+                <TextArea style={{height: 60}} value={capturedMessage} onChange={(e) => setCapturedMessage(e.target.value)} />
+            </div>
+            <div className='w-full gap-1 flex flex-col text-center'>
+                <p>Game finished (winner)</p>
+                <TextArea style={{height: 60}} value={winnerEndMessage} onChange={(e) => setWinnerEndMessage(e.target.value)} />
+            </div>
+            <div className='w-full gap-1 flex flex-col text-center'>
+                <p>Game finished (loser)</p>
+                <TextArea style={{height: 60}} value={loserEndMessage} onChange={(e) => setLoserEndMessage(e.target.value)} />
             </div>
             <div>
-                <p>Captured message</p>
-                <TextArea value={capturedMessage} onChange={(e) => setCapturedMessage(e.target.value)} />
+                <GreenButton onClick={applySettings}>Apply</GreenButton>
             </div>
-            <div>
-                <p>Game finished message (winner)</p>
-                <TextArea value={winnerEndMessage} onChange={(e) => setWinnerEndMessage(e.target.value)} />
-            </div>
-            <div>
-                <p>Game finished message (loser)</p>
-                <TextArea value={loserEndMessage} onChange={(e) => setLoserEndMessage(e.target.value)} />
-            </div>
-            <GreenButton onClick={applySettings}>Apply</GreenButton>
         </div>
     )
 }
diff --git a/traque-front/components/admin/polygonZoneMap.jsx b/traque-front/components/admin/polygonZoneMap.jsx
index 0c1242a..89e59b3 100644
--- a/traque-front/components/admin/polygonZoneMap.jsx
+++ b/traque-front/components/admin/polygonZoneMap.jsx
@@ -69,7 +69,7 @@ function PolygonZonePicker({ polygons, addPolygon, removePolygon, ...props }) {
     const location = useLocation(Infinity);
 
     return (
-        <div className='h-96'>
+        <div className='h-full'>
             <MapContainer {...props} 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'
@@ -87,13 +87,18 @@ export default function PolygonZoneMap() {
     const [polygons, setPolygons] = useState([]);
     const [durations, setDurations] = useState([]);
     const {zoneSettings, changeZoneSettings} = useAdmin();
+    const {penaltySettings, changePenaltySettings} = useAdmin();
+    const [allowedTimeOutOfZone, setAllowedTimeOutOfZone] = useState("");
 
     useEffect(() => {
         if (zoneSettings) {
             setPolygons(zoneSettings.polygons);
             setDurations(zoneSettings.durations);
         }
-    }, [zoneSettings]);
+        if (penaltySettings) {
+            setAllowedTimeOutOfZone(penaltySettings.allowedTimeOutOfZone.toString());
+        }
+    }, [zoneSettings, penaltySettings]);
 
     function addPolygon(polygon) {
         // Polygons
@@ -122,21 +127,38 @@ export default function PolygonZoneMap() {
     function handleSettingsSubmit() {
         const newSettings = {polygons: polygons, durations: durations};
         changeZoneSettings(newSettings);
+        changePenaltySettings({allowedTimeOutOfZone: Number(allowedTimeOutOfZone)});
     }
-
+    
     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>
-            <PolygonZonePicker polygons={polygons} addPolygon={addPolygon} removePolygon={removePolygon} />
-            <ul>
-                {durations.map((duration, i) => (
-                    <li key={i}>
-                        <p>Zone {i+1}</p>
-                        <TextInput value={duration} onChange={(e) => updateDuration(i, e.target.value)}/>
-                    </li>
-                ))}
-            </ul>
-            <GreenButton onClick={handleSettingsSubmit}>Apply</GreenButton>
+        <div className='h-full w-full bg-white p-5 gap-5 flex flex-row shadow-2xl'>
+            <div className="h-full w-full">
+                <PolygonZonePicker polygons={polygons} addPolygon={addPolygon} removePolygon={removePolygon} />
+            </div>
+            <div className="h-full w-1/6 flex flex-col gap-5">
+                <div className="w-full text-center">
+                    <h2 className="text-xl">Reduction order</h2>
+                </div>
+                <ul className="w-full h-full bg-gray-300">
+                    {durations.map((duration, i) => (
+                        <li key={i} className="w-full bg-white flex flex-row gap-2 items-center justify-between p-1">
+                            <p>Zone {i+1}</p>
+                            <div className="w-16 h-10">
+                                <TextInput value={duration} onChange={(e) => updateDuration(i, e.target.value)}/>
+                            </div>
+                        </li>
+                    ))}
+                </ul>
+                <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)} />
+                    </div>
+                </div>
+                <div className="w-full h-15">
+                    <GreenButton onClick={handleSettingsSubmit}>Apply</GreenButton>
+                </div>
+            </div>
         </div>
     );
 }