55 lines
1.6 KiB
Vue
55 lines
1.6 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>
|
|
|
|
<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 isValid = computed(() => name.value.trim().length > 0 && name.value.length <= 12);
|
|
|
|
const submit = () => {
|
|
if (isValid.value) {
|
|
emit('submit', name.value.trim());
|
|
}
|
|
};
|
|
</script>
|