implemented game state in front end

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 (
-        <div>
+        <div className='h-full bg-gray-200 p-10 flex flex-col justify-between'>
-            <h1>Admin page</h1>
+            <div className='w-max gap-3 bg-gray-200 p-10 flex flex-col text-center shadow-2xl '>
+                <h2 className="text-2xl">Game state </h2>
+                <strong className="p-5 bg-gray-900 text-white text-xl rounded">Current : {gameState}</strong>
+                <RedButton onClick={() => changeState(GameState.SETUP)}>Reset game</RedButton>
+                <GreenButton onClick={() => changeState(GameState.PLACEMENT)}>Start placement</GreenButton>
+                <BlueButton onClick={() => changeState(GameState.PLAYING)}>Start game</BlueButton>
+            </div>
         </div>
     )
 }

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 ( 
-        <div className='h-full'>
+        gameState == GameState.PLAYING && <div className='h-full'>
             <LiveMap currentPosition={currentPosition} enemyPosition={enemyPosition} />
             <ActionDrawer />
         </div>

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}) {
                 <TextInput name="teamName" label='Team name' value={teamName} onChange={(e) => setTeamName(e.target.value)}/>
             </div>
             <div className='w-1/5'>
-                <Button type="submit" className="w-5">+</Button>
+                <BlueButton type="submit" className="w-5">+</BlueButton>
             </div>
         </form>
     )

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 }) {
                             <TextInput name="teamName" label='Team name' value={newTeamName} onChange={(e) => setNewTeamName(e.target.value)} />
                         </div>
                         <div className='w-2/5'>
-                            <Button type="submit">Rename</Button>
+                            <BlueButton type="submit">Rename</BlueButton>
                         </div>
                     </form>
-                    <Button onClick={handleRemove}>Remove</Button>
+                    <BlueButton onClick={handleRemove}>Remove</BlueButton>
                 </div>
                 <div className='w-1/2 flex flex-col space-y-2 mx-2'>
                     <h2 className='text-2xl text-center'>Team details</h2>

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() {
                     </div>
                 </div>
                 <div className="h-20 my-1">
-                    <Button onClick={sendCurrentPosition} className="h-10">Update position</Button>
+                    <BlueButton onClick={sendCurrentPosition} className="h-10">Update position</BlueButton>
                 </div>
                 <div className="h-20 my-1">
-                    <Button onClick={sendCurrentPosition} className="h-10">Message log</Button>
+                    <BlueButton onClick={sendCurrentPosition} className="h-10">Message log</BlueButton>
                 </div>
                 <div className="h-20 my-1">
                     <GreenButton onClick={sendCurrentPosition}>See target info</GreenButton>

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}) {
         <form className="bg-white shadow-md max-w mx-auto p-5 mx-10 flex flex-col space-y-4" onSubmit={handleSubmit}>
             <h1 className="text-2xl font-bold text-center text-gray-700">{title}</h1>
             <TextInput inputMode="numeric" placeholder={placeholder} value={value} onChange={(e) => setValue(e.target.value)} name="team-id"/>
-            <Button type="submit">{buttonText}</Button>
+            <BlueButton type="submit">{buttonText}</BlueButton>
         </form>
     )
 }

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 (
         <MapContainer  {...props} className='min-h-full z-0' center={[0,0]} zoom={0} scrollWheelZoom={true}>
             <TileLayer

traque-front/components/util/button.jsx

@@ -1,4 +1,4 @@
-export default function Button({ children, ...props }) {
+export default function BlueButton({ children, ...props }) {
     return (<button {...props} className="bg-blue-600 hover:bg-blue-500 text-lg ease-out duration-200 text-white w-full h-full p-4 shadow-sm rounded">
         {children}
     </button>)

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

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 (
         <adminContext.Provider value={value}>
             {children}

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 (
         <teamContext.Provider value={value}>
             {children}

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() {
+    function changeState(state) {
-        adminSocket.emit("start_game");
+        adminSocket.emit("change_state", state);
     }
 
-    function stopGame() {
+    return {teams, gameState, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, changeState, updateTeam };
-        adminSocket.emit("stop_game");
-    }
-
-    return {teams, started, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, startGame, stopGame, updateTeam };
 
 }

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

traque-front/util/gameState.js

@@ -0,0 +1,6 @@
+export const GameState = {
+    SETUP: "setup",
+    PLACEMENT: "placement",
+    PLAYING: "playing",
+    FINISHED: "finished"
+}