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

Cleaning

Browse Source
This commit is contained in:
Sebastien Riviere
2025-09-08 15:08:44 +02:00
parent 75f8b10ecd
commit 7e4d9f910a
37 changed files with 403 additions and 435 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
traque-front/app/admin/components/buttons.jsx
View File

@@ -1,15 +0,0 @@
export function MapButton({ icon, ...props }) {
return (
<button className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center" {...props}>
<img src={`/icons/${icon}.png`} className="w-10 h-10" />
</button>
);
}
export function ControlButton({ icon, ...props }) {
return (
<button className="w-[4.5rem] h-[4.5rem] bg-custom-light-blue rounded-lg hover:bg-blue-500 transition flex items-center justify-center" {...props}>
<img src={`/icons/${icon}.png`} className="w-10 h-10" />
</button>
);
}

50
traque-front/app/admin/components/liveMap.jsx
View File

@@ -1,26 +1,14 @@
import { useEffect, useState } from "react";
import { Marker, Tooltip, Polygon, Circle } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import 'leaflet-polylinedecorator';
import { Arrow } from "@/components/layer";
import { Fragment, useEffect, useState } from "react";
import { Arrow, CircleZone, PolygonZone, Position, Tag } from "@/components/layer";
import { CustomMapContainer, MapEventListener, MapPan } from "@/components/map";
import useAdmin from "@/hook/useAdmin";
import { GameState, ZoneTypes } from "@/util/types";
import { mapZooms } from "@/util/configurations";
const positionIcon = new L.Icon({
iconUrl: '/icons/marker/blue.png',
iconSize: [30, 30],
iconAnchor: [15, 15],
popupAnchor: [0, -15],
shadowSize: [30, 30],
});
export default function LiveMap({ selectedTeamId, onSelected, isFocusing, setIsFocusing, mapStyle, showZones, showNames, showArrows}) {
export default function LiveMap({ selectedTeamId, onSelected, isFocusing, setIsFocusing, mapStyle, showZones, showNames, showArrows }) {
const { zoneType, zoneExtremities, teams, nextZoneDate, getTeam, gameState } = useAdmin();
const [timeLeftNextZone, setTimeLeftNextZone] = useState(null);
// Remaining time before sending position
useEffect(() => {
if (nextZoneDate) {
const updateTime = () => {
@@ -36,25 +24,25 @@ export default function LiveMap({ selectedTeamId, onSelected, isFocusing, setIsF
function formatTime(time) {
// time is in seconds
if (time < 0) return "00:00";
if (!time || time < 0) return "00:00";
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
return String(minutes).padStart(2,"0") + ":" + String(seconds).padStart(2,"0");
}
function Zones() {
if (!(showZones && gameState == GameState.PLAYING && zoneType)) return null;
if (!(showZones && gameState == GameState.PLAYING)) return null;
switch (zoneType) {
case ZoneTypes.CIRCLE:
return (<>
{ zoneExtremities.begin && <Circle center={zoneExtremities.begin.center} radius={zoneExtremities.begin.radius} color="red" fillColor="red" />}
{ zoneExtremities.end && <Circle center={zoneExtremities.end.center} radius={zoneExtremities.end.radius} color="green" fillColor="green" />}
<CircleZone circle={zoneExtremities.begin} color="red" />
<CircleZone circle={zoneExtremities.end} color="green" />
</>);
case ZoneTypes.POLYGON:
return (<>
{ zoneExtremities.begin && <Polygon positions={zoneExtremities.begin.points} pathOptions={{ color: 'red', fillColor: 'red', fillOpacity: '0.1', weight: 3 }} />}
{ zoneExtremities.end && <Polygon positions={zoneExtremities.end.points} pathOptions={{ color: 'green', fillColor: 'green', fillOpacity: '0.1', weight: 3 }} />}
<PolygonZone polygon={zoneExtremities.begin?.polygon} color="red" />
<PolygonZone polygon={zoneExtremities.end?.polygon} color="green" />
</>);
default:
return null;
@@ -68,17 +56,15 @@ export default function LiveMap({ selectedTeamId, onSelected, isFocusing, setIsF
{isFocusing && <MapPan center={getTeam(selectedTeamId)?.currentLocation} zoom={mapZooms.high} animate />}
<MapEventListener onDragStart={() => setIsFocusing(false)}/>
<Zones/>
{teams.map((team) => gameState == GameState.PLACEMENT && team.startingArea &&
<Circle key={team.id} center={team.startingArea.center} radius={team.startingArea.radius} color="blue" fillColor="blue">
<Tooltip permanent direction="top" offset={[0.5, -15]} className="custom-tooltip">{team.name}</Tooltip>
</Circle>
)}
{teams.map((team) => team.currentLocation && !team.captured && <>
<Marker key={team.id} position={team.currentLocation} icon={positionIcon} eventHandlers={{click: () => onSelected(team.id)}}>
{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}/>}
</>)}
{teams.map((team) => team && <Fragment key={team.id}>
<CircleZone circle={team.startingArea} color="blue" display={gameState == GameState.PLACEMENT && showZones}>
<Tag text={team.name} display={showNames} />
</CircleZone>
<Arrow pos1={team.currentLocation} pos2={getTeam(team.chased)?.currentLocation} display={showArrows}/>
<Position position={team.currentLocation} color={"blue"} onClick={() => onSelected(team.id)} display={!team.captured}>
<Tag text={team.name} display={showNames} />
</Position>
</Fragment>)}
</CustomMapContainer>
</div>
)

34
traque-front/app/admin/components/teamSidePanel.jsx
View File

@@ -2,6 +2,8 @@ import { env } from 'next-runtime-env';
import { useEffect, useState } from "react";
import useAdmin from "@/hook/useAdmin";
import { getStatus } from '@/util/functions';
import { Colors } from '@/util/types';
import { teamStatus } from '@/util/configurations';
function DotLine({ label, value }) {
return (
@@ -22,7 +24,7 @@ function IconValue({ color, icon, value }) {
return (
<div className="flex flex-row gap-2">
<img src={`/icons/${icon}/${color}.png`} className="w-6 h-6" />
<p className={`text-custom-${color}`}>{value}</p>
<p style={{color: Colors[color]}}>{value}</p>
</div>
);
}
@@ -41,11 +43,10 @@ export default function TeamSidePanel({ selectedTeamId, onClose }) {
if (!team) return null;
function formatTime(startDate) {
function formatTime(startDate, endDate) {
// startDate in milliseconds
const date = team.captured ? team.finishDate : Date.now();
if (date == null || startDate == null || startDate < 0) return NO_VALUE + ":" + NO_VALUE;
const seconds = Math.floor((date - startDate) / 1000);
if (endDate == null || startDate == null || startDate < 0) return NO_VALUE + ":" + NO_VALUE;
const seconds = Math.floor((endDate - startDate) / 1000);
const m = Math.floor(seconds / 60);
const s = Math.floor(seconds % 60);
return `${m}:${s.toString().padStart(2, "0")}`;
@@ -57,11 +58,10 @@ export default function TeamSidePanel({ selectedTeamId, onClose }) {
return `${Math.floor(distance / 100) / 10}km`;
}
function formatSpeed(distance, startDate) {
function formatSpeed(distance, startDate, endDate) {
// distance in meters | startDate in milliseconds
const date = team.captured ? team.finishDate : Date.now();
if (distance == null || distance < 0 || date == null || startDate == null || date <= startDate) return NO_VALUE + "km/h";
const speed = distance / (date - startDate);
if (distance == null || distance < 0 || endDate == null || startDate == null || endDate <= startDate) return NO_VALUE + "km/h";
const speed = distance / (endDate - startDate);
return `${Math.floor(speed * 36000) / 10}km/h`;
}
@@ -75,31 +75,31 @@ export default function TeamSidePanel({ selectedTeamId, onClose }) {
return (
<div className="w-full h-full relative flex flex-col p-3 gap-3">
<button className="absolute left-2 -top-1 text-black text-5xl" onClick={onClose} title="Fermer">x</button>
<p className={`text-2xl font-bold text-center ${getStatus(team, gameState).color} font-bold`}>{getStatus(team, gameState).label}</p>
<p className="text-2xl font-bold text-center" style={{color: getStatus(team, gameState).color}}>{getStatus(team, gameState).label}</p>
<p className="text-4xl font-bold text-center">{team.name ?? NO_VALUE}</p>
<div className="flex justify-center">
<img src={imgSrc ? imgSrc : "/images/missing_image.jpg"} alt="Photo de l'équipe"/>
</div>
<div className="flex flex-row justify-between items-center">
<IconValue color={team.sockets.length > 0 ? "green" : "red"} icon="user" value={team.sockets.length ?? NO_VALUE} />
<IconValue color={team.sockets.length > 0 ? "green" : "red"} icon="user" value={team.sockets?.length ?? NO_VALUE} />
<IconValue color={team.battery >= 20 ? "green" : "red"} icon="battery" value={(team.battery ?? NO_VALUE) + "%"} />
<IconValue
color={team.lastCurrentLocationDate != null && (Date.now() - team.lastCurrentLocationDate <= 30000) ? "green" : "red"}
color={team.lastCurrentLocationDate && (Date.now() - team.lastCurrentLocationDate <= 30000) ? "green" : "red"}
icon="location" value={formatDate(team.lastCurrentLocationDate)}
/>
</div>
<div>
<DotLine label="ID d'équipe" value={String(selectedTeamId).padStart(6, '0').replace(/(\d{3})(\d{3})/, "$1 $2")} />
<DotLine label="ID de capture" value={String(team.captureCode).padStart(4, '0')} />
<DotLine label="ID de capture" value={team.captureCode ? String(team.captureCode).padStart(4, '0') : NO_VALUE} />
</div>
<div>
<DotLine label="Chasse" value={getTeam(team.chasing).name ?? NO_VALUE} />
<DotLine label="Chassé par" value={getTeam(team.chased).name ?? 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)} />
<DotLine label="Temps de survie" value={formatTime(startDate)} />
<DotLine label="Vitesse moyenne" value={formatSpeed(team.distance, startDate)} />
<DotLine label="Temps de survie" value={formatTime(startDate, team.captured ? team.finishDate : Date.now())} />
<DotLine label="Vitesse moyenne" value={formatSpeed(team.distance, startDate, team.captured ? team.finishDate : Date.now())} />
<DotLine label="Captures" value={team.nCaptures ?? NO_VALUE} />
<DotLine label="Observations" value={team.nSentLocation ?? NO_VALUE} />
<DotLine label="Observé" value={team.nObserved ?? NO_VALUE} />

7
traque-front/app/admin/components/teamViewer.jsx
View File

@@ -5,6 +5,7 @@ import { getStatus } from '@/util/functions';
function TeamViewerItem({ team }) {
const { gameState } = useAdmin();
const status = getStatus(team, gameState);
const NO_VALUE = "XX";
return (
<div className={'w-full flex flex-row gap-3 p-2 bg-white justify-between'}>
@@ -12,11 +13,11 @@ function TeamViewerItem({ team }) {
<div className='flex flex-row gap-1'>
<img src={`/icons/user/${team.sockets.length > 0 ? "green" : "red"}.png`} className="w-4 h-4" />
<img src={`/icons/battery/${team.battery >= 20 ? "green" : "red"}.png`} className="w-4 h-4" />
<img src={`/icons/location/${team.lastCurrentLocationDate != null && (Date.now() - team.lastCurrentLocationDate <= 30000) ? "green" : "red"}.png`} className="w-4 h-4" />
<img src={`/icons/location/${team.lastCurrentLocationDate && (Date.now() - team.lastCurrentLocationDate <= 30000) ? "green" : "red"}.png`} className="w-4 h-4" />
</div>
<p className={`text-xl font-bold`}>{team.name}</p>
<p className="text-xl font-bold">{team.name ?? NO_VALUE}</p>
</div>
<p className={`text-xl font-bold ${status.color}`}>
<p className="text-xl font-bold" style={{color: status.color}}>
{status.label}
</p>
</div>