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

Réorganisation des dossiers

Browse Source
This commit is contained in:
Sebastien Riviere
2025-08-28 00:06:14 +02:00
parent 4a8d005f44
commit cb534ed1aa
31 changed files with 134 additions and 677 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
traque-front/app/admin/components/buttons.jsx Normal file
View 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>
);
}

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

@@ -1,10 +1,10 @@
import useLocation from "@/hook/useLocation";
import { useEffect, useState } from "react";
import "leaflet/dist/leaflet.css";
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";
import { MapPan } from "./mapUtils";
const DEFAULT_ZOOM = 14;
const positionIcon = new L.Icon({

6
traque-front/components/admin/teamInformation.jsx → traque-front/app/admin/components/teamSidePanel.jsx
View File

@@ -1,7 +1,7 @@
import { env } from 'next-runtime-env';
import { useEffect, useState } from "react";
import useAdmin from "@/hook/useAdmin";
import { GameState } from '@/util/gameState';
import { useEffect, useState } from "react";
import { env } from 'next-runtime-env';
function DotLine({ label, value }) {
return (
@@ -49,7 +49,7 @@ function getStatus(team, gamestate) {
}
}
export default function TeamInformation({ selectedTeamId, onClose }) {
export default function TeamSidePanel({ selectedTeamId, onClose }) {
const { getTeam, getTeamName, startDate, gameState } = useAdmin();
const [imgSrc, setImgSrc] = useState("");
const team = getTeam(selectedTeamId);

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

@@ -1,6 +1,5 @@
import useAdmin from '@/hook/useAdmin';
import { GameState } from '@/util/gameState';
import React from 'react';
const TEAM_STATUS = {
playing: { label: "En jeu", color: "text-custom-green" },

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

@@ -1,6 +1,5 @@
import { AdminConnexionProvider } from "@/context/adminConnexionContext";
import { AdminProvider } from "@/context/adminContext";
import Link from "next/link";
export default function AdminLayout({ children }) {
return (

4
traque-front/components/team/loginForm.jsx → traque-front/app/admin/login/components/loginForm.jsx
View File

@@ -1,6 +1,6 @@
import { useState } from "react";
import { BlueButton } from "../util/button";
import { TextInput } from "../util/textInput";
import { BlueButton } from "@/components/button";
import { TextInput } from "@/components/textInput";
export default function LoginForm({ onSubmit, title, placeholder, buttonText}) {
const [value, setValue] = useState("");

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

@@ -1,7 +1,6 @@
"use client";
import LoginForm from '@/components/team/loginForm'
import { useAdminConnexion } from '@/context/adminConnexionContext';
import React from 'react'
import LoginForm from './components/loginForm';
export default function AdminLoginPage() {
const {login, useProtect} = useAdminConnexion();

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

@@ -1,14 +1,15 @@
"use client";
import { useAdminConnexion } from "@/context/adminConnexionContext";
import React, { useState } from 'react';
import dynamic from "next/dynamic";
import TeamList from '@/components/admin/teamViewer';
import React, { useState } from 'react'
import Link from "next/link";
import { Section } from "@/components/util/section";
import TeamInformation from "@/components/admin/teamInformation";
import { Section } from "@/components/section";
import { useAdminConnexion } from "@/context/adminConnexionContext";
import TeamSidePanel from "./components/teamSidePanel";
import TeamList from './components/teamViewer';
import { MapButton, ControlButton } from './components/buttons';
// Imported at runtime and not at compile time
const LiveMap = dynamic(() => import('@/components/admin/liveMap'), { ssr: false });
const LiveMap = dynamic(() => import('./components/liveMap'), { ssr: false });
export default function AdminPage() {
const { useProtect } = useAdminConnexion();
@@ -33,32 +34,13 @@ export default function AdminPage() {
</div>
<Section title="Contrôle">
<div className='w-full h-full flex flex-row justify-between'>
<Link
href="/admin/parameters"
className="w-[4.5rem] h-[4.5rem] bg-custom-light-blue rounded-lg hover:bg-blue-500 transition flex items-center justify-center"
title="Accéder aux paramètres du jeu">
<img src="/icons/parameters.png" className="w-10 h-10" />
<Link href="/admin/parameters">
<ControlButton icon="parameters" title="Accéder aux paramètres du jeu"/>
</Link>
<button
className="w-[4.5rem] h-[4.5rem] bg-custom-light-blue rounded-lg hover:bg-blue-500 transition flex items-center justify-center"
title="Reprendre la partie">
<img src="/icons/play.png" className="w-10 h-10" />
</button>
<button
className="w-[4.5rem] h-[4.5rem] bg-custom-light-blue rounded-lg hover:bg-blue-500 transition flex items-center justify-center"
title="Réinitialiser la partie">
<img src="/icons/reset.png" className="w-10 h-10" />
</button>
<button
className="w-[4.5rem] h-[4.5rem] bg-custom-light-blue rounded-lg hover:bg-blue-500 transition flex items-center justify-center"
title="Commencer les placements">
<img src="/icons/placement.png" className="w-10 h-10" />
</button>
<button
className="w-[4.5rem] h-[4.5rem] bg-custom-light-blue rounded-lg hover:bg-blue-500 transition flex items-center justify-center"
title="Lancer la traque">
<img src="/icons/begin.png" className="w-10 h-10" />
</button>
<ControlButton icon="play" title="Reprendre la partie"/>
<ControlButton icon="reset" title="Réinitialiser la partie"/>
<ControlButton icon="placement" title="Commencer les placements"/>
<ControlButton icon="begin" title="Lancer la traque"/>
</div>
</Section>
<Section className="h-full" title="Équipes">
@@ -70,44 +52,16 @@ export default function AdminPage() {
<div className='grow flex-1 flex flex-col bg-white p-3 gap-3 shadow-2xl'>
<div className="flex-1 flex flex-row gap-3">
<LiveMap/>
<TeamInformation selectedTeamId={selectedTeamId} onClose={() => setSelectedTeamId(null)}/>
<TeamSidePanel selectedTeamId={selectedTeamId} onClose={() => setSelectedTeamId(null)}/>
</div>
<div className='w-full flex flex-row items-center justify-evenly py-2'>
<button
className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center"
title ="Changer le style de la carte">
<img src="/icons/mapstyle.png" className="w-10 h-10" />
</button>
<button
className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center"
title ="Afficher/cacher les zones">
<img src="/icons/zones.png" className="w-10 h-10" />
</button>
<button
className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center"
title ="Afficher/cacher les noms des équipes">
<img src="/icons/names.png" className="w-10 h-10" />
</button>
<button
className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center"
title ="Afficher/cacher les relations de traque">
<img src="/icons/arrows.png" className="w-10 h-10" />
</button>
<button
className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center"
title ="Afficher/cacher les incertitudes de position">
<img src="/icons/incertitude.png" className="w-10 h-10" />
</button>
<button
className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center"
title ="Afficher/cacher les chemins des équipes">
<img src="/icons/path.png" className="w-10 h-10" />
</button>
<button
className="w-16 h-16 bg-custom-light-blue rounded-full hover:bg-blue-500 transition flex items-center justify-center"
title ="Afficher/cacher les événements">
<img src="/icons/informations.png" className="w-10 h-10" />
</button>
<MapButton icon="mapstyle" title="Changer le style de la carte"/>
<MapButton icon="zones" title="Afficher/masquer les zones"/>
<MapButton icon="names" title="Afficher/masquer les noms des équipes"/>
<MapButton icon="arrows" title="Afficher/masquer les relations de traque"/>
<MapButton icon="incertitude" title="Afficher/masquer les incertitudes de position"/>
<MapButton icon="path" title="Afficher/masquer la trace de l'équipe sélectionnée"/>
<MapButton icon="informations" title="Afficher/masquer les évènements de l'équipe sélectionnée"/>
</div>
</div>
</div>

16
traque-front/components/admin/circleZoneMap.jsx → traque-front/app/admin/parameters/components/circleZoneMap.jsx
View File

@@ -1,12 +1,12 @@
import { useEffect, useState } from "react";
import { BlueButton, GreenButton, RedButton } from "../util/button";
import { TextInput } from "../util/textInput";
import { Circle, MapContainer, TileLayer } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import { BlueButton, GreenButton, RedButton } from "@/components/button";
import { TextInput } from "@/components/textInput";
import { MapPan, MapEventListener } from "@/components/mapUtils";
import useAdmin from "@/hook/useAdmin";
import useLocation from "@/hook/useLocation";
import "leaflet/dist/leaflet.css";
import { Circle, MapContainer, TileLayer } from "react-leaflet";
import useMapCircleDraw from "@/hook/useMapCircleDraw";
import { MapPan, MapEventListener } from "./mapUtils";
const DEFAULT_ZOOM = 14;
const EditMode = {
@@ -94,13 +94,14 @@ export default function CircleZoneMap() {
useEffect(() => {
if(editMode == EditMode.MIN) {
setEditMode(EditMode.MAX);
}else {
} else {
setEditMode(EditMode.MIN);
}
}, [minZone, maxZone]);
return <div className='w-2/5 h-full gap-1 bg-white p-10 flex flex-col text-center shadow-2xl overflow-y-scroll'>
return (
<div className='w-2/5 h-full gap-1 bg-white p-10 flex flex-col text-center shadow-2xl overflow-y-scroll'>
<h2 className="text-2xl">Edit zones</h2>
{editMode == EditMode.MIN && <BlueButton onClick={() => setEditMode(EditMode.MAX)}>Click to edit first zone</BlueButton>}
{editMode == EditMode.MAX && <RedButton onClick={() => setEditMode(EditMode.MIN)}>Click to edit last zone</RedButton>}
@@ -115,4 +116,5 @@ export default function CircleZoneMap() {
</div>
<GreenButton onClick={handleSettingsSubmit}>Apply</GreenButton>
</div>
);
}

18
traque-front/components/admin/gameSettings.jsx → traque-front/app/admin/parameters/components/messages.jsx
View File

@@ -1,7 +1,6 @@
import useAdmin from "@/hook/useAdmin";
import { GreenButton } from "../util/button";
import { Section } from "../util/section";
import { useEffect, useState } from "react";
import { Section } from "@/components/section";
import useAdmin from "@/hook/useAdmin";
function MessageInput({title, ...props}) {
return (
@@ -12,7 +11,7 @@ function MessageInput({title, ...props}) {
);
}
export default function GameSettings() {
export default function Messages() {
const {gameSettings, changeGameSettings} = useAdmin();
const [capturedMessage, setCapturedMessage] = useState("");
const [winnerEndMessage, setWinnerEndMessage] = useState("");
@@ -35,13 +34,10 @@ export default function GameSettings() {
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)}/>
<MessageInput title="Capture :" value={capturedMessage} onChange={(e) => setCapturedMessage(e.target.value)} />
<MessageInput title="Victoire :" value={winnerEndMessage} onChange={(e) => setWinnerEndMessage(e.target.value)} />
<MessageInput title="Défaite  :" value={loserEndMessage} onChange={(e) => setLoserEndMessage(e.target.value)} />
<div className='w-40 h-15'>
<GreenButton onClick={applySettings}>Apply</GreenButton>
</div>
<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>
);

10
traque-front/components/admin/polygonZoneMap.jsx → traque-front/app/admin/parameters/components/polygonZoneMap.jsx
View File

@@ -1,12 +1,12 @@
import { useEffect, useState } from "react";
import { GreenButton } from "../util/button";
import { TextInput } from "../util/textInput";
import { MapContainer, TileLayer, Polyline, Polygon, CircleMarker } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import { GreenButton } from "@/components/button";
import { TextInput } from "@/components/textInput";
import { MapPan, MapEventListener } from "@/components/mapUtils";
import useAdmin from "@/hook/useAdmin";
import useLocation from "@/hook/useLocation";
import "leaflet/dist/leaflet.css";
import { MapContainer, TileLayer, Polyline, Polygon, CircleMarker } from "react-leaflet";
import useMapPolygonDraw from "@/hook/useMapPolygonDraw";
import { MapPan, MapEventListener } from "./mapUtils";
const DEFAULT_ZOOM = 14;

4
traque-front/components/admin/teamManager.jsx → traque-front/app/admin/parameters/components/teamManager.jsx
View File

@@ -1,6 +1,6 @@
import useAdmin from '@/hook/useAdmin';
import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
import React, { useState } from 'react'
import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
import useAdmin from '@/hook/useAdmin';
function reorder(list, startIndex, endIndex) {
const result = Array.from(list);

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

@@ -1,21 +1,19 @@
"use client";
import { useState, useEffect } from "react";
import GameSettings from "@/components/admin/gameSettings";
import { useAdminConnexion } from "@/context/adminConnexionContext";
import dynamic from "next/dynamic";
import TeamList from '@/components/admin/teamManager';
import useAdmin from '@/hook/useAdmin';
import Link from "next/link";
import { GreenButton } from "@/components/util/button";
import { TextInput } from "@/components/util/textInput";
import { Section } from "@/components/util/section";
import { TextInput } from "@/components/textInput";
import { Section } from "@/components/section";
import { useAdminConnexion } from "@/context/adminConnexionContext";
import useAdmin from '@/hook/useAdmin';
import Messages from "./components/messages";
import TeamList from './components/teamManager';
// Imported at runtime and not at compile time
const ZoneSelector = dynamic(() => import('@/components/admin/polygonZoneMap'), { ssr: false });
const ZoneSelector = dynamic(() => import('./components/polygonZoneMap'), { ssr: false });
export default function AdminPage() {
const {penaltySettings, changePenaltySettings} = useAdmin();
const { addTeam } = useAdmin();
const { useProtect } = useAdminConnexion();
const [allowedTimeBetweenUpdates, setAllowedTimeBetweenUpdates] = useState("");
@@ -42,19 +40,16 @@ export default function AdminPage() {
</Link>
<h2 className="text-3xl font-bold">Paramètres</h2>
</div>
<GameSettings />
<Messages/>
<Section className="h-full" title="Équipe">
<div className="w-full h-full gap-3 flex flex-col items-center">
<TeamList/>
<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)} />
<TextInput value={allowedTimeBetweenUpdates} onChange={(e) => setAllowedTimeBetweenUpdates(e.target.value)} onBlur={applySettings} />
</div>
</div>
<div className="w-40 h-15">
<GreenButton onClick={applySettings}>Apply</GreenButton>
</div>
</div>
</Section>
</div>

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

@@ -1,28 +0,0 @@
"use client";
import TeamAddForm from '@/components/admin/teamAdd';
import TeamEdit from '@/components/admin/teamEdit';
import TeamList from '@/components/admin/teamManager';
import { useAdminConnexion } from '@/context/adminConnexionContext';
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();
return (
<div className='h-full bg-gray-200 p-10 flex flex-row justify-between'>
<div className='w-1/3 p-5 bg-white mx-5 h-full p-4 shadow-2xl rounded overflow-y-scroll max-h-full'>
<h2 className='text-2xl text-center'>Team list</h2>
<TeamAddForm onAddTeam={addTeam}/>
<TeamList selectedTeamId={selectedTeamId} onSelected={setSelectedTeamId}/>
</div>
<div className='w-2/3 p-5 mx-5 bg-white h-full p-4 shadow-2xl rounded'>
{selectedTeamId && <TeamEdit selectedTeamId={selectedTeamId} setSelectedTeamId={setSelectedTeamId}/>}
</div>
</div>
)
}

19
traque-front/app/team/components/loginForm.jsx Normal file
View File

@@ -0,0 +1,19 @@
import { useState } from "react";
import { BlueButton } from "@/components/button";
import { TextInput } from "@/components/textInput";
export default function LoginForm({ onSubmit, title, placeholder, buttonText}) {
const [value, setValue] = useState("");
function handleSubmit(e) {
e.preventDefault();
setValue("");
onSubmit(value);
}
return (
<form className="bg-white shadow-md max-w mx-auto p-5 mx-10 flex flex-col space-y-4" onSubmit={handleSubmit}>
<h1 className="text-2xl font-bold text-center text-gray-700">{title}</h1>
<TextInput inputMode="numeric" placeholder={placeholder} value={value} onChange={(e) => setValue(e.target.value)} name="team-id"/>
<BlueButton type="submit">{buttonText}</BlueButton>
</form>
)
}

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

@@ -1,6 +1,6 @@
"use client"
import LoginForm from "@/components/team/loginForm";
import { useTeamConnexion } from "@/context/teamConnexionContext";
import LoginForm from "./components/loginForm";
export default function Home() {
const { login,useProtect } = useTeamConnexion();

6
traque-front/components/team/actionDrawer.jsx → traque-front/app/team/track/components/actionDrawer.jsx
View File

@@ -1,8 +1,8 @@
import useGame from "@/hook/useGame";
import { useEffect, useState } from "react"
import { BlueButton, GreenButton } from "../util/button";
import { TextInput } from "../util/textInput";
import { BlueButton, GreenButton } from "@/components/button";
import { TextInput } from "@/components/textInput";
import useTeamConnexion from "@/context/teamConnexionContext";
import useGame from "@/hook/useGame";
import EnemyTeamModal from "./enemyTeamModal";
export default function ActionDrawer() {

5
traque-front/components/team/enemyTeamModal.jsx → traque-front/app/team/track/components/enemyTeamModal.jsx
View File

@@ -1,7 +1,8 @@
import useGame from "@/hook/useGame";
import { RedButton } from "../util/button";
import { useEffect, useRef } from "react";
import { env } from 'next-runtime-env';
import { RedButton } from "@/components/button";
import useGame from "@/hook/useGame";
export default function EnemyTeamModal({ visible, onClose }) {
const { teamId, enemyName } = useGame();

2
traque-front/components/team/map.jsx → traque-front/app/team/track/components/map.jsx
View File

@@ -3,8 +3,8 @@ import { Circle, MapContainer, Marker, Popup, TileLayer, useMap } from 'react-le
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'
import "leaflet-defaulticon-compatibility";
import "leaflet/dist/leaflet.css";
import useGame from '@/hook/useGame';
import useTeamContext from '@/context/teamContext';
import useGame from '@/hook/useGame';
const DEFAULT_ZOOM = 14;

2
traque-front/components/team/notification.jsx → traque-front/app/team/track/components/notification.jsx
View File

@@ -1,5 +1,5 @@
import { useSocketListener } from "@/hook/useSocketListener";
import { useEffect, useState } from "react";
import { useSocketListener } from "@/hook/useSocketListener";
export default function Notification({ socket }) {
const [visible, setVisible] = useState(false);

2
traque-front/components/team/placementOverlay.jsx → traque-front/app/team/track/components/placementOverlay.jsx
View File

@@ -1,5 +1,5 @@
import useTeamConnexion from "@/context/teamConnexionContext";
import useGame from "@/hook/useGame"
import useGame from "@/hook/useGame";
export default function PlacementOverlay() {
const { name, ready } = useGame();

6
traque-front/components/team/waitingScreen.jsx → traque-front/app/team/track/components/waitingScreen.jsx
View File

@@ -1,8 +1,8 @@
import useGame from "@/hook/useGame"
import { GreenButton, LogoutButton } from "../util/button";
import { useRef } from "react";
import useTeamContext from "@/context/teamContext";
import { env } from 'next-runtime-env';
import { GreenButton, LogoutButton } from "@/components/button";
import useTeamContext from "@/context/teamContext";
import useGame from "@/hook/useGame"
export default function WaitingScreen() {
const { name, teamId } = useGame();

18
traque-front/app/team/track/page.js
View File

@@ -1,22 +1,22 @@
"use client";
import ActionDrawer from '@/components/team/actionDrawer';
import Notification from '@/components/team/notification';
import PlacementOverlay from '@/components/team/placementOverlay';
import WaitingScreen from '@/components/team/waitingScreen';
import { LogoutButton } from '@/components/util/button';
import React from 'react';
import dynamic from 'next/dynamic';
import { LogoutButton } from '@/components/button';
import { useSocket } from '@/context/socketContext';
import { useTeamConnexion } from '@/context/teamConnexionContext';
import { useTeamContext } from '@/context/teamContext';
import useGame from '@/hook/useGame';
import { GameState } from '@/util/gameState';
import dynamic from 'next/dynamic';
import React from 'react'
import ActionDrawer from './components/actionDrawer';
import Notification from './components/notification';
import PlacementOverlay from './components/placementOverlay';
import WaitingScreen from './components/waitingScreen';
//Load the map without SSR
const LiveMap = dynamic(() => import('@/components/team/map').then((mod) => mod.LiveMap), {
const LiveMap = dynamic(() => import('./components/map').then((mod) => mod.LiveMap), {
ssr: false
});
const PlacementMap = dynamic(() => import('@/components/team/map').then((mod) => mod.PlacementMap), {
const PlacementMap = dynamic(() => import('./components/map').then((mod) => mod.PlacementMap), {
ssr: false
});

268
traque-front/components/admin/mapPicker.jsx
View File

@@ -1,268 +0,0 @@
"use client";
import { useLocation } from "@/hook/useLocation";
import { useEffect, useState, useRef, useCallback } from "react";
import "leaflet/dist/leaflet.css";
import { Circle, MapContainer, Marker, TileLayer, useMap, Tooltip, Polyline } from "react-leaflet";
import { useMapCircleDraw } from "@/hook/mapDrawing";
import useAdmin from "@/hook/useAdmin";
import { GameState } from "@/util/gameState";
import L from "leaflet";
import { createPortal } from "react-dom";
import TeamInformation from "@/components/admin/teamInformation";
function MapActionControl({ onClick, children }) {
const map = useMap();
useEffect(() => {
const controlDiv = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
controlDiv.style.background = 'rgba(0,0,0,0.25)';
controlDiv.style.borderRadius = '9999px';
controlDiv.style.padding = '8px';
controlDiv.style.border = 'none';
controlDiv.title = "Plein écran";
controlDiv.style.display = "flex";
controlDiv.style.alignItems = "center";
controlDiv.style.justifyContent = "center";
controlDiv.style.width = "56px";
controlDiv.style.height = "56px";
controlDiv.onclick = onClick;
controlDiv.innerHTML = `<img src="./icons/fullscreen.png" alt="" style="width:36px;height:36px;" />`;
const customControl = L.control({ position: 'bottomleft' });
customControl.onAdd = () => controlDiv;
customControl.addTo(map);
return () => {
customControl.remove();
};
}, [map, onClick, children]);
return null;
}
function LeafletSidePanel({ show, onClose, children }) {
const map = useMap();
const panelRef = useRef(document.createElement("div"));
useEffect(() => {
const panelDiv = panelRef.current;
panelDiv.className = "leaflet-control leaflet-control-custom";
const control = L.control({ position: "topright" });
control.onAdd = () => panelDiv;
if (show) control.addTo(map);
return () => {
control.remove();
};
}, [map, show]);
if (!show) return null;
return createPortal(
<>
<button
style={{
position: "absolute",
top: "1rem",
right: "1rem",
fontSize: "3rem",
background: "none",
border: "none",
cursor: "pointer",
color: "#888"
}}
onClick={onClose}
title="Fermer"
>
×
</button>
{children}
</>,
panelRef.current
);
}
const positionIcon = new L.Icon({
iconUrl: '/icons/location.png',
iconSize: [30, 30],
iconAnchor: [15, 15],
popupAnchor: [0, -15],
shadowSize: [30, 30],
});
function MapPan(props) {
const map = useMap();
const [initialized, setInitialized] = useState(false);
useEffect(() => {
if (!initialized && props.center) {
map.flyTo(props.center, props.zoom, { animate: false });
setInitialized(true)
}
}, [props.center]);
return null;
}
function MapEventListener({ onClick, onMouseMove }) {
const map = useMap();
useEffect(() => {
map.on('click', onClick);
return () => {
map.off('click', onClick);
}
}, [onClick]);
useEffect(() => {
map.on('mousemove', onMouseMove);
return () => {
map.off('mousemove', onMouseMove);
}
});
return null;
}
const DEFAULT_ZOOM = 14;
export function CircularAreaPicker({ area, setArea, markerPosition, ...props }) {
const location = useLocation(Infinity);
const { handleClick, handleMouseMove, center, radius } = useMapCircleDraw(area, setArea);
return (
<MapContainer {...props} className='min-h-full w-full ' center={location} zoom={DEFAULT_ZOOM} scrollWheelZoom={true}>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
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>}
<MapPan center={location} zoom={DEFAULT_ZOOM} />
<MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
</MapContainer>)
}
export const EditMode = {
MIN: 0,
MAX: 1
}
export function ZonePicker({ minZone, setMinZone, maxZone, setMaxZone, editMode, ...props }) {
const location = useLocation(Infinity);
const { handleClick: maxClick, handleMouseMove: maxHover, center: maxCenter, radius: maxRadius } = useMapCircleDraw(minZone, setMinZone);
const { handleClick: minClick, handleMouseMove: minHover, center: minCenter, radius: minRadius } = useMapCircleDraw(maxZone, setMaxZone);
function handleClick(e) {
if (editMode == EditMode.MAX) {
maxClick(e);
} else {
minClick(e);
}
}
function handleMouseMove(e) {
if (editMode == EditMode.MAX) {
maxHover(e);
} else {
minHover(e);
}
}
return (
<div>
<div className='h-96'>
<MapContainer {...props} className='min-h-full w-full ' center={location} zoom={DEFAULT_ZOOM} scrollWheelZoom={true}>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{minCenter && minRadius && <Circle center={minCenter} radius={minRadius} color="blue" fillColor="blue" />}
{maxCenter && maxRadius && <Circle center={maxCenter} radius={maxRadius} color="red" fillColor="red" />}
<MapPan center={location} zoom={DEFAULT_ZOOM} />
<MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
</MapContainer>
</div>
{ maxCenter && minCenter && typeof maxCenter.distanceTo === 'function'
&& maxRadius + maxCenter.distanceTo(minCenter) >= minRadius
&& <p className="text-red-500">La zone de fin doit être incluse dans celle de départ</p>}
</div>
)
}
export function LiveMap({ selectedTeamId, setSelectedTeamId }) {
const location = useLocation(Infinity);
const [timeLeftNextZone, setTimeLeftNextZone] = useState(null);
const { zone, zoneExtremities, teams, nextZoneDate, isShrinking , getTeam, gameState } = useAdmin();
function handleMarkerClick(teamId) {
setSelectedTeamId(teamId);
}
const mapWrapperRef = useRef(null);
const handleFullscreen = useCallback(() => {
const el = mapWrapperRef.current;
if (!el) return;
if (!document.fullscreenElement) {
el.requestFullscreen();
} else {
document.exitFullscreen();
}
}, []);
// Remaining time before sending position
useEffect(() => {
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' ref ={mapWrapperRef}>
{gameState == GameState.PLAYING && <p>{`${isShrinking ? "Fin" : "Début"} du rétrécissement de la zone dans : ${formatTime(timeLeftNextZone)}`}</p>}
<MapContainer className='min-h-full w-full' center={location} zoom={DEFAULT_ZOOM} scrollWheelZoom={true}>
<TileLayer
attribution='&copy; <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 && zone && <Circle center={zone.center} radius={zone.radius} color="blue" />}
{gameState == GameState.PLAYING && zoneExtremities && <Circle center={zoneExtremities.begin.center} radius={zoneExtremities.begin.radius} color='black' fill={false} />}
{gameState == GameState.PLAYING && zoneExtremities && <Circle center={zoneExtremities.end.center} radius={zoneExtremities.end.radius} color='red' fill={false} />}
{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>
)}
<MapActionControl onClick={handleFullscreen}/>
{selectedTeamId && (
<LeafletSidePanel show={true} onClose={() => setSelectedTeamId(null)}>
<TeamInformation
selectedTeamId={selectedTeamId}
onClose={() => setSelectedTeamId(null)}
/>
</LeafletSidePanel>
)}
</MapContainer>
</div>
)
}

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

@@ -1,32 +0,0 @@
import useLocation from "@/hook/useLocation";
import "leaflet/dist/leaflet.css";
import { Circle, MapContainer, Marker, TileLayer } from "react-leaflet";
import useMapCircleDraw from "@/hook/useMapCircleDraw";
import { MapPan, MapEventListener } from "./mapUtils";
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 CircularAreaPicker({ area, setArea, markerPosition, ...props }) {
const location = useLocation(Infinity);
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}>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
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} />}
<MapPan center={location} zoom={DEFAULT_ZOOM} />
<MapEventListener onLeftClick={handleLeftClick} onRightClick={handleRightClick} onMouseMove={handleMouseMove} />
</MapContainer>
);
}

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

@@ -1,122 +0,0 @@
import React, { useEffect, useRef, useState } from 'react'
import { TextInput } from '../util/textInput'
import { BlueButton, RedButton } from '../util/button';
import useAdmin from '@/hook/useAdmin';
import dynamic from 'next/dynamic';
import { env } from 'next-runtime-env';
import { GameState } from '@/util/gameState';
// Imported at runtime and not at compile time
const PlacementMap = dynamic(() => import('./placementMap'), { ssr: false });
export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
const teamImage = useRef(null);
const [avgSpeed, setAvgSpeed] = useState(0); // Speed in m/s
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");
const SERVER_URL = (NEXT_PUBLIC_SOCKET_HOST == "localhost" ? "http://" : "https://") + NEXT_PUBLIC_SOCKET_HOST + "/back";
useEffect(() => {
let team = getTeam(selectedTeamId);
if (team != undefined) {
setNewTeamName(team.name);
setTeam(team);
}
teamImage.current.src = SERVER_URL + "/photo/my?team=" + selectedTeamId + "&t=" + new Date().getTime();
}, [selectedTeamId, teams])
// Update the average speed
useEffect(() => {
const time = Math.floor((team.finishDate ? team.finishDate - startDate : Date.now() - startDate) / 1000);
setAvgSpeed(team.distance/time);
}, [team.distance, team.finishDate]);
function handleRename(e) {
e.preventDefault();
updateTeam(team.id, { name: newTeamName });
}
function handleRemove() {
removeTeam(team.id);
setSelectedTeamId(null);
}
function handleAddPenalty(increment) {
let newPenalties = team.penalties + increment;
newPenalties = Math.max(0, newPenalties);
newPenalties = Math.min(3, newPenalties);
updateTeam(team.id, { penalties: newPenalties });
}
function formatTimeHours(time) {
// time is in seconds
if (!Number.isInteger(time)) return "Inconnue";
if (time < 0) time = 0;
const hours = Math.floor(time / 3600);
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
return String(hours).padStart(2,"0") + ":" + String(minutes).padStart(2,"0") + ":" + String(seconds).padStart(2,"0");
}
return (team &&
<div className='flex flex-row w-full h-full gap-2'>
<div className='flex w-1/2 flex-col h-1/2 gap-2'>
<h2 className='text-2xl text-center'>Actions</h2>
<form className='flex flex-row' onSubmit={handleRename}>
<div className='w-4/5'>
<TextInput name="teamName" label='Team name' value={newTeamName} onChange={(e) => setNewTeamName(e.target.value)} />
</div>
<div className='w-2/5'>
<BlueButton type="submit">Rename</BlueButton>
</div>
</form>
<div className='flex flex-row'>
<BlueButton onClick={() => {updateTeam(team.id, { captured: !team.captured }); team.finishDate = Date.now()}}>{team.captured ? "Revive" : "Capture"}</BlueButton>
<RedButton onClick={handleRemove}>Remove</RedButton>
</div>
<p className='text-2xl text-center w-full'>Starting zone</p>
<PlacementMap area={team.startingArea} setArea={(startingArea) => updateTeam(team.id, { startingArea })} markerPosition={team?.currentLocation} />
</div>
<div className='flex w-1/2 flex-col h-min gap-2 items-center'>
<h2 className='text-2xl text-center'>Team details</h2>
<div className='w-3/5'>
<img className='self-stretch' ref={teamImage} onError={(e) => {e.target.src = "/images/missing_image.jpg"}} />
</div>
<div className='flex flex-col gap-3'>
<div>
<p>Secret : {String(team.id).padStart(6, '0').replace(/(\d{3})(\d{3})/, '$1 $2')}</p>
<p>Capture code : {String(team.captureCode).padStart(4, '0')}</p>
</div>
<div>
<p>Chasing : {getTeamName(team.chasing)}</p>
<p>Chased by : {getTeamName(team.chased)}</p>
</div>
{gameState == GameState.PLAYING &&
<div>
<p>Distance: { (team.distance / 1000).toFixed(1) }km</p>
<p>Time : {formatTimeHours(Math.floor((team.finishDate ? team.finishDate - startDate : Date.now() - startDate) / 1000))}</p>
<p>Average speed : {(avgSpeed*3.6).toFixed(1)}km/h</p>
<p>Captures : {team.nCaptures}</p>
<p>Sent location : {team.nSentLocation}</p>
<p>Oberved : {team.nObserved}</p>
</div>
}
<div>
<p>Phone model : {team.phoneModel ?? "Unknown"}</p>
<p>Phone name : {team.phoneName ?? "Unknown"}</p>
<p>Battery: {team.battery ? team.battery + "%" : "Unknown"}</p>
</div>
<div className='flex flex-row'>
<p>Penalties :</p>
<button className='w-7 h-7 mx-4 bg-blue-600 hover:bg-blue-500 text-md ease-out duration-200 text-white shadow-sm rounded' onClick={() => handleAddPenalty(-1)}>-</button>
<p>{team.penalties}</p>
<button className='w-7 h-7 mx-4 bg-blue-600 hover:bg-blue-500 text-md ease-out duration-200 text-white shadow-sm rounded' onClick={() => handleAddPenalty(1)}>+</button>
</div>
</div>
</div>
</div>
);
}

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

@@ -1,72 +0,0 @@
import useAdmin from '@/hook/useAdmin';
import { GameState } from '@/util/gameState';
import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
import React from 'react'
function reorder(list, startIndex, endIndex) {
const result = Array.from(list);
const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
return result;
};
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: "Prête", color: "text-custom-blue" },
notready: { label: "En préparation", color: "text-custom-grey" },
};
function TeamListItem({ team, index, onSelected, itemSelected, gamestate }) {
console.log(gamestate === GameState.PLAYING ? "En jeu" : "En préparation");
const status = gamestate === GameState.PLAYING ? (team.captured ? TEAM_STATUS.captured : (team.outofzone ? TEAM_STATUS.outofzone : TEAM_STATUS.playing)) : (team.ready ? TEAM_STATUS.ready : TEAM_STATUS.notready);
return (
<Draggable draggableId={team.id.toString()} index={index} onClick={() => onSelected(team.id)}>
{provided => (
<div className='w-full p-2 bg-white border-2 border-gray-300 flex flex-row items-center text-3xl gap-3 font-bold' {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
<div className="w-12 h-12 grid grid-cols-2 grid-rows-2 gap-1">
<img src="/icons/greendude.png" className="w-6 h-6 object-contain" />
<img src="/icons/greenlocation.png" className="w-6 h-6 object-contain" />
<img src="/icons/greenconnection.png" className="w-6 h-6 object-contain" />
<img src="/icons/greenbattery.png" className="w-6 h-6 object-contain" />
</div>
<div className='flex-1 w-full h-full flex flex-row items-center justify-between'>
<p className='text-center'>{team.name}</p>
<p className={`text-center ${status.color}`}>
{status.label}
</p>
</div>
</div>
)}
</Draggable>
);
}
export default function TeamList({selectedTeamId, onSelected}) {
const {teams, reorderTeams, gameState} = 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);
reorderTeams(newTeams);
}
return (
<DragDropContext onDragEnd={onDragEnd} >
<Droppable droppableId='team-list'>
{provided => (
<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} gamestate={gameState} />
</li>
))}
{provided.placeholder}
</ul>
)}
</Droppable>
</DragDropContext>
);
}

0
traque-front/components/util/button.jsx → traque-front/components/button.jsx
View File

2
traque-front/components/admin/mapUtils.jsx → traque-front/components/mapUtils.jsx
View File

@@ -1,6 +1,6 @@
import { useEffect, useState } from "react";
import "leaflet/dist/leaflet.css";
import { useMap } from "react-leaflet";
import "leaflet/dist/leaflet.css";
export function MapPan(props) {
const map = useMap();

0
traque-front/components/util/section.jsx → traque-front/components/section.jsx
View File

0
traque-front/components/util/textInput.jsx → traque-front/components/textInput.jsx
View File