show enemy name

traque-front/app/admin/page.js

@@ -23,7 +23,7 @@ export default function AdminPage() {
                 <BlueButton onClick={() => changeState(GameState.PLAYING)}>Start game</BlueButton>
             </div>
             {gameState == GameState.PLACEMENT && <div className="max-h-5/6"><TeamReady /></div>}
-            {gameState == GameState.SETUP && <ZoneSelector />}
+            {(gameState == GameState.SETUP || gameState == GameState.PLACEMENT) && <ZoneSelector />}
         </div>
     )
 }

traque-front/components/admin/zoneSelector.jsx

@@ -56,6 +56,6 @@ export function ZoneSelector() {
             <p>Interval between reductions</p>
             <TextInput value={reductionInterval} onChange={(e) => setReductionInterval(e.target.value)}></TextInput>
         </div>
-        <GreenButton onClick={handleSettingsSubmit}>Save</GreenButton>
+        <GreenButton onClick={handleSettingsSubmit}>Apply</GreenButton>
     </div>
 }

traque-front/components/team/actionDrawer.jsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react"
 import BlueButton, { GreenButton, RedButton } from "../util/button";
 import TextInput from "../util/textInput";
 import { useTeamConnexion } from "@/context/teamConnexionContext";
+import { EnemyTeamModal } from "./enemyTeamModal";
 
 export default function ActionDrawer() {
     const [visible, setVisible] = useState(false);
@@ -10,6 +11,8 @@ export default function ActionDrawer() {
     const { sendCurrentPosition, name, captureCode, capture, locationSendDeadline, penalties } = useGame();
     const {logout} = useTeamConnexion();   
     const [timeLeftBeforePenalty, setTimeLeftBeforePenalty] = useState(0);
+    const [enemyModalVisible, setEnemyModalVisible] = useState(false);
+
     useEffect(() => {
         const interval = setInterval(() => {
             console.log(locationSendDeadline)
@@ -54,7 +57,7 @@ export default function ActionDrawer() {
                 <div className="p-5 shadow-lg bg-white">
                     <div className="text-center text-2xl">Target</div>
                     <div className="h-20 my-1">
-                        <GreenButton onClick={sendCurrentPosition}>See target info</GreenButton>
+                        <GreenButton onClick={() => setEnemyModalVisible(true)}>See target info</GreenButton>
                     </div>
                     <div className="h-20 flex flex-row">
                         <TextInput inputMode="numeric" placeholder="Enemy code" value={enemyCaptureCode} onChange={(e) => setEnemyCaptureCode(e.target.value)} />
@@ -66,6 +69,7 @@ export default function ActionDrawer() {
                 </div>
             </div>
             }
+        <EnemyTeamModal visible={enemyModalVisible} onClose={() => setEnemyModalVisible(false)} />
         </div>
     )
 }

traque-front/components/team/enemyTeamModal.jsx

@@ -0,0 +1,32 @@
+import useGame from "@/hook/useGame";
+import { RedButton } from "../util/button";
+import { useEffect, useRef } from "react";
+
+export function EnemyTeamModal({ visible, onClose }) {
+    const { teamId, enemyName } = useGame();
+    const imageRef = useRef(null);
+
+    useEffect(() => {
+        if (visible) {
+            refreshImage();
+        }
+    }, [visible]);
+
+    function refreshImage() {
+        imageRef.current.src = SERVER_URL + "/photo/enemy?team=" + teamId.toString() + "&t=" + new Date().getTime();
+    }
+
+    const SERVER_URL = "https://" + process.env.NEXT_PUBLIC_SOCKET_HOST + ":" + process.env.NEXT_PUBLIC_SOCKET_PORT;
+    return (visible &&
+        <>
+            <div className='fixed w-screen h-screen bg-black bg-opacity-50 z-10 text-center'></div>
+            <div className='fixed w-11/12 h-5/6 p-5 z-20 mx-auto inset-x-0 my-auto inset-y-0 flex flex-col justify-center rounded-xl transition-all shadow-xl bg-white '>
+                <h1 className="w-full text-center text-3xl mb-5">{enemyName}</h1>
+                <img ref={imageRef} src={SERVER_URL + "/photo/enemy?team=" + teamId.toString()} className='w-full h-full object-contain' />
+                <div className="h-20">
+                    <RedButton onClick={onClose}>Close</RedButton>
+                </div>
+            </div>
+        </>
+    )
+}

traque-front/components/team/waitingScreen.jsx

@@ -23,7 +23,6 @@ export function WaitingScreen() {
     }
 
     function refreshImage() {
-        imageRef.current.src = "";
         imageRef.current.src = SERVER_URL + "/photo/my?team=" + teamId.toString() + "&t=" + new Date().getTime();
     }
 

traque-front/hook/useGame.jsx

@@ -22,6 +22,7 @@ export default function useGame() {
         sendCurrentPosition,
         capture,
         enemyPosition: teamInfos?.enemyLocation || null,
+        enemyName: teamInfos?.enemyName || null,
         currentPosition: teamInfos?.currentLocation || null,
         startingArea: teamInfos?.startingArea || null,
         captureCode: teamInfos?.captureCode || null,