From 3770dd4f99e4f194c0a81bc9247131bed76d538e Mon Sep 17 00:00:00 2001 From: Quentin Roussel Date: Fri, 29 Mar 2024 12:38:12 +0100 Subject: [PATCH] Interface d'attente + logout --- traque-front/app/team/track/page.js | 13 +++++------ traque-front/components/team/actionDrawer.jsx | 5 ++++- traque-front/components/team/map.jsx | 2 +- .../components/team/placementOverlay.jsx | 19 ++++++++++++++++ .../components/team/waitingScreen.jsx | 21 ++++++++++++++++++ traque-front/context/teamConnexionContext.jsx | 4 ++-- traque-front/hook/useSocketAuth.jsx | 12 +++++++++- traque-front/public/icons/logout.png | Bin 0 -> 1785 bytes 8 files changed, 63 insertions(+), 13 deletions(-) create mode 100644 traque-front/components/team/placementOverlay.jsx create mode 100644 traque-front/components/team/waitingScreen.jsx create mode 100644 traque-front/public/icons/logout.png 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 0000000000000000000000000000000000000000..38c0cfd96704026e96dc1385beefd055cd0042bd GIT binary patch literal 1785 zcmZvdc~p~E8i((fjS#kkEeH|PNC*NF7Z^SSB|#7Z3Sm=$;6RHOib`btCL>6tS#XU=)=d4BhO|9jqh&Mn{v z_~?<$NdN#np08Ih02ocg00^r=Z^O<;4WQ&;A5Z8>w?mHRqAm0dPX<80{m%oPv)8xK zGzt7&q23yLy_{Ci$O`leShpsM-tEVrM6gh{W?A2P*qPh{kI9o@G%f>D^Y{!l+ zjo_B%8VGT|!b7765W>wsF1BwwzLa`;WIFDX6e83D6aIZo6Ox(t2*A)@$Z#IcBR-x_84k%UcOxP5nrscal!qV|3y z`8;deq#Dzgtj`8>4|N`Iy;@Nug!;CPTJ(K+=eNtZ{9is$F=hVZDCo$k`6wvLrXHRD zMwqE|Usj`a%^83Y{a>YT<*`Y*{1MH^589q3T^GJy8Nw_nfoS5eIUMMO{mlY_tR*rv%M-fzRUxQlh=d&>q}hFp2i!L(l0Z8v`$*AxonY8RjI>PWc`Y z`AKp{7aEMK-J2#o1I<0ug4vzt-gjokKb13lC&a(7*LxN3wEgkY6eu5T(4kxn8oJ}^ zpa<8$fydAryyL_N{Pg(a#0(Byv^ipI<%~aN7Ukr*)5+YjZw`3~EK9X;jAu|TvGv*y zRBqY3ZP!-!7t%o%1&6XlK`BG4w#3wyJ;*xl=T26XDce#h`*{s5IhY5JucM#|NjUlE@$$#R>hl9djjxi-j4I zn3zBP{H5uCP<0=>6ZhWH|3PtSfgdH7vtFcY>s<_05;x0?xrEQ(3tGc3l(DI%j49L; zx0WxFVM&w}&Ig{l@UcO8ZD&53_F=bs7&LQJ8kR@y>n+&lO@w|3kr$9LLu<5ah!pzS z)55*j*z1|56b8q}_2YkXa9!4uJt6qw?%HrKg*p9fS{Z4pw$b;&>Tz7It7@H) zEe4|jc`i=l8^Vx~(ywxHGK*pLz}A*VgG6?_1?`Qge@l1&BM#K}SshZdVf1Cuw-yt6 zKO*;?N8ipQ(81K*^p<(c#FfrzEf~Ul6|J%^=7`+^tFSwjBPgx;sO2{j_T{x5ybpns-{Qh!JMAf950}$+AAFhh8U;xKW9YunRrbZSU z9B-V%A=G%hD)=MC<0lJW51Q^h*~Xj{{^TY|GoY?CADi(MWN*sc($oJ4D2O(WZ3Q~H zKL=k`nAtgY7V5Oxcq*8EF==N;fx=NT>f1EEgeW&i*H literal 0 HcmV?d00001