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

@@ -0,0 +1,75 @@
+import { useEffect, useState } from "react";
+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";
+
+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 LiveMap() {
+    const location = useLocation(Infinity);
+    const [timeLeftNextZone, setTimeLeftNextZone] = useState(null);
+    const { zoneExtremities, teams, nextZoneDate, getTeam, gameState } = useAdmin();
+
+    // Remaining time before sending position
+    useEffect(() => {
+        if (nextZoneDate) {
+            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'>
+            {gameState == GameState.PLAYING && <p>{`Next zone in : ${formatTime(timeLeftNextZone)}`}</p>}
+            <MapContainer className='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 && zoneExtremities.begin && <Polygon positions={zoneExtremities.begin.points} pathOptions={{ color: 'red', fillColor: 'red', fillOpacity: '0.1', weight: 3 }} />}
+                {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 &&
+                    <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>
+                )}
+            </MapContainer>
+        </div>
+    )
+}

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

@@ -0,0 +1,135 @@
+import { env } from 'next-runtime-env';
+import { useEffect, useState } from "react";
+import useAdmin from "@/hook/useAdmin";
+import { GameState } from '@/util/gameState';
+
+function DotLine({ label, value }) {
+    return (
+        <div className="flex items-center">
+            <span className="whitespace-nowrap text-m">{label}</span>
+            <span
+                className="flex-1 mx-2 overflow-hidden whitespace-nowrap text-black font-bold select-none"
+                aria-hidden="true"
+            >
+                {" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "}
+            </span>
+            <span className="whitespace-nowrap text-m">{value}</span>
+        </div>
+    );
+}
+
+function IconValue({ color, icon, value }) {
+    return (
+        <div className="flex flex-row gap-2">
+            <img src={`/icons/${color}${icon}.png`} className="w-6 h-6" />
+            <p className={`text-custom-${color}`}>{value}</p>
+        </div>
+    );
+}
+
+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: "Placée",          color: "text-custom-green" },
+    notready:   { label: "Non placée",      color: "text-custom-red" },
+    waiting:    { label: "En attente",      color: "text-custom-grey" },
+};
+
+function getStatus(team, gamestate) {
+    switch (gamestate) {
+        case GameState.SETUP:
+            return TEAM_STATUS.waiting;
+        case GameState.PLACEMENT:
+            return team.ready ? TEAM_STATUS.ready : TEAM_STATUS.notready;
+        case GameState.PLAYING:
+            return team.captured ? TEAM_STATUS.captured : team.outofzone ? TEAM_STATUS.outofzone : TEAM_STATUS.playing;
+        case GameState.FINISHED:
+            return team.captured ? TEAM_STATUS.captured : TEAM_STATUS.playing;
+    }
+}
+
+export default function TeamSidePanel({ selectedTeamId, onClose }) {
+    const { getTeam, getTeamName, startDate, gameState } = useAdmin();
+    const [imgSrc, setImgSrc] = useState("");
+    const team = getTeam(selectedTeamId);
+    const NO_VALUE = "XX";
+    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(() => {
+        setImgSrc(`${SERVER_URL}/photo/my?team=${selectedTeamId}&t=${Date.now()}`);
+    }, [selectedTeamId]);
+
+    if (!team) return null;
+
+    function formatTime(startDate) {
+        // startDate in milliseconds
+        const date = team.captured ? team.finishDate : Date.now();
+        if (date == null || startDate == null || startDate < 0) return NO_VALUE + ":" + NO_VALUE;
+        const seconds = Math.floor((date - startDate) / 1000);
+        const m = Math.floor(seconds / 60);
+        const s = Math.floor(seconds % 60);
+        return `${m}:${s.toString().padStart(2, "0")}`;
+    }
+
+    function formatDistance(distance) {
+        // distance in meters
+        if (distance == null || distance < 0) return NO_VALUE + "km";
+        return `${Math.floor(distance / 100) / 10}km`;
+    }
+
+    function formatSpeed(distance, startDate) {
+        // distance in meters | startDate in milliseconds
+        const date = team.captured ? team.finishDate : Date.now();
+        if (distance == null || distance < 0 || date == null || startDate == null || date <= startDate) return NO_VALUE + "km/h";
+        const speed = distance / (date - startDate);
+        return `${Math.floor(speed * 36000) / 10}km/h`;
+    }
+
+    function formatDate(date) {
+        // date in milliseconds
+        const dateNow = Date.now();
+        if (date == null || dateNow <= date || dateNow - date >= 1_000_000) return NO_VALUE + "s";
+        return `${Math.floor((dateNow - date) / 1000)}s`;
+    }
+
+    return (
+        <div className="relative p-3 w-3/12 h-full flex flex-col gap-3">
+            <button className="absolute left-2 -top-1 text-black text-5xl" onClick={onClose} title="Fermer">x</button>
+            <p className={`text-2xl font-bold text-center ${getStatus(team, gameState).color} font-bold`}>{getStatus(team, gameState).label}</p>
+            <p className="text-4xl font-bold text-center">{team.name ?? NO_VALUE}</p>
+            <div className="flex justify-center">
+                <img src={imgSrc ? imgSrc : "/images/missing_image.jpg"} alt="Photo de l'équipe"/>
+            </div>
+            <div className="flex flex-row justify-between items-center">
+                <IconValue color={team.sockets.length > 0 ? "green" : "red"} icon="dude" value={team.sockets.length ?? NO_VALUE} />
+                <IconValue color={team.battery >= 20 ? "green" : "red"} icon="battery" value={(team.battery ?? NO_VALUE) + "%"} />
+                <IconValue
+                    color={team.lastCurrentLocationDate != null && (Date.now() - team.lastCurrentLocationDate <= 30000) ? "green" : "red"}
+                    icon="location" value={formatDate(team.lastCurrentLocationDate)}
+                />
+            </div>
+            <div>
+                <DotLine label="ID d'équipe" value={String(team.id).padStart(6, '0').replace(/(\d{3})(\d{3})/, "$1 $2")} />
+                <DotLine label="ID de capture" value={String(team.captureCode).padStart(4, '0')} />
+            </div>
+            <div>
+                <DotLine label="Chasse" value={getTeamName(team.chasing) ?? NO_VALUE} />
+                <DotLine label="Chassé par" value={getTeamName(team.chased) ?? NO_VALUE} />
+            </div>
+            <div>
+                <DotLine label="Distance" value={formatDistance(team.distance)} />
+                <DotLine label="Temps de survie" value={formatTime(startDate)} />
+                <DotLine label="Vitesse moyenne" value={formatSpeed(team.distance, startDate)} />
+                <DotLine label="Captures" value={team.nCaptures ?? NO_VALUE} />
+                <DotLine label="Observations" value={team.nSentLocation ?? NO_VALUE} />
+                <DotLine label="Observé" value={team.nObserved ?? NO_VALUE} />
+            </div>
+            <div>
+                <DotLine label="Modèle" value={team.phoneModel ?? NO_VALUE} />
+                <DotLine label="Nom" value={team.phoneName ?? NO_VALUE} />
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,59 @@
+import useAdmin from '@/hook/useAdmin';
+import { GameState } from '@/util/gameState';
+
+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: "Placée",          color: "text-custom-green" },
+    notready:   { label: "Non placée",      color: "text-custom-red" },
+    waiting:    { label: "En attente",      color: "text-custom-grey" },
+};
+
+function getStatus(team, gamestate) {
+    switch (gamestate) {
+        case GameState.SETUP:
+            return TEAM_STATUS.waiting;
+        case GameState.PLACEMENT:
+            return team.ready ? TEAM_STATUS.ready : TEAM_STATUS.notready;
+        case GameState.PLAYING:
+            return team.captured ? TEAM_STATUS.captured : team.outofzone ? TEAM_STATUS.outofzone : TEAM_STATUS.playing;
+        case GameState.FINISHED:
+            return team.captured ? TEAM_STATUS.captured : TEAM_STATUS.playing;
+    }
+}
+
+function TeamListItem({ itemSelected, team }) {
+    const { gameState } = useAdmin();
+    const status = getStatus(team, gameState);
+
+    return (
+        <div className={'w-full p-2 bg-white flex flex-row gap-3 justify-between cursor-pointer' + (itemSelected ? " outline outline-4 outline-black" : "")}>
+            <div className='flex flex-row items-center gap-3'>
+                <div className='flex flex-row gap-1'>
+                    <img src={team.sockets.length > 0 ? "/icons/greendude.png" : "/icons/reddude.png"} className="w-4 h-4" />
+                    <img src={team.battery > 20 ? "/icons/greenbattery.png" : "/icons/redbattery.png"} className="w-4 h-4" />
+                    <img src={team.lastCurrentLocationDate != null && (Date.now() - team.lastCurrentLocationDate <= 30000) ? "/icons/greenlocation.png" : "/icons/redlocation.png"} className="w-4 h-4" />
+                </div>
+                <p className={`text-xl font-bold`}>{team.name}</p>
+            </div>
+            <p className={`text-xl font-bold ${status.color}`}>
+                {status.label}
+            </p>
+        </div>
+    );
+}
+
+export default function TeamList({selectedTeamId, onSelected}) {
+    const { teams } = useAdmin();
+
+    return (
+        <ul className='h-full gap-1 flex flex-col'>
+            {teams.map((team) => (
+                <li key={team.id} onClick={() => onSelected(team.id)}>
+                    <TeamListItem itemSelected={selectedTeamId === team.id} team={team} />
+                </li>
+            ))}
+        </ul>
+    );
+}

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

