feat(frontend): barre de progression XP style RPG

Story 3.4 : Barre de progression globale (XP bar)
- ProgressBar.vue avec design RPG (bordure, graduations, glow)
- Tooltip au hover avec liste des sections visitées
- Animation fluide avec prefers-reduced-motion
- ProgressIcon.vue pour mobile (cercle SVG + drawer)
- Intégration dans AppHeader (visible si héros choisi)
- Traductions progress.* FR/EN

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-02-07 03:09:52 +01:00
parent 99fa61fcaa
commit 203c51b5c5
7 changed files with 396 additions and 45 deletions

View File

@@ -22,13 +22,12 @@
</nav>
<div class="flex items-center gap-3">
<!-- Barre de progression -->
<div class="hidden md:block w-24 h-1.5 bg-sky-text/10 rounded-full overflow-hidden">
<div
class="h-full bg-sky-accent/40 rounded-full transition-all duration-500"
:style="{ width: progressPercent + '%' }"
/>
</div>
<!-- Barre de progression XP (desktop) -->
<FeatureProgressBar
v-if="showProgressBar"
:percent="progressPercent"
class="hidden md:block"
/>
<UiLanguageSwitcher />
@@ -88,6 +87,10 @@ const store = useProgressionStore()
const progressPercent = computed(() => store.progressPercent)
const showProgressBar = computed(() => {
return store.hero !== null
})
const mobileOpen = ref(false)
const scrolled = ref(false)