You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.2 KiB
Vue
50 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
interface Props {
|
|
solution: string
|
|
}
|
|
defineProps<Props>()
|
|
|
|
const messages = [
|
|
'Yeah! Gratuladingsda!',
|
|
'Ja, jetzt genieß doch erstmal ein bisschen deinen Triumpf!',
|
|
'Ist dir denn das tolle Konfetti gar nichts wert?! Guck doch mal!',
|
|
'Das Konfetti zu basteln, war echt gar nicht mal so einfach, okay?',
|
|
'Na gut, na gut... hier bitte, dein Geschenk. Alles Gute zum Geburtstag!',
|
|
]
|
|
const buttons = [
|
|
'Wattn jetze nu mein Geschenk?',
|
|
'Okay, habe ich. Jetzt her mit dem Geschenk!',
|
|
'Doch doch, ist alles total toll. Wo ist nochmal das Geschenk?',
|
|
'Ja ja, du bist richtig toll, hui, Konfetti! Geschenk?!',
|
|
'',
|
|
]
|
|
|
|
const index = ref(1)
|
|
const emit = defineEmits<{
|
|
(e: 'success'): void
|
|
}>()
|
|
|
|
const success = ref(false)
|
|
|
|
function raiseIndex() {
|
|
index.value++
|
|
if (index.value > 4) {
|
|
success.value = true
|
|
setTimeout(() => emit('success'), 3500)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="solution" :class="{ 'solved': success }">
|
|
<div class="history">
|
|
<div v-for="letter in solution" class="letter green">{{ letter }}</div>
|
|
</div>
|
|
|
|
<p v-for="i in index">{{ messages[i - 1] }}</p>
|
|
<button @click="raiseIndex">{{ buttons[index - 1] }}</button>
|
|
</div>
|
|
</template>
|