skycel
7e87a341a2
Epic 4: Chemins Narratifs, Challenge & Contact Stories implementees: - 4.1: Composant ChoiceCards pour choix narratifs binaires - 4.2: Sequence d'intro narrative avec Le Bug - 4.3: Chemins narratifs differencies avec useNarrativePath - 4.4: Table easter_eggs et systeme de detection (API + composable) - 4.5: Easter eggs UI (popup, notification, collection) - 4.6: Page challenge avec puzzle de code - 4.7: Page revelation "Monde de Code" - 4.8: Page contact avec formulaire et stats Fichiers crees: - Frontend: ChoiceCards, IntroSequence, ZoneEndChoice, EasterEggPopup, CodePuzzle, ChallengeSuccess, CodeWorld, et pages intro/challenge/revelation - API: EasterEggController, Model, Migration, Seeder Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
50 lines
1.2 KiB
Vue
50 lines
1.2 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<Transition name="toast">
|
|
<div
|
|
v-if="visible"
|
|
class="fixed top-4 right-4 z-50 bg-sky-dark-50 border border-sky-accent/50 rounded-lg px-4 py-3 shadow-lg shadow-sky-accent/20 flex items-center gap-3"
|
|
>
|
|
<span class="text-2xl" aria-hidden="true">*</span>
|
|
<div>
|
|
<p class="font-ui font-semibold text-sky-accent">
|
|
{{ $t('easterEgg.found') }}
|
|
</p>
|
|
<p class="text-sm text-sky-text/60">
|
|
{{ $t('easterEgg.count', { found: foundCount, total: totalEasterEggs }) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
visible: boolean
|
|
}>()
|
|
|
|
const progressionStore = useProgressionStore()
|
|
const { availableEasterEggs } = useFetchEasterEggs()
|
|
|
|
const totalEasterEggs = computed(() => availableEasterEggs.value.length || 8)
|
|
const foundCount = computed(() => progressionStore.easterEggsFoundCount)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.toast-enter-active,
|
|
.toast-leave-active {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.toast-enter-from {
|
|
opacity: 0;
|
|
transform: translateX(100px);
|
|
}
|
|
|
|
.toast-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
</style>
|