Improvements on maps

2026-02-09 02:10:18 +01:00 · 2025-08-31 17:33:18 +02:00
parent e5d90d824e
commit d088253758
13 changed files with 264 additions and 184 deletions
--- a/traque-front/app/admin/components/liveMap.jsx
+++ b/traque-front/app/admin/components/liveMap.jsx
@@ -1,13 +1,10 @@
 import { useEffect, useState } from "react";
-import { MapContainer, Marker, TileLayer, Tooltip, Polyline, Polygon } from "react-leaflet";
+import { Marker, Tooltip, Polyline, Polygon } from "react-leaflet";
 import "leaflet/dist/leaflet.css";
-import { MapPan } from "@/components/mapUtils";
-import useLocation from "@/hook/useLocation";
+import { CustomMapContainer } from "@/components/map";
 import useAdmin from "@/hook/useAdmin";
 import { GameState } from "@/util/gameState";

-const DEFAULT_ZOOM = 14;
-
 const positionIcon = new L.Icon({
    iconUrl: '/icons/marker/blue.png',
    iconSize: [30, 30],
@@ -17,7 +14,6 @@ const positionIcon = new L.Icon({
 });

 export default function LiveMap({mapStyle, showZones, showNames, showArrows}) {
-    const location = useLocation(Infinity);
    const [timeLeftNextZone, setTimeLeftNextZone] = useState(null);
    const { zoneExtremities, teams, nextZoneDate, getTeam, gameState } = useAdmin();

@@ -56,9 +52,7 @@ export default function LiveMap({mapStyle, showZones, showNames, showArrows}) {
    return (
        <div className='h-full w-full flex flex-col'>
            {gameState == GameState.PLAYING && <p>{`Next zone in : ${formatTime(timeLeftNextZone)}`}</p>}
-            <MapContainer className='flex-1 w-full' center={location} zoom={DEFAULT_ZOOM} scrollWheelZoom={true}>
-                <TileLayer url={mapStyle.url} attribution={mapStyle.attribution}/>
-                <MapPan center={location} zoom={DEFAULT_ZOOM} />
+            <CustomMapContainer mapStyle={mapStyle}>
                {showZones && gameState == GameState.PLAYING && zoneExtremities.begin && <Polygon positions={zoneExtremities.begin.points} pathOptions={{ color: 'red', fillColor: 'red', fillOpacity: '0.1', weight: 3 }} />}
                {showZones && gameState == GameState.PLAYING && zoneExtremities.end && <Polygon positions={zoneExtremities.end.points} pathOptions={{ color: 'green', fillColor: 'green', fillOpacity: '0.1', weight: 3 }} />}
                {teams.map((team) => team.currentLocation && !team.captured &&
@@ -67,7 +61,7 @@ export default function LiveMap({mapStyle, showZones, showNames, showArrows}) {
                        {showArrows && <Arrow pos1={team.currentLocation} pos2={getTeam(team.chasing).currentLocation}/>}
                    </Marker>
                )}
-            </MapContainer>
+            </CustomMapContainer>
        </div>
    )
 }
--- a/traque-front/app/admin/login/components/loginForm.jsx
+++ b/traque-front/app/admin/login/components/loginForm.jsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { BlueButton } from "@/components/button";
-import { TextInput } from "@/components/textInput";
+import { TextInput } from "@/components/input";

 export default function LoginForm({ onSubmit, title, placeholder, buttonText}) {
    const [value, setValue] = useState("");
--- a/traque-front/app/admin/parameters/components/circleZoneSelector.jsx
+++ b/traque-front/app/admin/parameters/components/circleZoneSelector.jsx
@@ -1,20 +1,18 @@
 import { useEffect, useState } from "react";
-import { Circle, MapContainer, TileLayer } from "react-leaflet";
+import { Circle } from "react-leaflet";
 import "leaflet/dist/leaflet.css";
 import { BlueButton, GreenButton, RedButton } from "@/components/button";
-import { TextInput } from "@/components/textInput";
-import { MapPan, MapEventListener } from "@/components/mapUtils";
+import { CustomMapContainer, MapEventListener } from "@/components/map";
+import { TextInput } from "@/components/input";
 import useAdmin from "@/hook/useAdmin";
-import useLocation from "@/hook/useLocation";
 import useMapCircleDraw from "@/hook/useMapCircleDraw";

-const DEFAULT_ZOOM = 14;
 const EditMode = {
    MIN: 0,
    MAX: 1
 }

-function CircleDrawings({ minZone, setMinZone, maxZone, setMaxZone, editMode }) {
+function Drawings({ minZone, setMinZone, maxZone, setMaxZone, editMode }) {
    const { center: maxCenter, radius: maxRadius, handleLeftClick: maxLeftClick, handleRightClick: maxRightClick, handleMouseMove: maxHover } = useMapCircleDraw(maxZone, setMaxZone);
    const { center: minCenter, radius: minRadius, handleLeftClick: minLeftClick, handleRightClick: minRightClick, handleMouseMove: minHover } = useMapCircleDraw(minZone, setMinZone);
    
@@ -44,31 +42,14 @@ function CircleDrawings({ minZone, setMinZone, maxZone, setMaxZone, editMode })

    return (
        <div>
+            <MapEventListener onLeftClick={handleLeftClick}  onRightClick={handleRightClick} onMouseMove={handleMouseMove}/>
            {minCenter && minRadius && <Circle center={minCenter} radius={minRadius} color="blue" fillColor="blue" />}
            {maxCenter && maxRadius && <Circle center={maxCenter} radius={maxRadius} color="red" fillColor="red" />}
-            <MapEventListener onLeftClick={handleLeftClick}  onRightClick={handleRightClick} onMouseMove={handleMouseMove} />
        </div>
    );
 }

-export function CircleZonePicker({ minZone, maxZone, editMode, setMinZone, setMaxZone, ...props }) {
-    const location = useLocation(Infinity);
-
-    return (
-        <div className='h-96'>
-            <MapContainer {...props} className='min-h-full w-full' center={location} zoom={DEFAULT_ZOOM} 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"
-                />
-                <MapPan center={location} zoom={DEFAULT_ZOOM} />
-                <CircleDrawings minZone={minZone} maxZone={maxZone} editMode={editMode} setMinZone={setMinZone} setMaxZone={setMaxZone} />
-            </MapContainer>
-        </div>
-    );
-}
-
-export default function CircleZoneMap() {
+export default function CircleZoneSelector() {
    const [editMode, setEditMode] = useState(EditMode.MIN);
    const [minZone, setMinZone] = useState(null);
    const [maxZone, setMaxZone] = useState(null);
@@ -85,11 +66,6 @@ export default function CircleZoneMap() {
        }
    }, [zoneSettings]);

-    function handleSettingsSubmit() {
-        const newSettings = {min:minZone, max:maxZone, reductionCount: Number(reductionCount), duration: Number(duration)};
-        changeZoneSettings(newSettings);
-    }
-
    // When the user set one zone, switch to the other
    useEffect(() => {
        if(editMode == EditMode.MIN) {
@@ -100,12 +76,19 @@ export default function CircleZoneMap() {

    }, [minZone, maxZone]);

+    function handleSettingsSubmit() {
+        const newSettings = {min:minZone, max:maxZone, reductionCount: Number(reductionCount), duration: Number(duration)};
+        changeZoneSettings(newSettings);
+    }
+
    return (
        <div className='w-2/5 h-full gap-1 bg-white p-10 flex flex-col text-center shadow-2xl overflow-y-scroll'>
            <h2 className="text-2xl">Edit zones</h2>
            {editMode == EditMode.MIN && <BlueButton onClick={() => setEditMode(EditMode.MAX)}>Click to edit first zone</BlueButton>}
            {editMode == EditMode.MAX && <RedButton onClick={() => setEditMode(EditMode.MIN)}>Click to edit last zone</RedButton>}
-            <CircleZonePicker minZone={minZone} maxZone={maxZone} editMode={editMode} setMinZone={setMinZone} setMaxZone={setMaxZone} />
+            <CustomMapContainer>
+                <Drawings minZone={minZone} maxZone={maxZone} editMode={editMode} setMinZone={setMinZone} setMaxZone={setMaxZone} />
+            </CustomMapContainer>
            <div>
                <p>Number of zones</p>
                <TextInput value={reductionCount} onChange={(e) => setReductionCount(e.target.value)}></TextInput>
--- a/traque-front/app/admin/parameters/components/polygonZoneSelector.jsx
+++ b/traque-front/app/admin/parameters/components/polygonZoneSelector.jsx
@@ -1,16 +1,14 @@
 import { useEffect, useState } from "react";
-import { MapContainer, TileLayer, Polyline, Polygon, CircleMarker } from "react-leaflet";
+import { Polyline, Polygon, CircleMarker, Marker } from "react-leaflet";
 import "leaflet/dist/leaflet.css";
 import { GreenButton } from "@/components/button";
-import { TextInput } from "@/components/textInput";
-import { MapPan, MapEventListener } from "@/components/mapUtils";
+import { ReorderList } from "@/components/list";
+import { CustomMapContainer, MapEventListener } from "@/components/map";
+import { TextInput } from "@/components/input";
 import useAdmin from "@/hook/useAdmin";
-import useLocation from "@/hook/useLocation";
 import useMapPolygonDraw from "@/hook/useMapPolygonDraw";

-const DEFAULT_ZOOM = 14;
-
-function PolygonDrawings({ polygons, addPolygon, removePolygon }) {
+function Drawings({ polygons, addPolygon, removePolygon }) {
    const { currentPolygon, highlightNodes, handleLeftClick, handleRightClick, handleMouseMove } = useMapPolygonDraw(polygons, addPolygon, removePolygon);
    const nodeSize = 5; // px
    const lineThickness = 3; // px
@@ -45,110 +43,120 @@ function PolygonDrawings({ polygons, addPolygon, removePolygon }) {
        }
    }

-    function DrawPolygon({polygon}) {
+    function DrawPolygon({polygon, number}) {
        const length = polygon.length;

-        if (length > 2) {
-            return (
+        if (length < 3) return null;
+
+        const sum = polygon.reduce(
+            (acc, coord) => ({
+                lat: acc.lat + coord.lat,
+                lng: acc.lng + coord.lng
+            }),
+            { lat: 0, lng: 0 }
+        );
+
+        // meanPoint can be out of the polygon
+        // Idea : take the mean point of the largest connected subpolygon
+        const meanPoint = {lat: sum.lat / length, lng: sum.lng / length}
+
+        const numberIcon = L.divIcon({
+            html: `<div style="
+                font-size: 30px;
+                height: 30px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: white;
+                font-weight: bold;
+                font-size: 25px;
+            ">${number}</div>`,
+            className: 'custom-number-icon',
+            iconSize: [30, 30],
+            iconAnchor: [15, 15]
+        });
+
+        return (
+            <div>
                <Polygon positions={polygon} pathOptions={{ color: 'black', fillColor: 'black', fillOpacity: '0.5', weight: lineThickness }} />
-            );
-        }
+                <Marker position={meanPoint} icon={numberIcon} />
+            </div>
+        );
    }

    return (
        <div>
            <MapEventListener onLeftClick={handleLeftClick}  onRightClick={handleRightClick} onMouseMove={handleMouseMove} />
-            {polygons.map((polygon, i) => <DrawPolygon key={i} polygon={polygon} />)}
+            {polygons.map((polygon, i) => <DrawPolygon key={i} polygon={polygon} number={i+1} />)}
            <DrawUnfinishedPolygon polygon={currentPolygon} />
            {highlightNodes.map((node, i) => <DrawNode key={i} pos={node} color={"black"} />)}
        </div>
    );
 }

-function PolygonZonePicker({ polygons, addPolygon, removePolygon, ...props }) {
-    const location = useLocation(Infinity);
-
-    return (
-        <div className='h-full'>
-            <MapContainer {...props} className='min-h-full w-full' center={location} zoom={DEFAULT_ZOOM} 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"
-                />
-                <MapPan center={location} zoom={DEFAULT_ZOOM} />
-                <PolygonDrawings polygons={polygons} addPolygon={addPolygon} removePolygon={removePolygon} />
-            </MapContainer>
-        </div>
-    );
-}
-
-export default function PolygonZoneMap() {
+export default function PolygonZoneSelector() {
    const defaultDuration = 10;
+    const [zones, setZones] = useState([]);
    const [polygons, setPolygons] = useState([]);
-    const [durations, setDurations] = useState([]);
    const {zoneSettings, changeZoneSettings} = useAdmin();
    const {penaltySettings, changePenaltySettings} = useAdmin();
    const [allowedTimeOutOfZone, setAllowedTimeOutOfZone] = useState("");

+    useEffect(() => {
+        setPolygons(zones.map((zone) => zone.polygon));
+    }, [zones])
+
    useEffect(() => {
        if (zoneSettings) {
-            setPolygons(zoneSettings.polygons);
-            setDurations(zoneSettings.durations);
+            setZones(zoneSettings.map((zone) => ({id: idFromPolygon(zone.polygon), polygon: zone.polygon, duration: zone.duration})));
        }
        if (penaltySettings) {
            setAllowedTimeOutOfZone(penaltySettings.allowedTimeOutOfZone.toString());
        }
    }, [zoneSettings, penaltySettings]);

+    function idFromPolygon(polygon) {
+        return (polygon[0].lat + polygon[1].lat + polygon[2].lat).toString() + (polygon[0].lng + polygon[1].lng + polygon[2].lng).toString();
+    }
+
    function addPolygon(polygon) {
-        // Polygons
-        setPolygons([...polygons, polygon]);
-        // Durations
-        setDurations([...durations, defaultDuration]);
+        setZones([...zones, {id: idFromPolygon(polygon), polygon: polygon, duration: defaultDuration}]);
    }

    function removePolygon(i) {
-        // Polygons
-        const newPolygons = [...polygons];
-        newPolygons.splice(i, 1);
-        setPolygons(newPolygons);
-        // Durations
-        const newDurations = [...durations];
-        newDurations.splice(i, 1);
-        setDurations(newDurations);
+        setZones(zones.filter((_, index) => index !== i));
    }

    function updateDuration(i, duration) {
-        const newDurations = [...durations];
-        newDurations[i] = duration;
-        setDurations(newDurations);
+        setZones(zones.map((zone, index) => index === i ? {id: zone.id, polygon: zone.polygon, duration: duration} : zone));
    }

    function handleSettingsSubmit() {
-        const newSettings = {polygons: polygons, durations: durations};
-        changeZoneSettings(newSettings);
+        changeZoneSettings(zones);
        changePenaltySettings({allowedTimeOutOfZone: Number(allowedTimeOutOfZone)});
    }
    
    return (
        <div className='h-full w-full bg-white p-3 gap-3 flex flex-row shadow-2xl'>
-            <div className="h-full w-full">
-                <PolygonZonePicker polygons={polygons} addPolygon={addPolygon} removePolygon={removePolygon} />
+            <div className="h-full flex-1">
+                <CustomMapContainer>
+                    <Drawings polygons={polygons} addPolygon={addPolygon} removePolygon={removePolygon} />
+                </CustomMapContainer>
            </div>
            <div className="h-full w-1/6 flex flex-col gap-3">
                <div className="w-full text-center">
                    <h2 className="text-xl">Reduction order</h2>
                </div>
-                <ul className="w-full h-full bg-gray-300">
-                    {durations.map((duration, i) => (
-                        <li key={i} className="w-full bg-white flex flex-row gap-2 items-center justify-between p-1">
+                <ReorderList droppableId="zones-order" array={zones} setArray={setZones}>
+                    { (zone, i) =>
+                        <div className="w-full p-2 bg-white flex flex-row gap-2 items-center justify-between">
                            <p>Zone {i+1}</p>
                            <div className="w-16 h-10">
-                                <TextInput value={duration} onChange={(e) => updateDuration(i, e.target.value)}/>
+                                <TextInput value={zone.duration} onChange={(e) => updateDuration(i, e.target.value)}/>
                            </div>
-                        </li>
-                    ))}
-                </ul>
+                        </div>
+                    }
+                </ReorderList>
                <div className="w-full flex flex-row gap-2 items-center justify-between">
                    <p>Timeout</p>
                    <div className="w-16 h-10">
--- a/traque-front/app/admin/parameters/components/teamManager.jsx
+++ b/traque-front/app/admin/parameters/components/teamManager.jsx
@@ -1,15 +1,7 @@
-import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
-import { List } from '@/components/list';
+import { ReorderList } from '@/components/list';
 import useAdmin from '@/hook/useAdmin';

-function reorder(list, startIndex, endIndex) {
-    const result = Array.from(list);
-    const [removed] = result.splice(startIndex, 1);
-    result.splice(endIndex, 0, removed);
-    return result;
-};
-
-function TeamManagerItem({ team, index }) {
+function TeamManagerItem({ team }) {
    const { updateTeam, removeTeam } = useAdmin();

    function handleRemove() {
@@ -17,47 +9,27 @@ function TeamManagerItem({ team, index }) {
    }

    return (
-        <Draggable draggableId={team.id.toString()} index={index}>
-            {provided => (
-                <div className='w-full p-2 bg-white flex flex-row items-center text-xl gap-3 font-bold' {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
-                    <div className='flex-1 w-full h-full flex flex-row items-center justify-between'>
-                        <p>{team.name}</p>
-                        <div className='flex flex-row items-center justify-between gap-3'>
-                            <p>{String(team.id).padStart(6, '0').replace(/(\d{3})(\d{3})/, "$1 $2")}</p>
-                            <img src={`/icons/heart/${team.captured ? "grey" : "pink"}.png`} className="w-8 h-8" onClick={() => updateTeam(team.id, { captured: !team.captured })} />
-                            <img src="/icons/trash.png" className="w-8 h-8" onClick={handleRemove} />
-                        </div>
-                    </div>
+        <div className='w-full p-2 bg-white flex flex-row items-center text-xl gap-3 font-bold'>
+            <div className='flex-1 w-full h-full flex flex-row items-center justify-between'>
+                <p>{team.name}</p>
+                <div className='flex flex-row items-center justify-between gap-3'>
+                    <p>{String(team.id).padStart(6, '0').replace(/(\d{3})(\d{3})/, "$1 $2")}</p>
+                    <img src={`/icons/heart/${team.captured ? "grey" : "pink"}.png`} className="w-8 h-8" onClick={() => updateTeam(team.id, { captured: !team.captured })} />
+                    <img src="/icons/trash.png" className="w-8 h-8" onClick={handleRemove} />
                </div>
-            )}
-        </Draggable>
+            </div>
+        </div>
    );
 }

 export default function TeamManager() {
    const { teams, reorderTeams } = useAdmin();
-    
-    function onDragEnd(result) {
-        if (!result.destination) return;
-        if (result.destination.index === result.source.index) return;
-        const newTeams = reorder(teams, result.source.index, result.destination.index);
-        reorderTeams(newTeams);
-    }

    return (
-        <DragDropContext onDragEnd={onDragEnd} >
-            <Droppable droppableId='team-list'>
-                {provided => (
-                    <div className='w-full h-full' ref={provided.innerRef} {...provided.droppableProps}>
-                        <List array={teams}>
-                            {(team, i) => (
-                                <TeamManagerItem index={i} team={team}/>
-                            )}
-                        </List>
-                        {provided.placeholder}
-                    </div>
-                )}
-            </Droppable>
-        </DragDropContext>
+        <ReorderList droppableId="team-manager" array={teams} setArray={reorderTeams}>
+            {(team) => (
+                <TeamManagerItem team={team}/>
+            )}
+        </ReorderList>
    );
 }
--- a/traque-front/app/admin/parameters/page.js
+++ b/traque-front/app/admin/parameters/page.js
@@ -2,7 +2,7 @@
 import { useState, useEffect } from "react";
 import dynamic from "next/dynamic";
 import Link from "next/link";
-import { TextInput } from "@/components/textInput";
+import { TextInput } from "@/components/input";
 import { Section } from "@/components/section";
 import { useAdminConnexion } from "@/context/adminConnexionContext";
 import useAdmin from '@/hook/useAdmin';
@@ -10,13 +10,20 @@ import Messages from "./components/messages";
 import TeamManager from './components/teamManager';

 // Imported at runtime and not at compile time
-const ZoneSelector = dynamic(() => import('./components/polygonZoneMap'), { ssr: false });
+const PolygonZoneSelector = dynamic(() => import('./components/polygonZoneSelector'), { ssr: false });
+const CircleZoneSelector = dynamic(() => import('./components/circleZoneSelector'), { ssr: false });

-export default function AdminPage() {
+const zoneSelectors = {
+    circle: "circle",
+    polygon: "polygon"
+}
+
+export default function ConfigurationPage() {
    const {penaltySettings, changePenaltySettings, addTeam} = useAdmin();
    const { useProtect } = useAdminConnexion();
    const [allowedTimeBetweenUpdates, setAllowedTimeBetweenUpdates] = useState("");
    const [teamName, setTeamName] = useState('');
+    const [zoneSelector, setZoneSelector] = useState(zoneSelectors.polygon);

    useProtect();
    
@@ -71,7 +78,8 @@ export default function AdminPage() {
                </Section>
            </div>
            <div className="h-full flex-1">
-                <ZoneSelector />
+                {zoneSelector == zoneSelectors.circle && <CircleZoneSelector/>}
+                {zoneSelector == zoneSelectors.polygon && <PolygonZoneSelector/>}
            </div>
        </div>
    );
--- a/traque-front/app/team/components/loginForm.jsx
+++ b/traque-front/app/team/components/loginForm.jsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { BlueButton } from "@/components/button";
-import { TextInput } from "@/components/textInput";
+import { TextInput } from "@/components/input";

 export default function LoginForm({ onSubmit, title, placeholder, buttonText}) {
    const [value, setValue] = useState("");
--- a/traque-front/app/team/track/components/actionDrawer.jsx
+++ b/traque-front/app/team/track/components/actionDrawer.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react"
 import { BlueButton, GreenButton } from "@/components/button";
-import { TextInput } from "@/components/textInput";
+import { TextInput } from "@/components/input";
 import useTeamConnexion from "@/context/teamConnexionContext";
 import useGame from "@/hook/useGame";
 import EnemyTeamModal from "./enemyTeamModal";