@@ -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/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 TeamInformation from "@/components/admin/teamInformation";
+import { Section } from "@/components/section";
+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 
-                            href="/admin/parameters"
-                            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 href="/admin/parameters">
+                            <ControlButton icon="parameters" title="Accéder aux paramètres du jeu"/>
                         </Link>
-                        <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="Reprendre la partie">
-                            <img src="/icons/play.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="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>
+                        <ControlButton icon="play" title="Reprendre la partie"/>
+                        <ControlButton icon="reset" title="Réinitialiser la partie"/>
+                        <ControlButton icon="placement" title="Commencer les placements"/>
+                        <ControlButton icon="begin" title="Lancer la traque"/>
                     </div>
                 </Section>
                 <Section className="h-full" title="Équipes">
@@ -70,46 +52,18 @@ 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 
-                        className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center"
-                        title ="Changer le style de la carte">
-                        <img src="/icons/mapstyle.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 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>
+                    <MapButton icon="mapstyle" title="Changer le style de la carte"/>
+                    <MapButton icon="zones" title="Afficher/masquer les zones"/>
+                    <MapButton icon="names" title="Afficher/masquer les noms des équipes"/>
+                    <MapButton icon="arrows" title="Afficher/masquer les relations de traque"/>
+                    <MapButton icon="incertitude" title="Afficher/masquer les incertitudes de position"/>
+                    <MapButton icon="path" title="Afficher/masquer la trace de l'équipe sélectionnée"/>
+                    <MapButton icon="informations" title="Afficher/masquer les évènements de l'équipe sélectionnée"/>
                 </div>
             </div>
         </div>
     )
