Lyon Central
Gestion d'Urgences en Temps Réel

Présentation du projet

🎯 Concept

Lyon Central est un jeu web de gestion où le joueur incarne le coordinateur des services d'urgence de Lyon. Il doit répondre à des appels d'urgence (vrais ou faux), déployer stratégiquement ses véhicules (Police, Pompiers, Ambulances) sur une carte interactive, gérer son économie et résoudre un maximum d'événements avant la fin de la journée.

La partie se déroule de 06h à 18h (temps simulé en 6 minutes réelles) avec une difficulté progressivement croissante répartie sur 4 tranches horaires. Chaque appel reçu peut être un vrai événement nécessitant une intervention, ou un faux appel, forçant le joueur à décider rapidement sous pression.

Ma contribution personnelle

En tant qu’un des développeurs principaux du projet (43 commits sur 130+), j'ai pris en charge :

• Architecture frontend : Participation à la conception de l'architecture modulaire (12 modules JavaScript distincts) et orchestration de l'ensemble du jeu côté client
• Carte interactive : Intégration Leaflet.js avec zone de jeu délimitée sur Lyon et gestion des marqueurs dynamiques
• Système d'événements : Ajout, et apparition des événemenents sur la carte
• Phase de préparation : Interface de placement stratégique des casernes et véhicules avant le début de partie
• Économie du jeu : Budget, achat/vente de casernes et véhicules, upgrades
• Interface utilisateur : HUD complet, popups interactifs, panneau latéral caserne
• Système de CRUD : Création d'un pannel administrateur pour ajouter des événements avec appel API REST.

Mes coéquipiers Khalil, Ahmet-Selim et Antoine ont respectivement contribué sur le backend/WebSocket, cosmétiques/gameplay/UI/UX, et le CSS/CRUD administration/la base de données.

Technologies et architecture

Stack technique

Architecture modulaire

Le frontend est organisé en 12 modules JavaScript indépendants, chacun responsable d'un aspect précis du jeu :

main.js                  → Orchestration principale (698 lignes)
modules-appels.js        → Système d'appels téléphoniques (421 lignes)
modules-casernes.js      → Gestion casernes & garages (493 lignes)
modules-vehicules.js     → Véhicules & itinéraires (696 lignes)
modules-evenements.js    → Événements sur la carte (523 lignes)
modules-deplacements.js  → Déplacement véhicules (312 lignes)
modules-economie.js      → Économie et transactions (298 lignes)
modules-preparation.js   → Phase de préparation (423 lignes)
modules-timer.js         → Timer de jeu 6h→18h (165 lignes)
modules-generation.js    → Génération automatique (65 lignes)
config.js                → Configuration globale (170 lignes)
notification-system.js   → Notifications UI (119 lignes)

Base de données

La base de données MySQL comprend 15+ tables avec une configuration entièrement centralisée :

• Joueur & Authentification : Profils, sessions, hachage bcrypt
• Configuration de jeu : Événements, difficulté par tranches horaires, paramètres de génération
• Progression : Historique des parties, statistiques, XP, or
• Cosmétiques : Avatars, bannières, boutique avec transactions sécurisées
• Leaderboards : Vues SQL pour classements temps réel

Mécaniques de jeu

🎮 Phase de préparation

Avant chaque partie, le joueur dispose d'un budget de 1 000€ pour :

• Placer jusqu'à 3 casernes par type (Police, Pompier, Ambulance) sur 25 emplacements stratégiques, 300€ chacune
• Acheter jusqu'à 3 véhicules par type, 100€ chacun
• Optimiser la couverture territoriale de Lyon pour répondre rapidement aux futurs événements

📞 Système d'appels téléphoniques

L'une des mécaniques les plus originales du jeu : chaque événement est déclenché par un appel téléphonique avec sonnerie audio et vibration visuelle du bouton. Le joueur a 20 secondes pour décrocher. 50% des appels sont de vrais événements, 50% sont des faux, forçant à prendre des décisions sous pression.

• Appel manqué → pénalité de 100€
• Faux appel accepté → pas d'événement créé
• Vrai appel accepté → événement ajouté sur la carte avec timer

Démonstration : de l'appel à l'envoi d'unité

🚨 Types d'événements

10 types d'événements répartis en 3 niveaux de complexité :

