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

Corrections

Browse Source
This commit is contained in:
Sébastien Rivière
2025-06-25 17:43:08 +02:00
parent 1bcc05d1c6
commit d25dcfcbc1
19 changed files with 79 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
traque-front/app/admin/layout.js
View File

@@ -20,5 +20,5 @@ export default function AdminLayout({ children }) {
</div>
</AdminProvider>
</AdminConnexionProvider>
)
}
);
}

4
traque-front/app/admin/login/page.js
View File

@@ -5,8 +5,10 @@ import React from 'react'
export default function AdminLoginPage() {
const {login, useProtect} = useAdminConnexion();
useProtect();
return (
<LoginForm title="Admin login" placeholder="Admin password" buttonText={"Login"} onSubmit={login} />
)
);
}

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

@@ -12,7 +12,9 @@ const LiveMap = dynamic(() => import('@/components/admin/liveMap'), { ssr: false
export default function AdminPage() {
const { useProtect } = useAdminConnexion();
const { gameState, changeState } = useAdmin();
useProtect();
return (
<div className='min-h-full bg-gray-200 p-10 flex flex-row content-start gap-5'>
<div className="h-full w-2/6">

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

@@ -9,7 +9,9 @@ const ZoneSelector = dynamic(() => import('@/components/admin/polygonZoneMap'),
export default function AdminPage() {
const { useProtect } = useAdminConnexion();
useProtect();
return (
<div className='min-h-full bg-gray-200 p-10 flex flex-row content-start gap-5'>
<div className="h-full w-2/6">
@@ -18,5 +20,5 @@ export default function AdminPage() {
<ZoneSelector />
<PenaltySettings />
</div>
)
);
}

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

@@ -7,11 +7,11 @@ import useAdmin from '@/hook/useAdmin';
import React, { useState } from 'react'
export default function TeamAdminPage() {
const [selectedTeamId, setSelectedTeamId] = useState(null);
const { addTeam } = useAdmin();
const { useProtect } = useAdminConnexion();
useProtect();
const [selectedTeamId, setSelectedTeamId] = useState(null);
const { addTeam } = useAdmin();
const { useProtect } = useAdminConnexion();
useProtect();
return (
<div className='h-full bg-gray-200 p-10 flex flex-row justify-between'>

18
traque-front/components/admin/circleZoneMap.jsx
View File

@@ -15,14 +15,22 @@ const EditMode = {
}
function CircleDrawings({ minZone, setMinZone, maxZone, setMaxZone, editMode }) {
const { handleClick: maxClick, handleMouseMove: maxHover, center: maxCenter, radius: maxRadius } = useMapCircleDraw(minZone, setMinZone);
const { handleClick: minClick, handleMouseMove: minHover, center: minCenter, radius: minRadius } = useMapCircleDraw(maxZone, setMaxZone);
const { center: maxCenter, radius: maxRadius, handleLeftClick: maxLeftClick, handleRightClick: maxRightClick, handleMouseMove: maxHover } = useMapCircleDraw(maxZone, setMaxZone);
const { center: minCenter, radius: minRadius, handleLeftClick: minLeftClick, handleRightClick: minRightClick, handleMouseMove: minHover } = useMapCircleDraw(minZone, setMinZone);
function handleLeftClick(e) {
if (editMode == EditMode.MAX) {
maxClick(e);
maxLeftClick(e);
} else {
minClick(e);
minLeftClick(e);
}
}
function handleRightClick(e) {
if (editMode == EditMode.MAX) {
maxRightClick(e);
} else {
minRightClick(e);
}
}
@@ -38,7 +46,7 @@ function CircleDrawings({ minZone, setMinZone, maxZone, setMaxZone, editMode })
<div>
{minCenter && minRadius && <Circle center={minCenter} radius={minRadius} color="blue" fillColor="blue" />}
{maxCenter && maxRadius && <Circle center={maxCenter} radius={maxRadius} color="red" fillColor="red" />}
<MapEventListener onLeftClick={handleLeftClick} onRightClick={() => {}} onMouseMove={handleMouseMove} />
<MapEventListener onLeftClick={handleLeftClick} onRightClick={handleRightClick} onMouseMove={handleMouseMove} />
</div>
);
}

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

@@ -33,17 +33,17 @@ export default function PenaltySettings() {
<h2 className="text-2xl">Penalties</h2>
<div>
<p>Maximum Penalties</p>
<TextInput value={maxPenalties} onChange={(e) => setMaxPenalties(e.target.value)}></TextInput>
<TextInput value={maxPenalties} onChange={(e) => setMaxPenalties(e.target.value)} />
</div>
<div>
<p>Time out of the zone before a penalty</p>
<TextInput value={allowedTimeOutOfZone} onChange={(e) => setAllowedTimeOutOfZone(e.target.value)}></TextInput>
<TextInput value={allowedTimeOutOfZone} onChange={(e) => setAllowedTimeOutOfZone(e.target.value)} />
</div>
<div>
<p>Allowed time between position updates</p>
<TextInput value={allowedTimeBetweenUpdates} onChange={(e) => setAllowedTimeBetweenUpdates(e.target.value)}></TextInput>
<TextInput value={allowedTimeBetweenUpdates} onChange={(e) => setAllowedTimeBetweenUpdates(e.target.value)} />
</div>
<GreenButton onClick={applySettings}>Apply</GreenButton>
</div>
)
);
}

7
traque-front/components/admin/placementMap.jsx
View File

@@ -15,7 +15,7 @@ const positionIcon = new L.Icon({
export default function CircularAreaPicker({ area, setArea, markerPosition, ...props }) {
const location = useLocation(Infinity);
const { handleClick, handleMouseMove, center, radius } = useMapCircleDraw(area, setArea);
const { center, radius, handleLeftClick, handleRightClick, handleMouseMove } = useMapCircleDraw(area, setArea);
return (
<MapContainer {...props} className='min-h-full w-full ' center={location} zoom={DEFAULT_ZOOM} scrollWheelZoom={true}>
@@ -24,10 +24,9 @@ export default function CircularAreaPicker({ area, setArea, markerPosition, ...p
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{center && radius && <Circle center={center} radius={radius} fillColor="blue" />}
{markerPosition && <Marker position={markerPosition} icon={positionIcon}>
</Marker>}
{markerPosition && <Marker position={markerPosition} icon={positionIcon} />}
<MapPan center={location} zoom={DEFAULT_ZOOM} />
<MapEventListener onLeftClick={handleClick} onRightClick={() => {}} onMouseMove={handleMouseMove} />
<MapEventListener onLeftClick={handleLeftClick} onRightClick={handleRightClick} onMouseMove={handleMouseMove} />
</MapContainer>
);
}

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

@@ -1,9 +1,9 @@
import React from 'react'
import { useState } from 'react'
import { TextInput } from '../util/textInput'
import { BlueButton } from '../util/button'
export default function TeamAddForm({onAddTeam}) {
const [teamName, setTeamName] = React.useState('');
const [teamName, setTeamName] = useState('');
function handleSubmit(e) {
e.preventDefault();
@@ -22,5 +22,5 @@ export default function TeamAddForm({onAddTeam}) {
<BlueButton type="submit" className="w-5">+</BlueButton>
</div>
</form>
)
);
}

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

@@ -15,13 +15,9 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
const [newTeamName, setNewTeamName] = React.useState('');
const { updateTeam, getTeamName, removeTeam, getTeam, teams, gameState, startDate } = useAdmin();
const [team, setTeam] = useState({});
const NEXT_PUBLIC_SOCKET_HOST = env("NEXT_PUBLIC_SOCKET_HOST");
var protocol = "https://";
if (NEXT_PUBLIC_SOCKET_HOST == "localhost") {
protocol = "http://";
}
const SERVER_URL = protocol + NEXT_PUBLIC_SOCKET_HOST + "/back";
console.log(SERVER_URL);
const SERVER_URL = (NEXT_PUBLIC_SOCKET_HOST == "localhost" ? "http://" : "https://") + NEXT_PUBLIC_SOCKET_HOST + "/back";
useEffect(() => {
let team = getTeam(selectedTeamId);
@@ -122,5 +118,5 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
</div>
</div>
</div>
)
);
}

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

@@ -29,20 +29,9 @@ export default function TeamList({selectedTeamId, onSelected}) {
const {teams, reorderTeams} = useAdmin();
function onDragEnd(result) {
if (!result.destination) {
return;
}
if (result.destination.index === result.source.index) {
return;
}
const newTeams = reorder(
teams,
result.source.index,
result.destination.index
);
if (!result.destination) return;
if (result.destination.index === result.source.index) return;
const newTeams = reorder(teams, result.source.index, result.destination.index);
reorderTeams(newTeams);
}
@@ -50,7 +39,7 @@ export default function TeamList({selectedTeamId, onSelected}) {
<DragDropContext onDragEnd={onDragEnd} >
<Droppable droppableId='team-list'>
{provided => (
<ul ref={provided.innerRef} {...provided.droppableProps}>
<ul ref={provided.innerRef} {...provided.droppableProps}>
{teams.map((team, i) => (
<li key={team.id} onClick={() => onSelected(team.id)}>
<TeamListItem onSelected={onSelected} index={i} itemSelected={selectedTeamId === team.id} team={team} />

17
traque-front/hook/useGame.jsx
View File

@@ -16,20 +16,5 @@ export default function useGame() {
teamSocket.emit("capture", captureCode);
}
return {
sendCurrentPosition,
capture,
enemyPosition: teamInfos?.enemyLocation || null,
enemyName: teamInfos?.enemyName || null,
currentPosition: teamInfos?.currentLocation || null,
startingArea: teamInfos?.startingArea || null,
captureCode: teamInfos?.captureCode || null,
name: teamInfos?.name || null,
ready: teamInfos?.ready || false,
captured: teamInfos?.captured || false,
locationSendDeadline: teamInfos?.locationSendDeadline || null,
penalties: teamInfos?.penalties || 0,
teamId,
gameState,
};
return {...teamInfos, sendCurrentPosition, capture, teamId, gameState};
}

2
traque-front/hook/useLocalStorage.jsx
View File

@@ -26,4 +26,4 @@ export default function useLocalStorage(key, initialValue) {
}
return [storedValue, setValue, loading];
}
}

22
traque-front/hook/useLocation.jsx
View File

@@ -1,21 +1,23 @@
"use client";
import { useEffect, useState } from "react";
/**
* A hook that returns the location of the user and updates it periodically
* @returns {Object} The location of the user
*/
export default function useLocation(interval) {
const [location, setLocation] = useState();
useEffect(() => {
function update() {
navigator.geolocation.getCurrentPosition((position) => {
setLocation([position.coords.latitude, position.coords.longitude]);
if(interval != Infinity) {
setTimeout(update, interval);
}
}, () => { }, { enableHighAccuracy: true, timeout: Infinity, maximumAge: 0 });
navigator.geolocation.getCurrentPosition(
(position) => {
setLocation([position.coords.latitude, position.coords.longitude]);
if(interval != Infinity) {
setTimeout(update, interval);
}
},
() => { },
{ enableHighAccuracy: true, timeout: Infinity, maximumAge: 0 }
);
}
update();
}, []);

14
traque-front/hook/useMapCircleDraw.jsx
View File

@@ -12,7 +12,7 @@ export default function useMapCircleDraw(area, setArea) {
setRadius(area?.radius || null);
}, [area])
function handleClick(e) {
function handleLeftClick(e) {
if (!drawing) {
setCenter(e.latlng);
setRadius(null);
@@ -23,11 +23,21 @@ export default function useMapCircleDraw(area, setArea) {
}
}
function handleRightClick(e) {
if (drawing) {
setDrawing(false);
setCenter(area?.center || null);
setRadius(area?.radius || null);
} else {
setArea(null);
}
}
function handleMouseMove(e) {
if (drawing) {
setRadius(e.latlng.distanceTo(center));
}
}
return { handleClick, handleMouseMove, center, radius };
return { center, radius, handleLeftClick, handleRightClick, handleMouseMove };
}

7
traque-front/hook/useMapPolygonDraw.jsx
View File

@@ -1,5 +1,5 @@
"use client";
import { useState } from "react";
import { useEffect, useState } from "react";
import { useMap } from "react-leaflet";
export default function useMapPolygonDraw(polygons, addPolygon, removePolygon) {
@@ -9,6 +9,11 @@ export default function useMapPolygonDraw(polygons, addPolygon, removePolygon) {
const [currentPolygon, setCurrentPolygon] = useState([]);
const [highlightNodes, setHighlightNodes] = useState([]);
useEffect(() => {
setCurrentPolygon([]);
setHighlightNodes([]);
}, [polygons])
function latlngEqual(latlng1, latlng2, epsilon = 1e-9) {
return Math.abs(latlng1.lat - latlng2.lat) < epsilon && Math.abs(latlng1.lng - latlng2.lng) < epsilon;
}

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

@@ -4,6 +4,7 @@ import { useEffect } from "react";
export default function usePasswordProtect(loginPath, redirectPath, loading, loggedIn) {
const path = usePathname();
useEffect(() => {
if (!loggedIn && !loading && path !== loginPath) {
redirect(loginPath);

2
traque-front/hook/useSocketAuth.jsx
View File

@@ -49,5 +49,5 @@ export default function useSocketAuth(socket, passwordName) {
}, [waitingForResponse, savedPasswordLoading, savedPassword]);
return {login,logout,password: savedPassword, loggedIn, loading};
return {login, logout, password: savedPassword, loggedIn, loading};
}

4
traque-front/hook/useSocketListener.jsx
View File

@@ -4,8 +4,6 @@ import { useEffect } from "react";
export default function useSocketListener(socket, event, callback) {
useEffect(() => {
socket.on(event,callback);
return () => {
socket.off(event, callback);
}
return () => socket.off(event, callback);
}, []);
}