✨ feat(frontend): système narrateur contextuel avec arc de révélation
Story 3.3 : Textes narrateur contextuels et arc de révélation - Composable useNarrator.ts avec queue de messages prioritaires - Composable useIdleDetection.ts (détection inactivité 30s) - Plugin narrator-transitions.client.ts (déclencheurs de navigation) - Layout adventure.vue avec NarratorBubble intégré - Store progression: narratorStage devient un getter calculé (0-20-40-60-80%) - Pages projets, competences, temoignages, parcours utilisent layout adventure - Messages: intro, transitions, encouragements 25/50/75%, hints, contact_unlocked Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
# Story 3.3: Textes narrateur contextuels et arc de révélation
|
||||
|
||||
Status: ready-for-dev
|
||||
Status: review
|
||||
|
||||
## Story
|
||||
|
||||
@@ -22,63 +22,63 @@ so that l'expérience est personnalisée et le narrateur devient familier.
|
||||
|
||||
## Tasks / Subtasks
|
||||
|
||||
- [ ] **Task 1: Créer le composable useNarrator** (AC: #1, #2, #3, #4, #5, #6)
|
||||
- [ ] Créer `frontend/app/composables/useNarrator.ts`
|
||||
- [ ] Centraliser la logique d'affichage du narrateur
|
||||
- [ ] Exposer les méthodes : showIntro, showTransition, showEncouragement, showHint, showWelcomeBack, showContactUnlocked
|
||||
- [ ] Gérer la queue de messages (ne pas interrompre un message en cours)
|
||||
- [ ] Intégrer le composable useFetchNarratorText
|
||||
- [x] **Task 1: Créer le composable useNarrator** (AC: #1, #2, #3, #4, #5, #6)
|
||||
- [x] Créer `frontend/app/composables/useNarrator.ts`
|
||||
- [x] Centraliser la logique d'affichage du narrateur
|
||||
- [x] Exposer les méthodes : showIntro, showTransition, showEncouragement, showHint, showWelcomeBack, showContactUnlocked
|
||||
- [x] Gérer la queue de messages (ne pas interrompre un message en cours)
|
||||
- [x] Intégrer le composable useFetchNarratorText
|
||||
|
||||
- [ ] **Task 2: Implémenter les déclencheurs de transition** (AC: #2)
|
||||
- [ ] Déclencher sur navigation vers /projets (transition_projects)
|
||||
- [ ] Déclencher sur navigation vers /competences (transition_skills)
|
||||
- [ ] Déclencher sur navigation vers /temoignages (transition_testimonials)
|
||||
- [ ] Déclencher sur navigation vers /parcours (transition_journey)
|
||||
- [ ] Utiliser un plugin Nuxt ou watcher sur la route
|
||||
- [x] **Task 2: Implémenter les déclencheurs de transition** (AC: #2)
|
||||
- [x] Déclencher sur navigation vers /projets (transition_projects)
|
||||
- [x] Déclencher sur navigation vers /competences (transition_skills)
|
||||
- [x] Déclencher sur navigation vers /temoignages (transition_testimonials)
|
||||
- [x] Déclencher sur navigation vers /parcours (transition_journey)
|
||||
- [x] Utiliser un plugin Nuxt ou watcher sur la route
|
||||
|
||||
- [ ] **Task 3: Implémenter la détection d'inactivité** (AC: #4)
|
||||
- [ ] Créer `frontend/app/composables/useIdleDetection.ts`
|
||||
- [ ] Détecter l'absence d'interaction > 30 secondes
|
||||
- [ ] Écouter mouse, keyboard, touch, scroll
|
||||
- [ ] Déclencher `showHint()` quand idle détecté
|
||||
- [ ] Ne pas répéter les hints trop souvent (cooldown de 2min)
|
||||
- [x] **Task 3: Implémenter la détection d'inactivité** (AC: #4)
|
||||
- [x] Créer `frontend/app/composables/useIdleDetection.ts`
|
||||
- [x] Détecter l'absence d'interaction > 30 secondes
|
||||
- [x] Écouter mouse, keyboard, touch, scroll
|
||||
- [x] Déclencher `showHint()` quand idle détecté
|
||||
- [x] Ne pas répéter les hints trop souvent (cooldown de 2min)
|
||||
|
||||
- [ ] **Task 4: Implémenter les encouragements basés sur la progression** (AC: #3)
|
||||
- [ ] Watcher sur `completionPercent` du store
|
||||
- [ ] Déclencher à 25%, 50%, 75%
|
||||
- [ ] Garder en mémoire les seuils déjà atteints (ne pas répéter)
|
||||
- [x] **Task 4: Implémenter les encouragements basés sur la progression** (AC: #3)
|
||||
- [x] Watcher sur `completionPercent` du store
|
||||
- [x] Déclencher à 25%, 50%, 75%
|
||||
- [x] Garder en mémoire les seuils déjà atteints (ne pas répéter)
|
||||
|
||||
- [ ] **Task 5: Implémenter l'arc de révélation du Bug** (AC: #7, #8, #9)
|
||||
- [ ] Définir les seuils de progression pour chaque stage :
|
||||
- [x] **Task 5: Implémenter l'arc de révélation du Bug** (AC: #7, #8, #9)
|
||||
- [x] Définir les seuils de progression pour chaque stage :
|
||||
- Stage 1 : 0-19%
|
||||
- Stage 2 : 20-39%
|
||||
- Stage 3 : 40-59%
|
||||
- Stage 4 : 60-79%
|
||||
- Stage 5 : 80-100%
|
||||
- [ ] Mettre à jour `narratorStage` dans le store
|
||||
- [ ] L'image du Bug se met à jour automatiquement via NarratorBubble
|
||||
- [x] Mettre à jour `narratorStage` dans le store (getter calculé)
|
||||
- [x] L'image du Bug se met à jour automatiquement via NarratorBubble
|
||||
|
||||
- [ ] **Task 6: Implémenter le message "Bienvenue à nouveau"** (AC: #5)
|
||||
- [ ] Détecter au chargement si `visitedSections` n'est pas vide (progression existante)
|
||||
- [ ] Afficher le message `welcome_back` dans ce cas
|
||||
- [ ] Sinon afficher le message `intro` normal
|
||||
- [x] **Task 6: Implémenter le message "Bienvenue à nouveau"** (AC: #5)
|
||||
- [x] Détecter au chargement si `visitedSections` n'est pas vide (progression existante)
|
||||
- [x] Afficher le message `welcome_back` dans ce cas
|
||||
- [x] Sinon afficher le message `intro` normal
|
||||
|
||||
- [ ] **Task 7: Implémenter le message de déblocage contact** (AC: #6)
|
||||
- [ ] Watcher sur `contactUnlocked` du store
|
||||
- [ ] Quand passe à `true`, afficher `contact_unlocked`
|
||||
- [x] **Task 7: Implémenter le message de déblocage contact** (AC: #6)
|
||||
- [x] Watcher sur `contactUnlocked` du store
|
||||
- [x] Quand passe à `true`, afficher `contact_unlocked`
|
||||
|
||||
- [ ] **Task 8: Intégrer dans le layout principal**
|
||||
- [ ] Ajouter le NarratorBubble dans default.vue ou adventure.vue
|
||||
- [ ] Initialiser useNarrator dans le layout
|
||||
- [ ] Gérer l'état visible/hidden du narrateur
|
||||
- [x] **Task 8: Intégrer dans le layout principal**
|
||||
- [x] Ajouter le NarratorBubble dans adventure.vue
|
||||
- [x] Initialiser useNarrator dans le layout
|
||||
- [x] Gérer l'état visible/hidden du narrateur
|
||||
|
||||
- [ ] **Task 9: Tests et validation**
|
||||
- [ ] Tester le message d'accueil adapté au héros
|
||||
- [ ] Tester les transitions entre pages
|
||||
- [ ] Vérifier les encouragements à 25/50/75%
|
||||
- [ ] Tester la détection d'inactivité
|
||||
- [ ] Valider l'évolution du Bug (5 stages)
|
||||
- [ ] Tester le "Bienvenue à nouveau"
|
||||
- [x] **Task 9: Tests et validation**
|
||||
- [x] Tester le message d'accueil adapté au héros
|
||||
- [x] Tester les transitions entre pages
|
||||
- [x] Vérifier les encouragements à 25/50/75%
|
||||
- [x] Tester la détection d'inactivité
|
||||
- [x] Valider l'évolution du Bug (5 stages)
|
||||
- [x] Tester le "Bienvenue à nouveau"
|
||||
|
||||
## Dev Notes
|
||||
|
||||
|
||||
Reference in New Issue
Block a user