-}
+}

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

@@ -0,0 +1,120 @@
+import { useEffect, useState } from "react";
+import { Circle, MapContainer, TileLayer } 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 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 }) {
+    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);
+    
+    function handleLeftClick(e) {
+        if (editMode == EditMode.MAX) {
+            maxLeftClick(e);
+        } else {
+            minLeftClick(e);
+        }
+    }
+    
+    function handleRightClick(e) {
+        if (editMode == EditMode.MAX) {
+            maxRightClick(e);
+        } else {
+            minRightClick(e);
+        }
+    }
+    
+    function handleMouseMove(e) {
+        if (editMode == EditMode.MAX) {
+            maxHover(e);
+        } else {
+            minHover(e);
+        }
+    }
+
+    return (
+        <div>
+            {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() {
+    const [editMode, setEditMode] = useState(EditMode.MIN);
+    const [minZone, setMinZone] = useState(null);
+    const [maxZone, setMaxZone] = useState(null);
+    const [reductionCount, setReductionCount] = useState("");
+    const [duration, setDuration] = useState("");
+    const {zoneSettings, changeZoneSettings} = useAdmin();
+
+    useEffect(() => {
+        if (zoneSettings) {
+            setMinZone(zoneSettings.min);
+            setMaxZone(zoneSettings.max);
+            setReductionCount(zoneSettings.reductionCount.toString());
+            setDuration(zoneSettings.duration.toString());
+        }
+    }, [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) {
+            setEditMode(EditMode.MAX);
+        } else {
+            setEditMode(EditMode.MIN);
+        }
+
+    }, [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'>
+            <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} />
+            <div>
+                <p>Number of zones</p>
+                <TextInput value={reductionCount} onChange={(e) => setReductionCount(e.target.value)}></TextInput>
+            </div>
+            <div>
+                <p>Duration of a zone</p>
+                <TextInput value={duration} onChange={(e) => setDuration(e.target.value)}></TextInput>
+            </div>
+            <GreenButton onClick={handleSettingsSubmit}>Apply</GreenButton>
+        </div>
+    );
+}

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

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+import { Section } from "@/components/section";
+import useAdmin from "@/hook/useAdmin";
+
+function MessageInput({title, ...props}) {
+    return (
+        <div className="w-full flex flex-row gap-3 items-center">
+            <p>{title}</p>
+            <input {...props} type="text" className="w-full h-8 p-2 rounded ring-1 ring-inset ring-gray-400 placeholder:text-gray-600" />
+        </div>
+    );
+}
+
+export default function Messages() {
+    const {gameSettings, changeGameSettings} = useAdmin();
+    const [capturedMessage, setCapturedMessage] = useState("");
+    const [winnerEndMessage, setWinnerEndMessage] = useState("");
+    const [loserEndMessage, setLoserEndMessage] = useState("");
+    const [waitingMessage, setWaitingMessage] = useState("");
+
+    useEffect(() => {
+        if (gameSettings) {
+            setCapturedMessage(gameSettings.capturedMessage);
+            setWinnerEndMessage(gameSettings.winnerEndGameMessage);
+            setLoserEndMessage(gameSettings.loserEndGameMessage);
+            setWaitingMessage(gameSettings.waitingMessage);
+        }
+    }, [gameSettings]);
+
+    function applySettings() {
+        changeGameSettings({capturedMessage: capturedMessage, winnerEndGameMessage: winnerEndMessage, loserEndGameMessage: loserEndMessage, waitingMessage: waitingMessage});
+    }
+
+    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)} onBlur={applySettings}/>
+                <MessageInput title="Capture :" value={capturedMessage} onChange={(e) => setCapturedMessage(e.target.value)} onBlur={applySettings}/>
+                <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)} onBlur={applySettings}/>
+            </div>
+        </Section>
+    );
+}

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

