mirror of
https://git.rezel.net/LudoTech/traque.git
synced 2026-02-09 02:10:18 +01:00
Remove out of zone penality + upgrades
This commit is contained in:
Sebastien Riviere
@@ -19,7 +19,7 @@ const zoneTypes = {
|
||||
}
|
||||
|
||||
export default function LiveMap({mapStyle, showZones, showNames, showArrows}) {
|
||||
const { zoneSettings, zoneExtremities, teams, nextZoneDate, getTeam, gameState } = useAdmin();
|
||||
const { zoneType, zoneExtremities, teams, nextZoneDate, getTeam, gameState } = useAdmin();
|
||||
const [timeLeftNextZone, setTimeLeftNextZone] = useState(null);
|
||||
|
||||
// Remaining time before sending position
|
||||
@@ -48,16 +48,16 @@ export default function LiveMap({mapStyle, showZones, showNames, showArrows}) {
|
||||
if (pos1 && pos2) {
|
||||
return (
|
||||
<Polyline positions={[pos1, pos2]} pathOptions={{ color: 'black', weight: 3 }}/>
|
||||
)
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function Zones() {
|
||||
if (!(showZones && gameState == GameState.PLAYING && zoneSettings)) return null;
|
||||
if (!(showZones && gameState == GameState.PLAYING && zoneType)) return null;
|
||||
|
||||
switch (zoneSettings.type) {
|
||||
switch (zoneType) {
|
||||
case zoneTypes.circle:
|
||||
return (
|
||||
<div>
|
||||
@@ -83,10 +83,12 @@ export default function LiveMap({mapStyle, showZones, showNames, showArrows}) {
|
||||
<CustomMapContainer mapStyle={mapStyle}>
|
||||
<Zones/>
|
||||
{teams.map((team) => team.currentLocation && !team.captured &&
|
||||
<Marker key={team.id} position={team.currentLocation} icon={positionIcon}>
|
||||
{showNames && <Tooltip permanent direction="top" offset={[0.5, -15]} className="custom-tooltip">{team.name}</Tooltip>}
|
||||
{showArrows && <Arrow pos1={team.currentLocation} pos2={getTeam(team.chasing).currentLocation}/>}
|
||||
</Marker>
|
||||
<div>
|
||||
<Marker key={team.id} position={team.currentLocation} icon={positionIcon}>
|
||||
{showNames && <Tooltip permanent direction="top" offset={[0.5, -15]} className="custom-tooltip">{team.name}</Tooltip>}
|
||||
</Marker>
|
||||
{showArrows && <Arrow key={team.id} pos1={team.currentLocation} pos2={getTeam(team.chased).currentLocation}/>}
|
||||
</div>
|
||||
)}
|
||||
</CustomMapContainer>
|
||||
</div>
|
||||
|
||||
@@ -50,7 +50,7 @@ function getStatus(team, gamestate) {
|
||||
}
|
||||
|
||||
export default function TeamSidePanel({ selectedTeamId, onClose }) {
|
||||
const { getTeam, getTeamName, startDate, gameState } = useAdmin();
|
||||
const { getTeam, startDate, gameState } = useAdmin();
|
||||
const [imgSrc, setImgSrc] = useState("");
|
||||
const team = getTeam(selectedTeamId);
|
||||
const NO_VALUE = "XX";
|
||||
@@ -115,8 +115,8 @@ export default function TeamSidePanel({ selectedTeamId, onClose }) {
|
||||
<DotLine label="ID de capture" value={String(team.captureCode).padStart(4, '0')} />
|
||||
</div>
|
||||
<div>
|
||||
<DotLine label="Chasse" value={getTeamName(team.chasing) ?? NO_VALUE} />
|
||||
<DotLine label="Chassé par" value={getTeamName(team.chased) ?? NO_VALUE} />
|
||||
<DotLine label="Chasse" value={getTeam(team.chasing).name ?? NO_VALUE} />
|
||||
<DotLine label="Chassé par" value={getTeam(team.chased).name ?? NO_VALUE} />
|
||||
</div>
|
||||
<div>
|
||||
<DotLine label="Distance" value={formatDistance(team.distance)} />
|
||||
|
||||
@@ -6,6 +6,7 @@ import { CustomMapContainer, MapEventListener } from "@/components/map";
|
||||
import { TextInput } from "@/components/input";
|
||||
import useAdmin from "@/hook/useAdmin";
|
||||
import useMapCircleDraw from "@/hook/useMapCircleDraw";
|
||||
import useLocalVariable from "@/hook/useLocalVariable";
|
||||
|
||||
const EditMode = {
|
||||
MIN: 0,
|
||||
@@ -43,38 +44,36 @@ function Drawings({ minZone, setMinZone, maxZone, setMaxZone, editMode }) {
|
||||
return (
|
||||
<div>
|
||||
<MapEventListener onLeftClick={handleLeftClick} onRightClick={handleRightClick} onMouseMove={handleMouseMove}/>
|
||||
{minCenter && minRadius && <Circle center={minCenter} radius={minRadius} color="blue" fillColor="blue" />}
|
||||
{maxCenter && maxRadius && <Circle center={maxCenter} radius={maxRadius} color="red" fillColor="red" />}
|
||||
{minCenter && minRadius && <Circle center={minCenter} radius={minRadius} color="red" fillColor="red" />}
|
||||
{maxCenter && maxRadius && <Circle center={maxCenter} radius={maxRadius} color="blue" fillColor="blue" />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function CircleZoneSelector({zoneSettings, updateZoneSettings, applyZoneSettings}) {
|
||||
const {penaltySettings, changePenaltySettings} = useAdmin();
|
||||
const [allowedTimeOutOfZone, setAllowedTimeOutOfZone] = useState("");
|
||||
export default function CircleZoneSelector({zoneSettings, modifyZoneSettings, applyZoneSettings}) {
|
||||
const {outOfZoneDelay, updateSettings} = useAdmin();
|
||||
const [localOutOfZoneDelay, setLocalOutOfZoneDelay, applyLocalOutOfZoneDelay] = useLocalVariable(outOfZoneDelay, (e) => updateSettings({outOfZoneDelay: e}));
|
||||
const [editMode, setEditMode] = useState(EditMode.MIN);
|
||||
|
||||
useEffect(() => {
|
||||
setEditMode(editMode == EditMode.MIN ? EditMode.MAX : EditMode.MIN);
|
||||
}, [zoneSettings.min, zoneSettings.max])
|
||||
|
||||
useEffect(() => {
|
||||
if (penaltySettings) {
|
||||
setAllowedTimeOutOfZone(penaltySettings.allowedTimeOutOfZone.toString());
|
||||
}
|
||||
}, [penaltySettings]);
|
||||
}, [zoneSettings.min, zoneSettings.max]);
|
||||
|
||||
function handleSettingsSubmit() {
|
||||
console.log(zoneSettings)
|
||||
applyZoneSettings();
|
||||
changePenaltySettings({allowedTimeOutOfZone: Number(allowedTimeOutOfZone)});
|
||||
applyLocalOutOfZoneDelay();
|
||||
}
|
||||
|
||||
function customStringToInt(e) {
|
||||
const res = parseInt(e, 10);
|
||||
return isNaN(res) ? null : res;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='h-full w-full bg-white p-3 gap-3 flex flex-row shadow-2xl'>
|
||||
<div className='h-full w-full gap-3 flex flex-row'>
|
||||
<div className="h-full flex-1">
|
||||
<CustomMapContainer>
|
||||
<Drawings minZone={zoneSettings.min} setMinZone={(e) => updateZoneSettings("min", e)} maxZone={zoneSettings.max} setMaxZone={(e) => updateZoneSettings("max", e)} editMode={editMode} />
|
||||
<Drawings minZone={zoneSettings.min} setMinZone={(e) => modifyZoneSettings("min", e)} maxZone={zoneSettings.max} setMaxZone={(e) => modifyZoneSettings("max", e)} editMode={editMode} />
|
||||
</CustomMapContainer>
|
||||
</div>
|
||||
<div className="h-full w-1/6 flex flex-col gap-3">
|
||||
@@ -83,21 +82,21 @@ export default function CircleZoneSelector({zoneSettings, updateZoneSettings, ap
|
||||
{editMode == EditMode.MAX && <RedButton onClick={() => setEditMode(EditMode.MIN)}>Click to edit last zone</RedButton>}
|
||||
</div>
|
||||
<div className="w-full flex flex-row gap-2 items-center justify-between">
|
||||
<p>Number</p>
|
||||
<p>Reduction number</p>
|
||||
<div className="w-16 h-10">
|
||||
<TextInput value={zoneSettings.reductionCount} onChange={(e) => updateZoneSettings("reductionCount", e.target.value)} />
|
||||
<TextInput id="reduction-number" value={zoneSettings?.reductionCount ?? ""} onChange={(e) => modifyZoneSettings("reductionCount", customStringToInt(e.target.value))} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex flex-row gap-2 items-center justify-between">
|
||||
<p>Duration</p>
|
||||
<p>Zone duration</p>
|
||||
<div className="w-16 h-10">
|
||||
<TextInput value={zoneSettings.duration} onChange={(e) => updateZoneSettings("duration", e.target.value)} />
|
||||
<TextInput id="duration" value={zoneSettings?.duration ?? ""} onChange={(e) => modifyZoneSettings("duration", customStringToInt(e.target.value))} />
|
||||
</div>
|
||||
</div>
|
||||
<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)} />
|
||||
<TextInput id="timeout" value={localOutOfZoneDelay ?? ""} onChange={(e) => setLocalOutOfZoneDelay(customStringToInt(e.target.value))} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full h-15">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Section } from "@/components/section";
|
||||
import useAdmin from "@/hook/useAdmin";
|
||||
import useLocalVariable from "@/hook/useLocalVariable";
|
||||
|
||||
function MessageInput({title, ...props}) {
|
||||
return (
|
||||
@@ -12,33 +12,19 @@ function MessageInput({title, ...props}) {
|
||||
}
|
||||
|
||||
export default function Messages() {
|
||||
const {gameSettings, changeGameSettings} = useAdmin();
|
||||
const [capturedMessage, setCapturedMessage] = useState("");
|
||||
const [winnerEndMessage, setWinnerEndMessage] = useState("");
|
||||
const [loserEndMessage, setLoserEndMessage] = useState("");
|
||||
const [waitingMessage, setWaitingMessage] = useState("");
|
||||
const {messages, updateSettings} = useAdmin();
|
||||
const [localGameSettings, setLocalGameSettings, applyLocalGameSettings] = useLocalVariable(messages, (e) => updateSettings({messages: e}));
|
||||
|
||||
useEffect(() => {
|
||||
if (gameSettings) {
|
||||
setCapturedMessage(gameSettings.capturedMessage);
|
||||
setWinnerEndMessage(gameSettings.winnerEndGameMessage);
|
||||
setLoserEndMessage(gameSettings.loserEndGameMessage);
|
||||
setWaitingMessage(gameSettings.waitingMessage);
|
||||
}
|
||||
}, [gameSettings]);
|
||||
|
||||
function applySettings() {
|
||||
changeGameSettings({capturedMessage: capturedMessage, winnerEndGameMessage: winnerEndMessage, loserEndGameMessage: loserEndMessage, waitingMessage: waitingMessage});
|
||||
}
|
||||
function modifyLocalZoneSettings(key, value) {
|
||||
setLocalGameSettings(prev => ({...prev, [key]: value}));
|
||||
};
|
||||
|
||||
return (
|
||||
<Section title="Message">
|
||||
<div className="w-full h-full flex flex-col gap-3 items-center">
|
||||
<MessageInput title="Attente :" value={waitingMessage} onChange={(e) => setWaitingMessage(e.target.value)} onBlur={applySettings}/>
|
||||
<MessageInput title="Capture :" value={capturedMessage} onChange={(e) => setCapturedMessage(e.target.value)} onBlur={applySettings}/>
|
||||
<MessageInput title="Victoire :" value={winnerEndMessage} onChange={(e) => setWinnerEndMessage(e.target.value)} onBlur={applySettings}/>
|
||||
<MessageInput title="Défaite :" value={loserEndMessage} onChange={(e) => setLoserEndMessage(e.target.value)} onBlur={applySettings}/>
|
||||
</div>
|
||||
<Section title="Message" innerClassName="w-full h-full flex flex-col gap-3 items-center">
|
||||
<MessageInput id="waiting" title="Attente :" value={localGameSettings?.waiting ?? ""} onChange={(e) => modifyLocalZoneSettings("waiting", e.target.value)} onBlur={applyLocalGameSettings}/>
|
||||
<MessageInput id="captured" title="Capture :" value={localGameSettings?.captured ?? ""} onChange={(e) => modifyLocalZoneSettings("captured", e.target.value)} onBlur={applyLocalGameSettings}/>
|
||||
<MessageInput id="winner" title="Victoire :" value={localGameSettings?.winner ?? ""} onChange={(e) => modifyLocalZoneSettings("winner", e.target.value)} onBlur={applyLocalGameSettings}/>
|
||||
<MessageInput id="loser" title="Défaite :" value={localGameSettings?.loser ?? ""} onChange={(e) => modifyLocalZoneSettings("loser", e.target.value)} onBlur={applyLocalGameSettings}/>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,6 +7,7 @@ import { CustomMapContainer, MapEventListener } from "@/components/map";
|
||||
import { TextInput } from "@/components/input";
|
||||
import useAdmin from "@/hook/useAdmin";
|
||||
import useMapPolygonDraw from "@/hook/useMapPolygonDraw";
|
||||
import useLocalVariable from "@/hook/useLocalVariable";
|
||||
|
||||
function Drawings({ polygons, addPolygon, removePolygon }) {
|
||||
const { currentPolygon, highlightNodes, handleLeftClick, handleRightClick, handleMouseMove } = useMapPolygonDraw(polygons, addPolygon, removePolygon);
|
||||
@@ -94,51 +95,44 @@ function Drawings({ polygons, addPolygon, removePolygon }) {
|
||||
);
|
||||
}
|
||||
|
||||
export default function PolygonZoneSelector({zoneSettings, updateZoneSettings, applyZoneSettings}) {
|
||||
export default function PolygonZoneSelector({zoneSettings, modifyZoneSettings, applyZoneSettings}) {
|
||||
const defaultDuration = 10;
|
||||
const [polygons, setPolygons] = useState([]);
|
||||
const {penaltySettings, changePenaltySettings} = useAdmin();
|
||||
const [allowedTimeOutOfZone, setAllowedTimeOutOfZone] = useState("");
|
||||
const {outOfZoneDelay, updateSettings} = useAdmin();
|
||||
const [localOutOfZoneDelay, setLocalOutOfZoneDelay, applyLocalOutOfZoneDelay] = useLocalVariable(outOfZoneDelay, (e) => updateSettings({outOfZoneDelay: e}));
|
||||
|
||||
useEffect(() => {
|
||||
if (zoneSettings) {
|
||||
const newPolygons = zoneSettings.polygons.map((zone) => ({id: idFromPolygon(zone.polygon), polygon: zone.polygon, duration: zone.duration}));
|
||||
setPolygons(newPolygons.map((zone) => zone.polygon));
|
||||
setPolygons(zoneSettings.polygons.map((zone) => zone.polygon));
|
||||
}
|
||||
}, [zoneSettings]);
|
||||
|
||||
useEffect(() => {
|
||||
if (penaltySettings) {
|
||||
setAllowedTimeOutOfZone(penaltySettings.allowedTimeOutOfZone.toString());
|
||||
}
|
||||
}, [penaltySettings]);
|
||||
|
||||
function idFromPolygon(polygon) {
|
||||
return (polygon[0].lat + polygon[1].lat + polygon[2].lat).toString() + (polygon[0].lng + polygon[1].lng + polygon[2].lng).toString();
|
||||
}
|
||||
|
||||
function addPolygon(polygon) {
|
||||
const newPolygons = [...zoneSettings.polygons, {id: idFromPolygon(polygon), polygon: polygon, duration: defaultDuration}];
|
||||
updateZoneSettings("polygons", newPolygons);
|
||||
modifyZoneSettings("polygons", newPolygons);
|
||||
}
|
||||
|
||||
function removePolygon(i) {
|
||||
const newPolygons = zoneSettings.polygons.filter((_, index) => index !== i);
|
||||
updateZoneSettings("polygons", newPolygons);
|
||||
modifyZoneSettings("polygons", newPolygons);
|
||||
}
|
||||
|
||||
function updateDuration(i, duration) {
|
||||
const newPolygons = zoneSettings.polygons.map((zone, index) => index === i ? {id: zone.id, polygon: zone.polygon, duration: duration} : zone);
|
||||
updateZoneSettings("polygons", newPolygons);
|
||||
modifyZoneSettings("polygons", newPolygons);
|
||||
}
|
||||
|
||||
function handleSettingsSubmit() {
|
||||
applyZoneSettings();
|
||||
changePenaltySettings({allowedTimeOutOfZone: Number(allowedTimeOutOfZone)});
|
||||
applyLocalOutOfZoneDelay();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='h-full w-full bg-white p-3 gap-3 flex flex-row shadow-2xl'>
|
||||
<div className='h-full w-full gap-3 flex flex-row'>
|
||||
<div className="h-full flex-1">
|
||||
<CustomMapContainer>
|
||||
<Drawings polygons={polygons} addPolygon={addPolygon} removePolygon={removePolygon} />
|
||||
@@ -148,12 +142,12 @@ export default function PolygonZoneSelector({zoneSettings, updateZoneSettings, a
|
||||
<div className="w-full text-center">
|
||||
<h2 className="text-xl">Reduction order</h2>
|
||||
</div>
|
||||
<ReorderList droppableId="zones-order" array={zoneSettings.polygons} setArray={(polygons) => updateZoneSettings("polygons", polygons)}>
|
||||
<ReorderList droppableId="zones-order" array={zoneSettings.polygons} setArray={(polygons) => modifyZoneSettings("polygons", polygons)}>
|
||||
{ (zone, i) =>
|
||||
<div className="w-full p-2 bg-white flex flex-row gap-2 items-center justify-between">
|
||||
<p>Zone {i+1}</p>
|
||||
<div className="w-16 h-10">
|
||||
<TextInput value={zone.duration} onChange={(e) => updateDuration(i, e.target.value)}/>
|
||||
<TextInput value={zone?.duration || ""} onChange={(e) => updateDuration(i, parseInt(e.target.value, 10))}/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -161,7 +155,7 @@ export default function PolygonZoneSelector({zoneSettings, updateZoneSettings, a
|
||||
<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)} />
|
||||
<TextInput id="timeout" value={localOutOfZoneDelay ?? ""} onChange={(e) => setLocalOutOfZoneDelay(parseInt(e.target.value, 10))} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full h-15">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState } from "react";
|
||||
import dynamic from "next/dynamic";
|
||||
import Link from "next/link";
|
||||
import { TextInput } from "@/components/input";
|
||||
@@ -9,6 +9,7 @@ import { useAdminConnexion } from "@/context/adminConnexionContext";
|
||||
import useAdmin from '@/hook/useAdmin';
|
||||
import Messages from "./components/messages";
|
||||
import TeamManager from './components/teamManager';
|
||||
import useLocalVariable from "@/hook/useLocalVariable";
|
||||
|
||||
// Imported at runtime and not at compile time
|
||||
const PolygonZoneSelector = dynamic(() => import('./components/polygonZoneSelector'), { ssr: false });
|
||||
@@ -23,41 +24,23 @@ const defaultCircleSettings = {type: zoneTypes.circle, min: null, max: null, red
|
||||
const defaultPolygonSettings = {type: zoneTypes.polygon, polygons: []}
|
||||
|
||||
export default function ConfigurationPage() {
|
||||
const {zoneSettings, changeZoneSettings, penaltySettings, changePenaltySettings, addTeam} = useAdmin();
|
||||
const { useProtect } = useAdminConnexion();
|
||||
const [allowedTimeBetweenUpdates, setAllowedTimeBetweenUpdates] = useState("");
|
||||
const {zoneSettings, sendPositionDelay, updateSettings, addTeam} = useAdmin();
|
||||
const [teamName, setTeamName] = useState('');
|
||||
const [localZoneSettings, setLocalZoneSettings] = useState(zoneSettings);
|
||||
const [localZoneSettings, setLocalZoneSettings, applyLocalZoneSettings] = useLocalVariable(zoneSettings, (e) => updateSettings({zone: e}));
|
||||
const [localSendPositionDelay, setLocalSendPositionDelay, applyLocalSendPositionDelay] = useLocalVariable(sendPositionDelay, (e) => updateSettings({sendPositionDelay: e}));
|
||||
|
||||
useProtect();
|
||||
|
||||
useEffect(() => {
|
||||
if (penaltySettings) {
|
||||
setAllowedTimeBetweenUpdates(penaltySettings.allowedTimeBetweenPositionUpdate.toString());
|
||||
}
|
||||
}, [penaltySettings]);
|
||||
|
||||
useEffect(() => {
|
||||
if (zoneSettings) {
|
||||
setLocalZoneSettings(zoneSettings);
|
||||
}
|
||||
}, [zoneSettings]);
|
||||
|
||||
function updateLocalZoneSettings(key, value) {
|
||||
function modifyLocalZoneSettings(key, value) {
|
||||
setLocalZoneSettings(prev => ({...prev, [key]: value}));
|
||||
};
|
||||
|
||||
function applySettings() {
|
||||
if (Number(allowedTimeBetweenUpdates) != penaltySettings.allowedTimeBetweenPositionUpdate) {
|
||||
changePenaltySettings({allowedTimeBetweenPositionUpdate: Number(allowedTimeBetweenUpdates)});
|
||||
}
|
||||
}
|
||||
|
||||
function handleChangeZoneType() {
|
||||
setLocalZoneSettings(localZoneSettings.type == zoneTypes.circle ? defaultPolygonSettings : defaultCircleSettings)
|
||||
}
|
||||
|
||||
function handleSubmit(e) {
|
||||
function handleTeamSubmit(e) {
|
||||
e.preventDefault();
|
||||
if (teamName !== "") {
|
||||
addTeam(teamName);
|
||||
@@ -76,7 +59,7 @@ export default function ConfigurationPage() {
|
||||
</div>
|
||||
<Messages/>
|
||||
<Section title="Équipe" outerClassName="flex-1 min-h-0" innerClassName="flex flex-col items-center gap-3">
|
||||
<form className='w-full flex flex-row gap-3' onSubmit={handleSubmit}>
|
||||
<form className='w-full flex flex-row gap-3' onSubmit={handleTeamSubmit}>
|
||||
<div className='w-full'>
|
||||
<input name="teamName" label='Team name' value={teamName} onChange={(e) => setTeamName(e.target.value)} type="text" className="w-full h-full p-4 ring-1 ring-inset ring-gray-300" />
|
||||
</div>
|
||||
@@ -90,21 +73,21 @@ export default function ConfigurationPage() {
|
||||
<div className="w-full flex flex-row gap-2 items-center justify-between">
|
||||
<p>Interval between position updates</p>
|
||||
<div className="w-16 h-10">
|
||||
<TextInput value={allowedTimeBetweenUpdates} onChange={(e) => setAllowedTimeBetweenUpdates(e.target.value)} onBlur={applySettings} />
|
||||
<TextInput id="position-update" value={localSendPositionDelay ?? ""} onChange={(e) => setLocalSendPositionDelay(parseInt(e.target.value, 10))} onBlur={applyLocalSendPositionDelay} />
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
<div className="h-full flex-1 flex flex-col">
|
||||
<div className="w-full h-20">
|
||||
<div className="h-full flex-1 flex flex-col p-3 gap-3 bg-white shadow-2xl">
|
||||
<div className="w-full h-15">
|
||||
{localZoneSettings && <BlueButton onClick={handleChangeZoneType}>Change zone type</BlueButton>}
|
||||
</div>
|
||||
<div className="w-full flex-1">
|
||||
{localZoneSettings && localZoneSettings.type == zoneTypes.circle &&
|
||||
<CircleZoneSelector zoneSettings={localZoneSettings} updateZoneSettings={updateLocalZoneSettings} applyZoneSettings={() => changeZoneSettings(localZoneSettings)}/>
|
||||
<CircleZoneSelector zoneSettings={localZoneSettings} modifyZoneSettings={modifyLocalZoneSettings} applyZoneSettings={applyLocalZoneSettings}/>
|
||||
}
|
||||
{localZoneSettings && localZoneSettings.type == zoneTypes.polygon &&
|
||||
<PolygonZoneSelector zoneSettings={localZoneSettings} updateZoneSettings={updateLocalZoneSettings} applyZoneSettings={() => changeZoneSettings(localZoneSettings)}/>
|
||||
<PolygonZoneSelector zoneSettings={localZoneSettings} modifyZoneSettings={modifyLocalZoneSettings} applyZoneSettings={applyLocalZoneSettings}/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import React from 'react'
|
||||
const className = "block w-full h-full p-4 rounded text-center ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600";
|
||||
|
||||
export function TextInput({...props}) {
|
||||
return (
|
||||
<input {...props} type="text" className="block w-full h-full p-4 rounded text-center ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600" />
|
||||
<input {...props} type="text" className={className} />
|
||||
)
|
||||
}
|
||||
|
||||
export function TextArea({...props}) {
|
||||
return (
|
||||
<textarea {...props} className="block w-full h-full p-4 rounded text-center ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600" />
|
||||
<textarea {...props} className={className} />
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,44 +1,52 @@
|
||||
"use client";
|
||||
import { createContext, useContext, useEffect, useMemo, useState } from "react";
|
||||
import { createContext, useContext, useMemo, useState } from "react";
|
||||
import { useSocket } from "./socketContext";
|
||||
import useSocketListener from "@/hook/useSocketListener";
|
||||
import { useAdminConnexion } from "./adminConnexionContext";
|
||||
import { GameState } from "@/util/gameState";
|
||||
|
||||
const adminContext = createContext();
|
||||
|
||||
export function AdminProvider({ children }) {
|
||||
const [teams, setTeams] = useState([]);
|
||||
const [zoneSettings, setZoneSettings] = useState(null)
|
||||
const [penaltySettings, setPenaltySettings] = useState(null);
|
||||
const [gameSettings, setGameSettings] = useState(null);
|
||||
const [zoneExtremities, setZoneExtremities] = useState(null);
|
||||
const [nextZoneDate, setNextZoneDate] = useState(null);
|
||||
const { adminSocket } = useSocket();
|
||||
const { loggedIn } = useAdminConnexion();
|
||||
// teams
|
||||
const [teams, setTeams] = useState([]);
|
||||
// game_state
|
||||
const [gameState, setGameState] = useState(GameState.SETUP);
|
||||
const [startDate, setStartDate] = useState(null);
|
||||
// current_zone
|
||||
const [zoneType, setZoneType] = useState(null);
|
||||
const [zoneExtremities, setZoneExtremities] = useState(null);
|
||||
const [nextZoneDate, setNextZoneDate] = useState(null);
|
||||
// settings
|
||||
const [messages, setMessages] = useState(null);
|
||||
const [zoneSettings, setZoneSettings] = useState(null)
|
||||
const [sendPositionDelay, setSendPositionDelay] = useState(null);
|
||||
const [outOfZoneDelay, setOutOfZoneDelay] = useState(null);
|
||||
|
||||
// Send a request to get the teams when the user logs in
|
||||
useEffect(() => {
|
||||
adminSocket.emit("get_teams");
|
||||
}, [loggedIn]);
|
||||
useSocketListener(adminSocket, "teams", setTeams);
|
||||
|
||||
function setCurrentZone(data) {
|
||||
useSocketListener(adminSocket, "game_state", (data) => {
|
||||
setGameState(data.state);
|
||||
setStartDate(data.date)
|
||||
});
|
||||
|
||||
useSocketListener(adminSocket, "current_zone", (data) => {
|
||||
setZoneType(data.type);
|
||||
setZoneExtremities({begin: data.begin, end: data.end});
|
||||
setNextZoneDate(data.endDate);
|
||||
}
|
||||
});
|
||||
|
||||
useSocketListener(adminSocket, "game_state", (data) => {setGameState(data.state); setStartDate(data.startDate)});
|
||||
useSocketListener(adminSocket, "teams", setTeams);
|
||||
useSocketListener(adminSocket, "zone_settings", setZoneSettings);
|
||||
useSocketListener(adminSocket, "game_settings", setGameSettings);
|
||||
useSocketListener(adminSocket, "penalty_settings", setPenaltySettings);
|
||||
useSocketListener(adminSocket, "current_zone", setCurrentZone);
|
||||
useSocketListener(adminSocket, "settings", (data) => {
|
||||
setMessages(data.messages);
|
||||
setZoneSettings(data.zone);
|
||||
setSendPositionDelay(data.sendPositionDelay);
|
||||
setOutOfZoneDelay(data.outOfZoneDelay);
|
||||
});
|
||||
|
||||
const value = useMemo(() => (
|
||||
{ zoneExtremities, teams, zoneSettings, penaltySettings, gameSettings, gameState, nextZoneDate, startDate }
|
||||
), [zoneSettings, teams, gameState, zoneExtremities, penaltySettings, gameSettings, nextZoneDate, startDate]);
|
||||
{ zoneSettings, teams, gameState, zoneType, zoneExtremities, sendPositionDelay, outOfZoneDelay, messages, nextZoneDate, startDate }
|
||||
), [zoneSettings, teams, gameState, zoneType, zoneExtremities, sendPositionDelay, outOfZoneDelay, messages, nextZoneDate, startDate]);
|
||||
|
||||
return (
|
||||
<adminContext.Provider value={value}>
|
||||
{children}
|
||||
|
||||
@@ -7,19 +7,10 @@ export default function useAdmin() {
|
||||
const { teams } = adminContext;
|
||||
const { adminSocket } = useSocket();
|
||||
|
||||
function pollTeams() {
|
||||
adminSocket.emit("get_teams");
|
||||
}
|
||||
|
||||
function getTeam(teamId) {
|
||||
return teams.find(team => team.id === teamId);
|
||||
}
|
||||
|
||||
function getTeamName(teamId) {
|
||||
let team = getTeam(teamId);
|
||||
return team ? team.name : "";
|
||||
}
|
||||
|
||||
function reorderTeams(newOrder) {
|
||||
adminSocket.emit("reorder_teams", newOrder);
|
||||
}
|
||||
@@ -40,17 +31,9 @@ export default function useAdmin() {
|
||||
adminSocket.emit("change_state", state);
|
||||
}
|
||||
|
||||
function changeZoneSettings(zone) {
|
||||
adminSocket.emit("set_zone_settings", zone);
|
||||
function updateSettings(settings) {
|
||||
adminSocket.emit("update_settings", settings);
|
||||
}
|
||||
|
||||
function changePenaltySettings(penalties) {
|
||||
adminSocket.emit("set_penalty_settings", penalties);
|
||||
}
|
||||
|
||||
function changeGameSettings(settings) {
|
||||
adminSocket.emit("set_game_settings", settings);
|
||||
}
|
||||
return { ...adminContext, changeGameSettings, changeZoneSettings, changePenaltySettings, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, changeState, updateTeam };
|
||||
|
||||
return { ...adminContext, getTeam, reorderTeams, addTeam, removeTeam, updateTeam, changeState, updateSettings };
|
||||
}
|
||||
|
||||
15
traque-front/hook/useLocalVariable.jsx
Normal file
15
traque-front/hook/useLocalVariable.jsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export default function useLocalVariable(variable, setVariable) {
|
||||
const [localVariable, setLocalVariable] = useState(variable);
|
||||
|
||||
useEffect(() => {
|
||||
setLocalVariable(variable);
|
||||
}, [variable]);
|
||||
|
||||
function applyLocalVariable() {
|
||||
setVariable(localVariable);
|
||||
}
|
||||
|
||||
return [localVariable, setLocalVariable, applyLocalVariable];
|
||||
}
|
||||
Reference in New Issue
Block a user