Merge

traque-front/Dockerfile

@@ -1,57 +1,18 @@
 # Use Node 22 alpine as parent image
 FROM node:22-alpine AS base
 
-# Install dependencies only when needed
-FROM base AS deps
-# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
-RUN apk add --no-cache libc6-compat
 WORKDIR /app
 
+RUN apk add --no-cache libc6-compat
+
 COPY package.json package-lock.json* ./
-RUN npm ci
+RUN npm install
 
-
-# Rebuild the source code only when needed
-FROM base AS builder
-WORKDIR /app
-COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
-# Next.js collects completely anonymous telemetry data about general usage.
+ENV NODE_ENV development
-# Learn more here: https://nextjs.org/telemetry
-# Uncomment the following line in case you want to disable telemetry during the build.
 ENV NEXT_TELEMETRY_DISABLED 1
 
-RUN npm run build
-
-# Production image, copy all the files and run next
-FROM base AS runner
-WORKDIR /app
-
-ENV NODE_ENV production
-# Uncomment the following line in case you want to disable telemetry during runtime.
-ENV NEXT_TELEMETRY_DISABLED 1
-
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
-
-COPY --from=builder /app/public ./public
-
-# Set the correct permission for prerender cache
-RUN mkdir .next
-RUN chown nextjs:nodejs .next
-
-# Automatically leverage output traces to reduce image size
-# https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
-COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
-
-USER nextjs
-
 EXPOSE 3000
 
-ENV PORT 3000
+CMD ["npm", "run", "dev"]
-
-# server.js is created by next build from the standalone output
-# https://nextjs.org/docs/pages/api-reference/next-config-js/output
-CMD HOSTNAME="0.0.0.0" node server.js

traque-front/app/admin/layout.js

