front end design for zone selection

traque-front/app/admin/page.js

@@ -4,7 +4,11 @@ import BlueButton, { GreenButton, RedButton } from "@/components/util/button";
 import { useAdminConnexion } from "@/context/adminConnexionContext";
 import useAdmin from "@/hook/useAdmin";
 import { GameState } from "@/util/gameState";
+import dynamic from "next/dynamic";
 
+const ZoneSelector = dynamic(() => import('@/components/admin/zoneSelector').then((mod) => mod.ZoneSelector), {
+    ssr: false
+});
 export default function AdminPage() {
     const { useProtect }  = useAdminConnexion();
     const { gameState, changeState } = useAdmin();
@@ -19,6 +23,7 @@ export default function AdminPage() {
                 <BlueButton onClick={() => changeState(GameState.PLAYING)}>Start game</BlueButton>
             </div>
             {gameState == GameState.PLACEMENT && <div className="max-h-5/6"><TeamReady /></div>}
+            {gameState == GameState.SETUP && <ZoneSelector />}
         </div>
     )
 }

traque-front/components/admin/mapPicker.jsx

@@ -50,18 +50,36 @@ export function CircularAreaPicker({area, setArea, ...props}) {
             <MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
         </MapContainer>)
 }
-
-export function ZonePicker({minArea, setMinArea, maxArea, setMaxArea, ...props}) {
+export const EditMode = {
+    MIN: 0,
+    MAX: 1
+}
+export function ZonePicker({minArea, setMinArea, maxArea, setMaxArea,editMode, ...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);
+    function handleClick(e) {
+        if (editMode == EditMode.MAX) {
+            maxClick(e);
+        } else {
+            minClick(e);
+        }
+    }
+    function handleMouseMove(e) {
+        if (editMode == EditMode.MAX) {
+            maxHover(e);
+        } else {
+            minHover(e);
+        }
+    }
     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"/>}
+            {minCenter && minRadius && <Circle center={minCenter} radius={minRadius} color="blue" fillColor="blue"/>}
+            {maxCenter && maxRadius && <Circle center={maxCenter} radius={maxRadius} color="red" fillColor="red"/>}
             <MapPan center={location} zoom={DEFAULT_ZOOM} />
             <MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
         </MapContainer>)

traque-front/components/admin/zoneSelector.jsx

@@ -0,0 +1,17 @@
+import { useState } from "react";
+import BlueButton, { RedButton } from "../util/button";
+import { EditMode, ZonePicker } from "./mapPicker";
+
+export function ZoneSelector() {
+    const [editMode, setEditMode] = useState(EditMode.MIN);
+    const [minZone, setMinZone] = useState(null);
+    const [maxZone, setMaxZone] = useState(null);
+    return <div className='w-2/5 h-full gap-1 bg-gray-200 p-10 flex flex-col text-center shadow-2xl overflow-y-scroll'>
+        <h2 className="text-2xl">Teams ready status</h2>
+        {editMode == EditMode.MIN && <RedButton onClick={() => setEditMode(EditMode.MAX)}>Edit end zone</RedButton>}
+        {editMode == EditMode.MAX && <BlueButton onClick={() => setEditMode(EditMode.MIN)}>Edit start zone</BlueButton>}
+        <div className='h-96'>
+            <ZonePicker minZone={minZone} maxZone={maxZone} editMode={editMode} setMinZone={setMinZone} setMaxZone={setMaxZone} />
+        </div>
+    </div>
+}

traque-front/context/adminContext.jsx

@@ -9,6 +9,7 @@ const adminContext = createContext();
 
 function AdminProvider({children}) {
     const [teams, setTeams] = useState([]);
+    const [zone, setZone] = useState(null)
     const { adminSocket } = useSocket();
     const {loggedIn} = useAdminConnexion();
     const [gameState, setGameState] = useState(GameState.SETUP);
@@ -21,8 +22,9 @@ function AdminProvider({children}) {
 
     //Bind listeners to update the team list and the game status on socket message
     useSocketListener(adminSocket, "teams", setTeams);
+    useSocketListener(adminSocket, "zone", setZone);
 
-    const value = useMemo(() => ({teams, setTeams, gameState}), [teams, gameState]);
+    const value = useMemo(() => ({teams, zone, setZone, setTeams, gameState}), [zone,teams, gameState]);
     return (
         <adminContext.Provider value={value}>
             {children}

traque-front/hook/useAdmin.jsx

@@ -2,7 +2,7 @@ import { useAdminContext } from "@/context/adminContext";
 import { useSocket } from "@/context/socketContext";
 
 export default function useAdmin(){
-    const {teams, gameState } = useAdminContext();
+    const {teams, gameState, zone } = useAdminContext();
     const {adminSocket} = useSocket();
 
     function pollTeams() {
@@ -38,6 +38,10 @@ export default function useAdmin(){
         adminSocket.emit("change_state", state);
     }
 
-    return {teams, gameState, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, changeState, updateTeam };
+    function setZone(zone) {
+        adminSocket.emit("set_zone", zone);
+    }
+
+    return {teams, zone, gameState,setZone, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, changeState, updateTeam };
 
 }