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 zone selection

Browse Source
This commit is contained in:
Sebastien Riviere
2025-08-10 18:18:25 +02:00
parent 2f5116b88a
commit 623d1c05bf
4 changed files with 75 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,5 @@
"use client";
import GameSettings from "@/components/admin/gameSettings";
import PenaltySettings from "@/components/admin/penaltySettings";
import { useAdminConnexion } from "@/context/adminConnexionContext";
import dynamic from "next/dynamic";
@@ -13,12 +12,13 @@ export default function AdminPage() {
useProtect();
return (
<div className='min-h-full bg-gray-200 p-10 flex flex-row content-start gap-5'>
<div className='h-full bg-gray-200 p-10 flex flex-row gap-5'>
<div className="h-full w-2/6">
<GameSettings />
</div>
<ZoneSelector />
<PenaltySettings />
<div className="h-full w-full">
<ZoneSelector />
</div>
</div>
);
}

34
traque-front/components/admin/gameSettings.jsx
View File

@@ -24,25 +24,27 @@ export default function GameSettings() {
}
return (
<div className='w-full h-full gap-1 bg-white p-10 flex flex-col text-center shadow-2xl overflow-y-scroll'>
<h2 className="text-2xl">Other settings</h2>
<div>
<p>Waiting message</p>
<TextArea value={waitingMessage} onChange={(e) => setWaitingMessage(e.target.value)} />
<div className='w-full h-full gap-5 bg-white p-10 flex flex-col text-center shadow-2xl overflow-y-scroll'>
<h2 className="text-2xl">Messages</h2>
<div className='w-full gap-1 flex flex-col text-center'>
<p>Game setup</p>
<TextArea style={{height: 60}} value={waitingMessage} onChange={(e) => setWaitingMessage(e.target.value)} />
</div>
<div className='w-full gap-1 flex flex-col text-center'>
<p>Team captured</p>
<TextArea style={{height: 60}} value={capturedMessage} onChange={(e) => setCapturedMessage(e.target.value)} />
</div>
<div className='w-full gap-1 flex flex-col text-center'>
<p>Game finished (winner)</p>
<TextArea style={{height: 60}} value={winnerEndMessage} onChange={(e) => setWinnerEndMessage(e.target.value)} />
</div>
<div className='w-full gap-1 flex flex-col text-center'>
<p>Game finished (loser)</p>
<TextArea style={{height: 60}} value={loserEndMessage} onChange={(e) => setLoserEndMessage(e.target.value)} />
</div>
<div>
<p>Captured message</p>
<TextArea value={capturedMessage} onChange={(e) => setCapturedMessage(e.target.value)} />
<GreenButton onClick={applySettings}>Apply</GreenButton>
</div>
<div>
<p>Game finished message (winner)</p>
<TextArea value={winnerEndMessage} onChange={(e) => setWinnerEndMessage(e.target.value)} />
</div>
<div>
<p>Game finished message (loser)</p>
<TextArea value={loserEndMessage} onChange={(e) => setLoserEndMessage(e.target.value)} />
</div>
<GreenButton onClick={applySettings}>Apply</GreenButton>
</div>
)
}

52
traque-front/components/admin/polygonZoneMap.jsx
View File

@@ -69,7 +69,7 @@ function PolygonZonePicker({ polygons, addPolygon, removePolygon, ...props }) {
const location = useLocation(Infinity);
return (
<div className='h-96'>
<div className='h-full'>
<MapContainer {...props} className='min-h-full w-full' center={location} zoom={DEFAULT_ZOOM} scrollWheelZoom={true}>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
@@ -87,13 +87,18 @@ export default function PolygonZoneMap() {
const [polygons, setPolygons] = useState([]);
const [durations, setDurations] = useState([]);
const {zoneSettings, changeZoneSettings} = useAdmin();
const {penaltySettings, changePenaltySettings} = useAdmin();
const [allowedTimeOutOfZone, setAllowedTimeOutOfZone] = useState("");
useEffect(() => {
if (zoneSettings) {
setPolygons(zoneSettings.polygons);
setDurations(zoneSettings.durations);
}
}, [zoneSettings]);
if (penaltySettings) {
setAllowedTimeOutOfZone(penaltySettings.allowedTimeOutOfZone.toString());
}
}, [zoneSettings, penaltySettings]);
function addPolygon(polygon) {
// Polygons
@@ -122,21 +127,38 @@ export default function PolygonZoneMap() {
function handleSettingsSubmit() {
const newSettings = {polygons: polygons, durations: durations};
changeZoneSettings(newSettings);
changePenaltySettings({allowedTimeOutOfZone: Number(allowedTimeOutOfZone)});
}
return (
<div className='w-2/5 h-full gap-1 bg-white p-10 flex flex-col text-center shadow-2xl overflow-y-scroll'>
<h2 className="text-2xl">Edit zones</h2>
<PolygonZonePicker polygons={polygons} addPolygon={addPolygon} removePolygon={removePolygon} />
<ul>
{durations.map((duration, i) => (
<li key={i}>
<p>Zone {i+1}</p>
<TextInput value={duration} onChange={(e) => updateDuration(i, e.target.value)}/>
</li>
))}
</ul>
<GreenButton onClick={handleSettingsSubmit}>Apply</GreenButton>
<div className='h-full w-full bg-white p-5 gap-5 flex flex-row shadow-2xl'>
<div className="h-full w-full">
<PolygonZonePicker polygons={polygons} addPolygon={addPolygon} removePolygon={removePolygon} />
</div>
<div className="h-full w-1/6 flex flex-col gap-5">
<div className="w-full text-center">
<h2 className="text-xl">Reduction order</h2>
</div>
<ul className="w-full h-full bg-gray-300">
{durations.map((duration, i) => (
<li key={i} className="w-full bg-white flex flex-row gap-2 items-center justify-between p-1">
<p>Zone {i+1}</p>
<div className="w-16 h-10">
<TextInput value={duration} onChange={(e) => updateDuration(i, e.target.value)}/>
</div>
</li>
))}
</ul>
<div className="w-full flex flex-row gap-2 items-center justify-between">
<p>Timeout</p>
<div className="w-16 h-10">
<TextInput value={allowedTimeOutOfZone} onChange={(e) => setAllowedTimeOutOfZone(e.target.value)} />
</div>
</div>
<div className="w-full h-15">
<GreenButton onClick={handleSettingsSubmit}>Apply</GreenButton>
</div>
</div>
</div>
);
}