🎲 Add Pinia progression store & GDPR consent banner (Story 1.6)

Implements useProgressionStore with conditional localStorage persistence
(only after RGPD consent), immersive ConsentBanner with narrator style,
WelcomeBack component for returning visitors, and connects progress bar
in header to store.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-02-05 21:00:49 +01:00
parent dc3456bb1b
commit 9fd66def12
11 changed files with 434 additions and 67 deletions

View File

@@ -0,0 +1,74 @@
<template>
<Transition name="welcome">
<div
v-if="visible"
class="fixed top-20 right-4 z-40 max-w-sm p-4 bg-sky-dark/95 backdrop-blur-sm border border-sky-accent/30 rounded-xl shadow-lg"
role="status"
>
<div class="flex items-start gap-3">
<div class="text-2xl shrink-0" aria-hidden="true">&#x1f577;&#xfe0f;</div>
<div class="flex-1">
<p class="font-narrative text-sky-text text-sm mb-3">
{{ $t('welcome_back.message') }}
</p>
<div class="flex gap-2">
<button
class="px-4 py-1.5 bg-sky-accent text-sky-dark font-ui text-sm font-semibold rounded-lg hover:opacity-90 transition-opacity"
@click="dismiss"
>
{{ $t('welcome_back.continue') }}
</button>
<button
class="px-4 py-1.5 text-sky-text/70 hover:text-sky-text font-ui text-sm transition-colors"
@click="restart"
>
{{ $t('welcome_back.restart') }}
</button>
</div>
</div>
</div>
</div>
</Transition>
</template>
<script setup lang="ts">
import { useProgressionStore } from '~/stores/progression'
const store = useProgressionStore()
const visible = ref(false)
onMounted(() => {
if (store.hasExistingProgress) {
visible.value = true
}
})
function dismiss() {
visible.value = false
}
function restart() {
store.$reset()
visible.value = false
}
</script>
<style scoped>
.welcome-enter-active,
.welcome-leave-active {
transition: transform 0.3s ease, opacity 0.3s ease;
}
.welcome-enter-from,
.welcome-leave-to {
transform: translateX(100%);
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.welcome-enter-active,
.welcome-leave-active {
transition: none;
}
}
</style>