Corrections + admin full screen

traque-front/app/admin/components/liveMap.jsx

@@ -8,6 +8,8 @@ import { mapZooms } from "@/util/configurations";
 export default function LiveMap({ selectedTeamId, onSelected, isFocusing, setIsFocusing, mapStyle, showZones, showNames, showArrows }) {
     const { zoneType, zoneExtremities, teams, nextZoneDate, getTeam, gameState } = useAdmin();
     const [timeLeftNextZone, setTimeLeftNextZone] = useState(null);
+    const [isFullScreen, setIsFullScreen] = useState(false);
+
 
     useEffect(() => {
         if (nextZoneDate) {
@@ -50,8 +52,7 @@ export default function LiveMap({ selectedTeamId, onSelected, isFocusing, setIsF
     }
 
     return (
-        <div className='h-full w-full flex flex-col'>
-            {gameState == GameState.PLAYING && <p>{`Next zone in : ${formatTime(timeLeftNextZone)}`}</p>}
+        <div className={`${isFullScreen ? "fixed inset-0 z-[9999]" : "relative h-full w-full"}`}>
             <CustomMapContainer mapStyle={mapStyle}>
                 {isFocusing && <MapPan center={getTeam(selectedTeamId)?.currentLocation} zoom={mapZooms.high} animate />}
                 <MapEventListener onDragStart={() => setIsFocusing(false)}/>
@@ -60,12 +61,21 @@ export default function LiveMap({ selectedTeamId, onSelected, isFocusing, setIsF
                     <CircleZone circle={team.startingArea} color="blue" display={gameState == GameState.PLACEMENT && showZones}>
                         <Tag text={team.name} display={showNames} />
                     </CircleZone>
-                    <Arrow pos1={team.currentLocation} pos2={getTeam(team.chased)?.currentLocation} display={showArrows}/>
+                    <Arrow pos1={team.currentLocation} pos2={getTeam(team.chasing)?.currentLocation} display={showArrows}/>
                     <Position position={team.currentLocation} color={"blue"} onClick={() => onSelected(team.id)} display={!team.captured}>
                         <Tag text={team.name} display={showNames} />
                     </Position>
                 </Fragment>)}
             </CustomMapContainer>
+            { gameState == GameState.PLAYING &&
+                <div className="absolute top-4 left-1/2 -translate-x-1/2 z-[1000] pointer-events-none flex flex-col items-center bg-white p-2 rounded-lg shadow-lg drop-shadow">
+                    <p className="text-sm">Durée zone</p>
+                    <p className="text-2xl font-bold">{formatTime(timeLeftNextZone)}</p>
+                </div>
+            }
+            <button className="absolute top-4 right-4 z-[1000] cursor-pointer bg-white p-3 rounded-full shadow-lg drop-shadow" onClick={() => setIsFullScreen(!isFullScreen)}>
+                <img src={`/icons/fullscreen.png`} className="w-8 h-8" />
+            </button>
         </div>
     )
 }

traque-front/app/admin/components/teamSidePanel.jsx

@@ -2,8 +2,7 @@ import { env } from 'next-runtime-env';
 import { useEffect, useState } from "react";
 import useAdmin from "@/hook/useAdmin";
 import { getStatus } from '@/util/functions';
-import { Colors } from '@/util/types';
-import { teamStatus } from '@/util/configurations';
+import { Colors, GameState } from '@/util/types';
 
 function DotLine({ label, value }) {
     return (
@@ -32,6 +31,7 @@ function IconValue({ color, icon, value }) {
 export default function TeamSidePanel({ selectedTeamId, onClose }) {
     const { getTeam, startDate, gameState } = useAdmin();
     const [imgSrc, setImgSrc] = useState("");
+    const [_, setRefreshKey] = useState(0);
     const team = getTeam(selectedTeamId);
     const NO_VALUE = "XX";
     const NEXT_PUBLIC_SOCKET_HOST = env("NEXT_PUBLIC_SOCKET_HOST");
@@ -43,6 +43,14 @@ export default function TeamSidePanel({ selectedTeamId, onClose }) {
 
     if (!team) return null;
 
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setRefreshKey(prev => prev + 1);
+        }, 1000);
+
+        return () => clearInterval(interval);
+    }, []);
+
     function formatTime(startDate, endDate) {
         // startDate in milliseconds
         if (endDate == null || startDate == null || startDate < 0) return NO_VALUE + ":" + NO_VALUE;
@@ -92,18 +100,22 @@ export default function TeamSidePanel({ selectedTeamId, onClose }) {
                 <DotLine label="ID d'équipe" value={String(selectedTeamId).padStart(6, '0').replace(/(\d{3})(\d{3})/, "$1 $2")} />
                 <DotLine label="ID de capture" value={team.captureCode ? String(team.captureCode).padStart(4, '0') : NO_VALUE} />
             </div>
-            <div>
-                <DotLine label="Chasse" value={getTeam(team.chasing)?.name ?? NO_VALUE} />
-                <DotLine label="Chassé par" value={getTeam(team.chased)?.name ?? NO_VALUE} />
-            </div>
-            <div>
-                <DotLine label="Distance" value={formatDistance(team.distance)} />
-                <DotLine label="Temps de survie" value={formatTime(startDate, team.captured ? team.finishDate : Date.now())} />
-                <DotLine label="Vitesse moyenne" value={formatSpeed(team.distance, startDate, team.captured ? team.finishDate : Date.now())} />
-                <DotLine label="Captures" value={team.nCaptures ?? NO_VALUE} />
-                <DotLine label="Observations" value={team.nSentLocation ?? NO_VALUE} />
-                <DotLine label="Observé" value={team.nObserved ?? NO_VALUE} />
-            </div>
+            { gameState != GameState.FINISHED &&
+                <div>
+                    <DotLine label="Chasse" value={getTeam(team.chasing)?.name ?? NO_VALUE} />
+                    <DotLine label="Chassé par" value={getTeam(team.chased)?.name ?? NO_VALUE} />
+                </div>
+            }
+            { (gameState == GameState.PLAYING || gameState == GameState.FINISHED) &&
+                <div>
+                    <DotLine label="Distance" value={formatDistance(team.distance)} />
+                    <DotLine label="Temps de survie" value={formatTime(startDate, team.finishDate || Date.now())} />
+                    <DotLine label="Vitesse moyenne" value={formatSpeed(team.distance, startDate, team.finishDate || Date.now())} />
+                    <DotLine label="Captures" value={team.nCaptures ?? NO_VALUE} />
+                    <DotLine label="Observations" value={team.nSentLocation ?? NO_VALUE} />
+                    <DotLine label="Observé" value={team.nObserved ?? NO_VALUE} />
+                </div>
+            }
             <div>
                 <DotLine label="Modèle" value={team.phoneModel ?? NO_VALUE} />
                 <DotLine label="Nom" value={team.phoneName ?? NO_VALUE} />

traque-front/app/admin/login/page.js

@@ -17,9 +17,9 @@ export default function AdminLoginPage() {
     return (
         <div className="w-full h-full flex items-center justify-center">
             <form className="flex flex-col items-center gap-3 bg-white p-8 rounded-lg ring-1 ring-black" onSubmit={handleSubmit}>
-                <h1 className="text-2xl font-bold text-center text-gray-700">Admin login</h1>
-                <input name="team-id" className="w-60 h-12 text-center rounded ring-1 ring-inset ring-black placeholder:text-gray-400" placeholder="Admin password" value={value} onChange={(e) => setValue(e.target.value)}/>
-                <button className=" w-40 h-12 bg-blue-600 hover:bg-blue-500 text-l text-white rounded ease-out duration-200" type="submit">Login</button>
+                <h1 className="text-2xl font-bold text-center text-gray-700">Connexion admin</h1>
+                <input name="team-id" className="w-60 h-12 text-center rounded ring-1 ring-inset ring-black placeholder:text-gray-400" placeholder="Mot de passe admin" value={value} onChange={(e) => setValue(e.target.value)}/>
+                <button className=" w-40 h-12 bg-blue-600 hover:bg-blue-500 text-l text-white rounded ease-out duration-200" type="submit">Se connecter</button>
             </form>
         </div>
     );

traque-front/app/admin/page.js

@@ -45,7 +45,7 @@ export default function AdminPage() {
     const [mapStyle, setMapStyle] = useState(mapStyles.default);
     const [showZones, setShowZones] = useState(true);
     const [showNames, setShowNames] = useState(true);
-    const [showArrows, setShowArrows] = useState(false);
+    const [showArrows, setShowArrows] = useState(true);
     const [isFocusing, setIsFocusing] = useState(true);
 
     useProtect();

traque-front/app/admin/parameters/components/circleZoneSelector.jsx

@@ -89,21 +89,21 @@ export default function CircleZoneSelector({ display }) {
                     </CustomMapContainer>
                 </div>
                 <div className="h-full w-1/6 flex flex-col gap-3">
-                    {editMode == EditMode.MIN && <button className="w-full h-16 text-lg text-white rounded bg-blue-600 hover:bg-blue-500" onClick={() => setEditMode(EditMode.MAX)}>Click to edit first zone</button>}
-                    {editMode == EditMode.MAX && <button className="w-full h-16 text-lg text-white rounded bg-red-600 hover:bg-red-500" onClick={() => setEditMode(EditMode.MIN)}>Click to edit last zone</button>}
+                    {editMode == EditMode.MAX && <button className="w-full h-16 text-lg text-white rounded bg-blue-600 hover:bg-blue-500" onClick={() => setEditMode(EditMode.MIN)}>Édition première zone</button>}
+                    {editMode == EditMode.MIN && <button className="w-full h-16 text-lg text-white rounded bg-red-600 hover:bg-red-500" onClick={() => setEditMode(EditMode.MAX)}>Édition dernière zone</button>}
                     <div className="w-full flex flex-row gap-2 items-center justify-between">
-                        <p>Reduction number</p>
+                        <p>Nombre de rétrécissements</p>
                         <NumberInput id="reduction-number" value={localZoneSettings.reductionCount ?? ""} onChange={updateReductionCount} />
                     </div>
                     <div className="w-full flex flex-row gap-2 items-center justify-between">
-                        <p>Zone duration</p>
+                        <p>Durée d'une zone</p>
                         <NumberInput id="duration" value={localZoneSettings.duration ?? ""} onChange={updateDuration} />
                     </div>
                     <div className="w-full flex flex-row gap-2 items-center justify-between">
-                        <p>Timeout</p>
+                        <p>Temps permis hors zone</p>
                         <NumberInput id="timeout-circle-selector" value={localOutOfZoneDelay ?? ""} onChange={setLocalOutOfZoneDelay} />
                     </div>
-                    <button className="w-full h-16 text-lg text-white rounded bg-green-600 hover:bg-green-500" onClick={handleSubmit}>Apply</button>
+                    <button className="w-full h-16 text-lg text-white rounded bg-green-600 hover:bg-green-500" onClick={handleSubmit}>Appliquer</button>
                 </div>
             </>}
         </div>

traque-front/app/admin/parameters/components/messages.jsx

@@ -20,7 +20,7 @@ export default function Messages() {
     };
 
     return (
-        <Section title="Message" innerClassName="w-full h-full flex flex-col gap-3 items-center">
+        <Section title="Messages" innerClassName="w-full h-full flex flex-col gap-3 items-center">
             <MessageInput id="waiting" title="Attente  :" value={localGameSettings?.waiting ?? ""} onChange={(e) => modifyLocalZoneSettings("waiting", e.target.value)} onBlur={applyLocalGameSettings}/>
             <MessageInput id="captured" title="Capture :" value={localGameSettings?.captured ?? ""} onChange={(e) => modifyLocalZoneSettings("captured", e.target.value)} onBlur={applyLocalGameSettings}/>
             <MessageInput id="winner" title="Victoire :" value={localGameSettings?.winner ?? ""} onChange={(e) => modifyLocalZoneSettings("winner", e.target.value)} onBlur={applyLocalGameSettings}/>

traque-front/app/admin/parameters/components/placementZoneSelector.jsx

@@ -54,7 +54,7 @@ export default function PlacementZoneSelector({ display }) {
             </div>
             <div className="h-full w-1/6 flex flex-col gap-3">
                 <div className="w-full text-center">
-                    <h2 className="text-xl">Teams</h2>
+                    <h2 className="text-xl">Équipes</h2>
                 </div>
                 <List array={teams} selectedId={selectedTeamId} onSelected={(id) => setSelectedTeamId(selectedTeamId != id ? id : null)}>
                     { (team) =>

traque-front/app/admin/parameters/components/playingZoneSelector.jsx

@@ -1,6 +1,7 @@
-import { useState } from "react";
 import dynamic from "next/dynamic";
 import { ZoneTypes } from "@/util/types";
+import useLocalVariable from "@/hook/useLocalVariable";
+import useAdmin from "@/hook/useAdmin";
 
 // Imported at runtime and not at compile time
 const CircleZoneSelector = dynamic(() => import('./circleZoneSelector'), { ssr: false });
@@ -18,18 +19,19 @@ function ZoneTypeButton({title, onClick, isSelected}) {
 }
 
 export default function PlayingZoneSelector({ display }) {
-    const [zoneType, setZoneType] = useState(ZoneTypes.POLYGON);
+    const { zoneType } = useAdmin();
+    const [localZoneType, setLocalZoneType] = useLocalVariable(zoneType, () => {});
 
     return (
         <div className={display ? 'w-full h-full gap-3 flex flex-col' : "hidden"}>
             <div className="w-full flex flex-row gap-3 items-center">
                 <p className="text-l">Type de zone :</p>
-                <ZoneTypeButton title="Cercles" onClick={() => setZoneType(ZoneTypes.CIRCLE)} isSelected={zoneType == ZoneTypes.CIRCLE} />
-                <ZoneTypeButton title="Polygones" onClick={() => setZoneType(ZoneTypes.POLYGON)} isSelected={zoneType == ZoneTypes.POLYGON} />
+                <ZoneTypeButton title="Cercles" onClick={() => setLocalZoneType(ZoneTypes.CIRCLE)} isSelected={localZoneType == ZoneTypes.CIRCLE} />
+                <ZoneTypeButton title="Polygones" onClick={() => setLocalZoneType(ZoneTypes.POLYGON)} isSelected={localZoneType == ZoneTypes.POLYGON} />
             </div>
             <div className="w-full flex-1">
-                <CircleZoneSelector display={zoneType == ZoneTypes.CIRCLE} />
-                <PolygonZoneSelector display={zoneType == ZoneTypes.POLYGON} />
+                <CircleZoneSelector display={localZoneType == ZoneTypes.CIRCLE} />
+                <PolygonZoneSelector display={localZoneType == ZoneTypes.POLYGON} />
             </div>
         </div>
     );

traque-front/app/admin/parameters/components/polygonZoneSelector.jsx

@@ -106,7 +106,7 @@ export default function PolygonZoneSelector({ display }) {
                 </div>
                 <div className="h-full w-1/6 flex flex-col gap-3">
                     <div className="w-full text-center">
-                        <h2 className="text-xl">Reduction order</h2>
+                        <h2 className="text-xl">Ordre de réduction</h2>
                     </div>
                     <ReorderList droppableId="zones-order" array={localZoneSettings.polygons} setArray={setLocalZoneSettingsPolygons}>
                         { (zone) =>
@@ -117,10 +117,10 @@ export default function PolygonZoneSelector({ display }) {
                         }
                     </ReorderList>
                     <div className="w-full flex flex-row gap-2 items-center justify-between">
-                        <p>Timeout</p>
+                        <p>Temps permis hors zone</p>
                         <NumberInput id="timeout-polygon-selector" value={localOutOfZoneDelay ?? ""} onChange={setLocalOutOfZoneDelay}/>
                     </div>
-                    <button className="w-full h-16 text-lg text-white rounded bg-green-600 hover:bg-green-500" onClick={handleSubmit}>Apply</button>
+                    <button className="w-full h-16 text-lg text-white rounded bg-green-600 hover:bg-green-500" onClick={handleSubmit}>Appliquer</button>
                 </div>
             </>}
         </div>

traque-front/app/admin/parameters/components/teamManager.jsx

@@ -34,7 +34,7 @@ export default function TeamManager() {
     }
 
     return (
-        <Section title="Équipe" outerClassName="flex-1 min-h-0" innerClassName="flex flex-col items-center gap-3">
+        <Section title="Équipes" outerClassName="flex-1 min-h-0" innerClassName="flex flex-col items-center gap-3">
             <form className='w-full flex flex-row gap-3' onSubmit={handleTeamSubmit}>
                 <div className='w-full'>
                     <input name="teamName" label='Team name' value={teamName} onChange={(e) => setTeamName(e.target.value)} type="text" className="w-full h-full p-4 ring-1 ring-inset ring-gray-300" />
@@ -51,7 +51,7 @@ export default function TeamManager() {
                 </ReorderList>
             </div>
             <div className="w-full flex flex-row gap-2 items-center justify-between">
-                <p>Interval between position updates</p>
+                <p>Intervalle entre les envois de position</p>
                 <NumberInput id="position-update" value={localSendPositionDelay ?? ""} onChange={setLocalSendPositionDelay} onBlur={applyLocalSendPositionDelay} />
             </div>
         </Section>

traque-front/components/layer.jsx

@@ -158,7 +158,7 @@ export function Arrow({ pos1, pos2, color = 'black', weight = 5, arrowSize = 20,
             map.removeLayer(polyline);
             map.removeLayer(decorator);
         };
-    }, [insetPositions])
+    }, [display, insetPositions])
 
     return null;
 }

traque-front/hook/usePasswordProtect.jsx

@@ -10,7 +10,7 @@ export default function usePasswordProtect(loginPath, redirectPath, loading, log
             redirect(loginPath);
         }
         if(loggedIn && !loading && path === loginPath) {
-            redirect(redirectPath)
+            redirect(redirectPath);
         }
     }, [loggedIn, loading, path]);
 }

traque-front/hook/useSocketAuth.jsx

@@ -14,15 +14,13 @@ export default 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);
+            console.log("Try to log with :", savedPassword);
             socket.emit(LOGIN_MESSAGE, savedPassword);
         }
     }, [savedPassword]);
 
     function login(password) {
-        console.log("Logging", password);
         setSavedPassword(password)
     }
 
@@ -32,9 +30,10 @@ export default function useSocketAuth(socket, passwordName) {
         socket.emit(LOGOUT_MESSAGE)
     }
 
-    useSocketListener(socket, LOGIN_RESPONSE_MESSAGE,(loginResponse) => {
+    useSocketListener(socket, LOGIN_RESPONSE_MESSAGE, (loginResponse) => {
         setWaitingForResponse(false);
         setLoggedIn(loginResponse);
+        console.log(loginResponse ? "Logged in" : "Not logged in");
     });
 
     useEffect(() => {

traque-front/util/configurations.js

@@ -33,4 +33,6 @@ export const teamStatus = {
     ready:      { label: "Placée",          color: Colors.green  },
     notready:   { label: "Non placée",      color: Colors.red    },
     waiting:    { label: "En attente",      color: Colors.grey   },
+    victory:    { label: "Victoire",        color: Colors.green  },
+    defeat:     { label: "Défaite",         color: Colors.red    },
 }

traque-front/util/functions.js

@@ -11,7 +11,7 @@ export function getStatus(team, gamestate) {
         case GameState.PLAYING:
             return team.captured ? teamStatus.captured : team.outOfZone ? teamStatus.outofzone : teamStatus.playing;
         case GameState.FINISHED:
-            return team.captured ? teamStatus.captured : teamStatus.playing;
+            return team.captured ? teamStatus.defeat : teamStatus.victory;
         default:
             return teamStatus.default;
     }