finished main page and started parameters

traque-front/Dockerfile

@@ -1,56 +1,17 @@
-FROM node:22-alpine AS base
+FROM node:22-alpine
 
-# 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/page.js

@@ -7,6 +7,7 @@ import React, { useState } from 'react'
 import TeamEdit from '@/components/admin/teamEdit';
 import TeamAddForm from '@/components/admin/teamAdd';
 import Link from "next/link";
+import TeamInformation from "@/components/admin/teamInformation";
 
 const LiveMap = dynamic(() => import('@/components/admin/mapPicker').then((mod) => mod.LiveMap), {
     ssr: false
@@ -29,7 +30,7 @@ export default function AdminPage() {
                     </div>
                     <div className="flex flex-row justify-between items-center px-6 py-3">
                         <Link 
-                            href="/admin/teams"
+                            href="/admin/parameters"
                             className="w-[4.5rem] h-[4.5rem] bg-blue-400 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" />
@@ -61,16 +62,15 @@ export default function AdminPage() {
                         <h2 className="text-2xl">Équipes</h2>
                     </div>
                     <div className="items-center px-6 py-3">
-                        <TeamAddForm onAddTeam={addTeam}/>
                         <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">
+                <div className="flex-1 flex items-center justify-center bg-gray-200 mb-5 relative">
-                    <LiveMap/>
+                    <LiveMap selectedTeamId={selectedTeamId} setSelectedTeamId={setSelectedTeamId} />
                 </div>
-                <div className='w-full flex flex-row gap-10 items-center px-6'>
+                <div className='w-full flex flex-row gap-10 items-center px-6 relative'>
                     <button 
                         className="w-16 h-16 bg-blue-400 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

@@ -5,6 +5,7 @@ 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";
 
 const ZoneSelector = dynamic(() => import('@/components/admin/zoneSelector').then((mod) => mod.ZoneSelector), {
     ssr: false
@@ -14,8 +15,14 @@ export default function AdminPage() {
     const { useProtect } = useAdminConnexion();
     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="h-full w-2/5">
+                <div className='w-full mb-5 h-full gap-3 bg-blue-400 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>

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"}`}>
+                        <p className={`text-center ${status.color}`}>
-                            {team.state === team.captured ? "En jeu" : "Capturé"}
+                            {status.label}
                         </p>
                     </div>
                 </div>

traque-front/hook/useAdmin.jsx

@@ -11,6 +11,7 @@ export default function useAdmin() {
     }
 
     function getTeam(teamId) {
+        console.log(teams[0]);
         return teams.find(team => team.id === teamId);
     }
 

traque-front/tailwind.config.js

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