Server heavy refactoring 4 (not functionnal)

2026-04-11 00:30:19 +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();