several changes

traque-front/app/admin/layout.js

@@ -6,17 +6,8 @@ export default function AdminLayout({ children}) {
     return (
         <AdminConnexionProvider>
             <AdminProvider>
-                <div className='h-full flex flex-col'>
+                <div className="h-full overflow-y-scroll">
-                    <div className="text-xl max-h-15 bg-gray-800 text-white  flex items-center justify-left">
+                    {children}
-                        <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

@@ -3,18 +3,19 @@ import { useAdminConnexion } from "@/context/adminConnexionContext";
 import useAdmin from "@/hook/useAdmin";
 import dynamic from "next/dynamic";
 import TeamList from '@/components/admin/teamList';
-import TeamAddForm from '@/components/admin/teamAdd';
 import React, { useState } from 'react'
 import TeamEdit from '@/components/admin/teamEdit';
+import TeamAddForm from '@/components/admin/teamAdd';
+import Link from "next/link";
 
 const LiveMap = dynamic(() => import('@/components/admin/mapPicker').then((mod) => mod.LiveMap), {
     ssr: false
 });
+
 export default function AdminPage() {
     const { useProtect } = useAdminConnexion();
-    const { gameState, changeState } = useAdmin();
-    const { addTeam } = useAdmin();
     const [selectedTeamId, setSelectedTeamId] = useState(null);
+    const { addTeam, gameState, changeState, teams } = useAdmin();
     useProtect();
     return (
         <div className='min-h-full bg-gray-200 p-5 flex flex-row content-start gap-5'>
@@ -27,19 +28,30 @@ export default function AdminPage() {
                         <h2 className="text-2xl">Contrôle</h2>
                     </div>
                     <div className="flex flex-row justify-between items-center px-6 py-3">
-                        <button className="w-[4.5rem] h-[4.5rem] bg-blue-400 rounded-lg hover:bg-blue-500 transition flex items-center justify-center" >
+                        <Link 
+                            href="/admin/teams"
+                            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" />
-                        </button>
+                        </Link>
-                        <button className="w-[4.5rem] h-[4.5rem] bg-blue-400 rounded-lg hover:bg-blue-500 transition flex items-center justify-center" >
+                        <button 
+                            className="w-[4.5rem] h-[4.5rem] bg-blue-400 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-blue-400 rounded-lg hover:bg-blue-500 transition flex items-center justify-center" >
+                        <button 
+                            className="w-[4.5rem] h-[4.5rem] bg-blue-400 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-blue-400 rounded-lg hover:bg-blue-500 transition flex items-center justify-center" >
+                        <button 
+                            className="w-[4.5rem] h-[4.5rem] bg-blue-400 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-blue-400 rounded-lg hover:bg-blue-500 transition flex items-center justify-center" >
+                        <button 
+                            className="w-[4.5rem] h-[4.5rem] bg-blue-400 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>
@@ -54,28 +66,45 @@ export default function AdminPage() {
                     </div>
                 </div>
             </div>
-            <div className='grow flex-1 flex flex-col bg-white p-5 shadow-2xl'>
+            <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">
                     <LiveMap/>
                 </div>
-                <div className='w-full flex flex-row gap-16 items-center px-6'>
+                <div className='w-full flex flex-row gap-10 items-center px-6'>
-                    <button className="w-16 h-16 bg-blue-400 rounded-full hover:bg-blue-500 transition flex items-center justify-center">
+                    <button 
-                        <img src="/icons/parameters.png" className="w-10 h-10" />
+                        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">
+                        <img src="/icons/mapstyle.png" className="w-10 h-10" />
                     </button>
-                    <button className="w-16 h-16 bg-blue-400 rounded-full hover:bg-blue-500 transition flex items-center justify-center">
+                    <button 
-                        <img src="/icons/parameters.png" className="w-10 h-10" />
+                        className="w-16 h-16 bg-blue-400 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-blue-400 rounded-full hover:bg-blue-500 transition flex items-center justify-center">
+                    <button 
-                        <img src="/icons/parameters.png" className="w-10 h-10" />
+                        className="w-16 h-16 bg-blue-400 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-blue-400 rounded-full hover:bg-blue-500 transition flex items-center justify-center">
+                    <button 
-                        <img src="/icons/parameters.png" className="w-10 h-10" />
+                        className="w-16 h-16 bg-blue-400 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-blue-400 rounded-full hover:bg-blue-500 transition flex items-center justify-center">
+                    <button 
-                        <img src="/icons/parameters.png" className="w-10 h-10" />
+                        className="w-16 h-16 bg-blue-400 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-blue-400 rounded-full hover:bg-blue-500 transition flex items-center justify-center">
+                    <button 
-                        <img src="/icons/parameters.png" className="w-10 h-10" />
+                        className="w-16 h-16 bg-blue-400 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-blue-400 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>

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

@@ -3,16 +3,20 @@ import { GameSettings } from "@/components/admin/gameSettings";
 import { PenaltySettings } from "@/components/admin/penaltySettings";
 import { useAdminConnexion } from "@/context/adminConnexionContext";
 import dynamic from "next/dynamic";
+import TeamAddForm from '@/components/admin/teamAdd';
+import useAdmin from '@/hook/useAdmin';
 
 const ZoneSelector = dynamic(() => import('@/components/admin/zoneSelector').then((mod) => mod.ZoneSelector), {
     ssr: false
 });
 export default function AdminPage() {
+    const { addTeam } = useAdmin();
     const { useProtect } = useAdminConnexion();
     useProtect();
     return (
         <div className='min-h-full bg-gray-200 p-10 flex flex-row content-start gap-5'>
             <div className="h-full w-2/6">
+                <TeamAddForm onAddTeam={addTeam}/>
                 <GameSettings />
             </div>
             <ZoneSelector />

traque-front/components/admin/mapPicker.jsx

@@ -1,11 +1,41 @@
 "use client";
 import { useLocation } from "@/hook/useLocation";
-import { useEffect, useState } from "react";
+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";
+
+
+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.5)';
+        controlDiv.style.borderRadius = '9999px';
+        controlDiv.style.padding = '8px';
+        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;
+}
 
 const positionIcon = new L.Icon({
     iconUrl: '/icons/location.png',
@@ -112,6 +142,18 @@ export function LiveMap() {
     const [timeLeftNextZone, setTimeLeftNextZone] = useState(null);
     const { zone, zoneExtremities, teams, nextZoneDate, isShrinking , getTeam, gameState } = useAdmin();
 
+    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 = () => {
@@ -143,7 +185,7 @@ export function LiveMap() {
     }
 
     return (
-        <div className='h-full w-full'>
+        <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
@@ -160,6 +202,7 @@ export function LiveMap() {
                         <Arrow pos1={team.currentLocation} pos2={getTeam(team.chasing).currentLocation}/>
                     </Marker>
                 )}
+                <MapActionControl onClick={handleFullscreen}/>
             </MapContainer>
         </div>
     )