Server heavy refactoring 4 (not functionnal)

mobile/traque-app/.eslintrc.js

@@ -1,57 +0,0 @@
-module.exports = {
-    "env": {
-        "es2021": true,
-        "node": true,
-        "react-native/react-native": true
-    },
-    "extends": [
-        "eslint:recommended",
-        "plugin:react/recommended",
-        "plugin:react-hooks/recommended",
-        "plugin:import/recommended"
-    ],
-    "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true
-        },
-        "ecmaVersion": "latest",
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react",
-        "react-native"
-    ],
-    "ignorePatterns": [
-        "android/",
-        ".expo/",
-        "node_modules/",
-        "src/assets/",
-    ],
-    "rules": {
-        "react/react-in-jsx-scope": "off",
-        "react/prop-types": "off",
-        "no-unused-vars": "warn",
-        "semi": ["error", "always"],
-        "react-native/no-unused-styles": "warn",
-        "react-native/no-single-element-style-arrays": "warn",
-        'import/extensions': 'off',
-        "import/no-unresolved": "off",
-        "import/named": "off",
-        "import/namespace": "off",
-        "import/default": "off",
-        "import/no-named-as-default-member": "off"
-    },
-    "settings": {
-        "react": {
-            "version": "detect"
-        },
-        "import/ignore": [
-            "react-native"
-        ],
-        'import/resolver': {
-            "node": {
-                "extensions": ['.js', '.jsx', '.ts', '.tsx'],
-            }
-        },
-    }
-};

mobile/traque-app/app/(game)/_layout.jsx

@@ -9,13 +9,12 @@ import { useTeam } from '@/contexts/teamContext';
 // Components
 import { IconButton } from '@/components/common/IconButton';
 // Constants
-import { COLORS } from '@/constants';
+import { COLORS } from '@/config';
 
 const GameLayout = () => {
     const { t, i18n } = useTranslation();
     const { logout } = useAuth();
-    const { teamInfos } = useTeam();
+    const { teamName } = useTeam();
-    const { name } = teamInfos;
 
     const toggleLanguage = () => {
         i18n.changeLanguage(i18n.language === 'fr' ? 'en' : 'fr');
@@ -31,13 +30,11 @@ const GameLayout = () => {
         }
     };
 
-    formatText("les minions du bds qui gagne");
-
     return (
         <View style={styles.globalContainer}>
             <View style={styles.headerContainer}>
                 <IconButton style={styles.logoutIcon} source={require('@/assets/images/logout.png')} onPress={logout} />
-                <Text style={styles.name} numberOfLines={1} adjustsFontSizeToFit>{formatText(name, 22)}</Text>
+                <Text style={styles.name} numberOfLines={1} adjustsFontSizeToFit>{formatText(teamName, 22)}</Text>
                 <IconButton style={styles.traductionIcon} source={require('@/assets/images/language.png')} onPress={toggleLanguage} />
             </View>
             <Slot/>

mobile/traque-app/app/(game)/end.jsx

@@ -2,12 +2,11 @@
 import { Text, StyleSheet, ScrollView } from 'react-native';
 import { useTranslation } from 'react-i18next';
 // Components
-import { TeamStats } from '@/components/game/TeamStats';
 import { Show } from '@/components/common/Show';
 // Hook
 import { useUserState } from '@/hooks/useUserState';
 // Constants
-import { USER_STATE } from '@/constants';
+import { USER_STATE } from '@/config';
 
 /*
 const Leaderboard = ({ teams }) => {
@@ -91,7 +90,6 @@ const End = () => {
                 <Text style={styles.title}>{t("end.title_win")}</Text>
             </Show>
             <Text style={styles.subtitle}>{t("end.paragraph")}</Text>
-            <TeamStats/>
         </ScrollView>
     );
 };

mobile/traque-app/app/(game)/play.jsx

@@ -17,14 +17,14 @@ import { useTeam } from '@/contexts/teamContext';
 // Hooks
 import { useUserState } from '@/hooks/useUserState';
 // Services
-import { emitSendPosition } from '@/services/socket/emitters';
+import { emitLocation } from '@/services/socket/emitters';
 // Constants
-import { USER_STATE } from '@/constants';
+import { USER_STATE } from '@/config';
 
 const Play = () => {
     const { t } = useTranslation();
-    const { teamInfos, nextZoneDate } = useTeam();
+    const { teamStateData } = useTeam();
-    const { locationSendDeadline, hasHandicap, enemyLocation, lastSentLocation } = teamInfos;
+    const { zoneTransitionDate, scanDate, hasHandicap, scanLocation, targetScanLocation } = teamStateData;
     const userState = useUserState();
     const [bottomContainerHeight, setBottomContainerHeight] = useState(0);
 
@@ -35,8 +35,8 @@ const Play = () => {
             </Show>
             <Show when={userState == USER_STATE.PLAYING}>
                 <View style={styles.timerContainer}>
-                    <TimerMMSS style={styles.timer} title={t("play.info.zone_reduction_label")} date={nextZoneDate} />
+                    <TimerMMSS style={styles.timer} title={t("play.info.zone_reduction_label")} date={zoneTransitionDate} />
-                    <TimerMMSS style={styles.timer} title={t("play.info.send_position_label")} date={locationSendDeadline} />
+                    <TimerMMSS style={styles.timer} title={t("play.info.send_position_label")} date={scanDate} />
                 </View>
             </Show>
             <View style={styles.mapContainer} onLayout={(event) => setBottomContainerHeight(event.nativeEvent.layout.height)}>
@@ -48,13 +48,13 @@ const Play = () => {
                         <GameZone/>
                     </Show>
                     <Show when={userState == USER_STATE.PLAYING && !hasHandicap}>
-                        <PositionMarker position={lastSentLocation} color={"grey"} onPress={() => Alert.alert(t("play.map.previous_marker_title"), t("play.map.previous_marker_description"))} />
+                        <PositionMarker position={scanLocation} color={"grey"} onPress={() => Alert.alert(t("play.map.previous_marker_title"), t("play.map.previous_marker_description"))} />
-                        <PositionMarker position={enemyLocation} color={"red"} onPress={() => Alert.alert(t("play.map.enemy_marker_title"), t("play.map.enemy_marker_description"))} />
+                        <PositionMarker position={targetScanLocation} color={"red"} onPress={() => Alert.alert(t("play.map.enemy_marker_title"), t("play.map.enemy_marker_description"))} />
                     </Show>
                 </Map>
                 <LinearGradient colors={['rgba(0,0,0,0.3)', 'rgba(0,0,0,0)']} style={styles.gradient}/>
                 <Show when={userState == USER_STATE.PLAYING && !hasHandicap}>
-                    <IconButton style={styles.updatePosition} source={require("@/assets/images/update_position.png")} onPress={emitSendPosition} />
+                    <IconButton style={styles.updatePosition} source={require("@/assets/images/update_position.png")} onPress={emitLocation} />
                 </Show>
                 <Toasts/>
             </View>

mobile/traque-app/app/_layout.jsx

@@ -11,7 +11,7 @@ import { useUserState } from '@/hooks/useUserState';
 // Services
 import { startLocationTracking , stopLocationTracking } from '@/services/tasks/backgroundLocation';
 // Constants
-import { USER_STATE, COLORS } from '@/constants';
+import { USER_STATE, COLORS } from '@/config';
 // Traduction
 import '@/i18n/config';
 

mobile/traque-app/eslint.config.mjs

@@ -0,0 +1,44 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactPlugin from "eslint-plugin-react";
+import reactHooksPlugin from "eslint-plugin-react-hooks";
+
+export default [
+  {
+    ignores: [".expo/*", "android/*", "ios/*", "keys/*", "node_modules/*", "src/assets/*", "babel.config.js"],
+  },
+  js.configs.recommended,
+  {
+    files: ["**/*.{js,jsx,mjs}"],
+    plugins: {
+      "react": reactPlugin,
+      "react-hooks": reactHooksPlugin,
+    },
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+    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",
+    },
+  },
+];

