Corrections

traque-front/hook/useGame.jsx

@@ -16,20 +16,5 @@ export default function useGame() {
         teamSocket.emit("capture", captureCode);
     }
 
-    return {
-        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,
-    };
+    return {...teamInfos, sendCurrentPosition, capture, teamId, gameState};
 }

traque-front/hook/useLocalStorage.jsx

@@ -26,4 +26,4 @@ export default function useLocalStorage(key, initialValue) {
     }
 
     return [storedValue, setValue, loading];
-}
+}

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) => {
-                setLocation([position.coords.latitude, position.coords.longitude]);
-                if(interval != Infinity) {
-                    setTimeout(update, interval);
-                }
-            }, () => { }, { enableHighAccuracy: true, timeout: Infinity, maximumAge: 0 });
+            navigator.geolocation.getCurrentPosition(
+                (position) => {
+                    setLocation([position.coords.latitude, position.coords.longitude]);
+                    if(interval != Infinity) {
+                        setTimeout(update, interval);
+                    }
+                },
+                () => { },
+                { 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 () => {
-            socket.off(event, callback);
-        }
+        return () => socket.off(event, callback);
     }, []);
 }