Carte Interactive — Roadmap & Ops (2025–2026)

But : carte narrative immersive, fiable et maintenable, utilisée en jeu et comme référentiel vivant de l’univers.
Axes : qualité des données, excellence UX, industrialisation (CI/CD & ops).

1) Réalisations récentes (T4 2025)

Front unifié (Leaflet + modules DataService, MapController, UiController) orchestré par js/main.js. :contentReference[oaicite:0]{index=0}
Validation centralisée des datasets + nettoyage massif (images/audio/JSON). :contentReference[oaicite:1]{index=1}
Galerie média et audio robustes (fallback, hover, etc.). :contentReference[oaicite:2]{index=2}
Persistance locale (filtres, vue carte, favoris). :contentReference[oaicite:3]{index=3}
Editeur in-app (CRUD Lieux) avec réécriture dans assets/locations.json. :contentReference[oaicite:4]{index=4}
Auth Discord OAuth2 + sessions signées + panneau admin (rôles). En prod. :contentReference[oaicite:5]{index=5}
Temps réel par SSE (/api/events/stream). En prod. :contentReference[oaicite:6]{index=6}
Pipeline CI rétabli + déploiement continu sur VPS (rsync + PM2 + Nginx). En prod.

2) Chantiers prioritaires (H1 2026)

P0 — Essentiels

P1 — Valeur

P2 — Menu profil (UX + contenu)

Carte profil plus claire: avatar grand, pseudo, rôle, groupe(s) en chips, statut/présence.
Multi‑personnages: carrousel + filtres, tag “actif”, duplication rapide, import/export.
Personnalisation: bannière, couleur d’accent, bio riche (markdown léger), liens sociaux.
Actions rapides: changer thème, raccourcis admin, accès “Mes lieux favoris”.
Feedback clair: état de sauvegarde, erreurs inline, historique des edits récents.
Sécurité/compte: bouton “révoquer session”, infos Discord, date dernière connexion.
Polish UI

P3.1 — Page d’accueil (MVP pré-carte)

P3.2 — UX & contenu de l’accueil

Hero immersif (visuel/illustration + tagline).
Bloc Fonctionnalités (exploration, quêtes live, groupes, audio, annotations).
Bloc Comment commencer (3 étapes simples).
Bloc Nouveautés (derniers événements/ajouts majeurs).
CTA Rejoindre le Discord.
CTA Voir le contenu YouTube.
Bloc “Reprendre” pour utilisateur connecté (favoris / accès rapide carte).
Message d’état clair si API/session indisponible.

P3.3 — Auth, session & navigation

Réutiliser /auth/session pour hydrater l’accueil.
Gérer les états guest / user / admin sur l’accueil.
Gérer redirects login propres (/auth/discord/login?redirect=/map ou retour accueil).
Ajouter bouton Se déconnecter depuis l’accueil.
Afficher infos compte minimales (provider, Discord, dernière connexion).
Prévoir accès rapide admin (si admin connecté).

P3.4 — Réseaux sociaux & footer (propre / maintenable)

Externaliser les URLs sociales (config JSON ou .env) pour éviter le hardcode.
Icônes sociales accessibles (labels/aria).
Liens externes sécurisés (target="_blank" + rel="noopener noreferrer").
Footer avec crédits assets (images/audio/icônes).
Mention “fan project” / cadre IP (si nécessaire).
Lien vers support / bugs / contact.

P3.5 — Perf, SEO, accessibilité

Ne pas charger Leaflet + assets carte lourds sur l’accueil (chargement à la demande).
Meta title + description dédiés à l’accueil.
Open Graph (image de partage, titre, description).
Structure HTML sémantique (header, main, section, footer).
Navigation clavier complète + focus visibles.
Support prefers-reduced-motion.
Vérifier contraste et lisibilité mobile.

P3.6 — Polish UI (accueil)

Direction artistique forte (hero, textures, typo, ambiance).
Animations légères (entrées, hover CTA, transitions sections).
Version mobile soignée (CTA visibles sans trop scroller).
États de chargement élégants (session/auth/API).
Cohérence visuelle avec la carte et le menu profil.

P3.7 — Bonus (plus tard)

Preview du flux temps réel sur l’accueil (mini bloc live).
Mise en avant de lieux/continents (cards).
Widget communauté (ex: lien invitation Discord enrichi).
Écran d’accueil personnalisable côté admin (textes/liens/hero).

Ordre recommandé (exécution)

Phase 1 : / + CTA carte + login + footer/socials.
Phase 2 : états de session + redirects auth.
Phase 3 : contenu (hero, fonctionnalités, nouveautés).
Phase 4 : perf/SEO/accessibilité.
Phase 5 : polish UI final.

