mirror of
https://git.rezel.net/LudoTech/traque.git
synced 2026-02-27 17:20:17 +01:00
Restructuration of the project folders
This commit is contained in:
Sebastien Riviere
@@ -1,8 +0,0 @@
|
||||
Dockerfile
|
||||
.dockerignore
|
||||
node_modules
|
||||
npm-debug.log
|
||||
README.md
|
||||
.next
|
||||
.git
|
||||
.vscode
|
||||
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"extends": "next/core-web-vitals"
|
||||
}
|
||||
38
traque-front/.gitignore
vendored
38
traque-front/.gitignore
vendored
@@ -1,38 +0,0 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
.yarn/install-state.gz
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
|
||||
certificates
|
||||
@@ -1,18 +0,0 @@
|
||||
# Use Node 22 alpine as parent image
|
||||
FROM node:22-alpine AS base
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
RUN apk add --no-cache libc6-compat
|
||||
|
||||
COPY package.json package-lock.json* ./
|
||||
RUN npm install
|
||||
|
||||
COPY . .
|
||||
|
||||
ENV NODE_ENV development
|
||||
ENV NEXT_TELEMETRY_DISABLED 1
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
CMD ["npm", "run", "dev"]
|
||||
@@ -1,27 +0,0 @@
|
||||
# Use Node 22 alpine as parent image
|
||||
FROM node:22-alpine
|
||||
|
||||
# Change the working directory on the Docker image to /app
|
||||
WORKDIR /app
|
||||
|
||||
# Installs glibc compatibility on Alpine to support native Node.js modules that require glibc
|
||||
RUN apk add --no-cache libc6-compat
|
||||
|
||||
# Change specified variables
|
||||
ENV NODE_ENV=development
|
||||
ENV NEXT_TELEMETRY_DISABLED=1
|
||||
|
||||
# Copy package.json and package-lock.json to the /app directory
|
||||
COPY package.json package-lock.json* ./
|
||||
|
||||
# Install dependencies
|
||||
RUN npm install
|
||||
|
||||
# Copy the rest of project files into this image
|
||||
COPY . .
|
||||
|
||||
# Expose the port
|
||||
EXPOSE 3000
|
||||
|
||||
# Start the server in dev mode
|
||||
CMD ["npm", "run", "dev"]
|
||||
@@ -1,80 +0,0 @@
|
||||
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";
|
||||
|
||||
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);
|
||||
const [isFullScreen, setIsFullScreen] = useState(false);
|
||||
|
||||
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 || 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)) return null;
|
||||
|
||||
switch (zoneType) {
|
||||
case ZoneTypes.CIRCLE:
|
||||
return (<>
|
||||
<CircleZone circle={zoneExtremities.begin} color={mapStyle.currentZoneColor} />
|
||||
<CircleZone circle={zoneExtremities.end} color={mapStyle.nextZoneColor} />
|
||||
</>);
|
||||
case ZoneTypes.POLYGON:
|
||||
return (<>
|
||||
<PolygonZone polygon={zoneExtremities.begin?.polygon} color={mapStyle.currentZoneColor} />
|
||||
<PolygonZone polygon={zoneExtremities.end?.polygon} color={mapStyle.nextZoneColor} />
|
||||
</>);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`${isFullScreen ? "fixed inset-0 z-[9999]" : "relative h-full w-full"}`}>
|
||||
<CustomMapContainer mapStyle={mapStyle}>
|
||||
{isFocusing && <MapPan center={getTeam(selectedTeamId)?.currentLocation} zoom={mapZooms.high} animate />}
|
||||
<MapEventListener onDragStart={() => setIsFocusing(false)} onWheel={() => setIsFocusing(false)} />
|
||||
<Zones/>
|
||||
{teams.map((team) => team && <Fragment key={team.id}>
|
||||
<CircleZone circle={team.startingArea} color={mapStyle.placementZoneColor} display={gameState == GameState.PLACEMENT && showZones}>
|
||||
<Tag text={team.name} display={showNames} />
|
||||
</CircleZone>
|
||||
<Arrow pos1={team.currentLocation} pos2={getTeam(team.chasing)?.currentLocation} color={mapStyle.arrowColor} display={showArrows}/>
|
||||
<Position position={team.currentLocation} color={mapStyle.playerColor} onClick={() => onSelected(team.id)} display={!team.captured}>
|
||||
<Tag text={team.name} display={showNames} />
|
||||
</Position>
|
||||
</Fragment>)}
|
||||
</CustomMapContainer>
|
||||
{ gameState == GameState.PLAYING &&
|
||||
<div className="absolute top-4 left-1/2 -translate-x-1/2 z-[1000] pointer-events-none flex flex-col items-center bg-white p-2 rounded-lg shadow-lg drop-shadow">
|
||||
<p className="text-sm">Durée zone</p>
|
||||
<p className="text-2xl font-bold">{formatTime(timeLeftNextZone)}</p>
|
||||
</div>
|
||||
}
|
||||
<button className="absolute top-4 right-4 z-[1000] cursor-pointer bg-white p-3 rounded-full shadow-lg drop-shadow" onClick={() => setIsFullScreen(!isFullScreen)}>
|
||||
<img src={`/icons/fullscreen.png`} className="w-8 h-8" />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,125 +0,0 @@
|
||||
import { env } from 'next-runtime-env';
|
||||
import { useEffect, useState } from "react";
|
||||
import useAdmin from "@/hook/useAdmin";
|
||||
import { getStatus } from '@/util/functions';
|
||||
import { Colors, GameState } from '@/util/types';
|
||||
|
||||
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/${icon}/${color}.png`} className="w-6 h-6" />
|
||||
<p style={{color: Colors[color]}}>{value}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TeamSidePanel({ selectedTeamId, onClose }) {
|
||||
const { getTeam, startDate, gameState } = useAdmin();
|
||||
const [imgSrc, setImgSrc] = useState("");
|
||||
const [_, setRefreshKey] = useState(0);
|
||||
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;
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setRefreshKey(prev => prev + 1);
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
function formatTime(startDate, endDate) {
|
||||
// startDate in milliseconds
|
||||
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")}`;
|
||||
}
|
||||
|
||||
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, endDate) {
|
||||
// distance in meters | startDate in milliseconds
|
||||
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`;
|
||||
}
|
||||
|
||||
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="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" 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.battery >= 20 ? "green" : "red"} icon="battery" value={(team.battery ?? NO_VALUE) + "%"} />
|
||||
<IconValue
|
||||
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={team.captureCode ? String(team.captureCode).padStart(4, '0') : NO_VALUE} />
|
||||
</div>
|
||||
{ gameState != GameState.FINISHED &&
|
||||
<div>
|
||||
<DotLine label="Chasse" value={getTeam(team.chasing)?.name ?? NO_VALUE} />
|
||||
<DotLine label="Chassé par" value={getTeam(team.chased)?.name ?? NO_VALUE} />
|
||||
</div>
|
||||
}
|
||||
{ (gameState == GameState.PLAYING || gameState == GameState.FINISHED) &&
|
||||
<div>
|
||||
<DotLine label="Distance" value={formatDistance(team.distance)} />
|
||||
<DotLine label="Temps de survie" value={formatTime(startDate, team.finishDate || Date.now())} />
|
||||
<DotLine label="Vitesse moyenne" value={formatSpeed(team.distance, startDate, 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} />
|
||||
</div>
|
||||
}
|
||||
<div>
|
||||
<DotLine label="Modèle" value={team.phoneModel ?? NO_VALUE} />
|
||||
<DotLine label="Nom" value={team.phoneName ?? NO_VALUE} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
import { List } from '@/components/list';
|
||||
import useAdmin from '@/hook/useAdmin';
|
||||
import { getStatus } from '@/util/functions';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
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 ${team.captured ? 'bg-gray-200' : 'bg-white'} justify-between`}>
|
||||
<div className='flex flex-row items-center gap-3'>
|
||||
<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 && (Date.now() - team.lastCurrentLocationDate <= 30000) ? "green" : "red"}.png`} className="w-4 h-4" />
|
||||
</div>
|
||||
<p className="text-xl font-bold">{team.name ?? NO_VALUE}</p>
|
||||
</div>
|
||||
<p className="text-xl font-bold" style={{color: status.color}}>
|
||||
{status.label}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TeamViewer({selectedTeamId, onSelected}) {
|
||||
const { teams } = useAdmin();
|
||||
|
||||
// Uncaptured teams first
|
||||
const sortedTeams = useMemo(() => {
|
||||
return [...teams].sort((a,b) => {
|
||||
if (a.captured === b.captured) return 0;
|
||||
return a.captured ? 1 : -1;
|
||||
});
|
||||
}, [teams]);
|
||||
|
||||
return (
|
||||
<List array={sortedTeams} selectedId={selectedTeamId} onSelected={onSelected} >
|
||||
{(team) => (
|
||||
<TeamViewerItem team={team}/>
|
||||
)}
|
||||
</List>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
import { AdminConnexionProvider } from "@/context/adminConnexionContext";
|
||||
import { AdminProvider } from "@/context/adminContext";
|
||||
|
||||
export default function AdminLayout({ children }) {
|
||||
return (
|
||||
<AdminConnexionProvider>
|
||||
<AdminProvider>
|
||||
{children}
|
||||
</AdminProvider>
|
||||
</AdminConnexionProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import { useAdminConnexion } from '@/context/adminConnexionContext';
|
||||
|
||||
export default function AdminLoginPage() {
|
||||
const {login, useProtect} = useAdminConnexion();
|
||||
const [value, setValue] = useState("");
|
||||
|
||||
useProtect();
|
||||
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
setValue("");
|
||||
login(value);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<form className="flex flex-col items-center gap-3 bg-white p-8 rounded-lg ring-1 ring-black" onSubmit={handleSubmit}>
|
||||
<h1 className="text-2xl font-bold text-center text-gray-700">Connexion admin</h1>
|
||||
<input name="team-id" className="w-60 h-12 text-center rounded ring-1 ring-inset ring-black placeholder:text-gray-400" placeholder="Mot de passe admin" value={value} onChange={(e) => setValue(e.target.value)}/>
|
||||
<button className=" w-40 h-12 bg-blue-600 hover:bg-blue-500 text-l text-white rounded ease-out duration-200" type="submit">Se connecter</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,128 +0,0 @@
|
||||
"use client";
|
||||
import { useState } from 'react';
|
||||
import dynamic from "next/dynamic";
|
||||
import Link from "next/link";
|
||||
import { Section } from "@/components/section";
|
||||
import { useAdminConnexion } from "@/context/adminConnexionContext";
|
||||
import useAdmin from "@/hook/useAdmin";
|
||||
import { GameState } from "@/util/types";
|
||||
import { mapStyles } from '@/util/configurations';
|
||||
import TeamSidePanel from "./components/teamSidePanel";
|
||||
import TeamViewer from './components/teamViewer';
|
||||
|
||||
// Imported at runtime and not at compile time
|
||||
const LiveMap = dynamic(() => import('./components/liveMap'), { ssr: false });
|
||||
|
||||
function MainTitle() {
|
||||
return (
|
||||
<div className='w-full bg-custom-light-blue gap-5 p-5 flex flex-row shadow-2xl'>
|
||||
<img src="/icons/home.png" className="w-8 h-8" />
|
||||
<h2 className="text-3xl font-bold">Page principale</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AdminPage() {
|
||||
const { useProtect } = useAdminConnexion();
|
||||
const { changeState, getTeam } = useAdmin();
|
||||
const [selectedTeamId, setSelectedTeamId] = useState(null);
|
||||
const [mapStyle, setMapStyle] = useState(mapStyles.default);
|
||||
const [showZones, setShowZones] = useState(true);
|
||||
const [showNames, setShowNames] = useState(true);
|
||||
const [showArrows, setShowArrows] = useState(true);
|
||||
const [isFocusing, setIsFocusing] = useState(true);
|
||||
|
||||
useProtect();
|
||||
|
||||
function onSelected(id) {
|
||||
if (selectedTeamId == id && (!getTeam(id)?.currentLocation || isFocusing)) {
|
||||
setSelectedTeamId(null);
|
||||
setIsFocusing(false);
|
||||
} else {
|
||||
setSelectedTeamId(id);
|
||||
setIsFocusing(true);
|
||||
}
|
||||
}
|
||||
|
||||
function switchMapStyle() {
|
||||
setMapStyle(mapStyle == mapStyles.default ? mapStyles.satellite : mapStyles.default);
|
||||
}
|
||||
|
||||
function switchZones() {
|
||||
setShowZones(!showZones);
|
||||
}
|
||||
|
||||
function switchNames() {
|
||||
setShowNames(!showNames);
|
||||
}
|
||||
|
||||
function switchArrows() {
|
||||
setShowArrows(!showArrows);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full h-full p-3 flex flex-row gap-3'>
|
||||
<div className="h-full w-2/6 flex flex-col gap-3">
|
||||
<MainTitle/>
|
||||
<Section title="Contrôle" innerClassName='flex flex-row justify-between'>
|
||||
<Link href="/admin/parameters">
|
||||
<ControlButton icon="parameters" title="Accéder aux paramètres du jeu"/>
|
||||
</Link>
|
||||
{false && <ControlButton icon="play" title="Reprendre la partie" onClick={() => {}} />}
|
||||
<ControlButton icon="reset" title="Réinitialiser la partie" onClick={() => changeState(GameState.SETUP)} />
|
||||
<ControlButton icon="placement" title="Commencer les placements" onClick={() => changeState(GameState.PLACEMENT)} />
|
||||
<ControlButton icon="begin" title="Lancer la traque" onClick={() => changeState(GameState.PLAYING)} />
|
||||
</Section>
|
||||
<Section title="Équipes" outerClassName="flex-1 min-h-0">
|
||||
<TeamViewer selectedTeamId={selectedTeamId} onSelected={onSelected}/>
|
||||
</Section>
|
||||
</div>
|
||||
<Section outerClassName='h-full flex-1' innerClassName='flex flex-col gap-3'>
|
||||
<div className="flex-1 flex flex-row gap-3">
|
||||
<div className="flex-1 h-full">
|
||||
<LiveMap
|
||||
selectedTeamId={selectedTeamId}
|
||||
onSelected={onSelected}
|
||||
isFocusing={isFocusing}
|
||||
setIsFocusing={setIsFocusing}
|
||||
mapStyle={mapStyle}
|
||||
showZones={showZones}
|
||||
showNames={showNames}
|
||||
showArrows={showArrows}
|
||||
/>
|
||||
</div>
|
||||
{selectedTeamId &&
|
||||
<div className="w-3/12 h-full">
|
||||
<TeamSidePanel selectedTeamId={selectedTeamId} onClose={() => setSelectedTeamId(null)}/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div className='w-full flex flex-row items-center justify-evenly py-2'>
|
||||
<MapButton icon="mapstyle" title="Changer le style de la carte" onClick={switchMapStyle}/>
|
||||
<MapButton icon="zones" title="Afficher/masquer les zones" onClick={switchZones}/>
|
||||
<MapButton icon="names" title="Afficher/masquer les noms des équipes" onClick={switchNames}/>
|
||||
<MapButton icon="arrows" title="Afficher/masquer les relations de traque" onClick={switchArrows}/>
|
||||
{false && <MapButton icon="incertitude" title="Afficher/masquer les incertitudes de position"/>}
|
||||
{false && <MapButton icon="path" title="Afficher/masquer la trace de l'équipe sélectionnée"/>}
|
||||
{false && <MapButton icon="informations" title="Afficher/masquer les évènements de l'équipe sélectionnée"/>}
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,111 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,128 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import dynamic from "next/dynamic";
|
||||
import Link from "next/link";
|
||||
import { useAdminConnexion } from "@/context/adminConnexionContext";
|
||||
import Messages from "./components/messages";
|
||||
import TeamManager from './components/teamManager';
|
||||
import PlayingZoneSelector from "./components/playingZoneSelector";
|
||||
|
||||
// Imported at runtime and not at compile time
|
||||
const PlacementZoneSelector = dynamic(() => import('./components/placementZoneSelector'), { ssr: false });
|
||||
|
||||
const Tabs = {
|
||||
PLACEMENT_ZONES: "placement_zones",
|
||||
PLAYING_ZONES: "playing_zones",
|
||||
}
|
||||
|
||||
function ParametersTitle() {
|
||||
return (
|
||||
<div className='w-full bg-custom-light-blue gap-5 p-5 flex flex-row shadow-2xl'>
|
||||
<Link href="/admin">
|
||||
<img src="/icons/backarrow.png" className="w-8 h-8" title="Main page" />
|
||||
</Link>
|
||||
<h2 className="text-3xl font-bold">Paramètres</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TabButton({title, onClick, isSelected}) {
|
||||
const grayStyle = "bg-gray-300 hover:bg-gray-400";
|
||||
const blueStyle = "bg-custom-light-blue";
|
||||
|
||||
return (
|
||||
<div className={`flex-1 h-full flex justify-center items-center cursor-pointer ${isSelected ? blueStyle : grayStyle}`} onClick={onClick}>
|
||||
<p className="text-2xl font-bold">{title}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ParametersPage() {
|
||||
const { useProtect } = useAdminConnexion();
|
||||
const [currentTab, setCurrentTab] = useState(Tabs.PLACEMENT_ZONES);
|
||||
|
||||
useProtect();
|
||||
|
||||
return (
|
||||
<div className='w-full h-full p-3 flex flex-row gap-3'>
|
||||
<div className="h-full w-2/6 gap-3 flex flex-col">
|
||||
<ParametersTitle/>
|
||||
<Messages/>
|
||||
<TeamManager/>
|
||||
</div>
|
||||
<div className="h-full flex-1 flex flex-col bg-white shadow-2xl">
|
||||
<div className="w-full h-20 flex flex-row bg-gray-300">
|
||||
<TabButton title="Zones de placement" onClick={() => setCurrentTab(Tabs.PLACEMENT_ZONES)} isSelected={currentTab == Tabs.PLACEMENT_ZONES}/>
|
||||
<TabButton title="Zones de jeu" onClick={() => setCurrentTab(Tabs.PLAYING_ZONES)} isSelected={currentTab == Tabs.PLAYING_ZONES}/>
|
||||
</div>
|
||||
<div className="w-full flex-1 p-3 bg-white">
|
||||
<PlacementZoneSelector display={currentTab == Tabs.PLACEMENT_ZONES} />
|
||||
<PlayingZoneSelector display={currentTab == Tabs.PLAYING_ZONES} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
@@ -1,17 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--accent-color: #F27127;
|
||||
--background-color: #FFFFFF;
|
||||
--text-color: #333333;
|
||||
--base-dark-color: #13274A;
|
||||
--base-light-color: #2957A3;
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--text-color-rgb);
|
||||
background: var(--background-color);
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { PublicEnvScript } from 'next-runtime-env';
|
||||
import SocketProvider from "@/context/socketContext";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata = {
|
||||
title: "La Traque",
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<PublicEnvScript />
|
||||
</head>
|
||||
<body className={inter.className + " w-screen h-screen bg-gray-200"}>
|
||||
<SocketProvider>
|
||||
{children}
|
||||
</SocketProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
export function NumberInput({onChange, ...props}) {
|
||||
function customStringToInt(e) {
|
||||
return parseInt(e, 10) || null;
|
||||
}
|
||||
|
||||
return (
|
||||
<input className="w-12 h-10 text-center rounded ring-1 ring-inset ring-black placeholder:text-gray-400" onChange={(e) => onChange(customStringToInt(e.target.value))} {...props} />
|
||||
)
|
||||
}
|
||||
@@ -1,181 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Marker, Tooltip, CircleMarker, Circle, Polygon, useMap } from "react-leaflet";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import 'leaflet-polylinedecorator';
|
||||
|
||||
export function Node({position, color = 'black', display = true}) {
|
||||
const nodeSize = 5;
|
||||
const fillOpacity = 1;
|
||||
|
||||
return (
|
||||
display && position && <CircleMarker center={position} radius={nodeSize} pathOptions={{ color: color, fillColor: color, fillOpacity: fillOpacity }} />
|
||||
);
|
||||
}
|
||||
|
||||
export function Label({position, label = "", color = "black", display = true}) {
|
||||
const size = 24;
|
||||
|
||||
const labelIcon = L.divIcon({
|
||||
html: `<div style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: ${color};
|
||||
font-weight: bold;
|
||||
font-size: ${size}px;
|
||||
">${label}</div>`,
|
||||
className: 'custom-label-icon',
|
||||
iconSize: [size, size],
|
||||
iconAnchor: [size / 2, size / 2]
|
||||
});
|
||||
|
||||
return (
|
||||
display && position && <Marker position={position} icon={labelIcon} />
|
||||
);
|
||||
}
|
||||
|
||||
export function Tag({text = "", display = true}) {
|
||||
const offset = [0.5, -15];
|
||||
const opacity = 1;
|
||||
|
||||
return (
|
||||
display && <Tooltip permanent direction="top" offset={offset} opacity={opacity} className="custom-tooltip">{text}</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
export function CircleZone({circle, color = "black", display = true, children}) {
|
||||
const opacity = '0.1';
|
||||
const border = 3;
|
||||
|
||||
return (
|
||||
display && circle &&
|
||||
<Circle center={circle.center} radius={circle.radius} pathOptions={{ color: color, fillColor: color, fillOpacity: opacity, weight: border }}>
|
||||
{children}
|
||||
</Circle>
|
||||
);
|
||||
}
|
||||
|
||||
export function PolygonZone({polygon, color = "black", display = true, children}) {
|
||||
const opacity = '0.1';
|
||||
const border = 3;
|
||||
|
||||
return (
|
||||
display && polygon && polygon.length >= 3 &&
|
||||
<Polygon positions={polygon} pathOptions={{ color: color, fillColor: color, fillOpacity: opacity, weight: border }}>
|
||||
{children}
|
||||
</Polygon>
|
||||
);
|
||||
}
|
||||
|
||||
export function Position({position, color = "blue", onClick = () => {}, display = true, children}) {
|
||||
|
||||
const positionIcon = new L.Icon({
|
||||
iconUrl: `/icons/marker/${color}.png`,
|
||||
iconSize: [30, 30],
|
||||
iconAnchor: [15, 15],
|
||||
popupAnchor: [0, -15],
|
||||
shadowSize: [30, 30],
|
||||
});
|
||||
|
||||
return (
|
||||
display && position &&
|
||||
<Marker position={position} icon={positionIcon} eventHandlers={{click: onClick}}>
|
||||
{children}
|
||||
</Marker>
|
||||
);
|
||||
}
|
||||
|
||||
export function Arrow({ pos1, pos2, color = 'black', display = true }) {
|
||||
const weight = 5;
|
||||
const arrowSize = 20;
|
||||
const insetPixels = 25;
|
||||
const map = useMap();
|
||||
const [insetPositions, setInsetPositions] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const updateInsetLine = () => {
|
||||
if (!pos1 || !pos2) {
|
||||
setInsetPositions(null);
|
||||
return;
|
||||
}
|
||||
|
||||
// Convert lat/lng to screen coordinates
|
||||
const point1 = map.latLngToContainerPoint(pos1);
|
||||
const point2 = map.latLngToContainerPoint(pos2);
|
||||
|
||||
// Calculate direction vector
|
||||
const dx = point2.x - point1.x;
|
||||
const dy = point2.y - point1.y;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
// If the points are too close, do not render
|
||||
if (distance <= 2*insetPixels) {
|
||||
setInsetPositions(null);
|
||||
return;
|
||||
}
|
||||
|
||||
// Normalize direction vector
|
||||
const unitX = dx / distance;
|
||||
const unitY = dy / distance;
|
||||
|
||||
// Calculate new start and end points in screen coordinates
|
||||
const newStartPoint = {
|
||||
x: point1.x + (unitX * insetPixels),
|
||||
y: point1.y + (unitY * insetPixels)
|
||||
};
|
||||
|
||||
const newEndPoint = {
|
||||
x: point2.x - (unitX * insetPixels),
|
||||
y: point2.y - (unitY * insetPixels)
|
||||
};
|
||||
|
||||
// Convert back to lat/lng
|
||||
const newStartLatLng = map.containerPointToLatLng(newStartPoint);
|
||||
const newEndLatLng = map.containerPointToLatLng(newEndPoint);
|
||||
|
||||
setInsetPositions([[newStartLatLng.lat, newStartLatLng.lng], [newEndLatLng.lat, newEndLatLng.lng]]);
|
||||
};
|
||||
|
||||
updateInsetLine();
|
||||
|
||||
// Update when map moves or zooms
|
||||
map.on('zoom move', updateInsetLine);
|
||||
|
||||
return () => map.off('zoom move', updateInsetLine);
|
||||
}, [pos1, pos2]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!display || !insetPositions) return;
|
||||
|
||||
// Create the base polyline
|
||||
const polyline = L.polyline(insetPositions, {
|
||||
color: color,
|
||||
weight: weight
|
||||
}).addTo(map);
|
||||
|
||||
// Create the arrow decorator
|
||||
const decorator = L.polylineDecorator(polyline, {
|
||||
patterns: [{
|
||||
offset: '100%',
|
||||
repeat: 0,
|
||||
symbol: L.Symbol.arrowHead({
|
||||
pixelSize: arrowSize,
|
||||
polygon: false,
|
||||
pathOptions: {
|
||||
stroke: true,
|
||||
weight: weight,
|
||||
color: color
|
||||
}
|
||||
})
|
||||
}]
|
||||
}).addTo(map);
|
||||
|
||||
// Cleanup function
|
||||
return () => {
|
||||
map.removeLayer(polyline);
|
||||
map.removeLayer(decorator);
|
||||
};
|
||||
}, [display, insetPositions])
|
||||
|
||||
return null;
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
|
||||
|
||||
export function List({array, selectedId, onSelected, children}) {
|
||||
const canSelect = selectedId !== undefined
|
||||
const cursor = () => canSelect ? " cursor-pointer" : "";
|
||||
const outline = (id) => canSelect && id === selectedId ? " outline outline-4 outline-black" : "";
|
||||
|
||||
return (
|
||||
<div className='w-full h-full bg-gray-300 overflow-y-scroll'>
|
||||
<ul className="w-full p-1 pb-0">
|
||||
{array?.map((elem, i) => (
|
||||
<li className="w-full" key={elem.id}>
|
||||
<div className={"w-full" + cursor() + outline(elem.id)} onClick={() => canSelect && onSelected(elem.id)}>
|
||||
{children(elem, i)}
|
||||
</div>
|
||||
<div className="w-full h-1"/>
|
||||
</li>
|
||||
)) ?? null}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ReorderList({droppableId, array, setArray, children}) {
|
||||
const [localArray, setLocalArray] = useState(array);
|
||||
|
||||
useEffect(() => {
|
||||
setLocalArray(array);
|
||||
}, [array])
|
||||
|
||||
function reorder(list, startIndex, endIndex) {
|
||||
const result = Array.from(list);
|
||||
const [removed] = result.splice(startIndex, 1);
|
||||
result.splice(endIndex, 0, removed);
|
||||
return result;
|
||||
};
|
||||
|
||||
function onDragEnd(result) {
|
||||
if (!result.destination) return;
|
||||
if (result.destination.index === result.source.index) return;
|
||||
const newArray = reorder(array, result.source.index, result.destination.index);
|
||||
setLocalArray(newArray);
|
||||
setArray(newArray);
|
||||
}
|
||||
|
||||
return (
|
||||
<DragDropContext onDragEnd={onDragEnd} >
|
||||
<Droppable droppableId={droppableId}>
|
||||
{provided => (
|
||||
<div className='w-full h-full bg-gray-300 overflow-y-scroll' ref={provided.innerRef} {...provided.droppableProps}>
|
||||
<ul className="w-full p-1 pb-0">
|
||||
{localArray?.map((elem, i) => (
|
||||
<li className='w-full' key={elem.id}>
|
||||
<Draggable draggableId={elem.id.toString()} index={i}>
|
||||
{provided => (
|
||||
<div className='w-full cursor-grab' {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
|
||||
{children(elem, i)}
|
||||
<div className="w-full h-1"/>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
</li>
|
||||
)) ?? null}
|
||||
</ul>
|
||||
{provided.placeholder}
|
||||
</div>
|
||||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
);
|
||||
}
|
||||
@@ -1,164 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { MapContainer, TileLayer, useMap } from "react-leaflet";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import { mapLocations, mapZooms, mapStyles } from "@/util/configurations";
|
||||
|
||||
export function MapPan({center, zoom, animate=false}) {
|
||||
const map = useMap();
|
||||
|
||||
useEffect(() => {
|
||||
if (center && zoom) {
|
||||
map.flyTo(center, zoom, { animate: animate });
|
||||
}
|
||||
}, [center, zoom]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export function MapEventListener({ onLeftClick, onRightClick, onMouseMove, onDragStart, onWheel }) {
|
||||
const map = useMap();
|
||||
// TODO use useMapEvents instead of this + detect when zoom
|
||||
|
||||
// Handle the mouse click left
|
||||
useEffect(() => {
|
||||
if (!onLeftClick) return;
|
||||
|
||||
let moved = false;
|
||||
let downButton = null;
|
||||
|
||||
const handleMouseDown = (e) => {
|
||||
moved = false;
|
||||
downButton = e.originalEvent.button;
|
||||
};
|
||||
|
||||
const handleMouseMove = () => {
|
||||
moved = true;
|
||||
};
|
||||
|
||||
const handleMouseUp = (e) => {
|
||||
if (!moved) {
|
||||
if (downButton == 0) {
|
||||
onLeftClick(e);
|
||||
}
|
||||
}
|
||||
downButton = null;
|
||||
};
|
||||
|
||||
map.on('mousedown', handleMouseDown);
|
||||
map.on('mousemove', handleMouseMove);
|
||||
map.on('mouseup', handleMouseUp);
|
||||
|
||||
return () => {
|
||||
map.off('mousedown', handleMouseDown);
|
||||
map.off('mousemove', handleMouseMove);
|
||||
map.off('mouseup', handleMouseUp);
|
||||
};
|
||||
}, [onLeftClick, onRightClick]);
|
||||
|
||||
// Handle the right click
|
||||
useEffect(() => {
|
||||
if (!onRightClick) return;
|
||||
|
||||
const handleMouseDown = (e) => {
|
||||
if (e.originalEvent.button == 2) {
|
||||
onRightClick(e);
|
||||
}
|
||||
};
|
||||
|
||||
map.on('mousedown', handleMouseDown);
|
||||
|
||||
return () => {
|
||||
map.off('mousedown', handleMouseDown);
|
||||
}
|
||||
}, [onRightClick]);
|
||||
|
||||
// Handle the mouse move
|
||||
useEffect(() => {
|
||||
if (!onMouseMove) return;
|
||||
|
||||
map.on('mousemove', onMouseMove);
|
||||
|
||||
return () => {
|
||||
map.off('mousemove', onMouseMove);
|
||||
}
|
||||
}, [onMouseMove]);
|
||||
|
||||
// Handle the drag start
|
||||
useEffect(() => {
|
||||
if (!onDragStart) return;
|
||||
|
||||
map.on('dragstart', onDragStart);
|
||||
|
||||
return () => {
|
||||
map.off('dragstart', onDragStart);
|
||||
}
|
||||
}, [onDragStart]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!onWheel) return;
|
||||
|
||||
const container = map.getContainer();
|
||||
container.addEventListener('wheel', onWheel);
|
||||
|
||||
return () => {
|
||||
container.removeEventListener('wheel', onWheel);
|
||||
}
|
||||
}, [onWheel]);
|
||||
|
||||
// Prevent right click context menu
|
||||
useEffect(() => {
|
||||
const container = map.getContainer();
|
||||
const preventContextMenu = (e) => e.preventDefault();
|
||||
container.addEventListener('contextmenu', preventContextMenu);
|
||||
return () => container.removeEventListener('contextmenu', preventContextMenu);
|
||||
}, []);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function MapResizeWatcher() {
|
||||
const map = useMap();
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new ResizeObserver(() => {
|
||||
map.invalidateSize();
|
||||
});
|
||||
observer.observe(map.getContainer());
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [map]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export function CustomMapContainer({mapStyle, children}) {
|
||||
const [location, setLocation] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!navigator.geolocation) {
|
||||
console.log('Geolocation not supported');
|
||||
return;
|
||||
}
|
||||
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(pos) => {
|
||||
setLocation([pos.coords.latitude, pos.coords.longitude]);
|
||||
},
|
||||
(err) => console.log("Error :", err),
|
||||
{
|
||||
enableHighAccuracy: true,
|
||||
timeout: 10000,
|
||||
maximumAge: 0
|
||||
}
|
||||
);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<MapContainer className='w-full h-full' center={mapLocations.paris} zoom={mapZooms.low} scrollWheelZoom={true}>
|
||||
<TileLayer url={(mapStyle || mapStyles.default).url} attribution={(mapStyle || mapStyles.default).attribution}/>
|
||||
<MapPan center={location} zoom={mapZooms.high}/>
|
||||
<MapResizeWatcher/>
|
||||
{children}
|
||||
</MapContainer>
|
||||
)
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
export function Section({title, outerClassName, innerClassName, children}) {
|
||||
return (
|
||||
<div className={outerClassName}>
|
||||
<div className='w-full h-full flex flex-col shadow-2xl'>
|
||||
{title &&
|
||||
<div className='w-full p-1 bg-custom-light-blue text-center'>
|
||||
<h2 className="text-l">{title}</h2>
|
||||
</div>
|
||||
}
|
||||
<div className='w-full flex-1 min-h-0 p-3 bg-white'>
|
||||
<div className={`w-full h-full ${innerClassName}`}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
"use client";
|
||||
import { createContext, useContext, useMemo } from "react";
|
||||
import { useSocket } from "./socketContext";
|
||||
import useSocketAuth from "@/hook/useSocketAuth";
|
||||
import usePasswordProtect from "@/hook/usePasswordProtect";
|
||||
|
||||
const adminConnexionContext = createContext();
|
||||
|
||||
export function AdminConnexionProvider({ children }) {
|
||||
const { adminSocket } = useSocket();
|
||||
const { login, loggedIn, loading } = useSocketAuth(adminSocket, "admin_password");
|
||||
const useProtect = () => usePasswordProtect("/admin/login", "/admin", loading, loggedIn);
|
||||
|
||||
const value = useMemo(() => ({ login, loggedIn, loading, useProtect }), [loggedIn, loading]);
|
||||
|
||||
return (
|
||||
<adminConnexionContext.Provider value={value}>
|
||||
{children}
|
||||
</adminConnexionContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useAdminConnexion() {
|
||||
return useContext(adminConnexionContext);
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
"use client";
|
||||
import { createContext, useContext, useMemo, useState } from "react";
|
||||
import { useSocket } from "./socketContext";
|
||||
import useSocketListener from "@/hook/useSocketListener";
|
||||
import { GameState } from "@/util/types";
|
||||
|
||||
const adminContext = createContext();
|
||||
|
||||
export function AdminProvider({ children }) {
|
||||
const { adminSocket } = useSocket();
|
||||
// teams
|
||||
const [teams, setTeams] = useState([]);
|
||||
// game_state
|
||||
const [gameState, setGameState] = useState(GameState.SETUP);
|
||||
const [startDate, setStartDate] = useState(null);
|
||||
// current_zone
|
||||
const [zoneType, setZoneType] = useState(null);
|
||||
const [zoneExtremities, setZoneExtremities] = useState(null);
|
||||
const [nextZoneDate, setNextZoneDate] = useState(null);
|
||||
// settings
|
||||
const [messages, setMessages] = useState(null);
|
||||
const [zoneSettings, setZoneSettings] = useState(null)
|
||||
const [sendPositionDelay, setSendPositionDelay] = useState(null);
|
||||
const [outOfZoneDelay, setOutOfZoneDelay] = useState(null);
|
||||
|
||||
useSocketListener(adminSocket, "teams", setTeams);
|
||||
|
||||
useSocketListener(adminSocket, "game_state", (data) => {
|
||||
setGameState(data.state);
|
||||
setStartDate(data.date);
|
||||
});
|
||||
|
||||
useSocketListener(adminSocket, "current_zone", (data) => {
|
||||
setZoneExtremities({begin: data.begin, end: data.end});
|
||||
setNextZoneDate(data.endDate);
|
||||
});
|
||||
|
||||
useSocketListener(adminSocket, "settings", (data) => {
|
||||
setMessages(data.messages);
|
||||
setZoneSettings(data.zone);
|
||||
setZoneType(data.zone.type);
|
||||
setSendPositionDelay(data.sendPositionDelay);
|
||||
setOutOfZoneDelay(data.outOfZoneDelay);
|
||||
});
|
||||
|
||||
const value = useMemo(() => (
|
||||
{ zoneSettings, teams, gameState, zoneType, zoneExtremities, sendPositionDelay, outOfZoneDelay, messages, nextZoneDate, startDate }
|
||||
), [zoneSettings, teams, gameState, zoneType, zoneExtremities, sendPositionDelay, outOfZoneDelay, messages, nextZoneDate, startDate]);
|
||||
|
||||
return (
|
||||
<adminContext.Provider value={value}>
|
||||
{children}
|
||||
</adminContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useAdminContext() {
|
||||
return useContext(adminContext);
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
"use client";
|
||||
import { createContext, useContext, useMemo } from "react";
|
||||
import { env } from 'next-runtime-env';
|
||||
import { io } from 'socket.io-client';
|
||||
|
||||
const NEXT_PUBLIC_SOCKET_HOST = env("NEXT_PUBLIC_SOCKET_HOST");
|
||||
const SOCKET_URL = (NEXT_PUBLIC_SOCKET_HOST == "localhost" ? "ws://" : "wss://") + NEXT_PUBLIC_SOCKET_HOST;
|
||||
const ADMIN_SOCKET_URL = SOCKET_URL + "/admin";
|
||||
|
||||
export const adminSocket = io(ADMIN_SOCKET_URL, {
|
||||
path: "/back/socket.io",
|
||||
});
|
||||
|
||||
export const SocketContext = createContext();
|
||||
|
||||
export default function SocketProvider({ children }) {
|
||||
const value = useMemo(() => ({ adminSocket }), [adminSocket]);
|
||||
|
||||
return (
|
||||
<SocketContext.Provider value={value}>{children}</SocketContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useSocket() {
|
||||
return useContext(SocketContext);
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
"use client";
|
||||
import { useAdminContext } from "@/context/adminContext";
|
||||
import { useSocket } from "@/context/socketContext";
|
||||
|
||||
export default function useAdmin() {
|
||||
const adminContext = useAdminContext();
|
||||
const { teams } = adminContext;
|
||||
const { adminSocket } = useSocket();
|
||||
|
||||
function getTeam(teamId) {
|
||||
return teams.find(team => team.id === teamId);
|
||||
}
|
||||
|
||||
function addTeam(teamName) {
|
||||
adminSocket.emit("add_team", teamName);
|
||||
}
|
||||
|
||||
function removeTeam(teamId) {
|
||||
adminSocket.emit("remove_team", teamId);
|
||||
}
|
||||
|
||||
function reorderTeams(newOrder) {
|
||||
adminSocket.emit("reorder_teams", newOrder);
|
||||
}
|
||||
|
||||
function captureTeam(teamId) {
|
||||
adminSocket.emit("capture_team", teamId);
|
||||
}
|
||||
|
||||
function placementTeam(teamId, placementZone) {
|
||||
adminSocket.emit("placement_team", teamId, placementZone);
|
||||
}
|
||||
|
||||
function changeState(state) {
|
||||
adminSocket.emit("change_state", state);
|
||||
}
|
||||
|
||||
function updateSettings(settings) {
|
||||
adminSocket.emit("update_settings", settings);
|
||||
}
|
||||
|
||||
return { ...adminContext, getTeam, reorderTeams, addTeam, removeTeam, captureTeam, placementTeam, changeState, updateSettings };
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
"use client";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function useMapCircleDraw(circle, setCircle) {
|
||||
const [drawingCircle, setDrawingCircle] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
setDrawingCircle(null);
|
||||
}, [circle]);
|
||||
|
||||
function handleLeftClick(e) {
|
||||
if (drawingCircle) {
|
||||
setCircle(drawingCircle);
|
||||
setDrawingCircle(null);
|
||||
} else {
|
||||
setDrawingCircle({center: e.latlng, radius: 0});
|
||||
}
|
||||
}
|
||||
|
||||
function handleRightClick(e) {
|
||||
if (drawingCircle) {
|
||||
setDrawingCircle(null);
|
||||
} else if (e.latlng.distanceTo(circle.center) < circle.radius) {
|
||||
setCircle(null);
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseMove(e) {
|
||||
if (drawingCircle) {
|
||||
setDrawingCircle({center: drawingCircle.center, radius: e.latlng.distanceTo(drawingCircle.center)});
|
||||
}
|
||||
}
|
||||
|
||||
return { drawingCircle, handleLeftClick, handleRightClick, handleMouseMove };
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
"use client";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function useLocalStorage(key, initialValue) {
|
||||
const [storedValue, setStoredValue] = useState(initialValue);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
const item = window.localStorage.getItem(key);
|
||||
setStoredValue(item ? JSON.parse(item) : initialValue);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
const setValue = value => {
|
||||
try {
|
||||
const valueToStore = value instanceof Function ? value(storedValue) : value;
|
||||
setStoredValue(valueToStore);
|
||||
window.localStorage.setItem(key, JSON.stringify(valueToStore));
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
return [storedValue, setValue, loading];
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export default function useLocalVariable(variable, setVariable) {
|
||||
const [localVariable, setLocalVariable] = useState(variable);
|
||||
|
||||
useEffect(() => {
|
||||
setLocalVariable(variable);
|
||||
}, [variable]);
|
||||
|
||||
function applyLocalVariable() {
|
||||
setVariable(localVariable);
|
||||
}
|
||||
|
||||
return [localVariable, setLocalVariable, applyLocalVariable];
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
"use client";
|
||||
|
||||
export default function useMultipleCircleDraw(circles, addCircle, removeCircle, radius) {
|
||||
|
||||
function isBaddlyPlaced(latlng) {
|
||||
return circles.some(circle => latlng.distanceTo(circle.center) < 2 * circle.radius);
|
||||
}
|
||||
|
||||
function getCircleFromLatlng(latlng) {
|
||||
return circles.find(circle => latlng.distanceTo(circle.center) < circle.radius);
|
||||
}
|
||||
|
||||
function handleLeftClick(e) {
|
||||
if (!isBaddlyPlaced(e.latlng)) addCircle(e.latlng, radius);
|
||||
}
|
||||
|
||||
function handleRightClick(e) {
|
||||
const circle = getCircleFromLatlng(e.latlng);
|
||||
if (circle) removeCircle(circle.id);
|
||||
}
|
||||
|
||||
return { handleLeftClick, handleRightClick };
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
"use client";
|
||||
import { redirect, usePathname } from "next/navigation";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function usePasswordProtect(loginPath, redirectPath, loading, loggedIn) {
|
||||
const path = usePathname();
|
||||
|
||||
useEffect(() => {
|
||||
if (!loggedIn && !loading && path !== loginPath) {
|
||||
redirect(loginPath);
|
||||
}
|
||||
if(loggedIn && !loading && path === loginPath) {
|
||||
redirect(redirectPath);
|
||||
}
|
||||
}, [loggedIn, loading, path]);
|
||||
}
|
||||
@@ -1,214 +0,0 @@
|
||||
"use client";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useMap } from "react-leaflet";
|
||||
|
||||
export default function useMapPolygonDraw(polygons, addPolygon, removePolygon) {
|
||||
const map = useMap();
|
||||
const nodeCatchDistance = 30; // px
|
||||
const nodeHighlightDistance = 30; // px
|
||||
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;
|
||||
}
|
||||
|
||||
function layerDistance(latlng1, latlng2) {
|
||||
// Return the pixel distance between latlng1 and latlng2 as they appear on the map
|
||||
const {x: x1, y: y1} = map.latLngToLayerPoint(latlng1);
|
||||
const {x: x2, y: y2} = map.latLngToLayerPoint(latlng2);
|
||||
return Math.sqrt((x1 - x2)**2 + (y1 - y2)**2);
|
||||
}
|
||||
|
||||
function isDrawing() {
|
||||
return currentPolygon.length > 0;
|
||||
}
|
||||
|
||||
function areSegmentsIntersecting(p1, p2, p3, p4) {
|
||||
// Return true if the segments (p1, p2) and (p3, p4) are strictly intersecting, else false
|
||||
const direction = (a, b, c) => {
|
||||
return (c.lng - a.lng) * (b.lat - a.lat) - (b.lng - a.lng) * (c.lat - a.lat);
|
||||
};
|
||||
|
||||
const d1 = direction(p3, p4, p1);
|
||||
const d2 = direction(p3, p4, p2);
|
||||
const d3 = direction(p1, p2, p3);
|
||||
const d4 = direction(p1, p2, p4);
|
||||
|
||||
return ((d1 > 0 && d2 < 0) || (d1 < 0 && d2 > 0)) && ((d3 > 0 && d4 < 0) || (d3 < 0 && d4 > 0));
|
||||
}
|
||||
|
||||
function isIntersecting(segment, pointArray, isPolygon) {
|
||||
// Return true if segment intersects one of the pointArray segments according to areSegmentsIntersecting
|
||||
// Moreover if isPolygon, then it verifies if segment intersects the segment closing pointArray
|
||||
const length = pointArray.length;
|
||||
|
||||
for (let i = 0; i < length-1; i++) {
|
||||
if (areSegmentsIntersecting(segment[0], segment[1], pointArray[i], pointArray[i+1])) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
if (isPolygon && length > 2) {
|
||||
return areSegmentsIntersecting(segment[0], segment[1], pointArray[length-1], pointArray[0]);
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function isInPolygon(latlng, polygon) {
|
||||
// Return true if latlng is strictly inside polygon
|
||||
// Return false if latlng is outside polygon or on a vertex of the polygon
|
||||
// Return true or false if latlng is on the border
|
||||
if (latlngEqual(latlng, polygon[0])) return false;
|
||||
|
||||
const length = polygon.length;
|
||||
const {lat: x, lng: y} = latlng;
|
||||
let inside = false;
|
||||
|
||||
for (let i = 0, j = length - 1; i < length; j = i++) {
|
||||
if (latlngEqual(latlng, polygon[j])) return false;
|
||||
|
||||
const {lat: xi, lng: yi} = polygon[i];
|
||||
const {lat: xj, lng: yj} = polygon[j];
|
||||
const intersects = ((yi > y) !== (yj > y)) && (x < ((xj - xi) * (y - yi)) / (yj - yi) + xi);
|
||||
|
||||
if (intersects) inside = !inside;
|
||||
}
|
||||
|
||||
return inside;
|
||||
}
|
||||
|
||||
function isClockwise(points) {
|
||||
// Return true if the tab describes a clockwise polygon (Shoelace formula)
|
||||
let sum = 0;
|
||||
for (let i = 0; i < points.length; i++) {
|
||||
const curr = points[i];
|
||||
const next = points[(i + 1) % points.length];
|
||||
sum += (next.lng - curr.lng) * (next.lat + curr.lat);
|
||||
}
|
||||
return sum > 0;
|
||||
};
|
||||
|
||||
function getPolygonIndex(latlng) {
|
||||
// Return the index of the polygon where latlng is according to isInPolygon
|
||||
return polygons.findIndex(polygon => isInPolygon(latlng, polygon));
|
||||
}
|
||||
|
||||
function getEventLatLng(e) {
|
||||
// Return the closest latlng to e.latlng among the existing nodes including the first node of currentPolygon
|
||||
// If the closest distance is superior to nodeCatchDistance, then e.latlng is returned
|
||||
const closeNodes = [];
|
||||
// Existing nodes
|
||||
for (const polygon of polygons) {
|
||||
for (const node of polygon) {
|
||||
const d = layerDistance(e.latlng, node);
|
||||
if (d < nodeCatchDistance) {
|
||||
closeNodes.push([d, node]);
|
||||
}
|
||||
}
|
||||
}
|
||||
// First node of currentPolygon
|
||||
if (isDrawing()) {
|
||||
const d = layerDistance(e.latlng, currentPolygon[0]);
|
||||
if (d < nodeCatchDistance) {
|
||||
closeNodes.push([d, currentPolygon[0]]);
|
||||
}
|
||||
}
|
||||
// If there is no close node
|
||||
if (closeNodes.length == 0) {
|
||||
return e.latlng;
|
||||
// Else return the closest close node
|
||||
} else {
|
||||
return closeNodes.reduce( (min, current) => { return current[0] < min[0] ? current : min } )[1];
|
||||
}
|
||||
}
|
||||
|
||||
function handleLeftClick(e) {
|
||||
setHighlightNodes([]);
|
||||
const latlng = getEventLatLng(e);
|
||||
const length = currentPolygon.length;
|
||||
|
||||
// If it is the first node
|
||||
if (!isDrawing()) {
|
||||
// If the point is not in an existing polygon
|
||||
if (getPolygonIndex(latlng) == -1) {
|
||||
setCurrentPolygon([latlng]);
|
||||
}
|
||||
|
||||
// If it is the last node
|
||||
} else if (latlngEqual(latlng, currentPolygon[0])) {
|
||||
// If the current polygon is a polygon (at least 3 points)
|
||||
if (length >= 3) {
|
||||
// If the current polygon is not circling an existing polygon
|
||||
for (const polygon of polygons) {
|
||||
// meanPoint exists and is strictly inside polygon
|
||||
const meanPoint = {
|
||||
lat: (polygon[0].lat + polygon[1].lat + polygon[2].lat) / 3,
|
||||
lng: (polygon[0].lng + polygon[1].lng + polygon[2].lng) / 3
|
||||
};
|
||||
if (isInPolygon(meanPoint, currentPolygon)) return;
|
||||
}
|
||||
// Making the new polygon clockwise to simplify some algorithms
|
||||
if (!isClockwise(currentPolygon)) currentPolygon.reverse();
|
||||
addPolygon(currentPolygon);
|
||||
setCurrentPolygon([]);
|
||||
}
|
||||
|
||||
// If it is an intermediate node
|
||||
} else {
|
||||
// Is the polygon closing to early ?
|
||||
for (const point of currentPolygon) if (latlngEqual(point, latlng)) return;
|
||||
// Is the new point making the current polygon intersect with itself ?
|
||||
if (isIntersecting([latlng, currentPolygon[length-1]], currentPolygon, false)) return;
|
||||
// Is the new point inside a polygon ?
|
||||
if (getPolygonIndex(latlng) != -1) return;
|
||||
// Is the new point making the current polygon intersect with another polygon ?
|
||||
for (const polygon of polygons) {
|
||||
// Strict intersection
|
||||
if (isIntersecting([latlng, currentPolygon[length-1]], polygon, true)) return;
|
||||
// Intersection by joining two non adjacent nodes of polygon
|
||||
let tab = [-1, -1];
|
||||
for (let i = 0; i < polygon.length; i++) {
|
||||
if (latlngEqual(latlng, polygon[i])) tab[0] = i;
|
||||
if (latlngEqual(currentPolygon[length-1], polygon[i])) tab[1] = i;
|
||||
}
|
||||
if (
|
||||
tab[0] != -1 && tab[1] != -1 &&
|
||||
(tab[0] != (tab[1] + 1) % polygon.length) &&
|
||||
(tab[1] != (tab[0] + 1) % polygon.length)
|
||||
) return;
|
||||
}
|
||||
setCurrentPolygon([...currentPolygon, latlng]);
|
||||
}
|
||||
}
|
||||
|
||||
function handleRightClick(e) {
|
||||
setHighlightNodes([]);
|
||||
// If isDrawing, cancel the currentPolygon
|
||||
if (isDrawing()) {
|
||||
setCurrentPolygon([]);
|
||||
// If not isDrawing, remove the clicked polygon
|
||||
} else {
|
||||
const i = getPolygonIndex(e.latlng);
|
||||
if (i != -1) removePolygon(i);
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseMove(e) {
|
||||
const nodes = [];
|
||||
for (const polygon of polygons) {
|
||||
for (const node of polygon) {
|
||||
if (layerDistance(node, e.latlng) < nodeHighlightDistance && node != currentPolygon[0]) nodes.push(node);
|
||||
}
|
||||
}
|
||||
setHighlightNodes(nodes);
|
||||
}
|
||||
|
||||
return { currentPolygon, highlightNodes, handleLeftClick, handleRightClick, handleMouseMove };
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
"use client";
|
||||
import { useEffect, useState } from 'react';
|
||||
import useSocketListener from './useSocketListener';
|
||||
import useLocalStorage from './useLocalStorage';
|
||||
|
||||
const LOGIN_MESSAGE = "login";
|
||||
const LOGOUT_MESSAGE = "logout";
|
||||
const LOGIN_RESPONSE_MESSAGE = "login_response";
|
||||
|
||||
export default function useSocketAuth(socket, passwordName) {
|
||||
const [loggedIn, setLoggedIn] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [waitingForResponse, setWaitingForResponse] = useState(true);
|
||||
const [savedPassword, setSavedPassword, savedPasswordLoading] = useLocalStorage(passwordName, null);
|
||||
|
||||
useEffect(() => {
|
||||
if (savedPassword && !loggedIn) {
|
||||
console.log("Try to log with :", savedPassword);
|
||||
socket.emit(LOGIN_MESSAGE, savedPassword);
|
||||
}
|
||||
}, [savedPassword]);
|
||||
|
||||
function login(password) {
|
||||
setSavedPassword(password)
|
||||
}
|
||||
|
||||
function logout() {
|
||||
setSavedPassword(null);
|
||||
setLoggedIn(false);
|
||||
socket.emit(LOGOUT_MESSAGE)
|
||||
}
|
||||
|
||||
useSocketListener(socket, LOGIN_RESPONSE_MESSAGE, (loginResponse) => {
|
||||
setWaitingForResponse(false);
|
||||
setLoggedIn(loginResponse);
|
||||
console.log(loginResponse ? "Logged in" : "Not logged in");
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
//There is a password saved and we recieved a login response
|
||||
if(savedPassword && !waitingForResponse && !savedPasswordLoading) {
|
||||
setLoading(false);
|
||||
}
|
||||
//We tried to load the saved password but it is not there
|
||||
else if (savedPassword == null && !savedPasswordLoading) {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [waitingForResponse, savedPasswordLoading, savedPassword]);
|
||||
|
||||
|
||||
return {login, logout, password: savedPassword, loggedIn, loading};
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
"use client";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function useSocketListener(socket, event, callback) {
|
||||
useEffect(() => {
|
||||
socket.on(event,callback);
|
||||
return () => socket.off(event, callback);
|
||||
}, []);
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
},
|
||||
"lib": ["es2015"]
|
||||
}
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
|
||||
const nextConfig = {
|
||||
|
||||
output: 'standalone',
|
||||
|
||||
async redirects() {
|
||||
return [
|
||||
{
|
||||
source: '/',
|
||||
destination: '/admin',
|
||||
permanent: false, // The browser will not save the redirect in its cache
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
@@ -1,31 +0,0 @@
|
||||
{
|
||||
"name": "traque-front",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"author": "Quentin Roussel",
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@hello-pangea/dnd": "^16.6.0",
|
||||
"leaflet": "^1.9.4",
|
||||
"leaflet-defaulticon-compatibility": "^0.1.2",
|
||||
"leaflet-polylinedecorator": "^1.6.0",
|
||||
"next": "^14.2.9",
|
||||
"next-runtime-env": "^3.2.2",
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"react-leaflet": "^4.2.1",
|
||||
"socket.io-client": "^4.7.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.0.1",
|
||||
"eslint": "^8",
|
||||
"eslint-config-next": "14.1.4",
|
||||
"postcss": "^8",
|
||||
"tailwindcss": "^3.3.0"
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 514 B |
Binary file not shown.
|
Before Width: | Height: | Size: 650 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 149 B |
Binary file not shown.
|
Before Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 974 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 606 B |
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 850 B |
Binary file not shown.
|
Before Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 809 B |
Binary file not shown.
|
Before Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
@@ -1,26 +0,0 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'custom-green': '#19e119',
|
||||
'custom-red': '#e11919',
|
||||
'custom-orange': '#fa6400',
|
||||
'custom-blue': '#1e90ff',
|
||||
'custom-grey': '#808080',
|
||||
'custom-light-blue': '#80b3ff'
|
||||
}
|
||||
}
|
||||
},
|
||||
mode: 'jit',
|
||||
content: [
|
||||
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
fontFamily: {
|
||||
sans: ["Inter", "sans-serif"],
|
||||
serif: ["Merriweather", "serif"],
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
@@ -1,48 +0,0 @@
|
||||
import { ZoneTypes, Colors } from "./types";
|
||||
|
||||
export const mapLocations = {
|
||||
paris: [48.86, 2.33]
|
||||
}
|
||||
|
||||
export const mapZooms = {
|
||||
low: 4,
|
||||
high: 15,
|
||||
}
|
||||
|
||||
export const mapStyles = {
|
||||
default: {
|
||||
url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
|
||||
arrowColor: "black",
|
||||
currentZoneColor: "red",
|
||||
nextZoneColor: "green",
|
||||
placementZoneColor: "blue",
|
||||
playerColor: "blue"
|
||||
},
|
||||
satellite: {
|
||||
url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
|
||||
attribution: 'Tiles © Esri',
|
||||
arrowColor: "white",
|
||||
currentZoneColor: "red",
|
||||
nextZoneColor: "#0F0",
|
||||
placementZoneColor: "#0FF",
|
||||
playerColor: "blue"
|
||||
},
|
||||
}
|
||||
|
||||
export const defaultZoneSettings = {
|
||||
circle: {type: ZoneTypes.CIRCLE, min: null, max: null, reductionCount: 4, duration: 10},
|
||||
polygon: {type: ZoneTypes.POLYGON, polygons: []}
|
||||
}
|
||||
|
||||
export const teamStatus = {
|
||||
default: { label: "Indisponible", color: Colors.black },
|
||||
playing: { label: "En jeu", color: Colors.green },
|
||||
captured: { label: "Capturée", color: Colors.red },
|
||||
outofzone: { label: "Hors zone", color: Colors.orange },
|
||||
ready: { label: "Placée", color: Colors.green },
|
||||
notready: { label: "Non placée", color: Colors.red },
|
||||
waiting: { label: "En attente", color: Colors.grey },
|
||||
victory: { label: "Victoire", color: Colors.green },
|
||||
defeat: { label: "Défaite", color: Colors.red },
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
import { GameState } from './types';
|
||||
import { teamStatus } from './configurations';
|
||||
|
||||
export function getStatus(team, gamestate) {
|
||||
if (!team) return null;
|
||||
switch (gamestate) {
|
||||
case GameState.SETUP:
|
||||
return teamStatus.waiting;
|
||||
case GameState.PLACEMENT:
|
||||
return team.ready ? teamStatus.ready : teamStatus.notready;
|
||||
case GameState.PLAYING:
|
||||
return team.captured ? teamStatus.captured : team.outOfZone ? teamStatus.outofzone : teamStatus.playing;
|
||||
case GameState.FINISHED:
|
||||
return team.captured ? teamStatus.defeat : teamStatus.victory;
|
||||
default:
|
||||
return teamStatus.default;
|
||||
}
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
export const Colors = {
|
||||
black: "#000000",
|
||||
grey: "#808080",
|
||||
green: "#19e119",
|
||||
red: "#e11919",
|
||||
orange: "#fa6400"
|
||||
}
|
||||
|
||||
export const GameState = {
|
||||
SETUP: "setup",
|
||||
PLACEMENT: "placement",
|
||||
PLAYING: "playing",
|
||||
FINISHED: "finished"
|
||||
}
|
||||
|
||||
export const ZoneTypes = {
|
||||
CIRCLE: "circle",
|
||||
POLYGON: "polygon"
|
||||
}
|
||||
Reference in New Issue
Block a user