• Simples (type 1-3) : Un seul service requis, 2 minutes pour résoudre
• Doubles (type 4-6) : Deux services requis, 3 minutes pour résoudre
• Complexes (type 7) : Les trois services requis, 4 minutes pour résoudre

🗺️ Déplacement sur routes réelles

Les véhicules se déplacent en suivant les vraies routes de Lyon grâce à l'intégration de l'API OSRM (Open Source Routing Machine). Les itinéraires sont calculés en temps réel, tracés sur la carte avec des polylines colorées par type de véhicule, et animés de façon fluide grâce à requestAnimationFrame.

Un bouton « Dispatcher » permet d'envoyer automatiquement l'unité disponible la plus proche d'un événement.

💰 Économie

Le système économique est au cœur de la stratégie :

• Événement résolu → +100€ par service requis (simple: +100€, double: +200€, complexe: +300€)
• Pénalités → appel manqué (-100€), renonciation (-50€), expiration (-50€)
• Système d'upgrade des véhicules sur 3 niveaux (vitesse accrue, valeur de revente augmentée)
• Défaite automatique si le budget passe en négatif

⏰ Difficulté progressive

La journée est divisée en 4 tranches horaires, chacune augmentant la fréquence des appels :

• 06h-09h (Calme) : Appels toutes les 15-30 secondes
• 09h-12h (Modéré) : Appels toutes les 10-20 secondes
• 12h-15h (Intense) : Appels toutes les 7-15 secondes
• 15h-18h (Critique) : Appels toutes les 5-10 secondes

Fonctionnalités additionnelles

🏠 Écran d'accueil

• Profil joueur avec avatar et bannière personnalisables
• Système de niveaux basé sur l'XP (barre de progression)
• Boutique de cosmétiques (achat avec l'or gagné en partie)
• Leaderboards avec 3 classements différents
• Panel d'administration (CRUD des événements de jeu)

📊 Écran de résumé

À la fin de chaque partie, un récapitulatif détaillé est affiché avec le score final, les événements résolus/échoués, l'or et l'XP gagnés. Les résultats sont enregistrés en base de données pour l'historique et les leaderboards.

🔐 Sécurité

• Hachage bcrypt des mots de passe
• Sessions sécurisées avec express-session
• Validation et sanitisation côté serveur (express-validator)
• Middlewares d'authentification et de propriété des données
• Variables d'environnement pour les données sensibles

Développement et équipe

📈 Statistiques du projet

• ~15 000 lignes de code
• 130+ commits répartis sur ~4 mois de développement
• 10 versions majeures (V0.0.0 → V10.1.2)
• 8 guides techniques documentés en Markdown
• 12 modules JavaScript côté client
• 30+ routes API REST
• 15+ tables MySQL

👥 Équipe de développement

• Jordan Amouyal : Architecture frontend, gameplay, UI/UX (43 commits)
• Khalil Bouaouina : Backend, WebSocket, optimisations, sécurité API (59 commits)
• Ahmet-Selim Ozsoy : Base de données, cosmétiques, gameplay, UI/UX (18 commits)
• Antoine Panouillot : CSS, CRUD administration, création d'API (12 commits)

🔄 Évolution du projet

Le projet a traversé plusieurs phases majeures :

1. V0-V4 : Fondations, carte, véhicules, événements, déplacements animés
2. V5-V6 : Migration vers Node.js/Express, authentification, base de données MySQL
3. V7-V8 : Features avancées, upgrades, audio, graphiques dynamiques, écran de résumé
4. V9-V10 : Sécurisation API, WebSocket temps réel, CRUD administration, refonte BD

Ce que j'ai appris

• Architecture logicielle : Organiser un projet de 15 000 lignes en modules maintenables
• Développement full-stack : Backend Express + Frontend modulaire + BD MySQL
• Temps réel : WebSocket avec Socket.IO, animations requestAnimationFrame
• Intégration d'API tierces : OSRM pour itinéraires, Leaflet.js pour cartographie
• Sécurité web : Bcrypt, validation, sessions, protection CSRF
• Game design : Équilibrage économique, difficulté progressive, feedback utilisateur
• Travail en équipe : Git flow, branches features, coordination 4 développeurs
• Refactorisation : Réduction de 30% du code principal tout en ajoutant des fonctionnalités