Restructuration of the project folders

server/docker-compose.dev.yaml

@@ -0,0 +1,32 @@
+services:
+  proxy:
+    build: ./proxy
+    restart: always
+    ports:
+      - "80:80"
+
+  front:
+    build:
+      context: ./traque-front
+      dockerfile: Dockerfile.dev
+    restart: always
+    volumes:
+      - ./traque-front:/app
+      - /app/node_modules
+    environment:
+      NEXT_PUBLIC_SOCKET_HOST: 'localhost'
+
+  back:
+    build:
+      context: ./traque-back
+      dockerfile: Dockerfile.dev
+    restart: always
+    ports:
+      - "3001:3001"
+    volumes:
+      - ./traque-back:/app
+      - /app/node_modules
+    environment:
+      ADMIN_PASSWORD_HASH: '23e3c6886ff8fcba302deac05c46612ed3af99e40a2a14252810f540f3c186aa'
+      HOST: '0.0.0.0'
+      PORT: 3001

server/docker-compose.yaml

@@ -0,0 +1,22 @@
+services:
+  proxy:
+    image: git.rezel.net/ludotech/traque-proxy:latest
+    ports:
+      - "80:80"
+    restart: always
+
+  front:
+    image: git.rezel.net/ludotech/traque-front:latest
+    restart: always
+    environment:
+      NEXT_PUBLIC_SOCKET_HOST: 'traque.rezel.net'
+
+  back:
+    image: git.rezel.net/ludotech/traque-back:latest
+    restart: always
+    ports:
+      - "3001:3001"
+    environment:
+      ADMIN_PASSWORD_HASH: '23e3c6886ff8fcba302deac05c46612ed3af99e40a2a14252810f540f3c186aa'
+      HOST: '0.0.0.0'
+      PORT: 3001

server/docs/TODO.md

@@ -0,0 +1,29 @@
+# TODO
+
+## Tâches
+
+- [x] Clarifier qui est qui sur l'interface.
+- [x] Clarifier qui chasse qui sur l'interface.
+- [x] Ajouter timer du rétrécissement des zones.
+- [x] Pouvoir changer les paramètres du jeu pendant une partie.
+- [x] Implémenter les wireframes
+- [x] Ajouter une région par défaut si pas de position
+- [x] Focus une team cliquée
+- [x] Refaire les flèches de chasse sur la map
+- [x] Pouvoir définir la zone de départ de chaque équipe
+- [x] Nommer les polygons par des lettres de l'alphabet
+- [x] Plein écran
+- [ ] Pouvoir faire pause dans la partie
+- [ ] Mettre en évidence le menu paramètre
+- [ ] Afficher un feedback quand un paramètre est sauvegardé
+- [ ] Améliorer le système de création zone (cercle et polygone)
+- [ ] Voir les traces et évènements des teams
+- [ ] Voir l'incertitude de position des teams
+- [ ] Faire un menu quand on arrive sur la traque
+- [ ] Pouvoir load des paramètres enregistrés
+- [ ] Penser l'affichage en fin de traque
+
+## Autres idées
+
+- Améliorer l'accessibilité (traduction anglaise notamment).
+- Améliorer l'UI.

server/docs/setup.md

