Réorganisation des dossiers

traque-front/app/admin/components/buttons.jsx

@@ -0,0 +1,15 @@
+export function MapButton({ icon, title }) {
+    return (
+        <button title={title} className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center">
+            <img src={`/icons/${icon}.png`} className="w-10 h-10" />
+        </button>
+    );
+}
+
+export function ControlButton({ icon, title }) {
+    return (
+        <button title={title} className="w-[4.5rem] h-[4.5rem] bg-custom-light-blue rounded-lg hover:bg-blue-500 transition flex items-center justify-center">
+            <img src={`/icons/${icon}.png`} className="w-10 h-10" />
+        </button>
+    );
+}

traque-front/app/admin/components/liveMap.jsx

@@ -1,10 +1,10 @@
-import useLocation from "@/hook/useLocation";
 import { useEffect, useState } from "react";
-import "leaflet/dist/leaflet.css";
 import { MapContainer, Marker, TileLayer, Tooltip, Polyline, Polygon } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import { MapPan } from "@/components/mapUtils";
+import useLocation from "@/hook/useLocation";
 import useAdmin from "@/hook/useAdmin";
 import { GameState } from "@/util/gameState";
-import { MapPan } from "./mapUtils";
 
 const DEFAULT_ZOOM = 14;
 const positionIcon = new L.Icon({

traque-front/app/admin/components/teamSidePanel.jsx

@@ -1,7 +1,7 @@
+import { env } from 'next-runtime-env';
+import { useEffect, useState } from "react";
 import useAdmin from "@/hook/useAdmin";
 import { GameState } from '@/util/gameState';
-import { useEffect, useState } from "react";
-import { env } from 'next-runtime-env';
 
 function DotLine({ label, value }) {
     return (
@@ -49,7 +49,7 @@ function getStatus(team, gamestate) {
     }
 }
 
-export default function TeamInformation({ selectedTeamId, onClose }) {
+export default function TeamSidePanel({ selectedTeamId, onClose }) {
     const { getTeam, getTeamName, startDate, gameState } = useAdmin();
     const [imgSrc, setImgSrc] = useState("");
     const team = getTeam(selectedTeamId);

traque-front/app/admin/components/teamViewer.jsx

@@ -1,6 +1,5 @@
 import useAdmin from '@/hook/useAdmin';
 import { GameState } from '@/util/gameState';
-import React from 'react';
 
 const TEAM_STATUS = {
     playing:    { label: "En jeu",          color: "text-custom-green" },

traque-front/app/admin/layout.js

@@ -1,6 +1,5 @@
 import { AdminConnexionProvider } from "@/context/adminConnexionContext";
 import { AdminProvider } from "@/context/adminContext";
-import Link from "next/link";
 
 export default function AdminLayout({ children }) {
     return (

traque-front/app/admin/login/components/loginForm.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
-import { BlueButton } from "../util/button";
+import { BlueButton } from "@/components/button";
-import { TextInput } from "../util/textInput";
+import { TextInput } from "@/components/textInput";
 
 export default function LoginForm({ onSubmit, title, placeholder, buttonText}) {
     const [value, setValue] = useState("");

traque-front/app/admin/login/page.js

@@ -1,7 +1,6 @@
 "use client";
-import LoginForm from '@/components/team/loginForm'
 import { useAdminConnexion } from '@/context/adminConnexionContext';
-import React from 'react'
+import LoginForm from './components/loginForm';
 
 export default function AdminLoginPage() {
     const {login, useProtect} = useAdminConnexion();

traque-front/app/admin/page.js

@@ -1,14 +1,15 @@
 "use client";
-import { useAdminConnexion } from "@/context/adminConnexionContext";
+import React, { useState } from 'react';
 import dynamic from "next/dynamic";
-import TeamList from '@/components/admin/teamViewer';
-import React, { useState } from 'react'
 import Link from "next/link";
-import { Section } from "@/components/util/section";
+import { Section } from "@/components/section";
-import TeamInformation from "@/components/admin/teamInformation";
+import { useAdminConnexion } from "@/context/adminConnexionContext";
+import TeamSidePanel from "./components/teamSidePanel";
+import TeamList from './components/teamViewer';
+import { MapButton, ControlButton } from './components/buttons';
 
 // Imported at runtime and not at compile time
-const LiveMap = dynamic(() => import('@/components/admin/liveMap'), { ssr: false });
+const LiveMap = dynamic(() => import('./components/liveMap'), { ssr: false });
 
 export default function AdminPage() {
     const { useProtect } = useAdminConnexion();
@@ -33,32 +34,13 @@ export default function AdminPage() {
                 </div>
                 <Section title="Contrôle">
                     <div className='w-full h-full flex flex-row justify-between'>
-                        <Link 
+                        <Link href="/admin/parameters">
-                            href="/admin/parameters"
+                            <ControlButton icon="parameters" title="Accéder aux paramètres du jeu"/>
-                            className="w-[4.5rem] h-[4.5rem] bg-custom-light-blue rounded-lg hover:bg-blue-500 transition flex items-center justify-center" 
-                            title="Accéder aux paramètres du jeu">
-                            <img src="/icons/parameters.png" className="w-10 h-10" />
                         </Link>
-                        <button 
+                        <ControlButton icon="play" title="Reprendre la partie"/>
-                            className="w-[4.5rem] h-[4.5rem] bg-custom-light-blue rounded-lg hover:bg-blue-500 transition flex items-center justify-center" 
+                        <ControlButton icon="reset" title="Réinitialiser la partie"/>
-                            title="Reprendre la partie">
+                        <ControlButton icon="placement" title="Commencer les placements"/>
-                            <img src="/icons/play.png" className="w-10 h-10" />
+                        <ControlButton icon="begin" title="Lancer la traque"/>
-                        </button>
-                        <button 
-                            className="w-[4.5rem] h-[4.5rem] bg-custom-light-blue rounded-lg hover:bg-blue-500 transition flex items-center justify-center" 
-                            title="Réinitialiser la partie">
-                            <img src="/icons/reset.png" className="w-10 h-10" />
-                        </button>
-                        <button 
-                            className="w-[4.5rem] h-[4.5rem] bg-custom-light-blue rounded-lg hover:bg-blue-500 transition flex items-center justify-center" 
-                            title="Commencer les placements">
-                            <img src="/icons/placement.png" className="w-10 h-10" />
-                        </button>
-                        <button 
-                            className="w-[4.5rem] h-[4.5rem] bg-custom-light-blue rounded-lg hover:bg-blue-500 transition flex items-center justify-center" 
-                            title="Lancer la traque">
-                            <img src="/icons/begin.png" className="w-10 h-10" />
-                        </button>
                     </div>
                 </Section>
                 <Section className="h-full" title="Équipes">
@@ -70,44 +52,16 @@ export default function AdminPage() {
             <div className='grow flex-1 flex flex-col bg-white p-3 gap-3 shadow-2xl'>
                 <div className="flex-1 flex flex-row gap-3">
                     <LiveMap/>
-                    <TeamInformation selectedTeamId={selectedTeamId} onClose={() => setSelectedTeamId(null)}/>
+                    <TeamSidePanel selectedTeamId={selectedTeamId} onClose={() => setSelectedTeamId(null)}/>
                 </div>
                 <div className='w-full flex flex-row items-center justify-evenly py-2'>
-                    <button 
+                    <MapButton icon="mapstyle" title="Changer le style de la carte"/>
-                        className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center"
+                    <MapButton icon="zones" title="Afficher/masquer les zones"/>
-                        title ="Changer le style de la carte">
+                    <MapButton icon="names" title="Afficher/masquer les noms des équipes"/>
-                        <img src="/icons/mapstyle.png" className="w-10 h-10" />
+                    <MapButton icon="arrows" title="Afficher/masquer les relations de traque"/>
-                    </button>
+                    <MapButton icon="incertitude" title="Afficher/masquer les incertitudes de position"/>
-                    <button 
+                    <MapButton icon="path" title="Afficher/masquer la trace de l'équipe sélectionnée"/>
-                        className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center"
+                    <MapButton icon="informations" title="Afficher/masquer les évènements de l'équipe sélectionnée"/>
-                        title ="Afficher/cacher les zones">
-                        <img src="/icons/zones.png" className="w-10 h-10" />
-                    </button>
-                    <button 
-                        className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center"
-                        title ="Afficher/cacher les noms des équipes">
-                        <img src="/icons/names.png" className="w-10 h-10" />
-                    </button>
-                    <button 
-                        className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center"
-                        title ="Afficher/cacher les relations de traque">
-                        <img src="/icons/arrows.png" className="w-10 h-10" />
-                    </button>
-                    <button 
-                        className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center"
-                        title ="Afficher/cacher les incertitudes de position">
-                        <img src="/icons/incertitude.png" className="w-10 h-10" />
-                    </button>
-                    <button 
-                        className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center"
-                        title ="Afficher/cacher les chemins des équipes">
-                        <img src="/icons/path.png" className="w-10 h-10" />
-                    </button>
-                    <button 
-                        className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center"
-                        title ="Afficher/cacher les événements">
-                        <img src="/icons/informations.png" className="w-10 h-10" />
-                    </button>
                 </div>
             </div>
         </div>

traque-front/app/admin/parameters/components/circleZoneMap.jsx

@@ -1,12 +1,12 @@
 import { useEffect, useState } from "react";
-import { BlueButton, GreenButton, RedButton } from "../util/button";
+import { Circle, MapContainer, TileLayer } from "react-leaflet";
-import { TextInput } from "../util/textInput";
+import "leaflet/dist/leaflet.css";
+import { BlueButton, GreenButton, RedButton } from "@/components/button";
+import { TextInput } from "@/components/textInput";
+import { MapPan, MapEventListener } from "@/components/mapUtils";
 import useAdmin from "@/hook/useAdmin";
 import useLocation from "@/hook/useLocation";
-import "leaflet/dist/leaflet.css";
-import { Circle, MapContainer, TileLayer } from "react-leaflet";
 import useMapCircleDraw from "@/hook/useMapCircleDraw";
-import { MapPan, MapEventListener } from "./mapUtils";
 
 const DEFAULT_ZOOM = 14;
 const EditMode = {
@@ -100,7 +100,8 @@ export default function CircleZoneMap() {
 
     }, [minZone, maxZone]);
 
-    return <div className='w-2/5 h-full gap-1 bg-white p-10 flex flex-col text-center shadow-2xl overflow-y-scroll'>
+    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>}
@@ -115,4 +116,5 @@ export default function CircleZoneMap() {
             </div>
             <GreenButton onClick={handleSettingsSubmit}>Apply</GreenButton>
         </div>
+    );
 }

traque-front/app/admin/parameters/components/messages.jsx

@@ -1,7 +1,6 @@
-import useAdmin from "@/hook/useAdmin";
-import { GreenButton } from "../util/button";
-import { Section } from "../util/section";
 import { useEffect, useState } from "react";
+import { Section } from "@/components/section";
+import useAdmin from "@/hook/useAdmin";
 
 function MessageInput({title, ...props}) {
     return (
@@ -12,7 +11,7 @@ function MessageInput({title, ...props}) {
     );
 }
 
-export default function GameSettings() {
+export default function Messages() {
     const {gameSettings, changeGameSettings} = useAdmin();
     const [capturedMessage, setCapturedMessage] = useState("");
     const [winnerEndMessage, setWinnerEndMessage] = useState("");
@@ -35,13 +34,10 @@ export default function GameSettings() {
     return (
         <Section title="Message">
             <div className="w-full h-full flex flex-col gap-3 items-center">
-                <MessageInput title="Attente  :" value={waitingMessage} onChange={(e) => setWaitingMessage(e.target.value)}/>
+                <MessageInput title="Attente  :" value={waitingMessage} onChange={(e) => setWaitingMessage(e.target.value)} onBlur={applySettings}/>
-                <MessageInput title="Capture :" value={capturedMessage} onChange={(e) => setCapturedMessage(e.target.value)} />
+                <MessageInput title="Capture :" value={capturedMessage} onChange={(e) => setCapturedMessage(e.target.value)} onBlur={applySettings}/>
-                <MessageInput title="Victoire :" value={winnerEndMessage} onChange={(e) => setWinnerEndMessage(e.target.value)} />
+                <MessageInput title="Victoire :" value={winnerEndMessage} onChange={(e) => setWinnerEndMessage(e.target.value)} onBlur={applySettings}/>
-                <MessageInput title="Défaite  :" value={loserEndMessage} onChange={(e) => setLoserEndMessage(e.target.value)} />
+                <MessageInput title="Défaite  :" value={loserEndMessage} onChange={(e) => setLoserEndMessage(e.target.value)} onBlur={applySettings}/>
-                <div className='w-40 h-15'>
-                    <GreenButton onClick={applySettings}>Apply</GreenButton>
-                </div>
             </div>
         </Section>
     );

traque-front/app/admin/parameters/components/polygonZoneMap.jsx

@@ -1,12 +1,12 @@
 import { useEffect, useState } from "react";
-import { GreenButton } from "../util/button";
+import { MapContainer, TileLayer, Polyline, Polygon, CircleMarker } from "react-leaflet";
-import { TextInput } from "../util/textInput";
+import "leaflet/dist/leaflet.css";
+import { GreenButton } from "@/components/button";
+import { TextInput } from "@/components/textInput";
+import { MapPan, MapEventListener } from "@/components/mapUtils";
 import useAdmin from "@/hook/useAdmin";
 import useLocation from "@/hook/useLocation";
-import "leaflet/dist/leaflet.css";
-import { MapContainer, TileLayer, Polyline, Polygon, CircleMarker } from "react-leaflet";
 import useMapPolygonDraw from "@/hook/useMapPolygonDraw";
-import { MapPan, MapEventListener } from "./mapUtils";
 
 const DEFAULT_ZOOM = 14;
 

traque-front/app/admin/parameters/components/teamManager.jsx

@@ -1,6 +1,6 @@
-import useAdmin from '@/hook/useAdmin';
-import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import React, { useState } from 'react'
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
+import useAdmin from '@/hook/useAdmin';
 
 function reorder(list, startIndex, endIndex) {
     const result = Array.from(list);

traque-front/app/admin/parameters/page.js

@@ -1,21 +1,19 @@
 "use client";
 import { useState, useEffect } from "react";
-import GameSettings from "@/components/admin/gameSettings";
-import { useAdminConnexion } from "@/context/adminConnexionContext";
 import dynamic from "next/dynamic";
-import TeamList from '@/components/admin/teamManager';
-import useAdmin from '@/hook/useAdmin';
 import Link from "next/link";
-import { GreenButton } from "@/components/util/button";
+import { TextInput } from "@/components/textInput";
-import { TextInput } from "@/components/util/textInput";
+import { Section } from "@/components/section";
-import { Section } from "@/components/util/section";
+import { useAdminConnexion } from "@/context/adminConnexionContext";
+import useAdmin from '@/hook/useAdmin';
+import Messages from "./components/messages";
+import TeamList from './components/teamManager';
 
 // Imported at runtime and not at compile time
-const ZoneSelector = dynamic(() => import('@/components/admin/polygonZoneMap'), { ssr: false });
+const ZoneSelector = dynamic(() => import('./components/polygonZoneMap'), { ssr: false });
 
 export default function AdminPage() {
     const {penaltySettings, changePenaltySettings} = useAdmin();
-    const { addTeam } = useAdmin();
     const { useProtect } = useAdminConnexion();
     const [allowedTimeBetweenUpdates, setAllowedTimeBetweenUpdates] = useState("");
 
@@ -42,19 +40,16 @@ export default function AdminPage() {
                     </Link>
                     <h2 className="text-3xl font-bold">Paramètres</h2>
                 </div>
-                <GameSettings />
+                <Messages/>
                 <Section className="h-full" title="Équipe">
                     <div className="w-full h-full gap-3 flex flex-col items-center">
                         <TeamList/>
                         <div className="w-full flex flex-row gap-2 items-center justify-between">
                             <p>Interval between position updates</p>
                             <div className="w-16 h-10">
-                                <TextInput value={allowedTimeBetweenUpdates} onChange={(e) => setAllowedTimeBetweenUpdates(e.target.value)} />
+                                <TextInput value={allowedTimeBetweenUpdates} onChange={(e) => setAllowedTimeBetweenUpdates(e.target.value)} onBlur={applySettings} />
                             </div>
                         </div>
-                        <div className="w-40 h-15">
-                            <GreenButton onClick={applySettings}>Apply</GreenButton>
-                        </div>
                     </div>
                 </Section>
             </div>

traque-front/app/admin/teams/page.js

@@ -1,28 +0,0 @@
-"use client";
-import TeamAddForm from '@/components/admin/teamAdd';
-import TeamEdit from '@/components/admin/teamEdit';
-import TeamList from '@/components/admin/teamManager';
-import { useAdminConnexion } from '@/context/adminConnexionContext';
-import useAdmin from '@/hook/useAdmin';
-import React, { useState } from 'react'
-
-export default function TeamAdminPage() {
-  const [selectedTeamId, setSelectedTeamId] = useState(null);
-  const { addTeam } = useAdmin();
-  const { useProtect }  = useAdminConnexion();
-
-  useProtect();
-
-  return (
-      <div className='h-full bg-gray-200 p-10 flex flex-row justify-between'> 
-        <div className='w-1/3 p-5 bg-white mx-5 h-full p-4 shadow-2xl rounded overflow-y-scroll max-h-full'>
-          <h2 className='text-2xl text-center'>Team list</h2>
-          <TeamAddForm onAddTeam={addTeam}/>
-          <TeamList selectedTeamId={selectedTeamId} onSelected={setSelectedTeamId}/>
-        </div>
-        <div className='w-2/3 p-5 mx-5 bg-white h-full p-4 shadow-2xl rounded'>
-          {selectedTeamId && <TeamEdit selectedTeamId={selectedTeamId} setSelectedTeamId={setSelectedTeamId}/>}
-        </div>
-      </div>
-  )
-}

traque-front/app/team/components/loginForm.jsx

@@ -0,0 +1,19 @@
+import { useState } from "react";
+import { BlueButton } from "@/components/button";
+import { TextInput } from "@/components/textInput";
+
+export default function LoginForm({ onSubmit, title, placeholder, buttonText}) {
+    const [value, setValue] = useState("");
+    function handleSubmit(e) {
+        e.preventDefault();
+        setValue("");
+        onSubmit(value);
+    }
+    return (
+        <form className="bg-white shadow-md max-w mx-auto p-5 mx-10 flex flex-col space-y-4" onSubmit={handleSubmit}>
+            <h1 className="text-2xl font-bold text-center text-gray-700">{title}</h1>
+            <TextInput inputMode="numeric" placeholder={placeholder} value={value} onChange={(e) => setValue(e.target.value)} name="team-id"/>
+            <BlueButton type="submit">{buttonText}</BlueButton>
+        </form>
+    )
+}

traque-front/app/team/page.js

@@ -1,6 +1,6 @@
 "use client"
-import LoginForm from "@/components/team/loginForm";
 import { useTeamConnexion } from "@/context/teamConnexionContext";
+import LoginForm from "./components/loginForm";
 
 export default function Home() {
   const { login,useProtect  } = useTeamConnexion();

traque-front/app/team/track/components/actionDrawer.jsx

@@ -1,8 +1,8 @@
-import useGame from "@/hook/useGame";
 import { useEffect, useState } from "react"
-import { BlueButton, GreenButton } from "../util/button";
+import { BlueButton, GreenButton } from "@/components/button";
-import { TextInput } from "../util/textInput";
+import { TextInput } from "@/components/textInput";
 import useTeamConnexion from "@/context/teamConnexionContext";
+import useGame from "@/hook/useGame";
 import EnemyTeamModal from "./enemyTeamModal";
 
 export default function ActionDrawer() {

traque-front/app/team/track/components/enemyTeamModal.jsx

@@ -1,7 +1,8 @@
-import useGame from "@/hook/useGame";
-import { RedButton } from "../util/button";
 import { useEffect, useRef } from "react";
 import { env } from 'next-runtime-env';
+import { RedButton } from "@/components/button";
+import useGame from "@/hook/useGame";
+
 
 export default function EnemyTeamModal({ visible, onClose }) {
     const { teamId, enemyName } = useGame();

traque-front/app/team/track/components/map.jsx

@@ -3,8 +3,8 @@ import { Circle, MapContainer, Marker, Popup, TileLayer, useMap } from 'react-le
 import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'
 import "leaflet-defaulticon-compatibility";
 import "leaflet/dist/leaflet.css";
-import useGame from '@/hook/useGame';
 import useTeamContext from '@/context/teamContext';
+import useGame from '@/hook/useGame';
 
 const DEFAULT_ZOOM = 14;
 

traque-front/app/team/track/components/notification.jsx

@@ -1,5 +1,5 @@
-import { useSocketListener } from "@/hook/useSocketListener";
 import { useEffect, useState } from "react";
+import { useSocketListener } from "@/hook/useSocketListener";
 
 export default function Notification({ socket }) {
     const [visible, setVisible] = useState(false);

traque-front/app/team/track/components/placementOverlay.jsx

@@ -1,5 +1,5 @@
 import useTeamConnexion from "@/context/teamConnexionContext";
-import useGame from "@/hook/useGame"
+import useGame from "@/hook/useGame";
 
 export default function PlacementOverlay() {
     const { name, ready } = useGame();

traque-front/app/team/track/components/waitingScreen.jsx

@@ -1,8 +1,8 @@
-import useGame from "@/hook/useGame"
-import { GreenButton, LogoutButton } from "../util/button";
 import { useRef } from "react";
-import useTeamContext from "@/context/teamContext";
 import { env } from 'next-runtime-env';
+import { GreenButton, LogoutButton } from "@/components/button";
+import useTeamContext from "@/context/teamContext";
+import useGame from "@/hook/useGame"
 
 export default function WaitingScreen() {
     const { name, teamId  } = useGame();

traque-front/app/team/track/page.js

@@ -1,22 +1,22 @@
 "use client";
-import ActionDrawer from '@/components/team/actionDrawer';
+import React from 'react';
-import Notification from '@/components/team/notification';
+import dynamic from 'next/dynamic';
-import PlacementOverlay from '@/components/team/placementOverlay';
+import { LogoutButton } from '@/components/button';
-import WaitingScreen from '@/components/team/waitingScreen';
-import { LogoutButton } from '@/components/util/button';
 import { useSocket } from '@/context/socketContext';
 import { useTeamConnexion } from '@/context/teamConnexionContext';
 import { useTeamContext } from '@/context/teamContext';
 import useGame from '@/hook/useGame';
 import { GameState } from '@/util/gameState';
-import dynamic from 'next/dynamic';
+import ActionDrawer from './components/actionDrawer';
-import React from 'react'
+import Notification from './components/notification';
+import PlacementOverlay from './components/placementOverlay';
+import WaitingScreen from './components/waitingScreen';
 
 //Load the map without SSR
-const LiveMap = dynamic(() => import('@/components/team/map').then((mod) => mod.LiveMap), {
+const LiveMap = dynamic(() => import('./components/map').then((mod) => mod.LiveMap), {
     ssr: false
 });
-const PlacementMap = dynamic(() => import('@/components/team/map').then((mod) => mod.PlacementMap), {
+const PlacementMap = dynamic(() => import('./components/map').then((mod) => mod.PlacementMap), {
     ssr: false
 });
 

traque-front/components/admin/mapPicker.jsx

@@ -1,268 +0,0 @@
-"use client";
-import { useLocation } from "@/hook/useLocation";
-import { useEffect, useState, useRef, useCallback } from "react";
-import "leaflet/dist/leaflet.css";
-import { Circle, MapContainer, Marker, TileLayer, useMap, Tooltip, Polyline } from "react-leaflet";
-import { useMapCircleDraw } from "@/hook/mapDrawing";
-import useAdmin from "@/hook/useAdmin";
-import { GameState } from "@/util/gameState";
-import L from "leaflet";
-import { createPortal } from "react-dom";
-import TeamInformation from "@/components/admin/teamInformation";
-
-
-function MapActionControl({ onClick, children }) {
-    const map = useMap();
-
-    useEffect(() => {
-        const controlDiv = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
-        controlDiv.style.background = 'rgba(0,0,0,0.25)';
-        controlDiv.style.borderRadius = '9999px';
-        controlDiv.style.padding = '8px';
-        controlDiv.style.border = 'none';
-        controlDiv.title = "Plein écran";
-        controlDiv.style.display = "flex";
-        controlDiv.style.alignItems = "center";
-        controlDiv.style.justifyContent = "center";
-        controlDiv.style.width = "56px";
-        controlDiv.style.height = "56px";
-        controlDiv.onclick = onClick;
-        controlDiv.innerHTML = `<img src="./icons/fullscreen.png" alt="" style="width:36px;height:36px;" />`;
-        const customControl = L.control({ position: 'bottomleft' });
-        customControl.onAdd = () => controlDiv;
-        customControl.addTo(map);
-
-        return () => {
-            customControl.remove();
-        };
-    }, [map, onClick, children]);
-
-    return null;
-}
-
-function LeafletSidePanel({ show, onClose, children }) {
-    const map = useMap();
-    const panelRef = useRef(document.createElement("div"));
-
-    useEffect(() => {
-        const panelDiv = panelRef.current;
-        panelDiv.className = "leaflet-control leaflet-control-custom";
-
-
-        const control = L.control({ position: "topright" });
-        control.onAdd = () => panelDiv;
-        if (show) control.addTo(map);
-
-        return () => {
-            control.remove();
-        };
-    }, [map, show]);
-
-    if (!show) return null;
-
-    return createPortal(
-        <>
-            <button
-                style={{
-                    position: "absolute",
-                    top: "1rem",
-                    right: "1rem",
-                    fontSize: "3rem",
-                    background: "none",
-                    border: "none",
-                    cursor: "pointer",
-                    color: "#888"
-                }}
-                onClick={onClose}
-                title="Fermer"
-            >
-                ×
-            </button>
-            {children}
-        </>,
-        panelRef.current
-    );
-}
-
-const positionIcon = new L.Icon({
-    iconUrl: '/icons/location.png',
-    iconSize: [30, 30],
-    iconAnchor: [15, 15],
-    popupAnchor: [0, -15],
-    shadowSize: [30, 30],
-});
-
-function MapPan(props) {
-    const map = useMap();
-    const [initialized, setInitialized] = useState(false);
-
-    useEffect(() => {
-        if (!initialized && props.center) {
-            map.flyTo(props.center, props.zoom, { animate: false });
-            setInitialized(true)
-        }
-    }, [props.center]);
-    return null;
-}
-
-function MapEventListener({ onClick, onMouseMove }) {
-    const map = useMap();
-    useEffect(() => {
-        map.on('click', onClick);
-        return () => {
-            map.off('click', onClick);
-        }
-    }, [onClick]);
-    useEffect(() => {
-        map.on('mousemove', onMouseMove);
-        return () => {
-            map.off('mousemove', onMouseMove);
-        }
-    });
-    return null;
-}
-
-const DEFAULT_ZOOM = 14;
-export function CircularAreaPicker({ area, setArea, markerPosition, ...props }) {
-    const location = useLocation(Infinity);
-    const { handleClick, handleMouseMove, center, radius } = useMapCircleDraw(area, setArea);
-    return (
-        <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"
-            />
-            {center && radius && <Circle center={center} radius={radius} fillColor="blue" />}
-            {markerPosition && <Marker position={markerPosition} icon={positionIcon}>
-            </Marker>}
-            <MapPan center={location} zoom={DEFAULT_ZOOM} />
-            <MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
-        </MapContainer>)
-}
-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(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 (
-        <div>
-            <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"
-                />
-                {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>
-        </div>
-        { maxCenter && minCenter && typeof maxCenter.distanceTo === 'function' 
-            && maxRadius + maxCenter.distanceTo(minCenter) >= minRadius
-            && <p className="text-red-500">La zone de fin doit être incluse dans celle de départ</p>}
-        </div>
-        
-    )
-}
-
-export function LiveMap({ selectedTeamId, setSelectedTeamId }) {
-    const location = useLocation(Infinity);
-    const [timeLeftNextZone, setTimeLeftNextZone] = useState(null);
-    const { zone, zoneExtremities, teams, nextZoneDate, isShrinking , getTeam, gameState } = useAdmin();
-
-    function handleMarkerClick(teamId) {
-        setSelectedTeamId(teamId);
-    }
-
-    const mapWrapperRef = useRef(null);
-
-    const handleFullscreen = useCallback(() => {
-        const el = mapWrapperRef.current;
-        if (!el) return;
-        if (!document.fullscreenElement) {
-            el.requestFullscreen();
-        } else {
-            document.exitFullscreen();
-        }
-    }, []);
-
-    // Remaining time before sending position
-    useEffect(() => {
-        const updateTime = () => {
-            setTimeLeftNextZone(Math.max(0, Math.floor((nextZoneDate - Date.now()) / 1000)));
-        };
-    
-        updateTime();
-        const interval = setInterval(updateTime, 1000);
-    
-        return () => clearInterval(interval);
-    }, [nextZoneDate]);
-
-    function formatTime(time) {
-        // time is in seconds
-        if (time < 0) return "00:00";
-        const minutes = Math.floor(time / 60);
-        const seconds = Math.floor(time % 60);
-        return String(minutes).padStart(2,"0") + ":" + String(seconds).padStart(2,"0");
-    }
-
-    function Arrow({pos1, pos2}) {
-        if (pos1 && pos2) {
-            return (
-                <Polyline positions={[pos1, pos2]} pathOptions={{ color: 'black', weight: 3 }}/>
-            )
-        } else {
-            return null;
-        }
-    }
-
-    return (
-        <div className='h-full w-full' ref ={mapWrapperRef}>
-            {gameState == GameState.PLAYING && <p>{`${isShrinking ? "Fin" : "Début"} du rétrécissement de la zone dans : ${formatTime(timeLeftNextZone)}`}</p>}
-            <MapContainer 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} />
-                {gameState == GameState.PLAYING && zone && <Circle center={zone.center} radius={zone.radius} color="blue" />}
-                {gameState == GameState.PLAYING && zoneExtremities && <Circle center={zoneExtremities.begin.center} radius={zoneExtremities.begin.radius} color='black' fill={false} />}
-                {gameState == GameState.PLAYING && zoneExtremities && <Circle center={zoneExtremities.end.center} radius={zoneExtremities.end.radius} color='red' fill={false} />}
-                {teams.map((team) => team.currentLocation && !team.captured &&
-                    <Marker key={team.id} position={team.currentLocation} icon={positionIcon}>
-                        <Tooltip permanent direction="top" offset={[0, -5]} className="custom-tooltip">{team.name}</Tooltip>
-                        <Arrow pos1={team.currentLocation} pos2={getTeam(team.chasing).currentLocation}/>
-                    </Marker>
-                )}
-                <MapActionControl onClick={handleFullscreen}/>
-            {selectedTeamId && (
-                <LeafletSidePanel show={true} onClose={() => setSelectedTeamId(null)}>
-                    <TeamInformation
-                        selectedTeamId={selectedTeamId}
-                        onClose={() => setSelectedTeamId(null)}
-                    />
-                </LeafletSidePanel>
-            )}
-            </MapContainer>
-        </div>
-    )
-}

traque-front/components/admin/placementMap.jsx

@@ -1,32 +0,0 @@
-import useLocation from "@/hook/useLocation";
-import "leaflet/dist/leaflet.css";
-import { Circle, MapContainer, Marker, TileLayer } from "react-leaflet";
-import useMapCircleDraw from "@/hook/useMapCircleDraw";
-import { MapPan, MapEventListener } from "./mapUtils";
-
-const DEFAULT_ZOOM = 14;
-const positionIcon = new L.Icon({
-    iconUrl: '/icons/location.png',
-    iconSize: [30, 30],
-    iconAnchor: [15, 15],
-    popupAnchor: [0, -15],
-    shadowSize: [30, 30],
-});
-
-export default function CircularAreaPicker({ area, setArea, markerPosition, ...props }) {
-    const location = useLocation(Infinity);
-    const { center, radius, handleLeftClick, handleRightClick, handleMouseMove } = useMapCircleDraw(area, setArea);
-
-    return (
-        <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"
-            />
-            {center && radius && <Circle center={center} radius={radius} fillColor="blue" />}
-            {markerPosition && <Marker position={markerPosition} icon={positionIcon} />}
-            <MapPan center={location} zoom={DEFAULT_ZOOM} />
-            <MapEventListener onLeftClick={handleLeftClick} onRightClick={handleRightClick} onMouseMove={handleMouseMove} />
-        </MapContainer>
-    );
-}

traque-front/components/admin/teamEdit.jsx

@@ -1,122 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { TextInput } from '../util/textInput'
-import { BlueButton, RedButton } from '../util/button';
-import useAdmin from '@/hook/useAdmin';
-import dynamic from 'next/dynamic';
-import { env } from 'next-runtime-env';
-import { GameState } from '@/util/gameState';
-
-// Imported at runtime and not at compile time
-const PlacementMap = dynamic(() => import('./placementMap'), { ssr: false });
-
-export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
-    const teamImage = useRef(null);
-    const [avgSpeed, setAvgSpeed] = useState(0); // Speed in m/s
-    const [newTeamName, setNewTeamName] = React.useState('');
-    const { updateTeam, getTeamName, removeTeam, getTeam, teams, gameState, startDate } = useAdmin();
-    const [team, setTeam] = useState({});
-
-    const NEXT_PUBLIC_SOCKET_HOST = env("NEXT_PUBLIC_SOCKET_HOST");
-    const SERVER_URL = (NEXT_PUBLIC_SOCKET_HOST == "localhost" ? "http://" : "https://") + NEXT_PUBLIC_SOCKET_HOST + "/back";
-
-    useEffect(() => {
-        let team = getTeam(selectedTeamId);
-        if (team != undefined) {
-            setNewTeamName(team.name);
-            setTeam(team);
-        }
-        teamImage.current.src = SERVER_URL + "/photo/my?team=" + selectedTeamId + "&t=" + new Date().getTime();
-    }, [selectedTeamId, teams])
-
-    // Update the average speed
-    useEffect(() => {
-        const time = Math.floor((team.finishDate ? team.finishDate - startDate : Date.now() - startDate) / 1000);
-        setAvgSpeed(team.distance/time);
-    }, [team.distance, team.finishDate]);
-
-    function handleRename(e) {
-        e.preventDefault();
-        updateTeam(team.id, { name: newTeamName });
-    }
-
-    function handleRemove() {
-        removeTeam(team.id);
-        setSelectedTeamId(null);
-    }
-
-    function handleAddPenalty(increment) {
-        let newPenalties = team.penalties + increment;
-        newPenalties = Math.max(0, newPenalties);
-        newPenalties = Math.min(3, newPenalties);
-        updateTeam(team.id, { penalties: newPenalties });
-    }
-
-    function formatTimeHours(time) {
-        // time is in seconds
-        if (!Number.isInteger(time)) return "Inconnue";
-        if (time < 0) time = 0;
-        const hours = Math.floor(time / 3600);
-        const minutes = Math.floor(time / 60);
-        const seconds = Math.floor(time % 60);
-        return String(hours).padStart(2,"0") + ":" + String(minutes).padStart(2,"0") + ":" + String(seconds).padStart(2,"0");
-    }
-
-    return (team &&
-        <div className='flex flex-row w-full h-full gap-2'>
-            <div className='flex w-1/2 flex-col h-1/2 gap-2'>
-                <h2 className='text-2xl text-center'>Actions</h2>
-                <form className='flex flex-row' onSubmit={handleRename}>
-                    <div className='w-4/5'>
-                        <TextInput name="teamName" label='Team name' value={newTeamName} onChange={(e) => setNewTeamName(e.target.value)} />
-                    </div>
-                    <div className='w-2/5'>
-                        <BlueButton type="submit">Rename</BlueButton>
-                    </div>
-                </form>
-                <div className='flex flex-row'>
-                    <BlueButton onClick={() => {updateTeam(team.id, { captured: !team.captured }); team.finishDate = Date.now()}}>{team.captured ? "Revive" : "Capture"}</BlueButton>
-                    <RedButton onClick={handleRemove}>Remove</RedButton>
-                </div>
-                <p className='text-2xl text-center w-full'>Starting zone</p>
-                <PlacementMap area={team.startingArea} setArea={(startingArea) => updateTeam(team.id, { startingArea })} markerPosition={team?.currentLocation} />
-            </div>
-            <div className='flex w-1/2 flex-col h-min gap-2 items-center'>
-                <h2 className='text-2xl text-center'>Team details</h2>
-                <div className='w-3/5'>
-                    <img className='self-stretch' ref={teamImage} onError={(e) => {e.target.src = "/images/missing_image.jpg"}} />
-                </div>
-                <div className='flex flex-col gap-3'>
-                    <div>
-                        <p>Secret : {String(team.id).padStart(6, '0').replace(/(\d{3})(\d{3})/, '$1 $2')}</p>
-                        <p>Capture code : {String(team.captureCode).padStart(4, '0')}</p>
-                    </div>
-                    <div>
-                        <p>Chasing : {getTeamName(team.chasing)}</p>
-                        <p>Chased by : {getTeamName(team.chased)}</p>
-                    </div>
-                    {gameState == GameState.PLAYING &&
-                        <div>
-                            <p>Distance: { (team.distance / 1000).toFixed(1) }km</p>
-                            <p>Time : {formatTimeHours(Math.floor((team.finishDate ? team.finishDate - startDate : Date.now() - startDate) / 1000))}</p>
-                            <p>Average speed : {(avgSpeed*3.6).toFixed(1)}km/h</p>
-                            <p>Captures : {team.nCaptures}</p>
-                            <p>Sent location : {team.nSentLocation}</p>
-                            <p>Oberved : {team.nObserved}</p>
-                        </div>
-                    }
-                    <div>
-                        <p>Phone model : {team.phoneModel ?? "Unknown"}</p>
-                        <p>Phone name : {team.phoneName ?? "Unknown"}</p>
-                        <p>Battery: {team.battery ? team.battery + "%" : "Unknown"}</p>
-                    </div>
-                    <div className='flex flex-row'>
-                        <p>Penalties :</p>
-                        <button className='w-7 h-7 mx-4 bg-blue-600 hover:bg-blue-500 text-md ease-out duration-200 text-white shadow-sm rounded' onClick={() => handleAddPenalty(-1)}>-</button>
-                        <p>{team.penalties}</p>
-                        <button className='w-7 h-7 mx-4 bg-blue-600 hover:bg-blue-500 text-md ease-out duration-200 text-white shadow-sm rounded' onClick={() => handleAddPenalty(1)}>+</button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}

traque-front/components/admin/teamList.jsx

@@ -1,72 +0,0 @@
-import useAdmin from '@/hook/useAdmin';
-import { GameState } from '@/util/gameState';
-import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
-import React from 'react'
-
-function reorder(list, startIndex, endIndex) {
-    const result = Array.from(list);
-    const [removed] = result.splice(startIndex, 1);
-    result.splice(endIndex, 0, removed);
-    return result;
-};
-
-const TEAM_STATUS = {
-  playing:    { label: "En jeu",           color: "text-custom-green" },
-  captured:   { label: "Capturée",        color: "text-custom-red" },
-  outofzone:  { label: "Hors zone",       color: "text-custom-orange" },
-  ready:      { label: "Prête",           color: "text-custom-blue" },
-  notready:   { label: "En préparation",  color: "text-custom-grey" },
-};
-
-function TeamListItem({ team, index, onSelected, itemSelected, gamestate }) {
-    console.log(gamestate === GameState.PLAYING ? "En jeu" : "En préparation");
-    const status = gamestate === GameState.PLAYING ? (team.captured ? TEAM_STATUS.captured : (team.outofzone ? TEAM_STATUS.outofzone : TEAM_STATUS.playing)) : (team.ready ? TEAM_STATUS.ready : TEAM_STATUS.notready);
-    return (
-        <Draggable draggableId={team.id.toString()} index={index} onClick={() => onSelected(team.id)}>
-            {provided => (
-                <div className='w-full p-2 bg-white border-2 border-gray-300 flex flex-row items-center text-3xl gap-3 font-bold' {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
-                    <div className="w-12 h-12 grid grid-cols-2 grid-rows-2 gap-1">
-                        <img src="/icons/greendude.png" className="w-6 h-6 object-contain" />
-                        <img src="/icons/greenlocation.png" className="w-6 h-6 object-contain" />
-                        <img src="/icons/greenconnection.png" className="w-6 h-6 object-contain" />
-                        <img src="/icons/greenbattery.png" className="w-6 h-6 object-contain" />
-                    </div>
-                    <div className='flex-1 w-full h-full flex flex-row items-center justify-between'>
-                        <p className='text-center'>{team.name}</p>
-                        <p className={`text-center ${status.color}`}>
-                            {status.label}
-                        </p>
-                    </div>
-                </div>
-
-            )}
-        </Draggable>
-    );
-}
-
-export default function TeamList({selectedTeamId, onSelected}) {
-    const {teams, reorderTeams, gameState} = 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 => (
-                    <ul ref={provided.innerRef} {...provided.droppableProps}>
-                        {teams.map((team, i) => (
-                            <li key={team.id} onClick={() => onSelected(team.id)}>
-                                <TeamListItem onSelected={onSelected} index={i} itemSelected={selectedTeamId === team.id} team={team} gamestate={gameState} />
-                            </li>
-                        ))}
-                        {provided.placeholder}
-                    </ul>
-                )}
-            </Droppable>
-        </DragDropContext>
-    );
-}

traque-front/components/mapUtils.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import "leaflet/dist/leaflet.css";
 import { useMap } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
 
 export function MapPan(props) {
     const map = useMap();