modified several UI thingies

traque-front/app/admin/page.js

@@ -1,11 +1,11 @@
 "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 { TeamListFixed } from '@/components/admin/teamList';
+import TeamList from '@/components/admin/teamList';
+import TeamAddForm from '@/components/admin/teamAdd';
+import React, { useState } from 'react'
+import TeamEdit from '@/components/admin/teamEdit';
 
 const LiveMap = dynamic(() => import('@/components/admin/mapPicker').then((mod) => mod.LiveMap), {
     ssr: false
@@ -13,23 +13,71 @@ const LiveMap = dynamic(() => import('@/components/admin/mapPicker').then((mod)
 export default function AdminPage() {
     const { useProtect } = useAdminConnexion();
     const { gameState, changeState } = useAdmin();
+    const { addTeam } = useAdmin();
+    const [selectedTeamId, setSelectedTeamId] = useState(null);
     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 '>
+                <div className='w-full mb-5 h-1/2 gap-3 bg-blue-400 p-10 flex flex-col text-left shadow-2xl'>
-                    <h2 className="text-2xl">Game state</h2>
+                    <h2 className="text-4xl font-bold">Page Principale</h2>
-                    <strong className="p-5 bg-gray-900 text-white text-xl rounded">Current : {gameState}</strong>
+                </div>
-                    <div className="flex flex-row">
+                <div className='w-full mb-5 h-1/2 gap-3 bg-white flex flex-col'>
-                        <RedButton onClick={() => changeState(GameState.SETUP)}>Reset game</RedButton>
+                    <div className='w-full gap-3 bg-blue-400 flex flex-col items-center justify-center text-middle shadow-2xl p-1'>
-                        <GreenButton onClick={() => changeState(GameState.PLACEMENT)}>Start placement</GreenButton>
+                        <h2 className="text-2xl">Contrôle</h2>
-                        <BlueButton onClick={() => changeState(GameState.PLAYING)}>Start game</BlueButton>
+                    </div>
+                    <div className="flex flex-row justify-between items-center px-6 py-3">
+                        <button className="w-[4.5rem] h-[4.5rem] bg-blue-400 rounded-lg hover:bg-blue-500 transition flex items-center justify-center" >
+                            <img src="/icons/parameters.png" className="w-10 h-10" />
+                        </button>
+                        <button className="w-[4.5rem] h-[4.5rem] bg-blue-400 rounded-lg hover:bg-blue-500 transition flex items-center justify-center" >
+                            <img src="/icons/play.png" className="w-10 h-10" />
+                        </button>
+                        <button className="w-[4.5rem] h-[4.5rem] bg-blue-400 rounded-lg hover:bg-blue-500 transition flex items-center justify-center" >
+                            <img src="/icons/reset.png" className="w-10 h-10" />
+                        </button>
+                        <button className="w-[4.5rem] h-[4.5rem] bg-blue-400 rounded-lg hover:bg-blue-500 transition flex items-center justify-center" >
+                            <img src="/icons/placement.png" className="w-10 h-10" />
+                        </button>
+                        <button className="w-[4.5rem] h-[4.5rem] bg-blue-400 rounded-lg hover:bg-blue-500 transition flex items-center justify-center" >
+                            <img src="/icons/begin.png" className="w-10 h-10" />
+                        </button>
                     </div>
                 </div>
-                {gameState == GameState.PLACEMENT && <TeamReady />}
+                <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-blue-400 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">
+                        <TeamAddForm onAddTeam={addTeam}/>
+                        <TeamList selectedTeamId={selectedTeamId} onSelected={setSelectedTeamId}/>
+                    </div>
+                </div>
+            </div>
+            <div className='grow flex-1 flex flex-col bg-white p-5 shadow-2xl'>
+                <div className="flex-1 flex items-center justify-center bg-gray-200 mb-5">
+                    <LiveMap/>
+                </div>
+                <div className='w-full flex flex-row gap-16 items-center px-6'>
+                    <button className="w-16 h-16 bg-blue-400 rounded-full hover:bg-blue-500 transition flex items-center justify-center">
+                        <img src="/icons/parameters.png" className="w-10 h-10" />
+                    </button>
+                    <button className="w-16 h-16 bg-blue-400 rounded-full hover:bg-blue-500 transition flex items-center justify-center">
+                        <img src="/icons/parameters.png" className="w-10 h-10" />
+                    </button>
+                    <button className="w-16 h-16 bg-blue-400 rounded-full hover:bg-blue-500 transition flex items-center justify-center">
+                        <img src="/icons/parameters.png" className="w-10 h-10" />
+                    </button>
+                    <button className="w-16 h-16 bg-blue-400 rounded-full hover:bg-blue-500 transition flex items-center justify-center">
+                        <img src="/icons/parameters.png" className="w-10 h-10" />
+                    </button>
+                    <button className="w-16 h-16 bg-blue-400 rounded-full hover:bg-blue-500 transition flex items-center justify-center">
+                        <img src="/icons/parameters.png" className="w-10 h-10" />
+                    </button>
+                    <button className="w-16 h-16 bg-blue-400 rounded-full hover:bg-blue-500 transition flex items-center justify-center">
+                        <img src="/icons/parameters.png" className="w-10 h-10" />
+                    </button>
                 </div>
-            <div className='grow flex-1 row-span-2 bg-white p-10 flex shadow-2xl'>
-                <LiveMap />
             </div>
         </div>
     )

traque-front/components/admin/mapPicker.jsx

@@ -143,7 +143,7 @@ export function LiveMap() {
     }
 
     return (
-        <div className='min-h-full w-full'>
+        <div className='h-full w-full'>
             {gameState == GameState.PLAYING && <p>{`${isShrinking ? "Fin" : "Début"} du rétrécissement de la zone dans : ${formatTime(timeLeftNextZone)}`}</p>}
             <MapContainer className='min-h-full w-full' center={location} zoom={DEFAULT_ZOOM} scrollWheelZoom={true}>
                 <TileLayer

traque-front/components/admin/teamAdd.jsx

@@ -1,6 +1,4 @@
 import React from 'react'
-import TextInput from '../util/textInput'
-import BlueButton from '../util/button'
 
 export default function TeamAddForm({onAddTeam}) {
     const [teamName, setTeamName] = React.useState('');
@@ -14,12 +12,12 @@ export default function TeamAddForm({onAddTeam}) {
     }
     
     return (
-        <form className='flex flex-row m-y-5' onSubmit={handleSubmit}>
+        <form className='flex flex-row m-y-5 mb-3' onSubmit={handleSubmit}>
             <div className='w-4/5'>
-                <TextInput name="teamName" label='Team name' value={teamName} onChange={(e) => setTeamName(e.target.value)}/>
+                <input name="teamName" label='Team name' value={teamName} onChange={(e) => setTeamName(e.target.value)} type="text" className="block w-full h-full p-4 text-center ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400" />
             </div>
             <div className='w-1/5'>
-                <BlueButton type="submit" className="w-5">+</BlueButton>
+                <button type="submit" className="w-5 w-full h-full bg-blue-400 hover:bg-blue-500 transition text-3xl font-bold">+</button>
             </div>
         </form>
     )

traque-front/components/admin/teamList.jsx

@@ -11,15 +11,23 @@ const reorder = (list, startIndex, endIndex) => {
   return result;
 };
 
-function TeamListItem({ team, index, onSelected, itemSelected }) {
+function TeamListItem({ team, index, onSelected, itemSelected }) {;
-    const bgColor = team.captured ? " bg-red-400" : " bg-gray-300";
-    const border = " border border-4 " + (itemSelected ? "border-black" : team.captured ? "border-red-400" : "border-gray-300");
-    const classNames = 'w-full p-3 my-3' + (bgColor) + (border);
     return (
         <Draggable draggableId={team.id.toString()} index={index} onClick={() => onSelected(team.id)}>
             {provided => (
-                <div className={classNames} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
+                <div className='w-full p-2 bg-white border-2 border-gray-300 flex flex-row items-center text-3xl gap-3 font-bold' {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
+                    <div className="w-12 h-12 grid grid-cols-2 grid-rows-2 gap-1">
+                        <img src="/icons/greendude.png" className="w-6 h-6 object-contain" />
+                        <img src="/icons/greenlocation.png" className="w-6 h-6 object-contain" />
+                        <img src="/icons/greenconnection.png" className="w-6 h-6 object-contain" />
+                        <img src="/icons/greenbattery.png" className="w-6 h-6 object-contain" />
+                    </div>
+                    <div className='flex-1 w-full h-full flex flex-row items-center justify-between'>
                         <p className='text-center'>{team.name}</p>
+                        <p className={`text-center ${team.state === "En jeu" ? "text-green-600" : "text-red-600"}`}>
+                            {team.state === team.captured ? "En jeu" : "Capturé"}
+                        </p>
+                    </div>
                 </div>
 
             )}