Restructuration of the project folders

server/traque-front/app/admin/components/liveMap.jsx

@@ -0,0 +1,80 @@
+import { Fragment, useEffect, useState } from "react";
+import { Arrow, CircleZone, PolygonZone, Position, Tag } from "@/components/layer";
+import { CustomMapContainer, MapEventListener, MapPan } from "@/components/map";
+import useAdmin from "@/hook/useAdmin";
+import { GameState, ZoneTypes } from "@/util/types";
+import { mapZooms } from "@/util/configurations";
+
+export default function LiveMap({ selectedTeamId, onSelected, isFocusing, setIsFocusing, mapStyle, showZones, showNames, showArrows }) {
+    const { zoneType, zoneExtremities, teams, nextZoneDate, getTeam, gameState } = useAdmin();
+    const [timeLeftNextZone, setTimeLeftNextZone] = useState(null);
+    const [isFullScreen, setIsFullScreen] = useState(false);
+
+    useEffect(() => {
+        if (nextZoneDate) {
+            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 || 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 Zones() {
+        if (!(showZones && gameState == GameState.PLAYING)) return null;
+
+        switch (zoneType) {
+            case ZoneTypes.CIRCLE:
+                return (<>
+                    <CircleZone circle={zoneExtremities.begin} color={mapStyle.currentZoneColor} />
+                    <CircleZone circle={zoneExtremities.end} color={mapStyle.nextZoneColor} />
+                </>);
+            case ZoneTypes.POLYGON:
+                return (<>
+                    <PolygonZone polygon={zoneExtremities.begin?.polygon} color={mapStyle.currentZoneColor} />
+                    <PolygonZone polygon={zoneExtremities.end?.polygon} color={mapStyle.nextZoneColor} />
+                </>);
+            default:
+                return null;
+        }
+    }
+
+    return (
+        <div className={`${isFullScreen ? "fixed inset-0 z-[9999]" : "relative h-full w-full"}`}>
+            <CustomMapContainer mapStyle={mapStyle}>
+                {isFocusing && <MapPan center={getTeam(selectedTeamId)?.currentLocation} zoom={mapZooms.high} animate />}
+                <MapEventListener onDragStart={() => setIsFocusing(false)} onWheel={() => setIsFocusing(false)} />
+                <Zones/>
+                {teams.map((team) => team && <Fragment key={team.id}>
+                    <CircleZone circle={team.startingArea} color={mapStyle.placementZoneColor} display={gameState == GameState.PLACEMENT && showZones}>
+                        <Tag text={team.name} display={showNames} />
+                    </CircleZone>
+                    <Arrow pos1={team.currentLocation} pos2={getTeam(team.chasing)?.currentLocation} color={mapStyle.arrowColor} display={showArrows}/>
+                    <Position position={team.currentLocation} color={mapStyle.playerColor} onClick={() => onSelected(team.id)} display={!team.captured}>
+                        <Tag text={team.name} display={showNames} />
+                    </Position>
+                </Fragment>)}
+            </CustomMapContainer>
+            { gameState == GameState.PLAYING &&
+                <div className="absolute top-4 left-1/2 -translate-x-1/2 z-[1000] pointer-events-none flex flex-col items-center bg-white p-2 rounded-lg shadow-lg drop-shadow">
+                    <p className="text-sm">Durée zone</p>
+                    <p className="text-2xl font-bold">{formatTime(timeLeftNextZone)}</p>
+                </div>
+            }
+            <button className="absolute top-4 right-4 z-[1000] cursor-pointer bg-white p-3 rounded-full shadow-lg drop-shadow" onClick={() => setIsFullScreen(!isFullScreen)}>
+                <img src={`/icons/fullscreen.png`} className="w-8 h-8" />
+            </button>
+        </div>
+    )
+}

server/traque-front/app/admin/components/teamSidePanel.jsx

@@ -0,0 +1,125 @@
+import { env } from 'next-runtime-env';
+import { useEffect, useState } from "react";
+import useAdmin from "@/hook/useAdmin";
+import { getStatus } from '@/util/functions';
+import { Colors, GameState } from '@/util/types';
+
+function DotLine({ label, value }) {
+    return (
+        <div className="flex items-center">
+            <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="whitespace-nowrap text-m">{value}</span>
+        </div>
+    );
+}
+
+function IconValue({ color, icon, value }) {
+    return (
+        <div className="flex flex-row gap-2">
+            <img src={`/icons/${icon}/${color}.png`} className="w-6 h-6" />
+            <p style={{color: Colors[color]}}>{value}</p>
+        </div>
+    );
+}
+
+export default function TeamSidePanel({ selectedTeamId, onClose }) {
+    const { getTeam, startDate, gameState } = useAdmin();
+    const [imgSrc, setImgSrc] = useState("");
+    const [_, setRefreshKey] = useState(0);
+    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;
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setRefreshKey(prev => prev + 1);
+        }, 1000);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    function formatTime(startDate, endDate) {
+        // startDate in milliseconds
+        if (endDate == null || startDate == null || startDate < 0) return NO_VALUE + ":" + NO_VALUE;
+        const seconds = Math.floor((endDate - startDate) / 1000);
+        const m = Math.floor(seconds / 60);
+        const s = Math.floor(seconds % 60);
+        return `${m}:${s.toString().padStart(2, "0")}`;
+    }
+
+    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, endDate) {
+        // distance in meters | startDate in milliseconds
+        if (distance == null || distance < 0 || endDate == null || startDate == null || endDate <= startDate) return NO_VALUE + "km/h";
+        const speed = distance / (endDate - 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="w-full h-full relative flex flex-col p-3 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" style={{color: getStatus(team, gameState).color}}>{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="flex flex-row justify-between items-center">
+                <IconValue color={team.sockets.length > 0 ? "green" : "red"} icon="user" value={team.sockets?.length ?? NO_VALUE} />
+                <IconValue color={team.battery >= 20 ? "green" : "red"} icon="battery" value={(team.battery ?? NO_VALUE) + "%"} />
+                <IconValue
+                    color={team.lastCurrentLocationDate && (Date.now() - team.lastCurrentLocationDate <= 30000) ? "green" : "red"}
+                    icon="location" value={formatDate(team.lastCurrentLocationDate)}
+                />
+            </div>
+            <div>
+                <DotLine label="ID d'équipe" value={String(selectedTeamId).padStart(6, '0').replace(/(\d{3})(\d{3})/, "$1 $2")} />
+                <DotLine label="ID de capture" value={team.captureCode ? String(team.captureCode).padStart(4, '0') : NO_VALUE} />
+            </div>
+            { gameState != GameState.FINISHED &&
+                <div>
+                    <DotLine label="Chasse" value={getTeam(team.chasing)?.name ?? NO_VALUE} />
+                    <DotLine label="Chassé par" value={getTeam(team.chased)?.name ?? NO_VALUE} />
+                </div>
+            }
+            { (gameState == GameState.PLAYING || gameState == GameState.FINISHED) &&
+                <div>
+                    <DotLine label="Distance" value={formatDistance(team.distance)} />
+                    <DotLine label="Temps de survie" value={formatTime(startDate, team.finishDate || Date.now())} />
+                    <DotLine label="Vitesse moyenne" value={formatSpeed(team.distance, startDate, team.finishDate || Date.now())} />
+                    <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>
+    );
+}

server/traque-front/app/admin/components/teamViewer.jsx

@@ -0,0 +1,46 @@
+import { List } from '@/components/list';
+import useAdmin from '@/hook/useAdmin';
+import { getStatus } from '@/util/functions';
+import { useMemo } from 'react';
+
+function TeamViewerItem({ team }) {
+    const { gameState } = useAdmin();
+    const status = getStatus(team, gameState);
+    const NO_VALUE = "XX";
+
+    return (
+        <div className={`w-full flex flex-row gap-3 p-2 ${team.captured ? 'bg-gray-200' : 'bg-white'} justify-between`}>
+            <div className='flex flex-row items-center gap-3'>
+                <div className='flex flex-row gap-1'>
+                    <img src={`/icons/user/${team.sockets.length > 0 ? "green" : "red"}.png`} className="w-4 h-4" />
+                    <img src={`/icons/battery/${team.battery >= 20 ? "green" : "red"}.png`} className="w-4 h-4" />
+                    <img src={`/icons/location/${team.lastCurrentLocationDate && (Date.now() - team.lastCurrentLocationDate <= 30000) ? "green" : "red"}.png`} className="w-4 h-4" />
+                </div>
+                <p className="text-xl font-bold">{team.name ?? NO_VALUE}</p>
+            </div>
+            <p className="text-xl font-bold" style={{color: status.color}}>
+                {status.label}
+            </p>
+        </div>
+    );
+}
+
+export default function TeamViewer({selectedTeamId, onSelected}) {
+    const { teams } = useAdmin();
+
+    // Uncaptured teams first
+    const sortedTeams = useMemo(() => {
+        return [...teams].sort((a,b) => {
+            if (a.captured === b.captured) return 0;
+            return a.captured ? 1 : -1;
+        });
+    }, [teams]);
+
+    return (
+        <List array={sortedTeams} selectedId={selectedTeamId} onSelected={onSelected} >
+            {(team) => (
+                <TeamViewerItem team={team}/>
+            )}
+        </List>
+    );
+}