mirror of
https://git.rezel.net/LudoTech/traque.git
synced 2026-02-09 10:20:16 +01:00
Réorganisation des dossiers
This commit is contained in:
Sebastien Riviere
15
traque-front/app/admin/components/buttons.jsx
Normal file
15
traque-front/app/admin/components/buttons.jsx
Normal file
@@ -0,0 +1,15 @@
|
||||
export function MapButton({ icon, title }) {
|
||||
return (
|
||||
<button title={title} className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center">
|
||||
<img src={`/icons/${icon}.png`} className="w-10 h-10" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function ControlButton({ icon, title }) {
|
||||
return (
|
||||
<button title={title} className="w-[4.5rem] h-[4.5rem] bg-custom-light-blue rounded-lg hover:bg-blue-500 transition flex items-center justify-center">
|
||||
<img src={`/icons/${icon}.png`} className="w-10 h-10" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
75
traque-front/app/admin/components/liveMap.jsx
Normal file
75
traque-front/app/admin/components/liveMap.jsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { MapContainer, Marker, TileLayer, Tooltip, Polyline, Polygon } from "react-leaflet";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import { MapPan } from "@/components/mapUtils";
|
||||
import useLocation from "@/hook/useLocation";
|
||||
import useAdmin from "@/hook/useAdmin";
|
||||
import { GameState } from "@/util/gameState";
|
||||
|
||||
const DEFAULT_ZOOM = 14;
|
||||
const positionIcon = new L.Icon({
|
||||
iconUrl: '/icons/location.png',
|
||||
iconSize: [30, 30],
|
||||
iconAnchor: [15, 15],
|
||||
popupAnchor: [0, -15],
|
||||
shadowSize: [30, 30],
|
||||
});
|
||||
|
||||
export default function LiveMap() {
|
||||
const location = useLocation(Infinity);
|
||||
const [timeLeftNextZone, setTimeLeftNextZone] = useState(null);
|
||||
const { zoneExtremities, teams, nextZoneDate, getTeam, gameState } = useAdmin();
|
||||
|
||||
// Remaining time before sending position
|
||||
useEffect(() => {
|
||||
if (nextZoneDate) {
|
||||
const updateTime = () => {
|
||||
setTimeLeftNextZone(Math.max(0, Math.floor((nextZoneDate - Date.now()) / 1000)));
|
||||
};
|
||||
|
||||
updateTime();
|
||||
const interval = setInterval(updateTime, 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}
|
||||
}, [nextZoneDate]);
|
||||
|
||||
function formatTime(time) {
|
||||
// time is in seconds
|
||||
if (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 Arrow({pos1, pos2}) {
|
||||
if (pos1 && pos2) {
|
||||
return (
|
||||
<Polyline positions={[pos1, pos2]} pathOptions={{ color: 'black', weight: 3 }}/>
|
||||
)
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='h-full w-full'>
|
||||
{gameState == GameState.PLAYING && <p>{`Next zone in : ${formatTime(timeLeftNextZone)}`}</p>}
|
||||
<MapContainer className='h-full w-full' center={location} zoom={DEFAULT_ZOOM} scrollWheelZoom={true}>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
<MapPan center={location} zoom={DEFAULT_ZOOM} />
|
||||
{gameState == GameState.PLAYING && zoneExtremities.begin && <Polygon positions={zoneExtremities.begin.points} pathOptions={{ color: 'red', fillColor: 'red', fillOpacity: '0.1', weight: 3 }} />}
|
||||
{gameState == GameState.PLAYING && zoneExtremities.end && <Polygon positions={zoneExtremities.end.points} pathOptions={{ color: 'green', fillColor: 'green', fillOpacity: '0.1', weight: 3 }} />}
|
||||
{teams.map((team) => team.currentLocation && !team.captured &&
|
||||
<Marker key={team.id} position={team.currentLocation} icon={positionIcon}>
|
||||
<Tooltip permanent direction="top" offset={[0, -5]} className="custom-tooltip">{team.name}</Tooltip>
|
||||
<Arrow pos1={team.currentLocation} pos2={getTeam(team.chasing).currentLocation}/>
|
||||
</Marker>
|
||||
)}
|
||||
</MapContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
135
traque-front/app/admin/components/teamSidePanel.jsx
Normal file
135
traque-front/app/admin/components/teamSidePanel.jsx
Normal file
@@ -0,0 +1,135 @@
|
||||
import { env } from 'next-runtime-env';
|
||||
import { useEffect, useState } from "react";
|
||||
import useAdmin from "@/hook/useAdmin";
|
||||
import { GameState } from '@/util/gameState';
|
||||
|
||||
function DotLine({ label, value }) {
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
<span className="whitespace-nowrap text-m">{label}</span>
|
||||
<span
|
||||
className="flex-1 mx-2 overflow-hidden whitespace-nowrap text-black font-bold select-none"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "}
|
||||
</span>
|
||||
<span className="whitespace-nowrap text-m">{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function IconValue({ color, icon, value }) {
|
||||
return (
|
||||
<div className="flex flex-row gap-2">
|
||||
<img src={`/icons/${color}${icon}.png`} className="w-6 h-6" />
|
||||
<p className={`text-custom-${color}`}>{value}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const TEAM_STATUS = {
|
||||
playing: { label: "En jeu", color: "text-custom-green" },
|
||||
captured: { label: "Capturée", color: "text-custom-red" },
|
||||
outofzone: { label: "Hors zone", color: "text-custom-orange" },
|
||||
ready: { label: "Placée", color: "text-custom-green" },
|
||||
notready: { label: "Non placée", color: "text-custom-red" },
|
||||
waiting: { label: "En attente", color: "text-custom-grey" },
|
||||
};
|
||||
|
||||
function getStatus(team, gamestate) {
|
||||
switch (gamestate) {
|
||||
case GameState.SETUP:
|
||||
return TEAM_STATUS.waiting;
|
||||
case GameState.PLACEMENT:
|
||||
return team.ready ? TEAM_STATUS.ready : TEAM_STATUS.notready;
|
||||
case GameState.PLAYING:
|
||||
return team.captured ? TEAM_STATUS.captured : team.outofzone ? TEAM_STATUS.outofzone : TEAM_STATUS.playing;
|
||||
case GameState.FINISHED:
|
||||
return team.captured ? TEAM_STATUS.captured : TEAM_STATUS.playing;
|
||||
}
|
||||
}
|
||||
|
||||
export default function TeamSidePanel({ selectedTeamId, onClose }) {
|
||||
const { getTeam, getTeamName, startDate, gameState } = useAdmin();
|
||||
const [imgSrc, setImgSrc] = useState("");
|
||||
const team = getTeam(selectedTeamId);
|
||||
const NO_VALUE = "XX";
|
||||
const NEXT_PUBLIC_SOCKET_HOST = env("NEXT_PUBLIC_SOCKET_HOST");
|
||||
const SERVER_URL = (NEXT_PUBLIC_SOCKET_HOST == "localhost" ? "http://" : "https://") + NEXT_PUBLIC_SOCKET_HOST + "/back";
|
||||
|
||||
useEffect(() => {
|
||||
setImgSrc(`${SERVER_URL}/photo/my?team=${selectedTeamId}&t=${Date.now()}`);
|
||||
}, [selectedTeamId]);
|
||||
|
||||
if (!team) return null;
|
||||
|
||||
function formatTime(startDate) {
|
||||
// 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);
|
||||
const m = Math.floor(seconds / 60);
|
||||
const s = Math.floor(seconds % 60);
|
||||
return `${m}:${s.toString().padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function formatDistance(distance) {
|
||||
// distance in meters
|
||||
if (distance == null || distance < 0) return NO_VALUE + "km";
|
||||
return `${Math.floor(distance / 100) / 10}km`;
|
||||
}
|
||||
|
||||
function formatSpeed(distance, startDate) {
|
||||
// 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);
|
||||
return `${Math.floor(speed * 36000) / 10}km/h`;
|
||||
}
|
||||
|
||||
function formatDate(date) {
|
||||
// date in milliseconds
|
||||
const dateNow = Date.now();
|
||||
if (date == null || dateNow <= date || dateNow - date >= 1_000_000) return NO_VALUE + "s";
|
||||
return `${Math.floor((dateNow - date) / 1000)}s`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative p-3 w-3/12 h-full flex flex-col 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-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="dude" 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"}
|
||||
icon="location" value={formatDate(team.lastCurrentLocationDate)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<DotLine label="ID d'équipe" value={String(team.id).padStart(6, '0').replace(/(\d{3})(\d{3})/, "$1 $2")} />
|
||||
<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} />
|
||||
</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="Captures" value={team.nCaptures ?? NO_VALUE} />
|
||||
<DotLine label="Observations" value={team.nSentLocation ?? NO_VALUE} />
|
||||
<DotLine label="Observé" value={team.nObserved ?? NO_VALUE} />
|
||||
</div>
|
||||
<div>
|
||||
<DotLine label="Modèle" value={team.phoneModel ?? NO_VALUE} />
|
||||
<DotLine label="Nom" value={team.phoneName ?? NO_VALUE} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
59
traque-front/app/admin/components/teamViewer.jsx
Normal file
59
traque-front/app/admin/components/teamViewer.jsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import useAdmin from '@/hook/useAdmin';
|
||||
import { GameState } from '@/util/gameState';
|
||||
|
||||
const TEAM_STATUS = {
|
||||
playing: { label: "En jeu", color: "text-custom-green" },
|
||||
captured: { label: "Capturée", color: "text-custom-red" },
|
||||
outofzone: { label: "Hors zone", color: "text-custom-orange" },
|
||||
ready: { label: "Placée", color: "text-custom-green" },
|
||||
notready: { label: "Non placée", color: "text-custom-red" },
|
||||
waiting: { label: "En attente", color: "text-custom-grey" },
|
||||
};
|
||||
|
||||
function getStatus(team, gamestate) {
|
||||
switch (gamestate) {
|
||||
case GameState.SETUP:
|
||||
return TEAM_STATUS.waiting;
|
||||
case GameState.PLACEMENT:
|
||||
return team.ready ? TEAM_STATUS.ready : TEAM_STATUS.notready;
|
||||
case GameState.PLAYING:
|
||||
return team.captured ? TEAM_STATUS.captured : team.outofzone ? TEAM_STATUS.outofzone : TEAM_STATUS.playing;
|
||||
case GameState.FINISHED:
|
||||
return team.captured ? TEAM_STATUS.captured : TEAM_STATUS.playing;
|
||||
}
|
||||
}
|
||||
|
||||
function TeamListItem({ itemSelected, team }) {
|
||||
const { gameState } = useAdmin();
|
||||
const status = getStatus(team, gameState);
|
||||
|
||||
return (
|
||||
<div className={'w-full p-2 bg-white flex flex-row gap-3 justify-between cursor-pointer' + (itemSelected ? " outline outline-4 outline-black" : "")}>
|
||||
<div className='flex flex-row items-center gap-3'>
|
||||
<div className='flex flex-row gap-1'>
|
||||
<img src={team.sockets.length > 0 ? "/icons/greendude.png" : "/icons/reddude.png"} className="w-4 h-4" />
|
||||
<img src={team.battery > 20 ? "/icons/greenbattery.png" : "/icons/redbattery.png"} className="w-4 h-4" />
|
||||
<img src={team.lastCurrentLocationDate != null && (Date.now() - team.lastCurrentLocationDate <= 30000) ? "/icons/greenlocation.png" : "/icons/redlocation.png"} className="w-4 h-4" />
|
||||
</div>
|
||||
<p className={`text-xl font-bold`}>{team.name}</p>
|
||||
</div>
|
||||
<p className={`text-xl font-bold ${status.color}`}>
|
||||
{status.label}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TeamList({selectedTeamId, onSelected}) {
|
||||
const { teams } = useAdmin();
|
||||
|
||||
return (
|
||||
<ul className='h-full gap-1 flex flex-col'>
|
||||
{teams.map((team) => (
|
||||
<li key={team.id} onClick={() => onSelected(team.id)}>
|
||||
<TeamListItem itemSelected={selectedTeamId === team.id} team={team} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user