skycel
99fa61fcaa
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>
41 lines
697 B
Vue
41 lines
697 B
Vue
<script setup lang="ts">
|
|
const narrator = useNarrator()
|
|
|
|
useIdleDetection({
|
|
timeout: 30000,
|
|
onIdle: () => {
|
|
narrator.showHint()
|
|
},
|
|
})
|
|
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
narrator.showIntro()
|
|
}, 1500)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-sky-dark text-sky-text flex flex-col">
|
|
<LayoutAppHeader />
|
|
|
|
<main class="flex-1">
|
|
<slot />
|
|
</main>
|
|
|
|
<LayoutAppFooter />
|
|
|
|
<ClientOnly>
|
|
<LayoutConsentBanner />
|
|
</ClientOnly>
|
|
|
|
<ClientOnly>
|
|
<NarratorBubble
|
|
:message="narrator.currentMessage.value"
|
|
:visible="narrator.isVisible.value"
|
|
@close="narrator.hide()"
|
|
/>
|
|
</ClientOnly>
|
|
</div>
|
|
</template>
|