@@ -0,0 +1,46 @@
+---
+lang: en-GB
+---
+
+# Set up server
+
+This tutorial will help you to start the servers for development or for production.
+
+## Table of Contents
+* [Docker](#docker) : Explaination and commands
+* [Start server](#start-server) : Development and deployment
+
+## Docker
+
+The server and the website use Docker. When the containers are up, you can access the website by searching for localhost on the web.
+
+Useful docker commands :
+
+- Create the containers : `docker compose -f {your-file.yaml} up`
+- Remove the containers : `docker compose down`
+- Add the `-d` flag to create the containers in the background
+- Stop the running containers : `docker compose stop`
+- Start the stopped containers : `docker compose start`
+- See all containers : `docker ps -a`
+- See all images : `docker images`
+- Remove an image : `docker rmi IMAGE_ID`
+
+## Start server
+
+### Development
+
+Use `docker compose -f docker-compose.dev.yaml up` to start the containers of the server in development mode so the changes made in the project take effect immediately. You can access the website by searching for `localhost` in your browser.
+
+### Deployment
+
+#### Update the server
+
+To update the server, you have to build the images of the containers on your computer and then push them on the docker of `git.rezel.net`. If it isn't the case, you have to login to the docker of git.rezel.net. To do that, go on `git.rezel.net` and create an access token for your account allowing writing package, repository and user, and save the token password. Then on your machine run `docker login git.rezel.net` and connect with your token password. Now, you can build and push the latest images on the remote by running `./scripts/build_push_images.sh`.
+
+#### Access the LXC container
+
+The server run on a rezel LXC container you can access [here](https://hosting.rezel.net/vms). Ask persmissions to an admin of the container to be able to connect to it via ssh : `ssh admin@2a09:6847:fa10:1410::207`.
+
+#### Start the server
+
+Run `docker compose -f docker-compose.yaml up -d` on the LXC container to start the containers. The website will be accesible on `traque.rezel.net`.

server/proxy/Dockerfile

@@ -0,0 +1,7 @@
+# nginx/Dockerfile
+
+FROM nginx:alpine
+
+COPY nginx.conf /etc/nginx/nginx.conf
+
+EXPOSE 80

server/proxy/nginx.conf

@@ -0,0 +1,28 @@
+# nginx/nginx.conf
+events {
+    worker_connections 1024;
+}
+
+http {
+    server {
+        listen 80;
+        client_max_body_size 15M;
+        access_log off;
+        location / {
+            proxy_pass http://front:3000/;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        }
+
+        location /back/ {
+            proxy_pass http://back:3001/;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "Upgrade";
+            proxy_set_header Host $host;
+        }
+    }
+}

server/scripts/build_push_images.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+version="2.0.0"
+repo="git.rezel.net/ludotech"
+services=("proxy:traque-proxy" "traque-front:traque-front" "traque-back:traque-back")
+
+for service in "${services[@]}"; do
+    path="${service%%:*}"
+    name="${service##*:}"
+    tag_latest="${repo}/${name}:latest"
+    tag_version="${repo}/${name}:${version}"
+
+    echo "--- Building & Pushing $name ---"
+    docker build -t "$tag_latest" -t "$tag_version" "$path"
+    docker push "$tag_latest"
+    docker push "$tag_version"
+done

server/traque-back/.dockerignore

@@ -0,0 +1,8 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git
+.vscode

server/traque-back/.gitignore

@@ -0,0 +1,138 @@
+ssl/*
+uploads/*
+#https dev certificates
+*.pem
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# Other
+trajectories/
+uploads/

server/traque-back/Dockerfile

@@ -0,0 +1,24 @@
+# Use Node 22 alpine as parent image
+FROM node:22-alpine
+
+# Change the working directory on the Docker image to /app
+WORKDIR /app
+
+# 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 . .
+
+# Create those folders if they don't already exist
+RUN if [ ! -d uploads ]; then mkdir uploads; fi
+RUN if [ ! -d trajectories ]; then mkdir trajectories; fi
+
+# Expose the port
+EXPOSE 3001
+
+# Start the application
+CMD ["npm", "run", "start"]

server/traque-back/Dockerfile.dev

@@ -0,0 +1,27 @@
+# Use Node 22 alpine as parent image
+FROM node:22-alpine
+
+# Change the working directory on the Docker image to /app
+WORKDIR /app
+
+# Change specified variables
+ENV NODE_ENV=development
+
+# 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 . .
+
+# Create those folders if they don't already exist
+RUN if [ ! -d uploads ]; then mkdir uploads; fi
+RUN if [ ! -d trajectories ]; then mkdir trajectories; fi
+
+# Expose the port
+EXPOSE 3001
+
+# Start the server in dev mode
+CMD ["npm", "run", "dev"]

server/traque-back/Makefile

@@ -0,0 +1,8 @@
+#Make a self signed certificate for development
+keys: key.pem server.crt
+
+key.pem csr.pem:
+	openssl req -newkey rsa:2048 -new -nodes -keyout key.pem -out csr.pem
+
+server.crt: key.pem csr.pem
+	openssl x509 -req -days 365 -in csr.pem -signkey key.pem -out server.crt

server/traque-back/admin_socket.js

@@ -0,0 +1,99 @@
+import { io } from "./index.js";
+import { createHash } from "crypto";
+import { config } from "dotenv";
+import game from "./game.js"
+import zoneManager from "./zone_manager.js"
+
+config();
+
+const ADMIN_PASSWORD_HASH = process.env.ADMIN_PASSWORD_HASH;
+
+export function secureAdminBroadcast(event, data) {
+    loggedInSockets.forEach(s => {
+        io.of("admin").to(s).emit(event, data);
+    });
+}
+
+let loggedInSockets = [];
+
+export function initAdminSocketHandler() {
+    io.of("admin").on("connection", (socket) => {
+        console.log("Connection of an admin");
+        let loggedIn = false;
+
+        const login = (password) => {
+            if (loggedIn) return false;
+            if (createHash('sha256').update(password).digest('hex') !== ADMIN_PASSWORD_HASH) return false;
+            loggedInSockets.push(socket.id);
+            loggedIn = true;
+            return true;
+        }
+
+        const logout = () => {
+            if (!loggedIn) return false;
+            loggedInSockets = loggedInSockets.filter(s => s !== socket.id);
+            loggedIn = false;
+            return true;
+        }
+
+        socket.on("disconnect", () => {
+            console.log("Disconnection of an admin");
+            logout();
+        });
+
+        socket.on("logout", () => {
+            logout();
+        });
+
+        socket.on("login", (password) => {
+            if (!login(password)) return;
+            socket.emit("teams", game.teams);
+            socket.emit("game_state", {
+                state: game.state,
+                date: game.startDate
+            });
+            socket.emit("current_zone", {
+                begin: zoneManager.getCurrentZone(),
+                end: zoneManager.getNextZone(),
+                endDate: zoneManager.currentZone?.endDate,
+            });
+            socket.emit("settings", game.getAdminSettings());
+            socket.emit("login_response", true);
+        });
+
+        socket.on("add_team", (teamName) => {
+            if (!loggedIn) return;
+            game.addTeam(teamName);
+        });
+
+        socket.on("remove_team", (teamId) => {
+            if (!loggedIn) return;
+            game.removeTeam(teamId);
+        });
+
+        socket.on("reorder_teams", (newOrder) => {
+            if (!loggedIn) return;
+            game.reorderTeams(newOrder);
+        });
+
+        socket.on("capture_team", (teamId) => {
+            if (!loggedIn) return;
+            game.switchCapturedTeam(teamId);
+        });
+
+        socket.on("placement_team", (teamId, placementZone) => {
+            if (!loggedIn) return;
+            game.placementTeam(teamId, placementZone);
+        });
+
+        socket.on("change_state", (state) => {
+            if (!loggedIn) return;
+            game.setState(state);
+        });
+
+        socket.on("update_settings", (settings) => {
+            if (!loggedIn) return;
+            game.changeSettings(settings);
+        });
+    });
+}

server/traque-back/game.js

@@ -0,0 +1,506 @@
+import { secureAdminBroadcast } from "./admin_socket.js";
+import { teamBroadcast, playersBroadcast, sendUpdatedTeamInformations } from "./team_socket.js";
+import { sendPositionTimeouts, outOfZoneTimeouts } from "./timeout_handler.js";
+import zoneManager from "./zone_manager.js";
+import trajectory from "./trajectory.js";
+
+function randint(max) {
+    return Math.floor(Math.random() * max);
+}
+
+function getDistanceFromLatLon({ lat: lat1, lng: lon1 }, { lat: lat2, lng: lon2 }) {
+    const degToRad = (deg) => deg * (Math.PI / 180);
+    var R = 6371; // Radius of the earth in km
+    var dLat = degToRad(lat2 - lat1);
+    var dLon = degToRad(lon2 - lon1);
+    var a =
+        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+        Math.cos(degToRad(lat1)) * Math.cos(degToRad(lat2)) *
+        Math.sin(dLon / 2) * Math.sin(dLon / 2)
+        ;
+    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+    var d = R * c; // Distance in km
+    return d * 1000;
+}
+
+function isInCircle(position, center, radius) {
+    return getDistanceFromLatLon(position, center) < radius;
+}
+
+export const GameState = {
+    SETUP: "setup",
+    PLACEMENT: "placement",
+    PLAYING: "playing",
+    FINISHED: "finished"
+}
+
+export default {
+    // List of teams, as objects. To see the fields see the addTeam method
+    teams: [],
+    // Current state of the game
+    state: GameState.SETUP,
+    // Date since the state changed
+    startDate: null,
+    // Messages
+    messages: {
+        waiting: "",
+        captured: "",
+        winner: "",
+        loser: "",
+    },
+
+
+
+    /* ------------------------------- USEFUL FUNCTIONS ------------------------------- */
+
+    getNewTeamId() {
+        let id = randint(1_000_000);
+        while (this.teams.find(t => t.id === id)) id = randint(1_000_000);
+        return id;
+    },
+
+    checkEndGame() {
+        if (this.teams.filter(team => !team.captured).length <= 2) this.setState(GameState.FINISHED);
+    },
+
+    updateChasingChain() {
+        const playingTeams = this.teams.filter(team => !team.captured);
+
+        for (let i = 0; i < playingTeams.length; i++) {
+            playingTeams[i].chasing = playingTeams[(i+1) % playingTeams.length].id;
+            playingTeams[i].chased = playingTeams[(playingTeams.length + i-1) % playingTeams.length].id;
+            sendUpdatedTeamInformations(playingTeams[i].id);
+        }
+    },
+
+    initLastSentLocations() {
+        const dateNow = Date.now();
+        // Update of lastSentLocation
+        for (const team of this.teams) {
+            team.lastSentLocation = team.currentLocation;
+            team.locationSendDeadline = dateNow + sendPositionTimeouts.delay * 60 * 1000;
+            sendPositionTimeouts.set(team.id);
+            sendUpdatedTeamInformations(team.id);
+        }
+        // Update of enemyLocation now we have the lastSentLocation of the enemy
+        for (const team of this.teams) {
+            team.enemyLocation = this.getTeam(team.chasing)?.lastSentLocation;
+            sendUpdatedTeamInformations(team.id);
+        }
+        // Broadcast new infos
+        secureAdminBroadcast("teams", this.teams);
+    },
+
+    resetTeamsInfos() {
+        for (const team of this.teams) {
+            // Chasing
+            team.captured = false;
+            team.chasing = null;
+            team.chased = null;
+            // Locations
+            team.lastSentLocation = null;
+            team.locationSendDeadline = null;
+            team.enemyLocation = null;
+            // Placement
+            team.ready = false;
+            // Zone
+            team.outOfZone = false;
+            team.outOfZoneDeadline = null;
+            team.hasHandicap = false;
+            // Stats
+            team.distance = 0;
+            team.nCaptures = 0;
+            team.nSentLocation = 0;
+            team.nObserved = 0;
+            team.finishDate = null;
+            sendUpdatedTeamInformations(team.id);
+        }
+        this.updateChasingChain();
+        secureAdminBroadcast("teams", this.teams);
+    },
+
+
+
+    /* ------------------------------- STATE AND SETTINGS FUNCTIONS ------------------------------- */
+
+    getAdminSettings() {
+        return {
+            messages: this.messages,
+            zone: zoneManager.settings,
+            sendPositionDelay: sendPositionTimeouts.delay,
+            outOfZoneDelay: outOfZoneTimeouts.delay
+        };
+    },
+
+    getPlayerSettings() {
+        return {
+            messages: this.messages,
+            zone: {type: zoneManager.settings.type},
+            sendPositionDelay: sendPositionTimeouts.delay,
+            outOfZoneDelay: outOfZoneTimeouts.delay
+        };
+    },
+
+    changeSettings(newSettings) {
+        if ("messages" in newSettings) this.messages = {...this.messages, ...newSettings.messages};
+        if ("zone" in newSettings) zoneManager.changeSettings(newSettings.zone);
+        if ("sendPositionDelay" in newSettings) sendPositionTimeouts.setDelay(newSettings.sendPositionDelay);
+        if ("outOfZoneDelay" in newSettings) outOfZoneTimeouts.setDelay(newSettings.outOfZoneDelay);
+        // Broadcast new infos
+        secureAdminBroadcast("settings", this.getAdminSettings());
+        playersBroadcast("settings", this.getPlayerSettings());
+    },
+
+    setState(newState) {
+        const dateNow = Date.now();
+        if (newState == this.state) return true;
+        switch (newState) {
+            case GameState.SETUP:
+                trajectory.stop();
+                zoneManager.stop();
+                sendPositionTimeouts.clearAll();
+                outOfZoneTimeouts.clearAll();
+                this.resetTeamsInfos();
+                this.startDate = null;
+                break;
+            case GameState.PLACEMENT:
+                if (this.state == GameState.FINISHED || this.teams.length < 3) {
+                    secureAdminBroadcast("game_state", {state: this.state, date: this.startDate});
+                    return false;
+                }
+                trajectory.stop();
+                zoneManager.stop();
+                sendPositionTimeouts.clearAll();
+                outOfZoneTimeouts.clearAll();
+                this.startDate = null;
+                break;
+            case GameState.PLAYING:
+                if (this.state == GameState.FINISHED || this.teams.length < 3) {
+                    secureAdminBroadcast("game_state", {state: this.state, date: this.startDate});
+                    return false;
+                }
+                trajectory.start();
+                zoneManager.start();
+                this.initLastSentLocations();
+                this.startDate = dateNow;
+                break;
+            case GameState.FINISHED:
+                if (this.state != GameState.PLAYING) {
+                    secureAdminBroadcast("game_state", {state: this.state, date: this.startDate});
+                    return false;
+                }
+                trajectory.stop();
+                zoneManager.stop();
+                sendPositionTimeouts.clearAll();
+                outOfZoneTimeouts.clearAll();
+                this.teams.forEach(team => {if (!team.finishDate) team.finishDate = dateNow});
+                secureAdminBroadcast("teams", this.teams);
+                break;
+        }
+        // Update the state
+        this.state = newState;
+        // Broadcast new infos
+        secureAdminBroadcast("game_state", {state: newState, date: this.startDate});
+        playersBroadcast("game_state", {state: newState, date: this.startDate});
+        return true;
+    },
+
+
+
+    /* ------------------------------- MANAGE PLAYERS FUNCTIONS ------------------------------- */
+
+    addPlayer(teamId, socketId) {
+        // Test of parameters
+        if (!this.hasTeam(teamId)) return false;
+        // Variables
+        const team = this.getTeam(teamId);
+        // Add the player
+        team.sockets.push(socketId);
+        // Broadcast new infos
+        secureAdminBroadcast("teams", this.teams);
+        return true;
+    },
+
+    removePlayer(teamId, socketId) {
+        // Test of parameters
+        if (!this.hasTeam(teamId)) return false;
+        // Variables
+        const team = this.getTeam(teamId);
+        // Remove the player and its data
+        if (this.isPlayerCapitain(teamId, socketId)) {
+            team.battery = null;
+            team.phoneModel = null;
+            team.phoneName = null;
+        }
+        team.sockets = team.sockets.filter((sid) => sid != socketId);
+        // Broadcast new infos
+        secureAdminBroadcast("teams", this.teams);
+        sendUpdatedTeamInformations(team.id);
+        return true;
+    },
+
+    isPlayerCapitain(teamId, socketId) {
+        return this.getTeam(teamId).sockets.indexOf(socketId) == 0;
+    },
+
+
+
+    /* ------------------------------- MANAGE TEAMS FUNCTIONS ------------------------------- */
+
+    getTeam(teamId) {
+        return this.teams.find(t => t.id === teamId);
+    },
+
+    hasTeam(teamId) {
+        return this.teams.some(t => t.id === teamId);
+    },
+
+    addTeam(teamName) {
+        this.teams.push({
+            // Identification
+            sockets: [],
+            name: teamName,
+            id: this.getNewTeamId(),
+            captureCode: randint(10_000),
+            // Chasing
+            captured: false,
+            chasing: null,
+            chased: null,
+            // Locations
+            lastSentLocation: null,
+            locationSendDeadline: null,
+            currentLocation: null,
+            lastCurrentLocationDate: null,
+            enemyLocation: null,
+            // Placement
+            startingArea: null,
+            ready: false,
+            // Zone
+            outOfZone: false,
+            outOfZoneDeadline: null,
+            hasHandicap: false,
+            // Stats
+            distance: 0,
+            nCaptures: 0,
+            nSentLocation: 0,
+            nObserved: 0,
+            finishDate: null,
+            // First socket infos
+            phoneModel: null,
+            phoneName: null,
+            battery: null,
+        });
+        this.updateChasingChain();
+        // Broadcast new infos
+        secureAdminBroadcast("teams", this.teams);
+        return true;
+    },
+
+    removeTeam(teamId) {
+        // Test of parameters
+        if (!this.hasTeam(teamId)) return false;
+        // Logout the team
+        teamBroadcast(teamId, "logout");
+        this.teams = this.teams.filter(t => t.id !== teamId);
+        sendPositionTimeouts.clear(teamId);
+        outOfZoneTimeouts.clear(teamId);
+        this.updateChasingChain();
+        this.checkEndGame();
+        // Broadcast new infos
+        secureAdminBroadcast("teams", this.teams);
+        return true;
+    },
+
+    updateTeam(teamId, newInfos) {
+        // Test of parameters
+        if (!this.hasTeam(teamId)) return false;
+        // Update
+        this.teams = this.teams.map(team => team.id == teamId ? {...team, ...newInfos} : team);
+        // Broadcast new infos
+        secureAdminBroadcast("teams", this.teams);
+        sendUpdatedTeamInformations(teamId);
+        return true;
+    },
+
+    switchCapturedTeam(teamId) {
+        // Test of parameters
+        if (!this.hasTeam(teamId)) return false;
+        // Variables
+        const team = this.getTeam(teamId);
+        const dateNow = Date.now();
+        // Switch team.captured
+        if (this.state != GameState.PLAYING) return false;
+        if (team.captured) {
+            team.captured = false;
+            team.finishDate = null;
+            team.lastSentLocation = team.currentLocation;
+            team.locationSendDeadline = dateNow + sendPositionTimeouts.delay * 60 * 1000;
+            sendPositionTimeouts.set(team.id);
+        } else {
+            team.captured = true;
+            team.finishDate = dateNow;
+            team.chasing = null;
+            team.chased = null;
+            sendPositionTimeouts.clear(team.id);
+            outOfZoneTimeouts.clear(team.id);
+        }
+        this.updateChasingChain();
+        this.checkEndGame();
+        // Broadcast new infos
+        secureAdminBroadcast("teams", this.teams);
+        sendUpdatedTeamInformations(team.id);
+        return true;
+    },
+
+    placementTeam(teamId, placementZone) {
+        // Test of parameters
+        if (!this.hasTeam(teamId)) return false;
+        // Variables
+        const team = this.getTeam(teamId);
+        // Make the capture
+        team.startingArea = placementZone;
+        // Broadcast new infos
+        secureAdminBroadcast("teams", this.teams);
+        sendUpdatedTeamInformations(team.id);
+        return true;
+    },
+
+    reorderTeams(newOrder) {
+        // Update teams
+        const teamMap = new Map(this.teams.map(team => [team.id, team]));
+        this.teams = newOrder.map(id => teamMap.get(id));
+        this.updateChasingChain();
+        // Broadcast new infos
+        secureAdminBroadcast("teams", this.teams);
+        return true;
+    },
+
+    handicapTeam(teamId) {
+        // Test of parameters
+        if (!this.hasTeam(teamId)) return false;
+        // Variables
+        const team = this.getTeam(teamId);
+        // Make the capture
+        team.hasHandicap = true;
+        sendPositionTimeouts.clear(team.id);
+        // Broadcast new infos
+        secureAdminBroadcast("teams", this.teams);
+        sendUpdatedTeamInformations(team.id);
+        return true;
+    },
+
+
+
+    /* ------------------------------- PLAYERS ACTIONS FUNCTIONS ------------------------------- */
+
+    updateLocation(teamId, location) {
+        // Test of parameters
+        if (!this.hasTeam(teamId)) return false;
+        if (!this.hasTeam(this.getTeam(teamId).chasing)) return false;
+        if (!location) return false;
+        // Variables
+        const team = this.getTeam(teamId);
+        const enemyTeam = this.getTeam(team.chasing);
+        const dateNow = Date.now();
+        // Update distance
+        if (this.state == GameState.PLAYING && team.currentLocation) {
+            team.distance += Math.floor(getDistanceFromLatLon({lat: location[0], lng: location[1]}, {lat: team.currentLocation[0], lng: team.currentLocation[1]}));
+        }
+        // Update of currentLocation
+        team.currentLocation = location;
+        team.lastCurrentLocationDate = dateNow;
+        if (this.state == GameState.PLAYING && team.hasHandicap) {
+            team.lastSentLocation = team.currentLocation;
+        }
+        // Update of enemyLocation
+        if (this.state == GameState.PLAYING && enemyTeam.hasHandicap) {
+            team.enemyLocation = enemyTeam.currentLocation;
+        }
+        // Update of ready
+        if (this.state == GameState.PLACEMENT && team.startingArea) {
+            team.ready = isInCircle({ lat: location[0], lng: location[1] }, team.startingArea.center, team.startingArea.radius);
+        }
+        // Update out of zone
+        if (this.state == GameState.PLAYING) {
+            const teamCurrentlyOutOfZone = !zoneManager.isInZone({ lat: location[0], lng: location[1] })
+            if (teamCurrentlyOutOfZone && !team.outOfZone) {
+                team.outOfZone = true;
+                team.outOfZoneDeadline = dateNow + outOfZoneTimeouts.delay * 60 * 1000;
+                outOfZoneTimeouts.set(teamId);
+            } else if (!teamCurrentlyOutOfZone && team.outOfZone) {
+                team.outOfZone = false;
+                team.outOfZoneDeadline = null;
+                team.hasHandicap = false;
+                if (!sendPositionTimeouts.has(team.id)) {
+                    team.locationSendDeadline = dateNow + sendPositionTimeouts.delay * 60 * 1000;
+                    sendPositionTimeouts.set(team.id);
+                }
+                outOfZoneTimeouts.clear(teamId);
+            }
+        }
+        // Broadcast new infos
+        secureAdminBroadcast("teams", this.teams);
+        sendUpdatedTeamInformations(team.id);
+        // Update of events of the game
+        trajectory.writePosition(dateNow, team.id, location[0], location[1]);
+        return true;
+    },
+    
+    sendLocation(teamId) {
+        // Conditions
+        if (this.state != GameState.PLAYING) return false;
+        // Test of parameters
+        if (!this.hasTeam(teamId)) return false;
+        if (!this.hasTeam(this.getTeam(teamId).chasing)) return false;
+        // Variables
+        const team = this.getTeam(teamId);
+        const enemyTeam = this.getTeam(team.chasing);
+        const dateNow = Date.now();
+        // Update team
+        team.nSentLocation++;
+        team.lastSentLocation = team.currentLocation;
+        team.enemyLocation = enemyTeam.lastSentLocation;
+        team.locationSendDeadline = dateNow + sendPositionTimeouts.delay * 60 * 1000;
+        sendPositionTimeouts.set(team.id);
+        // Update enemy
+        enemyTeam.nObserved++;
+        // Broadcast new infos
+        secureAdminBroadcast("teams", this.teams);
+        sendUpdatedTeamInformations(team.id);
+        sendUpdatedTeamInformations(enemyTeam.id);
+        // Update of events of the game
+        trajectory.writeSeePosition(dateNow, team.id, enemyTeam.id);
+        return true;
+    },
+
+    tryCapture(teamId, captureCode) {
+        // Conditions
+        if (this.state != GameState.PLAYING) return false;
+        // Test of parameters
+        if (!this.hasTeam(teamId)) return false;
+        if (!this.hasTeam(this.getTeam(teamId).chasing)) return false;
+        // Variables
+        const team = this.getTeam(teamId);
+        const enemyTeam = this.getTeam(team.chasing);
+        const dateNow = Date.now();
+        // Verify the capture
+        if (enemyTeam.captureCode != captureCode) return false;
+        // Make the capture
+        team.nCaptures++;
+        enemyTeam.captured = true;
+        enemyTeam.finishDate = dateNow;
+        enemyTeam.chasing = null;
+        enemyTeam.chased = null;
+        sendPositionTimeouts.clear(enemyTeam.id);
+        outOfZoneTimeouts.clear(enemyTeam.id);
+        this.updateChasingChain();
+        this.checkEndGame();
+        // Broadcast new infos
+        secureAdminBroadcast("teams", this.teams);
+        sendUpdatedTeamInformations(team.id);
+        sendUpdatedTeamInformations(enemyTeam.id);
+        // Update of events of the game
+        trajectory.writeCapture(dateNow, team.id, enemyTeam.id);
+        return true;
+    },
+}

server/traque-back/index.js

@@ -0,0 +1,30 @@
+import { createServer } from "http";
+import express from "express";
+import { Server } from "socket.io";
+import { config } from "dotenv";
+import { initAdminSocketHandler } from "./admin_socket.js";
+import { initTeamSocket } from "./team_socket.js";
+import { initPhotoUpload } from "./photo.js";
+
+config();
+const HOST = process.env.HOST;
+const PORT = process.env.PORT;
+
+export const app = express();
+
+const httpServer = createServer({}, app);
+
+httpServer.listen(PORT, HOST, () => {
+  console.log("Server running on http://" + HOST + ":" + PORT);
+});
+
+export const io = new Server(httpServer, {
+  cors: {
+    origin: "*",
+    methods: ["GET", "POST"]
+  }
+});
+
+initAdminSocketHandler();
+initTeamSocket();
+initPhotoUpload();

server/traque-back/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "traque-back",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node index.js",
+    "dev": "nodemon index.js"
+  },
+  "author": "Quentin Roussel",
+  "license": "ISC",
+  "type": "module",
+  "dependencies": {
+    "dotenv": "^16.4.5",
+    "express": "^4.19.2",
+    "multer": "^1.4.5-lts.1",
+    "random-location": "^1.1.3",
+    "socket.io": "^4.7.5"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.10"
+  }
+}

server/traque-back/photo.js

@@ -0,0 +1,83 @@
+/*
+This module manages the handler for uploading photos, as well as serving the correct file on requests based on the team ID and current game state
+*/
+import { app } from "./index.js";
+import multer from "multer";
+import fs from "fs";
+import path from "path";
+import game from "./game.js";
+const UPLOAD_DIR = "uploads/"
+const ALLOWED_MIME = [
+    "image/png",
+    "image/jpeg",
+    "image/gif"
+]
+
+// Setup multer (the file upload middleware)
+const storage = multer.diskStorage({
+    // Save the file in the uploads directory
+    destination: function (req, file, callback) {
+        callback(null, UPLOAD_DIR);
+    },
+    // Save the file with the team ID as the filename
+    filename: function (req, file, callback) {
+        callback(null, req.query.team);
+    }
+});
+
+const upload = multer({
+    storage,
+    // Only upload the file if it is a valid mime type and the team POST parameter is a valid team
+    fileFilter: function (req, file, callback) {
+        if (ALLOWED_MIME.indexOf(file.mimetype) == -1) {
+            callback(null, false);
+        } else if (!game.getTeam(Number(req.query.team))) {
+            callback(null, false);
+        } else {
+            callback(null, true);
+        }
+    }
+})
+
+// Clean the uploads directory
+function clean() {
+    const files = fs.readdirSync(UPLOAD_DIR);
+    for (const file of files) {
+        const filePath = path.join(UPLOAD_DIR, file);
+        fs.unlinkSync(filePath);
+    }
+}
+
+export function initPhotoUpload() {
+    clean();
+    //App handler for uploading a photo and saving it to a file
+    app.post("/upload", upload.single('file'), (req, res) => {
+        res.set("Access-Control-Allow-Origin", "*");
+        console.log("upload", req.query)
+        res.send("")
+    })
+    //App handler for serving the photo of a team given its secret ID
+    app.get("/photo/my", (req, res) => {
+        let team = game.getTeam(Number(req.query.team));
+        if (team) {
+            const imagePath = path.join(process.cwd(), UPLOAD_DIR, team.id.toString());
+            res.set("Content-Type", "image/png")
+            res.set("Access-Control-Allow-Origin", "*");
+            res.sendFile(fs.existsSync(imagePath) ? imagePath : path.join(process.cwd(), "images", "missing_image.jpg"));
+        } else {
+            res.status(400).send("Team not found")
+        }
+    })
+    //App handler for serving the photo of the team chased by the team given by its secret ID
+    app.get("/photo/enemy", (req, res) => {
+        let team = game.getTeam(Number(req.query.team));
+        if (team) {
+            const imagePath = path.join(process.cwd(), UPLOAD_DIR, team.chasing.toString());
+            res.set("Content-Type", "image/png")
+            res.set("Access-Control-Allow-Origin", "*");
+            res.sendFile(fs.existsSync(imagePath) ? imagePath : path.join(process.cwd(), "images", "missing_image.jpg"));
+        } else {
+            res.status(400).send("Team not found")
+        }
+    })
+}

server/traque-back/team_socket.js

@@ -0,0 +1,147 @@
+/*
+This file manages team access to the server via websocket.
+It receives messages, checks permissions, manages authentication and performs actions by calling functions from other modules.
+This module also exposes functions to send messages via socket to all teams
+*/
+import { io } from "./index.js";
+import game from "./game.js";
+import zoneManager from "./zone_manager.js";
+
+/**
+ * Send a socket message to all the players of a team
+ * @param {String} teamId The team that will receive the message
+ * @param {String} event Event name
+ * @param {*} data The payload
+ */
+export function teamBroadcast(teamId, event, data) {
+    game.getTeam(teamId).sockets.forEach(socketId => io.of("player").to(socketId).emit(event, data));
+}
+
+/**
+ * Send a message to all logged in players 
+ * @param {String} event Event name
+ * @param {String} data payload
+ */
+export function playersBroadcast(event, data) {
+    game.teams.forEach(team => teamBroadcast(team.id, event, data));
+}
+
+/**
+ * Send a socket message to all the players of a team
+ * @param {String} teamId The team that will receive the message
+ */
+export function sendUpdatedTeamInformations(teamId) {
+    // Test of parameters
+    if (!game.hasTeam(teamId)) return false;
+    // Variables
+    const team = game.getTeam(teamId);
+    const enemyTeam = game.getTeam(team.chasing);
+    teamBroadcast(teamId, "update_team", {
+        // Identification
+        name: team.name,
+        captureCode: team.captureCode,
+        // Chasing
+        captured: team.captured,
+        enemyName: enemyTeam?.name,
+        // Locations
+        lastSentLocation: team.lastSentLocation,
+        enemyLocation: team.enemyLocation,
+        // Placement phase
+        startingArea: team.startingArea,
+        ready: team.ready,
+        // Constraints
+        outOfZone: team.outOfZone,
+        outOfZoneDeadline: team.outOfZoneDeadline,
+        locationSendDeadline: team.locationSendDeadline,
+        hasHandicap: team.hasHandicap,
+        enemyHasHandicap: enemyTeam?.hasHandicap,
+        // Stats
+        distance: team.distance,
+        nCaptures: team.nCaptures,
+        nSentLocation: team.nSentLocation,
+        finishDate: team.finishDate,
+    });
+}
+
+export function initTeamSocket() {
+    io.of("player").on("connection", (socket) => {
+        console.log("Connection of a player");
+        let teamId = null;
+
+        const login = (loginTeamId) => {
+            logout();
+            if (!game.addPlayer(loginTeamId, socket.id)) return false;
+            teamId = loginTeamId;
+            return true;
+        }
+
+        const logout = () => {
+            if (!teamId) return;
+            game.removePlayer(teamId, socket.id);
+            teamId = null;
+        }
+
+        socket.on("disconnect", () => {
+            console.log("Disconnection of a player");
+            logout();
+        });
+
+        socket.on("logout", () => {
+            logout();
+        });
+
+        socket.on("login", (loginTeamId, callback) => {
+            if (!login(loginTeamId)) {
+                callback({ isLoggedIn: false, message: "Login denied" });
+                return;
+            }
+            sendUpdatedTeamInformations(loginTeamId);
+            socket.emit("game_state", {
+                state: game.state,
+                date: game.startDate
+            });
+            socket.emit("current_zone", {
+                begin: zoneManager.getCurrentZone(),
+                end: zoneManager.getNextZone(),
+                endDate: zoneManager.currentZone?.endDate,
+            });
+            socket.emit("settings", game.getPlayerSettings());
+            callback({ isLoggedIn : true, message: "Logged in"});
+        });
+
+        socket.on("update_position", (position) => {
+            if (!teamId) return;
+            if (game.isPlayerCapitain(teamId, socket.id)) {
+                game.updateLocation(teamId, position);
+            }
+        });
+
+        socket.on("send_position", () => {
+            if (!teamId) return;
+            game.sendLocation(teamId);
+        });
+
+        socket.on("capture", (captureCode, callback) => {
+            if (!teamId) return;
+            if (game.tryCapture(teamId, captureCode)) {
+                callback({ hasCaptured : true, message: "Capture successful" });
+            } else {
+                callback({ hasCaptured : false, message: "Capture denied" });
+            }
+        });
+
+        socket.on("device_info", (infos) => {
+            if (!teamId) return;
+            if (game.isPlayerCapitain(teamId, socket.id)) {
+                game.updateTeam(teamId, {phoneModel: infos.model, phoneName: infos.name});
+            }
+        });
+
+        socket.on("battery_update", (batteryLevel) => {
+            if (!teamId) return;
+            if (game.isPlayerCapitain(teamId, socket.id)) {
+                game.updateTeam(teamId, {battery: batteryLevel});
+            }
+        });
+    });
+}

server/traque-back/timeout_handler.js

@@ -0,0 +1,92 @@
+import game from "./game.js";
+
+class TimeoutManager {
+    constructor() {
+        this.timeouts = new Map();
+    }
+
+    has(key) {
+        return this.timeouts.has(key);
+    }
+
+    set(key, callback, delay) {
+        const newCallback = () => {
+            this.timeouts.delete(key);
+            callback();
+        }
+
+        if (this.timeouts.has(key)) clearTimeout(this.timeouts.get(key));
+        this.timeouts.set(key, setTimeout(newCallback, delay));
+    }
+
+    clear(key) {
+        if (this.timeouts.has(key)) {
+            clearTimeout(this.timeouts.get(key));
+            this.timeouts.delete(key);
+        }
+    }
+
+    clearAll() {
+        this.timeouts.forEach(timeout => clearTimeout(timeout));
+        this.timeouts = new Map();
+    }
+}
+
+export const sendPositionTimeouts = {
+    timeoutManager: new TimeoutManager(),
+    delay: 10, // Minutes
+
+    has(teamID) {
+        return this.timeoutManager.has(teamID);
+    },
+
+    set(teamID) {
+        const callback = () => {
+            game.sendLocation(teamID);
+            this.set(teamID);
+        }
+
+        this.timeoutManager.set(teamID, callback, this.delay * 60 * 1000);
+    },
+
+    clear(teamID) {
+        this.timeoutManager.clear(teamID);
+    },
+
+    clearAll() {
+        this.timeoutManager.clearAll();
+    },
+
+    setDelay(delay) {
+        this.delay = delay;
+    }
+}
+
+export const outOfZoneTimeouts = {
+    timeoutManager: new TimeoutManager(),
+    delay: 10, // Minutes
+
+    has(teamID) {
+        return this.timeoutManager.has(teamID);
+    },
+
+    set(teamID) {
+        const callback = () => {
+            game.handicapTeam(teamID);
+        }
+
+        this.timeoutManager.set(teamID, callback, this.delay * 60 * 1000);
+    },
+
+    clear(teamID) {
+        this.timeoutManager.clear(teamID);
+    },
+
+    clearAll() {
+        this.timeoutManager.clearAll();
+    },
+
+    setDelay(delay) {
+        this.delay = delay;
+    }
+}

server/traque-back/trajectory.js

@@ -0,0 +1,90 @@
+import fs from "fs";
+import path from "path";
+const UPLOAD_DIR = "trajectories";
+const EXTENSION = "txt";
+
+// Useful functions
+
+function teamIDToPath(teamID) {
+    return path.join(UPLOAD_DIR, teamID + "." + EXTENSION);
+}
+
+function dataToLine(...data) {
+    return data.join(',');
+}
+
+const errorFile = (err) => {
+    if (err) console.error("Error appending to file:", err);
+};
+
+function addLineToFile(teamID, line) {
+    // Insert the line in the file of teamID depending on the date (lines are sorted by date)
+    if (!fs.existsSync(teamIDToPath(teamID))) {
+        fs.writeFile(teamIDToPath(teamID), line + '\n', errorFile);
+    } else {
+        fs.readFile(teamIDToPath(teamID), 'utf8', (err, data) => {
+            if (err) {
+                errorFile(err);
+                return;
+            }
+            let lines = data.trim().split('\n');
+            const newDate = parseInt(line.split(',')[0], 10);
+            let insertIndex = lines.length;
+            for (let i = lines.length - 1; i >= 0; i--) {
+                const date = parseInt(lines[i].split(',')[0], 10);
+                if (date <= newDate) {
+                    insertIndex = i + 1;
+                    break;
+                }
+            }
+            lines.splice(insertIndex, 0, line);
+            fs.writeFile(teamIDToPath(teamID), lines.join('\n') + '\n', errorFile);
+        });
+    }
+}
+
+function initTrajectories() {
+    const files = fs.readdirSync(UPLOAD_DIR);
+    for (const file of files) fs.unlinkSync(path.join(UPLOAD_DIR, file));
+}
+
+// Export functions
+
+export default {
+    isRecording: false,
+
+    start() {
+        initTrajectories();
+        this.isRecording = true;
+    },
+
+    stop() {
+        this.isRecording = false;
+    },
+
+    writePosition(date, teamID, lon, lat) {
+        if (this.isRecording) {
+            addLineToFile(teamID, dataToLine(date, "position", lon, lat));
+        }
+    },
+
+    writeCapture(date, teamID, capturedTeamID) {
+        if (this.isRecording) {
+            addLineToFile(teamID, dataToLine(date, "capture", capturedTeamID));
+            addLineToFile(capturedTeamID, dataToLine(date, "captured", teamID));
+        }
+    },
+
+    writeSeePosition(date, teamID, seenTeamID) {
+        if (this.isRecording) {
+            addLineToFile(teamID, dataToLine(date, "see"));
+            addLineToFile(seenTeamID, dataToLine(date, "seen"));
+        }
+    },
+
+    writeOutOfZone(date, teamID, isOutOfZone) {
+        if (this.isRecording) {
+            addLineToFile(teamID, dataToLine(date, "zone", isOutOfZone));
+        }
+    },
+}

server/traque-back/zone_manager.js

@@ -0,0 +1,256 @@
+import { playersBroadcast } from './team_socket.js';
+import { secureAdminBroadcast } from './admin_socket.js';
+
+
+/* -------------------------------- Useful functions and constants -------------------------------- */
+
+const zoneTypes = {
+    circle: "circle",
+    polygon: "polygon"
+}
+
+const EARTH_RADIUS = 6_371_000; // Radius of the earth in m
+
+function haversine_distance({ lat: lat1, lng: lon1 }, { lat: lat2, lng: lon2 }) {
+    const degToRad = (deg) => deg * (Math.PI / 180);
+    const dLat = degToRad(lat2 - lat1);
+    const dLon = degToRad(lon2 - lon1);
+    const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(degToRad(lat1)) * Math.cos(degToRad(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
+    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+    return c * EARTH_RADIUS;
+}
+
+function latlngEqual(latlng1, latlng2, epsilon = 1e-9) {
+    return Math.abs(latlng1.lat - latlng2.lat) < epsilon && Math.abs(latlng1.lng - latlng2.lng) < epsilon;
+}
+
+
+/* -------------------------------- Circle zones -------------------------------- */
+
+const defaultCircleSettings = {type: zoneTypes.circle, min: null, max: null, reductionCount: 4, duration: 10}
+
+function circleZone(center, radius, duration) {
+    return {
+        type: zoneTypes.circle,
+        center: center,
+        radius: radius,
+        duration: duration,
+
+        isInZone(location) {
+            return haversine_distance(center, location) < this.radius;
+        }
+    }
+}
+
+function circleSettingsToZones(settings) {
+    const {min, max, reductionCount, duration} = settings;
+
+    if (!min || !max) return [];
+    if (haversine_distance(max.center, min.center) > max.radius - min.radius) return [];
+
+    const zones = [circleZone(max.center, max.radius, duration)];
+    const radiusReductionLength = (max.radius - min.radius) / reductionCount;
+    let center = max.center;
+    let radius = max.radius;
+
+    for (let i = 1; i < reductionCount; i++) {
+        radius -= radiusReductionLength;
+        let new_center = null;
+        while (!new_center || haversine_distance(new_center, min.center) > radius - min.radius) {
+            const angle = Math.random() * 2 * Math.PI;
+            const angularDistance = Math.sqrt(Math.random()) * radiusReductionLength / EARTH_RADIUS;
+            const lat0Rad = center.lat * Math.PI / 180;
+            const lon0Rad = center.lng * Math.PI / 180;
+            const latRad = Math.asin(
+                Math.sin(lat0Rad) * Math.cos(angularDistance) +
+                Math.cos(lat0Rad) * Math.sin(angularDistance) * Math.cos(angle)
+            );
+
+            const lonRad = lon0Rad + Math.atan2(
+                Math.sin(angle) * Math.sin(angularDistance) * Math.cos(lat0Rad),
+                Math.cos(angularDistance) - Math.sin(lat0Rad) * Math.sin(latRad)
+            );
+            new_center = {lat: latRad * 180 / Math.PI, lng: lonRad * 180 / Math.PI};
+        }
+        center = new_center;
+        zones.push(circleZone(center, radius, duration))
+    }
+    zones.push(circleZone(min.center, min.radius, 0));
+
+    return zones;
+}
+
+
+/* -------------------------------- Polygon zones -------------------------------- */
+
+const defaultPolygonSettings = {type: zoneTypes.polygon, polygons: []}
+
+function polygonZone(polygon, duration) {
+    return {
+        type: zoneTypes.polygon,
+        polygon: polygon,
+        duration: duration,
+
+        isInZone(location) {
+            const {lat: x, lng: y} = location;
+            let inside = false;
+
+            for (let i = 0, j = this.polygon.length - 1; i < this.polygon.length; j = i++) {
+                const {lat: xi, lng: yi} = this.polygon[i];
+                const {lat: xj, lng: yj} = this.polygon[j];
+
+                const intersects = ((yi > y) !== (yj > y)) && (x < ((xj - xi) * (y - yi)) / (yj - yi) + xi);
+
+                if (intersects) inside = !inside;
+            }
+
+            return inside;
+        }
+    }
+}
+
+function mergePolygons(poly1, poly2) {
+    // poly1 and poly2 are clockwise, not overlaping and touching polygons. If those two polygons were on a map, they would be
+    // one against each other, and the merge would make a new clockwise polygon out of the outer border of the two polygons.
+    // If it happens that poly1 and poly2 are not touching, poly1 would be returned untouched.
+    // Basically because polygons are clockwise, the alogorithm starts from a point A in poly1 not shared by poly2, and
+    // when a point is shared by poly1 and poly2, the algorithm continues in poly2, and so on until point A.
+
+    const getPointIndex = (point, array) => {
+        for (let i = 0; i < array.length; i++) {
+            if (latlngEqual(array[i], point)) return i;
+        }
+        return -1;
+    }
+
+    // Find the index of the first point of poly1 that doesn't belong to merge (it exists)
+    let i = 0;
+    while (getPointIndex(poly1[i], poly2) != -1) i++;
+    // Starting the merge from that point
+    const merge = [poly1[i]];
+    i = (i + 1) % poly1.length;
+    let currentArray = poly1;
+    let otherArray = poly2;
+    while (!latlngEqual(currentArray[i], merge[0])) {
+        const j = getPointIndex(currentArray[i], otherArray);
+        if (j != -1) {
+            [currentArray, otherArray] = [otherArray, currentArray];
+            i = j;
+        }
+        merge.push(currentArray[i]);
+        i = (i + 1) % currentArray.length;
+    }
+    return merge;
+}
+
+function polygonSettingsToZones(settings) {
+    const {polygons} = settings;
+
+    const zones = [];
+
+    for (const { polygon, duration } of polygons.slice().reverse()) {
+        const length = zones.length;
+
+        if (length == 0) {
+            zones.push(polygonZone(
+                polygon,
+                duration
+            ));
+        } else {
+            zones.push(polygonZone(
+                mergePolygons(zones[length-1].polygon, polygon),
+                duration
+            ));
+        }
+    }
+
+    return zones.slice().reverse();
+}
+
+
+/* -------------------------------- Zone manager -------------------------------- */
+
+export default {
+    isRunning: false,
+    zones: [], // A zone has to be connected space that doesn't contain an earth pole
+    currentZone: null,
+    settings: defaultPolygonSettings,
+
+    start() {
+        if (this.isRunning) return;
+        this.isRunning = true;
+        this.currentZone = { id: -1, timeoutId: null, endDate: null };
+        this.goNextZone();
+    },
+
+    stop() {
+        if (!this.isRunning) return;
+        clearTimeout(this.currentZone.timeoutId);
+        this.isRunning = false;
+        this.currentZone = null;
+    },
+
+    goNextZone() {
+        if (!this.isRunning) return;
+        this.currentZone.id++;
+        if (this.currentZone.id >= this.zones.length - 1) {
+            this.currentZone.endDate = Date.now();
+        } else {
+            this.currentZone.timeoutId = setTimeout(() => this.goNextZone(), this.getCurrentZone().duration * 60 * 1000);
+            this.currentZone.endDate = Date.now() + this.getCurrentZone().duration * 60 * 1000;
+        }
+        this.zoneBroadcast();
+    },
+
+    getCurrentZone() {
+        if (!this.isRunning) return null;
+        return this.zones[this.currentZone.id];
+    },
+
+    getNextZone() {
+        if (!this.isRunning) return null;
+        if (this.currentZone.id + 1 < this.zones.length) {
+            return this.zones[this.currentZone.id + 1];
+        } else {
+            return this.zones[this.currentZone.id];
+        }
+    },
+
+    isInZone(location) {
+        if (!this.isRunning) return false;
+        if (this.zones.length == 0) {
+            return true;
+        } else {
+            return this.getCurrentZone().isInZone(location);
+        }
+    },
+
+    changeSettings(settings) {
+        switch (settings.type) {
+            case zoneTypes.circle:
+                this.zones = circleSettingsToZones(settings);
+                break;
+            case zoneTypes.polygon:
+                this.zones = polygonSettingsToZones(settings);
+                break;
+            default:
+                this.zones = [];
+                break;
+        }
+        this.settings = settings;
+        this.stop();
+        this.start();
+        this.zoneBroadcast();
+    },
+    
+    zoneBroadcast() {
+        if (!this.isRunning) return;
+        const zone = {
+            begin: this.getCurrentZone(),
+            end: this.getNextZone(),
+            endDate:this.currentZone.endDate,
+        };
+        playersBroadcast("current_zone", zone);
+        secureAdminBroadcast("current_zone", zone);
+    },
+}

server/traque-front/.dockerignore

@@ -0,0 +1,8 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git
+.vscode

server/traque-front/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

server/traque-front/.gitignore

@@ -0,0 +1,38 @@
+# 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

server/traque-front/Dockerfile

@@ -0,0 +1,18 @@
+# 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"]

server/traque-front/Dockerfile.dev

@@ -0,0 +1,27 @@
+# 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"]

server/traque-front/app/admin/components/liveMap.jsx

@@ -0,0 +1,80 @@
+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>
+    )
+}

server/traque-front/app/admin/components/teamSidePanel.jsx

@@ -0,0 +1,125 @@
+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>
+    );
+}

