Server heavy refactoring 4 (not functionnal)

2026-04-10 16:30:18 +02:00 · 2026-03-12 23:17:21 +01:00
parent e1b6c0e0c5
commit 1389dce132
95 changed files with 5320 additions and 27986 deletions
--- a/server/traque-front/app/admin/page.jsx
+++ b/server/traque-front/app/admin/page.jsx
@@ -0,0 +1,126 @@
+"use client";
+import { useState } from 'react';
+import dynamic from "next/dynamic";
+import Link from "next/link";
+import Image from "next/image";
+import { Section } from "@/components/section";
+import { useAuth } from "@/context/authContext";
+import { useAdmin } from '@/context/adminContext';
+import { GameState } from "@/config/types";
+import { mapStyles } from '@/config/configurations';
+import TeamSidePanel from "./components/teamSidePanel";
+import TeamViewer from './components/teamViewer';
+import { emitState } from '@/services/socket/emitters';
+
+// Imported at runtime and not at compile time
+const LiveMap = dynamic(() => import('./components/liveMap'), { ssr: false });
+
+function MainTitle() {
+    return (
+        <div className='w-full bg-custom-light-blue gap-5 p-5 flex flex-row shadow-2xl'>
+            <Image src="/icons/home.png" alt="home" className="w-8 h-8" />
+            <h2 className="text-3xl font-bold">Page principale</h2>
+        </div>
+    );
+}
+
+function MapButton({ icon, ...props }) {
+    return (
+        <button className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center" {...props}>
+            <Image src={`/icons/${icon}.png`} alt="map-button" className="w-10 h-10" />
+        </button>
+    );
+}
+
+function ControlButton({ icon, ...props }) {
+    return (
+        <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}>
+            <Image src={`/icons/${icon}.png`} alt="control-button" className="w-10 h-10" />
+        </button>
+    );
+}
+
+export default function AdminPage() {
+    const { useProtect } = useAuth();
+    const { getTeam } = useAdmin();
+    const [selectedTeamId, setSelectedTeamId] = useState(null);
+    const [mapStyle, setMapStyle] = useState(mapStyles.default);
+    const [showZones, setShowZones] = useState(true);
+    const [showNames, setShowNames] = useState(true);
+    const [showArrows, setShowArrows] = useState(true);
+    const [isFocusing, setIsFocusing] = useState(true);
+
+    useProtect();
+
+    function onSelected(id) {
+        if (selectedTeamId == id && (!getTeam(id)?.currentLocation || isFocusing)) {
+            setSelectedTeamId(null);
+            setIsFocusing(false);
+        } else {
+            setSelectedTeamId(id);
+            setIsFocusing(true);
+        }
+    }
+
+    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='w-full h-full p-3 flex flex-row gap-3'>
+            <div className="h-full w-2/6 flex flex-col gap-3">
+                <MainTitle/>
+                <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>
+                    <ControlButton icon="reset" title="Réinitialiser la partie" onClick={() => emitState(GameState.SETUP)} />
+                    <ControlButton icon="placement" title="Commencer les placements" onClick={() => emitState(GameState.PLACEMENT)} />
+                    <ControlButton icon="begin" title="Lancer la traque" onClick={() => emitState(GameState.PLAYING)} />
+                </Section>
+                <Section title="Équipes" outerClassName="flex-1 min-h-0">
+                    <TeamViewer selectedTeamId={selectedTeamId} onSelected={onSelected}/>
+                </Section>
+            </div>
+            <Section outerClassName='h-full flex-1' innerClassName='flex flex-col gap-3'>
+                <div className="flex-1 flex flex-row gap-3">
+                    <div className="flex-1 h-full">
+                        <LiveMap
+                            selectedTeamId={selectedTeamId}
+                            onSelected={onSelected}
+                            isFocusing={isFocusing}
+                            setIsFocusing={setIsFocusing}
+                            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" 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}/>
+                </div>
+            </Section>
+        </div>
+    );
+}