Mise en page complète + liaison partielle au backend

traque-back/game.js

@@ -92,17 +92,26 @@ export default {
                 penaltyController.stop();
                 timeoutHandler.endAllSendPositionTimeout();
                 for (let team of this.teams) {
-                    team.outOfZone = false;
-                    team.penalties = 0;
+                    // Chasing
                     team.captured = false;
-                    team.enemyLocation = null;
-                    team.currentLocation = null;
+                    team.chasing = null;
+                    team.chased = null;
+                    // Locations
                     team.lastSentLocation = null;
+                    team.locationSendDeadline = null;
+                    team.enemyLocation = null;
+                    // Placement
+                    team.ready = false;
+                    // Zone
+                    team.penalties = 0;
+                    team.outOfZone = false;
+                    team.outOfZoneDeadline = null;
+                    // Stats
                     team.distance = 0;
-                    team.finishDate = null;
                     team.nCaptures = 0;
                     team.nSentLocation = 0;
                     team.nObserved = 0;
+                    team.finishDate = null;
                 }
                 this.startDate = null;
                 this.updateTeamChasing();
@@ -178,32 +187,38 @@ export default {
      */
     addTeam(teamName) {
         this.teams.push({
+            // Identification
             sockets: [],
-            id: this.getNewTeamId(),
             name: teamName,
+            id: this.getNewTeamId(),
+            captureCode: this.createCaptureCode(),
+            // Chasing
+            captured: false,
             chasing: null,
             chased: null,
+            // Locations
             lastSentLocation: null,
-            currentLocation: null,
-            enemyLocation: null,
             locationSendDeadline: null,
+            currentLocation: null,
+            lastCurrentLocationDate: null,
+            enemyLocation: null,
+            // Placement
             startingArea: null,
             ready: false,
-            captureCode: this.createCaptureCode(),
-            captured: false,
+            // Zone
             penalties: 0,
             outOfZone: false,
             outOfZoneDeadline: null,
+            // Stats
             distance: 0,
-            finishDate: null,
             nCaptures: 0,
             nSentLocation: 0,
             nObserved: 0,
+            finishDate: null,
+            // First socket infos
             phoneModel: null,
             phoneName: null,
             battery: null,
-            ping: null,
-            nConnected: 0,
         });
         this.updateTeamChasing();
         return true;

traque-back/team_socket.js

@@ -38,23 +38,29 @@ export function playersBroadcast(event, data) {
 export function sendUpdatedTeamInformations(teamId) {
     const team = game.getTeam(teamId);
     teamBroadcast(teamId, "update_team", {
+        // Identification
         name: team.name,
+        captureCode: team.captureCode,
+        // Chasing
+        captured: team.captured,
         enemyName: game.getTeam(team.chasing).name,
+        // Locations
         lastSentLocation: team.lastSentLocation,
         enemyLocation: team.enemyLocation,
-        locationSendDeadline: team.locationSendDeadline,
+        // Placement phase
         startingArea: team.startingArea,
         ready: team.ready,
-        captureCode: team.captureCode,
-        captured: team.captured,
+        // Constraints
         penalties: team.penalties,
         outOfZone: team.outOfZone,
         outOfZoneDeadline: team.outOfZoneDeadline,
+        locationSendDeadline: team.locationSendDeadline,
+        // Stats
         distance: team.distance,
-        startDate: game.startDate,
-        finishDate: team.finishDate,
         nCaptures: team.nCaptures,
         nSentLocation: team.nSentLocation,
+        startDate: game.startDate,
+        finishDate: team.finishDate,
     })
     secureAdminBroadcast("teams", game.teams);
 }
@@ -65,8 +71,14 @@ export function sendUpdatedTeamInformations(teamId) {
  */
 function logoutPlayer(id) {
     for (const team of game.teams) {
+        if (team.sockets.indexOf(id) == 0) {
+            team.battery = null;
+            team.phoneModel = null;
+            team.phoneName = null;
+        }
         team.sockets = team.sockets.filter((sid) => sid != id);
     }
+    secureAdminBroadcast("teams", game.teams);
 }
 
 export function initTeamSocket() {
@@ -115,7 +127,9 @@ export function initTeamSocket() {
             const team = game.getTeam(teamId);
             if (team.sockets.indexOf(socket.id) == 0) {
                 game.updateLocation(teamId, position);
+                team.lastCurrentLocationDate = Date.now();
             }
+            secureAdminBroadcast("teams", game.teams);
         });
 
         socket.on("send_position", () => {

traque-front/app/admin/page.js

@@ -1,11 +1,10 @@
 "use client";
 import { useAdminConnexion } from "@/context/adminConnexionContext";
-import useAdmin from "@/hook/useAdmin";
 import dynamic from "next/dynamic";
-import TeamList from '@/components/admin/teamList';
+import TeamList from '@/components/admin/teamViewer';
 import React, { useState } from 'react'
-import TeamAddForm from '@/components/admin/teamAdd';
 import Link from "next/link";
+import { Section } from "@/components/util/section";
 import TeamInformation from "@/components/admin/teamInformation";
 
 // Imported at runtime and not at compile time
@@ -14,20 +13,26 @@ const LiveMap = dynamic(() => import('@/components/admin/liveMap'), { ssr: false
 export default function AdminPage() {
     const { useProtect } = useAdminConnexion();
     const [selectedTeamId, setSelectedTeamId] = useState(null);
-    const { addTeam, gameState, changeState, teams } = useAdmin();
+
     useProtect();
+
+    function onSelected(id) {
+        if (selectedTeamId === id) {
+            setSelectedTeamId(null);
+        } else {
+            setSelectedTeamId(id);
+        }
+    }
     
     return (
-        <div className='min-h-full bg-gray-200 p-5 flex flex-row content-start gap-5'>
-            <div className="h-full w-2/6">
-                <div className='w-full mb-5 h-1/2 gap-3 bg-custom-light-blue p-10 flex flex-col text-left shadow-2xl'>
-                    <h2 className="text-4xl font-bold">Page Principale</h2>
+        <div className='h-full bg-gray-200 p-3 flex flex-row content-start gap-3'>
+            <div className="h-full w-2/6 flex flex-col gap-3">
+                <div className='w-full bg-custom-light-blue gap-5 p-5 flex flex-row shadow-2xl'>
+                    <img src="/icons/home.png" className="w-8 h-8" />
+                    <h2 className="text-3xl font-bold">Page principale</h2>
                 </div>
-                <div className='w-full mb-5 h-1/2 gap-3 bg-white flex flex-col'>
-                    <div className='w-full gap-3 bg-custom-light-blue flex flex-col items-center justify-center text-middle shadow-2xl p-1'>
-                        <h2 className="text-2xl">Contrôle</h2>
-                    </div>
-                    <div className="flex flex-row justify-between items-center px-6 py-3">
+                <Section title="Contrôle">
+                    <div className='w-full h-full flex flex-row justify-between'>
                         <Link 
                             href="/admin/parameters"
                             className="w-[4.5rem] h-[4.5rem] bg-custom-light-blue rounded-lg hover:bg-blue-500 transition flex items-center justify-center" 
@@ -55,21 +60,19 @@ export default function AdminPage() {
                             <img src="/icons/begin.png" className="w-10 h-10" />
                         </button>
                     </div>
-                </div>
-                <div className='h-full w-full mb-5 h-1/2 gap-3 bg-white flex flex-col'>
-                    <div className='w-full gap-3 bg-custom-light-blue flex flex-col items-center justify-center text-middle shadow-2xl p-1'>
-                        <h2 className="text-2xl">Équipes</h2>
+                </Section>
+                <Section className="h-full" title="Équipes">
+                    <div className="w-full h-full bg-gray-300 p-1">
+                        <TeamList selectedTeamId={selectedTeamId} onSelected={onSelected}/>
                     </div>
-                    <div className="items-center px-6 py-3">
-                        <TeamList selectedTeamId={selectedTeamId} onSelected={setSelectedTeamId}/>
-                    </div>
-                </div>
+                </Section>
             </div>
-            <div className='grow flex-1 flex flex-col bg-white p-5 shadow-2xl relative'>
-                <div className="flex-1 flex items-center justify-center bg-gray-200 mb-5 relative">
-                    <LiveMap selectedTeamId={selectedTeamId} setSelectedTeamId={setSelectedTeamId} />
+            <div className='grow flex-1 flex flex-col bg-white p-3 gap-3 shadow-2xl'>
+                <div className="flex-1 flex flex-row gap-3">
+                    <LiveMap/>
+                    <TeamInformation selectedTeamId={selectedTeamId} onClose={() => setSelectedTeamId(null)}/>
                 </div>
-                <div className='w-full flex flex-row gap-10 items-center px-6 relative'>
+                <div className='w-full flex flex-row items-center justify-evenly py-2'>
                     <button 
                         className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center"
                         title ="Changer le style de la carte">

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

@@ -1,31 +1,62 @@
 "use client";
+import { useState, useEffect } from "react";
 import GameSettings from "@/components/admin/gameSettings";
 import { useAdminConnexion } from "@/context/adminConnexionContext";
 import dynamic from "next/dynamic";
-import TeamAddForm from '@/components/admin/teamAdd';
+import TeamList from '@/components/admin/teamManager';
 import useAdmin from '@/hook/useAdmin';
 import Link from "next/link";
+import { GreenButton } from "@/components/util/button";
+import { TextInput } from "@/components/util/textInput";
+import { Section } from "@/components/util/section";
 
 // Imported at runtime and not at compile time
 const ZoneSelector = dynamic(() => import('@/components/admin/polygonZoneMap'), { ssr: false });
 
 export default function AdminPage() {
+    const {penaltySettings, changePenaltySettings} = useAdmin();
     const { addTeam } = useAdmin();
     const { useProtect } = useAdminConnexion();
-    
+    const [allowedTimeBetweenUpdates, setAllowedTimeBetweenUpdates] = useState("");
+
     useProtect();
+    
+    useEffect(() => {
+        if (penaltySettings) {
+            setAllowedTimeBetweenUpdates(penaltySettings.allowedTimeBetweenPositionUpdate.toString());
+        }
+    }, [penaltySettings]);
+
+    function applySettings() {
+        if (Number(allowedTimeBetweenUpdates) != penaltySettings.allowedTimeBetweenPositionUpdate) {
+            changePenaltySettings({allowedTimeBetweenPositionUpdate: Number(allowedTimeBetweenUpdates)});
+        }
+    }
 
     return (
-        <div className='h-full bg-gray-200 p-10 flex flex-row gap-5'>
-            <div className="h-full w-2/6">
-                <div className='w-full mb-5 h-full gap-3 bg-custom-light-blue p-7 flex flex-row text-left shadow-2xl'>
-                    <Link href="/admin" className="w-fit flex items-center text-white hover:text-blue-900 transition-colors">
-                        <img src="/icons/backarrow.png" className="w-10 h-10 mr-10" title="retour" />
+        <div className='h-full bg-gray-200 p-3 flex flex-row gap-3'>
+            <div className="h-full w-3/6 gap-3 flex flex-col">
+                <div className='w-full bg-custom-light-blue gap-5 p-5 flex flex-row shadow-2xl'>
+                    <Link href="/admin">
+                        <img src="/icons/backarrow.png" className="w-8 h-8" title="Main page" />
                     </Link>
-                    <h2 className="text-4xl font-bold">Paramètres</h2>
+                    <h2 className="text-3xl font-bold">Paramètres</h2>
                 </div>
-                <TeamAddForm onAddTeam={addTeam}/>
                 <GameSettings />
+                <Section className="h-full" title="Équipe">
+                    <div className="w-full h-full gap-3 flex flex-col items-center">
+                        <TeamList/>
+                        <div className="w-full flex flex-row gap-2 items-center justify-between">
+                            <p>Interval between position updates</p>
+                            <div className="w-16 h-10">
+                                <TextInput value={allowedTimeBetweenUpdates} onChange={(e) => setAllowedTimeBetweenUpdates(e.target.value)} />
+                            </div>
+                        </div>
+                        <div className="w-40 h-15">
+                            <GreenButton onClick={applySettings}>Apply</GreenButton>
+                        </div>
+                    </div>
+                </Section>
             </div>
             <div className="h-full w-full">
                 <ZoneSelector />

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

@@ -1,7 +1,7 @@
 "use client";
 import TeamAddForm from '@/components/admin/teamAdd';
 import TeamEdit from '@/components/admin/teamEdit';
-import TeamList from '@/components/admin/teamList';
+import TeamList from '@/components/admin/teamManager';
 import { useAdminConnexion } from '@/context/adminConnexionContext';
 import useAdmin from '@/hook/useAdmin';
 import React, { useState } from 'react'

traque-front/components/admin/gameSettings.jsx

@@ -1,8 +1,17 @@
 import useAdmin from "@/hook/useAdmin";
-import { TextArea } from "../util/textInput";
 import { GreenButton } from "../util/button";
+import { Section } from "../util/section";
 import { useEffect, useState } from "react";
 
+function MessageInput({title, ...props}) {
+    return (
+        <div className="w-full flex flex-row gap-3 items-center">
+            <p>{title}</p>
+            <input {...props} type="text" className="w-full h-8 p-2 rounded ring-1 ring-inset ring-gray-400 placeholder:text-gray-600" />
+        </div>
+    );
+}
+
 export default function GameSettings() {
     const {gameSettings, changeGameSettings} = useAdmin();
     const [capturedMessage, setCapturedMessage] = useState("");
@@ -24,27 +33,16 @@ export default function GameSettings() {
     }
 
     return (
-        <div className='w-full h-full gap-5 bg-white p-10 flex flex-col text-center shadow-2xl overflow-y-scroll'>
-            <h2 className="text-2xl">Messages</h2>
-            <div className='w-full gap-1 flex flex-col text-center'>
-                <p>Game setup</p>
-                <TextArea style={{height: 60}} value={waitingMessage} onChange={(e) => setWaitingMessage(e.target.value)} />
+        <Section title="Message">
+            <div className="w-full h-full flex flex-col gap-3 items-center">
+                <MessageInput title="Attente  :" value={waitingMessage} onChange={(e) => setWaitingMessage(e.target.value)}/>
+                <MessageInput title="Capture :" value={capturedMessage} onChange={(e) => setCapturedMessage(e.target.value)} />
+                <MessageInput title="Victoire :" value={winnerEndMessage} onChange={(e) => setWinnerEndMessage(e.target.value)} />
+                <MessageInput title="Défaite  :" value={loserEndMessage} onChange={(e) => setLoserEndMessage(e.target.value)} />
+                <div className='w-40 h-15'>
+                    <GreenButton onClick={applySettings}>Apply</GreenButton>
+                </div>
             </div>
-            <div className='w-full gap-1 flex flex-col text-center'>
-                <p>Team captured</p>
-                <TextArea style={{height: 60}} value={capturedMessage} onChange={(e) => setCapturedMessage(e.target.value)} />
-            </div>
-            <div className='w-full gap-1 flex flex-col text-center'>
-                <p>Game finished (winner)</p>
-                <TextArea style={{height: 60}} value={winnerEndMessage} onChange={(e) => setWinnerEndMessage(e.target.value)} />
-            </div>
-            <div className='w-full gap-1 flex flex-col text-center'>
-                <p>Game finished (loser)</p>
-                <TextArea style={{height: 60}} value={loserEndMessage} onChange={(e) => setLoserEndMessage(e.target.value)} />
-            </div>
-            <div>
-                <GreenButton onClick={applySettings}>Apply</GreenButton>
-            </div>
-        </div>
-    )
+        </Section>
+    );
 }

traque-front/components/admin/liveMap.jsx

@@ -53,9 +53,9 @@ export default function LiveMap() {
     }
 
     return (
-        <div className='min-h-full w-full'>
+        <div className='h-full w-full'>
             {gameState == GameState.PLAYING && <p>{`Next zone in : ${formatTime(timeLeftNextZone)}`}</p>}
-            <MapContainer className='min-h-full w-full' center={location} zoom={DEFAULT_ZOOM} scrollWheelZoom={true}>
+            <MapContainer className='h-full w-full' center={location} zoom={DEFAULT_ZOOM} scrollWheelZoom={true}>
                 <TileLayer
                     attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                     url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

traque-front/components/admin/penaltySettings.jsx

@@ -1,49 +0,0 @@
-import useAdmin from "@/hook/useAdmin";
-import { TextInput } from "../util/textInput";
-import { GreenButton } from "../util/button";
-import { useEffect, useState } from "react";
-
-export default function PenaltySettings() {
-    const {penaltySettings, changePenaltySettings} = useAdmin();
-    const [maxPenalties, setMaxPenalties] = useState("");
-    const [allowedTimeOutOfZone, setAllowedTimeOutOfZone] = useState("");
-    const [allowedTimeBetweenUpdates, setAllowedTimeBetweenUpdates] = useState("");
-
-    useEffect(() => {
-        if (penaltySettings) {
-            setMaxPenalties(penaltySettings.maxPenalties.toString());
-            setAllowedTimeOutOfZone(penaltySettings.allowedTimeOutOfZone.toString());
-            setAllowedTimeBetweenUpdates(penaltySettings.allowedTimeBetweenPositionUpdate.toString());
-        }
-    }, [penaltySettings]);
-
-    function applySettings() {
-        const newSettings = {maxPenalties: Number(maxPenalties), allowedTimeOutOfZone: Number(allowedTimeOutOfZone), allowedTimeBetweenPositionUpdate: Number(allowedTimeBetweenUpdates)};
-        const changingSettings = {};
-        for (const key in newSettings) {
-            if (newSettings[key] != penaltySettings[key]) {
-                changingSettings[key] = newSettings[key];
-            }
-        }
-        changePenaltySettings(changingSettings);
-    }
-
-    return (
-        <div className='w-2/5 h-full gap-1 bg-white p-10 flex flex-col text-center shadow-2xl overflow-y-scroll'>
-            <h2 className="text-2xl">Penalties</h2>
-            <div>
-                <p>Maximum Penalties</p>
-                <TextInput value={maxPenalties} onChange={(e) => setMaxPenalties(e.target.value)} />
-            </div>
-            <div>
-                <p>Time out of the zone before a penalty</p>
-                <TextInput value={allowedTimeOutOfZone} onChange={(e) => setAllowedTimeOutOfZone(e.target.value)} />
-            </div>
-            <div>
-                <p>Allowed time between position updates</p>
-                <TextInput value={allowedTimeBetweenUpdates} onChange={(e) => setAllowedTimeBetweenUpdates(e.target.value)} />
-            </div>
-            <GreenButton onClick={applySettings}>Apply</GreenButton>
-        </div>
-    );
-}

traque-front/components/admin/polygonZoneMap.jsx

@@ -131,11 +131,11 @@ export default function PolygonZoneMap() {
     }
     
     return (
-        <div className='h-full w-full bg-white p-5 gap-5 flex flex-row shadow-2xl'>
+        <div className='h-full w-full bg-white p-3 gap-3 flex flex-row shadow-2xl'>
             <div className="h-full w-full">
                 <PolygonZonePicker polygons={polygons} addPolygon={addPolygon} removePolygon={removePolygon} />
             </div>
-            <div className="h-full w-1/6 flex flex-col gap-5">
+            <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>
                 </div>

traque-front/components/admin/teamAdd.jsx

@@ -1,24 +0,0 @@
-import { useState } from 'react'
-
-export default function TeamAddForm({onAddTeam}) {
-    const [teamName, setTeamName] = useState('');
-    
-    function handleSubmit(e) {
-        e.preventDefault();
-        if (teamName !== "") {
-            onAddTeam(teamName);
-            setTeamName("")
-        }
-    }
-    
-    return (
-        <form className='flex flex-row m-y-5 mb-3' onSubmit={handleSubmit}>
-            <div className='w-4/5'>
-                <input name="teamName" label='Team name' value={teamName} onChange={(e) => setTeamName(e.target.value)} type="text" className="block w-full h-full p-4 text-center ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400" />
-            </div>
-            <div className='w-1/5'>
-                <button type="submit" className="w-5 w-full h-full bg-custom-light-blue hover:bg-blue-500 transition text-3xl font-bold">+</button>
-            </div>
-        </form>
-    );
-}

traque-front/components/admin/teamInformation.jsx

@@ -1,75 +1,135 @@
 import useAdmin from "@/hook/useAdmin";
+import { GameState } from '@/util/gameState';
+import { useEffect, useState } from "react";
+import { env } from 'next-runtime-env';
 
 function DotLine({ label, value }) {
     return (
         <div className="flex items-center">
-            <span className="text-lg">{label}</span>
+            <span className="whitespace-nowrap text-m">{label}</span>
             <span
                 className="flex-1 mx-2 overflow-hidden whitespace-nowrap text-black font-bold select-none"
                 aria-hidden="true"
             >
                 {" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "}
             </span>
-            <span className="text-lg">{value}</span>
+            <span className="whitespace-nowrap text-m">{value}</span>
         </div>
     );
 }
 
-// ...existing imports...
+function IconValue({ color, icon, value }) {
+    return (
+        <div className="flex flex-row gap-2">
+            <img src={`/icons/${color}${icon}.png`} className="w-6 h-6" />
+            <p className={`text-custom-${color}`}>{value}</p>
+        </div>
+    );
+}
+
+const TEAM_STATUS = {
+    playing:    { label: "En jeu",          color: "text-custom-green" },
+    captured:   { label: "Capturée",        color: "text-custom-red" },
+    outofzone:  { label: "Hors zone",       color: "text-custom-orange" },
+    ready:      { label: "Placée",          color: "text-custom-green" },
+    notready:   { label: "Non placée",      color: "text-custom-red" },
+    waiting:    { label: "En attente",      color: "text-custom-grey" },
+};
+
+function getStatus(team, gamestate) {
+    switch (gamestate) {
+        case GameState.SETUP:
+            return TEAM_STATUS.waiting;
+        case GameState.PLACEMENT:
+            return team.ready ? TEAM_STATUS.ready : TEAM_STATUS.notready;
+        case GameState.PLAYING:
+            return team.captured ? TEAM_STATUS.captured : team.outofzone ? TEAM_STATUS.outofzone : TEAM_STATUS.playing;
+        case GameState.FINISHED:
+            return team.captured ? TEAM_STATUS.captured : TEAM_STATUS.playing;
+    }
+}
 
 export default function TeamInformation({ selectedTeamId, onClose }) {
-    const { getTeam, getTeamName, teams } = useAdmin();
+    const { getTeam, getTeamName, startDate, gameState } = useAdmin();
+    const [imgSrc, setImgSrc] = useState("");
     const team = getTeam(selectedTeamId);
+    const NO_VALUE = "XX";
+    const NEXT_PUBLIC_SOCKET_HOST = env("NEXT_PUBLIC_SOCKET_HOST");
+    const SERVER_URL = (NEXT_PUBLIC_SOCKET_HOST == "localhost" ? "http://" : "https://") + NEXT_PUBLIC_SOCKET_HOST + "/back";
+
+    useEffect(() => {
+        setImgSrc(`${SERVER_URL}/photo/my?team=${selectedTeamId}&t=${Date.now()}`);
+    }, [selectedTeamId]);
 
     if (!team) return null;
 
-    function formatTime(seconds) {
-        if (!seconds || seconds < 0) return "—";
+    function formatTime(startDate) {
+        // startDate in milliseconds
+        const date = team.captured ? team.finishDate : Date.now();
+        if (date == null || startDate == null || startDate < 0) return NO_VALUE + ":" + NO_VALUE;
+        const seconds = Math.floor((date - startDate) / 1000);
         const m = Math.floor(seconds / 60);
         const s = Math.floor(seconds % 60);
         return `${m}:${s.toString().padStart(2, "0")}`;
     }
 
-    // Determine image source
-    const imageSrc = team.photoUrl && team.photoUrl.trim() !== ""
-        ? team.photoUrl
-        : "/images/missing_image.jpg";
+    function formatDistance(distance) {
+        // distance in meters
+        if (distance == null || distance < 0) return NO_VALUE + "km";
+        return `${Math.floor(distance / 100) / 10}km`;
+    }
+
+    function formatSpeed(distance, startDate) {
+        // distance in meters | startDate in milliseconds
+        const date = team.captured ? team.finishDate : Date.now();
+        if (distance == null || distance < 0 || date == null || startDate == null || date <= startDate) return NO_VALUE + "km/h";
+        const speed = distance / (date - startDate);
+        return `${Math.floor(speed * 36000) / 10}km/h`;
+    }
+
+    function formatDate(date) {
+        // date in milliseconds
+        const dateNow = Date.now();
+        if (date == null || dateNow <= date || dateNow - date >= 1_000_000) return NO_VALUE + "s";
+        return `${Math.floor((dateNow - date) / 1000)}s`;
+    }
 
     return (
-        <div className="bg-white p-6 w-[20rem] max-w-full relative">
-            <button
-                className="absolute top-2 right-2 text-black text-6xl mr-3"
-                onClick={onClose}
-                title="Fermer"
-            >
-                ×
-            </button>
-            <div className={`text-2xl font-bold text-center mb-2 ${team.captured ? "text-custom-red" : "text-custom-green"} font-bold`}>
-                {team.captured ? "Capturée" : "En jeu"}
+        <div className="relative p-3 w-3/12 h-full flex flex-col gap-3">
+            <button className="absolute left-2 -top-1 text-black text-5xl" onClick={onClose} title="Fermer">x</button>
+            <p className={`text-2xl font-bold text-center ${getStatus(team, gameState).color} font-bold`}>{getStatus(team, gameState).label}</p>
+            <p className="text-4xl font-bold text-center">{team.name ?? NO_VALUE}</p>
+            <div className="flex justify-center">
+                <img src={imgSrc ? imgSrc : "/images/missing_image.jpg"} alt="Photo de l'équipe"/>
             </div>
-            <div className="text-4xl font-bold text-center mb-4">
-                {team.name}
-            </div>
-            <div className="mb-4 flex justify-center">
-                <img
-                    src={imageSrc}
-                    alt=""
-                    className=""
+            <div className="flex flex-row justify-between items-center">
+                <IconValue color={team.sockets.length > 0 ? "green" : "red"} icon="dude" value={team.sockets.length ?? NO_VALUE} />
+                <IconValue color={team.battery >= 20 ? "green" : "red"} icon="battery" value={(team.battery ?? NO_VALUE) + "%"} />
+                <IconValue
+                    color={team.lastCurrentLocationDate != null && (Date.now() - team.lastCurrentLocationDate <= 30000) ? "green" : "red"}
+                    icon="location" value={formatDate(team.lastCurrentLocationDate)}
                 />
             </div>
-            <DotLine label="ID de capture" value={String(team.captureCode).padStart(4, '0')} />
-            <DotLine label="ID d'équipe" value={String(team.id).padStart(6, '0')} />
-            <div className="h-4" />
-            <DotLine label="Chasse" value={getTeamName(team.chasing) ?? "—"} />
-            <DotLine label="Chassé par" value={getTeamName(team.chased) ?? "—"} />
-            <div className="h-6" />
-            <DotLine label="Distance" value={team.distanceTravelled != null ? `${team.distanceTravelled.toFixed(2)} m` : "—"} />
-            <DotLine label="Temps de survie" value={team.timeAlive != null ? formatTime(team.timeAlive) : "—"} />
-            <DotLine label="Vitesse moyenne" value={team.averageSpeed != null ? `${team.averageSpeed.toFixed(2)} m/s` : "—"} />
-            <DotLine label="Captures" value={team.nCaptures ?? "—"} />
-            <DotLine label="Observations" value={team.nObservations ?? "—"} />
-            <DotLine label="Observé" value={team.nObserved ?? "—"} />
-            <DotLine label="Hors zone" value={team.outOfZone ? "Vrai" : "Faux" ?? "—"} />
+            <div>
+                <DotLine label="ID d'équipe" value={String(team.id).padStart(6, '0').replace(/(\d{3})(\d{3})/, "$1 $2")} />
+                <DotLine label="ID de capture" value={String(team.captureCode).padStart(4, '0')} />
+            </div>
+            <div>
+                <DotLine label="Chasse" value={getTeamName(team.chasing) ?? NO_VALUE} />
+                <DotLine label="Chassé par" value={getTeamName(team.chased) ?? NO_VALUE} />
+            </div>
+            <div>
+                <DotLine label="Distance" value={formatDistance(team.distance)} />
+                <DotLine label="Temps de survie" value={formatTime(startDate)} />
+                <DotLine label="Vitesse moyenne" value={formatSpeed(team.distance, startDate)} />
+                <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} />
+            </div>
         </div>
     );
-}
+}

traque-front/components/admin/teamList.jsx

@@ -2,7 +2,6 @@ import useAdmin from '@/hook/useAdmin';
 import { GameState } from '@/util/gameState';
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import React from 'react'
-import { useFormStatus } from 'react-dom';
 
 function reorder(list, startIndex, endIndex) {
     const result = Array.from(list);

traque-front/components/admin/teamManager.jsx

@@ -0,0 +1,82 @@
+import useAdmin from '@/hook/useAdmin';
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
+import React, { useState } from 'react'
+
+function reorder(list, startIndex, endIndex) {
+    const result = Array.from(list);
+    const [removed] = result.splice(startIndex, 1);
+    result.splice(endIndex, 0, removed);
+    return result;
+};
+
+function TeamListItem({ team, index }) {
+    const { removeTeam } = useAdmin();
+
+    function handleRemove() {
+        removeTeam(team.id);
+    }
+
+    return (
+        <Draggable draggableId={team.id.toString()} index={index} onClick={() => onSelected(team.id)}>
+            {provided => (
+                <div className='w-full p-2 bg-white flex flex-row items-center text-xl gap-3 font-bold' {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
+                    <div className='flex-1 w-full h-full flex flex-row items-center justify-between'>
+                        <p>{team.name}</p>
+                        <div className='flex flex-row items-center justify-between gap-3'>
+                            <p>{String(team.id).padStart(6, '0').replace(/(\d{3})(\d{3})/, "$1 $2")}</p>
+                            <img src="/icons/home.png" className="w-8 h-8" />
+                            <img src="/icons/home.png" className="w-8 h-8" onClick={handleRemove} />
+                        </div>
+                    </div>
+                </div>
+            )}
+        </Draggable>
+    );
+}
+
+export default function TeamList() {
+    const { teams, reorderTeams, addTeam } = useAdmin();
+    const [teamName, setTeamName] = useState('');
+    
+    function handleSubmit(e) {
+        e.preventDefault();
+        if (teamName !== "") {
+            addTeam(teamName);
+            setTeamName("")
+        }
+    }
+    
+    function onDragEnd(result) {
+        if (!result.destination) return;
+        if (result.destination.index === result.source.index) return;
+        const newTeams = reorder(teams, result.source.index, result.destination.index);
+        reorderTeams(newTeams);
+    }
+
+    return (
+        <div className='w-full h-full flex flex-col gap-3'>
+            <form className='w-full flex flex-row gap-3' onSubmit={handleSubmit}>
+                <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" />
+                </div>
+                <div className='w-1/5'>
+                    <button type="submit" className="w-full h-full bg-custom-light-blue hover:bg-blue-500 transition text-3xl font-bold">+</button>
+                </div>
+            </form>
+            <DragDropContext onDragEnd={onDragEnd} >
+                <Droppable droppableId='team-list'>
+                    {provided => (
+                        <ul className='w-full h-full gap-1 flex flex-col bg-gray-300 p-1' ref={provided.innerRef} {...provided.droppableProps}>
+                            {teams.map((team, i) => (
+                                <li key={team.id}>
+                                    <TeamListItem index={i} team={team} />
+                                </li>
+                            ))}
+                            {provided.placeholder}
+                        </ul>
+                    )}
+                </Droppable>
+            </DragDropContext>
+        </div>
+    );
+}

traque-front/components/admin/teamReady.jsx

@@ -1,18 +0,0 @@
-import useAdmin from "@/hook/useAdmin"
-
-export default function TeamReady() {
-    const {teams} = useAdmin();
-    return (
-        <div className='w-full h-full gap-1 bg-white p-10 flex flex-col text-center shadow-2xl overflow-y-scroll'>
-            <h2 className="text-2xl">Teams ready status</h2>
-            {teams.map((team) => team.ready ? (
-                <div key={team.id} className="p-2 text-white bg-green-500 shadow-md text-xl rounded flex flex-row">
-                    <div>{team.name} : Ready</div>
-                </div>) : (
-                <div key={team.id} className="p-2 text-white bg-red-500 shadow-md text-xl rounded flex flex-row">
-                    <div>{team.name} : Not ready</div>
-                </div>
-            ))}
-        </div>
-    );
-}

traque-front/components/admin/teamViewer.jsx

@@ -0,0 +1,60 @@
+import useAdmin from '@/hook/useAdmin';
+import { GameState } from '@/util/gameState';
+import React from 'react';
+
+const TEAM_STATUS = {
+    playing:    { label: "En jeu",          color: "text-custom-green" },
+    captured:   { label: "Capturée",        color: "text-custom-red" },
+    outofzone:  { label: "Hors zone",       color: "text-custom-orange" },
+    ready:      { label: "Placée",          color: "text-custom-green" },
+    notready:   { label: "Non placée",      color: "text-custom-red" },
+    waiting:    { label: "En attente",      color: "text-custom-grey" },
+};
+
+function getStatus(team, gamestate) {
+    switch (gamestate) {
+        case GameState.SETUP:
+            return TEAM_STATUS.waiting;
+        case GameState.PLACEMENT:
+            return team.ready ? TEAM_STATUS.ready : TEAM_STATUS.notready;
+        case GameState.PLAYING:
+            return team.captured ? TEAM_STATUS.captured : team.outofzone ? TEAM_STATUS.outofzone : TEAM_STATUS.playing;
+        case GameState.FINISHED:
+            return team.captured ? TEAM_STATUS.captured : TEAM_STATUS.playing;
+    }
+}
+
+function TeamListItem({ itemSelected, team }) {
+    const { gameState } = useAdmin();
+    const status = getStatus(team, gameState);
+
+    return (
+        <div className={'w-full p-2 bg-white flex flex-row gap-3 justify-between cursor-pointer' + (itemSelected ? " outline outline-4 outline-black" : "")}>
+            <div className='flex flex-row items-center gap-3'>
+                <div className='flex flex-row gap-1'>
+                    <img src={team.sockets.length > 0 ? "/icons/greendude.png" : "/icons/reddude.png"} className="w-4 h-4" />
+                    <img src={team.battery > 20 ? "/icons/greenbattery.png" : "/icons/redbattery.png"} className="w-4 h-4" />
+                    <img src={team.lastCurrentLocationDate != null && (Date.now() - team.lastCurrentLocationDate <= 30000) ? "/icons/greenlocation.png" : "/icons/redlocation.png"} className="w-4 h-4" />
+                </div>
+                <p className={`text-xl font-bold`}>{team.name}</p>
+            </div>
+            <p className={`text-xl font-bold ${status.color}`}>
+                {status.label}
+            </p>
+        </div>
+    );
+}
+
+export default function TeamList({selectedTeamId, onSelected}) {
+    const { teams } = useAdmin();
+
+    return (
+        <ul className='h-full gap-1 flex flex-col'>
+            {teams.map((team) => (
+                <li key={team.id} onClick={() => onSelected(team.id)}>
+                    <TeamListItem itemSelected={selectedTeamId === team.id} team={team} />
+                </li>
+            ))}
+        </ul>
+    );
+}

traque-front/components/util/section.jsx

@@ -0,0 +1,14 @@
+export function Section({title, className, children}) {
+    return (
+        <div className={className}>
+            <div className='w-full h-full flex flex-col shadow-2xl'>
+                <div className='w-full p-1 bg-custom-light-blue text-center'>
+                    <h2 className="text-l">{title}</h2>
+                </div>
+                <div className='w-full h-full p-3 bg-white'>
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+}