diff --git a/traque-front/app/team/track/page.js b/traque-front/app/team/track/page.js
index fb16cbd..7e133d5 100644
--- a/traque-front/app/team/track/page.js
+++ b/traque-front/app/team/track/page.js
@@ -1,5 +1,7 @@
"use client";
import ActionDrawer from '@/components/team/actionDrawer';
+import PlacementOverlay from '@/components/team/placementOverlay';
+import { WaitingScreen } from '@/components/team/waitingScreen';
import { useTeamConnexion } from '@/context/teamConnexionContext';
import useGame from '@/hook/useGame';
import { GameState } from '@/util/gameState';
@@ -15,10 +17,11 @@ const PlacementMap = dynamic(() => import('@/components/team/map').then((mod) =>
});
export default function Track() {
- const { gameState, name, ready } = useGame();
+ const { gameState} = useGame();
const { useProtect } = useTeamConnexion();
useProtect();
return <>
+ {gameState == GameState.SETUP && }
{gameState == GameState.PLAYING &&
@@ -26,13 +29,7 @@ export default function Track() {
}
{gameState == GameState.PLACEMENT &&
-
-
Placement
-
{name}
- {!ready &&
Positionez vous dans le cercle
}
- {ready &&
Restez dans le cercle en attendant que la partie commence
}
-
-
+
}
diff --git a/traque-front/components/team/actionDrawer.jsx b/traque-front/components/team/actionDrawer.jsx
index f9e095e..349ddab 100644
--- a/traque-front/components/team/actionDrawer.jsx
+++ b/traque-front/components/team/actionDrawer.jsx
@@ -5,13 +5,16 @@ import TextInput from "../util/textInput";
export default function ActionDrawer() {
const [visible, setVisible] = useState(false);
- const { sendCurrentPosition } = useGame();
+ const { sendCurrentPosition, name } = useGame();
return (

setVisible(!visible)} />
{visible &&
+
+ {name}
+
30min
before penalty
diff --git a/traque-front/components/team/map.jsx b/traque-front/components/team/map.jsx
index fab937e..725e5d5 100644
--- a/traque-front/components/team/map.jsx
+++ b/traque-front/components/team/map.jsx
@@ -82,7 +82,7 @@ export function PlacementMap({ ...props}) {
}
-
+ {startingArea && }
)
}
diff --git a/traque-front/components/team/placementOverlay.jsx b/traque-front/components/team/placementOverlay.jsx
new file mode 100644
index 0000000..c4bb5a6
--- /dev/null
+++ b/traque-front/components/team/placementOverlay.jsx
@@ -0,0 +1,19 @@
+import { useTeamConnexion } from "@/context/teamConnexionContext";
+import useGame from "@/hook/useGame"
+
+export default function PlacementOverlay() {
+ const { name, ready } = useGame();
+ const {logout} = useTeamConnexion();
+ return (
+ <>
+
+
+
Placement
+
{name}
+ {!ready &&
Positionez vous dans le cercle
}
+ {ready &&
Restez dans le cercle en attendant que la partie commence
}
+
+
+ >
+ )
+}
\ No newline at end of file
diff --git a/traque-front/components/team/waitingScreen.jsx b/traque-front/components/team/waitingScreen.jsx
new file mode 100644
index 0000000..9d534f7
--- /dev/null
+++ b/traque-front/components/team/waitingScreen.jsx
@@ -0,0 +1,21 @@
+import { useTeamConnexion } from "@/context/teamConnexionContext";
+import useGame from "@/hook/useGame"
+
+export function WaitingScreen() {
+ const { name } = useGame();
+ const { logout } = useTeamConnexion();
+ return (
+
+
+ Equipe : {name}
+
+
+ Jeu en préparation, veuillez patienter...
+
+
+ Vous avez perdu Le Jeu
+
+

+
+ )
+}
\ No newline at end of file
diff --git a/traque-front/context/teamConnexionContext.jsx b/traque-front/context/teamConnexionContext.jsx
index 9b82f24..4f0ae3e 100644
--- a/traque-front/context/teamConnexionContext.jsx
+++ b/traque-front/context/teamConnexionContext.jsx
@@ -7,10 +7,10 @@ import { usePasswordProtect } from "@/hook/usePasswordProtect";
const teamConnexionContext = createContext();
const TeamConnexionProvider = ({ children }) => {
const { teamSocket } = useSocket();
- const { login, password: teamId, loggedIn, loading } = useSocketAuth(teamSocket, "team_password");
+ const { login, password: teamId, loggedIn, loading, logout } = useSocketAuth(teamSocket, "team_password");
const useProtect = () => usePasswordProtect("/team", "/team/track", loading, loggedIn);
- const value = useMemo(() => ({ teamId, login, loggedIn, loading, useProtect}), [teamId, login, loggedIn, loading]);
+ const value = useMemo(() => ({ teamId, login, logout, loggedIn, loading, useProtect}), [teamId, login, loggedIn, loading]);
return (
diff --git a/traque-front/hook/useSocketAuth.jsx b/traque-front/hook/useSocketAuth.jsx
index 7f4bfdb..b17a2f5 100644
--- a/traque-front/hook/useSocketAuth.jsx
+++ b/traque-front/hook/useSocketAuth.jsx
@@ -4,6 +4,7 @@ import { useLocalStorage } from './useLocalStorage';
import { usePathname } from 'next/navigation';
const LOGIN_MESSAGE = "login";
+const LOGOUT_MESSAGE = "logout";
const LOGIN_RESPONSE_MESSAGE = "login_response";
export function useSocketAuth(socket, passwordName) {
@@ -13,15 +14,24 @@ export function useSocketAuth(socket, passwordName) {
const [savedPassword, setSavedPassword, savedPasswordLoading] = useLocalStorage(passwordName, null);
useEffect(() => {
+ console.log("Checking saved password", savedPassword, loggedIn);
if (savedPassword && !loggedIn) {
+ console.log("Logging in with saved password", savedPassword);
socket.emit(LOGIN_MESSAGE, savedPassword);
}
}, [savedPassword]);
function login(password) {
+ console.log("Logging", password);
setSavedPassword(password)
}
+ function logout() {
+ setSavedPassword(null);
+ setLoggedIn(false);
+ socket.emit(LOGOUT_MESSAGE)
+ }
+
useSocketListener(socket, LOGIN_RESPONSE_MESSAGE,(loginResponse) => {
setWaitingForResponse(false);
setLoggedIn(loginResponse);
@@ -39,5 +49,5 @@ export function useSocketAuth(socket, passwordName) {
}, [waitingForResponse, savedPasswordLoading, savedPassword]);
- return {login,password: savedPassword, loggedIn, loading};
+ return {login,logout,password: savedPassword, loggedIn, loading};
}
\ No newline at end of file
diff --git a/traque-front/public/icons/logout.png b/traque-front/public/icons/logout.png
new file mode 100644
index 0000000..38c0cfd
Binary files /dev/null and b/traque-front/public/icons/logout.png differ