Server heavy refactoring 4 (not functionnal)

2026-04-10 16:30:18 +02:00 · 2026-03-12 23:17:21 +01:00
parent e1b6c0e0c5
commit 1389dce132
95 changed files with 5320 additions and 27986 deletions
--- a/server/traque-front/app/admin/components/liveMap.jsx
+++ b/server/traque-front/app/admin/components/liveMap.jsx
@@ -1,12 +1,14 @@
 import { Fragment, useEffect, useState } from "react";
+import Image from 'next/image';
 import { Arrow, CircleZone, PolygonZone, Position, Tag } from "@/components/layer";
 import { CustomMapContainer, MapEventListener, MapPan } from "@/components/map";
-import useAdmin from "@/hook/useAdmin";
-import { GameState } from "@/util/types";
-import { mapZooms } from "@/util/configurations";
+import { Show } from "@/components/Show";
+import { useAdmin } from "@/context/adminContext";
+import { GameState } from "@/config/types";
+import { mapZooms } from "@/config/configurations";

 export default function LiveMap({ selectedTeamId, onSelected, isFocusing, setIsFocusing, mapStyle, showZones, showNames, showArrows }) {
-    const { zones, teams, getTeam, gameState } = useAdmin();
+    const { gameState, teams, zones, getTeam } = useAdmin();
    const [timeLeftNextZone, setTimeLeftNextZone] = useState(null);
    const [isFullScreen, setIsFullScreen] = useState(false);

@@ -31,21 +33,15 @@ export default function LiveMap({ selectedTeamId, onSelected, isFocusing, setIsF
        return String(minutes).padStart(2,"0") + ":" + String(seconds).padStart(2,"0");
    }

-    function Zones() {
-        if (!(showZones && gameState == GameState.PLAYING)) return null;
-
-        return (<>
-            <PolygonZone polygon={zones.currentZone} color={mapStyle.currentZoneColor} />
-            <PolygonZone polygon={zones.nextZone} color={mapStyle.nextZoneColor} />
-        </>);
-    }
-
    return (
        <div className={`${isFullScreen ? "fixed inset-0 z-[9999]" : "relative h-full w-full"}`}>
            <CustomMapContainer mapStyle={mapStyle}>
                {isFocusing && <MapPan center={getTeam(selectedTeamId)?.currentLocation} zoom={mapZooms.high} animate />}
                <MapEventListener onDragStart={() => setIsFocusing(false)} onWheel={() => setIsFocusing(false)} />
-                <Zones/>
+                <Show when={showZones && gameState == GameState.PLAYING}>
+                    <PolygonZone polygon={zones.currentZone} color={mapStyle.currentZoneColor} />
+                    <PolygonZone polygon={zones.nextZone} color={mapStyle.nextZoneColor} />
+                </Show>
                {teams.map((team) => team && <Fragment key={team.id}>
                    <CircleZone circle={team.startingArea} color={mapStyle.placementZoneColor} display={gameState == GameState.PLACEMENT && showZones}>
                        <Tag text={team.name} display={showNames} />
@@ -63,8 +59,8 @@ export default function LiveMap({ selectedTeamId, onSelected, isFocusing, setIsF
                </div>
            }
            <button className="absolute top-4 right-4 z-[1000] cursor-pointer bg-white p-3 rounded-full shadow-lg drop-shadow" onClick={() => setIsFullScreen(!isFullScreen)}>
-                <img src={`/icons/fullscreen.png`} className="w-8 h-8" />
+                <Image src={`/icons/fullscreen.png`} alt="full-screen" className="w-8 h-8" />
            </button>
        </div>
-    )
+    );
 }
--- a/server/traque-front/app/admin/components/teamSidePanel.jsx
+++ b/server/traque-front/app/admin/components/teamSidePanel.jsx
@@ -1,8 +1,10 @@
 import { env } from 'next-runtime-env';
 import { useEffect, useState } from "react";
-import useAdmin from "@/hook/useAdmin";
+import Image from 'next/image';
 import { getStatus } from '@/util/functions';
-import { Colors, GameState } from '@/util/types';
+import { Colors, GameState } from '@/config/types';
+import { useAdmin } from '@/context/adminContext';
+import { Show } from '@/components/Show';

 function DotLine({ label, value }) {
    return (
@@ -22,7 +24,7 @@ function DotLine({ label, value }) {
 function IconValue({ color, icon, value }) {
    return (
        <div className="flex flex-row gap-2">
-            <img src={`/icons/${icon}/${color}.png`} className="w-6 h-6" />
+            <Image src={`/icons/${icon}/${color}.png`} alt="icon" className="w-6 h-6" />
            <p style={{color: Colors[color]}}>{value}</p>
        </div>
    );
@@ -31,7 +33,7 @@ function IconValue({ color, icon, value }) {
 export default function TeamSidePanel({ selectedTeamId, onClose }) {
    const { getTeam, gameState } = useAdmin();
    const [imgSrc, setImgSrc] = useState("");
-    const [_, setRefreshKey] = useState(0);
+    const [dateNow, setDateNow] = useState(0);
    const team = getTeam(selectedTeamId);
    const NO_VALUE = "XX";
    const NEXT_PUBLIC_SOCKET_HOST = env("NEXT_PUBLIC_SOCKET_HOST");
@@ -39,18 +41,16 @@ export default function TeamSidePanel({ selectedTeamId, onClose }) {

    useEffect(() => {
        setImgSrc(`${SERVER_URL}/photo/my?team=${selectedTeamId}&t=${Date.now()}`);
-    }, [selectedTeamId]);
-
-    if (!team) return null;
+    }, [SERVER_URL, selectedTeamId]);

    useEffect(() => {
-        const interval = setInterval(() => {
-            setRefreshKey(prev => prev + 1);
-        }, 1000);
+        const interval = setInterval(() => setDateNow(Date.now()), 1000);

        return () => clearInterval(interval);
    }, []);

+    if (!team) return null;
+
    function formatTime(startDate, endDate) {
        // startDate in milliseconds
        if (endDate == null || startDate == null || startDate < 0) return NO_VALUE + ":" + NO_VALUE;
@@ -75,7 +75,6 @@ export default function TeamSidePanel({ selectedTeamId, onClose }) {

    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`;
    }
@@ -86,13 +85,13 @@ export default function TeamSidePanel({ selectedTeamId, onClose }) {
            <p className="text-2xl font-bold text-center" style={{color: getStatus(team, gameState).color}}>{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"/>
+                <Image 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="user" value={team.sockets?.length ?? NO_VALUE} />
                <IconValue color={team.battery >= 20 ? "green" : "red"} icon="battery" value={(team.battery ?? NO_VALUE) + "%"} />
                <IconValue
-                    color={team.lastCurrentLocationDate && (Date.now() - team.lastCurrentLocationDate <= 30000) ? "green" : "red"}
+                    color={team.lastCurrentLocationDate && (dateNow - team.lastCurrentLocationDate <= 30000) ? "green" : "red"}
                    icon="location" value={formatDate(team.lastCurrentLocationDate)}
                />
            </div>
@@ -100,22 +99,18 @@ export default function TeamSidePanel({ selectedTeamId, onClose }) {
                <DotLine label="ID d'équipe" value={String(selectedTeamId).padStart(6, '0').replace(/(\d{3})(\d{3})/, "$1 $2")} />
                <DotLine label="ID de capture" value={team.captureCode ? String(team.captureCode).padStart(4, '0') : NO_VALUE} />
            </div>
-            { gameState != GameState.FINISHED &&
-                <div>
-                    <DotLine label="Chasse" value={getTeam(team.chasing)?.name ?? NO_VALUE} />
-                    <DotLine label="Chassé par" value={getTeam(team.chased)?.name ?? NO_VALUE} />
-                </div>
-            }
-            { (gameState == GameState.PLAYING || gameState == GameState.FINISHED) && false &&
-                <div>
-                    <DotLine label="Distance" value={formatDistance(team.distance)} />
-                    <DotLine label="Temps de survie" value={formatTime(0, team.finishDate || Date.now())} />
-                    <DotLine label="Vitesse moyenne" value={formatSpeed(team.distance, 0, team.finishDate || Date.now())} />
-                    <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>
-            }
+            <Show when={gameState == GameState.FINISHED}>
+                <DotLine label="Chasse" value={getTeam(team.chasing)?.name ?? NO_VALUE} />
+                <DotLine label="Chassé par" value={getTeam(team.chased)?.name ?? NO_VALUE} />
+            </Show>
+            <Show when={gameState == GameState.PLAYING || gameState == GameState.FINISHED}>
+                <DotLine label="Distance" value={formatDistance(team.distance)} />
+                <DotLine label="Temps de survie" value={formatTime(0, team.finishDate || dateNow)} />
+                <DotLine label="Vitesse moyenne" value={formatSpeed(team.distance, 0, team.finishDate || dateNow)} />
+                <DotLine label="Captures" value={team.nCaptures ?? NO_VALUE} />
+                <DotLine label="Observations" value={team.nSentLocation ?? NO_VALUE} />
+                <DotLine label="Observé" value={team.nObserved ?? NO_VALUE} />
+            </Show>
            <div>
                <DotLine label="Modèle" value={team.phoneModel ?? NO_VALUE} />
                <DotLine label="Nom" value={team.phoneName ?? NO_VALUE} />
--- a/server/traque-front/app/admin/components/teamViewer.jsx
+++ b/server/traque-front/app/admin/components/teamViewer.jsx
@@ -1,20 +1,28 @@
+import Image from 'next/image';
 import { List } from '@/components/list';
-import useAdmin from '@/hook/useAdmin';
 import { getStatus } from '@/util/functions';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { useAdmin } from '@/context/adminContext';

 function TeamViewerItem({ team }) {
    const { gameState } = useAdmin();
+    const [dateNow, setDateNow] = useState(0);
    const status = getStatus(team, gameState);
    const NO_VALUE = "XX";
+    
+    useEffect(() => {
+        const interval = setInterval(() => setDateNow(Date.now()), 1000);
+
+        return () => clearInterval(interval);
+    }, []);

    return (
        <div className={`w-full flex flex-row gap-3 p-2 ${team.captured ? 'bg-gray-200' : 'bg-white'} justify-between`}>
            <div className='flex flex-row items-center gap-3'>
                <div className='flex flex-row gap-1'>
-                    <img src={`/icons/user/${team.sockets.length > 0 ? "green" : "red"}.png`} className="w-4 h-4" />
-                    <img src={`/icons/battery/${team.battery >= 20 ? "green" : "red"}.png`} className="w-4 h-4" />
-                    <img src={`/icons/location/${team.lastCurrentLocationDate && (Date.now() - team.lastCurrentLocationDate <= 30000) ? "green" : "red"}.png`} className="w-4 h-4" />
+                    <Image src={`/icons/user/${team.sockets.length > 0 ? "green" : "red"}.png`} alt="icon" className="w-4 h-4" />
+                    <Image src={`/icons/battery/${team.battery >= 20 ? "green" : "red"}.png`} alt="icon" className="w-4 h-4" />
+                    <Image src={`/icons/location/${team.lastCurrentLocationDate && (dateNow - team.lastCurrentLocationDate <= 30000) ? "green" : "red"}.png`} alt="icon" className="w-4 h-4" />
                </div>
                <p className="text-xl font-bold">{team.name ?? NO_VALUE}</p>
            </div>
--- a/server/traque-front/app/admin/layout.js
+++ b/server/traque-front/app/admin/layout.js
@@ -1,12 +0,0 @@
-import { AdminConnexionProvider } from "@/context/adminConnexionContext";
-import { AdminProvider } from "@/context/adminContext";
-
-export default function AdminLayout({ children }) {
-    return (
-        <AdminConnexionProvider>
-            <AdminProvider>
-                {children}
-            </AdminProvider>
-        </AdminConnexionProvider>
-    );
-}
--- a/server/traque-front/app/admin/page.jsx
+++ b/server/traque-front/app/admin/page.jsx
@@ -2,13 +2,15 @@
 import { useState } from 'react';
 import dynamic from "next/dynamic";
 import Link from "next/link";
+import Image from "next/image";
 import { Section } from "@/components/section";
-import { useAdminConnexion } from "@/context/adminConnexionContext";
-import useAdmin from "@/hook/useAdmin";
-import { GameState } from "@/util/types";
-import { mapStyles } from '@/util/configurations';
+import { useAuth } from "@/context/authContext";
+import { useAdmin } from '@/context/adminContext';
+import { GameState } from "@/config/types";
+import { mapStyles } from '@/config/configurations';
 import TeamSidePanel from "./components/teamSidePanel";
 import TeamViewer from './components/teamViewer';
+import { emitState } from '@/services/socket/emitters';

 // Imported at runtime and not at compile time
 const LiveMap = dynamic(() => import('./components/liveMap'), { ssr: false });
@@ -16,7 +18,7 @@ const LiveMap = dynamic(() => import('./components/liveMap'), { ssr: false });
 function MainTitle() {
    return (
        <div className='w-full bg-custom-light-blue gap-5 p-5 flex flex-row shadow-2xl'>
-            <img src="/icons/home.png" className="w-8 h-8" />
+            <Image src="/icons/home.png" alt="home" className="w-8 h-8" />
            <h2 className="text-3xl font-bold">Page principale</h2>
        </div>
    );
@@ -25,7 +27,7 @@ function MainTitle() {
 function MapButton({ icon, ...props }) {
    return (
        <button className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center" {...props}>
-            <img src={`/icons/${icon}.png`} className="w-10 h-10" />
+            <Image src={`/icons/${icon}.png`} alt="map-button" className="w-10 h-10" />
        </button>
    );
 }
@@ -33,14 +35,14 @@ function MapButton({ icon, ...props }) {
 function ControlButton({ icon, ...props }) {
    return (
        <button className="w-[4.5rem] h-[4.5rem] bg-custom-light-blue rounded-lg hover:bg-blue-500 transition flex items-center justify-center" {...props}>
-            <img src={`/icons/${icon}.png`} className="w-10 h-10" />
+            <Image src={`/icons/${icon}.png`} alt="control-button" className="w-10 h-10" />
        </button>
    );
 }

 export default function AdminPage() {
-    const { useProtect } = useAdminConnexion();
-    const { changeState, getTeam } = useAdmin();
+    const { useProtect } = useAuth();
+    const { getTeam } = useAdmin();
    const [selectedTeamId, setSelectedTeamId] = useState(null);
    const [mapStyle, setMapStyle] = useState(mapStyles.default);
    const [showZones, setShowZones] = useState(true);
@@ -84,10 +86,9 @@ export default function AdminPage() {
                    <Link href="/admin/parameters">
                        <ControlButton icon="parameters" title="Accéder aux paramètres du jeu"/>
                    </Link>
-                    {false && <ControlButton icon="play" title="Reprendre la partie" onClick={() => {}} />}
-                    <ControlButton icon="reset" title="Réinitialiser la partie" onClick={() => changeState(GameState.SETUP)} />
-                    <ControlButton icon="placement" title="Commencer les placements" onClick={() => changeState(GameState.PLACEMENT)} />
-                    <ControlButton icon="begin" title="Lancer la traque" onClick={() => changeState(GameState.PLAYING)} />
+                    <ControlButton icon="reset" title="Réinitialiser la partie" onClick={() => emitState(GameState.SETUP)} />
+                    <ControlButton icon="placement" title="Commencer les placements" onClick={() => emitState(GameState.PLACEMENT)} />
+                    <ControlButton icon="begin" title="Lancer la traque" onClick={() => emitState(GameState.PLAYING)} />
                </Section>
                <Section title="Équipes" outerClassName="flex-1 min-h-0">
                    <TeamViewer selectedTeamId={selectedTeamId} onSelected={onSelected}/>
@@ -118,11 +119,8 @@ export default function AdminPage() {
                    <MapButton icon="zones" title="Afficher/masquer les zones" onClick={switchZones}/>
                    <MapButton icon="names" title="Afficher/masquer les noms des équipes" onClick={switchNames}/>
                    <MapButton icon="arrows" title="Afficher/masquer les relations de traque" onClick={switchArrows}/>
-                    {false && <MapButton icon="incertitude" title="Afficher/masquer les incertitudes de position"/>}
-                    {false && <MapButton icon="path" title="Afficher/masquer la trace de l'équipe sélectionnée"/>}
-                    {false && <MapButton icon="informations" title="Afficher/masquer les évènements de l'équipe sélectionnée"/>}
                </div>
            </Section>
        </div>
-    )
+    );
 }
--- a/server/traque-front/app/admin/parameters/components/circleZoneSelector.jsx
+++ b/server/traque-front/app/admin/parameters/components/circleZoneSelector.jsx
@@ -2,60 +2,53 @@ import { useEffect, useState } from "react";
 import "leaflet/dist/leaflet.css";
 import { CustomMapContainer, MapEventListener } from "@/components/map";
 import { NumberInput } from "@/components/input";
-import useAdmin from "@/hook/useAdmin";
 import useMapCircleDraw from "@/hook/useCircleDraw";
 import useLocalVariable from "@/hook/useLocalVariable";
-import { defaultZoneSettings } from "@/util/configurations";
-import { ZoneTypes } from "@/util/types";
+import { defaultZoneSettings } from "@/config/configurations";
+import { ZoneTypes } from "@/config/types";
 import { CircleZone } from "@/components/layer";
+import { useAdmin } from "@/context/adminContext";
+import { emitSettings } from "@/services/socket/emitters";

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

 function Drawings({ minZone, setMinZone, maxZone, setMaxZone, editMode }) {
    const { drawingCircle: drawingMaxCircle, handleLeftClick: maxLeftClick, handleRightClick: maxRightClick, handleMouseMove: maxHover } = useMapCircleDraw(maxZone, setMaxZone);
    const { drawingCircle: drawingMinCircle, handleLeftClick: minLeftClick, handleRightClick: minRightClick, handleMouseMove: minHover } = useMapCircleDraw(minZone, setMinZone);

-    function MaxCircleZone() {
-        return (
-            drawingMaxCircle
-            ? <CircleZone circle={drawingMaxCircle} color="blue" />
-            : <CircleZone circle={maxZone} color="blue" />
-        );
-    }
-
-    function MinCircleZone() {
-        return (
-            drawingMinCircle
-            ? <CircleZone circle={drawingMinCircle} color="red" />
-            : <CircleZone circle={minZone} color="red" />
-        );
-    }
-
    return (<>
        <MapEventListener
            onLeftClick={editMode == EditMode.MAX ? maxLeftClick : minLeftClick} 
            onRightClick={editMode == EditMode.MAX ? maxRightClick : minRightClick}
            onMouseMove={editMode == EditMode.MAX ? maxHover : minHover}
        />
-        <MaxCircleZone/>
-        <MinCircleZone/>
+        {
+            drawingMaxCircle
+            ? <CircleZone circle={drawingMaxCircle} color="blue" />
+            : <CircleZone circle={maxZone} color="blue" />
+        }
+        {
+            drawingMinCircle
+            ? <CircleZone circle={drawingMinCircle} color="red" />
+            : <CircleZone circle={minZone} color="red" />
+        }
    </>);
 }

 export default function CircleZoneSelector({ display }) {
-    const {settings, updateSettings} = useAdmin();
-    const [localZoneSettings, setLocalZoneSettings, applyLocalZoneSettings] = useLocalVariable(settings.playingZones, (e) => updateSettings({playingZones: e}));
-    const [localOutOfZoneDelay, setLocalOutOfZoneDelay, applyLocalOutOfZoneDelay] = useLocalVariable(settings.outOfZoneDelay, (e) => updateSettings({outOfZoneDelay: e}));
+    const { settings } = useAdmin();
+    const [localZoneSettings, setLocalZoneSettings, applyLocalZoneSettings] = useLocalVariable(settings.playingZones, (e) => emitSettings({...settings, playingZones: e}));
+    const [localOutOfZoneDelay, setLocalOutOfZoneDelay, applyLocalOutOfZoneDelay] = useLocalVariable(settings.outOfZoneDelay, (e) => emitSettings({...settings, outOfZoneDelay: e}));
    const [editMode, setEditMode] = useState(EditMode.MAX);

    useEffect(() => {
        if (!localZoneSettings || localZoneSettings.type != ZoneTypes.CIRCLE) {
            setLocalZoneSettings(defaultZoneSettings.circle);
        }
-    }, [localZoneSettings]);
+    }, [localZoneSettings, setLocalZoneSettings]);

    function setMinZone(minZone) {
        setLocalZoneSettings({...localZoneSettings, min: minZone});
@@ -96,7 +89,7 @@ export default function CircleZoneSelector({ display }) {
                        <NumberInput id="reduction-number" value={localZoneSettings.reductionCount ?? ""} onChange={updateReductionCount} />
                    </div>
                    <div className="w-full flex flex-row gap-2 items-center justify-between">
-                        <p>Durée d'une zone</p>
+                        <p>{"Durée d'une zone"}</p>
                        <NumberInput id="duration" value={localZoneSettings.duration ?? ""} onChange={updateDuration} />
                    </div>
                    <div className="w-full flex flex-row gap-2 items-center justify-between">
--- a/server/traque-front/app/admin/parameters/components/messages.jsx
+++ b/server/traque-front/app/admin/parameters/components/messages.jsx
@@ -1,8 +0,0 @@
-import { Section } from "@/components/section";
-
-export default function Messages() {
-    return (
-        <Section title="Messages" innerClassName="w-full h-full flex flex-col gap-3 items-center">
-        </Section>
-    );
-}
--- a/server/traque-front/app/admin/parameters/components/placementZoneSelector.jsx
+++ b/server/traque-front/app/admin/parameters/components/placementZoneSelector.jsx
@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
 import { List } from "@/components/list";
 import { CustomMapContainer, MapEventListener } from "@/components/map";
-import useAdmin from '@/hook/useAdmin';
 import useMultipleCircleDraw from "@/hook/useMultipleCircleDraw";
 import { CircleZone, Tag } from "@/components/layer";
+import { useAdmin } from "@/context/adminContext";

 function Drawings({ placementZones, addZone, removeZone, handleRightClick }) {
    const { handleLeftClick, handleRightClick: handleRightClickDrawing } = useMultipleCircleDraw(placementZones, addZone, removeZone, 30);
@@ -24,10 +24,12 @@ function Drawings({ placementZones, addZone, removeZone, handleRightClick }) {
 }

 export default function PlacementZoneSelector({ display }) {
-    const { teams, getTeam, placementTeam } = useAdmin();
+    const { teams, getTeam } = useAdmin();
    const [selectedTeamId, setSelectedTeamId] = useState(null);
    const [placementZones, setPlacementZones] = useState([]);

+    // TODO replace old function placementTeam
+
    useEffect(() => {
        setPlacementZones(teams.filter(team => team.startingArea).map(team => ({id: team.id, name: team.name, center: team.startingArea.center, radius: team.startingArea.radius})));
    }, [teams]);
--- a/server/traque-front/app/admin/parameters/components/playingZoneSelector.jsx
+++ b/server/traque-front/app/admin/parameters/components/playingZoneSelector.jsx
@@ -1,7 +1,5 @@
 import dynamic from "next/dynamic";
-import { ZoneTypes } from "@/util/types";
-import useLocalVariable from "@/hook/useLocalVariable";
-import useAdmin from "@/hook/useAdmin";
+import { ZoneTypes } from "@/config/types";

 // Imported at runtime and not at compile time
 const CircleZoneSelector = dynamic(() => import('./circleZoneSelector'), { ssr: false });
@@ -19,13 +17,12 @@ function ZoneTypeButton({title, onClick, isSelected}) {
 }

 export default function PlayingZoneSelector({ display }) {
-
    return (
        <div className={display ? 'w-full h-full gap-3 flex flex-col' : "hidden"}>
            <div className="w-full flex flex-row gap-3 items-center">
                <p className="text-l">Type de zone :</p>
-                <ZoneTypeButton title="Cercles" onClick={() => setLocalZoneType(ZoneTypes.CIRCLE)} isSelected={ZoneTypes.POLYGON == ZoneTypes.CIRCLE} />
-                <ZoneTypeButton title="Polygones" onClick={() => setLocalZoneType(ZoneTypes.POLYGON)} isSelected={ZoneTypes.POLYGON == ZoneTypes.POLYGON} />
+                <ZoneTypeButton title="Cercles" onClick={() => { /*setLocalZoneType(ZoneTypes.CIRCLE)*/ }} isSelected={ZoneTypes.POLYGON == ZoneTypes.CIRCLE} />
+                <ZoneTypeButton title="Polygones" onClick={() => { /*setLocalZoneType(ZoneTypes.POLYGON)*/ }} isSelected={ZoneTypes.POLYGON == ZoneTypes.POLYGON} />
            </div>
            <div className="w-full flex-1">
                <CircleZoneSelector display={ZoneTypes.POLYGON == ZoneTypes.CIRCLE} />
--- a/server/traque-front/app/admin/parameters/components/polygonZoneSelector.jsx
+++ b/server/traque-front/app/admin/parameters/components/polygonZoneSelector.jsx
@@ -1,26 +1,24 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo } from "react";
 import { Polyline } from "react-leaflet";
 import "leaflet/dist/leaflet.css";
 import { ReorderList } from "@/components/list";
 import { CustomMapContainer, MapEventListener } from "@/components/map";
 import { NumberInput } from "@/components/input";
 import { Node, PolygonZone, Label } from "@/components/layer";
-import useAdmin from "@/hook/useAdmin";
 import useMapPolygonDraw from "@/hook/usePolygonDraw";
 import useLocalVariable from "@/hook/useLocalVariable";
-import { defaultZoneSettings } from "@/util/configurations";
-import { ZoneTypes } from "@/util/types";
+import { defaultZoneSettings } from "@/config/configurations";
+import { ZoneTypes } from "@/config/types";
+import { emitSettings } from "@/services/socket/emitters";
+import { useAdmin } from "@/context/adminContext";

 function Drawings({ localZoneSettings, addZone, removeZone }) {
-    const [polygons, setPolygons] = useState([]);
-    const { currentPolygon, highlightNodes, handleLeftClick, handleRightClick, handleMouseMove } = useMapPolygonDraw(polygons, addZone, removeZone);
-
-    useEffect(() => {
-        if (localZoneSettings.type == ZoneTypes.POLYGON) {
-            setPolygons(localZoneSettings.polygons.map(zone => zone.polygon));
-        }
+    const polygons = useMemo(() => {
+        return localZoneSettings.type == ZoneTypes.POLYGON ? localZoneSettings.polygons.map(zone => zone.polygon) : [];
    }, [localZoneSettings]);

+    const { currentPolygon, highlightNodes, handleLeftClick, handleRightClick, handleMouseMove } = useMapPolygonDraw(polygons, addZone, removeZone);
+
    function getLabelPosition(polygon) {
        const sum = polygon.reduce(
            (acc, coord) => ({
@@ -38,7 +36,7 @@ function Drawings({ localZoneSettings, addZone, removeZone }) {
    return (<>
        <MapEventListener onLeftClick={handleLeftClick}  onRightClick={handleRightClick} onMouseMove={handleMouseMove} />
        {localZoneSettings.polygons.map(zone =>
-            <PolygonZone key={zone.id} polygon={zone.polygon} color="black" opacity='0.5' >
+            <PolygonZone key={zone.id} polygon={zone.polygon} color="black" >
                <Label position={getLabelPosition(zone.polygon)} label={zone.id} color="white" />
            </PolygonZone>
        )}
@@ -54,15 +52,15 @@ function Drawings({ localZoneSettings, addZone, removeZone }) {

 export default function PolygonZoneSelector({ display }) {
    const defaultDuration = 10;
-    const {settings, updateSettings} = useAdmin();
-    const [localZoneSettings, setLocalZoneSettings, applyLocalZoneSettings] = useLocalVariable(settings.zones, (e) => updateSettings({zone: e}));
-    const [localOutOfZoneDelay, setLocalOutOfZoneDelay, applyLocalOutOfZoneDelay] = useLocalVariable(settings.outOfZoneDelay, (e) => updateSettings({outOfZoneDelay: e}));
+    const { settings } = useAdmin();
+    const [localZoneSettings, setLocalZoneSettings, applyLocalZoneSettings] = useLocalVariable(settings.zones, (e) => emitSettings({...settings, zone: e}));
+    const [localOutOfZoneDelay, setLocalOutOfZoneDelay, applyLocalOutOfZoneDelay] = useLocalVariable(settings.outOfZoneDelay, (e) => emitSettings({...settings, outOfZoneDelay: e}));

    useEffect(() => {
        if (!localZoneSettings || localZoneSettings.type != ZoneTypes.POLYGON) {
            setLocalZoneSettings(defaultZoneSettings.polygon);
        }
-    }, [localZoneSettings]);
+    }, [localZoneSettings, setLocalZoneSettings]);

    function getNewPolygonName() {
        const existingIds = new Set(localZoneSettings.polygons.map(zone => zone.id));
--- a/server/traque-front/app/admin/parameters/components/teamManager.jsx
+++ b/server/traque-front/app/admin/parameters/components/teamManager.jsx
@@ -1,35 +1,36 @@
 import { useState } from "react";
+import Image from "next/image";
 import { ReorderList } from '@/components/list';
-import useAdmin from '@/hook/useAdmin';
 import useLocalVariable from "@/hook/useLocalVariable";
 import { NumberInput } from "@/components/input";
 import { Section } from "@/components/section";
+import { useAdmin } from "@/context/adminContext";
+import { emitAddTeam, emitEliminateTeam, emitRemoveTeam, emitReorderTeam, emitReviveTeam, emitSettings } from "@/services/socket/emitters";

 function TeamManagerItem({ team }) {
-    const { captureTeam, removeTeam } = useAdmin();

    return (
        <div className='w-full flex flex-row items-center justify-between p-2 gap-3 bg-white'>
            <p className='text-xl font-bold'>{team.name}</p>
            <div className='flex flex-row items-center justify-between gap-3'>
                <p className='text-xl font-bold'>{String(team.id).padStart(6, '0').replace(/(\d{3})(\d{3})/, "$1 $2")}</p>
-                <img src={`/icons/heart/${team.captured ? "grey" : "pink"}.png`} className="w-8 h-8 cursor-pointer" onClick={() => captureTeam(team.id)} />
-                <img src="/icons/trash.png" className="w-8 h-8 cursor-pointer" onClick={() => removeTeam(team.id)} />
+                <Image src={`/icons/heart/${team.captured ? "grey" : "pink"}.png`} alt="heart" className="w-8 h-8 cursor-pointer" onClick={() => team.captured ? emitReviveTeam(team.id) : emitEliminateTeam(team.id)} />
+                <Image src="/icons/trash.png" alt="trash" className="w-8 h-8 cursor-pointer" onClick={() => emitRemoveTeam(team.id)} />
            </div>
        </div>
    );
 }

 export default function TeamManager() {
-    const { teams, addTeam, reorderTeams, settings, updateSettings } = useAdmin();
+    const { teams, settings } = useAdmin();
    const [teamName, setTeamName] = useState('');
-    const [localSendPositionDelay, setLocalSendPositionDelay, applyLocalSendPositionDelay] = useLocalVariable(settings.scanDelay, (e) => updateSettings({scanDelay: e}));
+    const [localSendPositionDelay, setLocalSendPositionDelay, applyLocalSendPositionDelay] = useLocalVariable(settings.scanDelay, (e) => emitSettings({...settings, scanDelay: e}));
    
    function handleTeamSubmit(e) {
        e.preventDefault();
        if (teamName !== "") {
-            addTeam(teamName);
-            setTeamName("")
+            emitAddTeam(teamName);
+            setTeamName("");
        }
    }

@@ -37,14 +38,14 @@ export default function TeamManager() {
        <Section title="Équipes" outerClassName="flex-1 min-h-0" innerClassName="flex flex-col items-center gap-3">
            <form className='w-full flex flex-row gap-3' onSubmit={handleTeamSubmit}>
                <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" />
+                    <input name="teamName" 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>
            <div className="w-full flex-1 min-h-0 ">
-                <ReorderList droppableId="team-manager" array={teams} setArray={(teams) => reorderTeams(teams.map(team => team.id))}>
+                <ReorderList droppableId="team-manager" array={teams} setArray={(teams) => emitReorderTeam(teams.map(team => team.id))}>
                    {(team) => (
                        <TeamManagerItem team={team}/>
                    )}
--- a/server/traque-front/app/admin/parameters/page.jsx
+++ b/server/traque-front/app/admin/parameters/page.jsx
@@ -2,8 +2,8 @@
 import { useState } from "react";
 import dynamic from "next/dynamic";
 import Link from "next/link";
-import { useAdminConnexion } from "@/context/adminConnexionContext";
-import Messages from "./components/messages";
+import Image from "next/image";
+import { useAuth } from "@/context/authContext";
 import TeamManager from './components/teamManager';
 import PlayingZoneSelector from "./components/playingZoneSelector";

@@ -13,13 +13,13 @@ const PlacementZoneSelector = dynamic(() => import('./components/placementZoneSe
 const Tabs = {
    PLACEMENT_ZONES: "placement_zones",
    PLAYING_ZONES: "playing_zones",
-}
+};

 function ParametersTitle() {
    return (
        <div className='w-full bg-custom-light-blue gap-5 p-5 flex flex-row shadow-2xl'>
            <Link href="/admin">
-                <img src="/icons/backarrow.png" className="w-8 h-8" title="Main page" />
+                <Image src="/icons/backarrow.png" alt="cogwheel" className="w-8 h-8" title="Main page" />
            </Link>
            <h2 className="text-3xl font-bold">Paramètres</h2>
        </div>
@@ -38,7 +38,7 @@ function TabButton({title, onClick, isSelected}) {
 }

 export default function ParametersPage() {
-    const { useProtect } = useAdminConnexion();
+    const { useProtect } = useAuth();
    const [currentTab, setCurrentTab] = useState(Tabs.PLACEMENT_ZONES);

    useProtect();
@@ -47,7 +47,6 @@ export default function ParametersPage() {
        <div className='w-full h-full p-3 flex flex-row gap-3'>
            <div className="h-full w-2/6 gap-3 flex flex-col">
                <ParametersTitle/>
-                <Messages/>
                <TeamManager/>
            </div>
            <div className="h-full flex-1 flex flex-col bg-white shadow-2xl">
--- a/server/traque-front/app/layout.js
+++ b/server/traque-front/app/layout.js
@@ -1,25 +0,0 @@
-import { Inter } from "next/font/google";
-import "./globals.css";
-import { PublicEnvScript } from 'next-runtime-env';
-import SocketProvider from "@/context/socketContext";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata = {
-    title: "La Traque",
-};
-
-export default function RootLayout({ children }) {
-    return (
-        <html lang="en">
-            <head>
-                <PublicEnvScript />
-            </head>
-            <body className={inter.className + " w-screen h-screen bg-gray-200"}>
-                <SocketProvider>
-                    {children}
-                </SocketProvider>
-            </body>
-        </html>
-    );
-}
--- a/server/traque-front/app/layout.jsx
+++ b/server/traque-front/app/layout.jsx
@@ -0,0 +1,43 @@
+import { Inter } from "next/font/google";
+import "./globals.css";
+import { PublicEnvScript } from 'next-runtime-env';
+import { AuthProvider } from "@/context/authContext";
+import { AdminProvider } from "@/context/adminContext";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useAuth } from "@/context/authContext";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+    title: "La Traque",
+};
+
+const NavigationManager = () => {
+    const router = useRouter();
+    const { isLoggedIn } = useAuth();
+
+    useEffect(() => {
+        router.replace(isLoggedIn ? "/admin" : "/login");
+    }, [router, isLoggedIn]);
+
+    return null;
+};
+
+export default function RootLayout({ children }) {
+    return (
+        <html lang="en">
+            <head>
+                <PublicEnvScript />
+            </head>
+            <body className={inter.className + " w-screen h-screen bg-gray-200"}>
+                <AuthProvider>
+                    <AdminProvider>
+                        {children}
+                        <NavigationManager/>
+                    </AdminProvider>
+                </AuthProvider>
+            </body>
+        </html>
+    );
+}
--- a/server/traque-front/app/admin/login/page.js
+++ b/server/traque-front/app/admin/login/page.js
@@ -1,9 +1,9 @@
 "use client";
 import { useState } from "react";
-import { useAdminConnexion } from '@/context/adminConnexionContext';
+import { useAuth } from '@/context/authContext';

 export default function AdminLoginPage() {
-    const {login, useProtect} = useAdminConnexion();
+    const {login, useProtect} = useAuth();
    const [value, setValue] = useState("");

    useProtect();
--- a/server/traque-front/context/adminConnexionContext.jsx
+++ b/server/traque-front/context/adminConnexionContext.jsx
@@ -1,25 +0,0 @@
-"use client";
-import { createContext, useContext,  useMemo } from "react";
-import { useSocket } from "./socketContext";
-import useSocketAuth from "@/hook/useSocketAuth";
-import usePasswordProtect from "@/hook/usePasswordProtect";
-
-const adminConnexionContext = createContext();
-
-export function AdminConnexionProvider({ children }) {
-    const { adminSocket } = useSocket();
-    const { login, loggedIn, loading } = useSocketAuth(adminSocket, "admin_password");
-    const useProtect = () => usePasswordProtect("/admin/login", "/admin", loading, loggedIn);
-
-    const value = useMemo(() => ({ login, loggedIn, loading, useProtect }), [loggedIn, loading]);
-
-    return (
-        <adminConnexionContext.Provider value={value}>
-            {children}
-        </adminConnexionContext.Provider>
-    );
-}
-
-export function useAdminConnexion() {
-    return useContext(adminConnexionContext);
-}
--- a/server/traque-front/context/adminContext.jsx
+++ b/server/traque-front/context/adminContext.jsx
@@ -1,36 +0,0 @@
-"use client";
-import { createContext, useContext, useMemo, useState } from "react";
-import { useSocket } from "./socketContext";
-import useSocketListener from "@/hook/useSocketListener";
-import { GameState } from "@/util/types";
-
-const adminContext = createContext();
-
-export function AdminProvider({ children }) {
-    const { adminSocket } = useSocket();
-    const [gameState, setGameState] = useState(GameState.SETUP);
-    const [teams, setTeams] = useState([]);
-    const [zones, setZones] = useState(null);
-    const [settings, setSettings] = useState(null);
-    
-    useSocketListener(adminSocket, "update-full", ({ gameState, teams, zones, settings }) => {
-        setGameState(gameState);
-        setTeams(teams);
-        setZones(zones);
-        setSettings(settings);
-    });
-
-    const value = useMemo(() => (
-        { gameState, teams, zones, settings }
-    ), [gameState, teams, zones, settings]);
-
-    return (
-        <adminContext.Provider value={value}>
-            {children}
-        </adminContext.Provider>
-    );
-}
-
-export function useAdminContext() {
-    return useContext(adminContext);
-}
--- a/server/traque-front/context/socketContext.jsx
+++ b/server/traque-front/context/socketContext.jsx
@@ -1,26 +0,0 @@
-"use client";
-import { createContext, useContext, useMemo } from "react";
-import { env } from 'next-runtime-env';
-import { io } from 'socket.io-client';
-
-const NEXT_PUBLIC_SOCKET_HOST = env("NEXT_PUBLIC_SOCKET_HOST");
-const SOCKET_URL = (NEXT_PUBLIC_SOCKET_HOST == "localhost" ? "ws://" : "wss://") + NEXT_PUBLIC_SOCKET_HOST;
-const ADMIN_SOCKET_URL = SOCKET_URL + "/admin";
-
-export const adminSocket = io(ADMIN_SOCKET_URL, {
-    path: "/back/socket.io",
-});
-
-export const SocketContext = createContext();
-
-export default function SocketProvider({ children }) {
-    const value = useMemo(() => ({ adminSocket }), [adminSocket]);
-    
-    return (
-        <SocketContext.Provider value={value}>{children}</SocketContext.Provider>
-    );
-}
-
-export function useSocket() {
-    return useContext(SocketContext);
-}
--- a/server/traque-front/eslint.config.mjs
+++ b/server/traque-front/eslint.config.mjs
@@ -0,0 +1,48 @@
+import js from "@eslint/js";
+import nextPlugin from "@next/eslint-plugin-next";
+import reactPlugin from "eslint-plugin-react";
+import reactHooksPlugin from "eslint-plugin-react-hooks";
+import globals from "globals";
+
+export default [
+  {
+    ignores: ["node_modules/*", "dist/*", ".next/*"],
+  },
+  js.configs.recommended,
+  {
+    files: ["**/*.{js,jsx,mjs,ts,tsx}"],
+    plugins: {
+      "@next/next": nextPlugin,
+      "react": reactPlugin,
+      "react-hooks": reactHooksPlugin,
+    },
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+    rules: {
+      ...nextPlugin.configs.recommended.rules,
+      ...nextPlugin.configs["core-web-vitals"].rules,
+      ...reactPlugin.configs.recommended.rules,
+      ...reactHooksPlugin.configs.recommended.rules,
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
+      "semi": ["error", "always"],
+      "no-unused-vars": "warn",
+    },
+  },
+];
--- a/server/traque-front/hook/useAdmin.jsx
+++ b/server/traque-front/hook/useAdmin.jsx
@@ -1,43 +0,0 @@
-"use client";
-import { useAdminContext } from "@/context/adminContext";
-import { useSocket } from "@/context/socketContext";
-
-export default function useAdmin() {
-    const adminContext = useAdminContext();
-    const { teams } = adminContext;
-    const { adminSocket } = useSocket();
-
-    function getTeam(teamId) {
-        return teams.find(team => team.id === teamId);
-    }
-
-    function addTeam(teamName) {
-        adminSocket.emit("add-team", teamName);
-    }
-
-    function removeTeam(teamId) {
-        adminSocket.emit("remove-team", teamId);
-    }
-
-    function reorderTeams(newOrder) {
-        adminSocket.emit("reorder-teams", newOrder);
-    }
-
-    function captureTeam(teamId) {
-        adminSocket.emit("capture_team", teamId);
-    }
-
-    function placementTeam(teamId, placementZone) {
-        adminSocket.emit("placement_team", teamId, placementZone);
-    }
-
-    function changeState(state) {
-        adminSocket.emit("state", state);
-    }
-
-    function updateSettings(settings) {
-        adminSocket.emit("settings", settings);
-    }
-
-    return { ...adminContext, getTeam, reorderTeams, addTeam, removeTeam, captureTeam, placementTeam, changeState, updateSettings };
-}
--- a/server/traque-front/hook/usePasswordProtect.jsx
+++ b/server/traque-front/hook/usePasswordProtect.jsx
@@ -1,16 +0,0 @@
-"use client";
-import { redirect, usePathname } from "next/navigation";
-import { useEffect } from "react";
-
-export default function usePasswordProtect(loginPath, redirectPath, loading, loggedIn) {
-    const path = usePathname();
-    
-    useEffect(() => {
-        if (!loggedIn && !loading && path !== loginPath) {
-            redirect(loginPath);
-        }
-        if(loggedIn && !loading && path === loginPath) {
-            redirect(redirectPath);
-        }
-    }, [loggedIn, loading, path]);
-}
--- a/server/traque-front/hook/useSocketAuth.jsx
+++ b/server/traque-front/hook/useSocketAuth.jsx
@@ -1,52 +0,0 @@
-"use client";
-import { useEffect, useState } from 'react';
-import useSocketListener from './useSocketListener';
-import useLocalStorage from './useLocalStorage';
-
-const LOGIN_MESSAGE = "login";
-const LOGOUT_MESSAGE = "logout";
-const LOGIN_RESPONSE_MESSAGE = "login_response";
-
-export default function useSocketAuth(socket, passwordName) {
-    const [loggedIn, setLoggedIn] = useState(false);
-    const [loading, setLoading] = useState(true);
-    const [waitingForResponse, setWaitingForResponse] = useState(true);
-    const [savedPassword, setSavedPassword, savedPasswordLoading] = useLocalStorage(passwordName, null);
-    
-    useEffect(() => {
-        if (savedPassword && !loggedIn) {
-            console.log("Try to log with :", savedPassword);
-            socket.emit(LOGIN_MESSAGE, savedPassword);
-        }
-    }, [savedPassword]);
-
-    function login(password) {
-        setSavedPassword(password)
-    }
-
-    function logout() {
-        setSavedPassword(null);
-        setLoggedIn(false);
-        socket.emit(LOGOUT_MESSAGE)
-    }
-
-    useSocketListener(socket, LOGIN_RESPONSE_MESSAGE, (loginResponse) => {
-        setWaitingForResponse(false);
-        setLoggedIn(loginResponse);
-        console.log(loginResponse ? "Logged in" : "Not logged in");
-    });
-
-    useEffect(() => {
-        //There is a password saved and we recieved a login response
-        if(savedPassword && !waitingForResponse && !savedPasswordLoading) {
-            setLoading(false);
-        }
-        //We tried to load the saved password but it is not there
-        else if (savedPassword == null && !savedPasswordLoading) {
-            setLoading(false);
-        }
-    }, [waitingForResponse, savedPasswordLoading, savedPassword]);
-
-
-    return {login, logout, password: savedPassword, loggedIn, loading};
-}
--- a/server/traque-front/hook/useSocketListener.jsx
+++ b/server/traque-front/hook/useSocketListener.jsx
@@ -1,9 +0,0 @@
-"use client";
-import { useEffect } from "react";
-
-export default function useSocketListener(socket, event, callback) {
-    useEffect(() => {
-        socket.on(event,callback);
-        return () => socket.off(event, callback);
-    }, []);
-}
--- a/server/traque-front/jsconfig.json
+++ b/server/traque-front/jsconfig.json
@@ -1,8 +1,18 @@
 {
  "compilerOptions": {
-    "paths": {
-      "@/*": ["./*"]
-    },
-    "lib": ["es2015"]
-  }
+    "baseUrl": ".",
+    "paths": { "@/*": ["src/*"] },
+    "target": "es2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "checkJs": true,
+    "jsx": "preserve",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "allowJs": true,
+    "noEmit": true,
+    "incremental": true
+  },
+  "exclude": ["node_modules", ".next"],
 }
--- a/server/traque-front/next.config.mjs
+++ b/server/traque-front/next.config.mjs
@@ -7,10 +7,10 @@ const nextConfig = {
    return [
      {
        source: '/',
-        destination: '/admin',
+        destination: '/login',
        permanent: false,
      },
-    ]
+    ];
  },
  
 };
--- a/server/traque-front/package-lock.json
+++ b/server/traque-front/package-lock.json
--- a/server/traque-front/package.json
+++ b/server/traque-front/package.json
@@ -10,21 +10,28 @@
  },
  "dependencies": {
    "@hello-pangea/dnd": "^16.6.0",
+    "globals": "^17.4.0",
    "leaflet": "^1.9.4",
    "leaflet-defaulticon-compatibility": "^0.1.2",
    "leaflet-polylinedecorator": "^1.6.0",
-    "next": "^14.2.9",
+    "next": "^15.2.0",
    "next-runtime-env": "^3.2.2",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
    "react-leaflet": "^4.2.1",
    "socket.io-client": "^4.7.5"
  },
  "devDependencies": {
+    "@next/eslint-plugin-next": "^15.2.0",
    "autoprefixer": "^10.0.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.1.4",
+    "eslint": "^9.39.3",
+    "eslint-config-next": "^15.2.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
    "postcss": "^8",
    "tailwindcss": "^3.3.0"
+  },
+  "overrides": {
+    "next": "$next"
  }
 }
--- a/server/traque-front/src/components/Show.jsx
+++ b/server/traque-front/src/components/Show.jsx
@@ -0,0 +1,3 @@
+export const Show = ({ when, children }) => {
+    return when ? children : null;
+};
--- a/server/traque-front/src/components/input.jsx
+++ b/server/traque-front/src/components/input.jsx
@@ -5,5 +5,5 @@ export function NumberInput({onChange, ...props}) {

    return (
        <input className="w-12 h-10 text-center rounded ring-1 ring-inset ring-black placeholder:text-gray-400" onChange={(e) => onChange(customStringToInt(e.target.value))} {...props} />
-    )
+    );
 }
--- a/server/traque-front/src/components/layer.jsx
+++ b/server/traque-front/src/components/layer.jsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { Marker, Tooltip, CircleMarker, Circle, Polygon, useMap } from "react-leaflet";
+import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 import 'leaflet-polylinedecorator';

@@ -35,16 +36,13 @@ export function Label({position, label = "", color = "black", display = true}) {
 }

 export function Tag({text = "", display = true}) {
-    const offset = [0.5, -15];
-    const opacity = 1;
-
    return (
-        display && <Tooltip permanent direction="top" offset={offset} opacity={opacity} className="custom-tooltip">{text}</Tooltip>
+        display && <Tooltip permanent direction="top" offset={[0.5, -15]} opacity={1} className="custom-tooltip">{text}</Tooltip>
    );
 }

-export function CircleZone({circle, color = "black", display = true, children}) {
-    const opacity = '0.1';
+export function CircleZone({circle, color = "black", display = true, children = null}) {
+    const opacity = 0.1;
    const border = 3;

    return (
@@ -55,8 +53,8 @@ export function CircleZone({circle, color = "black", display = true, children})
    );
 }

-export function PolygonZone({polygon, color = "black", display = true, children}) {
-    const opacity = '0.1';
+export function PolygonZone({polygon, color = "black", display = true, children = null}) {
+    const opacity = 0.1;
    const border = 3;

    return (
@@ -67,7 +65,7 @@ export function PolygonZone({polygon, color = "black", display = true, children}
    );
 }

-export function Position({position, color = "blue", onClick = () => {}, display = true, children}) {
+export function Position({position, color = "blue", onClick = () => {}, display = true, children = null}) {

    const positionIcon = new L.Icon({
        iconUrl: `/icons/marker/${color}.png`,
@@ -119,15 +117,15 @@ export function Arrow({ pos1, pos2, color = 'black', display = true }) {
            const unitY = dy / distance;
            
            // Calculate new start and end points in screen coordinates
-            const newStartPoint = {
-                x: point1.x + (unitX * insetPixels),
-                y: point1.y + (unitY * insetPixels)
-            };
+            const newStartPoint = L.point(
+                point1.x + (unitX * insetPixels),
+                point1.y + (unitY * insetPixels)
+            );
            
-            const newEndPoint = {
-                x: point2.x - (unitX * insetPixels),
-                y: point2.y - (unitY * insetPixels)
-            };
+            const newEndPoint = L.point(
+                point2.x - (unitX * insetPixels),
+                point2.y - (unitY * insetPixels)
+            );
            
            // Convert back to lat/lng
            const newStartLatLng = map.containerPointToLatLng(newStartPoint);
@@ -141,8 +139,10 @@ export function Arrow({ pos1, pos2, color = 'black', display = true }) {
        // Update when map moves or zooms
        map.on('zoom move', updateInsetLine);

-        return () => map.off('zoom move', updateInsetLine);
-    }, [pos1, pos2]);
+        return () => {
+            map.off('zoom move', updateInsetLine);
+        };
+    }, [map, pos1, pos2]);

    useEffect(() => {
        if (!display || !insetPositions) return;
@@ -175,7 +175,7 @@ export function Arrow({ pos1, pos2, color = 'black', display = true }) {
            map.removeLayer(polyline);
            map.removeLayer(decorator);
        };
-    }, [display, insetPositions])
+    }, [color, display, insetPositions, map]);

    return null;
 }
--- a/server/traque-front/src/components/list.jsx
+++ b/server/traque-front/src/components/list.jsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';

 export function List({array, selectedId, onSelected, children}) {
-    const canSelect = selectedId !== undefined
+    const canSelect = selectedId !== undefined;
    const cursor = () => canSelect ? " cursor-pointer" : "";
    const outline = (id) => canSelect && id === selectedId ? " outline outline-4 outline-black" : "";

@@ -27,7 +27,7 @@ export function ReorderList({droppableId, array, setArray, children}) {

    useEffect(() => {
        setLocalArray(array);
-    }, [array])
+    }, [array]);

    function reorder(list, startIndex, endIndex) {
        const result = Array.from(list);
--- a/server/traque-front/src/components/map.jsx
+++ b/server/traque-front/src/components/map.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { MapContainer, TileLayer, useMap } from "react-leaflet";
 import "leaflet/dist/leaflet.css";
-import { mapLocations, mapZooms, mapStyles } from "@/util/configurations";
+import { mapLocations, mapZooms, mapStyles } from "@/config/configurations";

 export function MapPan({center, zoom, animate=false}) {
    const map = useMap();
@@ -10,12 +10,13 @@ export function MapPan({center, zoom, animate=false}) {
        if (center && zoom) {
            map.flyTo(center, zoom, { animate: animate });
        }
-    }, [center, zoom]);
+    }, [animate, center, map, zoom]);

    return null;
 }

-export function MapEventListener({ onLeftClick, onRightClick, onMouseMove, onDragStart, onWheel }) {
+// eslint-disable-next-line no-unused-vars
+export function MapEventListener({ onLeftClick = (e) => {}, onRightClick = (e) => {}, onMouseMove = (e) => {}, onDragStart = (e) => {}, onWheel = (e) => {} }) {
    const map = useMap();
    // TODO use useMapEvents instead of this + detect when zoom

@@ -53,7 +54,7 @@ export function MapEventListener({ onLeftClick, onRightClick, onMouseMove, onDra
            map.off('mousemove', handleMouseMove);
            map.off('mouseup', handleMouseUp);
        };
-    }, [onLeftClick, onRightClick]);
+    }, [map, onLeftClick, onRightClick]);

    // Handle the right click
    useEffect(() => {
@@ -69,8 +70,8 @@ export function MapEventListener({ onLeftClick, onRightClick, onMouseMove, onDra

        return () => {
            map.off('mousedown', handleMouseDown);
-        }
-    }, [onRightClick]);
+        };
+    }, [map, onRightClick]);

    // Handle the mouse move
    useEffect(() => {
@@ -80,8 +81,8 @@ export function MapEventListener({ onLeftClick, onRightClick, onMouseMove, onDra

        return () => {
            map.off('mousemove', onMouseMove);
-        }
-    }, [onMouseMove]);
+        };
+    }, [map, onMouseMove]);

    // Handle the drag start
    useEffect(() => {
@@ -91,8 +92,8 @@ export function MapEventListener({ onLeftClick, onRightClick, onMouseMove, onDra

        return () => {
            map.off('dragstart', onDragStart);
-        }
-    }, [onDragStart]);
+        };
+    }, [map, onDragStart]);

    useEffect(() => {
        if (!onWheel) return;
@@ -102,8 +103,8 @@ export function MapEventListener({ onLeftClick, onRightClick, onMouseMove, onDra

        return () => {
            container.removeEventListener('wheel', onWheel);
-        }
-    }, [onWheel]);
+        };
+    }, [map, onWheel]);
    
    // Prevent right click context menu
    useEffect(() => {
@@ -111,7 +112,7 @@ export function MapEventListener({ onLeftClick, onRightClick, onMouseMove, onDra
        const preventContextMenu = (e) => e.preventDefault();
        container.addEventListener('contextmenu', preventContextMenu);
        return () => container.removeEventListener('contextmenu', preventContextMenu);
-    }, []);
+    }, [map]);

    return null;
 }
@@ -131,7 +132,7 @@ function MapResizeWatcher() {
    return null;
 }

-export function CustomMapContainer({mapStyle, children}) {
+export function CustomMapContainer({mapStyle = mapStyles.default, children = null}) {
    const [location, setLocation] = useState(null);

    useEffect(() => {
@@ -154,11 +155,12 @@ export function CustomMapContainer({mapStyle, children}) {
    }, []);

    return (
+        // @ts-ignore
        <MapContainer className='w-full h-full' center={mapLocations.paris} zoom={mapZooms.low} scrollWheelZoom={true}>
-            <TileLayer url={(mapStyle || mapStyles.default).url} attribution={(mapStyle || mapStyles.default).attribution}/>
+            <TileLayer url={mapStyle.url} attribution={mapStyle.attribution}/>
            <MapPan center={location} zoom={mapZooms.high}/>
            <MapResizeWatcher/>
            {children}
        </MapContainer>
-    )
+    );
 }
--- a/server/traque-front/src/components/section.jsx
+++ b/server/traque-front/src/components/section.jsx
@@ -1,4 +1,4 @@
-export function Section({title, outerClassName, innerClassName, children}) {
+export function Section({ title = null, outerClassName = "", innerClassName = "", children = null }) {
    return (
        <div className={outerClassName}>
            <div className='w-full h-full flex flex-col shadow-2xl'>
--- a/server/traque-front/src/config/configurations.js
+++ b/server/traque-front/src/config/configurations.js
@@ -2,12 +2,12 @@ import { ZoneTypes, Colors } from "./types";

 export const mapLocations = {
    paris: [48.86, 2.33]
-}
+};

 export const mapZooms = {
    low: 4,
    high: 15,
-}
+};

 export const mapStyles = {
    default: {
@@ -28,12 +28,12 @@ export const mapStyles = {
        placementZoneColor: "#0FF",
        playerColor: "blue"
    },
-}
+};

 export const defaultZoneSettings = {
    circle: {type: ZoneTypes.CIRCLE, min: null, max: null, reductionCount: 4, duration: 10},
    polygon: {type: ZoneTypes.POLYGON, polygons: []}
-}
+};

 export const teamStatus = {
    default:    { label: "Indisponible",    color: Colors.black  },
@@ -45,4 +45,4 @@ export const teamStatus = {
    waiting:    { label: "En attente",      color: Colors.grey   },
    victory:    { label: "Victoire",        color: Colors.green  },
    defeat:     { label: "Défaite",         color: Colors.red    },
-}
+};
--- a/server/traque-front/src/config/types.js
+++ b/server/traque-front/src/config/types.js
@@ -4,16 +4,16 @@ export const Colors = {
    green: "#19e119",
    red: "#e11919",
    orange: "#fa6400"
-}
+};

 export const GameState = {
    SETUP: "default",
    PLACEMENT: "placement",
    PLAYING: "playing",
    FINISHED: "finished"
-}
+};

 export const ZoneTypes = {
    CIRCLE: "circle",
    POLYGON: "polygon"
-}
+};
--- a/server/traque-front/src/context/adminContext.jsx
+++ b/server/traque-front/src/context/adminContext.jsx
@@ -0,0 +1,47 @@
+"use client";
+import { createContext, useContext, useMemo, useState, useEffect, useCallback } from "react";
+import { GameState } from "@/config/types";
+import { socket } from "../services/socket/connection";
+
+const AdminContext = createContext(null);
+
+const useOnEvent = (event, callback) => {
+    useEffect(() => {
+        socket.on(event, callback);
+        return () => {
+            socket.off(event, callback);
+        };
+    }, [event, callback]);
+};
+
+export function AdminProvider({ children }) {
+    const [gameState, setGameState] = useState(GameState.SETUP);
+    const [teams, setTeams] = useState([]);
+    const [zones, setZones] = useState(null);
+    const [settings, setSettings] = useState(null);
+    
+    useOnEvent("update-full", ({ gameState, teams, zones, settings }) => {
+        setGameState(gameState);
+        setTeams(teams);
+        setZones(zones);
+        setSettings(settings);
+    });
+
+    const getTeam = useCallback((teamId) => {
+        return teams.find(team => team.id === teamId);
+    }, [teams]);
+
+    const value = useMemo(() => (
+        { gameState, teams, zones, settings, getTeam }
+    ), [gameState, teams, zones, settings, getTeam]);
+
+    return (
+        <AdminContext.Provider value={value}>
+            {children}
+        </AdminContext.Provider>
+    );
+}
+
+export function useAdmin() {
+    return useContext(AdminContext);
+}
--- a/server/traque-front/src/context/authContext.jsx
+++ b/server/traque-front/src/context/authContext.jsx
@@ -0,0 +1,50 @@
+"use client";
+import { createContext, useContext, useState, useMemo, useCallback } from "react";
+import useLocalStorage from "@/hook/useLocalStorage";
+import { emitLogin, emitLogout } from '@/services/socket/emitters';
+
+const AuthContext = createContext(null);
+
+export function AuthProvider({ children }) {
+    const [isLoggedIn, setIsLoggedIn] = useState(false);
+    // eslint-disable-next-line no-unused-vars
+    const [savedPassword, setSavedPassword] = useLocalStorage("admin_password", null);
+
+    const login = useCallback(async (password) => {
+        if (isLoggedIn) return;
+        if (await emitLogin(password)) {
+            setIsLoggedIn(true); 
+            setSavedPassword(password);
+            return true;
+        } else {
+            return false;
+        }
+    }, [isLoggedIn, setSavedPassword]);
+
+    const logout = useCallback(() => {
+        if (!isLoggedIn) return;
+        setSavedPassword(null);
+        setIsLoggedIn(false);
+        emitLogout();
+    }, [isLoggedIn, setSavedPassword]);
+        
+    /*
+    useEffect(() => {
+        if (!isLoggedIn && savedPassword) {
+            login(savedPassword)
+        }
+    }, [savedPassword]);
+    */
+
+    const value = useMemo(() => ({ isLoggedIn, login, logout }), [isLoggedIn, login, logout]);
+
+    return (
+        <AuthContext.Provider value={value}>
+            {children}
+        </AuthContext.Provider>
+    );
+}
+
+export function useAuth() {
+    return useContext(AuthContext);
+}
--- a/server/traque-front/src/hook/useCircleDraw.jsx
+++ b/server/traque-front/src/hook/useCircleDraw.jsx
@@ -1,12 +1,14 @@
 "use client";
-import { useEffect, useState } from "react";
+import { useState } from "react";

 export default function useMapCircleDraw(circle, setCircle) {
    const [drawingCircle, setDrawingCircle] = useState(null);
+    const [prevCircle, setPrevCircle] = useState(circle);

-    useEffect(() => {
+    if (circle !== prevCircle) {
+        setPrevCircle(circle);
        setDrawingCircle(null);
-    }, [circle]);
+    }

    function handleLeftClick(e) {
        if (drawingCircle) {
--- a/server/traque-front/src/hook/useLocalStorage.jsx
+++ b/server/traque-front/src/hook/useLocalStorage.jsx
@@ -1,19 +1,15 @@
 "use client";
-import { useEffect, useState } from "react";
+import { useState } from "react";

 export default function useLocalStorage(key, initialValue) {
    const [storedValue, setStoredValue] = useState(initialValue);
-    const [loading, setLoading] = useState(true);

-    useEffect(() => {
-        try {
-            const item = window.localStorage.getItem(key);
-            setStoredValue(item ? JSON.parse(item) : initialValue);
-        } catch (error) {
-            console.log(error);
-        }
-        setLoading(false);
-    }, []);
+    try {
+        const item = window.localStorage.getItem(key);
+        setStoredValue(item ? JSON.parse(item) : initialValue);
+    } catch (error) {
+        console.log(error);
+    }

    const setValue = value => {
        try {
@@ -23,7 +19,7 @@ export default function useLocalStorage(key, initialValue) {
        } catch (error) {
            console.log(error);
        }
-    }
+    };

-    return [storedValue, setValue, loading];
+    return [storedValue, setValue];
 }
--- a/server/traque-front/src/hook/useLocalVariable.jsx
+++ b/server/traque-front/src/hook/useLocalVariable.jsx
@@ -1,3 +1,4 @@
+"use client";
 import { useState, useEffect } from "react";

 export default function useLocalVariable(variable, setVariable) {
--- a/server/traque-front/src/hook/useMultipleCircleDraw.jsx
+++ b/server/traque-front/src/hook/useMultipleCircleDraw.jsx
--- a/server/traque-front/src/hook/usePolygonDraw.jsx
+++ b/server/traque-front/src/hook/usePolygonDraw.jsx
@@ -1,5 +1,5 @@
 "use client";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useMap } from "react-leaflet";

 export default function useMapPolygonDraw(polygons, addPolygon, removePolygon) {
@@ -8,11 +8,13 @@ export default function useMapPolygonDraw(polygons, addPolygon, removePolygon) {
    const nodeHighlightDistance = 30; // px
    const [currentPolygon, setCurrentPolygon] = useState([]);
    const [highlightNodes, setHighlightNodes] = useState([]);
+    const [prevPolygons, setPrevPolygons] = useState([]);

-    useEffect(() => {
+    if (polygons != prevPolygons) {
+        setPrevPolygons(polygons);
        setCurrentPolygon([]);
        setHighlightNodes([]);
-    }, [polygons])
+    }

    function latlngEqual(latlng1, latlng2, epsilon = 1e-9) {
        return Math.abs(latlng1.lat - latlng2.lat) < epsilon && Math.abs(latlng1.lng - latlng2.lng) < epsilon;
@@ -125,7 +127,7 @@ export default function useMapPolygonDraw(polygons, addPolygon, removePolygon) {
            return e.latlng;
        // Else return the closest close node
        } else {
-            return closeNodes.reduce( (min, current) => { return current[0] < min[0] ? current : min } )[1];
+            return closeNodes.reduce((min, current) => current[0] < min[0] ? current : min)[1];
        }
    }

--- a/server/traque-front/src/services/socket/connection.js
+++ b/server/traque-front/src/services/socket/connection.js
@@ -0,0 +1,11 @@
+// Socket
+import { env } from "next-runtime-env";
+import { io } from "socket.io-client";
+
+const NEXT_PUBLIC_SOCKET_HOST = env("NEXT_PUBLIC_SOCKET_HOST");
+const SOCKET_URL = (NEXT_PUBLIC_SOCKET_HOST == "localhost" ? "ws://" : "wss://") + NEXT_PUBLIC_SOCKET_HOST;
+const ADMIN_SOCKET_URL = SOCKET_URL + "/admin";
+
+export const socket = io(ADMIN_SOCKET_URL, {
+    path: "/back/socket.io",
+});
--- a/server/traque-front/src/services/socket/emitters.js
+++ b/server/traque-front/src/services/socket/emitters.js
@@ -0,0 +1,73 @@
+// Services
+import { socket } from "@/services/socket/connection";
+
+const customEmit = (event, ...args) => {
+    if (!socket?.connected) return false;
+    console.log("Emit", event);
+    socket.emit(event, ...args);
+    return true;
+};
+
+const customEmitCallback = (event, ...args) => {
+    return new Promise((resolve, reject) => {
+        if (!socket?.connected) return reject(new Error("Socket not connected"));
+
+        console.log("Emit", event);
+
+        const timeout = setTimeout(() => {
+            console.warn("Server timeout");
+            reject(new Error("Timeout"));
+        }, 3000);
+    
+        socket.emit(event, ...args, (response) => {
+            clearTimeout(timeout);
+            console.log("Received : ", response);
+            resolve(response);
+        });
+    });
+};
+
+
+// Authentication
+
+export const emitLogin = (password) => {
+    return customEmitCallback("login", password);
+};
+
+export const emitLogout = () => {
+    return customEmit("logout");
+};
+
+
+// Game
+
+export const emitState = (state) => {
+    return customEmit("state", state);
+};
+
+export const emitSettings = (settings) => {
+    return customEmit("settings", settings);
+};
+
+
+// Teams
+
+export const emitAddTeam = (teamName) => {
+    return customEmit("add-team", teamName);
+};
+
+export const emitRemoveTeam = (teamId) => {
+    return customEmit("remove-team", teamId);
+};
+
+export const emitReorderTeam = (newTeamsOrder) => {
+    return customEmit("reorder-team", newTeamsOrder);
+};
+
+export const emitEliminateTeam = (teamId) => {
+    return customEmit("eliminate-team", teamId);
+};
+
+export const emitReviveTeam = (teamId) => {
+    return customEmit("revive-team", teamId);
+};
--- a/server/traque-front/src/util/functions.js
+++ b/server/traque-front/src/util/functions.js
@@ -1,5 +1,5 @@
-import { GameState } from './types';
-import { teamStatus } from './configurations';
+import { GameState } from '../config/types';
+import { teamStatus } from '../config/configurations';

 export function getStatus(team, gamestate) {
    if (!team) return null;