cahnged design drawer

improved map drawing tool

traque-front/components/admin/mapPicker.jsx

@@ -3,6 +3,7 @@ import { useLocation } from "@/hook/useLocation";
 import { use, useEffect, useState } from "react";
 import "leaflet/dist/leaflet.css";
 import { Circle, MapContainer, TileLayer, useMap } from "react-leaflet";
+import { useMapCircleDraw } from "@/hook/mapDrawing";
 
 function MapPan(props) {
     const map = useMap();
@@ -34,36 +35,26 @@ function MapEventListener({onClick, onMouseMove}) {
     return null;
 }
 
+const DEFAULT_ZOOM = 17;
 export function CircularAreaPicker({area, setArea, ...props}) {
-    const DEFAULT_ZOOM = 17;
     const location = useLocation(Infinity);
-    const [drawing, setDrawing] = useState(false);
-    const [center, setCenter] = useState(area?.center || null);
-    const [radius, setRadius] = useState(area?.radius || null);
+    const {handleClick, handleMouseMove, center, radius} = useMapCircleDraw(area, setArea);
+    return (
+        <MapContainer  {...props} className='min-h-full w-full ' center={[0, 0]} zoom={0} scrollWheelZoom={true}>
+            <TileLayer
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            />
+            {center && radius && <Circle center={center} radius={radius} fillColor="blue"/>}
+            <MapPan center={location} zoom={DEFAULT_ZOOM} />
+            <MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
+        </MapContainer>)
+}
 
-    useEffect(() => {
-        console.log(area)
-        setDrawing(false);
-        setCenter(area?.center || null);
-        setRadius(area?.radius || null);
-    }, [area])
-
-    function handleClick(e) {
-        if(!drawing) {
-            setCenter(e.latlng);
-            setRadius(null);
-            setDrawing(true);
-        } else {
-            setDrawing(false);
-            setArea({center, radius});
-        }
-    }
-
-    function handleMouseMove(e) {
-        if(drawing) {
-            setRadius(e.latlng.distanceTo(center));
-        }
-    }
+export function ZonePicker({minArea, setMinArea, maxArea, setMaxArea, ...props}) {
+    const location = useLocation(Infinity);
+    const {handleClick: maxClick, handleMouseMove: maxHover, center: maxCenter, radius: maxRadius} = useMapCircleDraw(minArea, setMinArea);
+    const {handleClick: minClick, handleMouseMove: minHover, center: minCenter, radius: minRadius} = useMapCircleDraw(maxArea, setMaxArea);
     return (
         <MapContainer  {...props} className='min-h-full w-full ' center={[0, 0]} zoom={0} scrollWheelZoom={true}>
             <TileLayer

traque-front/components/admin/teamEdit.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import TextInput from '../util/textInput'
-import BlueButton from '../util/button';
+import BlueButton, { RedButton } from '../util/button';
 import useAdmin from '@/hook/useAdmin';
 import dynamic from 'next/dynamic';
 
@@ -45,7 +45,8 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
                             <BlueButton type="submit">Rename</BlueButton>
                         </div>
                     </form>
-                    <BlueButton onClick={handleRemove}>Remove</BlueButton>
+                    <BlueButton onClick={() => updateTeam(team.id, {captured: !team.captured})}>{team.captured ? "Revive" : "Capture"}</BlueButton>
+                    <RedButton onClick={handleRemove}>Remove</RedButton>
                 </div>
                 <div className='w-1/2 flex flex-col space-y-2 mx-2'>
                     <h2 className='text-2xl text-center'>Team details</h2>
@@ -55,6 +56,7 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
                         <p>Chasing : {getTeamName(team.chasing)}</p>
                         <p>Chased by : {getTeamName(team.chased)}</p>
                         <p>Capture code : {String(team.captureCode).padStart(4, '0')}</p>
+                        <p>Captured : {team.captured ? "Yes" : "No"}</p>
                     </div>
                 </div>
             </div>

traque-front/components/admin/teamList.jsx

@@ -12,7 +12,16 @@ const reorder = (list, startIndex, endIndex) => {
 };
 
 function TeamListItem({ team, index, onSelected, itemSelected }) {
-    const classNames = 'w-full p-3 my-3 shadow ' + (itemSelected ? "bg-blue-400" : "bg-gray-100");
+    let bgColor;
+    if(itemSelected) {
+        bgColor = "bg-blue-400";
+    }else if(team.captured) {
+        bgColor = "bg-red-400";
+    }
+    else {
+        bgColor = "bg-gray-100";
+    }
+    const classNames = 'w-full p-3 my-3 shadow ' + (bgColor);
     return (
         <Draggable draggableId={team.id.toString()} index={index} onClick={() => onSelected(team.id)}>
             {provided => (