feat(frontend): carte interactive desktop avec Konva.js

Story 3.6 : Carte interactive desktop (Konva.js)
- Installation de konva et vue-konva
- Configuration nuxt.config.ts pour transpile Konva
- Création mapZones.ts avec 5 zones et connexions
- Composant InteractiveMap.client.vue :
  - Canvas Konva avec zones cliquables
  - États visuels (visité/non visité/verrouillé)
  - Tooltip au hover avec statut
  - Marqueur de position animé
  - Navigation clavier (Tab + Enter)
  - Légende interactive
- Traductions map.* FR/EN
- Lazy-loading client-only (.client.vue)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-02-07 04:18:54 +01:00
parent dbe2ec4cb8
commit 4a7fba5999
9 changed files with 479 additions and 4 deletions

View File

@@ -179,6 +179,18 @@
"clickToSkip": "Cliquez ou appuyez sur Espace pour passer",
"bugAlt": "Le Bug - Stade {stage}"
},
"map": {
"ariaLabel": "Carte interactive du portfolio. Utilisez Tab pour naviguer entre les zones et Entrée pour explorer.",
"instructions": "Utilisez les touches Tab pour naviguer entre les zones et Entrée ou Espace pour explorer une zone.",
"locked": "Zone verrouillée - Explorez davantage",
"visited": "Déjà visité",
"clickToExplore": "Cliquez pour explorer",
"legend": {
"notVisited": "Non visité",
"visited": "Visité",
"locked": "Verrouillé"
}
},
"progress": {
"label": "Progression : {percent}%",
"title": "Exploration du portfolio",