game over basic frontend

traque-front/app/team/track/page.js

@@ -3,6 +3,7 @@ import ActionDrawer from '@/components/team/actionDrawer';
 import { Notification } from '@/components/team/notification';
 import PlacementOverlay from '@/components/team/placementOverlay';
 import { WaitingScreen } from '@/components/team/waitingScreen';
+import { LogoutButton } from '@/components/util/button';
 import { useSocket } from '@/context/socketContext';
 import { useTeamConnexion } from '@/context/teamConnexionContext';
 import useGame from '@/hook/useGame';
@@ -19,12 +20,12 @@ const PlacementMap = dynamic(() => import('@/components/team/map').then((mod) =>
 });
 
 export default function Track() {
-    const { gameState, captured} = useGame();
+    const { gameState, captured } = useGame();
     const { useProtect } = useTeamConnexion();
-    const { teamSocket: socket} = useSocket();
+    const { teamSocket: socket } = useSocket();
     useProtect();
     return <>
-        <Notification socket={socket}/>
+        <Notification socket={socket} />
         {gameState == GameState.SETUP && <WaitingScreen />}
         {gameState == GameState.PLAYING && !captured && <div className='h-full'>
             <LiveMap />
@@ -41,5 +42,12 @@ export default function Track() {
                 <PlacementMap />
             </div>
         }
+        {gameState == GameState.FINISHED && <div className='h-full'>
+            <LogoutButton />
+            <div className='text-center text-2xl'>Partie terminée</div>
+            {captured && <div className='text-center text-md'>Vous avez perdu</div>}
+            {!captured && <div className='text-center text-md'>Vous avez gagné</div>}
+        </div>
+        }
     </>
 }

traque-front/components/team/waitingScreen.jsx

@@ -1,12 +1,10 @@
-import { useTeamConnexion } from "@/context/teamConnexionContext";
 import useGame from "@/hook/useGame"
-import { GreenButton } from "../util/button";
+import { GreenButton, LogoutButton } from "../util/button";
 import { useRef } from "react";
 
 export function WaitingScreen() {
     const { name, teamId } = useGame();
     const imageRef = useRef(null);
-    const { logout } = useTeamConnexion();
     const SERVER_URL = "https://" + process.env.NEXT_PUBLIC_SOCKET_HOST + ":" + process.env.NEXT_PUBLIC_SOCKET_PORT;
 
     function sendImage() {
@@ -29,6 +27,7 @@ export function WaitingScreen() {
 
     return (
         <div className='h-full flex flex-col items-center justify-center'>
+            <LogoutButton />
             <div className='text-4xl mt-10 text-center'>
                 Equipe : {name}
             </div>
@@ -43,7 +42,6 @@ export function WaitingScreen() {
                 </div>
             </div>
             {teamId && <img ref={imageRef} src={SERVER_URL + "/photo/my?team=" + teamId.toString()} className='w-screen h-1/2 object-contain' />}
-            <img src="/icons/logout.png" onClick={logout} className='w-12 h-12 bg-red-500 p-2 top-1 right-1 rounded-lg cursor-pointer bg-red fixed z-20' />
         </div>
     )
 }

traque-front/components/util/button.jsx

@@ -1,3 +1,5 @@
+import { useTeamConnexion } from "@/context/teamConnexionContext";
+
 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}
@@ -15,3 +17,8 @@ export function GreenButton({ children, ...props }) {
         {children}
     </button>)
 }
+
+export function LogoutButton() {
+ const { logout } = useTeamConnexion();
+ return <img src="/icons/logout.png" onClick={logout} className='w-12 h-12 bg-red-500 p-2 top-1 right-1 rounded-lg cursor-pointer bg-red fixed z-20' />
+}