mobile/traque-app/jsconfig.json

@@ -1,13 +1,12 @@
 {
   "compilerOptions": {
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "allowSyntheticDefaultImports": true,
     "baseUrl": ".",
     "paths": { "@/*": ["src/*"] },
     "jsx": "react-native",
     "checkJs": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
   },
-  "include": ["src/**/*", "app.json", "assets.d.ts"],
   "exclude": ["node_modules", ".expo", "android", "ios"],
 }

mobile/traque-app/package.json

@@ -13,7 +13,6 @@
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-navigation/native": "^7.0.14",
     "@react-navigation/stack": "^7.1.1",
-    "axxios": "^0.1.0",
     "babel-plugin-module-resolver": "^5.0.2",
     "expo": "~52.0.46",
     "expo-build-properties": "~0.13.3",
@@ -34,7 +33,6 @@
     "react-native": "0.76.9",
     "react-native-collapsible": "^1.6.2",
     "react-native-device-info": "^14.0.4",
-    "react-native-dotenv": "^3.4.11",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-image-picker": "^4.0.6",
     "react-native-image-viewing": "^0.2.2",
@@ -47,11 +45,12 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
+    "@eslint/js": "^9.39.4",
     "@react-native-community/cli": "latest",
-    "eslint": "^7.32.0",
+    "eslint": "^9.39.4",
-    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-native": "^5.0.0"
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "globals": "^17.4.0"
   },
   "private": true
 }

mobile/traque-app/src/components/common/Drawer.jsx

@@ -4,7 +4,7 @@ import { ScrollView, View, Image, StyleSheet, TouchableHighlight } from 'react-n
 import Collapsible from 'react-native-collapsible';
 import LinearGradient from 'react-native-linear-gradient';
 // Constants
-import { COLORS } from '@/constants';
+import { COLORS } from '@/config';
 
 export const Drawer = ({ contentContainerStyle = {}, height, children }) => {
     const [collapsibleState, setCollapsibleState] = useState(true);

mobile/traque-app/src/components/common/Map.jsx

@@ -9,7 +9,7 @@ import { Show } from '@/components/common/Show';
 // Hook
 import { useLocation } from '@/hooks/useLocation';
 // Util
-import { INITIAL_REGIONS } from '@/constants';
+import { INITIAL_REGIONS } from '@/config';
 
 export const Map = ({ children }) => {
     const { location } = useLocation();

mobile/traque-app/src/components/game/MapLayers.jsx

@@ -1,30 +1,24 @@
 // React
 import { useMemo } from 'react';
-import { Circle, Polygon } from 'react-native-maps';
+import { Polygon } from 'react-native-maps';
 // Components
 import { DashedCircle, InvertedCircle, InvertedPolygon } from '@/components/common/Layers';
 // Contexts
 import { useTeam } from '@/contexts/teamContext';
 // Constants
-import { ZONE_TYPES } from '@/constants';
+import { ZONE_TYPES } from '@/config';
 
 export const StartZone = () => {
-    const { teamInfos } = useTeam();
+    const { teamStateData } = useTeam();
-    const { startingArea } = teamInfos;
+    const { placementZone } = teamStateData;
 
     return useMemo(() => {
-        if (!startingArea) return null;
+        if (!placementZone) return null;
 
         return (
-            <Circle
+            <Polygon coordinates={placementZone} strokeWidth={2} strokeColor={`rgba(0, 0, 255, 1)`} fillColor={`rgba(0, 0, 255, 0.2)`} />
-                center={{ latitude: startingArea.center.lat, longitude: startingArea.center.lng }}
-                radius={startingArea.radius}
-                strokeWidth={2}
-                strokeColor={`rgba(0, 0, 255, 1)`}
-                fillColor={`rgba(0, 0, 255, 0.2)`}
-            />
         );
-    }, [startingArea]);
+    }, [placementZone]);
 };
 
 const latToLatitude = (pos) => ({latitude: pos.lat, longitude: pos.lng});

mobile/traque-app/src/components/game/TargetInfoDrawer.jsx

@@ -7,7 +7,6 @@ import { ExpandableImage } from '@/components/common/Image';
 import { CustomTextInput } from '@/components/common/Input';
 import { Drawer } from '@/components/common/Drawer';
 import { Show } from '@/components/common/Show';
-import { TeamStats } from '@/components/game/TeamStats';
 // Contexts
 import { useAuth } from '@/contexts/authContext';
 import { useTeam } from '@/contexts/teamContext';