server/traque-front/app/admin/components/teamViewer.jsx

@@ -0,0 +1,46 @@
+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>
+    );
+}

server/traque-front/app/admin/layout.js

@@ -0,0 +1,12 @@
+import { AdminConnexionProvider } from "@/context/adminConnexionContext";
+import { AdminProvider } from "@/context/adminContext";
+
+export default function AdminLayout({ children }) {
+    return (
+        <AdminConnexionProvider>
+            <AdminProvider>
+                {children}
+            </AdminProvider>
+        </AdminConnexionProvider>
+    );
+}

server/traque-front/app/admin/login/page.js

@@ -0,0 +1,26 @@
+"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>
+    );
+}

server/traque-front/app/admin/page.js

@@ -0,0 +1,128 @@
+"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>
+    )
+}

server/traque-front/app/admin/parameters/components/circleZoneSelector.jsx

@@ -0,0 +1,111 @@
+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>
+    );
+}

server/traque-front/app/admin/parameters/components/messages.jsx

@@ -0,0 +1,30 @@
+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>
+    );
+}

server/traque-front/app/admin/parameters/components/placementZoneSelector.jsx

@@ -0,0 +1,69 @@
+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>
+    );
+}

server/traque-front/app/admin/parameters/components/playingZoneSelector.jsx

