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

dont worry'

Browse Source
This commit is contained in:
martin.devaux
2025-06-27 09:56:22 +02:00
parent 70e9db7aea
commit 3eff3acc05
6 changed files with 24 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,44 +21,44 @@ export default function AdminPage() {
return ( return (
<div className='min-h-full bg-gray-200 p-5 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="h-full w-2/6">
<div className='w-full mb-5 h-1/2 gap-3 bg-blue-400 p-10 flex flex-col text-left shadow-2xl'> <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> <h2 className="text-4xl font-bold">Page Principale</h2>
</div> </div>
<div className='w-full mb-5 h-1/2 gap-3 bg-white flex flex-col'> <div className='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'> <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> <h2 className="text-2xl">Contrôle</h2>
</div> </div>
<div className="flex flex-row justify-between items-center px-6 py-3"> <div className="flex flex-row justify-between items-center px-6 py-3">
<Link <Link
href="/admin/parameters" href="/admin/parameters"
className="w-[4.5rem] h-[4.5rem] bg-blue-400 rounded-lg hover:bg-blue-500 transition flex items-center justify-center" 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"> title="Accéder aux paramètres du jeu">
<img src="/icons/parameters.png" className="w-10 h-10" /> <img src="/icons/parameters.png" className="w-10 h-10" />
</Link> </Link>
<button <button
className="w-[4.5rem] h-[4.5rem] bg-blue-400 rounded-lg hover:bg-blue-500 transition flex items-center justify-center" 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"> title="Reprendre la partie">
<img src="/icons/play.png" className="w-10 h-10" /> <img src="/icons/play.png" className="w-10 h-10" />
</button> </button>
<button <button
className="w-[4.5rem] h-[4.5rem] bg-blue-400 rounded-lg hover:bg-blue-500 transition flex items-center justify-center" 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"> title="Réinitialiser la partie">
<img src="/icons/reset.png" className="w-10 h-10" /> <img src="/icons/reset.png" className="w-10 h-10" />
</button> </button>
<button <button
className="w-[4.5rem] h-[4.5rem] bg-blue-400 rounded-lg hover:bg-blue-500 transition flex items-center justify-center" 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"> title="Commencer les placements">
<img src="/icons/placement.png" className="w-10 h-10" /> <img src="/icons/placement.png" className="w-10 h-10" />
</button> </button>
<button <button
className="w-[4.5rem] h-[4.5rem] bg-blue-400 rounded-lg hover:bg-blue-500 transition flex items-center justify-center" 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"> title="Lancer la traque">
<img src="/icons/begin.png" className="w-10 h-10" /> <img src="/icons/begin.png" className="w-10 h-10" />
</button> </button>
</div> </div>
</div> </div>
<div className='h-full w-full mb-5 h-1/2 gap-3 bg-white flex flex-col'> <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'> <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> <h2 className="text-2xl">Équipes</h2>
</div> </div>
<div className="items-center px-6 py-3"> <div className="items-center px-6 py-3">
@@ -72,37 +72,37 @@ export default function AdminPage() {
</div> </div>
<div className='w-full flex flex-row gap-10 items-center px-6 relative'> <div className='w-full flex flex-row gap-10 items-center px-6 relative'>
<button <button
className="w-16 h-16 bg-blue-400 rounded-full hover:bg-blue-500 transition flex items-center justify-center" 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"> title ="Changer le style de la carte">
<img src="/icons/mapstyle.png" className="w-10 h-10" /> <img src="/icons/mapstyle.png" className="w-10 h-10" />
</button> </button>
<button <button
className="w-16 h-16 bg-blue-400 rounded-full hover:bg-blue-500 transition flex items-center justify-center" 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"> title ="Afficher/cacher les zones">
<img src="/icons/zones.png" className="w-10 h-10" /> <img src="/icons/zones.png" className="w-10 h-10" />
</button> </button>
<button <button
className="w-16 h-16 bg-blue-400 rounded-full hover:bg-blue-500 transition flex items-center justify-center" 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"> title ="Afficher/cacher les noms des équipes">
<img src="/icons/names.png" className="w-10 h-10" /> <img src="/icons/names.png" className="w-10 h-10" />
</button> </button>
<button <button
className="w-16 h-16 bg-blue-400 rounded-full hover:bg-blue-500 transition flex items-center justify-center" 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"> title ="Afficher/cacher les relations de traque">
<img src="/icons/arrows.png" className="w-10 h-10" /> <img src="/icons/arrows.png" className="w-10 h-10" />
</button> </button>
<button <button
className="w-16 h-16 bg-blue-400 rounded-full hover:bg-blue-500 transition flex items-center justify-center" 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"> title ="Afficher/cacher les incertitudes de position">
<img src="/icons/incertitude.png" className="w-10 h-10" /> <img src="/icons/incertitude.png" className="w-10 h-10" />
</button> </button>
<button <button
className="w-16 h-16 bg-blue-400 rounded-full hover:bg-blue-500 transition flex items-center justify-center" 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"> title ="Afficher/cacher les chemins des équipes">
<img src="/icons/path.png" className="w-10 h-10" /> <img src="/icons/path.png" className="w-10 h-10" />
</button> </button>
<button <button
className="w-16 h-16 bg-blue-400 rounded-full hover:bg-blue-500 transition flex items-center justify-center" 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"> title ="Afficher/cacher les événements">
<img src="/icons/informations.png" className="w-10 h-10" /> <img src="/icons/informations.png" className="w-10 h-10" />
</button> </button>

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

@@ -17,7 +17,7 @@ export default function AdminPage() {
return ( return (
<div className='min-h-full bg-gray-200 p-5 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/5"> <div className="h-full w-2/5">
<div className='w-full mb-5 h-full gap-3 bg-blue-400 p-7 flex flex-row text-left shadow-2xl'> <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"> <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" /> <img src="/icons/backarrow.png" className="w-10 h-10 mr-10" title="retour" />
</Link> </Link>

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

@@ -17,7 +17,7 @@ export default function TeamAddForm({onAddTeam}) {
<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" /> <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>
<div className='w-1/5'> <div className='w-1/5'>
<button type="submit" className="w-5 w-full h-full bg-blue-400 hover:bg-blue-500 transition text-3xl font-bold">+</button> <button type="submit" className="w-5 w-full h-full bg-custom-light-blue hover:bg-blue-500 transition text-3xl font-bold">+</button>
</div> </div>
</form> </form>
) )

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

@@ -1,5 +1,6 @@
"use client"; "use client";
import useAdmin from '@/hook/useAdmin'; import useAdmin from '@/hook/useAdmin';
import { GameState } from '@/util/gameState';
import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd'; import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
import React from 'react' import React from 'react'
import { useFormStatus } from 'react-dom'; import { useFormStatus } from 'react-dom';
@@ -20,8 +21,9 @@ const TEAM_STATUS = {
notready: { label: "En préparation", color: "text-custom-grey" }, notready: { label: "En préparation", color: "text-custom-grey" },
}; };
function TeamListItem({ team, index, onSelected, itemSelected }) { function TeamListItem({ team, index, onSelected, itemSelected, gamestate }) {
const status = TEAM_STATUS.captured; //Il faudrait ici implementer la logique, ce qui est normalement pas trop difficile console.log(gamestate === GameState.PLAYING ? "En jeu" : "En préparation");
const status = gamestate === GameState.PLAYING ? (team.captured ? TEAM_STATUS.captured : (team.outofzone ? TEAM_STATUS.outofzone : TEAM_STATUS.playing)) : (team.ready ? TEAM_STATUS.ready : TEAM_STATUS.notready);
return ( return (
<Draggable draggableId={team.id.toString()} index={index} onClick={() => onSelected(team.id)}> <Draggable draggableId={team.id.toString()} index={index} onClick={() => onSelected(team.id)}>
{provided => ( {provided => (
@@ -46,7 +48,7 @@ function TeamListItem({ team, index, onSelected, itemSelected }) {
} }
export default function TeamList({selectedTeamId, onSelected}) { export default function TeamList({selectedTeamId, onSelected}) {
const {teams, reorderTeams} = useAdmin(); const {teams, reorderTeams, gameState} = useAdmin();
function onDragEnd(result) { function onDragEnd(result) {
if (!result.destination) { if (!result.destination) {
return; return;
@@ -71,7 +73,7 @@ export default function TeamList({selectedTeamId, onSelected}) {
<ul ref={provided.innerRef} {...provided.droppableProps}> <ul ref={provided.innerRef} {...provided.droppableProps}>
{teams.map((team, i) => ( {teams.map((team, i) => (
<li key={team.id} onClick={() => onSelected(team.id)}> <li key={team.id} onClick={() => onSelected(team.id)}>
<TeamListItem onSelected={onSelected} index={i} itemSelected={selectedTeamId === team.id} team={team} /> <TeamListItem onSelected={onSelected} index={i} itemSelected={selectedTeamId === team.id} team={team} gamestate={gameState} />
</li> </li>
))} ))}
{provided.placeholder} {provided.placeholder}

1
traque-front/hook/useAdmin.jsx
View File

@@ -11,7 +11,6 @@ export default function useAdmin() {
} }
function getTeam(teamId) { function getTeam(teamId) {
console.log(teams[0]);
return teams.find(team => team.id === teamId); return teams.find(team => team.id === teamId);
} }

1
traque-front/tailwind.config.js
View File

@@ -8,6 +8,7 @@ module.exports = {
'custom-orange': '#fa6400', 'custom-orange': '#fa6400',
'custom-blue': '#1e90ff', 'custom-blue': '#1e90ff',
'custom-grey': '#808080', 'custom-grey': '#808080',
'custom-light-blue': '#80b3ff'
} }
} }
}, },