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

Merge

Browse Source
This commit is contained in:
Sebastien Riviere
2025-08-27 00:08:16 +02:00
parent 2299ff1b64 3eff3acc05
commit a373c38204
18 changed files with 495 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
traque-front/app/admin/layout.js
View File

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

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

@@ -1,36 +1,111 @@
"use client";
import TeamReady from "@/components/admin/teamReady";
import { BlueButton, GreenButton, RedButton } from "@/components/util/button";
import { useAdminConnexion } from "@/context/adminConnexionContext";
import useAdmin from "@/hook/useAdmin";
import { GameState } from "@/util/gameState";
import dynamic from "next/dynamic";
import TeamList from '@/components/admin/teamList';
import React, { useState } from 'react'
import TeamAddForm from '@/components/admin/teamAdd';
import Link from "next/link";
import TeamInformation from "@/components/admin/teamInformation";
// Imported at runtime and not at compile time
const LiveMap = dynamic(() => import('@/components/admin/liveMap'), { ssr: false });
export default function AdminPage() {
const { useProtect } = useAdminConnexion();
const { gameState, changeState } = useAdmin();
const [selectedTeamId, setSelectedTeamId] = useState(null);
const { addTeam, gameState, changeState, teams } = useAdmin();
useProtect();
return (
<div className='min-h-full bg-gray-200 p-10 flex flex-row content-start gap-5'>
<div className='min-h-full bg-gray-200 p-5 flex flex-row content-start gap-5'>
<div className="h-full w-2/6">
<div className='w-full mb-5 h-1/2 gap-3 bg-white p-10 flex flex-col text-center shadow-2xl '>
<h2 className="text-2xl">Game state</h2>
<strong className="p-5 bg-gray-900 text-white text-xl rounded">Current : {gameState}</strong>
<div className="flex flex-row">
<RedButton onClick={() => changeState(GameState.SETUP)}>Reset game</RedButton>
<GreenButton onClick={() => changeState(GameState.PLACEMENT)}>Start placement</GreenButton>
<BlueButton onClick={() => changeState(GameState.PLAYING)}>Start game</BlueButton>
<div className='w-full mb-5 h-1/2 gap-3 bg-custom-light-blue p-10 flex flex-col text-left shadow-2xl'>
<h2 className="text-4xl font-bold">Page Principale</h2>
</div>
<div className='w-full mb-5 h-1/2 gap-3 bg-white flex flex-col'>
<div className='w-full gap-3 bg-custom-light-blue flex flex-col items-center justify-center text-middle shadow-2xl p-1'>
<h2 className="text-2xl">Contrôle</h2>
</div>
<div className="flex flex-row justify-between items-center px-6 py-3">
<Link
href="/admin/parameters"
className="w-[4.5rem] h-[4.5rem] bg-custom-light-blue 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" />
</Link>
<button
className="w-[4.5rem] h-[4.5rem] bg-custom-light-blue 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-custom-light-blue 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-custom-light-blue 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-custom-light-blue 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>
</div>
<div className='h-full w-full mb-5 h-1/2 gap-3 bg-white flex flex-col'>
<div className='w-full gap-3 bg-custom-light-blue flex flex-col items-center justify-center text-middle shadow-2xl p-1'>
<h2 className="text-2xl">Équipes</h2>
</div>
<div className="items-center px-6 py-3">
<TeamList selectedTeamId={selectedTeamId} onSelected={setSelectedTeamId}/>
</div>
</div>
{gameState == GameState.PLACEMENT && <TeamReady />}
</div>
<div className='grow flex-1 row-span-2 bg-white p-10 flex shadow-2xl'>
<LiveMap />
<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 relative">
<LiveMap selectedTeamId={selectedTeamId} setSelectedTeamId={setSelectedTeamId} />
</div>
<div className='w-full flex flex-row gap-10 items-center px-6 relative'>
<button
className="w-16 h-16 bg-custom-light-blue 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-custom-light-blue 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-custom-light-blue 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-custom-light-blue 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-custom-light-blue 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-custom-light-blue 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-custom-light-blue 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>
</div>
)

11
traque-front/app/admin/parameters/page.js
View File

@@ -2,11 +2,15 @@
import GameSettings from "@/components/admin/gameSettings";
import { useAdminConnexion } from "@/context/adminConnexionContext";
import dynamic from "next/dynamic";
import TeamAddForm from '@/components/admin/teamAdd';
import useAdmin from '@/hook/useAdmin';
import Link from "next/link";
// Imported at runtime and not at compile time
const ZoneSelector = dynamic(() => import('@/components/admin/polygonZoneMap'), { ssr: false });
export default function AdminPage() {
const { addTeam } = useAdmin();
const { useProtect } = useAdminConnexion();
useProtect();
@@ -14,6 +18,13 @@ export default function AdminPage() {
return (
<div className='h-full bg-gray-200 p-10 flex flex-row gap-5'>
<div className="h-full w-2/6">
<div className='w-full mb-5 h-full gap-3 bg-custom-light-blue p-7 flex flex-row text-left shadow-2xl'>
<Link href="/admin" className="w-fit flex items-center text-white hover:text-blue-900 transition-colors">
<img src="/icons/backarrow.png" className="w-10 h-10 mr-10" title="retour" />
</Link>
<h2 className="text-4xl font-bold">Paramètres</h2>
</div>
<TeamAddForm onAddTeam={addTeam}/>
<GameSettings />
</div>
<div className="h-full w-full">