🟨 Backrooms — Carte Interactive

Explorez les 99 premiers niveaux des Backrooms sur une carte interactive, sombre et néon.

🔗 Voir la carte en ligne · 📋 Changelog

---

Une carte interactive et navigable de l'univers des Backrooms : niveaux affichés comme des nœuds, routes (portes, escaliers, no-clip...) comme des liens. Cliquez sur un niveau pour son fiche complète — danger, entités, connexions, conseils de survie. Site 100 % statique, sans backend, déployé automatiquement sur GitHub Pages.

✨ Fonctionnalités

• 🗺️ Carte interactive — zoom, pan, clic sur un nœud pour ouvrir le panneau de détails
• 🔍 Recherche — trouvez un niveau par nom ou numéro, la carte se recentre dessus
• 🌐 Multilingue FR/EN/DE — interface dans les 3 langues, contenu des niveaux en FR/EN (repli automatique en DE), architecture extensible
• 🎨 Calques — Danger (dégradé vert → rouge) et Entités (badge de présence)
• 🧭 Filtres — par classe de niveau et par plage de danger
• 📖 Légende repliable — types de routes, échelle de danger
• 👁️ Liens vers les entités — chaque entité pointe vers sa fiche sur le wiki source
• 🌑 Thème dark/neon — ambiance "vieux terminal / liminal space"

📊 Contenu

103 niveaux au total : les 99 premiers niveaux normaux du wiki Backrooms (backrooms-wiki.wikidot.com), plus 4 niveaux emblématiques (Level 0, The Manila Room, Level Fun, Level !), reliés par 363 connexions. Descriptions reformulées (pas de copie du wiki), lien source conservé sur chaque fiche.

🚀 Démarrer

Prérequis : Node.js ≥ 18.

npm install
npm run validate   # vérifie l'intégrité des niveaux et des connexions
npm run dev        # http://localhost:5173

Build de production :

npm run build      # -> dist/
npm run preview    # sert le build localement

🏗️ Architecture

src/
  data/levels/*.json   1 fichier par niveau (schéma = level-0.json à la racine)
  data/loadLevels.js   chargement auto (import.meta.glob)
  graph/               construction + style Cytoscape + layout hybride
  layers/              système de calques générique (1 fichier par calque)
  i18n/                contexte langue + dictionnaires + lecture des textes niveaux
  components/          MapView, SidePanel, SearchBar, Filters, LayerToggles, Legend...
  styles/theme.css     thème dark/neon
scripts/
  validate-levels.mjs        validation des JSON (connexions, doublons, schéma)
  import/generate.mjs        génère les niveaux depuis scripts/import/raw/*.json
  import/fr-translations.json  traductions FR fusionnées à la génération

Ajouter un niveau

1. Copier un JSON existant dans src/data/levels/, garder le schéma de level-0.json.
2. Renseigner connections (les to doivent exister).
3. npm run validate puis npm run dev. Rien d'autre à câbler.

Ajouter un calque

Créer src/layers/mon-calque.layer.js (id, labelKey, defaultOn, stylesheet) puis l'enregistrer dans src/layers/registry.js.

Layout hybride

Les nœuds avec coordinates sont placés à ces positions ; les autres sont disposés automatiquement (fcose) en figeant les premiers. Voir graph/useCytoscape.js.

🌍 Déploiement GitHub Pages

Le déploiement est automatique via GitHub Actions (.github/workflows/deploy.yml) : chaque push sur master build le site et le publie sur Pages. vite.config.js utilise base: './' (chemins relatifs), compatible sous-répertoire.

📜 Licence & source

Code sous licence MIT. Les données de niveaux sont adaptées du Backrooms Wiki (CC-BY-SA) — descriptions reformulées, lien source conservé sur chaque fiche.