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

improved admin UI

Browse Source
This commit is contained in:
Quentin Roussel
2024-04-20 15:15:58 +02:00
parent 11d5962e70
commit 6289f7cb88
7 changed files with 61 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,13 +7,11 @@ export default function AdminLayout({ children}) {
<AdminConnexionProvider>
<AdminProvider>
<div className='h-full flex flex-col'>
<div className="text-lg max-h-10 p-5 bg-gray-800 text-white flex items-center justify-left">
<div className="mx-5">Admin</div>
<ul className='flex space-x-4'>
<li><Link href="/admin">Home</Link></li>
<li><Link href="/admin/teams">Teams</Link></li>
<li><Link href="/admin/map">Map</Link></li>
</ul>
<div className="text-xl max-h-15 bg-gray-800 text-white flex items-center justify-left">
<ul className='flex' >
<li className="p-5 bg-gray-800 hover:bg-gray-600 transition-all cursor-pointer h-full"><Link href="/admin">Admin</Link></li>
<li className="p-5 bg-gray-800 hover:bg-gray-600 transition-all cursor-pointer h-full"><Link href="/admin/teams">Teams</Link></li>
</ul>
</div>
<div className="h-full overflow-y-scroll">
{children}

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

@@ -9,21 +9,29 @@ import dynamic from "next/dynamic";
const ZoneSelector = dynamic(() => import('@/components/admin/zoneSelector').then((mod) => mod.ZoneSelector), {
ssr: false
});
const LiveMap = dynamic(() => import('@/components/admin/mapPicker').then((mod) => mod.LiveMap), {
ssr: false
});
export default function AdminPage() {
const { useProtect } = useAdminConnexion();
const { gameState, changeState } = useAdmin();
useProtect();
return (
<div className='min-h-full bg-gray-200 p-10 flex flex-row flex-wrap content-start gap-5'>
<div className='w-max h-1/2 gap-3 bg-gray-200 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>
<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='min-h-full bg-gray-200 p-10 flex flex-row content-start gap-5'>
<div className="h-full">
<div className='w-max 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>
<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>
</div>
{gameState == GameState.PLACEMENT && <div className="max-h-5/6"><TeamReady /></div>}
{(gameState == GameState.SETUP || gameState == GameState.PLACEMENT) && <ZoneSelector />}
{gameState == GameState.PLAYING && <div className='grow flex-1 row-span-2 bg-white p-10 flex shadow-2xl'>
<LiveMap />
</div>}
</div>
)
}