wrapped all team data in a single object and socket message

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

@@ -1,7 +1,8 @@
 "use client";
 import ActionDrawer from '@/components/team/actionDrawer';
 import { useTeamConnexion } from '@/context/teamConnexionContext';
-import useGame, { GameState } from '@/hook/useGame';
+import useGame from '@/hook/useGame';
+import { GameState } from '@/util/gameState';
 import dynamic from 'next/dynamic';
 import React from 'react'
 
@@ -16,7 +17,7 @@ export default function Track() {
     useProtect();
     return ( 
         gameState == GameState.PLAYING && <div className='h-full'>
-            <LiveMap currentPosition={currentPosition} enemyPosition={enemyPosition} />
+            <LiveMap />
             <ActionDrawer />
         </div>
     )

traque-front/components/team/map.jsx

@@ -26,6 +26,9 @@ function MapPan(props) {
 
 export default function LiveMap({ ...props}) {
     const {currentPosition, enemyPosition} = useGame();
+    useEffect(() => {
+        console.log('Current position', currentPosition);
+    }, [currentPosition]);
     return (
         <MapContainer  {...props} className='min-h-full z-0' center={[0,0]} zoom={0} scrollWheelZoom={true}>
             <TileLayer
@@ -58,3 +61,16 @@ export default function LiveMap({ ...props}) {
         </MapContainer>
     )
 }
+
+export function PlacementMap({ ...props}) {
+    const {currentPosition, startingArea} = useGame();
+    return (
+        <MapContainer  {...props} className='min-h-full w-full' scrollWheelZoom={true}>
+            <TileLayer
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            />
+            <MapPan center={currentPosition}/>
+        </MapContainer>
+    )
+}

traque-front/context/teamContext.jsx

@@ -1,23 +1,28 @@
 "use client";
 import { useLocation } from "@/hook/useLocation";
 import { useSocketListener } from "@/hook/useSocketListener";
-import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useSocket } from "./socketContext";
 import { useTeamConnexion } from "./teamConnexionContext";
+import { GameState } from "@/util/gameState";
 
 
 const teamContext = createContext()
 function TeamProvider({children}) {
-    const [enemyPosition, setEnemyPosition] = useState();
+    const [teamInfos, setTeamInfos] = useState({});
-    const [currentPosition, setCurrentPosition] = useState();
     const [gameState, setGameState] = useState(GameState.SETUP);
     const measuredLocation = useLocation(10000);
     const {teamSocket} = useSocket();
     const {loggedIn} = useTeamConnexion();
+    const teamInfosRef = useRef();
+
+    teamInfosRef.current = teamInfos;
+
+    useSocketListener(teamSocket, "update_team", (newTeamInfos) => {
+        setTeamInfos({...teamInfosRef.current, ...newTeamInfos});
+    });
     
     useSocketListener(teamSocket, "game_state", setGameState);
-    useSocketListener(teamSocket, "enemy_position", setEnemyPosition);
-    useSocketListener(teamSocket, "live_location", setCurrentPosition);
 
     //Send the current position to the server when the user is logged in
     useEffect(() => {
@@ -27,7 +32,7 @@ function TeamProvider({children}) {
         }
     }, [loggedIn, measuredLocation]);
     
-    const value = useMemo(() => ({enemyPosition, currentPosition, gameState}), [enemyPosition, currentPosition, gameState]);
+    const value = useMemo(() => ({teamInfos, gameState}), [teamInfos, gameState]);
     return (
         <teamContext.Provider value={value}>
             {children}

traque-front/hook/useGame.jsx

@@ -3,16 +3,28 @@
 import { useSocket } from "@/context/socketContext";
 import { useTeamConnexion } from "@/context/teamConnexionContext";
 import { useTeamContext } from "@/context/teamContext";
+import { useEffect } from "react";
 
 export default function useGame() {
-    const {teamSocket} = useSocket();
+    const { teamSocket } = useSocket();
-    const {teamId} = useTeamConnexion();
+    const { teamId } = useTeamConnexion();
-    const {currentPosition, enemyPosition, gameState} = useTeamContext();
+    const { teamInfos, gameState } = useTeamContext();
 
     function sendCurrentPosition() {
         teamSocket.emit("send_position");
     }
 
+    useEffect(() => console.log("teamInfos", teamInfos), [teamInfos]);
 
-    return { sendCurrentPosition, enemyPosition, currentPosition, teamId, gameState};
+
+    return {
+        sendCurrentPosition,
+        enemyPosition: teamInfos?.enemyLocation || null,
+        currentPosition: teamInfos?.currentLocation || null,
+        startingArea: teamInfos?.startingArea || null,
+        captureCode: teamInfos?.captureCode || null,
+        name: teamInfos?.name || null,
+        teamId,
+        gameState,
+    };
 }

traque-front/hook/useSocketListener.jsx

@@ -1,8 +1,8 @@
-import { useState } from "react";
+import { useEffect} from "react";
 
 export function useSocketListener(socket, event, callback) {
-    return useState(() => {
+    useEffect(() => {
-        socket.on(event, callback);
+        socket.on(event,callback);
         return () => {
             socket.off(event, callback);
         }