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>
135 lines
3.2 KiB
Vue
135 lines
3.2 KiB
Vue
<template>
|
|
<div class="challenge-page min-h-screen bg-sky-dark relative">
|
|
<!-- Skip button (always visible) -->
|
|
<button
|
|
v-if="!puzzleCompleted"
|
|
type="button"
|
|
class="absolute top-4 right-4 text-sky-text/60 hover:text-sky-text text-sm font-ui underline z-10"
|
|
:class="{ 'text-sky-accent': hintsUsed >= 3 }"
|
|
@click="skipChallenge"
|
|
>
|
|
{{ $t('challenge.skip') }}
|
|
</button>
|
|
|
|
<!-- Introduction -->
|
|
<Transition name="fade" mode="out-in">
|
|
<div
|
|
v-if="showIntro"
|
|
key="intro"
|
|
class="flex flex-col items-center justify-center min-h-screen p-8"
|
|
>
|
|
<div class="max-w-lg text-center">
|
|
<div class="w-24 h-24 mx-auto mb-6 bg-sky-accent/20 rounded-full flex items-center justify-center">
|
|
<span class="text-4xl" aria-hidden="true">?</span>
|
|
</div>
|
|
|
|
<h1 class="text-3xl font-ui font-bold text-sky-text mb-4">
|
|
{{ $t('challenge.title') }}
|
|
</h1>
|
|
|
|
<p class="font-narrative text-xl text-sky-text/60 mb-8">
|
|
{{ $t('challenge.intro') }}
|
|
</p>
|
|
|
|
<button
|
|
type="button"
|
|
class="px-8 py-3 bg-sky-accent text-white font-ui font-semibold rounded-lg hover:bg-sky-accent/90 transition-colors"
|
|
@click="startPuzzle"
|
|
>
|
|
{{ $t('challenge.accept') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Puzzle -->
|
|
<div
|
|
v-else-if="!puzzleCompleted"
|
|
key="puzzle"
|
|
class="flex flex-col items-center justify-center min-h-screen p-8"
|
|
>
|
|
<div class="max-w-2xl w-full">
|
|
<h2 class="text-xl font-ui font-bold text-sky-text mb-2 text-center">
|
|
{{ $t('challenge.puzzleTitle') }}
|
|
</h2>
|
|
|
|
<p class="text-sky-text/60 text-center mb-8">
|
|
{{ $t('challenge.puzzleInstruction') }}
|
|
</p>
|
|
|
|
<FeatureCodePuzzle
|
|
:hints-used="hintsUsed"
|
|
@solved="handlePuzzleSolved"
|
|
@hint-used="useHint"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Success -->
|
|
<div
|
|
v-else
|
|
key="success"
|
|
class="flex flex-col items-center justify-center min-h-screen p-8"
|
|
>
|
|
<FeatureChallengeSuccess />
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'adventure',
|
|
})
|
|
|
|
const router = useRouter()
|
|
const progressionStore = useProgressionStore()
|
|
const localePath = useLocalePath()
|
|
|
|
// Check if contact is unlocked
|
|
onMounted(() => {
|
|
if (!progressionStore.contactUnlocked) {
|
|
navigateTo(localePath('/'))
|
|
}
|
|
})
|
|
|
|
// States
|
|
const showIntro = ref(true)
|
|
const puzzleCompleted = ref(false)
|
|
const hintsUsed = ref(0)
|
|
|
|
function startPuzzle() {
|
|
showIntro.value = false
|
|
}
|
|
|
|
function handlePuzzleSolved() {
|
|
puzzleCompleted.value = true
|
|
progressionStore.completeChallenge()
|
|
|
|
// Wait for animation then navigate
|
|
setTimeout(() => {
|
|
navigateTo(localePath('/revelation'))
|
|
}, 3000)
|
|
}
|
|
|
|
function skipChallenge() {
|
|
// Skip does not mark as completed
|
|
navigateTo(localePath('/revelation'))
|
|
}
|
|
|
|
function useHint() {
|
|
hintsUsed.value++
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|