@@ -19,8 +18,8 @@ import { IconButton } from '../common/IconButton';
 export const TargetInfoDrawer = ({ height }) => {
     const { t } = useTranslation();
     const { teamId } = useAuth();
-    const { teamInfos } = useTeam();
+    const { teamName, teamStateData } = useTeam();
-    const { enemyName, captureCode, name, hasHandicap } = teamInfos;
+    const { targetName, captureCode, hasHandicap } = teamStateData;
     const [enemyCaptureCode, setEnemyCaptureCode] = useState("");
     const [isCapturing, setIsCapturing] = useState(false);
     
@@ -49,10 +48,10 @@ export const TargetInfoDrawer = ({ height }) => {
 
     return (
         <Drawer contentContainerStyle={styles.drawer} height={height}>
-            <Text style={styles.teamCode}>{t("play.drawer.capture_code", {name: name ?? t("common.no_value"), code: String(captureCode).padStart(4,"0")})}</Text>
+            <Text style={styles.teamCode}>{t("play.drawer.capture_code", {name: teamName ?? t("common.no_value"), code: String(captureCode).padStart(4,"0")})}</Text>
             <Show when={!hasHandicap}>
                 <View style={styles.targetContainer}>
-                    <Text style={styles.targetName}>{t("play.drawer.target_name", {name: enemyName ?? t("common.no_value")})}</Text>
+                    <Text style={styles.targetName}>{t("play.drawer.target_name", {name: targetName ?? t("common.no_value")})}</Text>
                     <ExpandableImage source={enemyImage(teamId)}/>
                 </View>
                 <View style={styles.captureContainer}>
@@ -60,7 +59,6 @@ export const TargetInfoDrawer = ({ height }) => {
                     <IconButton style={styles.captureButton} source={require("@/assets/images/target/white.png")} onPress={handleCapture} />
                 </View>
             </Show>
-            <TeamStats/>
         </Drawer>
     );
 };

mobile/traque-app/src/components/game/TeamStats.jsx

@@ -22,8 +22,8 @@ const Stat = ({ children, source, description }) => {
 
 export const TeamStats = () => {
     const { t } = useTranslation();
-    const { teamInfos, startDate } = useTeam();
+    const { teamInfos, startDate } = useTeam(); // TODO : outdated variables
-    const { distance, finishDate, nCaptures, nSentLocation } = teamInfos;
+    const { distance, finishDate, nCaptures, nSentLocation } = teamInfos; // TODO : outdated variables
     const timeSinceGameStart = useTimeSinceSeconds(startDate);
 
     const avgSpeed = useMemo(() => {

mobile/traque-app/src/components/game/Toasts.jsx

@@ -8,40 +8,40 @@ import { useUserState } from '@/hooks/useUserState';
 // Util
 import { secondsToMMSS } from '@/utils/functions';
 // Constants
-import { USER_STATE } from '@/constants';
+import { USER_STATE } from '@/config';
 import { useCountdownSeconds } from '@/hooks/useTimeDelta';
 
 export const Toasts = () => {
     const { t } = useTranslation();
-    const { teamInfos } = useTeam();
+    const { teamStateData } = useTeam();
-    const { outOfZone, outOfZoneDeadline, hasHandicap, enemyHasHandicap, ready } = teamInfos;
+    const { isOutOfZone, handicapDate, hasHandicap, targetHasHandicap, isInPlacementZone } = teamStateData;
     const userState = useUserState();
-    const outOfZoneTimeLeft = useCountdownSeconds(outOfZoneDeadline);
+    const outOfZoneTimeLeft = useCountdownSeconds(handicapDate);
 
     const toastData = [
         {
             condition: userState === USER_STATE.PLACEMENT,
             id: 'placement',
-            text: ready ? t("play.toast.placed") : t("play.toast.not_placed"),
+            text: isInPlacementZone ? t("play.toast.placed") : t("play.toast.not_placed"),
-            toastColor: ready ? "rgb(25, 165, 25)" : "rgb(204, 51, 51)" ,
+            toastColor: isInPlacementZone ? "rgb(25, 165, 25)" : "rgb(204, 51, 51)" ,
             textColor: "white"
         },
         {
-            condition: userState === USER_STATE.PLAYING && !outOfZone && enemyHasHandicap,
+            condition: userState === USER_STATE.PLAYING && !isOutOfZone && targetHasHandicap,
             id: 'enemy_revealed',
             text: t("play.toast.enemy_position_revealed"),
             toastColor: "white",
             textColor: "black"
         },
         {
-            condition: userState === USER_STATE.PLAYING && outOfZone && hasHandicap,
+            condition: userState === USER_STATE.PLAYING && isOutOfZone && hasHandicap,
             id: 'out_of_zone',
             text: `${t("play.toast.go_in_zone")}\n${t("play.toast.team_position_revealed")}`,
             toastColor: "white",
             textColor: "black"
         },
         {
-            condition: userState === USER_STATE.PLAYING && outOfZone && !hasHandicap,
+            condition: userState === USER_STATE.PLAYING && isOutOfZone && !hasHandicap,
             id: 'has_handicap',
             text: `${t("play.toast.go_in_zone")}\n${t("play.toast.out_of_zone_message", {time: secondsToMMSS(outOfZoneTimeLeft)})}`,
             toastColor: "white",

mobile/traque-app/src/config/index.js

@@ -1,4 +1,4 @@
-export * from './config';
+export * from './server';
 export * from './game';
 export * from './map';
 export * from './colors';

mobile/traque-app/src/contexts/authContext.jsx

@@ -1,51 +1,45 @@
 // React
-import { createContext, useContext, useState, useEffect, useCallback, useMemo } from "react";
+import { createContext, useContext, useState, useCallback, useMemo } from "react";
-import DeviceInfo from 'react-native-device-info';
 // Hook
 import { useLocalStorage } from '@/hooks/useLocalStorage';
 // Services
-import { emitLogin, emitLogout, emitBattery, emitDeviceInfo } from "@/services/socket/emitters";
+import { emitLogin, emitLogout } from "@/services/socket/emitters";
 
 const AuthContext = createContext(null);
 
 export const AuthProvider = ({ children }) => {
-    const [loggedIn, setLoggedIn] = useState(false);
+    const [isLoggedIn, setIsLoggedIn] = useState(false);
-    const [teamId, setTeamId] = useLocalStorage("team_id", null);
+    const [savedTeamId, setSavedTeamId] = useLocalStorage("team_id", null);
 
-    const login = useCallback(async (password) => {
+    const login = useCallback(async (teamId) => {
-        if (loggedIn != false) return;
+        if (isLoggedIn) return;
-
+        if (await emitLogin(teamId)) {
-        try {
+            setIsLoggedIn(true); 
-            const response = await emitLogin(password);
+            setSavedTeamId(teamId);
-            setLoggedIn(response.isLoggedIn); 
+            return true;
-            if (response.isLoggedIn) setTeamId(password);
+        } else {
-            return response.isLoggedIn;
+            return false;
-        } catch (error) {
-            setLoggedIn(false); 
-            throw error;
         }
-    }, [loggedIn, setTeamId]);
+    }, [isLoggedIn, setSavedTeamId]);
 
     const logout = useCallback(() => {
-        if (loggedIn != true) return;
+        if (!isLoggedIn) return;
-
+        setIsLoggedIn(false);
-        setLoggedIn(false);
+        setSavedTeamId(null);
-        setTeamId(null);
         emitLogout();
-    }, [loggedIn, setTeamId]);
+    }, [isLoggedIn, setSavedTeamId]);
 
     /*
-    // Try to log in with saved teamId
+    // Try to log in with saved savedTeamId
     useEffect(() => {
-        if (!loggedIn && teamId) {
+        if (!isLoggedIn && savedTeamId) {
-            login(teamId);
+            login(savedTeamId);
         }
-    }, [loggedIn, teamId, login]);
+    }, [isLoggedIn, savedTeamId, login]);
-    */
 
     // Emit battery level and phone model at log in
     useEffect(() => {
-        if (!loggedIn) return;
+        if (!isLoggedIn) return;
 
         const sendInfo = async () => {
             const [brand, model, name] = await Promise.all([
@@ -66,9 +60,10 @@ export const AuthProvider = ({ children }) => {
         const batteryCheckInterval = setInterval(() => sendBattery(), 5*60*1000); // 5 minutes
         
         return () => clearInterval(batteryCheckInterval);
-    }, [loggedIn]);
+    }, [isLoggedIn]);
+    */
 
-    const value = useMemo(() => ({ teamId, loggedIn, login, logout}), [teamId, loggedIn, login, logout]);
+    const value = useMemo(() => ({ savedTeamId, isLoggedIn, login, logout }), [savedTeamId, isLoggedIn, login, logout]);
 
     return (
         <AuthContext.Provider value={value}>

mobile/traque-app/src/contexts/teamContext.jsx

@@ -5,7 +5,7 @@ import { useAuth } from "@/contexts/authContext";
 // Services
 import { socket } from "@/services/socket/connection";
 // Constants
-import { GAME_STATE } from "@/constants";
+import { GAME_STATE } from "@/config";
 
 const TeamContext = createContext(null);
 
@@ -20,45 +20,23 @@ const useOnEvent = (event, callback) => {
 
 export const TeamProvider = ({ children }) => {
     const { logout } = useAuth();
-    // update_team
+    const [teamId, setTeamId] = useState(null);
-    const [teamInfos, setTeamInfos] = useState({});
+    const [teamName, setTeamName] = useState(null);
-    // game_state
+    const [gameState, setGameState] = useState(GAME_STATE.SETUP);
-    const [gameState, setGAME_STATE] = useState(GAME_STATE.SETUP);
+    const [teamStateData, setTeamStateData] = useState({});
-    const [startDate, setStartDate] = useState(null);
-    // current_zone
-    const [zoneExtremities, setZoneExtremities] = useState(null);
-    const [nextZoneDate, setNextZoneDate] = useState(null);
-    // settings
-    const [messages, setMessages] = useState(null);
-    const [zoneType, setZoneType] = useState(null);
 
-    useOnEvent("update_team", (data) => {
+    useOnEvent("update-full", ({ id, name, gameState, stateData }) => {
-        setTeamInfos(teamInfos => ({...teamInfos, ...data}));
+        setTeamId(id);
-    });
+        setTeamName(name);
-
+        setGameState(gameState);
-    useOnEvent("game_state", (data) => {
+        setTeamStateData(stateData);
-        setGAME_STATE(data.state);
-        setStartDate(data.date);
-    });
-
-    useOnEvent("settings", (data) => {
-        setMessages(data.messages);
-        setZoneType(data.zone.type);
-        //TODO
-        //setSendPositionDelay(data.sendPositionDelay);
-        //setOutOfZoneDelay(data.outOfZoneDelay);
-    });
-
-    useOnEvent("current_zone", (data) => {
-        setZoneExtremities({begin: data.begin, end: data.end});
-        setNextZoneDate(data.endDate);
     });
 
     useOnEvent("logout", logout);
 
     const value = useMemo(() => (
-        {teamInfos, gameState, startDate, zoneType, zoneExtremities, nextZoneDate, messages}
+        { teamId, teamName, gameState, teamStateData }
-    ), [teamInfos, gameState, startDate, zoneType, zoneExtremities, nextZoneDate, messages]);
+    ), [teamId, teamName, gameState, teamStateData]);
 
     return (
         <TeamContext.Provider value={value}>

mobile/traque-app/src/hooks/useLocation.jsx

@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
 // Expo
 import * as Location from 'expo-location';
 // Constants
-import { LOCATION_PARAMETERS } from '@/constants';
+import { LOCATION_PARAMETERS } from '@/config';
 
 export const useLocation = () => {
     const [location, setLocation] = useState(null);

mobile/traque-app/src/hooks/useTimeDelta.jsx

@@ -2,29 +2,21 @@
 import { useState, useEffect } from 'react';
 
 export const useCountdownSeconds = (date) => {
-    const [time, setTime] = useState(0);
+    const getSecondsTo = (newDate) => !newDate ? 0 : Math.max(0, Math.floor((newDate - Date.now()) / 1000));
+    const [time, setTime] = useState(() => getSecondsTo(date));
+    const [prevDate, setPrevDate] = useState(date);
+
+    if (date !== prevDate) {
+        setPrevDate(date);
+        setTime(getSecondsTo(date));
+    }
 
     useEffect(() => {
-        if (!date) {
+        const interval = setInterval(() => {
-            setTime(0);
+            const seconds = getSecondsTo(date);
-            return;
+            setTime(seconds);
-        }
+            if (seconds === 0) clearInterval(interval);
-
+        }, 1000);
-        let interval;
-
-        const updateTime = () => {
-            const timeLeft = Math.floor((date - Date.now()) / 1000);
-            
-            if (timeLeft <= 0) {
-                setTime(0);
-                clearInterval(interval);
-            } else {
-                setTime(timeLeft);
-            }
-        };
-
-        updateTime();
-        interval = setInterval(updateTime, 1000);
 
         return () => clearInterval(interval);
     }, [date]);
@@ -33,26 +25,17 @@ export const useCountdownSeconds = (date) => {
 };
 
 export const useTimeSinceSeconds = (date) => {
-    const [time, setTime] = useState(0);
+    const getSecondsTo = (newDate) => !newDate ? 0 : Math.max(0, Math.floor((Date.now() - newDate) / 1000));
+    const [time, setTime] = useState(() => getSecondsTo(date));
+    const [prevDate, setPrevDate] = useState(date);
+
+    if (date !== prevDate) {
+        setPrevDate(date);
+        setTime(getSecondsTo(date));
+    }
 
     useEffect(() => {
-        if (!date) {
+        const interval = setInterval(() => setTime(getSecondsTo(date)), 1000);
-            setTime(0);
-            return;
-        }
-
-        const updateTime = () => {
-            const timeSince = Math.floor((Date.now() - date) / 1000);
-            
-            if (timeSince <= 0) {
-                setTime(0);
-            } else {
-                setTime(timeSince);
-            }
-        };
-
-        updateTime();
-        const interval = setInterval(updateTime, 1000);
 
         return () => clearInterval(interval);
     }, [date]);

mobile/traque-app/src/hooks/useUserState.jsx

@@ -4,13 +4,13 @@ import { useState, useEffect, useMemo } from "react";
 import { useAuth } from "@/contexts/authContext";
 import { useTeam } from "@/contexts/teamContext";
 // Constants
-import { GAME_STATE, USER_STATE } from '@/constants';
+import { GAME_STATE, USER_STATE } from '@/config';
 import { getLocationAuthorization } from '@/services/tasks/backgroundLocation';
 
 export const useUserState = () => {
-    const { loggedIn } = useAuth();
+    const { isLoggedIn } = useAuth();
-    const { teamInfos, gameState } = useTeam();
+    const { teamStateData, gameState } = useTeam();
-    const { captured } = teamInfos;
+    const { isEliminated } = teamStateData;
     const [isLocationAuthorized, setIsLocationAuthorized] = useState(null);
 
     useEffect(() => {
@@ -25,7 +25,7 @@ export const useUserState = () => {
     return useMemo(() => {
         if (isLocationAuthorized == null) return USER_STATE.LOADING;
         if (!isLocationAuthorized) return USER_STATE.NO_LOCATION;
-        if (!loggedIn) return USER_STATE.OFFLINE;
+        if (!isLoggedIn) return USER_STATE.OFFLINE;
 
         switch (gameState) {
             case GAME_STATE.SETUP:
@@ -33,11 +33,11 @@ export const useUserState = () => {
             case GAME_STATE.PLACEMENT:
                 return USER_STATE.PLACEMENT;
             case GAME_STATE.PLAYING:
-                return captured ? USER_STATE.CAPTURED : USER_STATE.PLAYING;
+                return isEliminated ? USER_STATE.CAPTURED : USER_STATE.PLAYING;
             case GAME_STATE.FINISHED:
-                return captured ? USER_STATE.CAPTURED : USER_STATE.FINISHED;
+                return isEliminated ? USER_STATE.CAPTURED : USER_STATE.FINISHED;
             default:
                 return USER_STATE.WAITING;
         }
-    }, [loggedIn, gameState, captured, isLocationAuthorized]);
+    }, [isLoggedIn, gameState, isEliminated, isLocationAuthorized]);
 };

mobile/traque-app/src/i18n/config.js

@@ -1,14 +1,9 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-
-// Importation des fichiers de traduction
 import fr from './locales/fr.json';
 import en from './locales/en.json';
 
-// eslint-disable-next-line import/no-named-as-default-member
+i18n.use(initReactI18next).init({
-i18n
-    .use(initReactI18next)
-    .init({
     resources: {
         en: { translation: en },
         fr: { translation: fr }

mobile/traque-app/src/services/api/image.js

@@ -1,5 +1,5 @@
 // Constants
-import { SERVER_URL } from "@/constants";
+import { SERVER_URL } from "@/config";
 
 export const uploadTeamImage = async (id, imageUri) => {
     if (!imageUri || !id) return;

mobile/traque-app/src/services/socket/connection.js

@@ -1,7 +1,7 @@
 // Socket
 import { io } from "socket.io-client";
 // Constants
-import { SOCKET_URL } from "@/constants";
+import { SOCKET_URL } from "@/config";
 
 export const socket = io(SOCKET_URL, {
     path: "/back/socket.io"

mobile/traque-app/src/services/socket/emitters.js

@@ -35,22 +35,14 @@ export const emitLogout = () => {
     return customEmit("logout");
 };
 
-export const emitSendPosition = () => {
+export const emitLocation = (location) => {
-    return customEmit("send_position");
+    return customEmit("scan", location);
 };
 
-export const emitUpdatePosition = (location) => {
+export const emitScan = (location) => {
-    return customEmit("update_position", location);
+    return customEmit("location", location);
 };
 
 export const emitCapture = (captureCode) => {
     return customEmitCallback("capture", captureCode);
 };
-
-export const emitBattery = (level) => {
-    return customEmit("battery_update", level);
-};
-
-export const emitDeviceInfo = (infos) => {
-    return customEmit("device_info", infos);
-};

mobile/traque-app/src/services/tasks/backgroundLocation.js

@@ -2,9 +2,9 @@
 import { defineTask, isTaskRegisteredAsync } from "expo-task-manager";
 import * as Location from 'expo-location';
 // Services
-import { emitUpdatePosition } from "@/services/socket/emitters";
+import { emitScan } from "@/services/socket/emitters";
 // Constants
-import { TASKS, LOCATION_PARAMETERS } from "@/constants";
+import { TASKS, LOCATION_PARAMETERS } from "@/config";
 
 
 // Task
@@ -22,7 +22,7 @@ defineTask(TASKS.BACKGROUND_LOCATION, async ({ data, error }) => {
             return;
         }
         const { latitude, longitude } = locations[0].coords;
-        emitUpdatePosition([latitude, longitude]);
+        emitScan([latitude, longitude]);
     }
 });
 

server/package-lock.json

@@ -1,6 +0,0 @@
-{
-  "name": "server",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}

server/package.json

@@ -1 +0,0 @@
-{}

server/traque-back/eslint.config.mjs

@@ -0,0 +1,23 @@
+import js from "@eslint/js";
+import globals from "globals";
+
+export default [
+  {
+    ignores: ["node_modules/*", "dist/*", "logs/*"],
+  },
+  js.configs.recommended,
+  {
+    files: ["**/*.{js,mjs}"],
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      globals: {
+        ...globals.node,
+      },
+    },
+    rules: {
+      "semi": ["error", "always"],
+      "no-unused-vars": "warn",
+    },
+  },
+];

server/traque-back/package.json

@@ -19,5 +19,10 @@
     "multer": "^1.4.5-lts.1",
     "random-location": "^1.1.3",
     "socket.io": "^4.7.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "eslint": "^10.0.3",
+    "globals": "^17.4.0"
   }
 }

server/traque-back/src/config/events.js

@@ -4,7 +4,6 @@ export const PLAYER_HANDLER_EVENTS = {
     LOCATION: "location",
     SCAN: "scan",
     CAPTURE: "capture",
-    DEVICE: "device",
 };
 
 export const ADMIN_HANDLER_EVENTS = {

server/traque-back/src/config/game.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import { DEFAULT_ZONES_SETTINGS } from "#config/zone.js";
 import { DefaultState, PlacementState, PlayingState, FinishedState } from '#core/states/game/index.js';
 
@@ -36,7 +37,7 @@ export const DEFAULT_GAME_SETTINGS = {
     placementZones: {},
     scanDelay: 10 * 60 * 1000, // ms
     outOfZoneDelay: 5 * 60 * 1000 // ms
-}
+};
 
 export const TEAM_ID_LENGTH = 6;
 export const CAPTURE_CODE_LENGTH = 4;

server/traque-back/src/core/managers/team_manager.js

@@ -32,7 +32,7 @@ export class TeamManager {
 
     add(teamName) {
         if (!Team.isTeamNameValid(teamName)) return null;
-        let id; do { id = Team.getNewTeamId() } while (this.has(id));
+        let id; do { id = Team.getNewTeamId(); } while (this.has(id));
         const team = new Team(id, teamName);
         if (!this.has(id)) this.order.push(id);
         this._map.set(id, team);

server/traque-back/src/core/models/team.js

@@ -9,15 +9,15 @@ export class Team {
         this.state = null;
     }
 
-    static isTeamNameValid = (teamName) => {
+    static isTeamNameValid(teamName) {
         return typeof teamName === 'string' && teamName.length > 0;
     }
     
-    static getNewTeamId = () => {
+    static getNewTeamId() {
         return randint(10 ** TEAM_ID_LENGTH).toString().padStart(TEAM_ID_LENGTH, '0');
     }
 
-    static getNewCaptureCode = () => {
+    static getNewCaptureCode() {
         return randint(10 ** CAPTURE_CODE_LENGTH).toString().padStart(CAPTURE_CODE_LENGTH, '0');
     }
 

server/traque-back/src/core/states/game/default_state.js

@@ -23,6 +23,7 @@ export class DefaultState {
         this.teams.forEach(team => this.initTeam(team, settings));
     }
 
+    // eslint-disable-next-line no-unused-vars
     clearTeam(_team) {}
 
     exit() {

server/traque-back/src/core/states/game/finished_state.js

@@ -23,6 +23,7 @@ export class FinishedState {
         this.teams.forEach(team => this.initTeam(team, settings));
     }
 
+    // eslint-disable-next-line no-unused-vars
     clearTeam(_team) {}
 
     exit() {

server/traque-back/src/core/states/game/placement_state.js

@@ -23,6 +23,7 @@ export class PlacementState {
         this.teams.forEach(team => this.initTeam(team, settings));
     }
 
+    // eslint-disable-next-line no-unused-vars
     clearTeam(_team) {}
 
     exit() {

server/traque-back/src/core/states/teams/default_team.js

@@ -6,6 +6,7 @@ export class DefaultTeam {
 
     // --------------- LIFE CYCLE --------------- //
 
+    // eslint-disable-next-line no-unused-vars
     init(_settings) {
         return this;
     }

server/traque-back/src/core/states/teams/finished_team.js

@@ -6,6 +6,7 @@ export class FinishedTeam {
 
     // --------------- LIFE CYCLE --------------- //
 
+    // eslint-disable-next-line no-unused-vars
     init(_settings) {
         return this;
     }

server/traque-back/src/externals/handlers/adminHandler.js

@@ -29,7 +29,7 @@ class AdminConnection {
         if (this._isLoggedIn) return;
         
         const hash = createHash('sha256').update(password).digest('hex');
-        if (false && hash !== ADMIN_PASSWORD_HASH) return false; // TODO : temporaire
+        if (hash !== ADMIN_PASSWORD_HASH) return false;
 
         this._isLoggedIn = true;
         this._gameManager.onAdminLogin(this._socket.id);
@@ -46,7 +46,7 @@ class AdminConnection {
 
         this._socket.on("disconnect", () => {
             console.log("Disconnection of an admin");
-            this._logout()
+            this._logout();
         });
 
         this._socket.on(ADMIN_HANDLER_EVENTS.LOGIN, (password) => {
@@ -54,17 +54,17 @@ class AdminConnection {
         });
 
         this._socket.on(ADMIN_HANDLER_EVENTS.LOGOUT, () => {
-            this._logout()
+            this._logout();
         });
 
         // Actions
 
         const protectedActions = {
-            [ADMIN_HANDLER_EVENTS.ADD_TEAM]: (id) => this._gameManager.addTeam(id),
+            [ADMIN_HANDLER_EVENTS.ADD_TEAM]: (teamName) => this._gameManager.addTeam(teamName),
-            [ADMIN_HANDLER_EVENTS.REMOVE_TEAM]: (id) => this._gameManager.removeTeam(id),
+            [ADMIN_HANDLER_EVENTS.REMOVE_TEAM]: (teamId) => this._gameManager.removeTeam(teamId),
-            [ADMIN_HANDLER_EVENTS.REORDER_TEAM]: (id) => this._gameManager.reorderTeam(id),
+            [ADMIN_HANDLER_EVENTS.REORDER_TEAM]: (newTeamsOrder) => this._gameManager.reorderTeam(newTeamsOrder),
-            [ADMIN_HANDLER_EVENTS.ELIMINATE_TEAM]: (id) => this._gameManager.eliminate(id),
+            [ADMIN_HANDLER_EVENTS.ELIMINATE_TEAM]: (teamId) => this._gameManager.eliminate(teamId),
-            [ADMIN_HANDLER_EVENTS.REVIVE_TEAM]: (id) => this._gameManager.revive(id),
+            [ADMIN_HANDLER_EVENTS.REVIVE_TEAM]: (teamId) => this._gameManager.revive(teamId),
             [ADMIN_HANDLER_EVENTS.STATE]: (state) => this._gameManager.setState(state),
             [ADMIN_HANDLER_EVENTS.SETTINGS]: (settings) => this._gameManager.setSettings(settings),
         };

server/traque-back/src/externals/handlers/playerHandler.js

@@ -47,7 +47,7 @@ class PlayerConnection {
 
         this._socket.on("disconnect", () => {
             console.log("Disconnection of a player");
-            this._logout()
+            this._logout();
         });
 
         this._socket.on(PLAYER_HANDLER_EVENTS.LOGIN, (loginTeamId, callback) => {
@@ -56,7 +56,7 @@ class PlayerConnection {
         });
 
         this._socket.on(PLAYER_HANDLER_EVENTS.LOGOUT, () => {
-            this._logout()
+            this._logout();
         });
 
         // Actions

server/traque-back/src/externals/mappers/admin_mapper.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import { DefaultState, PlacementState, PlayingState, FinishedState } from "#core/states/game/index.js";
 
 const TEAM_STATE_MAP = {
@@ -43,7 +44,7 @@ export class AdminMapper {
                 id: team.id,
                 name: team.name,
                 location: team.location,
-                state: TEAM_STATE_MAP[stateName](team, this.gameManager.state)
+                stateData: TEAM_STATE_MAP[stateName](team, this.gameManager.state)
             };
         });
 
@@ -52,14 +53,14 @@ export class AdminMapper {
             currentZone: this.gameManager.zoneManager.currentZonePolygon,
             nextZone: this.gameManager.zoneManager.nextZonePolygon,
             zoneTransitionDate: this.gameManager.zoneManager.dateOfZoneTransition
-        }
+        };
 
         return {
             gameState: stateName,
             teams: this.gameManager.teams.order.map(teamId => teamsDto[teamId]),
             zones: zonesDto,
             settings: this.gameManager.settings
-        }
+        };
     }
 
     hash(dto) {

server/traque-back/src/externals/mappers/player_mapper.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import { DefaultState, PlacementState, PlayingState, FinishedState } from "#core/states/game/index.js";
 
 const TEAM_STATE_MAP = {
@@ -43,8 +44,8 @@ export class PlayerMapper {
         return {
             id: this.team.id,
             name: this.team.name,
-            stateName: this.gameState.name,
+            gameState: this.gameState.name,
-            state: TEAM_STATE_MAP[this.gameState.name](this.team, this.gameState)
+            stateData: TEAM_STATE_MAP[this.gameState.name](this.team, this.gameState)
         };
     }
 

server/traque-back/src/externals/synchronizers/player_synchronizer.js

@@ -18,7 +18,7 @@ export class PlayerSynchronizer {
             this.gameManager.teams.forEach((team, teamId) => {
                 const { dto, hasChanged } = this._getSyncDtoOfTeam(team);
                 if (hasChanged) io.to(teamId).emit(PLAYER_SYNCHRONIZER_EVENTS.UPDATE_FULL, dto);
-            })
+            });
         });
 
         this.gameManager.on(GAME_MANAGER_EVENTS.DELETE_TEAM, (teamId) => {

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 { Show } from "@/components/Show";
-import { GameState } from "@/util/types";
+import { useAdmin } from "@/context/adminContext";
-import { mapZooms } from "@/util/configurations";
+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>
-    )
+    );
 }

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]);
+    }, [SERVER_URL, selectedTeamId]);
-
-    if (!team) return null;
 
     useEffect(() => {
-        const interval = setInterval(() => {
+        const interval = setInterval(() => setDateNow(Date.now()), 1000);
-            setRefreshKey(prev => prev + 1);
-        }, 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 &&
+            <Show when={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>
+            </Show>
-            }
+            <Show when={gameState == GameState.PLAYING || gameState == GameState.FINISHED}>
-            { (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="Temps de survie" value={formatTime(0, team.finishDate || dateNow)} />
-                    <DotLine label="Vitesse moyenne" value={formatSpeed(team.distance, 0, team.finishDate || Date.now())} />
+                <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} />
-                </div>
+            </Show>
-            }
             <div>
                 <DotLine label="Modèle" value={team.phoneModel ?? NO_VALUE} />
                 <DotLine label="Nom" value={team.phoneName ?? NO_VALUE} />

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" />
+                    <Image src={`/icons/user/${team.sockets.length > 0 ? "green" : "red"}.png`} alt="icon" className="w-4 h-4" />
-                    <img src={`/icons/battery/${team.battery >= 20 ? "green" : "red"}.png`} className="w-4 h-4" />
+                    <Image src={`/icons/battery/${team.battery >= 20 ? "green" : "red"}.png`} alt="icon" 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/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>

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>
-    );
-}

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 { useAuth } from "@/context/authContext";
-import useAdmin from "@/hook/useAdmin";
+import { useAdmin } from '@/context/adminContext';
-import { GameState } from "@/util/types";
+import { GameState } from "@/config/types";
-import { mapStyles } from '@/util/configurations';
+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 { useProtect } = useAuth();
-    const { changeState, getTeam } = useAdmin();
+    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={() => emitState(GameState.SETUP)} />
-                    <ControlButton icon="reset" title="Réinitialiser la partie" onClick={() => changeState(GameState.SETUP)} />
+                    <ControlButton icon="placement" title="Commencer les placements" onClick={() => emitState(GameState.PLACEMENT)} />
-                    <ControlButton icon="placement" title="Commencer les placements" onClick={() => changeState(GameState.PLACEMENT)} />
+                    <ControlButton icon="begin" title="Lancer la traque" onClick={() => emitState(GameState.PLAYING)} />
-                    <ControlButton icon="begin" title="Lancer la traque" onClick={() => changeState(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>
-    )
+    );
 }

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 { defaultZoneSettings } from "@/config/configurations";
-import { ZoneTypes } from "@/util/types";
+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 { settings } = useAdmin();
-    const [localZoneSettings, setLocalZoneSettings, applyLocalZoneSettings] = useLocalVariable(settings.playingZones, (e) => updateSettings({playingZones: e}));
+    const [localZoneSettings, setLocalZoneSettings, applyLocalZoneSettings] = useLocalVariable(settings.playingZones, (e) => emitSettings({...settings, playingZones: e}));
-    const [localOutOfZoneDelay, setLocalOutOfZoneDelay, applyLocalOutOfZoneDelay] = useLocalVariable(settings.outOfZoneDelay, (e) => updateSettings({outOfZoneDelay: 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">

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>
-    );
-}

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]);

server/traque-front/app/admin/parameters/components/playingZoneSelector.jsx

@@ -1,7 +1,5 @@
 import dynamic from "next/dynamic";
-import { ZoneTypes } from "@/util/types";
+import { ZoneTypes } from "@/config/types";
-import useLocalVariable from "@/hook/useLocalVariable";
-import useAdmin from "@/hook/useAdmin";
 
 // 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="Cercles" onClick={() => { /*setLocalZoneType(ZoneTypes.CIRCLE)*/ }} isSelected={ZoneTypes.POLYGON == ZoneTypes.CIRCLE} />
-                <ZoneTypeButton title="Polygones" onClick={() => setLocalZoneType(ZoneTypes.POLYGON)} isSelected={ZoneTypes.POLYGON == ZoneTypes.POLYGON} />
+                <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} />

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 { defaultZoneSettings } from "@/config/configurations";
-import { ZoneTypes } from "@/util/types";
+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 polygons = useMemo(() => {
-    const { currentPolygon, highlightNodes, handleLeftClick, handleRightClick, handleMouseMove } = useMapPolygonDraw(polygons, addZone, removeZone);
+        return localZoneSettings.type == ZoneTypes.POLYGON ? localZoneSettings.polygons.map(zone => zone.polygon) : [];
-
-    useEffect(() => {
-        if (localZoneSettings.type == ZoneTypes.POLYGON) {
-            setPolygons(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 { settings } = useAdmin();
-    const [localZoneSettings, setLocalZoneSettings, applyLocalZoneSettings] = useLocalVariable(settings.zones, (e) => updateSettings({zone: e}));
+    const [localZoneSettings, setLocalZoneSettings, applyLocalZoneSettings] = useLocalVariable(settings.zones, (e) => emitSettings({...settings, zone: e}));
-    const [localOutOfZoneDelay, setLocalOutOfZoneDelay, applyLocalOutOfZoneDelay] = useLocalVariable(settings.outOfZoneDelay, (e) => updateSettings({outOfZoneDelay: 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));

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)} />
+                <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)} />
-                <img src="/icons/trash.png" className="w-8 h-8 cursor-pointer" onClick={() => removeTeam(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);
+            emitAddTeam(teamName);
-            setTeamName("")
+            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}/>
                     )}

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 Image from "next/image";
-import Messages from "./components/messages";
+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">

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>
-    );
-}

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>
+    );
+}

server/traque-front/app/login/page.jsx

@@ -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();

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);
-}

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);
-}

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);
-}

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",
+    },
+  },
+];

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 };
-}

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]);
-}

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};
-}

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);
-    }, []);
-}

server/traque-front/jsconfig.json

@@ -1,8 +1,18 @@
 {
   "compilerOptions": {
-    "paths": {
+    "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
   },
-    "lib": ["es2015"]
+  "exclude": ["node_modules", ".next"],
-  }
 }

server/traque-front/next.config.mjs

@@ -7,10 +7,10 @@ const nextConfig = {
     return [
       {
         source: '/',
-        destination: '/admin',
+        destination: '/login',
         permanent: false,
       },
-    ]
+    ];
   },
   
 };

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": "^18.3.1",
-    "react-dom": "^18",
+    "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": "^9.39.3",
-    "eslint-config-next": "14.1.4",
+    "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"
   }
 }

server/traque-front/src/components/Show.jsx

@@ -0,0 +1,3 @@
+export const Show = ({ when, children }) => {
+    return when ? children : null;
+};

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} />
-    )
+    );
 }

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}) {
+export function CircleZone({circle, color = "black", display = true, children = null}) {
-    const opacity = '0.1';
+    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}) {
+export function PolygonZone({polygon, color = "black", display = true, children = null}) {
-    const opacity = '0.1';
+    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 = {
+            const newStartPoint = L.point(
-                x: point1.x + (unitX * insetPixels),
+                point1.x + (unitX * insetPixels),
-                y: point1.y + (unitY * insetPixels)
+                point1.y + (unitY * insetPixels)
-            };
+            );
             
-            const newEndPoint = {
+            const newEndPoint = L.point(
-                x: point2.x - (unitX * insetPixels),
+                point2.x - (unitX * insetPixels),
-                y: point2.y - (unitY * 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);
+        return () => {
-    }, [pos1, pos2]);
+            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;
 }

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);

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>
-    )
+    );
 }

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'>

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    },
-}
+};

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"
-}
+};

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);
+}

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);
+}

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) {

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);
-    }, []);
 
     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];
 }

server/traque-front/src/hook/useLocalVariable.jsx

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useEffect } from "react";
 
 export default function useLocalVariable(variable, setVariable) {

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];
         }
     }
 

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",
+});

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);
+};

server/traque-front/src/util/functions.js

@@ -1,5 +1,5 @@
-import { GameState } from './types';
+import { GameState } from '../config/types';
-import { teamStatus } from './configurations';
+import { teamStatus } from '../config/configurations';
 
 export function getStatus(team, gamestate) {
     if (!team) return null;