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

modified several UI thingies

Browse Source
This commit is contained in:
martin.devaux
2025-06-24 10:42:59 +02:00
parent 7d541159cd
commit 8c71e48f31
13 changed files with 81 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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

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

@@ -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>
)

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

@@ -11,15 +11,23 @@ const reorder = (list, startIndex, endIndex) => {
return result;
};
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);
function TeamListItem({ team, index, onSelected, itemSelected }) {;
return (
<Draggable draggableId={team.id.toString()} index={index} onClick={() => onSelected(team.id)}>
{provided => (
<div className={classNames} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
<p className='text-center'>{team.name}</p>
<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>
)}