diff --git a/traque-front/app/admin/page.js b/traque-front/app/admin/page.js index ab3ef39..c8c7e5d 100644 --- a/traque-front/app/admin/page.js +++ b/traque-front/app/admin/page.js @@ -1,12 +1,22 @@ "use client"; +import BlueButton, { GreenButton, RedButton } from "@/components/util/button"; import { useAdminConnexion } from "@/context/adminConnexionContext"; +import useAdmin from "@/hook/useAdmin"; +import { GameState } from "@/util/gameState"; export default function AdminPage() { const { useProtect } = useAdminConnexion(); + const { gameState, changeState } = useAdmin(); useProtect(); return ( -
-

Admin page

+
+
+

Game state

+ Current : {gameState} + changeState(GameState.SETUP)}>Reset game + changeState(GameState.PLACEMENT)}>Start placement + changeState(GameState.PLAYING)}>Start game +
) } \ No newline at end of file diff --git a/traque-front/app/team/track/page.js b/traque-front/app/team/track/page.js index 7df6a01..280aeec 100644 --- a/traque-front/app/team/track/page.js +++ b/traque-front/app/team/track/page.js @@ -1,7 +1,7 @@ "use client"; import ActionDrawer from '@/components/team/actionDrawer'; import { useTeamConnexion } from '@/context/teamConnexionContext'; -import useGame from '@/hook/useGame'; +import useGame, { GameState } from '@/hook/useGame'; import dynamic from 'next/dynamic'; import React from 'react' @@ -11,11 +11,11 @@ const LiveMap = dynamic(() => import('@/components/team/map'), { }); export default function Track() { - const { currentPosition, enemyPosition } = useGame(); + const { gameState } = useGame(); const {useProtect} = useTeamConnexion(); useProtect(); - return ( -
+ return ( + gameState == GameState.PLAYING &&
diff --git a/traque-front/components/admin/teamAdd.jsx b/traque-front/components/admin/teamAdd.jsx index 3d5c7fc..35c44ab 100644 --- a/traque-front/components/admin/teamAdd.jsx +++ b/traque-front/components/admin/teamAdd.jsx @@ -1,6 +1,6 @@ import React from 'react' import TextInput from '../util/textInput' -import Button from '../util/button' +import BlueButton from '../util/button' export default function TeamAddForm({onAddTeam}) { const [teamName, setTeamName] = React.useState(''); @@ -15,7 +15,7 @@ export default function TeamAddForm({onAddTeam}) { setTeamName(e.target.value)}/>
- + +
) diff --git a/traque-front/components/admin/teamEdit.jsx b/traque-front/components/admin/teamEdit.jsx index 6c09fd7..3af1d96 100644 --- a/traque-front/components/admin/teamEdit.jsx +++ b/traque-front/components/admin/teamEdit.jsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react' import TextInput from '../util/textInput' -import Button from '../util/button'; +import BlueButton from '../util/button'; import useAdmin from '@/hook/useAdmin'; import dynamic from 'next/dynamic'; @@ -42,10 +42,10 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) { setNewTeamName(e.target.value)} />
- + Rename
- + Remove

Team details

diff --git a/traque-front/components/team/actionDrawer.jsx b/traque-front/components/team/actionDrawer.jsx index 028aee1..f9e095e 100644 --- a/traque-front/components/team/actionDrawer.jsx +++ b/traque-front/components/team/actionDrawer.jsx @@ -1,6 +1,6 @@ import useGame from "@/hook/useGame"; import { useState } from "react" -import Button, { GreenButton, RedButton } from "../util/button"; +import BlueButton, { GreenButton, RedButton } from "../util/button"; import TextInput from "../util/textInput"; export default function ActionDrawer() { @@ -23,10 +23,10 @@ export default function ActionDrawer() {
- + Update position
- + Message log
See target info diff --git a/traque-front/components/team/loginForm.jsx b/traque-front/components/team/loginForm.jsx index 044bdbc..b5e76c9 100644 --- a/traque-front/components/team/loginForm.jsx +++ b/traque-front/components/team/loginForm.jsx @@ -1,6 +1,6 @@ "use client"; import { useState } from "react"; -import Button from "../util/button"; +import BlueButton from "../util/button"; import TextInput from "../util/textInput"; export default function LoginForm({ onSubmit, title, placeholder, buttonText}) { @@ -14,7 +14,7 @@ export default function LoginForm({ onSubmit, title, placeholder, buttonText}) {

{title}

setValue(e.target.value)} name="team-id"/> - + {buttonText} ) } \ No newline at end of file diff --git a/traque-front/components/team/map.jsx b/traque-front/components/team/map.jsx index 5e70585..7d9a426 100644 --- a/traque-front/components/team/map.jsx +++ b/traque-front/components/team/map.jsx @@ -4,6 +4,7 @@ import { MapContainer, Marker, Popup, TileLayer, useMap } from 'react-leaflet' import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css' import "leaflet-defaulticon-compatibility"; import "leaflet/dist/leaflet.css"; +import useGame from '@/hook/useGame'; const DEFAULT_ZOOM = 17; @@ -23,8 +24,8 @@ function MapPan(props) { return null; } -export default function LiveMap({enemyPosition, currentPosition, ...props}) { - +export default function LiveMap({ ...props}) { + const {currentPosition, enemyPosition} = useGame(); return ( {children} ) diff --git a/traque-front/context/adminConnexionContext.jsx b/traque-front/context/adminConnexionContext.jsx index 7f8c992..52dad56 100644 --- a/traque-front/context/adminConnexionContext.jsx +++ b/traque-front/context/adminConnexionContext.jsx @@ -1,8 +1,7 @@ "use client"; -import { createContext, useContext, useEffect, useMemo, } from "react"; +import { createContext, useContext, useMemo, } from "react"; import { useSocket } from "./socketContext"; import { useSocketAuth } from "@/hook/useSocketAuth"; -import { redirect, usePathname } from "next/navigation"; import { usePasswordProtect } from "@/hook/usePasswordProtect"; const adminConnexionContext = createContext(); diff --git a/traque-front/context/adminContext.jsx b/traque-front/context/adminContext.jsx index f4dfc48..0f3cdd4 100644 --- a/traque-front/context/adminContext.jsx +++ b/traque-front/context/adminContext.jsx @@ -3,15 +3,17 @@ import { createContext, useContext, useEffect, useMemo, useState } from "react"; import { useSocket } from "./socketContext"; import { useSocketListener } from "@/hook/useSocketListener"; import { useAdminConnexion } from "./adminConnexionContext"; +import { GameState } from "@/util/gameState"; const adminContext = createContext(); function AdminProvider({children}) { const [teams, setTeams] = useState([]); - const [started, setStarted] = useState(false); const { adminSocket } = useSocket(); const {loggedIn} = useAdminConnexion(); + const [gameState, setGameState] = useState(GameState.SETUP); + useSocketListener(adminSocket, "game_state", setGameState); //Send a request to get the teams when the user logs in useEffect(() => { adminSocket.emit("get_teams"); @@ -19,9 +21,8 @@ function AdminProvider({children}) { //Bind listeners to update the team list and the game status on socket message useSocketListener(adminSocket, "teams", setTeams); - useSocketListener(adminSocket, "game_started", setStarted); - const value = useMemo(() => ({teams, setTeams, started, setStarted}), [teams, started]); + const value = useMemo(() => ({teams, setTeams, gameState}), [teams, gameState]); return ( {children} diff --git a/traque-front/context/teamContext.jsx b/traque-front/context/teamContext.jsx index 0dfa8e1..f7b056d 100644 --- a/traque-front/context/teamContext.jsx +++ b/traque-front/context/teamContext.jsx @@ -5,14 +5,17 @@ import { createContext, useContext, useEffect, useMemo, useState } from "react"; import { useSocket } from "./socketContext"; import { useTeamConnexion } from "./teamConnexionContext"; + const teamContext = createContext() function TeamProvider({children}) { const [enemyPosition, setEnemyPosition] = useState(); const [currentPosition, setCurrentPosition] = useState(); + const [gameState, setGameState] = useState(GameState.SETUP); const measuredLocation = useLocation(10000); const {teamSocket} = useSocket(); const {loggedIn} = useTeamConnexion(); + useSocketListener(teamSocket, "game_state", setGameState); useSocketListener(teamSocket, "enemy_position", setEnemyPosition); useSocketListener(teamSocket, "live_location", setCurrentPosition); @@ -24,7 +27,7 @@ function TeamProvider({children}) { } }, [loggedIn, measuredLocation]); - const value = useMemo(() => ({enemyPosition, currentPosition}), [enemyPosition, currentPosition]); + const value = useMemo(() => ({enemyPosition, currentPosition, gameState}), [enemyPosition, currentPosition, gameState]); return ( {children} diff --git a/traque-front/hook/useAdmin.jsx b/traque-front/hook/useAdmin.jsx index ef7c693..56c566e 100644 --- a/traque-front/hook/useAdmin.jsx +++ b/traque-front/hook/useAdmin.jsx @@ -2,7 +2,7 @@ import { useAdminContext } from "@/context/adminContext"; import { useSocket } from "@/context/socketContext"; export default function useAdmin(){ - const {teams, started } = useAdminContext(); + const {teams, gameState } = useAdminContext(); const {adminSocket} = useSocket(); function pollTeams() { @@ -34,14 +34,10 @@ export default function useAdmin(){ adminSocket.emit("update_team", teamId, team); } - function startGame() { - adminSocket.emit("start_game"); + function changeState(state) { + adminSocket.emit("change_state", state); } - function stopGame() { - adminSocket.emit("stop_game"); - } - - return {teams, started, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, startGame, stopGame, updateTeam }; + return {teams, gameState, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, changeState, updateTeam }; } \ No newline at end of file diff --git a/traque-front/hook/useGame.jsx b/traque-front/hook/useGame.jsx index d255dd1..7c7bfec 100644 --- a/traque-front/hook/useGame.jsx +++ b/traque-front/hook/useGame.jsx @@ -7,12 +7,12 @@ import { useTeamContext } from "@/context/teamContext"; export default function useGame() { const {teamSocket} = useSocket(); const {teamId} = useTeamConnexion(); - const {currentPosition, enemyPosition} = useTeamContext(); + const {currentPosition, enemyPosition, gameState} = useTeamContext(); function sendCurrentPosition() { teamSocket.emit("send_position"); } - return { sendCurrentPosition, enemyPosition, currentPosition, teamId }; + return { sendCurrentPosition, enemyPosition, currentPosition, teamId, gameState}; } \ No newline at end of file diff --git a/traque-front/util/gameState.js b/traque-front/util/gameState.js new file mode 100644 index 0000000..e5514f7 --- /dev/null +++ b/traque-front/util/gameState.js @@ -0,0 +1,6 @@ +export const GameState = { + SETUP: "setup", + PLACEMENT: "placement", + PLAYING: "playing", + FINISHED: "finished" +} \ No newline at end of file