@@ -0,0 +1,164 @@
+import { useEffect, useState } from "react";
+import { MapContainer, TileLayer, Polyline, Polygon, CircleMarker } 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 useAdmin from "@/hook/useAdmin";
+import useLocation from "@/hook/useLocation";
+import useMapPolygonDraw from "@/hook/useMapPolygonDraw";
+
+const DEFAULT_ZOOM = 14;
+
+function PolygonDrawings({ polygons, addPolygon, removePolygon }) {
+    const { currentPolygon, highlightNodes, handleLeftClick, handleRightClick, handleMouseMove } = useMapPolygonDraw(polygons, addPolygon, removePolygon);
+    const nodeSize = 5; // px
+    const lineThickness = 3; // px
+
+    function DrawNode({pos, color}) {
+        return (
+            <CircleMarker center={pos} radius={nodeSize} pathOptions={{ color: color, fillColor: color, fillOpacity: 1 }} />
+        );
+    }
+
+    function DrawLine({pos1, pos2, color}) {
+        return (
+            <Polyline positions={[pos1, pos2]} pathOptions={{ color: color, weight: lineThickness }} />
+        );
+    }
+
+    function DrawUnfinishedPolygon({polygon}) {
+        const length = polygon.length;
+        if (length > 0) {
+            return (
+                <div>
+                    <DrawNode pos={polygon[0]} color={"red"} zIndexOffset={1000} />
+                    {polygon.map((_, i) => {
+                        if (i < length-1) {
+                            return <DrawLine key={i} pos1={polygon[i]} pos2={polygon[i+1]} color={"red"} />;
+                        } else {
+                            return null;
+                        }
+                    })}
+                </div>
+            );
+        }
+    }
+
+    function DrawPolygon({polygon}) {
+        const length = polygon.length;
+
+        if (length > 2) {
+            return (
+                <Polygon positions={polygon} pathOptions={{ color: 'black', fillColor: 'black', fillOpacity: '0.5', weight: lineThickness }} />
+            );
+        }
+    }
+
+    return (
+        <div>
+            <MapEventListener onLeftClick={handleLeftClick}  onRightClick={handleRightClick} onMouseMove={handleMouseMove} />
+            {polygons.map((polygon, i) => <DrawPolygon key={i} polygon={polygon} />)}
+            <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() {
+    const defaultDuration = 10;
+    const [polygons, setPolygons] = useState([]);
+    const [durations, setDurations] = useState([]);
+    const {zoneSettings, changeZoneSettings} = useAdmin();
+    const {penaltySettings, changePenaltySettings} = useAdmin();
+    const [allowedTimeOutOfZone, setAllowedTimeOutOfZone] = useState("");
+
+    useEffect(() => {
+        if (zoneSettings) {
+            setPolygons(zoneSettings.polygons);
+            setDurations(zoneSettings.durations);
+        }
+        if (penaltySettings) {
+            setAllowedTimeOutOfZone(penaltySettings.allowedTimeOutOfZone.toString());
+        }
+    }, [zoneSettings, penaltySettings]);
+
+    function addPolygon(polygon) {
+        // Polygons
+        setPolygons([...polygons, polygon]);
+        // Durations
+        setDurations([...durations, defaultDuration]);
+    }
+
+    function removePolygon(i) {
+        // Polygons
+        const newPolygons = [...polygons];
+        newPolygons.splice(i, 1);
+        setPolygons(newPolygons);
+        // Durations
+        const newDurations = [...durations];
+        newDurations.splice(i, 1);
+        setDurations(newDurations);
+    }
+
+    function updateDuration(i, duration) {
+        const newDurations = [...durations];
+        newDurations[i] = duration;
+        setDurations(newDurations);
+    }
+
+    function handleSettingsSubmit() {
+        const newSettings = {polygons: polygons, durations: durations};
+        changeZoneSettings(newSettings);
+        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>
+            <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">
+                            <p>Zone {i+1}</p>
+                            <div className="w-16 h-10">
+                                <TextInput value={duration} onChange={(e) => updateDuration(i, e.target.value)}/>
+                            </div>
+                        </li>
+                    ))}
+                </ul>
+                <div className="w-full flex flex-row gap-2 items-center justify-between">
+                    <p>Timeout</p>
+                    <div className="w-16 h-10">
+                        <TextInput value={allowedTimeOutOfZone} onChange={(e) => setAllowedTimeOutOfZone(e.target.value)} />
+                    </div>
+                </div>
+                <div className="w-full h-15">
+                    <GreenButton onClick={handleSettingsSubmit}>Apply</GreenButton>
+                </div>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,82 @@
+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);
+    const [removed] = result.splice(startIndex, 1);
+    result.splice(endIndex, 0, removed);
+    return result;
+};
+
+function TeamListItem({ team, index }) {
+    const { removeTeam } = useAdmin();
+
+    function handleRemove() {
+        removeTeam(team.id);
+    }
+
+    return (
+        <Draggable draggableId={team.id.toString()} index={index} onClick={() => onSelected(team.id)}>
+            {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/home.png" className="w-8 h-8" />
+                            <img src="/icons/home.png" className="w-8 h-8" onClick={handleRemove} />
+                        </div>
+                    </div>
+                </div>
+            )}
+        </Draggable>
+    );
+}
+
+export default function TeamList() {
+    const { teams, reorderTeams, addTeam } = useAdmin();
+    const [teamName, setTeamName] = useState('');
+    
+    function handleSubmit(e) {
+        e.preventDefault();
+        if (teamName !== "") {
+            addTeam(teamName);
+            setTeamName("")
+        }
+    }
+    
+    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 (
+        <div className='w-full h-full flex flex-col gap-3'>
+            <form className='w-full flex flex-row gap-3' onSubmit={handleSubmit}>
+                <div className='w-full'>
+                    <input name="teamName" label='Team name' value={teamName} onChange={(e) => setTeamName(e.target.value)} type="text" className="w-full h-full p-4 ring-1 ring-inset ring-gray-300" />
+                </div>
+                <div className='w-1/5'>
+                    <button type="submit" className="w-full h-full bg-custom-light-blue hover:bg-blue-500 transition text-3xl font-bold">+</button>
+                </div>
+            </form>
+            <DragDropContext onDragEnd={onDragEnd} >
+                <Droppable droppableId='team-list'>
+                    {provided => (
+                        <ul className='w-full h-full gap-1 flex flex-col bg-gray-300 p-1' ref={provided.innerRef} {...provided.droppableProps}>
+                            {teams.map((team, i) => (
+                                <li key={team.id}>
+                                    <TeamListItem index={i} team={team} />
+                                </li>
+                            ))}
+                            {provided.placeholder}
+                        </ul>
+                    )}
+                </Droppable>
+            </DragDropContext>
+        </div>
+    );
+}

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/util/textInput";
-import { Section } from "@/components/util/section";
+import { TextInput } from "@/components/textInput";
+import { Section } from "@/components/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>
@@ -63,4 +58,4 @@ export default function AdminPage() {
             </div>
         </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

@@ -0,0 +1,75 @@
+import { useEffect, useState } from "react"
+import { BlueButton, GreenButton } from "@/components/button";
+import { TextInput } from "@/components/textInput";
+import useTeamConnexion from "@/context/teamConnexionContext";
+import useGame from "@/hook/useGame";
+import EnemyTeamModal from "./enemyTeamModal";
+
+export default function ActionDrawer() {
+    const [visible, setVisible] = useState(false);
+    const [enemyCaptureCode, setEnemyCaptureCode] = useState("");
+    const { sendCurrentPosition, name, captureCode, capture, locationSendDeadline, penalties } = useGame();
+    const {logout} = useTeamConnexion();   
+    const [timeLeftBeforePenalty, setTimeLeftBeforePenalty] = useState(0);
+    const [enemyModalVisible, setEnemyModalVisible] = useState(false);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            console.log(locationSendDeadline)
+            const timeLeft = locationSendDeadline - Date.now();
+            setTimeLeftBeforePenalty(Math.floor(timeLeft / 1000 / 60));
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [locationSendDeadline]);
+
+    function handleCapture() {
+        capture(enemyCaptureCode);
+        setEnemyCaptureCode("");
+    }
+
+    return (
+        <div className={"fixed w-screen bottom-0 z-10 bg-gray-100 flex justify-center rounded-t-2xl transition-all duration-200 flex flex-col " + (visible ? "h-full" : "h-20")}>
+            <img src="/icons/arrow_up.png" className={"w-full object-scale-down h-ful max-h-20 transition-all cursor-pointer duration-200 " + (visible && "rotate-180")} onClick={() => setVisible(!visible)} />
+            {visible && <div className="flex justify-between flex-col w-full h-full">
+                <div className="flex flex-row justify-around">
+                    <img src="/icons/logout.png" onClick={logout} className='p-3 mx-2 w-14 h-14 bg-red-500 rounded-lg cursor-pointer bg-red  z-20' />
+                </div>
+                <div className='shadow-2xl bg-white p-1 flex flex-col text-center mb-1  mx-auto w-4/5 rounded'>
+                    <div>
+                        <span className='text-2xl text-black'>{name}</span>
+                    </div>
+                    <div className='text-gray-700'>
+                        <span> Capture code  </span>
+                        <span className='text-lg text-black'>{String(captureCode).padStart(4,"0")}</span>
+                    </div>
+                    <div className='text-gray-700'>
+                        <span className='text-lg text-black'>{timeLeftBeforePenalty}min</span>
+                        <span> before penalty</span>
+                    </div>
+                    <div className='w-1/2 flex flex-row justify-center mx-auto'>
+                        {Array.from({ length: penalties }).map((_, i) => <div key={i} className='min-h-5 m-2 min-w-5 bg-red-400'></div>)}
+                        {Array.from({ length: 3-penalties }).map((_, i) => <div key={i} className='min-h-5 m-2 min-w-5 bg-green-400'></div>)}
+                    </div>
+                </div>
+                <div className="h-20">
+                    <BlueButton onClick={sendCurrentPosition} className="h-10">Update position</BlueButton>
+                </div>
+                <div className="p-5 shadow-lg bg-white">
+                    <div className="text-center text-2xl">Target</div>
+                    <div className="h-20 my-1">
+                        <GreenButton onClick={() => setEnemyModalVisible(true)}>See target info</GreenButton>
+                    </div>
+                    <div className="h-20 flex flex-row">
+                        <TextInput inputMode="numeric" placeholder="Enemy code" value={enemyCaptureCode} onChange={(e) => setEnemyCaptureCode(e.target.value)} />
+                        <GreenButton onClick={handleCapture}>Capture target</GreenButton>
+                    </div>
+                </div>
+                {/* <div className="h-20">
+                    <RedButton onClick={sendCurrentPosition}>Signal emergency</RedButton>
+                </div> */}
+            </div>
+            }
+        <EnemyTeamModal visible={enemyModalVisible} onClose={() => setEnemyModalVisible(false)} />
+        </div>
+    )
+}

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

