90 lines
3.2 KiB
Vue
90 lines
3.2 KiB
Vue
<template>
|
||
<div v-if="isFighting" class="h-full w-full bg-black p-4 font-mono overflow-hidden flex flex-col border-b-4 border-[#99e550]">
|
||
<div class="text-[#99e550] text-sm mb-2 border-b border-gray-700 pb-1 flex justify-between animate-pulse">
|
||
<span>► BATTLE_LOG_V1.0</span>
|
||
<span>RECORDING...</span>
|
||
</div>
|
||
|
||
<div class="flex-grow overflow-y-auto custom-scrollbar flex flex-col gap-1 pr-2">
|
||
<div v-for="(log, index) in battleLogs" :key="index" class="text-sm md:text-base leading-tight">
|
||
<span class="text-gray-500 mr-2">[{{ index + 1 }}]</span>
|
||
<span v-if="log.includes('Victory') || log.includes('Success')" class="text-[#2ce8f4] font-bold">{{ log }}</span>
|
||
<span v-else-if="log.includes('damage') || log.includes('Hurt')" class="text-[#d95763]">{{ log }}</span>
|
||
<span v-else-if="log.includes('used')" class="text-[#f6b26b]">{{ log }}</span>
|
||
<span v-else class="text-[#99e550]">{{ log }}</span>
|
||
</div>
|
||
<div ref="logEndRef" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Room Mode (Default) -->
|
||
<div v-else class="h-full w-full relative overflow-hidden bg-[#0f0816]">
|
||
<!-- Background Layer with Darker Filter -->
|
||
<div
|
||
class="absolute inset-0 bg-cover bg-center transition-all duration-1000"
|
||
:style="{
|
||
backgroundImage: `url('${backgroundImage || 'https://picsum.photos/seed/dungeon/800/400'}')`,
|
||
filter: 'contrast(1.1) brightness(0.6) sepia(0.3)'
|
||
}"
|
||
/>
|
||
|
||
<!-- Pixelated Dither Overlay -->
|
||
<div
|
||
class="absolute inset-0 opacity-10 pointer-events-none"
|
||
:style="{
|
||
backgroundImage: `repeating-linear-gradient(45deg, #000 0, #000 1px, transparent 0, transparent 50%)`,
|
||
backgroundSize: '4px 4px'
|
||
}"
|
||
/>
|
||
|
||
<!-- Room Decor - Ground Rug/Circle -->
|
||
<div class="absolute bottom-12 left-1/2 transform -translate-x-1/2 w-48 h-12 bg-[#2b193f] opacity-60 rounded-[50%] border-2 border-[#4a3b5e] shadow-[0_0_20px_rgba(0,0,0,0.5)]"></div>
|
||
|
||
<!-- Battle Log Mode (If Fighting) -->
|
||
<div v-if="isFighting" class="absolute inset-0 bg-black/80 backdrop-blur-sm p-6">
|
||
<PixelFrame class="h-full flex flex-col">
|
||
<div class="text-[#2ce8f4] text-sm mb-4 uppercase tracking-widest font-bold">
|
||
⚔️ BATTLE LOG
|
||
</div>
|
||
|
||
<div class="flex-1 overflow-y-auto custom-scrollbar space-y-2 text-xs">
|
||
<div
|
||
v-for="(log, idx) in battleLogs"
|
||
:key="idx"
|
||
class="text-[#e0d8f0] animate-fade-in"
|
||
>
|
||
› {{ log }}
|
||
</div>
|
||
</div>
|
||
</PixelFrame>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, watch, nextTick } from 'vue';
|
||
// PixelAvatar removed as requested
|
||
|
||
interface Props {
|
||
currentDeityId?: string;
|
||
isFighting?: boolean;
|
||
battleLogs?: string[];
|
||
backgroundImage?: string;
|
||
}
|
||
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
isFighting: false,
|
||
battleLogs: () => [],
|
||
backgroundImage: ''
|
||
});
|
||
|
||
const logEndRef = ref<HTMLDivElement | null>(null);
|
||
|
||
watch(() => props.battleLogs, async () => {
|
||
await nextTick();
|
||
if (logEndRef.value) {
|
||
logEndRef.value.scrollIntoView({ behavior: 'smooth' });
|
||
}
|
||
}, { deep: true });
|
||
</script>
|