P3.8 - Refonte premium de l'accueil

Refaire le hero en version premium plein ecran.
Ajouter un fond illustre immersif avec profondeur, brume et halos.
Ajouter un render personnage HD integre au hero.
Ajouter une preview mockup de la carte avec mini fiche lieu flottante.
Ajouter une preuve sociale visuelle (bloc communauté, widget Discord, avatars).
Ajouter un header plus premium (logo, navigation courte, CTA clairs).
Brancher les visuels/textes hero dans la configuration admin de l'accueil.
Finaliser responsive mobile/tablette de la landing premium.
Polish final : ombres, micro-interactions, animations legeres, coherence typographique.

Direction artistique recommandee - Hesta

Palette : bleu nuit, ivoire, or doux, cyan froid pour les accents interactifs.
Typographies : une fonte editoriale pour les titres + une fonte UI tres lisible pour l'interface.
Composition : grand titre centre, sous-texte court, CTA alignes, preuve sociale sous les CTA.
Showcase : carte en mockup central avec perspective legere et overlays narratifs.
Personnage : silhouette detouree cote droit avec halo discret et ancrage visuel fort.
Background : illustration panoramique avec gradients, texture et profondeur atmospherique.
UI tone : sobre, premium, epure, plus 'univers vivant' que 'dashboard'.

Assets a produire / reunir

Un fond hero large HD (desktop + mobile).
Un render personnage detoure propre (PNG/WebP).
Un screenshot tres propre de la carte pour le mockup.

Fix Pré P3

Fix la suppression des annotations
Sur la carte ajouter un bouton pour revenir a l'acceuil
Possibilité de fermer/réduire le panneaux "Flux temps réel"

P4 — Frise chronologique

Note produit - Frise chronologique

Page dédiée : meilleure lisibilité, plus de place pour une vraie frise horizontale, plus simple à rendre premium et responsive.
Décision recommandée : construire la version complète sur page dédiée, puis ajouter un point d'entrée compact sur la carte.
MVP recommandé : année + titre + texte + image optionnelle + lieux liés + bouton "Voir sur la carte".

P5 — Séparation des panneaux admin

P6 — Homogénéisation des descriptions de lieux (assistée par IA)

P7 — Différenciants

Dans modifier un lieu et Creer un lieu, pour Type, ajouter l'aperçu de chaque icone
Possiblités de pouvoir peindre sur la carte de manière éphémère pour dessiner des schémas, créer des routes, instruction etc
Carte chronologique (replay des lieux/événements).
Partage/Export (JSON + capture visuelle).
Marqueurs évolutifs (temps/événements).
Markers thématiques/stylés par type + légende.
Quêtes interactives avec états visuels et transitions.
Narateur audio
Polish UI

P8 — Hygiène & dette

Modularisation fine de UiController et nettoyage des artefacts legacy.
Harmonisation encodages (UTF-8) & lint assets. :contentReference[oaicite:7]{index=7}
Fiabiliser le compteur Discord automatique de l’accueil (invite/widget/API) avec fallback propre.
Automatiser les patch notes de l’accueil depuis GitHub ou l’historique git de production.
Polish UI

3) Architecture (prod)