@@ -0,0 +1,38 @@
+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>
+    );
+}

server/traque-front/app/admin/parameters/components/polygonZoneSelector.jsx

@@ -0,0 +1,128 @@
+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>
+    );
+}

server/traque-front/app/admin/parameters/components/teamManager.jsx

@@ -0,0 +1,59 @@
+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>
+    );
+}

server/traque-front/app/admin/parameters/page.js

@@ -0,0 +1,65 @@
+"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>
+    );
+}

server/traque-front/app/globals.css

@@ -0,0 +1,17 @@
+@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);
+}

server/traque-front/app/layout.js

@@ -0,0 +1,25 @@
+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>
+    );
+}

server/traque-front/components/input.jsx

@@ -0,0 +1,9 @@
+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} />
+    )
+}

server/traque-front/components/layer.jsx

@@ -0,0 +1,181 @@
+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;
+}

server/traque-front/components/list.jsx

@@ -0,0 +1,72 @@
+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>
+    );
+}

server/traque-front/components/map.jsx

@@ -0,0 +1,164 @@
+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>
+    )
+}

server/traque-front/components/section.jsx

@@ -0,0 +1,18 @@
+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>
+    );
+}

server/traque-front/context/adminConnexionContext.jsx

@@ -0,0 +1,25 @@
+"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);
+}

