Improved zone selection

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,7 +215,7 @@ export default {
     },
 
     changeSettings(settings) {
-        const zones = polygonSettingsToZones(settings);
+        const zones = this.settingsToZones(settings);
         if (!zones) return false;
         this.zones = zones;
         this.settings = settings;
@@ -221,6 +223,19 @@ export default {
         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 = {
             begin: this.getCurrentZone(),

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 />
+            <div className="h-full w-full">
-            <PenaltySettings />
+                <ZoneSelector />
+            </div>
         </div>
     );
 }

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'>
+        <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">Other settings</h2>
+            <h2 className="text-2xl">Messages</h2>
-            <div>
+            <div className='w-full gap-1 flex flex-col text-center'>
-                <p>Waiting message</p>
+                <p>Game setup</p>
-                <TextArea value={waitingMessage} onChange={(e) => setWaitingMessage(e.target.value)} />
+                <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>
+                <GreenButton onClick={applySettings}>Apply</GreenButton>
-                <TextArea value={capturedMessage} onChange={(e) => setCapturedMessage(e.target.value)} />
             </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>
     )
 }

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'>
+        <div className='h-full w-full bg-white p-5 gap-5 flex flex-row shadow-2xl'>
-            <h2 className="text-2xl">Edit zones</h2>
+            <div className="h-full w-full">
-            <PolygonZonePicker polygons={polygons} addPolygon={addPolygon} removePolygon={removePolygon} />
+                <PolygonZonePicker polygons={polygons} addPolygon={addPolygon} removePolygon={removePolygon} />
-            <ul>
+            </div>
-                {durations.map((duration, i) => (
+            <div className="h-full w-1/6 flex flex-col gap-5">
-                    <li key={i}>
+                <div className="w-full text-center">
-                        <p>Zone {i+1}</p>
+                    <h2 className="text-xl">Reduction order</h2>
-                        <TextInput value={duration} onChange={(e) => updateDuration(i, e.target.value)}/>
+                </div>
-                    </li>
+                <ul className="w-full h-full bg-gray-300">
-                ))}
+                    {durations.map((duration, i) => (
-            </ul>
+                        <li key={i} className="w-full bg-white flex flex-row gap-2 items-center justify-between p-1">
-            <GreenButton onClick={handleSettingsSubmit}>Apply</GreenButton>
+                            <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>
     );
 }