@@ -0,0 +1,40 @@
+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();
+    const imageRef = useRef(null);
+
+    useEffect(() => {
+        if (visible) {
+            refreshImage();
+        }
+    }, [visible]);
+
+    function refreshImage() {
+        imageRef.current.src = SERVER_URL + "/photo/enemy?team=" + teamId.toString() + "&t=" + new Date().getTime();
+    }
+
+    var protocol = "https://";
+    const NEXT_PUBLIC_SOCKET_HOST = env("NEXT_PUBLIC_SOCKET_HOST");
+    if (NEXT_PUBLIC_SOCKET_HOST == "localhost") {
+        protocol = "http://";
+    }
+    const SERVER_URL = protocol + NEXT_PUBLIC_SOCKET_HOST + "/back";
+    console.log(SERVER_URL);
+    return (visible &&
+        <>
+            <div className='fixed w-screen h-screen bg-black bg-opacity-50 z-10 text-center'></div>
+            <div className='fixed w-11/12 h-5/6 p-5 z-20 mx-auto inset-x-0 my-auto inset-y-0 flex flex-col justify-center rounded-xl transition-all shadow-xl bg-white '>
+                <h1 className="w-full text-center text-3xl mb-5">{enemyName}</h1>
+                <img ref={imageRef} src={SERVER_URL + "/photo/enemy?team=" + teamId.toString()} className='w-full h-full object-contain' />
+                <div className="h-20">
+                    <RedButton onClick={onClose}>Close</RedButton>
+                </div>
+            </div>
+        </>
+    )
+}

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

