79 lines
2.9 KiB
Vue
79 lines
2.9 KiB
Vue
<template>
|
|
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
|
|
<PixelFrame class="w-full max-w-md bg-[#1b1026] p-6 flex flex-col items-center gap-6" title="NEW ADVENTURE">
|
|
|
|
<div class="text-center">
|
|
<h2 class="text-[#99e550] text-xl font-bold mb-2 tracking-widest">歡迎來到電子雞世界</h2>
|
|
<p class="text-[#8f80a0] text-sm">請選擇您的夥伴並取個名字</p>
|
|
</div>
|
|
|
|
<!-- Species Selection -->
|
|
<div class="flex gap-4 w-full justify-center">
|
|
<button
|
|
@click="species = 'cat'"
|
|
class="flex-1 p-4 border-2 flex flex-col items-center gap-2 transition-all relative group"
|
|
:class="species === 'cat' ? 'border-[#99e550] bg-[#2b193f]' : 'border-[#4a3b5e] bg-[#0f0816] hover:bg-[#1b1026]'"
|
|
>
|
|
<div class="text-2xl">🐱</div>
|
|
<span class="font-bold font-mono" :class="species === 'cat' ? 'text-[#99e550]' : 'text-[#8f80a0]'">貓咪 (Cat)</span>
|
|
<div v-if="species === 'cat'" class="absolute top-1 right-1 w-2 h-2 bg-[#99e550]"></div>
|
|
</button>
|
|
|
|
<button
|
|
@click="species = 'dog'"
|
|
class="flex-1 p-4 border-2 flex flex-col items-center gap-2 transition-all relative group"
|
|
:class="species === 'dog' ? 'border-[#99e550] bg-[#2b193f]' : 'border-[#4a3b5e] bg-[#0f0816] hover:bg-[#1b1026]'"
|
|
>
|
|
<div class="text-2xl">🐶</div>
|
|
<span class="font-bold font-mono" :class="species === 'dog' ? 'text-[#99e550]' : 'text-[#8f80a0]'">狗狗 (Dog)</span>
|
|
<div v-if="species === 'dog'" class="absolute top-1 right-1 w-2 h-2 bg-[#99e550]"></div>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="w-full">
|
|
<input
|
|
v-model="name"
|
|
type="text"
|
|
placeholder="輸入名字..."
|
|
class="w-full bg-[#0f0816] border-2 border-[#4a3b5e] text-[#e0d8f0] p-3 text-center focus:border-[#9fd75b] focus:outline-none transition-colors placeholder-[#4a3b5e]"
|
|
@keyup.enter="submit"
|
|
maxlength="12"
|
|
/>
|
|
<div class="text-right mt-1">
|
|
<span class="text-[10px]" :class="name.length > 10 ? 'text-[#d95763]' : 'text-[#4a3b5e]'">
|
|
{{ name.length }}/12
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<PixelButton
|
|
class="w-full py-3 text-lg"
|
|
:disabled="!isValid"
|
|
@click="submit"
|
|
>
|
|
開始冒險 (START)
|
|
</PixelButton>
|
|
|
|
</PixelFrame>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed } from 'vue';
|
|
import PixelFrame from './PixelFrame.vue';
|
|
import PixelButton from './PixelButton.vue';
|
|
|
|
const emit = defineEmits(['submit']);
|
|
|
|
const name = ref('');
|
|
const species = ref<'cat' | 'dog'>('cat');
|
|
|
|
const isValid = computed(() => name.value.trim().length > 0 && name.value.length <= 12);
|
|
|
|
const submit = () => {
|
|
if (isValid.value) {
|
|
emit('submit', { name: name.value.trim(), species: species.value });
|
|
}
|
|
};
|
|
</script>
|