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

improved style when overflow

Browse Source
This commit is contained in:
Quentin Roussel
2024-03-29 13:42:48 +01:00
parent a303440544
commit ed2e324a45
5 changed files with 25 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,8 +6,8 @@ export default function AdminLayout({ children}) {
return (
<AdminConnexionProvider>
<AdminProvider>
<div className='h-full flex items-stretch flex-col'>
<div className="h-20 bg-gray-800 text-white flex items-center justify-left">
<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>
@@ -15,7 +15,7 @@ export default function AdminLayout({ children}) {
<li><Link href="/admin/map">Map</Link></li>
</ul>
</div>
<div className="h-full block">
<div className="h-full overflow-y-scroll">
{children}
</div>
</div>

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

@@ -1,4 +1,5 @@
"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";
@@ -9,14 +10,15 @@ export default function AdminPage() {
const { gameState, changeState } = useAdmin();
useProtect();
return (
<div className='h-full bg-gray-200 p-10 flex flex-col justify-between'>
<div className='w-max gap-3 bg-gray-200 p-10 flex flex-col text-center shadow-2xl '>
<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>
{gameState == GameState.PLACEMENT && <div className="max-h-5/6"><TeamReady /></div>}
</div>
)
}

2
traque-front/app/admin/teams/page.js
View File

@@ -15,7 +15,7 @@ export default function TeamAdminPage() {
return (
<div className='h-full bg-gray-200 p-10 flex flex-row justify-between'>
<div className='w-1/2 p-5 bg-white mx-5 h-full p-4 shadow-2xl rounded'>
<div className='w-1/2 p-5 bg-white mx-5 h-full p-4 shadow-2xl rounded overflow-y-scroll max-h-full'>
<h2 className='text-2xl text-center'>Team list</h2>
<TeamAddForm onAddTeam={addTeam}/>
<TeamList selectedTeamId={selectedTeamId} onSelected={setSelectedTeamId}/>

2
traque-front/components/admin/teamList.jsx
View File

@@ -12,7 +12,7 @@ const reorder = (list, startIndex, endIndex) => {
};
function TeamListItem({ team, index, onSelected, itemSelected }) {
const classNames = 'w-full p-3 m-3 shadow ' + (itemSelected ? "bg-blue-400" : "bg-gray-100");
const classNames = 'w-full p-3 my-3 shadow ' + (itemSelected ? "bg-blue-400" : "bg-gray-100");
return (
<Draggable draggableId={team.id.toString()} index={index} onClick={() => onSelected(team.id)}>
{provided => (

16
traque-front/components/admin/teamReady.jsx Normal file
View File

@@ -0,0 +1,16 @@
import useAdmin from "@/hook/useAdmin"
export function TeamReady() {
const {teams} = useAdmin();
return <div className='w-max h-full gap-1 bg-gray-200 p-10 flex flex-col text-center shadow-2xl overflow-y-scroll'>
<h2 className="text-2xl">Teams ready status</h2>
{teams.map((team) => team.ready ? (
<div key={team.id} className="p-2 text-white bg-green-500 shadow-md text-xl rounded flex flex-row">
<div>{team.name} : Ready</div>
</div>) : (
<div key={team.id} className="p-2 text-white bg-red-500 shadow-md text-xl rounded flex flex-row">
<div>{team.name} : Not ready</div>
</div>
))}
</div>
}