front end elimination

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

@@ -17,16 +17,20 @@ const PlacementMap = dynamic(() => import('@/components/team/map').then((mod) =>
 });
 
 export default function Track() {
-    const { gameState} = useGame();
+    const { gameState, captured} = useGame();
     const { useProtect } = useTeamConnexion();
     useProtect();
     return <>
         {gameState == GameState.SETUP && <WaitingScreen />}
-        {gameState == GameState.PLAYING && <div className='h-full'>
+        {gameState == GameState.PLAYING && !captured && <div className='h-full'>
             <LiveMap />
             <ActionDrawer />
         </div>
         }
+        {gameState == GameState.PLAYING && captured && <div className='h-full'>
+            <div className='text-center text-2xl'>Vous avez été capturé</div> 
+            <div className='text-center text-md'>Instructions de retour ici</div>
+        </div>}
         {gameState == GameState.PLACEMENT &&
             <div className='h-full'>
                 <PlacementOverlay />

traque-front/components/team/actionDrawer.jsx

@@ -6,9 +6,15 @@ import { useTeamConnexion } from "@/context/teamConnexionContext";
 
 export default function ActionDrawer() {
     const [visible, setVisible] = useState(false);
-    const { sendCurrentPosition, name, captureCode } = useGame();
+    const [enemyCaptureCode, setEnemyCaptureCode] = useState("");
+    const { sendCurrentPosition, name, captureCode, capture } = useGame();
     const {logout} = useTeamConnexion();   
 
+    function handleCapture() {
+        capture(enemyCaptureCode);
+        setEnemyCaptureCode("");
+    }
+
     return (
         <div className={"fixed w-screen bottom-0 z-10 bg-gray-100 flex justify-center rounded-t-2xl transition-all duration-200 flex flex-col " + (visible ? "h-full" : "h-20")}>
             <img src="/icons/arrow_up.png" className={"w-full object-scale-down h-ful max-h-20 transition-all cursor-pointer duration-200 " + (visible && "rotate-180")} onClick={() => setVisible(!visible)} />
@@ -43,8 +49,8 @@ export default function ActionDrawer() {
                         <GreenButton onClick={sendCurrentPosition}>See target info</GreenButton>
                     </div>
                     <div className="h-20 flex flex-row">
-                        <TextInput inputMode="numeric" placeholder="Enemy code" onClick={(i) => { console.log(i) }} />
-                        <GreenButton onClick={sendCurrentPosition}>Capture target</GreenButton>
+                        <TextInput inputMode="numeric" placeholder="Enemy code" value={enemyCaptureCode} onChange={(e) => setEnemyCaptureCode(e.target.value)} />
+                        <GreenButton onClick={handleCapture}>Capture target</GreenButton>
                     </div>
                 </div>
                 <div className="h-20">

traque-front/hook/useGame.jsx

@@ -14,17 +14,20 @@ export default function useGame() {
         teamSocket.emit("send_position");
     }
 
-    useEffect(() => console.log("teamInfos", teamInfos), [teamInfos]);
-
+    function capture(captureCode) {
+        teamSocket.emit("capture", captureCode);
+    }
 
     return {
         sendCurrentPosition,
+        capture,
         enemyPosition: teamInfos?.enemyLocation || null,
         currentPosition: teamInfos?.currentLocation || null,
         startingArea: teamInfos?.startingArea || null,
         captureCode: teamInfos?.captureCode || null,
         name: teamInfos?.name || null,
         ready: teamInfos?.ready || false,
+        captured: teamInfos?.captured || false,
         teamId,
         gameState,
     };