mirror of
https://git.rezel.net/LudoTech/traque.git
synced 2026-02-28 09:40:16 +01:00
Restructuration of the project folders
This commit is contained in:
Sebastien Riviere
@@ -0,0 +1,111 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import { CustomMapContainer, MapEventListener } from "@/components/map";
|
||||
import { NumberInput } from "@/components/input";
|
||||
import useAdmin from "@/hook/useAdmin";
|
||||
import useMapCircleDraw from "@/hook/useCircleDraw";
|
||||
import useLocalVariable from "@/hook/useLocalVariable";
|
||||
import { defaultZoneSettings } from "@/util/configurations";
|
||||
import { ZoneTypes } from "@/util/types";
|
||||
import { CircleZone } from "@/components/layer";
|
||||
|
||||
const EditMode = {
|
||||
MIN: 0,
|
||||
MAX: 1
|
||||
}
|
||||
|
||||
function Drawings({ minZone, setMinZone, maxZone, setMaxZone, editMode }) {
|
||||
const { drawingCircle: drawingMaxCircle, handleLeftClick: maxLeftClick, handleRightClick: maxRightClick, handleMouseMove: maxHover } = useMapCircleDraw(maxZone, setMaxZone);
|
||||
const { drawingCircle: drawingMinCircle, handleLeftClick: minLeftClick, handleRightClick: minRightClick, handleMouseMove: minHover } = useMapCircleDraw(minZone, setMinZone);
|
||||
|
||||
function MaxCircleZone() {
|
||||
return (
|
||||
drawingMaxCircle
|
||||
? <CircleZone circle={drawingMaxCircle} color="blue" />
|
||||
: <CircleZone circle={maxZone} color="blue" />
|
||||
);
|
||||
}
|
||||
|
||||
function MinCircleZone() {
|
||||
return (
|
||||
drawingMinCircle
|
||||
? <CircleZone circle={drawingMinCircle} color="red" />
|
||||
: <CircleZone circle={minZone} color="red" />
|
||||
);
|
||||
}
|
||||
|
||||
return (<>
|
||||
<MapEventListener
|
||||
onLeftClick={editMode == EditMode.MAX ? maxLeftClick : minLeftClick}
|
||||
onRightClick={editMode == EditMode.MAX ? maxRightClick : minRightClick}
|
||||
onMouseMove={editMode == EditMode.MAX ? maxHover : minHover}
|
||||
/>
|
||||
<MaxCircleZone/>
|
||||
<MinCircleZone/>
|
||||
</>);
|
||||
}
|
||||
|
||||
export default function CircleZoneSelector({ display }) {
|
||||
const {zoneSettings, outOfZoneDelay, updateSettings} = useAdmin();
|
||||
const [localZoneSettings, setLocalZoneSettings, applyLocalZoneSettings] = useLocalVariable(zoneSettings, (e) => updateSettings({zone: e}));
|
||||
const [localOutOfZoneDelay, setLocalOutOfZoneDelay, applyLocalOutOfZoneDelay] = useLocalVariable(outOfZoneDelay, (e) => updateSettings({outOfZoneDelay: e}));
|
||||
const [editMode, setEditMode] = useState(EditMode.MAX);
|
||||
|
||||
useEffect(() => {
|
||||
if (!localZoneSettings || localZoneSettings.type != ZoneTypes.CIRCLE) {
|
||||
setLocalZoneSettings(defaultZoneSettings.circle);
|
||||
}
|
||||
}, [localZoneSettings]);
|
||||
|
||||
function setMinZone(minZone) {
|
||||
setLocalZoneSettings({...localZoneSettings, min: minZone});
|
||||
setEditMode(EditMode.MAX);
|
||||
}
|
||||
|
||||
function setMaxZone(maxZone) {
|
||||
setLocalZoneSettings({...localZoneSettings, max: maxZone});
|
||||
setEditMode(EditMode.MIN);
|
||||
}
|
||||
|
||||
function updateReductionCount(reductionCount) {
|
||||
setLocalZoneSettings({...localZoneSettings, reductionCount: reductionCount});
|
||||
}
|
||||
|
||||
function updateDuration(duration) {
|
||||
setLocalZoneSettings({...localZoneSettings, duration: duration});
|
||||
}
|
||||
|
||||
function handleSubmit() {
|
||||
applyLocalZoneSettings();
|
||||
applyLocalOutOfZoneDelay();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={display ? 'w-full h-full gap-3 flex flex-row' : "hidden"}>
|
||||
{localZoneSettings && localZoneSettings.type == ZoneTypes.CIRCLE && <>
|
||||
<div className="h-full flex-1">
|
||||
<CustomMapContainer>
|
||||
<Drawings minZone={localZoneSettings.min} setMinZone={setMinZone} maxZone={localZoneSettings.max} setMaxZone={setMaxZone} editMode={editMode} />
|
||||
</CustomMapContainer>
|
||||
</div>
|
||||
<div className="h-full w-1/6 flex flex-col gap-3">
|
||||
{editMode == EditMode.MAX && <button className="w-full h-16 text-lg text-white rounded bg-blue-600 hover:bg-blue-500" onClick={() => setEditMode(EditMode.MIN)}>Édition première zone</button>}
|
||||
{editMode == EditMode.MIN && <button className="w-full h-16 text-lg text-white rounded bg-red-600 hover:bg-red-500" onClick={() => setEditMode(EditMode.MAX)}>Édition dernière zone</button>}
|
||||
<div className="w-full flex flex-row gap-2 items-center justify-between">
|
||||
<p>Nombre de rétrécissements</p>
|
||||
<NumberInput id="reduction-number" value={localZoneSettings.reductionCount ?? ""} onChange={updateReductionCount} />
|
||||
</div>
|
||||
<div className="w-full flex flex-row gap-2 items-center justify-between">
|
||||
<p>Durée d'une zone</p>
|
||||
<NumberInput id="duration" value={localZoneSettings.duration ?? ""} onChange={updateDuration} />
|
||||
</div>
|
||||
<div className="w-full flex flex-row gap-2 items-center justify-between">
|
||||
<p>Temps permis hors zone</p>
|
||||
<NumberInput id="timeout-circle-selector" value={localOutOfZoneDelay ?? ""} onChange={setLocalOutOfZoneDelay} />
|
||||
</div>
|
||||
<button className="w-full h-16 text-lg text-white rounded bg-green-600 hover:bg-green-500" onClick={handleSubmit}>Appliquer</button>
|
||||
</div>
|
||||
</>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { Section } from "@/components/section";
|
||||
import useAdmin from "@/hook/useAdmin";
|
||||
import useLocalVariable from "@/hook/useLocalVariable";
|
||||
|
||||
function MessageInput({title, ...props}) {
|
||||
return (
|
||||
<div className="w-full flex flex-row gap-3 items-center">
|
||||
<p>{title}</p>
|
||||
<input className="w-full p-1 rounded ring-1 ring-inset ring-gray-400 placeholder:text-gray-600" {...props} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Messages() {
|
||||
const {messages, updateSettings} = useAdmin();
|
||||
const [localGameSettings, setLocalGameSettings, applyLocalGameSettings] = useLocalVariable(messages, (e) => updateSettings({messages: e}));
|
||||
|
||||
function modifyLocalZoneSettings(key, value) {
|
||||
setLocalGameSettings(prev => ({...prev, [key]: value}));
|
||||
};
|
||||
|
||||
return (
|
||||
<Section title="Messages" 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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { List } from "@/components/list";
|
||||
import { CustomMapContainer, MapEventListener } from "@/components/map";
|
||||
import useAdmin from '@/hook/useAdmin';
|
||||
import useMultipleCircleDraw from "@/hook/useMultipleCircleDraw";
|
||||
import { CircleZone, Tag } from "@/components/layer";
|
||||
|
||||
function Drawings({ placementZones, addZone, removeZone, handleRightClick }) {
|
||||
const { handleLeftClick, handleRightClick: handleRightClickDrawing } = useMultipleCircleDraw(placementZones, addZone, removeZone, 30);
|
||||
|
||||
function modifiedHandleRightClick(e) {
|
||||
handleRightClickDrawing(e);
|
||||
handleRightClick();
|
||||
}
|
||||
|
||||
return (<>
|
||||
<MapEventListener onLeftClick={handleLeftClick} onRightClick={modifiedHandleRightClick} />
|
||||
{ placementZones.map(placementZone =>
|
||||
<CircleZone key={placementZone.id} circle={placementZone} color="blue">
|
||||
<Tag text={placementZone.name} />
|
||||
</CircleZone>
|
||||
)}
|
||||
</>);
|
||||
}
|
||||
|
||||
export default function PlacementZoneSelector({ display }) {
|
||||
const { teams, getTeam, placementTeam } = useAdmin();
|
||||
const [selectedTeamId, setSelectedTeamId] = useState(null);
|
||||
const [placementZones, setPlacementZones] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
setPlacementZones(teams.filter(team => team.startingArea).map(team => ({id: team.id, name: team.name, center: team.startingArea.center, radius: team.startingArea.radius})));
|
||||
}, [teams]);
|
||||
|
||||
function addPlacementZone(center, radius) {
|
||||
if (!selectedTeamId) return;
|
||||
const placementZonesFiltered = placementZones.filter(placementZone => placementZone.id !== selectedTeamId);
|
||||
const newZone = {id: selectedTeamId, name: getTeam(selectedTeamId).name, center: center, radius: radius};
|
||||
placementTeam(selectedTeamId, newZone);
|
||||
setPlacementZones([...placementZonesFiltered, newZone]);
|
||||
}
|
||||
|
||||
function removePlacementZone(id) {
|
||||
placementTeam(id, null);
|
||||
setPlacementZones(placementZones.filter((placementZone) => placementZone.id !== id));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={display ? 'w-full h-full gap-3 flex flex-row' : "hidden"}>
|
||||
<div className="h-full flex-1">
|
||||
<CustomMapContainer>
|
||||
<Drawings placementZones={placementZones} addZone={addPlacementZone} removeZone={removePlacementZone} handleRightClick={() => setSelectedTeamId(null)} />
|
||||
</CustomMapContainer>
|
||||
</div>
|
||||
<div className="h-full w-1/6 flex flex-col gap-3">
|
||||
<div className="w-full text-center">
|
||||
<h2 className="text-xl">Équipes</h2>
|
||||
</div>
|
||||
<List array={teams} selectedId={selectedTeamId} onSelected={(id) => setSelectedTeamId(selectedTeamId != id ? id : null)}>
|
||||
{ (team) =>
|
||||
<div key={team.id} className="w-full flex flex-row items-center justify-between gap-2 p-2 bg-white">
|
||||
<p className='text-xl font-bold'>{team.name}</p>
|
||||
</div>
|
||||
}
|
||||
</List>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import dynamic from "next/dynamic";
|
||||
import { ZoneTypes } from "@/util/types";
|
||||
import useLocalVariable from "@/hook/useLocalVariable";
|
||||
import useAdmin from "@/hook/useAdmin";
|
||||
|
||||
// Imported at runtime and not at compile time
|
||||
const CircleZoneSelector = dynamic(() => import('./circleZoneSelector'), { ssr: false });
|
||||
const PolygonZoneSelector = dynamic(() => import('./polygonZoneSelector'), { ssr: false });
|
||||
|
||||
function ZoneTypeButton({title, onClick, isSelected}) {
|
||||
const grayStyle = "bg-gray-300 hover:bg-gray-400";
|
||||
const blueStyle = "bg-custom-light-blue";
|
||||
|
||||
return (
|
||||
<div className={`flex justify-center items-center rounded-md cursor-pointer ${isSelected ? blueStyle : grayStyle}`} onClick={onClick}>
|
||||
<p className="text-l font-bold p-2">{title}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function PlayingZoneSelector({ display }) {
|
||||
const { zoneType } = useAdmin();
|
||||
const [localZoneType, setLocalZoneType] = useLocalVariable(zoneType, () => {});
|
||||
|
||||
return (
|
||||
<div className={display ? 'w-full h-full gap-3 flex flex-col' : "hidden"}>
|
||||
<div className="w-full flex flex-row gap-3 items-center">
|
||||
<p className="text-l">Type de zone :</p>
|
||||
<ZoneTypeButton title="Cercles" onClick={() => setLocalZoneType(ZoneTypes.CIRCLE)} isSelected={localZoneType == ZoneTypes.CIRCLE} />
|
||||
<ZoneTypeButton title="Polygones" onClick={() => setLocalZoneType(ZoneTypes.POLYGON)} isSelected={localZoneType == ZoneTypes.POLYGON} />
|
||||
</div>
|
||||
<div className="w-full flex-1">
|
||||
<CircleZoneSelector display={localZoneType == ZoneTypes.CIRCLE} />
|
||||
<PolygonZoneSelector display={localZoneType == ZoneTypes.POLYGON} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Polyline } from "react-leaflet";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import { ReorderList } from "@/components/list";
|
||||
import { CustomMapContainer, MapEventListener } from "@/components/map";
|
||||
import { NumberInput } from "@/components/input";
|
||||
import { Node, PolygonZone, Label } from "@/components/layer";
|
||||
import useAdmin from "@/hook/useAdmin";
|
||||
import useMapPolygonDraw from "@/hook/usePolygonDraw";
|
||||
import useLocalVariable from "@/hook/useLocalVariable";
|
||||
import { defaultZoneSettings } from "@/util/configurations";
|
||||
import { ZoneTypes } from "@/util/types";
|
||||
|
||||
function Drawings({ localZoneSettings, addZone, removeZone }) {
|
||||
const [polygons, setPolygons] = useState([]);
|
||||
const { currentPolygon, highlightNodes, handleLeftClick, handleRightClick, handleMouseMove } = useMapPolygonDraw(polygons, addZone, removeZone);
|
||||
|
||||
useEffect(() => {
|
||||
if (localZoneSettings.type == ZoneTypes.POLYGON) {
|
||||
setPolygons(localZoneSettings.polygons.map(zone => zone.polygon));
|
||||
}
|
||||
}, [localZoneSettings]);
|
||||
|
||||
function getLabelPosition(polygon) {
|
||||
const sum = polygon.reduce(
|
||||
(acc, coord) => ({
|
||||
lat: acc.lat + coord.lat,
|
||||
lng: acc.lng + coord.lng
|
||||
}),
|
||||
{ lat: 0, lng: 0 }
|
||||
);
|
||||
|
||||
// The calculated mean point can be out of the polygon
|
||||
// Idea : take the mean point of the largest convex subpolygon
|
||||
return {lat: sum.lat / polygon.length, lng: sum.lng / polygon.length};
|
||||
}
|
||||
|
||||
return (<>
|
||||
<MapEventListener onLeftClick={handleLeftClick} onRightClick={handleRightClick} onMouseMove={handleMouseMove} />
|
||||
{localZoneSettings.polygons.map(zone =>
|
||||
<PolygonZone key={zone.id} polygon={zone.polygon} color="black" opacity='0.5' >
|
||||
<Label position={getLabelPosition(zone.polygon)} label={zone.id} color="white" />
|
||||
</PolygonZone>
|
||||
)}
|
||||
{ currentPolygon.length > 0 && <>
|
||||
<Polyline positions={currentPolygon} pathOptions={{ color: "red", weight: 3 }} />
|
||||
<Node position={currentPolygon[0]} color="red" />
|
||||
</>}
|
||||
{highlightNodes.map((node, i) =>
|
||||
<Node key={i} position={node} color="black" />
|
||||
)}
|
||||
</>);
|
||||
}
|
||||
|
||||
export default function PolygonZoneSelector({ display }) {
|
||||
const defaultDuration = 10;
|
||||
const {zoneSettings, outOfZoneDelay, updateSettings} = useAdmin();
|
||||
const [localZoneSettings, setLocalZoneSettings, applyLocalZoneSettings] = useLocalVariable(zoneSettings, (e) => updateSettings({zone: e}));
|
||||
const [localOutOfZoneDelay, setLocalOutOfZoneDelay, applyLocalOutOfZoneDelay] = useLocalVariable(outOfZoneDelay, (e) => updateSettings({outOfZoneDelay: e}));
|
||||
|
||||
useEffect(() => {
|
||||
if (!localZoneSettings || localZoneSettings.type != ZoneTypes.POLYGON) {
|
||||
setLocalZoneSettings(defaultZoneSettings.polygon);
|
||||
}
|
||||
}, [localZoneSettings]);
|
||||
|
||||
function getNewPolygonName() {
|
||||
const existingIds = new Set(localZoneSettings.polygons.map(zone => zone.id));
|
||||
for (let i = 0; i < 26; i++) {
|
||||
const letter = String.fromCharCode(65 + i);
|
||||
if (!existingIds.has(letter)) {
|
||||
return letter;
|
||||
}
|
||||
}
|
||||
return "XXX";
|
||||
}
|
||||
|
||||
function setLocalZoneSettingsPolygons(polygons) {
|
||||
setLocalZoneSettings({type: localZoneSettings.type, polygons: polygons});
|
||||
}
|
||||
|
||||
function addZone(polygon) {
|
||||
setLocalZoneSettingsPolygons([...localZoneSettings.polygons, {id: getNewPolygonName(), polygon: polygon, duration: defaultDuration}]);
|
||||
}
|
||||
|
||||
function removeZone(i) {
|
||||
setLocalZoneSettingsPolygons(localZoneSettings.polygons.filter((_, index) => index !== i));
|
||||
}
|
||||
|
||||
function updateDuration(id, duration) {
|
||||
setLocalZoneSettingsPolygons(localZoneSettings.polygons.map(zone => zone.id === id ? {...zone, duration: duration} : zone));
|
||||
}
|
||||
|
||||
function handleSubmit() {
|
||||
applyLocalZoneSettings();
|
||||
applyLocalOutOfZoneDelay();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={display ? 'w-full h-full gap-3 flex flex-row' : "hidden"}>
|
||||
{localZoneSettings && localZoneSettings.type == ZoneTypes.POLYGON && <>
|
||||
<div className="h-full flex-1">
|
||||
<CustomMapContainer>
|
||||
<Drawings localZoneSettings={localZoneSettings} addZone={addZone} removeZone={removeZone} />
|
||||
</CustomMapContainer>
|
||||
</div>
|
||||
<div className="h-full w-1/6 flex flex-col gap-3">
|
||||
<div className="w-full text-center">
|
||||
<h2 className="text-xl">Ordre de réduction</h2>
|
||||
</div>
|
||||
<ReorderList droppableId="zones-order" array={localZoneSettings.polygons} setArray={setLocalZoneSettingsPolygons}>
|
||||
{ (zone) =>
|
||||
<div key={zone.id} className="w-full p-2 bg-white flex flex-row gap-2 items-center justify-between">
|
||||
<p>Zone {zone.id}</p>
|
||||
<NumberInput id={zone.id} value={zone.duration || ""} onChange={value => updateDuration(zone.id, value)}/>
|
||||
</div>
|
||||
}
|
||||
</ReorderList>
|
||||
<div className="w-full flex flex-row gap-2 items-center justify-between">
|
||||
<p>Temps permis hors zone</p>
|
||||
<NumberInput id="timeout-polygon-selector" value={localOutOfZoneDelay ?? ""} onChange={setLocalOutOfZoneDelay}/>
|
||||
</div>
|
||||
<button className="w-full h-16 text-lg text-white rounded bg-green-600 hover:bg-green-500" onClick={handleSubmit}>Appliquer</button>
|
||||
</div>
|
||||
</>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import { useState } from "react";
|
||||
import { ReorderList } from '@/components/list';
|
||||
import useAdmin from '@/hook/useAdmin';
|
||||
import useLocalVariable from "@/hook/useLocalVariable";
|
||||
import { NumberInput } from "@/components/input";
|
||||
import { Section } from "@/components/section";
|
||||
|
||||
function TeamManagerItem({ team }) {
|
||||
const { captureTeam, removeTeam } = useAdmin();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row items-center justify-between p-2 gap-3 bg-white'>
|
||||
<p className='text-xl font-bold'>{team.name}</p>
|
||||
<div className='flex flex-row items-center justify-between gap-3'>
|
||||
<p className='text-xl font-bold'>{String(team.id).padStart(6, '0').replace(/(\d{3})(\d{3})/, "$1 $2")}</p>
|
||||
<img src={`/icons/heart/${team.captured ? "grey" : "pink"}.png`} className="w-8 h-8 cursor-pointer" onClick={() => captureTeam(team.id)} />
|
||||
<img src="/icons/trash.png" className="w-8 h-8 cursor-pointer" onClick={() => removeTeam(team.id)} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TeamManager() {
|
||||
const { teams, addTeam, reorderTeams, sendPositionDelay, updateSettings } = useAdmin();
|
||||
const [teamName, setTeamName] = useState('');
|
||||
const [localSendPositionDelay, setLocalSendPositionDelay, applyLocalSendPositionDelay] = useLocalVariable(sendPositionDelay, (e) => updateSettings({sendPositionDelay: e}));
|
||||
|
||||
function handleTeamSubmit(e) {
|
||||
e.preventDefault();
|
||||
if (teamName !== "") {
|
||||
addTeam(teamName);
|
||||
setTeamName("")
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Section title="Équipes" outerClassName="flex-1 min-h-0" innerClassName="flex flex-col items-center gap-3">
|
||||
<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>
|
||||
<div className='w-1/5'>
|
||||
<button type="submit" className="w-full h-full bg-custom-light-blue hover:bg-blue-500 transition text-3xl font-bold">+</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className="w-full flex-1 min-h-0 ">
|
||||
<ReorderList droppableId="team-manager" array={teams} setArray={(teams) => reorderTeams(teams.map(team => team.id))}>
|
||||
{(team) => (
|
||||
<TeamManagerItem team={team}/>
|
||||
)}
|
||||
</ReorderList>
|
||||
</div>
|
||||
<div className="w-full flex flex-row gap-2 items-center justify-between">
|
||||
<p>Intervalle entre les envois de position</p>
|
||||
<NumberInput id="position-update" value={localSendPositionDelay ?? ""} onChange={setLocalSendPositionDelay} onBlur={applyLocalSendPositionDelay} />
|
||||
</div>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user