skycel
203c51b5c5
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>
525 lines
14 KiB
Markdown
525 lines
14 KiB
Markdown
# Story 3.4: Barre de progression globale (XP bar)
|
|
|
|
Status: review
|
|
|
|
## Story
|
|
|
|
As a visiteur,
|
|
I want voir ma progression dans l'exploration du site,
|
|
so that je sais combien il me reste à découvrir.
|
|
|
|
## Acceptance Criteria
|
|
|
|
1. **Given** le visiteur est en mode Aventure **When** il navigue sur le site **Then** une barre de progression discrète s'affiche dans le header
|
|
2. **And** le pourcentage est calculé selon les sections visitées (Projets, Compétences, Témoignages, Parcours)
|
|
3. **And** l'animation de la barre est fluide lors des mises à jour
|
|
4. **And** un tooltip au hover indique les sections visitées et restantes
|
|
5. **And** le design évoque une barre XP style RPG (cohérent avec `sky-accent`)
|
|
6. **And** la barre respecte `prefers-reduced-motion` (pas d'animation si activé)
|
|
7. **And** sur mobile, la progression est accessible via la bottom bar
|
|
8. **And** la barre n'est pas visible en mode Express/Résumé
|
|
|
|
## Tasks / Subtasks
|
|
|
|
- [x] **Task 1: Créer le composant ProgressBar** (AC: #1, #3, #5, #6)
|
|
- [x] Créer `frontend/app/components/feature/ProgressBar.vue`
|
|
- [x] Props : percent (number), showTooltip (boolean)
|
|
- [x] Design XP bar style RPG avec sky-accent
|
|
- [x] Animation fluide de remplissage (CSS transition)
|
|
- [x] Respecter prefers-reduced-motion
|
|
|
|
- [x] **Task 2: Implémenter le tooltip des sections** (AC: #4)
|
|
- [x] Afficher au hover la liste des sections
|
|
- [x] Indiquer le statut : visitée (✓) ou à découvrir
|
|
- [x] Tooltip custom avec Transition
|
|
- [x] Traductions FR/EN
|
|
|
|
- [x] **Task 3: Intégrer dans le header** (AC: #1, #8)
|
|
- [x] Ajouter la ProgressBar dans le composant Header
|
|
- [x] Conditionner l'affichage : visible uniquement en mode Aventure (hero !== null)
|
|
- [x] Position : à droite du header, avant le language switcher
|
|
|
|
- [x] **Task 4: Calculer le pourcentage** (AC: #2)
|
|
- [x] Définir les 4 sections : projets, competences, temoignages, parcours
|
|
- [x] Chaque section visitée = 25%
|
|
- [x] Lire depuis `visitedSections` du store
|
|
- [x] Le calcul est fait dans le store (progressPercent/completionPercent)
|
|
|
|
- [x] **Task 5: Version mobile** (AC: #7)
|
|
- [x] Sur mobile, la barre est masquée du header
|
|
- [x] La progression est accessible via ProgressIcon.vue (cercle)
|
|
- [x] Un tap affiche un drawer avec le détail
|
|
|
|
- [x] **Task 6: Effets visuels RPG** (AC: #5)
|
|
- [x] Effet de brillance/glow au survol
|
|
- [x] Bordure stylisée évoquant un cadre de jeu
|
|
- [x] Graduation subtile sur la barre (4 segments)
|
|
|
|
- [x] **Task 7: Tests et validation**
|
|
- [x] Tester l'animation de remplissage
|
|
- [x] Vérifier le tooltip (desktop)
|
|
- [x] Valider la version mobile (ProgressIcon)
|
|
- [x] Tester prefers-reduced-motion
|
|
- [x] Vérifier que la barre est masquée si pas de héros choisi
|
|
|
|
## Dev Notes
|
|
|
|
### Composant ProgressBar
|
|
|
|
```vue
|
|
<!-- frontend/app/components/feature/ProgressBar.vue -->
|
|
<script setup lang="ts">
|
|
const props = withDefaults(defineProps<{
|
|
percent: number
|
|
showTooltip?: boolean
|
|
compact?: boolean // Pour la version mobile
|
|
}>(), {
|
|
showTooltip: true,
|
|
compact: false,
|
|
})
|
|
|
|
const { t } = useI18n()
|
|
const progressionStore = useProgressionStore()
|
|
const reducedMotion = useReducedMotion()
|
|
|
|
// Sections avec leur statut
|
|
const sections = computed(() => [
|
|
{
|
|
key: 'projets',
|
|
name: t('progress.sections.projects'),
|
|
visited: progressionStore.visitedSections.includes('projets'),
|
|
},
|
|
{
|
|
key: 'competences',
|
|
name: t('progress.sections.skills'),
|
|
visited: progressionStore.visitedSections.includes('competences'),
|
|
},
|
|
{
|
|
key: 'temoignages',
|
|
name: t('progress.sections.testimonials'),
|
|
visited: progressionStore.visitedSections.includes('temoignages'),
|
|
},
|
|
{
|
|
key: 'parcours',
|
|
name: t('progress.sections.journey'),
|
|
visited: progressionStore.visitedSections.includes('parcours'),
|
|
},
|
|
])
|
|
|
|
const visitedCount = computed(() => sections.value.filter(s => s.visited).length)
|
|
const remainingCount = computed(() => 4 - visitedCount.value)
|
|
|
|
// État du tooltip
|
|
const showPopover = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="progress-bar-container relative"
|
|
:class="{ 'compact': compact }"
|
|
>
|
|
<!-- Barre principale -->
|
|
<div
|
|
class="progress-bar-wrapper group cursor-pointer"
|
|
@mouseenter="showPopover = true"
|
|
@mouseleave="showPopover = false"
|
|
@focus="showPopover = true"
|
|
@blur="showPopover = false"
|
|
tabindex="0"
|
|
role="progressbar"
|
|
:aria-valuenow="percent"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
:aria-label="t('progress.label', { percent })"
|
|
>
|
|
<!-- Cadre RPG -->
|
|
<div class="progress-frame relative h-6 w-40 rounded-full border-2 border-sky-accent/50 bg-sky-dark overflow-hidden">
|
|
<!-- Fond avec graduation -->
|
|
<div class="absolute inset-0 flex">
|
|
<div
|
|
v-for="i in 4"
|
|
:key="i"
|
|
class="flex-1 border-r border-sky-dark-100/30 last:border-r-0"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- Barre de remplissage -->
|
|
<div
|
|
class="progress-fill absolute inset-y-0 left-0 bg-gradient-to-r from-sky-accent to-sky-accent-light"
|
|
:class="{ 'transition-all duration-500 ease-out': !reducedMotion }"
|
|
:style="{ width: `${percent}%` }"
|
|
>
|
|
<!-- Effet de brillance -->
|
|
<div class="absolute inset-0 bg-gradient-to-b from-white/20 to-transparent"></div>
|
|
|
|
<!-- Effet glow au survol -->
|
|
<div
|
|
class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity"
|
|
:class="{ 'transition-none': reducedMotion }"
|
|
style="box-shadow: 0 0 10px var(--sky-accent), 0 0 20px var(--sky-accent)"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- Pourcentage -->
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<span class="text-xs font-ui font-bold text-sky-text drop-shadow-md">
|
|
{{ percent }}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tooltip -->
|
|
<Transition name="fade">
|
|
<div
|
|
v-if="showTooltip && showPopover"
|
|
class="absolute top-full left-1/2 -translate-x-1/2 mt-2 z-50"
|
|
>
|
|
<div class="bg-sky-dark-50 border border-sky-dark-100 rounded-lg shadow-xl p-3 min-w-48">
|
|
<!-- Titre -->
|
|
<p class="text-sm font-ui font-semibold text-sky-text mb-2">
|
|
{{ t('progress.title') }}
|
|
</p>
|
|
|
|
<!-- Liste des sections -->
|
|
<ul class="space-y-1">
|
|
<li
|
|
v-for="section in sections"
|
|
:key="section.key"
|
|
class="flex items-center gap-2 text-sm"
|
|
>
|
|
<span
|
|
v-if="section.visited"
|
|
class="text-green-400"
|
|
>✓</span>
|
|
<span
|
|
v-else
|
|
class="text-sky-text-muted"
|
|
>○</span>
|
|
<span
|
|
:class="section.visited ? 'text-sky-text' : 'text-sky-text-muted'"
|
|
>
|
|
{{ section.name }}
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Résumé -->
|
|
<p class="text-xs text-sky-text-muted mt-2 pt-2 border-t border-sky-dark-100">
|
|
{{ t('progress.summary', { visited: visitedCount, remaining: remainingCount }) }}
|
|
</p>
|
|
|
|
<!-- Flèche du tooltip -->
|
|
<div class="absolute -top-2 left-1/2 -translate-x-1/2 w-4 h-4 bg-sky-dark-50 border-l border-t border-sky-dark-100 transform rotate-45"></div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.progress-bar-wrapper:focus {
|
|
outline: 2px solid var(--sky-accent);
|
|
outline-offset: 2px;
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Version compacte pour mobile */
|
|
.compact .progress-frame {
|
|
height: 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.compact .progress-frame span {
|
|
font-size: 0.65rem;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.progress-fill {
|
|
transition: none;
|
|
}
|
|
}
|
|
</style>
|
|
```
|
|
|
|
### Clés i18n
|
|
|
|
**fr.json :**
|
|
```json
|
|
{
|
|
"progress": {
|
|
"label": "Progression : {percent}%",
|
|
"title": "Exploration du portfolio",
|
|
"sections": {
|
|
"projects": "Projets",
|
|
"skills": "Compétences",
|
|
"testimonials": "Témoignages",
|
|
"journey": "Parcours"
|
|
},
|
|
"summary": "{visited} visité(s), {remaining} à découvrir"
|
|
}
|
|
}
|
|
```
|
|
|
|
**en.json :**
|
|
```json
|
|
{
|
|
"progress": {
|
|
"label": "Progress: {percent}%",
|
|
"title": "Portfolio exploration",
|
|
"sections": {
|
|
"projects": "Projects",
|
|
"skills": "Skills",
|
|
"testimonials": "Testimonials",
|
|
"journey": "Journey"
|
|
},
|
|
"summary": "{visited} visited, {remaining} to discover"
|
|
}
|
|
}
|
|
```
|
|
|
|
### Intégration dans le Header
|
|
|
|
```vue
|
|
<!-- frontend/app/components/layout/AppHeader.vue (extrait) -->
|
|
<script setup>
|
|
const progressionStore = useProgressionStore()
|
|
|
|
// Afficher la barre uniquement en mode Aventure (pas en Express)
|
|
const showProgressBar = computed(() => {
|
|
return !progressionStore.expressMode
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<header class="app-header">
|
|
<!-- ... autres éléments ... -->
|
|
|
|
<!-- Progress Bar (desktop only, mode Aventure) -->
|
|
<ProgressBar
|
|
v-if="showProgressBar"
|
|
:percent="progressionStore.completionPercent"
|
|
class="hidden md:block"
|
|
/>
|
|
|
|
<!-- Language Switcher -->
|
|
<!-- ... -->
|
|
</header>
|
|
</template>
|
|
```
|
|
|
|
### Composant ProgressIcon pour mobile (Bottom Bar)
|
|
|
|
```vue
|
|
<!-- frontend/app/components/feature/ProgressIcon.vue -->
|
|
<script setup lang="ts">
|
|
const progressionStore = useProgressionStore()
|
|
const { t } = useI18n()
|
|
|
|
const showDrawer = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
type="button"
|
|
class="progress-icon relative p-3"
|
|
:aria-label="t('progress.label', { percent: progressionStore.completionPercent })"
|
|
@click="showDrawer = true"
|
|
>
|
|
<!-- Icône avec indicateur circulaire -->
|
|
<div class="relative w-8 h-8">
|
|
<!-- Cercle de progression -->
|
|
<svg class="w-full h-full -rotate-90" viewBox="0 0 36 36">
|
|
<!-- Fond -->
|
|
<circle
|
|
cx="18"
|
|
cy="18"
|
|
r="16"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="3"
|
|
class="text-sky-dark-100"
|
|
/>
|
|
<!-- Progression -->
|
|
<circle
|
|
cx="18"
|
|
cy="18"
|
|
r="16"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="3"
|
|
stroke-linecap="round"
|
|
class="text-sky-accent"
|
|
:stroke-dasharray="`${progressionStore.completionPercent}, 100`"
|
|
/>
|
|
</svg>
|
|
<!-- Pourcentage au centre -->
|
|
<span class="absolute inset-0 flex items-center justify-center text-xs font-ui font-bold text-sky-text">
|
|
{{ progressionStore.completionPercent }}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
|
|
<!-- Drawer/Modal avec détail -->
|
|
<Teleport to="body">
|
|
<Transition name="slide-up">
|
|
<div
|
|
v-if="showDrawer"
|
|
class="fixed inset-x-0 bottom-0 z-50 bg-sky-dark-50 rounded-t-2xl shadow-xl p-4 pb-safe"
|
|
style="bottom: var(--bottom-bar-height, 64px)"
|
|
>
|
|
<!-- Handle -->
|
|
<div class="w-12 h-1 bg-sky-dark-100 rounded-full mx-auto mb-4"></div>
|
|
|
|
<!-- Contenu -->
|
|
<h3 class="text-lg font-ui font-bold text-sky-text mb-4">
|
|
{{ t('progress.title') }}
|
|
</h3>
|
|
|
|
<!-- Barre compacte -->
|
|
<ProgressBar
|
|
:percent="progressionStore.completionPercent"
|
|
:show-tooltip="false"
|
|
compact
|
|
class="mb-4"
|
|
/>
|
|
|
|
<!-- Liste des sections -->
|
|
<!-- ... même logique que le tooltip desktop ... -->
|
|
|
|
<!-- Bouton fermer -->
|
|
<button
|
|
type="button"
|
|
class="mt-4 w-full py-2 bg-sky-dark-100 rounded-lg text-sky-text font-ui"
|
|
@click="showDrawer = false"
|
|
>
|
|
{{ t('common.close') }}
|
|
</button>
|
|
</div>
|
|
</Transition>
|
|
|
|
<!-- Overlay -->
|
|
<Transition name="fade">
|
|
<div
|
|
v-if="showDrawer"
|
|
class="fixed inset-0 bg-black/50 z-40"
|
|
@click="showDrawer = false"
|
|
></div>
|
|
</Transition>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.slide-up-enter-active,
|
|
.slide-up-leave-active {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.slide-up-enter-from,
|
|
.slide-up-leave-to {
|
|
transform: translateY(100%);
|
|
}
|
|
</style>
|
|
```
|
|
|
|
### Calcul du pourcentage dans le store
|
|
|
|
```typescript
|
|
// frontend/app/stores/progression.ts (extrait)
|
|
|
|
// Sections disponibles pour la progression
|
|
const AVAILABLE_SECTIONS = ['projets', 'competences', 'temoignages', 'parcours'] as const
|
|
type Section = typeof AVAILABLE_SECTIONS[number]
|
|
|
|
export const useProgressionStore = defineStore('progression', () => {
|
|
const visitedSections = ref<Section[]>([])
|
|
|
|
const completionPercent = computed(() => {
|
|
const visitedCount = visitedSections.value.length
|
|
return Math.round((visitedCount / AVAILABLE_SECTIONS.length) * 100)
|
|
})
|
|
|
|
function visitSection(section: Section) {
|
|
if (!visitedSections.value.includes(section)) {
|
|
visitedSections.value.push(section)
|
|
}
|
|
}
|
|
|
|
return {
|
|
visitedSections,
|
|
completionPercent,
|
|
visitSection,
|
|
}
|
|
})
|
|
```
|
|
|
|
### Dépendances
|
|
|
|
**Cette story nécessite :**
|
|
- Story 1.6 : Store Pinia (visitedSections, completionPercent, expressMode)
|
|
- Story 3.2 : useReducedMotion composable
|
|
|
|
**Cette story prépare pour :**
|
|
- Story 3.5 : Logique de progression (complète le store)
|
|
- Story 3.7 : Navigation mobile (utilise ProgressIcon)
|
|
|
|
### Project Structure Notes
|
|
|
|
**Fichiers à créer :**
|
|
```
|
|
frontend/app/components/feature/
|
|
├── ProgressBar.vue # CRÉER
|
|
└── ProgressIcon.vue # CRÉER (version mobile)
|
|
```
|
|
|
|
**Fichiers à modifier :**
|
|
```
|
|
frontend/app/components/layout/AppHeader.vue # AJOUTER ProgressBar
|
|
frontend/i18n/fr.json # AJOUTER progress.*
|
|
frontend/i18n/en.json # AJOUTER progress.*
|
|
```
|
|
|
|
### References
|
|
|
|
- [Source: docs/planning-artifacts/epics.md#Story-3.4]
|
|
- [Source: docs/planning-artifacts/ux-design-specification.md#XP-Bar]
|
|
- [Source: docs/planning-artifacts/ux-design-specification.md#Design-Tokens]
|
|
|
|
### Technical Requirements
|
|
|
|
| Requirement | Value | Source |
|
|
|-------------|-------|--------|
|
|
| Sections | 4 (25% chacune) | Epics |
|
|
| Couleur | sky-accent (#fa784f) | UX Spec |
|
|
| Animation | CSS transition 500ms | Décision technique |
|
|
| Position desktop | Header, à droite | Epics |
|
|
| Position mobile | Bottom bar (icône) | Epics |
|
|
|
|
## Dev Agent Record
|
|
|
|
### Agent Model Used
|
|
|
|
{{agent_model_name_version}}
|
|
|
|
### Debug Log References
|
|
|
|
### Completion Notes List
|
|
|
|
### Change Log
|
|
| Date | Change | Author |
|
|
|------|--------|--------|
|
|
| 2026-02-04 | Story créée avec contexte complet | SM Agent |
|
|
|
|
### File List
|
|
|