Scrollable team list

2026-02-09 10:20:16 +01:00 · 2025-08-30 16:19:30 +02:00
parent cb534ed1aa
commit e5d90d824e
39 changed files with 163 additions and 119 deletions
--- a/traque-front/app/admin/components/buttons.jsx
+++ b/traque-front/app/admin/components/buttons.jsx
@@ -1,14 +1,14 @@
-export function MapButton({ icon, title }) {
+export function MapButton({ icon, ...props }) {
    return (
-        <button title={title} className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center">
+        <button className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center" {...props}>
            <img src={`/icons/${icon}.png`} className="w-10 h-10" />
        </button>
    );
 }

-export function ControlButton({ icon, title }) {
+export function ControlButton({ icon, ...props }) {
    return (
-        <button title={title} className="w-[4.5rem] h-[4.5rem] bg-custom-light-blue rounded-lg hover:bg-blue-500 transition flex items-center justify-center">
+        <button className="w-[4.5rem] h-[4.5rem] bg-custom-light-blue rounded-lg hover:bg-blue-500 transition flex items-center justify-center" {...props}>
            <img src={`/icons/${icon}.png`} className="w-10 h-10" />
        </button>
    );
--- a/traque-front/app/admin/components/liveMap.jsx
+++ b/traque-front/app/admin/components/liveMap.jsx
@@ -7,15 +7,16 @@ import useAdmin from "@/hook/useAdmin";
 import { GameState } from "@/util/gameState";

 const DEFAULT_ZOOM = 14;
+
 const positionIcon = new L.Icon({
-    iconUrl: '/icons/location.png',
+    iconUrl: '/icons/marker/blue.png',
    iconSize: [30, 30],
    iconAnchor: [15, 15],
    popupAnchor: [0, -15],
    shadowSize: [30, 30],
 });

-export default function LiveMap() {
+export default function LiveMap({mapStyle, showZones, showNames, showArrows}) {
    const location = useLocation(Infinity);
    const [timeLeftNextZone, setTimeLeftNextZone] = useState(null);
    const { zoneExtremities, teams, nextZoneDate, getTeam, gameState } = useAdmin();
@@ -53,20 +54,17 @@ export default function LiveMap() {
    }

    return (
-        <div className='h-full w-full'>
+        <div className='h-full w-full flex flex-col'>
            {gameState == GameState.PLAYING && <p>{`Next zone in : ${formatTime(timeLeftNextZone)}`}</p>}
-            <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"
-                />
+            <MapContainer className='flex-1 w-full' center={location} zoom={DEFAULT_ZOOM} scrollWheelZoom={true}>
+                <TileLayer url={mapStyle.url} attribution={mapStyle.attribution}/>
                <MapPan center={location} zoom={DEFAULT_ZOOM} />
-                {gameState == GameState.PLAYING && zoneExtremities.begin && <Polygon positions={zoneExtremities.begin.points} pathOptions={{ color: 'red', fillColor: 'red', fillOpacity: '0.1', weight: 3 }} />}
-                {gameState == GameState.PLAYING && zoneExtremities.end && <Polygon positions={zoneExtremities.end.points} pathOptions={{ color: 'green', fillColor: 'green', fillOpacity: '0.1', weight: 3 }} />}
+                {showZones && gameState == GameState.PLAYING && zoneExtremities.begin && <Polygon positions={zoneExtremities.begin.points} pathOptions={{ color: 'red', fillColor: 'red', fillOpacity: '0.1', weight: 3 }} />}
+                {showZones && gameState == GameState.PLAYING && zoneExtremities.end && <Polygon positions={zoneExtremities.end.points} pathOptions={{ color: 'green', fillColor: 'green', fillOpacity: '0.1', weight: 3 }} />}
                {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}/>
+                        {showNames && <Tooltip permanent direction="top" offset={[0.5, -15]} className="custom-tooltip">{team.name}</Tooltip>}
+                        {showArrows && <Arrow pos1={team.currentLocation} pos2={getTeam(team.chasing).currentLocation}/>}
                    </Marker>
                )}
            </MapContainer>
--- a/traque-front/app/admin/components/teamSidePanel.jsx
+++ b/traque-front/app/admin/components/teamSidePanel.jsx
@@ -21,7 +21,7 @@ function DotLine({ label, value }) {
 function IconValue({ color, icon, value }) {
    return (
        <div className="flex flex-row gap-2">
-            <img src={`/icons/${color}${icon}.png`} className="w-6 h-6" />
+            <img src={`/icons/${icon}/${color}.png`} className="w-6 h-6" />
            <p className={`text-custom-${color}`}>{value}</p>
        </div>
    );
@@ -95,7 +95,7 @@ export default function TeamSidePanel({ selectedTeamId, onClose }) {
    }

    return (
-        <div className="relative p-3 w-3/12 h-full flex flex-col gap-3">
+        <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 ${getStatus(team, gameState).color} font-bold`}>{getStatus(team, gameState).label}</p>
            <p className="text-4xl font-bold text-center">{team.name ?? NO_VALUE}</p>
@@ -103,7 +103,7 @@ export default function TeamSidePanel({ selectedTeamId, onClose }) {
                <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="dude" value={team.sockets.length ?? NO_VALUE} />
+                <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 != null && (Date.now() - team.lastCurrentLocationDate <= 30000) ? "green" : "red"}
--- a/traque-front/app/admin/components/teamViewer.jsx
+++ b/traque-front/app/admin/components/teamViewer.jsx
@@ -1,3 +1,4 @@
+import { List } from '@/components/list';
 import useAdmin from '@/hook/useAdmin';
 import { GameState } from '@/util/gameState';

@@ -23,17 +24,17 @@ function getStatus(team, gamestate) {
    }
 }

-function TeamListItem({ itemSelected, team }) {
+function TeamViewerItem({ team, itemSelected, onSelected }) {
    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={'w-full flex flex-row gap-3 p-2 bg-white justify-between cursor-pointer ' + (itemSelected ? "outline outline-4 outline-black" : "")} onClick={() => onSelected(team.id)}>
            <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" />
+                    <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 != null && (Date.now() - team.lastCurrentLocationDate <= 30000) ? "green" : "red"}.png`} className="w-4 h-4" />
                </div>
                <p className={`text-xl font-bold`}>{team.name}</p>
            </div>
@@ -44,16 +45,14 @@ function TeamListItem({ itemSelected, team }) {
    );
 }

-export default function TeamList({selectedTeamId, onSelected}) {
+export default function TeamViewer({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>
+        <List array={teams}>
+            {(team) => (
+                <TeamViewerItem team={team} itemSelected={selectedTeamId === team.id} onSelected={onSelected}/>
+            )}
+        </List>
    );
 }
--- a/traque-front/app/admin/layout.js
+++ b/traque-front/app/admin/layout.js
@@ -5,9 +5,7 @@ export default function AdminLayout({ children }) {
    return (
        <AdminConnexionProvider>
            <AdminProvider>
-                <div className="h-full overflow-y-scroll">
-                    {children}
-                </div>
+                {children}
            </AdminProvider>
        </AdminConnexionProvider>
    );
--- a/traque-front/app/admin/page.js
+++ b/traque-front/app/admin/page.js
@@ -4,16 +4,34 @@ import dynamic from "next/dynamic";
 import Link from "next/link";
 import { Section } from "@/components/section";
 import { useAdminConnexion } from "@/context/adminConnexionContext";
+import useAdmin from "@/hook/useAdmin";
+import { GameState } from "@/util/gameState";
 import TeamSidePanel from "./components/teamSidePanel";
-import TeamList from './components/teamViewer';
+import TeamViewer from './components/teamViewer';
 import { MapButton, ControlButton } from './components/buttons';

 // Imported at runtime and not at compile time
 const LiveMap = dynamic(() => import('./components/liveMap'), { ssr: false });

+const mapStyles = {
+    default: {
+        url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    },
+    satellite: {
+        url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+        attribution: 'Tiles &copy; Esri'
+    },
+}
+
 export default function AdminPage() {
    const { useProtect } = useAdminConnexion();
    const [selectedTeamId, setSelectedTeamId] = useState(null);
+    const { changeState } = useAdmin();
+    const [mapStyle, setMapStyle] = useState(mapStyles.default);
+    const [showZones, setShowZones] = useState(true);
+    const [showNames, setShowNames] = useState(true);
+    const [showArrows, setShowArrows] = useState(false);

    useProtect();

@@ -24,6 +42,22 @@ export default function AdminPage() {
            setSelectedTeamId(id);
        }
    }
+
+    function switchMapStyle() {
+        setMapStyle(mapStyle == mapStyles.default ? mapStyles.satellite : mapStyles.default);
+    }
+
+    function switchZones() {
+        setShowZones(!showZones);
+    }
+
+    function switchNames() {
+        setShowNames(!showNames);
+    }
+
+    function switchArrows() {
+        setShowArrows(!showArrows);
+    }
    
    return (
        <div className='h-full bg-gray-200 p-3 flex flex-row content-start gap-3'>
@@ -32,36 +66,38 @@ export default function AdminPage() {
                    <img src="/icons/home.png" className="w-8 h-8" />
                    <h2 className="text-3xl font-bold">Page principale</h2>
                </div>
-                <Section title="Contrôle">
-                    <div className='w-full h-full flex flex-row justify-between'>
-                        <Link href="/admin/parameters">
-                            <ControlButton icon="parameters" title="Accéder aux paramètres du jeu"/>
-                        </Link>
-                        <ControlButton icon="play" title="Reprendre la partie"/>
-                        <ControlButton icon="reset" title="Réinitialiser la partie"/>
-                        <ControlButton icon="placement" title="Commencer les placements"/>
-                        <ControlButton icon="begin" title="Lancer la traque"/>
-                    </div>
+                <Section title="Contrôle" innerClassName='flex flex-row justify-between'>
+                    <Link href="/admin/parameters">
+                        <ControlButton icon="parameters" title="Accéder aux paramètres du jeu"/>
+                    </Link>
+                    {false && <ControlButton icon="play" title="Reprendre la partie" onClick={() => {}} />}
+                    <ControlButton icon="reset" title="Réinitialiser la partie" onClick={() => changeState(GameState.SETUP)} />
+                    <ControlButton icon="placement" title="Commencer les placements" onClick={() => changeState(GameState.PLACEMENT)} />
+                    <ControlButton icon="begin" title="Lancer la traque" onClick={() => changeState(GameState.PLAYING)} />
                </Section>
-                <Section className="h-full" title="Équipes">
-                    <div className="w-full h-full bg-gray-300 p-1">
-                        <TeamList selectedTeamId={selectedTeamId} onSelected={onSelected}/>
-                    </div>
+                <Section title="Équipes" outerClassName="flex-1 min-h-0">
+                    <TeamViewer selectedTeamId={selectedTeamId} onSelected={onSelected}/>
                </Section>
            </div>
            <div className='grow flex-1 flex flex-col bg-white p-3 gap-3 shadow-2xl'>
                <div className="flex-1 flex flex-row gap-3">
-                    <LiveMap/>
-                    <TeamSidePanel selectedTeamId={selectedTeamId} onClose={() => setSelectedTeamId(null)}/>
+                    <div className="flex-1 h-full">
+                        <LiveMap mapStyle={mapStyle} showZones={showZones} showNames={showNames} showArrows={showArrows}/>
+                    </div>
+                    {selectedTeamId &&
+                        <div className="w-3/12 h-full">
+                            <TeamSidePanel selectedTeamId={selectedTeamId} onClose={() => setSelectedTeamId(null)}/>
+                        </div>
+                    }
                </div>
                <div className='w-full flex flex-row items-center justify-evenly py-2'>
-                    <MapButton icon="mapstyle" title="Changer le style de la carte"/>
-                    <MapButton icon="zones" title="Afficher/masquer les zones"/>
-                    <MapButton icon="names" title="Afficher/masquer les noms des équipes"/>
-                    <MapButton icon="arrows" title="Afficher/masquer les relations de traque"/>
-                    <MapButton icon="incertitude" title="Afficher/masquer les incertitudes de position"/>
-                    <MapButton icon="path" title="Afficher/masquer la trace de l'équipe sélectionnée"/>
-                    <MapButton icon="informations" title="Afficher/masquer les évènements de l'équipe sélectionnée"/>
+                    <MapButton icon="mapstyle" title="Changer le style de la carte" onClick={switchMapStyle}/>
+                    <MapButton icon="zones" title="Afficher/masquer les zones" onClick={switchZones}/>
+                    <MapButton icon="names" title="Afficher/masquer les noms des équipes" onClick={switchNames}/>
+                    <MapButton icon="arrows" title="Afficher/masquer les relations de traque" onClick={switchArrows}/>
+                    {false && <MapButton icon="incertitude" title="Afficher/masquer les incertitudes de position"/>}
+                    {false && <MapButton icon="path" title="Afficher/masquer la trace de l'équipe sélectionnée"/>}
+                    {false && <MapButton icon="informations" title="Afficher/masquer les évènements de l'équipe sélectionnée"/>}
                </div>
            </div>
        </div>
--- a/traque-front/app/admin/parameters/components/teamManager.jsx
+++ b/traque-front/app/admin/parameters/components/teamManager.jsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
+import { List } from '@/components/list';
 import useAdmin from '@/hook/useAdmin';

 function reorder(list, startIndex, endIndex) {
@@ -9,23 +9,23 @@ function reorder(list, startIndex, endIndex) {
    return result;
 };

-function TeamListItem({ team, index }) {
-    const { removeTeam } = useAdmin();
+function TeamManagerItem({ team, index }) {
+    const { updateTeam, removeTeam } = useAdmin();

    function handleRemove() {
        removeTeam(team.id);
    }

    return (
-        <Draggable draggableId={team.id.toString()} index={index} onClick={() => onSelected(team.id)}>
+        <Draggable draggableId={team.id.toString()} index={index}>
            {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} />
+                            <img src={`/icons/heart/${team.captured ? "grey" : "pink"}.png`} className="w-8 h-8" onClick={() => updateTeam(team.id, { captured: !team.captured })} />
+                            <img src="/icons/trash.png" className="w-8 h-8" onClick={handleRemove} />
                        </div>
                    </div>
                </div>
@@ -34,17 +34,8 @@ function TeamListItem({ team, index }) {
    );
 }

-export default function TeamList() {
-    const { teams, reorderTeams, addTeam } = useAdmin();
-    const [teamName, setTeamName] = useState('');
-    
-    function handleSubmit(e) {
-        e.preventDefault();
-        if (teamName !== "") {
-            addTeam(teamName);
-            setTeamName("")
-        }
-    }
+export default function TeamManager() {
+    const { teams, reorderTeams } = useAdmin();
    
    function onDragEnd(result) {
        if (!result.destination) return;
@@ -54,29 +45,19 @@ export default function TeamList() {
    }

    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>
+        <DragDropContext onDragEnd={onDragEnd} >
+            <Droppable droppableId='team-list'>
+                {provided => (
+                    <div className='w-full h-full' ref={provided.innerRef} {...provided.droppableProps}>
+                        <List array={teams}>
+                            {(team, i) => (
+                                <TeamManagerItem index={i} team={team}/>
+                            )}
+                        </List>
+                        {provided.placeholder}
+                    </div>
+                )}
+            </Droppable>
+        </DragDropContext>
    );
 }
--- a/traque-front/app/admin/parameters/page.js
+++ b/traque-front/app/admin/parameters/page.js
@@ -7,15 +7,16 @@ import { Section } from "@/components/section";
 import { useAdminConnexion } from "@/context/adminConnexionContext";
 import useAdmin from '@/hook/useAdmin';
 import Messages from "./components/messages";
-import TeamList from './components/teamManager';
+import TeamManager from './components/teamManager';

 // Imported at runtime and not at compile time
 const ZoneSelector = dynamic(() => import('./components/polygonZoneMap'), { ssr: false });

 export default function AdminPage() {
-    const {penaltySettings, changePenaltySettings} = useAdmin();
+    const {penaltySettings, changePenaltySettings, addTeam} = useAdmin();
    const { useProtect } = useAdminConnexion();
    const [allowedTimeBetweenUpdates, setAllowedTimeBetweenUpdates] = useState("");
+    const [teamName, setTeamName] = useState('');

    useProtect();
    
@@ -30,10 +31,18 @@ export default function AdminPage() {
            changePenaltySettings({allowedTimeBetweenPositionUpdate: Number(allowedTimeBetweenUpdates)});
        }
    }
+    
+    function handleSubmit(e) {
+        e.preventDefault();
+        if (teamName !== "") {
+            addTeam(teamName);
+            setTeamName("")
+        }
+    }

    return (
        <div className='h-full bg-gray-200 p-3 flex flex-row gap-3'>
-            <div className="h-full w-3/6 gap-3 flex flex-col">
+            <div className="h-full w-2/6 gap-3 flex flex-col">
                <div className='w-full bg-custom-light-blue gap-5 p-5 flex flex-row shadow-2xl'>
                    <Link href="/admin">
                        <img src="/icons/backarrow.png" className="w-8 h-8" title="Main page" />
@@ -41,19 +50,27 @@ export default function AdminPage() {
                    <h2 className="text-3xl font-bold">Paramètres</h2>
                </div>
                <Messages/>
-                <Section className="h-full" title="Équipe">
-                    <div className="w-full h-full gap-3 flex flex-col items-center">
-                        <TeamList/>
-                        <div className="w-full flex flex-row gap-2 items-center justify-between">
-                            <p>Interval between position updates</p>
-                            <div className="w-16 h-10">
-                                <TextInput value={allowedTimeBetweenUpdates} onChange={(e) => setAllowedTimeBetweenUpdates(e.target.value)} onBlur={applySettings} />
-                            </div>
+                <Section title="Équipe" outerClassName="flex-1 min-h-0" innerClassName="flex flex-col items-center 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>
+                    <div className="w-full flex-1 min-h-0 ">
+                        <TeamManager/>
+                    </div>
+                    <div className="w-full flex flex-row gap-2 items-center justify-between">
+                        <p>Interval between position updates</p>
+                        <div className="w-16 h-10">
+                            <TextInput value={allowedTimeBetweenUpdates} onChange={(e) => setAllowedTimeBetweenUpdates(e.target.value)} onBlur={applySettings} />
                        </div>
                    </div>
                </Section>
            </div>
-            <div className="h-full w-full">
+            <div className="h-full flex-1">
                <ZoneSelector />
            </div>
        </div>