@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from 'react'
+import { Circle, MapContainer, Marker, Popup, TileLayer, useMap } from 'react-leaflet'
+import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'
+import "leaflet-defaulticon-compatibility";
+import "leaflet/dist/leaflet.css";
+import useTeamContext from '@/context/teamContext';
+import useGame from '@/hook/useGame';
+
+const DEFAULT_ZOOM = 14;
+
+// 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);
+
+    useEffect(() => {
+        if (!initialized && props.center) {
+            map.flyTo(props.center, DEFAULT_ZOOM, { animate: false });
+            setInitialized(true)
+        }
+    }, [props.center]);
+
+    return null;
+}
+
+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?.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}>
+            <TileLayer
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            />
+            {currentPosition && <Marker position={currentPosition} icon={new L.Icon({
+                iconUrl: '/icons/location.png',
+                iconSize: [30, 30],
+                iconAnchor: [15, 15],
+                popupAnchor: [0, -15],
+                shadowSize: [30, 30],
+            })}>
+                <Popup>
+                    Votre position
+                </Popup>
+            </Marker>}
+            {enemyPosition && <Marker position={enemyPosition} icon={new L.Icon({
+                iconUrl: '/icons/target.png',
+                iconSize: [30, 30],
+                iconAnchor: [15, 15],
+                popupAnchor: [0, -15],
+                shadowSize: [30, 30],
+            })}>
+                <Popup>
+                    Position de l&apos;ennemi
+                </Popup>
+            </Marker>}
+            <MapPan center={currentPosition} />
+            <LiveZone />
+            <ZoneExtremities />
+        </MapContainer>
+    )
+}
+
+export function PlacementMap({ ...props }) {
+    const { currentPosition, startingArea } = useGame();
+    return (
+        <MapContainer  {...props} className='min-h-full w-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"
+            />
+            {currentPosition && <Marker position={currentPosition} icon={new L.Icon({
+                iconUrl: '/icons/location.png',
+                iconSize: [30, 30],
+                iconAnchor: [15, 15],
+                popupAnchor: [0, -15],
+                shadowSize: [30, 30],
+            })}>
+                <Popup>
+                    Votre position
+                </Popup>
+            </Marker>}
+            <MapPan center={currentPosition} />
+            {startingArea && <Circle center={startingArea?.center} radius={startingArea?.radius} color='blue' />}
+        </MapContainer>
+    )
+}

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

