skycel
9fd66def12
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>
75 lines
1.8 KiB
Vue
75 lines
1.8 KiB
Vue
<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">🕷️</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>
|