diff --git a/docs/implementation-artifacts/1-6-store-pinia-progression-bandeau-rgpd.md b/docs/implementation-artifacts/1-6-store-pinia-progression-bandeau-rgpd.md index 09e813b..419bd75 100644 --- a/docs/implementation-artifacts/1-6-store-pinia-progression-bandeau-rgpd.md +++ b/docs/implementation-artifacts/1-6-store-pinia-progression-bandeau-rgpd.md @@ -1,6 +1,6 @@ # Story 1.6: Store Pinia progression et bandeau RGPD -Status: ready-for-dev +Status: review ## Story @@ -19,75 +19,75 @@ so that je peux reprendre mon exploration et mes données sont protégées. ## Tasks / Subtasks -- [ ] **Task 1: Installation pinia-plugin-persistedstate** (AC: #3) - - [ ] Vérifier que `pinia-plugin-persistedstate` est installé (Story 1.1) - - [ ] Configurer le plugin dans `frontend/app/plugins/pinia.ts` - - [ ] S'assurer de la compatibilité SSR (pas de localStorage côté serveur) +- [x] **Task 1: Installation pinia-plugin-persistedstate** (AC: #3) + - [x] Vérifier que `pinia-plugin-persistedstate` est installé (Story 1.1) + - [x] Configurer le plugin dans `frontend/app/plugins/pinia.ts` + - [x] S'assurer de la compatibilité SSR (pas de localStorage côté serveur) -- [ ] **Task 2: Création du store useProgressionStore** (AC: #2, #4) - - [ ] Créer `frontend/app/stores/progression.ts` - - [ ] Définir l'interface `ProgressionState` avec tous les champs requis - - [ ] Implémenter le state initial (valeurs par défaut) - - [ ] Générer `sessionId` avec UUID v4 (côté client uniquement) - - [ ] Compatibilité SSR : state vide côté serveur +- [x] **Task 2: Création du store useProgressionStore** (AC: #2, #4) + - [x] Créer `frontend/app/stores/progression.ts` + - [x] Définir l'interface `ProgressionState` avec tous les champs requis + - [x] Implémenter le state initial (valeurs par défaut) + - [x] Générer `sessionId` avec UUID v4 (côté client uniquement) + - [x] Compatibilité SSR : state vide côté serveur -- [ ] **Task 3: Actions du store** (AC: #2, #6) - - [ ] `setHero(hero: HeroType)` : définir le héros choisi - - [ ] `visitSection(section: string)` : ajouter une section visitée, recalculer % - - [ ] `findEasterEgg(slug: string)` : ajouter un easter egg trouvé - - [ ] `completeChallenge()` : marquer le challenge comme complété - - [ ] `unlockContact()` : débloquer l'accès au contact - - [ ] `updateNarratorStage(stage: number)` : évolution du narrateur - - [ ] `makeChoice(choiceId: string, value: string)` : enregistrer un choix narratif - - [ ] `setConsent(given: boolean)` : définir le consentement RGPD - - [ ] `$reset()` : réinitialiser toute la progression +- [x] **Task 3: Actions du store** (AC: #2, #6) + - [x] `setHero(hero: HeroType)` : définir le héros choisi + - [x] `visitSection(section: string)` : ajouter une section visitée, recalculer % + - [x] `findEasterEgg(slug: string)` : ajouter un easter egg trouvé + - [x] `completeChallenge()` : marquer le challenge comme complété + - [x] `unlockContact()` : débloquer l'accès au contact + - [x] `updateNarratorStage(stage: number)` : évolution du narrateur + - [x] `makeChoice(choiceId: string, value: string)` : enregistrer un choix narratif + - [x] `setConsent(given: boolean)` : définir le consentement RGPD + - [x] `$reset()` : réinitialiser toute la progression -- [ ] **Task 4: Getters du store** (AC: #2) - - [ ] `hasVisited(section: string)` : vérifier si une section a été visitée - - [ ] `isContactUnlocked` : contact débloqué (2+ sections visitées) - - [ ] `progressPercent` : pourcentage de complétion calculé - - [ ] `hasExistingProgress` : progression existante détectée +- [x] **Task 4: Getters du store** (AC: #2) + - [x] `hasVisited(section: string)` : vérifier si une section a été visitée + - [x] `isContactUnlocked` : contact débloqué (2+ sections visitées) + - [x] `progressPercent` : pourcentage de complétion calculé + - [x] `hasExistingProgress` : progression existante détectée -- [ ] **Task 5: Persistance conditionnelle** (AC: #3, #4) - - [ ] Configurer `persist` avec condition sur `consentGiven` - - [ ] Key localStorage : `skycel-progression` - - [ ] Exclure certains champs de la persistance si nécessaire - - [ ] Gérer la réhydratation client après SSR +- [x] **Task 5: Persistance conditionnelle** (AC: #3, #4) + - [x] Configurer `persist` avec condition sur `consentGiven` + - [x] Key localStorage : `skycel-progression` + - [x] Exclure certains champs de la persistance si nécessaire + - [x] Gérer la réhydratation client après SSR -- [ ] **Task 6: Composant ConsentBanner immersif** (AC: #1) - - [ ] Créer `frontend/app/components/layout/ConsentBanner.vue` - - [ ] Style narratif : dialogue du narrateur (araignée) ou message immersif - - [ ] Texte : "Pour mémoriser ton aventure, j'ai besoin de ton accord..." - - [ ] Deux boutons : "Accepter" et "Refuser" (style cohérent) - - [ ] Animation d'apparition subtile - - [ ] Position : bas de l'écran, overlay semi-transparent +- [x] **Task 6: Composant ConsentBanner immersif** (AC: #1) + - [x] Créer `frontend/app/components/layout/ConsentBanner.vue` + - [x] Style narratif : dialogue du narrateur (araignée) ou message immersif + - [x] Texte : "Pour mémoriser ton aventure, j'ai besoin de ton accord..." + - [x] Deux boutons : "Accepter" et "Refuser" (style cohérent) + - [x] Animation d'apparition subtile + - [x] Position : bas de l'écran, overlay semi-transparent -- [ ] **Task 7: Intégration ConsentBanner dans le layout** (AC: #1) - - [ ] Ajouter `` dans `layouts/default.vue` - - [ ] Afficher uniquement si `!store.consentGiven` ET côté client - - [ ] Après acceptation : activer la persistance, masquer le bandeau - - [ ] Après refus : masquer le bandeau, ne pas persister (mais store fonctionne en mémoire) +- [x] **Task 7: Intégration ConsentBanner dans le layout** (AC: #1) + - [x] Ajouter `` dans `layouts/default.vue` + - [x] Afficher uniquement si `!store.consentGiven` ET côté client + - [x] Après acceptation : activer la persistance, masquer le bandeau + - [x] Après refus : masquer le bandeau, ne pas persister (mais store fonctionne en mémoire) -- [ ] **Task 8: Message "Bienvenue à nouveau"** (AC: #5) - - [ ] Détecter si `hasExistingProgress` au chargement (côté client) - - [ ] Si oui, afficher un message via le narrateur ou une notification discrète - - [ ] Proposer optionnellement de recommencer (`$reset()`) - - [ ] Ce message sera affiné en Epic 3 avec le composant NarratorBubble +- [x] **Task 8: Message "Bienvenue à nouveau"** (AC: #5) + - [x] Détecter si `hasExistingProgress` au chargement (côté client) + - [x] Si oui, afficher un message via le narrateur ou une notification discrète + - [x] Proposer optionnellement de recommencer (`$reset()`) + - [x] Ce message sera affiné en Epic 3 avec le composant NarratorBubble -- [ ] **Task 9: Calcul de la progression** (AC: #2) - - [ ] Définir les sections comptabilisées : projets, competences, temoignages, parcours - - [ ] Formule : `(visitedSections.length / totalSections) * 100` - - [ ] Mettre à jour `completionPercent` automatiquement via le getter ou action - - [ ] Trigger `unlockContact` si >= 2 sections visitées +- [x] **Task 9: Calcul de la progression** (AC: #2) + - [x] Définir les sections comptabilisées : projets, competences, temoignages, parcours + - [x] Formule : `(visitedSections.length / totalSections) * 100` + - [x] Mettre à jour `completionPercent` automatiquement via le getter ou action + - [x] Trigger `unlockContact` si >= 2 sections visitées -- [ ] **Task 10: Tests et validation** (AC: tous) - - [ ] Store accessible dans les composants via `useProgressionStore()` - - [ ] Persistance fonctionne après acceptation RGPD - - [ ] Pas de persistance si refus (mais store en mémoire OK) - - [ ] Réinitialisation fonctionne - - [ ] Compatible SSR (pas d'erreur hydration mismatch) - - [ ] ConsentBanner s'affiche correctement - - [ ] Message "Bienvenue à nouveau" fonctionne +- [x] **Task 10: Tests et validation** (AC: tous) + - [x] Store accessible dans les composants via `useProgressionStore()` + - [x] Persistance fonctionne après acceptation RGPD + - [x] Pas de persistance si refus (mais store en mémoire OK) + - [x] Réinitialisation fonctionne + - [x] Compatible SSR (pas d'erreur hydration mismatch) + - [x] ConsentBanner s'affiche correctement + - [x] Message "Bienvenue à nouveau" fonctionne ## Dev Notes @@ -401,16 +401,41 @@ frontend/ ### Agent Model Used -{{agent_model_name_version}} +Claude Opus 4.5 (claude-opus-4-5-20251101) ### Debug Log References +- Aucun problème majeur. Build SSR validé, store sérialisé correctement dans __NUXT_DATA__. + ### Completion Notes List +- Plugin pinia-persistedstate configuré via Nuxt plugin (accès à $pinia existant de @pinia/nuxt) +- Store useProgressionStore avec state complet (sessionId, hero, visitedSections, etc.) +- Persistance conditionnelle : custom Storage qui ne persiste que si consentGiven === true +- UUID via crypto.randomUUID() (natif, pas de dépendance externe) +- ConsentBanner immersif avec emoji araignée narrateur, style dialogue, animation slide-up +- WelcomeBack composant pour visiteurs de retour avec option "Reprendre" ou "Recommencer" +- Barre de progression dans AppHeader connectée au store (progressPercent) +- Intégration store dans landing page (setHero au confirm) +- ClientOnly pour ConsentBanner et WelcomeBack (évite hydration mismatch) +- prefers-reduced-motion respecté sur les animations du consent banner +- Traductions FR/EN ajoutées pour consent.* et welcome_back.* + ### Change Log | Date | Change | Author | |------|--------|--------| | 2026-02-03 | Story créée avec contexte complet | SM Agent | +| 2026-02-05 | Tasks 1-10 implémentées et validées | Dev Agent (Claude Opus 4.5) | ### File List +- `frontend/app/plugins/pinia-persistedstate.ts` — CRÉÉ +- `frontend/app/stores/progression.ts` — CRÉÉ +- `frontend/app/components/layout/ConsentBanner.vue` — CRÉÉ +- `frontend/app/components/layout/WelcomeBack.vue` — CRÉÉ +- `frontend/app/layouts/default.vue` — MODIFIÉ (ajout ConsentBanner) +- `frontend/app/pages/index.vue` — MODIFIÉ (intégration store) +- `frontend/app/components/layout/AppHeader.vue` — MODIFIÉ (barre progression connectée au store) +- `frontend/i18n/fr.json` — MODIFIÉ (ajout consent.*, welcome_back.*) +- `frontend/i18n/en.json` — MODIFIÉ (ajout consent.*, welcome_back.*) + diff --git a/docs/implementation-artifacts/sprint-status.yaml b/docs/implementation-artifacts/sprint-status.yaml index 4b19a9a..73b63e7 100644 --- a/docs/implementation-artifacts/sprint-status.yaml +++ b/docs/implementation-artifacts/sprint-status.yaml @@ -49,7 +49,7 @@ development_status: 1-3-systeme-i18n-frontend-api-bilingue: review 1-4-layouts-routing-transitions-page: review 1-5-landing-page-choix-heros: review - 1-6-store-pinia-progression-bandeau-rgpd: ready-for-dev + 1-6-store-pinia-progression-bandeau-rgpd: review 1-7-page-resume-express-mode-presse: ready-for-dev epic-1-retrospective: optional diff --git a/frontend/app/components/layout/AppHeader.vue b/frontend/app/components/layout/AppHeader.vue index a288565..f09a747 100644 --- a/frontend/app/components/layout/AppHeader.vue +++ b/frontend/app/components/layout/AppHeader.vue @@ -22,9 +22,12 @@
- + diff --git a/frontend/app/pages/index.vue b/frontend/app/pages/index.vue index 9462c61..e828897 100644 --- a/frontend/app/pages/index.vue +++ b/frontend/app/pages/index.vue @@ -34,15 +34,21 @@ />
+ + + + diff --git a/frontend/app/plugins/pinia-persistedstate.ts b/frontend/app/plugins/pinia-persistedstate.ts new file mode 100644 index 0000000..8e0b8a2 --- /dev/null +++ b/frontend/app/plugins/pinia-persistedstate.ts @@ -0,0 +1,5 @@ +import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' + +export default defineNuxtPlugin((nuxtApp) => { + nuxtApp.$pinia.use(piniaPluginPersistedstate) +}) diff --git a/frontend/app/stores/progression.ts b/frontend/app/stores/progression.ts new file mode 100644 index 0000000..e68bab6 --- /dev/null +++ b/frontend/app/stores/progression.ts @@ -0,0 +1,149 @@ +import { defineStore } from 'pinia' + +export type HeroType = 'recruteur' | 'client' | 'dev' + +export interface ProgressionState { + sessionId: string + hero: HeroType | null + currentPath: string + visitedSections: string[] + completionPercent: number + easterEggsFound: string[] + challengeCompleted: boolean + contactUnlocked: boolean + narratorStage: number + choices: Record + consentGiven: boolean | null +} + +const SECTIONS = ['projets', 'competences', 'temoignages', 'parcours'] as const + +/** + * Storage conditionnel : ne persiste que si consentGiven === true. + * La lecture est toujours autorisée (pour restaurer une session existante). + */ +const conditionalStorage: Storage = { + get length() { + return import.meta.client ? localStorage.length : 0 + }, + key(index: number) { + return import.meta.client ? localStorage.key(index) : null + }, + getItem(key: string) { + if (import.meta.client) { + return localStorage.getItem(key) + } + return null + }, + setItem(key: string, value: string) { + if (import.meta.client) { + try { + const parsed = JSON.parse(value) + if (parsed.consentGiven === true) { + localStorage.setItem(key, value) + } + } catch { + // Si parsing échoue, ne pas persister + } + } + }, + removeItem(key: string) { + if (import.meta.client) { + localStorage.removeItem(key) + } + }, + clear() { + if (import.meta.client) { + localStorage.clear() + } + }, +} + +export const useProgressionStore = defineStore('progression', { + state: (): ProgressionState => ({ + sessionId: '', + hero: null, + currentPath: 'start', + visitedSections: [], + completionPercent: 0, + easterEggsFound: [], + challengeCompleted: false, + contactUnlocked: false, + narratorStage: 1, + choices: {}, + consentGiven: null, + }), + + getters: { + hasVisited: (state) => (section: string) => state.visitedSections.includes(section), + + isContactUnlocked: (state) => state.visitedSections.length >= 2 || state.contactUnlocked, + + progressPercent: (state) => Math.round((state.visitedSections.length / SECTIONS.length) * 100), + + hasExistingProgress: (state) => state.visitedSections.length > 0 || state.hero !== null, + }, + + actions: { + initSession() { + if (!this.sessionId && import.meta.client) { + this.sessionId = crypto.randomUUID() + } + }, + + setHero(hero: HeroType) { + this.hero = hero + this.initSession() + }, + + visitSection(section: string) { + if (!this.visitedSections.includes(section)) { + this.visitedSections.push(section) + this.completionPercent = this.progressPercent + + if (this.visitedSections.length >= 2) { + this.contactUnlocked = true + } + } + }, + + findEasterEgg(slug: string) { + if (!this.easterEggsFound.includes(slug)) { + this.easterEggsFound.push(slug) + } + }, + + completeChallenge() { + this.challengeCompleted = true + }, + + unlockContact() { + this.contactUnlocked = true + }, + + updateNarratorStage(stage: number) { + if (stage >= 1 && stage <= 5) { + this.narratorStage = stage + } + }, + + makeChoice(choiceId: string, value: string) { + this.choices[choiceId] = value + }, + + setConsent(given: boolean) { + this.consentGiven = given + if (given) { + this.initSession() + } else if (import.meta.client) { + // Si refus, supprimer les données stockées + localStorage.removeItem('skycel-progression') + } + }, + }, + + persist: { + key: 'skycel-progression', + storage: conditionalStorage, + }, +}) diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json index 695c6d2..98bd423 100644 --- a/frontend/i18n/en.json +++ b/frontend/i18n/en.json @@ -52,6 +52,17 @@ "copyright": "© {year} Célian — Skycel", "built_with": "Built with Nuxt & Laravel" }, + "consent": { + "aria_label": "Consent banner", + "message": "To save your adventure and let you pick up where you left off, I need your permission to store a few details on your device. Nothing personal, just your progress!", + "accept": "Sure, save my adventure", + "refuse": "No thanks, I prefer to stay anonymous" + }, + "welcome_back": { + "message": "Welcome back, adventurer! You had started your exploration...", + "continue": "Continue", + "restart": "Start over" + }, "pages": { "projects": { "title": "Projects", diff --git a/frontend/i18n/fr.json b/frontend/i18n/fr.json index 11bdfde..420221a 100644 --- a/frontend/i18n/fr.json +++ b/frontend/i18n/fr.json @@ -52,6 +52,17 @@ "copyright": "© {year} Célian — Skycel", "built_with": "Construit avec Nuxt & Laravel" }, + "consent": { + "aria_label": "Bandeau de consentement", + "message": "Pour m\u00e9moriser ton aventure et te permettre de la reprendre plus tard, j'ai besoin de ton accord pour stocker quelques informations sur ton appareil. Rien de personnel, juste ta progression !", + "accept": "D'accord, m\u00e9morise mon aventure", + "refuse": "Non merci, je pr\u00e9f\u00e8re rester anonyme" + }, + "welcome_back": { + "message": "Content de te revoir, aventurier ! Tu avais commenc\u00e9 ton exploration...", + "continue": "Reprendre", + "restart": "Recommencer" + }, "pages": { "projects": { "title": "Projets",