@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react";
+import { useSocketListener } from "@/hook/useSocketListener";
+
+export default function Notification({ socket }) {
+    const [visible, setVisible] = useState(false);
+    const [timeoutId, setTimeoutId] = useState(null);
+    const [notification, setNotification] = useState(null);
+
+    useSocketListener(socket, "error", (notification) => {
+        console.log("error", notification);
+        setNotification({ type: "error", text: notification });
+        setVisible(true);
+    });
+
+    useSocketListener(socket, "success", (notification) => {
+        console.log("success", notification);
+        setNotification({ type: "success", text: notification });
+        setVisible(true);
+    });
+
+    useSocketListener(socket, "warning", (notification) => {
+        console.log("warning", notification);
+        setNotification({ type: "warning", text: notification });
+        setVisible(true);
+    });
+
+    // Hide the notification after 5 seconds
+    useEffect(() => {
+        console.log({ visible });
+        if (visible && notification?.text != undefined) {
+            clearTimeout(timeoutId);
+            if (notification?.type == "success") {
+                setTimeoutId(setTimeout(() => {
+                    setVisible(false);
+                }, 3000));
+            }
+        }
+    }, [visible]);
+
+    const bgColorMap = {
+        error: "bg-red-500 text-white",
+        success: "bg-green-500",
+        warning: "bg-yellow-500"
+    }
+
+    const classNames = 'fixed relative w-11/12 p-5 z-30 mx-auto inset-x-0 flex justify-center rounded-xl transition-all shadow-xl ' + (visible ? "top-5 " : "-translate-y-full ");
+    
+    return (
+        Object.keys(bgColorMap).map((key) =>
+            notification?.type == key &&
+            <div key={key} className={classNames + bgColorMap[key]} onClick={() => setVisible(false)}>
+                <p className="absolute top-2 right-2 p-2 rounded-l text-3xl bg-white">x</p>
+                <p className='text-center text-xl'>{notification?.text}</p>
+            </div>
+    ));
+}

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

