Corrections

traque-front/app/admin/layout.js

@@ -20,5 +20,5 @@ export default function AdminLayout({ children }) {
                 </div>
             </AdminProvider>
         </AdminConnexionProvider>
-    )
+    );
 }

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

@@ -5,8 +5,10 @@ import React from 'react'
 
 export default function AdminLoginPage() {
     const {login, useProtect} = useAdminConnexion();
+
     useProtect();
+
     return (
         <LoginForm title="Admin login" placeholder="Admin password" buttonText={"Login"} onSubmit={login} />
-    )
+    );
 }

traque-front/app/admin/page.js

@@ -12,7 +12,9 @@ const LiveMap = dynamic(() => import('@/components/admin/liveMap'), { ssr: false
 export default function AdminPage() {
     const { useProtect } = useAdminConnexion();
     const { gameState, changeState } = useAdmin();
+
     useProtect();
+    
     return (
         <div className='min-h-full bg-gray-200 p-10 flex flex-row content-start gap-5'>
             <div className="h-full w-2/6">

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

@@ -9,7 +9,9 @@ const ZoneSelector = dynamic(() => import('@/components/admin/polygonZoneMap'),
 
 export default function AdminPage() {
     const { useProtect } = useAdminConnexion();
+    
     useProtect();
+
     return (
         <div className='min-h-full bg-gray-200 p-10 flex flex-row content-start gap-5'>
             <div className="h-full w-2/6">
@@ -18,5 +20,5 @@ export default function AdminPage() {
             <ZoneSelector />
             <PenaltySettings />
         </div>
-    )
+    );
 }

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

@@ -10,8 +10,8 @@ export default function TeamAdminPage() {
   const [selectedTeamId, setSelectedTeamId] = useState(null);
   const { addTeam } = useAdmin();
   const { useProtect }  = useAdminConnexion();
-    useProtect();
 
+  useProtect();
 
   return (
       <div className='h-full bg-gray-200 p-10 flex flex-row justify-between'> 

traque-front/components/admin/circleZoneMap.jsx

@@ -15,14 +15,22 @@ const EditMode = {
 }
 
 function CircleDrawings({ minZone, setMinZone, maxZone, setMaxZone, editMode }) {
-    const { handleClick: maxClick, handleMouseMove: maxHover, center: maxCenter, radius: maxRadius } = useMapCircleDraw(minZone, setMinZone);
+    const { center: maxCenter, radius: maxRadius, handleLeftClick: maxLeftClick, handleRightClick: maxRightClick, handleMouseMove: maxHover } = useMapCircleDraw(maxZone, setMaxZone);
-    const { handleClick: minClick, handleMouseMove: minHover, center: minCenter, radius: minRadius } = useMapCircleDraw(maxZone, setMaxZone);
+    const { center: minCenter, radius: minRadius, handleLeftClick: minLeftClick, handleRightClick: minRightClick, handleMouseMove: minHover } = useMapCircleDraw(minZone, setMinZone);
     
     function handleLeftClick(e) {
         if (editMode == EditMode.MAX) {
-            maxClick(e);
+            maxLeftClick(e);
         } else {
-            minClick(e);
+            minLeftClick(e);
+        }
+    }
+    
+    function handleRightClick(e) {
+        if (editMode == EditMode.MAX) {
+            maxRightClick(e);
+        } else {
+            minRightClick(e);
         }
     }
     
@@ -38,7 +46,7 @@ function CircleDrawings({ minZone, setMinZone, maxZone, setMaxZone, editMode })
         <div>
             {minCenter && minRadius && <Circle center={minCenter} radius={minRadius} color="blue" fillColor="blue" />}
             {maxCenter && maxRadius && <Circle center={maxCenter} radius={maxRadius} color="red" fillColor="red" />}
-            <MapEventListener onLeftClick={handleLeftClick}  onRightClick={() => {}} onMouseMove={handleMouseMove} />
+            <MapEventListener onLeftClick={handleLeftClick}  onRightClick={handleRightClick} onMouseMove={handleMouseMove} />
         </div>
     );
 }

traque-front/components/admin/penaltySettings.jsx

@@ -33,17 +33,17 @@ export default function PenaltySettings() {
             <h2 className="text-2xl">Penalties</h2>
             <div>
                 <p>Maximum Penalties</p>
-                <TextInput value={maxPenalties} onChange={(e) => setMaxPenalties(e.target.value)}></TextInput>
+                <TextInput value={maxPenalties} onChange={(e) => setMaxPenalties(e.target.value)} />
             </div>
             <div>
                 <p>Time out of the zone before a penalty</p>
-                <TextInput value={allowedTimeOutOfZone} onChange={(e) => setAllowedTimeOutOfZone(e.target.value)}></TextInput>
+                <TextInput value={allowedTimeOutOfZone} onChange={(e) => setAllowedTimeOutOfZone(e.target.value)} />
             </div>
             <div>
                 <p>Allowed time between position updates</p>
-                <TextInput value={allowedTimeBetweenUpdates} onChange={(e) => setAllowedTimeBetweenUpdates(e.target.value)}></TextInput>
+                <TextInput value={allowedTimeBetweenUpdates} onChange={(e) => setAllowedTimeBetweenUpdates(e.target.value)} />
             </div>
             <GreenButton onClick={applySettings}>Apply</GreenButton>
         </div>
-    )
+    );
 }

traque-front/components/admin/placementMap.jsx

@@ -15,7 +15,7 @@ const positionIcon = new L.Icon({
 
 export default function CircularAreaPicker({ area, setArea, markerPosition, ...props }) {
     const location = useLocation(Infinity);
-    const { handleClick, handleMouseMove, center, radius } = useMapCircleDraw(area, setArea);
+    const { center, radius, handleLeftClick, handleRightClick, handleMouseMove } = useMapCircleDraw(area, setArea);
 
     return (
         <MapContainer  {...props} className='min-h-full w-full ' center={location} zoom={DEFAULT_ZOOM} scrollWheelZoom={true}>
@@ -24,10 +24,9 @@ export default function CircularAreaPicker({ area, setArea, markerPosition, ...p
                 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
             />
             {center && radius && <Circle center={center} radius={radius} fillColor="blue" />}
-            {markerPosition && <Marker position={markerPosition} icon={positionIcon}>
+            {markerPosition && <Marker position={markerPosition} icon={positionIcon} />}
-            </Marker>}
             <MapPan center={location} zoom={DEFAULT_ZOOM} />
-            <MapEventListener onLeftClick={handleClick} onRightClick={() => {}} onMouseMove={handleMouseMove} />
+            <MapEventListener onLeftClick={handleLeftClick} onRightClick={handleRightClick} onMouseMove={handleMouseMove} />
         </MapContainer>
     );
 }

traque-front/components/admin/teamAdd.jsx

@@ -1,9 +1,9 @@
-import React from 'react'
+import { useState } from 'react'
 import { TextInput } from '../util/textInput'
 import { BlueButton } from '../util/button'
 
 export default function TeamAddForm({onAddTeam}) {
-    const [teamName, setTeamName] = React.useState('');
+    const [teamName, setTeamName] = useState('');
     
     function handleSubmit(e) {
         e.preventDefault();
@@ -22,5 +22,5 @@ export default function TeamAddForm({onAddTeam}) {
                 <BlueButton type="submit" className="w-5">+</BlueButton>
             </div>
         </form>
-    )
+    );
 }

traque-front/components/admin/teamEdit.jsx

@@ -15,13 +15,9 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
     const [newTeamName, setNewTeamName] = React.useState('');
     const { updateTeam, getTeamName, removeTeam, getTeam, teams, gameState, startDate } = useAdmin();
     const [team, setTeam] = useState({});
+
     const NEXT_PUBLIC_SOCKET_HOST = env("NEXT_PUBLIC_SOCKET_HOST");
-    var protocol = "https://";
+    const SERVER_URL = (NEXT_PUBLIC_SOCKET_HOST == "localhost" ? "http://" : "https://") + NEXT_PUBLIC_SOCKET_HOST + "/back";
-    if (NEXT_PUBLIC_SOCKET_HOST == "localhost") {
-        protocol = "http://";
-    }
-    const SERVER_URL = protocol + NEXT_PUBLIC_SOCKET_HOST + "/back";
-    console.log(SERVER_URL);
 
     useEffect(() => {
         let team = getTeam(selectedTeamId);
@@ -122,5 +118,5 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
                 </div>
             </div>
         </div>
-    )
+    );
 }

traque-front/components/admin/teamList.jsx

@@ -29,20 +29,9 @@ export default function TeamList({selectedTeamId, onSelected}) {
     const {teams, reorderTeams} = useAdmin();
 
     function onDragEnd(result) {
-        if (!result.destination) {
+        if (!result.destination) return;
-            return;
+        if (result.destination.index === result.source.index) return;
-        }
+        const newTeams = reorder(teams, result.source.index, result.destination.index);
-
-        if (result.destination.index === result.source.index) {
-            return;
-        }
-
-        const newTeams = reorder(
-            teams,
-            result.source.index,
-            result.destination.index
-        );
-
         reorderTeams(newTeams);
     }
 

traque-front/hook/useGame.jsx

@@ -16,20 +16,5 @@ export default function useGame() {
         teamSocket.emit("capture", captureCode);
     }
 
-    return {
+    return {...teamInfos, sendCurrentPosition, capture, teamId, gameState};
-        sendCurrentPosition,
-        capture,
-        enemyPosition: teamInfos?.enemyLocation || null,
-        enemyName: teamInfos?.enemyName || null,
-        currentPosition: teamInfos?.currentLocation || null,
-        startingArea: teamInfos?.startingArea || null,
-        captureCode: teamInfos?.captureCode || null,
-        name: teamInfos?.name || null,
-        ready: teamInfos?.ready || false,
-        captured: teamInfos?.captured || false,
-        locationSendDeadline: teamInfos?.locationSendDeadline || null,
-        penalties: teamInfos?.penalties || 0,
-        teamId,
-        gameState,
-    };
 }

traque-front/hook/useLocation.jsx

@@ -1,21 +1,23 @@
 "use client";
 import { useEffect, useState } from "react";
 
-/**
- * A hook that returns the location of the user and updates it periodically
- * @returns {Object} The location of the user
- */
 export default function useLocation(interval) {
     const [location, setLocation] = useState();
+
     useEffect(() => {
         function update() {
-            navigator.geolocation.getCurrentPosition((position) => {
+            navigator.geolocation.getCurrentPosition(
+                (position) => {
                     setLocation([position.coords.latitude, position.coords.longitude]);
                     if(interval != Infinity) {
                         setTimeout(update, interval);
                     }
-            }, () => { }, { enableHighAccuracy: true, timeout: Infinity, maximumAge: 0 });
+                },
+                () => { },
+                { enableHighAccuracy: true, timeout: Infinity, maximumAge: 0 }
+            );
         }
+
         update();
     }, []);
 

traque-front/hook/useMapCircleDraw.jsx

@@ -12,7 +12,7 @@ export default function useMapCircleDraw(area, setArea) {
         setRadius(area?.radius || null);
     }, [area])
 
-    function handleClick(e) {
+    function handleLeftClick(e) {
         if (!drawing) {
             setCenter(e.latlng);
             setRadius(null);
@@ -23,11 +23,21 @@ export default function useMapCircleDraw(area, setArea) {
         }
     }
 
+    function handleRightClick(e) {
+        if (drawing) {
+            setDrawing(false);
+            setCenter(area?.center || null);
+            setRadius(area?.radius || null);
+        } else {
+            setArea(null);
+        }
+    }
+
     function handleMouseMove(e) {
         if (drawing) {
             setRadius(e.latlng.distanceTo(center));
         }
     }
 
-    return { handleClick, handleMouseMove, center, radius };
+    return { center, radius, handleLeftClick, handleRightClick, handleMouseMove };
 }

traque-front/hook/useMapPolygonDraw.jsx

@@ -1,5 +1,5 @@
 "use client";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useMap } from "react-leaflet";
 
 export default function useMapPolygonDraw(polygons, addPolygon, removePolygon) {
@@ -9,6 +9,11 @@ export default function useMapPolygonDraw(polygons, addPolygon, removePolygon) {
     const [currentPolygon, setCurrentPolygon] = useState([]);
     const [highlightNodes, setHighlightNodes] = useState([]);
 
+    useEffect(() => {
+        setCurrentPolygon([]);
+        setHighlightNodes([]);
+    }, [polygons])
+
     function latlngEqual(latlng1, latlng2, epsilon = 1e-9) {
         return Math.abs(latlng1.lat - latlng2.lat) < epsilon && Math.abs(latlng1.lng - latlng2.lng) < epsilon;
     }

traque-front/hook/usePasswordProtect.jsx

@@ -4,6 +4,7 @@ import { useEffect } from "react";
 
 export default function usePasswordProtect(loginPath, redirectPath, loading, loggedIn) {
     const path = usePathname();
+    
     useEffect(() => {
         if (!loggedIn && !loading && path !== loginPath) {
             redirect(loginPath);

traque-front/hook/useSocketAuth.jsx

@@ -49,5 +49,5 @@ export default function useSocketAuth(socket, passwordName) {
     }, [waitingForResponse, savedPasswordLoading, savedPassword]);
 
 
-    return {login,logout,password: savedPassword, loggedIn, loading};
+    return {login, logout, password: savedPassword, loggedIn, loading};
 }

traque-front/hook/useSocketListener.jsx

@@ -4,8 +4,6 @@ import { useEffect } from "react";
 export default function useSocketListener(socket, event, callback) {
     useEffect(() => {
         socket.on(event,callback);
-        return () => {
+        return () => socket.off(event, callback);
-            socket.off(event, callback);
-        }
     }, []);
 }