finished main page and started parameters

traque-front/components/admin/mapPicker.jsx

@@ -7,6 +7,8 @@ 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 }) {
@@ -38,6 +40,50 @@ function MapActionControl({ 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],
@@ -138,11 +184,15 @@ export function ZonePicker({ minZone, setMinZone, maxZone, setMaxZone, editMode,
     )
 }
 
-export function LiveMap() {
+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(() => {
@@ -204,6 +254,14 @@ export function LiveMap() {
                     </Marker>
                 )}
                 <MapActionControl onClick={handleFullscreen}/>
+            {selectedTeamId && (
+                <LeafletSidePanel show={true} onClose={() => setSelectedTeamId(null)}>
+                    <TeamInformation
+                        selectedTeamId={selectedTeamId}
+                        onClose={() => setSelectedTeamId(null)}
+                    />
+                </LeafletSidePanel>
+            )}
             </MapContainer>
         </div>
     )

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

@@ -2,6 +2,7 @@
 import useAdmin from '@/hook/useAdmin';
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import React from 'react'
+import { useFormStatus } from 'react-dom';
 
 const reorder = (list, startIndex, endIndex) => {
   const result = Array.from(list);
@@ -11,7 +12,16 @@ const reorder = (list, startIndex, endIndex) => {
   return result;
 };
 
-function TeamListItem({ team, index, onSelected, itemSelected }) {;
+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: "Prête",           color: "text-custom-blue" },
+  notready:   { label: "En préparation",  color: "text-custom-grey" },
+};
+
+function TeamListItem({ team, index, onSelected, itemSelected }) {
+    const status = TEAM_STATUS.captured; //Il faudrait ici implementer la logique, ce qui est normalement pas trop difficile
     return (
         <Draggable draggableId={team.id.toString()} index={index} onClick={() => onSelected(team.id)}>
             {provided => (
@@ -24,8 +34,8 @@ function TeamListItem({ team, index, onSelected, itemSelected }) {;
                     </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 ${team.state === "En jeu" ? "text-green-600" : "text-red-600"}`}>
-                            {team.state === team.captured ? "En jeu" : "Capturé"}
+                        <p className={`text-center ${status.color}`}>
+                            {status.label}
                         </p>
                     </div>
                 </div>