@@ -6,18 +6,9 @@ export default function AdminLayout({ children }) {
     return (
         <AdminConnexionProvider>
             <AdminProvider>
-                <div className='h-full flex flex-col'>
-                    <div className="text-xl max-h-15 bg-gray-800 text-white  flex items-center justify-left">
-                        <ul className='flex' >
-                            <Link href="/admin"><li className="p-5 bg-gray-800 hover:bg-gray-600 transition-all cursor-pointer h-full">Admin</li></Link>
-                            <Link href="/admin/teams"><li className="p-5 bg-gray-800 hover:bg-gray-600 transition-all cursor-pointer h-full">Teams</li></Link>
-                            <Link href="/admin/parameters"><li className="p-5 bg-gray-800 hover:bg-gray-600 transition-all cursor-pointer h-full">Parameters</li></Link>
-                        </ul> 
-                    </div>
                 <div className="h-full overflow-y-scroll">
                     {children}
                 </div>
-                </div>
             </AdminProvider>
         </AdminConnexionProvider>
     );

traque-front/app/admin/page.js

@@ -1,36 +1,111 @@
 "use client";
-import TeamReady from "@/components/admin/teamReady";
-import { BlueButton, GreenButton, RedButton } from "@/components/util/button";
 import { useAdminConnexion } from "@/context/adminConnexionContext";
 import useAdmin from "@/hook/useAdmin";
-import { GameState } from "@/util/gameState";
 import dynamic from "next/dynamic";
+import TeamList from '@/components/admin/teamList';
+import React, { useState } from 'react'
+import TeamAddForm from '@/components/admin/teamAdd';
+import Link from "next/link";
+import TeamInformation from "@/components/admin/teamInformation";
 
 // Imported at runtime and not at compile time
 const LiveMap = dynamic(() => import('@/components/admin/liveMap'), { ssr: false });
 
 export default function AdminPage() {
     const { useProtect } = useAdminConnexion();
-    const { gameState, changeState } = useAdmin();
+    const [selectedTeamId, setSelectedTeamId] = useState(null);
-
+    const { addTeam, gameState, changeState, teams } = useAdmin();
     useProtect();
     
     return (
-        <div className='min-h-full bg-gray-200 p-10 flex flex-row content-start gap-5'>
+        <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-white p-10 flex flex-col text-center shadow-2xl '>
+                <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-2xl">Game state</h2>
+                    <h2 className="text-4xl font-bold">Page Principale</h2>
-                    <strong className="p-5 bg-gray-900 text-white text-xl rounded">Current : {gameState}</strong>
+                </div>
-                    <div className="flex flex-row">
+                <div className='w-full mb-5 h-1/2 gap-3 bg-white flex flex-col'>
-                        <RedButton onClick={() => changeState(GameState.SETUP)}>Reset game</RedButton>
+                    <div className='w-full gap-3 bg-custom-light-blue flex flex-col items-center justify-center text-middle shadow-2xl p-1'>
-                        <GreenButton onClick={() => changeState(GameState.PLACEMENT)}>Start placement</GreenButton>
+                        <h2 className="text-2xl">Contrôle</h2>
-                        <BlueButton onClick={() => changeState(GameState.PLAYING)}>Start game</BlueButton>
+                    </div>
+                    <div className="flex flex-row justify-between items-center px-6 py-3">
+                        <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" 
+                            title="Accéder aux paramètres du jeu">
+                            <img src="/icons/parameters.png" className="w-10 h-10" />
+                        </Link>
+                        <button 
+                            className="w-[4.5rem] h-[4.5rem] bg-custom-light-blue rounded-lg hover:bg-blue-500 transition flex items-center justify-center" 
+                            title="Reprendre la partie">
+                            <img src="/icons/play.png" className="w-10 h-10" />
+                        </button>
+                        <button 
+                            className="w-[4.5rem] h-[4.5rem] bg-custom-light-blue rounded-lg hover:bg-blue-500 transition flex items-center justify-center" 
+                            title="Réinitialiser la partie">
+                            <img src="/icons/reset.png" className="w-10 h-10" />
+                        </button>
+                        <button 
+                            className="w-[4.5rem] h-[4.5rem] bg-custom-light-blue rounded-lg hover:bg-blue-500 transition flex items-center justify-center" 
+                            title="Commencer les placements">
+                            <img src="/icons/placement.png" className="w-10 h-10" />
+                        </button>
+                        <button 
+                            className="w-[4.5rem] h-[4.5rem] bg-custom-light-blue rounded-lg hover:bg-blue-500 transition flex items-center justify-center" 
+                            title="Lancer la traque">
+                            <img src="/icons/begin.png" className="w-10 h-10" />
+                        </button>
                     </div>
                 </div>
-                {gameState == GameState.PLACEMENT && <TeamReady />}
+                <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>
+                    </div>
+                    <div className="items-center px-6 py-3">
+                        <TeamList selectedTeamId={selectedTeamId} onSelected={setSelectedTeamId}/>
+                    </div>
+                </div>
+            </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>
+                <div className='w-full flex flex-row gap-10 items-center px-6 relative'>
+                    <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">
+                        <img src="/icons/mapstyle.png" className="w-10 h-10" />
+                    </button>
+                    <button 
+                        className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center"
+                        title ="Afficher/cacher les zones">
+                        <img src="/icons/zones.png" className="w-10 h-10" />
+                    </button>
+                    <button 
+                        className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center"
+                        title ="Afficher/cacher les noms des équipes">
+                        <img src="/icons/names.png" className="w-10 h-10" />
+                    </button>
+                    <button 
+                        className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center"
+                        title ="Afficher/cacher les relations de traque">
+                        <img src="/icons/arrows.png" className="w-10 h-10" />
+                    </button>
+                    <button 
+                        className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center"
+                        title ="Afficher/cacher les incertitudes de position">
+                        <img src="/icons/incertitude.png" className="w-10 h-10" />
+                    </button>
+                    <button 
+                        className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center"
+                        title ="Afficher/cacher les chemins des équipes">
+                        <img src="/icons/path.png" className="w-10 h-10" />
+                    </button>
+                    <button 
+                        className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center"
+                        title ="Afficher/cacher les événements">
+                        <img src="/icons/informations.png" className="w-10 h-10" />
+                    </button>
                 </div>
-            <div className='grow flex-1 row-span-2 bg-white p-10 flex shadow-2xl'>
-                <LiveMap />
             </div>
         </div>
     )

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

@@ -2,11 +2,15 @@
 import GameSettings from "@/components/admin/gameSettings";
 import { useAdminConnexion } from "@/context/adminConnexionContext";
 import dynamic from "next/dynamic";
+import TeamAddForm from '@/components/admin/teamAdd';
+import useAdmin from '@/hook/useAdmin';
+import Link from "next/link";
 
 // Imported at runtime and not at compile time
 const ZoneSelector = dynamic(() => import('@/components/admin/polygonZoneMap'), { ssr: false });
 
 export default function AdminPage() {
+    const { addTeam } = useAdmin();
     const { useProtect } = useAdminConnexion();
     
     useProtect();
@@ -14,6 +18,13 @@ export default function AdminPage() {
     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" />
+                    </Link>
+                    <h2 className="text-4xl font-bold">Paramètres</h2>
+                </div>
+                <TeamAddForm onAddTeam={addTeam}/>
                 <GameSettings />
             </div>
             <div className="h-full w-full">

traque-front/components/admin/mapPicker.jsx

@@ -0,0 +1,268 @@
+"use client";
+import { useLocation } from "@/hook/useLocation";
+import { useEffect, useState, useRef, useCallback } from "react";
+import "leaflet/dist/leaflet.css";
+import { Circle, MapContainer, Marker, TileLayer, useMap, Tooltip, Polyline } from "react-leaflet";
+import { useMapCircleDraw } from "@/hook/mapDrawing";
+import useAdmin from "@/hook/useAdmin";
+import { GameState } from "@/util/gameState";
+import L from "leaflet";
+import { createPortal } from "react-dom";
+import TeamInformation from "@/components/admin/teamInformation";
+
+
+function MapActionControl({ onClick, children }) {
+    const map = useMap();
+
+    useEffect(() => {
+        const controlDiv = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
+        controlDiv.style.background = 'rgba(0,0,0,0.25)';
+        controlDiv.style.borderRadius = '9999px';
+        controlDiv.style.padding = '8px';
+        controlDiv.style.border = 'none';
+        controlDiv.title = "Plein écran";
+        controlDiv.style.display = "flex";
+        controlDiv.style.alignItems = "center";
+        controlDiv.style.justifyContent = "center";
+        controlDiv.style.width = "56px";
+        controlDiv.style.height = "56px";
+        controlDiv.onclick = onClick;
+        controlDiv.innerHTML = `<img src="./icons/fullscreen.png" alt="" style="width:36px;height:36px;" />`;
+        const customControl = L.control({ position: 'bottomleft' });
+        customControl.onAdd = () => controlDiv;
+        customControl.addTo(map);
+
+        return () => {
+            customControl.remove();
+        };
+    }, [map, onClick, children]);
+
+    return null;
+}
+
+function LeafletSidePanel({ show, onClose, children }) {
+    const map = useMap();
+    const panelRef = useRef(document.createElement("div"));
+
+    useEffect(() => {
+        const panelDiv = panelRef.current;
+        panelDiv.className = "leaflet-control leaflet-control-custom";
+
+
+        const control = L.control({ position: "topright" });
+        control.onAdd = () => panelDiv;
+        if (show) control.addTo(map);
+
+        return () => {
+            control.remove();
+        };
+    }, [map, show]);
+
+    if (!show) return null;
+
+    return createPortal(
+        <>
+            <button
+                style={{
+                    position: "absolute",
+                    top: "1rem",
+                    right: "1rem",
+                    fontSize: "3rem",
+                    background: "none",
+                    border: "none",
+                    cursor: "pointer",
+                    color: "#888"
+                }}
+                onClick={onClose}
+                title="Fermer"
+            >
+                ×
+            </button>
+            {children}
+        </>,
+        panelRef.current
+    );
+}
+
+const positionIcon = new L.Icon({
+    iconUrl: '/icons/location.png',
+    iconSize: [30, 30],
+    iconAnchor: [15, 15],
+    popupAnchor: [0, -15],
+    shadowSize: [30, 30],
+});
+
+function MapPan(props) {
+    const map = useMap();
+    const [initialized, setInitialized] = useState(false);
+
+    useEffect(() => {
+        if (!initialized && props.center) {
+            map.flyTo(props.center, props.zoom, { animate: false });
+            setInitialized(true)
+        }
+    }, [props.center]);
+    return null;
+}
+
+function MapEventListener({ onClick, onMouseMove }) {
+    const map = useMap();
+    useEffect(() => {
+        map.on('click', onClick);
+        return () => {
+            map.off('click', onClick);
+        }
+    }, [onClick]);
+    useEffect(() => {
+        map.on('mousemove', onMouseMove);
+        return () => {
+            map.off('mousemove', onMouseMove);
+        }
+    });
+    return null;
+}
+
+const DEFAULT_ZOOM = 14;
+export function CircularAreaPicker({ area, setArea, markerPosition, ...props }) {
+    const location = useLocation(Infinity);
+    const { handleClick, handleMouseMove, center, radius } = useMapCircleDraw(area, setArea);
+    return (
+        <MapContainer  {...props} className='min-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"
+            />
+            {center && radius && <Circle center={center} radius={radius} fillColor="blue" />}
+            {markerPosition && <Marker position={markerPosition} icon={positionIcon}>
+            </Marker>}
+            <MapPan center={location} zoom={DEFAULT_ZOOM} />
+            <MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
+        </MapContainer>)
+}
+export const EditMode = {
+    MIN: 0,
+    MAX: 1
+}
+export function ZonePicker({ minZone, setMinZone, maxZone, setMaxZone, editMode, ...props }) {
+    const location = useLocation(Infinity);
+    const { handleClick: maxClick, handleMouseMove: maxHover, center: maxCenter, radius: maxRadius } = useMapCircleDraw(minZone, setMinZone);
+    const { handleClick: minClick, handleMouseMove: minHover, center: minCenter, radius: minRadius } = useMapCircleDraw(maxZone, setMaxZone);
+    function handleClick(e) {
+        if (editMode == EditMode.MAX) {
+            maxClick(e);
+        } else {
+            minClick(e);
+        }
+    }
+    function handleMouseMove(e) {
+        if (editMode == EditMode.MAX) {
+            maxHover(e);
+        } else {
+            minHover(e);
+        }
+    }
+
+    return (
+        <div>
+            <div className='h-96'>
+            <MapContainer  {...props} className='min-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"
+                />
+                {minCenter && minRadius && <Circle center={minCenter} radius={minRadius} color="blue" fillColor="blue" />}
+                {maxCenter && maxRadius && <Circle center={maxCenter} radius={maxRadius} color="red" fillColor="red" />}
+                <MapPan center={location} zoom={DEFAULT_ZOOM} />
+                <MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
+            </MapContainer>
+        </div>
+        { maxCenter && minCenter && typeof maxCenter.distanceTo === 'function' 
+            && maxRadius + maxCenter.distanceTo(minCenter) >= minRadius
+            && <p className="text-red-500">La zone de fin doit être incluse dans celle de départ</p>}
+        </div>
+        
+    )
+}
+
+export function LiveMap({ selectedTeamId, setSelectedTeamId }) {
+    const location = useLocation(Infinity);
+    const [timeLeftNextZone, setTimeLeftNextZone] = useState(null);
+    const { zone, zoneExtremities, teams, nextZoneDate, isShrinking , getTeam, gameState } = useAdmin();
+
+    function handleMarkerClick(teamId) {
+        setSelectedTeamId(teamId);
+    }
+
+    const mapWrapperRef = useRef(null);
+
+    const handleFullscreen = useCallback(() => {
+        const el = mapWrapperRef.current;
+        if (!el) return;
+        if (!document.fullscreenElement) {
+            el.requestFullscreen();
+        } else {
+            document.exitFullscreen();
+        }
+    }, []);
+
+    // Remaining time before sending position
+    useEffect(() => {
+        const updateTime = () => {
+            setTimeLeftNextZone(Math.max(0, Math.floor((nextZoneDate - Date.now()) / 1000)));
+        };
+    
+        updateTime();
+        const interval = setInterval(updateTime, 1000);
+    
+        return () => clearInterval(interval);
+    }, [nextZoneDate]);
+
+    function formatTime(time) {
+        // time is in seconds
+        if (time < 0) return "00:00";
+        const minutes = Math.floor(time / 60);
+        const seconds = Math.floor(time % 60);
+        return String(minutes).padStart(2,"0") + ":" + String(seconds).padStart(2,"0");
+    }
+
+    function Arrow({pos1, pos2}) {
+        if (pos1 && pos2) {
+            return (
+                <Polyline positions={[pos1, pos2]} pathOptions={{ color: 'black', weight: 3 }}/>
+            )
+        } else {
+            return null;
+        }
+    }
+
+    return (
+        <div className='h-full w-full' ref ={mapWrapperRef}>
+            {gameState == GameState.PLAYING && <p>{`${isShrinking ? "Fin" : "Début"} du rétrécissement de la zone dans : ${formatTime(timeLeftNextZone)}`}</p>}
+            <MapContainer className='min-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"
+                />
+                <MapPan center={location} zoom={DEFAULT_ZOOM} />
+                {gameState == GameState.PLAYING && zone && <Circle center={zone.center} radius={zone.radius} color="blue" />}
+                {gameState == GameState.PLAYING && zoneExtremities && <Circle center={zoneExtremities.begin.center} radius={zoneExtremities.begin.radius} color='black' fill={false} />}
+                {gameState == GameState.PLAYING && zoneExtremities && <Circle center={zoneExtremities.end.center} radius={zoneExtremities.end.radius} color='red' fill={false} />}
+                {teams.map((team) => team.currentLocation && !team.captured &&
+                    <Marker key={team.id} position={team.currentLocation} icon={positionIcon}>
+                        <Tooltip permanent direction="top" offset={[0, -5]} className="custom-tooltip">{team.name}</Tooltip>
+                        <Arrow pos1={team.currentLocation} pos2={getTeam(team.chasing).currentLocation}/>
+                    </Marker>
+                )}
+                <MapActionControl onClick={handleFullscreen}/>
+            {selectedTeamId && (
+                <LeafletSidePanel show={true} onClose={() => setSelectedTeamId(null)}>
+                    <TeamInformation
+                        selectedTeamId={selectedTeamId}
+                        onClose={() => setSelectedTeamId(null)}
+                    />
+                </LeafletSidePanel>
+            )}
+            </MapContainer>
+        </div>
+    )
+}

traque-front/components/admin/teamAdd.jsx

@@ -1,6 +1,4 @@
 import { useState } from 'react'
-import { TextInput } from '../util/textInput'
-import { BlueButton } from '../util/button'
 
 export default function TeamAddForm({onAddTeam}) {
     const [teamName, setTeamName] = useState('');
@@ -14,12 +12,12 @@ export default function TeamAddForm({onAddTeam}) {
     }
     
     return (
-        <form className='flex flex-row m-y-5' onSubmit={handleSubmit}>
+        <form className='flex flex-row m-y-5 mb-3' onSubmit={handleSubmit}>
             <div className='w-4/5'>
-                <TextInput name="teamName" label='Team name' value={teamName} onChange={(e) => setTeamName(e.target.value)}/>
+                <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'>
-                <BlueButton type="submit" className="w-5">+</BlueButton>
+                <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

@@ -0,0 +1,75 @@
+import useAdmin from "@/hook/useAdmin";
+
+function DotLine({ label, value }) {
+    return (
+        <div className="flex items-center">
+            <span className="text-lg">{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>
+        </div>
+    );
+}
+
+// ...existing imports...
+
+export default function TeamInformation({ selectedTeamId, onClose }) {
+    const { getTeam, getTeamName, teams } = useAdmin();
+    const team = getTeam(selectedTeamId);
+
+    if (!team) return null;
+
+    function formatTime(seconds) {
+        if (!seconds || seconds < 0) return "—";
+        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";
+
+    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>
+            <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>
+            <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>
+    );
+}

traque-front/components/admin/teamList.jsx

@@ -1,6 +1,8 @@
 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);
@@ -9,15 +11,33 @@ function reorder(list, startIndex, endIndex) {
     return result;
 };
 
-function TeamListItem({ team, index, onSelected, itemSelected }) {
+const TEAM_STATUS = {
-    const bgColor = team.captured ? " bg-red-400" : " bg-gray-300";
+  playing:    { label: "En jeu",           color: "text-custom-green" },
-    const border = " border border-4 " + (itemSelected ? "border-black" : team.captured ? "border-red-400" : "border-gray-300");
+  captured:   { label: "Capturée",        color: "text-custom-red" },
-    const classNames = 'w-full p-3 my-3' + (bgColor) + (border);
+  outofzone:  { label: "Hors zone",       color: "text-custom-orange" },
+  ready:      { label: "Prête",           color: "text-custom-blue" },
+  notready:   { label: "En préparation",  color: "text-custom-grey" },
+};
+
+function TeamListItem({ team, index, onSelected, itemSelected, gamestate }) {
+    console.log(gamestate === GameState.PLAYING ? "En jeu" : "En préparation");
+    const status = gamestate === GameState.PLAYING ? (team.captured ? TEAM_STATUS.captured : (team.outofzone ? TEAM_STATUS.outofzone : TEAM_STATUS.playing)) : (team.ready ? TEAM_STATUS.ready : TEAM_STATUS.notready);
     return (
         <Draggable draggableId={team.id.toString()} index={index} onClick={() => onSelected(team.id)}>
             {provided => (
-                <div className={classNames} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
+                <div className='w-full p-2 bg-white border-2 border-gray-300 flex flex-row items-center text-3xl gap-3 font-bold' {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
+                    <div className="w-12 h-12 grid grid-cols-2 grid-rows-2 gap-1">
+                        <img src="/icons/greendude.png" className="w-6 h-6 object-contain" />
+                        <img src="/icons/greenlocation.png" className="w-6 h-6 object-contain" />
+                        <img src="/icons/greenconnection.png" className="w-6 h-6 object-contain" />
+                        <img src="/icons/greenbattery.png" className="w-6 h-6 object-contain" />
+                    </div>
+                    <div className='flex-1 w-full h-full flex flex-row items-center justify-between'>
                         <p className='text-center'>{team.name}</p>
+                        <p className={`text-center ${status.color}`}>
+                            {status.label}
+                        </p>
+                    </div>
                 </div>
 
             )}
@@ -26,8 +46,7 @@ function TeamListItem({ team, index, onSelected, itemSelected }) {
 }
 
 export default function TeamList({selectedTeamId, onSelected}) {
-    const {teams, reorderTeams} = useAdmin();
+    const {teams, reorderTeams, gameState} = useAdmin();
-
     function onDragEnd(result) {
         if (!result.destination) return;
         if (result.destination.index === result.source.index) return;
@@ -42,7 +61,7 @@ export default function TeamList({selectedTeamId, onSelected}) {
                     <ul ref={provided.innerRef} {...provided.droppableProps}>
                         {teams.map((team, i) => (
                             <li key={team.id} onClick={() => onSelected(team.id)}>
-                                <TeamListItem onSelected={onSelected} index={i} itemSelected={selectedTeamId === team.id} team={team} />
+                                <TeamListItem onSelected={onSelected} index={i} itemSelected={selectedTeamId === team.id} team={team} gamestate={gameState} />
                             </li>
                         ))}
                         {provided.placeholder}

traque-front/tailwind.config.js

@@ -1,5 +1,17 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        'custom-green': '#19e119',
+        'custom-red': '#e11919',
+        'custom-orange': '#fa6400',
+        'custom-blue': '#1e90ff',
+        'custom-grey': '#808080',
+        'custom-light-blue': '#80b3ff'
+      }
+    }
+  },
   mode: 'jit',
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",