server/traque-front/context/adminContext.jsx

@@ -0,0 +1,59 @@
+"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);
+}

server/traque-front/context/socketContext.jsx

@@ -0,0 +1,26 @@
+"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);
+}

server/traque-front/hook/useAdmin.jsx

@@ -0,0 +1,43 @@
+"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 };
+}

server/traque-front/hook/useCircleDraw.jsx

@@ -0,0 +1,35 @@
+"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 };
+}

server/traque-front/hook/useLocalStorage.jsx

@@ -0,0 +1,29 @@
+"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];
+}

server/traque-front/hook/useLocalVariable.jsx

@@ -0,0 +1,15 @@
+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];
+}

server/traque-front/hook/useMultipleCircleDraw.jsx

@@ -0,0 +1,23 @@
+"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 };
+}

server/traque-front/hook/usePasswordProtect.jsx

@@ -0,0 +1,16 @@
+"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]);
+}

server/traque-front/hook/usePolygonDraw.jsx

@@ -0,0 +1,214 @@
+"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 };
+}

server/traque-front/hook/useSocketAuth.jsx

@@ -0,0 +1,52 @@
+"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};
+}

server/traque-front/hook/useSocketListener.jsx

@@ -0,0 +1,9 @@
+"use client";
+import { useEffect } from "react";
+
+export default function useSocketListener(socket, event, callback) {
+    useEffect(() => {
+        socket.on(event,callback);
+        return () => socket.off(event, callback);
+    }, []);
+}

server/traque-front/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    },
+    "lib": ["es2015"]
+  }
+}

server/traque-front/next.config.mjs

@@ -0,0 +1,19 @@
+/** @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;

server/traque-front/package.json

@@ -0,0 +1,31 @@
+{
+  "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"
+  }
+}

server/traque-front/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};