pet_data/app/components/pixel/BattleArea.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>