Mise en page complète + liaison partielle au backend

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>
+    );
+}