+ 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}) {
)
}
\ 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