public/traque
1
0
Fork 0
mirror of https://git.rezel.net/LudoTech/traque.git synced 2026-02-09 10:20:16 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Scrollable team list

Browse Source
This commit is contained in:
Sebastien Riviere
2025-08-30 16:19:30 +02:00
parent cb534ed1aa
commit e5d90d824e
39 changed files with 163 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
traque-front/app/admin/page.js
View File

@@ -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>