Merge branch 'main' of github.com:quentinrsl/traque into main

2026-02-09 10:20:16 +01:00 · 2024-04-17 20:02:54 +00:00
parent bd325b74a3 0d8cfef902
commit ae84c552f1
9 changed files with 140 additions and 36 deletions
--- a/2024-04-08-Note-11-05.xopp
+++ b/2024-04-08-Note-11-05.xopp
--- a/traque-front/app/admin/page.js
+++ b/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>
    )
 }
--- a/traque-front/components/admin/mapPicker.jsx
+++ b/traque-front/components/admin/mapPicker.jsx
@@ -1,6 +1,6 @@
 "use client";
 import { useLocation } from "@/hook/useLocation";
-import { use, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import "leaflet/dist/leaflet.css";
 import { Circle, MapContainer, TileLayer, useMap } from "react-leaflet";
 import { useMapCircleDraw } from "@/hook/mapDrawing";
@@ -18,7 +18,7 @@ function MapPan(props) {
    return null;
 }

-function MapEventListener({onClick, onMouseMove}) {
+function MapEventListener({ onClick, onMouseMove }) {
    const map = useMap();
    useEffect(() => {
        map.on('click', onClick);
@@ -36,33 +36,52 @@ function MapEventListener({onClick, onMouseMove}) {
 }

 const DEFAULT_ZOOM = 17;
-export function CircularAreaPicker({area, setArea, ...props}) {
+export function CircularAreaPicker({ area, setArea, ...props }) {
    const location = useLocation(Infinity);
-    const {handleClick, handleMouseMove, center, radius} = useMapCircleDraw(area, setArea);
+    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"/>}
+            {center && radius && <Circle center={center} radius={radius} fillColor="blue" />}
            <MapPan center={location} zoom={DEFAULT_ZOOM} />
            <MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
        </MapContainer>)
 }
-
-export function ZonePicker({minArea, setMinArea, maxArea, setMaxArea, ...props}) {
+export const EditMode = {
+    MIN: 0,
+    MAX: 1
+}
+export function ZonePicker({ minZone, setMinZone, maxZone, setMaxZone, 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);
+    const { handleClick: maxClick, handleMouseMove: maxHover, center: maxCenter, radius: maxRadius } = useMapCircleDraw(minZone, setMinZone);
+    const { handleClick: minClick, handleMouseMove: minHover, center: minCenter, radius: minRadius } = useMapCircleDraw(maxZone, setMaxZone);
+    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>)
+        </MapContainer>
+    )
 }
--- a/traque-front/components/admin/zoneSelector.jsx
+++ b/traque-front/components/admin/zoneSelector.jsx
@@ -0,0 +1,51 @@
+import { useEffect, useState } from "react";
+import BlueButton, { GreenButton, RedButton } from "../util/button";
+import { EditMode, ZonePicker } from "./mapPicker";
+import TextInput from "../util/textInput";
+import useAdmin from "@/hook/useAdmin";
+
+export function ZoneSelector() {
+    const [editMode, setEditMode] = useState(EditMode.MIN);
+    const [minZone, setMinZone] = useState(null);
+    const [maxZone, setMaxZone] = useState(null);
+    const [reductionCount, setReductionCount] = useState("");
+    const [reductionDuration, setReductionDuration] = useState("");
+    const [reductionInterval, setReductionInterval] = useState("");
+    const {zoneSettings, changeZoneSettings} = useAdmin();
+
+    useEffect(() => {
+        if (zoneSettings) {
+            setMinZone(zoneSettings.min);
+            setMaxZone(zoneSettings.max);
+            setReductionCount(zoneSettings.reductionCount.toString());
+            setReductionDuration(zoneSettings.reductionDuration.toString());
+            setReductionInterval(zoneSettings.reductionInterval.toString());
+        }
+    }, [zoneSettings]);
+
+    function handleSettingsSubmit() {
+        changeZoneSettings({min:minZone, max:maxZone, reductionCount: Number(reductionCount), reductionDuration: Number(reductionDuration), reductionInterval: Number(reductionInterval)});
+    }
+
+    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">Edit zones</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>
+            <p>Number of reductions</p>
+            <TextInput value={reductionCount} onChange={(e) => setReductionCount(e.target.value)}></TextInput>
+        </div>
+        <div>
+            <p>Duration of each reduction</p>
+            <TextInput value={reductionDuration} onChange={(e) => setReductionDuration(e.target.value)}></TextInput>
+        </div>
+        <div>
+            <p>Interval between reductions</p>
+            <TextInput value={reductionInterval} onChange={(e) => setReductionInterval(e.target.value)}></TextInput>
+        </div>
+        <GreenButton onClick={handleSettingsSubmit}>Save</GreenButton>
+    </div>
+}
--- a/traque-front/components/team/map.jsx
+++ b/traque-front/components/team/map.jsx
@@ -5,32 +5,49 @@ import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility
 import "leaflet-defaulticon-compatibility";
 import "leaflet/dist/leaflet.css";
 import useGame from '@/hook/useGame';
+import { useTeamContext } from '@/context/teamContext';

 const DEFAULT_ZOOM = 17;


 // Pan to the center of the map when the position of the user is updated for the first time
 function MapPan(props) {
-  const map = useMap();
-  const [initialized, setInitialized] = useState(false);
+    const map = useMap();
+    const [initialized, setInitialized] = useState(false);

-  useEffect(() => {
-    if(!initialized && props.center) {
-        map.flyTo(props.center, DEFAULT_ZOOM, {animate: false});
-        setInitialized(true)
-    }
-  },[props.center]);
+    useEffect(() => {
+        if (!initialized && props.center) {
+            map.flyTo(props.center, DEFAULT_ZOOM, { animate: false });
+            setInitialized(true)
+        }
+    }, [props.center]);

-  return null;
+    return null;
 }

-export function LiveMap({ ...props}) {
-    const {currentPosition, enemyPosition} = useGame();
+function LiveZone() {
+    const { zone } = useTeamContext();
+    console.log('Zone', zone);
+    return zone && <Circle center={zone.center} radius={zone.radius} color='blue' fill={false} />
+}
+
+function ZoneExtremities() {
+    const { zoneExtremities } = useTeamContext();
+    console.log('Zone extremities', zoneExtremities);
+    return zoneExtremities && zoneExtremities.begin && zoneExtremities.end && <>
+        <Circle center={zoneExtremities.begin.center} radius={zoneExtremities.begin.radius} color='black' fill={false} />
+        <Circle center={zoneExtremities.end.center} radius={zoneExtremities.end.radius} color='red' fill={false} />
+    </>
+
+}
+
+export function LiveMap({ ...props }) {
+    const { currentPosition, enemyPosition } = useGame();
    useEffect(() => {
        console.log('Current position', currentPosition);
    }, [currentPosition]);
    return (
-        <MapContainer  {...props} className='min-h-full z-0' center={[0,0]} zoom={0} scrollWheelZoom={true}>
+        <MapContainer  {...props} className='min-h-full z-0' 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"
@@ -46,7 +63,7 @@ export function LiveMap({ ...props}) {
                    Votre position
                </Popup>
            </Marker>}
-            {enemyPosition && <Marker  position={enemyPosition} icon={new L.Icon({
+            {enemyPosition && <Marker position={enemyPosition} icon={new L.Icon({
                iconUrl: '/icons/target.png',
                iconSize: [41, 41],
                iconAnchor: [12, 41],
@@ -57,13 +74,15 @@ export function LiveMap({ ...props}) {
                    Position de l'ennemi
                </Popup>
            </Marker>}
-            <MapPan center={currentPosition}/>
+            <MapPan center={currentPosition} />
+            <LiveZone />
+            <ZoneExtremities />
        </MapContainer>
    )
 }

-export function PlacementMap({ ...props}) {
-    const {currentPosition, startingArea} = useGame();
+export function PlacementMap({ ...props }) {
+    const { currentPosition, startingArea } = useGame();
    return (
        <MapContainer  {...props} className='min-h-full w-full z-0' scrollWheelZoom={true}>
            <TileLayer
@@ -81,7 +100,7 @@ export function PlacementMap({ ...props}) {
                    Votre position
                </Popup>
            </Marker>}
-            <MapPan center={currentPosition}/>
+            <MapPan center={currentPosition} />
            {startingArea && <Circle center={startingArea?.center} radius={startingArea?.radius} color='blue' />}
        </MapContainer>
    )
--- a/traque-front/context/adminContext.jsx
+++ b/traque-front/context/adminContext.jsx
@@ -7,10 +7,11 @@ import { GameState } from "@/util/gameState";

 const adminContext = createContext();

-function AdminProvider({children}) {
+function AdminProvider({ children }) {
    const [teams, setTeams] = useState([]);
+    const [zoneSettings, setZoneSettings] = useState(null)
    const { adminSocket } = useSocket();
-    const {loggedIn} = useAdminConnexion();
+    const { loggedIn } = useAdminConnexion();
    const [gameState, setGameState] = useState(GameState.SETUP);

    useSocketListener(adminSocket, "game_state", setGameState);
@@ -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_settings", setZoneSettings);

-    const value = useMemo(() => ({teams, setTeams, gameState}), [teams, gameState]);
+    const value = useMemo(() => ({ teams, zoneSettings, setZoneSettings, setTeams, gameState }), [zoneSettings, teams, gameState]);
    return (
        <adminContext.Provider value={value}>
            {children}
--- a/traque-front/context/teamContext.jsx
+++ b/traque-front/context/teamContext.jsx
@@ -1,7 +1,7 @@
 "use client";
 import { useLocation } from "@/hook/useLocation";
 import { useSocketListener } from "@/hook/useSocketListener";
-import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { createContext, use, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useSocket } from "./socketContext";
 import { useTeamConnexion } from "./teamConnexionContext";
 import { GameState } from "@/util/gameState";
@@ -11,6 +11,8 @@ const teamContext = createContext()
 function TeamProvider({children}) {
    const [teamInfos, setTeamInfos] = useState({});
    const [gameState, setGameState] = useState(GameState.SETUP);
+    const [zone, setZone] = useState(null);
+    const [zoneExtremities, setZoneExtremities] = useState(null);
    const measuredLocation = useLocation(10000);
    const {teamSocket} = useSocket();
    const {loggedIn} = useTeamConnexion();
@@ -23,6 +25,9 @@ function TeamProvider({children}) {
    });
    
    useSocketListener(teamSocket, "game_state", setGameState);
+    useSocketListener(teamSocket, "zone", setZone);
+    useSocketListener(teamSocket, "new_zone", setZoneExtremities);
+

    //Send the current position to the server when the user is logged in
    useEffect(() => {
@@ -32,7 +37,7 @@ function TeamProvider({children}) {
        }
    }, [loggedIn, measuredLocation]);
    
-    const value = useMemo(() => ({teamInfos, gameState}), [teamInfos, gameState]);
+    const value = useMemo(() => ({teamInfos, gameState, zone, zoneExtremities}), [teamInfos, gameState, zone, zoneExtremities]);
    return (
        <teamContext.Provider value={value}>
            {children}
--- a/traque-front/hook/mapDrawing.jsx
+++ b/traque-front/hook/mapDrawing.jsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import { useLocation } from "./useLocation";

 export function useMapCircleDraw(area, setArea) {
    const [drawing, setDrawing] = useState(false);
--- a/traque-front/hook/useAdmin.jsx
+++ b/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, zoneSettings } = 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 changeZoneSettings(zone) {
+        adminSocket.emit("set_zone_settings", zone);
+    }
+
+    return {teams, zoneSettings, gameState,changeZoneSettings, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, changeState, updateTeam };

 }