@@ -0,0 +1,19 @@
+import useTeamConnexion from "@/context/teamConnexionContext";
+import useGame from "@/hook/useGame";
+
+export default function PlacementOverlay() {
+    const { name, ready } = useGame();
+    const {logout} = useTeamConnexion();
+    return (
+        <>
+            <img src="/icons/logout.png" onClick={logout} className='w-12 h-12 bg-red-500 p-2 top-1 right-1 rounded-lg cursor-pointer bg-red fixed z-20' />
+            <div className='fixed top-0 p-3 w-full bg-gray-300 shadow-xl rounded-b-xl flex flex-col z-10 justify-center items-center'>
+                <div className='text-2xl my-3'>Placement</div>
+                <div className='text-md'>{name}</div>
+                {!ready && <div className='text-lg font-semibold text-red-700'>Positionez vous dans le cercle</div>}
+                {ready && <div className='text-lg font-semibold text-green-700 text-center'>Restez dans le cercle en attendant que la partie commence</div>}
+
+            </div>
+        </>
+    )
+}

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

@@ -0,0 +1,56 @@
+import { useRef } from "react";
+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();
+    const { gameSettings } = useTeamContext();
+    const imageRef = useRef(null);
+    const NEXT_PUBLIC_SOCKET_HOST = env("NEXT_PUBLIC_SOCKET_HOST");
+    var protocol = "https://";
+    if (NEXT_PUBLIC_SOCKET_HOST == "localhost") {
+        protocol = "http://";
+    }
+    const SERVER_URL = protocol + NEXT_PUBLIC_SOCKET_HOST + "/back";
+    console.log(SERVER_URL);
+
+    function sendImage() {
+        let data = new FormData();
+        data.append('file', document.querySelector('input[type="file"]').files[0]);
+
+        fetch(SERVER_URL + "/upload?team=" + teamId.toString() , {
+            method: 'POST',
+            body: data
+        }).then((response) => {
+            console.log(response);
+            refreshImage();
+        });
+    }
+
+    function refreshImage() {
+        imageRef.current.src = SERVER_URL + "/photo/my?team=" + teamId.toString() + "&t=" + new Date().getTime();
+    }
+
+
+    return (
+        <div className='h-full flex flex-col items-center justify-center'>
+            <LogoutButton />
+            <div className='text-4xl mt-10 text-center'>
+                Equipe : {name}
+            </div>
+            <div className='text-2xl text-center'>
+                {gameSettings?.waitingMessage}
+            </div>
+            <div className='text-2xl text-center my-10'>
+                <p>Uploadez une photo où tous les membres de l&apos;équipe sont visibles</p>
+                <input type="file" name="file" accept="image/*" className=" my-5 block w-full text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"/>
+                <div className="h-20">
+                <GreenButton onClick={sendImage}>Envoyer</GreenButton>
+                </div>
+            </div>
+            {teamId && <img ref={imageRef} src={SERVER_URL + "/photo/my?team=" + teamId.toString()} className='w-screen h-1/2 object-contain' />}
+        </div>
+    )
+}

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

@@ -1,22 +1,22 @@
 "use client";
-import ActionDrawer from '@/components/team/actionDrawer';
-import Notification from '@/components/team/notification';
-import PlacementOverlay from '@/components/team/placementOverlay';
-import WaitingScreen from '@/components/team/waitingScreen';
-import { LogoutButton } from '@/components/util/button';
+import React from 'react';
+import dynamic from 'next/dynamic';
+import { LogoutButton } from '@/components/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 React from 'react'
+import ActionDrawer from './components/actionDrawer';
+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
 });