Added placement zones

traque-front/hook/useAdmin.jsx

@@ -27,6 +27,10 @@ export default function useAdmin() {
         adminSocket.emit("capture_team", teamId);
     }
 
+    function placementTeam(teamId, placementZone) {
+        adminSocket.emit("placement_team", teamId, placementZone);
+    }
+
     function changeState(state) {
         adminSocket.emit("change_state", state);
     }
@@ -35,5 +39,5 @@ export default function useAdmin() {
         adminSocket.emit("update_settings", settings);
     }
 
-    return { ...adminContext, getTeam, reorderTeams, addTeam, removeTeam, captureTeam, changeState, updateSettings };
+    return { ...adminContext, getTeam, reorderTeams, addTeam, removeTeam, captureTeam, placementTeam, changeState, updateSettings };
 }

traque-front/hook/useCircleDraw.jsx

@@ -1,16 +1,16 @@
 "use client";
 import { useEffect, useState } from "react";
 
-export default function useMapCircleDraw(area, setArea) {
+export default function useMapCircleDraw(circle, setCircle) {
     const [drawing, setDrawing] = useState(false);
-    const [center, setCenter] = useState(area?.center || null);
-    const [radius, setRadius] = useState(area?.radius || null);
+    const [center, setCenter] = useState(circle?.center || null);
+    const [radius, setRadius] = useState(circle?.radius || null);
 
     useEffect(() => {
         setDrawing(false);
-        setCenter(area?.center || null);
-        setRadius(area?.radius || null);
-    }, [area])
+        setCenter(circle?.center || null);
+        setRadius(circle?.radius || null);
+    }, [circle])
 
     function handleLeftClick(e) {
         if (!drawing) {
@@ -19,17 +19,17 @@ export default function useMapCircleDraw(area, setArea) {
             setDrawing(true);
         } else {
             setDrawing(false);
-            setArea({center, radius});
+            setCircle({center, radius});
         }
     }
 
     function handleRightClick(e) {
         if (drawing) {
             setDrawing(false);
-            setCenter(area?.center || null);
-            setRadius(area?.radius || null);
+            setCenter(circle?.center || null);
+            setRadius(circle?.radius || null);
         } else {
-            setArea(null);
+            setCircle(null);
         }
     }
 

traque-front/hook/useMultipleCircleDraw.jsx

@@ -0,0 +1,39 @@
+"use client";
+
+export default function useMultipleCircleDraw(circles, addCircle, removeCircle, radius) {
+
+    function getDistanceFromLatLon({ lat: lat1, lng: lon1 }, { lat: lat2, lng: lon2 }) {
+        const degToRad = (deg) => deg * (Math.PI / 180);
+        var R = 6371; // Radius of the earth in km
+        var dLat = degToRad(lat2 - lat1);
+        var dLon = degToRad(lon2 - lon1);
+        var a =
+            Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+            Math.cos(degToRad(lat1)) * Math.cos(degToRad(lat2)) *
+            Math.sin(dLon / 2) * Math.sin(dLon / 2)
+            ;
+        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+        var d = R * c; // Distance in km
+        return d * 1000;
+    }
+
+    function isBaddlyPlaced(latlng) {
+        return circles.some(circle => getDistanceFromLatLon(latlng, circle.center) < 2 * circle.radius);
+    }
+
+    function getCircleFromLatlng(latlng) {
+        return circles.find(circle => getDistanceFromLatLon(latlng, circle.center) < circle.radius);
+    }
+
+    function handleLeftClick(e) {
+        if (isBaddlyPlaced(e.latlng)) return;
+        addCircle(e.latlng, radius);
+    }
+
+    function handleRightClick(e) {
+        const circle = getCircleFromLatlng(e.latlng);
+        if (circle) removeCircle(circle.id);
+    }
+
+    return { handleLeftClick, handleRightClick };
+}

traque-front/hook/usePolygonDraw.jsx

@@ -94,15 +94,10 @@ export default function useMapPolygonDraw(polygons, addPolygon, removePolygon) {
         }
         return sum > 0;
     };
-
-    function getZoneIndex(latlng) {
+    
+    function getPolygonIndex(latlng) {
         // Return the index of the polygon where latlng is according to isInPolygon
-        for (let iPolygon = 0; iPolygon < polygons.length; iPolygon++) {
-            if (isInPolygon(latlng, polygons[iPolygon])) {
-                return iPolygon;
-            }
-        }
-        return -1;
+        return polygons.findIndex(polygon => isInPolygon(latlng, polygon));
     }
 
     function getEventLatLng(e) {
@@ -142,7 +137,7 @@ export default function useMapPolygonDraw(polygons, addPolygon, removePolygon) {
         // If it is the first node
         if (!isDrawing()) {
             // If the point is not in an existing polygon
-            if (getZoneIndex(latlng) == -1) {
+            if (getPolygonIndex(latlng) == -1) {
                 setCurrentPolygon([latlng]);
             }
 
@@ -172,7 +167,7 @@ export default function useMapPolygonDraw(polygons, addPolygon, removePolygon) {
             // Is the new point making the current polygon intersect with itself ?
             if (isIntersecting([latlng, currentPolygon[length-1]], currentPolygon, false)) return;
             // Is the new point inside a polygon ?
-            if (getZoneIndex(latlng) != -1) return;
+            if (getPolygonIndex(latlng) != -1) return;
             // Is the new point making the current polygon intersect with another polygon ?
             for (const polygon of polygons) {
                 // Strict intersection
@@ -200,7 +195,7 @@ export default function useMapPolygonDraw(polygons, addPolygon, removePolygon) {
             setCurrentPolygon([]);
         // If not isDrawing, remove the clicked polygon
         } else {
-            const i = getZoneIndex(e.latlng);
+            const i = getPolygonIndex(e.latlng);
             if (i != -1) removePolygon(i);
         }
     }