diff --git a/traque-front/app/team/track/page.js b/traque-front/app/team/track/page.js index 280aeec..92f698a 100644 --- a/traque-front/app/team/track/page.js +++ b/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 &&
- +
) diff --git a/traque-front/components/team/map.jsx b/traque-front/components/team/map.jsx index 7d9a426..c224ab5 100644 --- a/traque-front/components/team/map.jsx +++ b/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 ( ) } + +export function PlacementMap({ ...props}) { + const {currentPosition, startingArea} = useGame(); + return ( + + + + + ) +} diff --git a/traque-front/context/teamContext.jsx b/traque-front/context/teamContext.jsx index f7b056d..cf5a9c7 100644 --- a/traque-front/context/teamContext.jsx +++ b/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 [currentPosition, setCurrentPosition] = useState(); + const [teamInfos, setTeamInfos] = 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 ( {children} diff --git a/traque-front/hook/useGame.jsx b/traque-front/hook/useGame.jsx index 7c7bfec..ca54ad5 100644 --- a/traque-front/hook/useGame.jsx +++ b/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 {teamId} = useTeamConnexion(); - const {currentPosition, enemyPosition, gameState} = useTeamContext(); + const { teamSocket } = useSocket(); + const { teamId } = useTeamConnexion(); + 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, + }; } \ No newline at end of file diff --git a/traque-front/hook/useSocketListener.jsx b/traque-front/hook/useSocketListener.jsx index 85c89e8..d425018 100644 --- a/traque-front/hook/useSocketListener.jsx +++ b/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(() => { - socket.on(event, callback); + useEffect(() => { + socket.on(event,callback); return () => { socket.off(event, callback); }