Domaine : https://cartehesta.dannytech.fr
Front : fichiers statiques servis par Nginx depuis /srv/cartehesta/app (où se trouve index.html).
API Node (PM2) : carte-api écoute 127.0.0.1:4173.
Proxy Nginx :
- /api/* → http://127.0.0.1:4173/api/* (JSON + SSE)
- /auth/* → http://127.0.0.1:4173/auth/* (OAuth, sessions)
HTTPS : Let’s Encrypt (Certbot), Nginx TLS.

Arborescence serveur (prod)

/srv/cartehesta/app ├── index.html ├── js/ ... # front ├── assets/ # images, audio, JSON (déployés) ├── server/ # routes Express /auth, /api, utils ├── .env # variables prod (voir plus bas) └── (pm2) process: carte-api

4) Variables d’environnement (prod)

Fichier : /srv/cartehesta/app/.env

env

App

NODE_ENV=production HOST=127.0.0.1 PORT=4173 BASE_URL=https://cartehesta.dannytech.fr ORIGIN=https://cartehesta.dannytech.fr

Sessions/cookies

SESSION_SECRET=xxxxxxxxxx COOKIE_NAME=sid COOKIE_SECURE=true COOKIE_SAMESITE=lax SESSION_TTL_MS=43200000

OAuth Discord

DISCORD_CLIENT_ID=xxxxxxxxxx DISCORD_CLIENT_SECRET=xxxxxxxxxx DISCORD_REDIRECT_URI=https://cartehesta.dannytech.fr/auth/discord/callback DISCORD_SCOPES=identify DISCORD_ADMIN_IDS=1172705521317449809

⚠️ Après toute modification du .env : cd /srv/cartehesta/app && pm2 restart carte-api --update-env && pm2 save

5) Nginx (vhost)

Fichier : /etc/nginx/sites-available/cartehesta.conf (symlinké vers sites-enabled/)

nginx

HTTP -> HTTPS

server { listen 80; listen [::]:80; server_name cartehesta.dannytech.fr; return 301 https://$host$request_uri; }

HTTPS

server { listen 443 ssl http2; listen [::]:443 ssl http2; server_name cartehesta.dannytech.fr;

FRONT statique

root /srv/cartehesta/app; index index.html;

Ne jamais exposer node_modules

location ^~ /node_modules/ { deny all; }

Dossiers statiques

location /assets/ { try_files $uri =404; } location /js/ { try_files $uri =404; } location /css/ { try_files $uri =404; } location /images/ { try_files $uri =404; }

SPA fallback

location / { try_files $uri $uri/ /index.html; }

BACKEND: API

location /api/ { proxy_pass http://127.0.0.1:4173/; proxy_http_version 1.1; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_buffering off; proxy_cache off; proxy_set_header Connection ""; proxy_read_timeout 1h; }

BACKEND: Auth (hors /api)

location /auth/ { proxy_pass http://127.0.0.1:4173/; proxy_http_version 1.1; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_buffering off; proxy_cache off; proxy_set_header Connection ""; proxy_read_timeout 1h; }

TLS (Certbot)

ssl_certificate /etc/letsencrypt/live/cartehesta.dannytech.fr/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/cartehesta.dannytech.fr/privkey.pem; include /etc/letsencrypt/options-ssl-nginx.conf; ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; }

Reload : sudo nginx -t && sudo systemctl reload nginx

6) Déploiement & données (local ↔ prod)

Flux standard (recommandé)

Tu travailles en local (VS Code + Git).
Commit & push sur main → GitHub Actions déclenche :
- rsync des fichiers vers /srv/cartehesta/app (exclusions .git, node_modules, etc.)
- pm2 reload de carte-api
Le site est à jour en prod.

Edition depuis le site (admin)

Si tu modifies un Lieu via l’éditeur in-app (autorisations Discord requises), l’API écrit en prod dans assets/locations.json (et médias dans assets/images|audio).
Bon réflexe : périodiquement, pull ou rsync les fichiers prod → local pour garder ton repo aligné (ou ajoute un job “pull-back” si tu préfères).

7) Runbook Ops (pour toi & ton IA dans VS Code)

Process Node (PM2)

bash pm2 ls pm2 logs carte-api --lines 200 pm2 restart carte-api --update-env pm2 save

Healthchecks (doivent renvoyer 200)

bash curl -i https://cartehesta.dannytech.fr/auth/session curl -i https://cartehesta.dannytech.fr/api/annotations curl -i https://cartehesta.dannytech.fr/api/events/stream

Debug reverse-proxy

curl -I https://cartehesta.dannytech.fr/js/main.js → content-type: application/javascript
sudo tail -f /var/log/nginx/access.log /var/log/nginx/error.log
Erreur 502 : vérifier que PM2 tourne et que PORT=4173 est correctement proxifié.

Variables d’env / cookies

ORIGIN et BASE_URL = https://cartehesta.dannytech.fr
COOKIE_SECURE=true (HTTPS), SameSite=lax
Après modif .env → pm2 restart carte-api --update-env

Certificats (Let’s Encrypt)

bash sudo certbot renew --dry-run

Déploiement manuel (si besoin)

bash

rsync front/app depuis ta machine locale (exemple générique)

rsync -avz --delete --exclude ".git/" --exclude ".github/" --exclude "node_modules/"
./ debian@:/srv/cartehesta/app/ ssh debian@ "cd /srv/cartehesta/app && pm2 restart carte-api --update-env && pm2 save"

8) Convention & checklist PR

Pas de données/credentials en clair dans le code.
JSON validés (assets/locations.json, assets/types.json) avant merge.
Test manuel post-déploiement :
- carte s’affiche (200 sur index.html et main.js),
- /auth/session retourne l’objet user si connecté (sinon {authenticated:false}),
- /api/annotations 200 (JSON),
- /api/events/stream 200 (flux texte “event: …”).

9) Annexes

Backlog / idées : ROADMAPbackup, idees.txt
Données : assets/locations.json, assets/types.json
Tests : tests/, test-results/ (legacy)
Historique et chantiers : cf. sections 1 & 2 de ce fichier.

FilesExpand file tree

ROADMAP.md

Latest commit

History