pet_data/components/pixel/InfoPanel.vue

<template>
  <PixelCard class="info-panel">
    <div class="tabs">
      <button 
        v-for="tab in tabs" 
        :key="tab.id"
        :class="['tab-btn', { active: activeTab === tab.id }]"
        @click="activeTab = tab.id"
      >
        {{ tab.icon }} {{ tab.label }}
      </button>
    </div>
    
    <div class="tab-content">
      <div v-if="activeTab === 'stats'" class="stats-grid">
        <div class="stat-item">
          <span class="stat-label">STR</span>
          <span class="stat-value">{{ petStats.str || 0 }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">INT</span>
          <span class="stat-value">{{ petStats.int || 0 }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">DEX</span>
          <span class="stat-value">{{ petStats.dex || 0 }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">LUCK</span>
          <span class="stat-value">{{ petStats.luck || 0 }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">AGE</span>
          <span class="stat-value">{{ formatAge(petStats.ageSeconds) }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">STAGE</span>
          <span class="stat-value">{{ petStats.stage || 'egg' }}</span>
        </div>
      </div>
      
      <div v-if="activeTab === 'inventory'" class="inventory-content">
        <p class="placeholder-text">Inventory system (coming soon)</p>
      </div>
      
      <div v-if="activeTab === 'achievements'" class="achievement-content">
        <p class="placeholder-text">Achievements (coming soon)</p>
      </div>
      
      <div v-if="activeTab === 'temple'" class="temple-content">
        <p class="placeholder-text">Temple system (coming soon)</p>
      </div>
    </div>
  </PixelCard>
</template>

<script setup>
import PixelCard from './PixelCard.vue'

const props = defineProps({
  petStats: {
    type: Object,
    default: () => ({})
  }
})

const activeTab = ref('stats')

const tabs = [
  { id: 'stats', label: 'Stats', icon: '📊' },
  { id: 'inventory', label: 'Items', icon: '🎒' },
  { id: 'achievements', label: 'Medals', icon: '🏆' },
  { id: 'temple', label: 'Temple', icon: '🙏' }
]

const formatAge = (seconds) => {
  if (!seconds) return '0h'
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  if (hours > 0) {
    return `${hours}h ${minutes}m`
  }
  return `${minutes}m`
}
</script>

<style scoped>
.info-panel {
  width: 100%;
}

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 3px solid #000;
  padding-bottom: 8px;
}

.tab-btn {
  font-family: 'Press Start 2P', cursive;
  background: white;
  border: 2px solid #000;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 10px;
  transition: all 0.1s ease;
}

.tab-btn:hover {
  background: #f0f0f0;
}

.tab-btn.active {
  background: #3498db;
  color: white;
  transform: translateY(2px);
}

.tab-content {
  min-height: 200px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  background: #f8f8f8;
  border: 2px solid #000;
  font-size: 10px;
}

.stat-label {
  font-weight: bold;
}

.stat-value {
  color: #3498db;
}

.placeholder-text {
  text-align: center;
  color: #888;
  font-size: 10px;
  padding: 40px 20px;
}
</style>