80 lines
2.7 KiB
Vue
80 lines
2.7 KiB
Vue
<template>
|
|
<div class="h-full flex flex-col p-4 gap-4 bg-[#1b1026] overflow-y-auto custom-scrollbar">
|
|
|
|
<!-- Deity Portrait & Header -->
|
|
<PixelFrame class="flex-shrink-0" title="WORSHIP" highlight>
|
|
<div class="flex flex-col items-center p-1">
|
|
<div class="w-24 h-24 bg-[#1b1026] border-4 border-[#d75b5b] mb-2 p-1 relative flex items-center justify-center overflow-hidden">
|
|
<!-- Background for portrait -->
|
|
<div class="absolute inset-0 bg-[#3d2459] opacity-50" />
|
|
|
|
<!-- Deity Avatar -->
|
|
<div class="scale-125 transform translate-y-2">
|
|
<PixelAvatar :deityId="deity.id" />
|
|
</div>
|
|
</div>
|
|
<h2 class="text-lg text-[#f6b26b] tracking-widest uppercase font-bold text-center leading-tight">
|
|
{{ deity.name }}
|
|
</h2>
|
|
<div class="text-xs text-[#8f80a0] mt-1 text-center font-bold">
|
|
{{ deity.title }}
|
|
</div>
|
|
</div>
|
|
</PixelFrame>
|
|
|
|
<!-- Favor Bar -->
|
|
<div class="px-1 mt-1">
|
|
<RetroResourceBar
|
|
:current="deity.favor"
|
|
:max="deity.maxFavor"
|
|
type="energy"
|
|
label="Favor (好感度)"
|
|
:icon="Heart"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Deity Details / Description -->
|
|
<PixelFrame variant="inset" class="mt-2 flex-grow overflow-y-auto custom-scrollbar">
|
|
<div class="flex flex-col gap-2 h-full p-1">
|
|
<div class="flex items-center gap-2 text-[#9fd75b] border-b border-[#4a3b5e] pb-1 sticky top-0 bg-[#150c1f] z-10">
|
|
<Sparkles :size="14" />
|
|
<span class="text-xs font-bold uppercase">Blessing</span>
|
|
</div>
|
|
|
|
<p class="text-xs text-[#e0d8f0] italic leading-relaxed">
|
|
"{{ deity.description }}"
|
|
</p>
|
|
|
|
<div class="mt-auto p-2 bg-[#231533] border border-[#4a3b5e]">
|
|
<span class="text-[10px] text-[#8f80a0] uppercase block mb-1">Current Effect:</span>
|
|
<span class="text-xs text-[#2ce8f4]">
|
|
{{ currentEffect }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</PixelFrame>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { Heart, Sparkles } from 'lucide-vue-next';
|
|
import PixelFrame from './PixelFrame.vue';
|
|
import RetroResourceBar from './RetroResourceBar.vue';
|
|
import PixelAvatar from './PixelAvatar.vue';
|
|
import type { Deity } from '~/types/pixel';
|
|
|
|
interface Props {
|
|
deity: Deity;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const currentEffect = computed(() => {
|
|
if (props.deity.favor >= 80) return "Divine Protection (DEF +20%)";
|
|
if (props.deity.favor >= 50) return "Minor Blessing (LCK +5)";
|
|
return "None (Pray more!)";
|
|
});
|
|
</script>
|