feat: add backpack

src/components/ActionMenu.vue

@@ -3,7 +3,7 @@
     <button class="icon-btn icon-clean" @click="$emit('clean')" :disabled="disabled || poopCount === 0" title="清理"></button>
     <button class="icon-btn icon-medicine" @click="$emit('medicine')" :disabled="disabled || !isSick" title="治療"></button>
     <button class="icon-btn icon-training" @click="$emit('training')" :disabled="disabled" title="祈禱"></button>
-    <button class="icon-btn icon-info" @click="$emit('info')" :disabled="disabled" title="資訊"></button>
+    <button class="icon-btn icon-backpack" @click="$emit('inventory')" :disabled="disabled" title="背包"></button>
   </div>
 </template>
 
@@ -27,7 +27,7 @@ const props = defineProps({
   }
 });
 
-defineEmits(['clean', 'medicine', 'training', 'info']);
+defineEmits(['clean', 'medicine', 'training', 'inventory']);
 </script>
 
 <style scoped>
@@ -116,19 +116,28 @@ defineEmits(['clean', 'medicine', 'training', 'info']);
     -6px 0px 0 #ffcc00, 6px 0px 0 #ffcc00;
 }
 
-/* Info Icon (i) */
+/* Backpack Icon */
-.icon-info::before {
+.icon-backpack::before {
   content: '';
   position: absolute;
   width: 2px;
   height: 2px;
-  background: #4444ff;
+  background: #8d6e63;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   box-shadow:
-    0px -6px 0 #4444ff,
+    /* Top flap */
-    0px -2px 0 #4444ff, 0px 0px 0 #4444ff,
+    -2px -6px 0 #8d6e63, 0px -6px 0 #8d6e63, 2px -6px 0 #8d6e63,
-    0px 2px 0 #4444ff, 0px 4px 0 #4444ff, 0px 6px 0 #4444ff;
+    -4px -4px 0 #8d6e63, -2px -4px 0 #a1887f, 0px -4px 0 #a1887f, 2px -4px 0 #a1887f, 4px -4px 0 #8d6e63,
+    
+    /* Body */
+    -4px -2px 0 #8d6e63, -2px -2px 0 #5d4037, 0px -2px 0 #5d4037, 2px -2px 0 #5d4037, 4px -2px 0 #8d6e63,
+    -4px 0px 0 #8d6e63, -2px 0px 0 #5d4037, 0px 0px 0 #5d4037, 2px 0px 0 #5d4037, 4px 0px 0 #8d6e63,
+    -4px 2px 0 #8d6e63, -2px 2px 0 #5d4037, 0px 2px 0 #5d4037, 2px 2px 0 #5d4037, 4px 2px 0 #8d6e63,
+    -4px 4px 0 #8d6e63, -2px 4px 0 #5d4037, 0px 4px 0 #5d4037, 2px 4px 0 #5d4037, 4px 4px 0 #8d6e63,
+    
+    /* Bottom */
+    -2px 6px 0 #8d6e63, 0px 6px 0 #8d6e63, 2px 6px 0 #8d6e63;
 }
 </style>

src/components/InventoryScreen.vue

@@ -0,0 +1,385 @@
+<template>
+  <div class="inventory-screen" @click.self="$emit('close')">
+    <div class="inventory-container" @click="$emit('close')">
+      <div class="screen-title">背包</div>
+      
+      <div class="inventory-grid">
+        <div 
+          v-for="(item, index) in items" 
+          :key="index"
+          class="inventory-slot"
+          :class="{ 'selected': selectedIndex === index, 'empty': !item }"
+          :draggable="!!item"
+          @dragstart="handleDragStart(index, $event)"
+          @dragover.prevent
+          @drop="handleDrop(index)"
+          @click.stop="selectItem(index)"
+          @mouseenter="item ? handleMouseEnter(item, $event) : null"
+          @mouseleave="handleMouseLeave"
+          @dblclick="item ? useItem() : null"
+        >
+          <template v-if="item">
+            <div class="item-icon" :class="item.iconClass"></div>
+            <div class="item-count" v-if="item.count > 1">x{{ item.count }}</div>
+          </template>
+        </div>
+      </div>
+
+
+    </div>
+
+    <!-- Floating Tooltip -->
+    <div 
+      v-if="hoveredItem" 
+      class="floating-tooltip"
+      :style="tooltipStyle"
+      @mouseenter="cancelHideTooltip"
+      @mouseleave="handleMouseLeave"
+    >
+      <div class="tooltip-name">{{ hoveredItem.name }}</div>
+      <div class="tooltip-desc">{{ hoveredItem.description }}</div>
+      <div class="tooltip-footer">
+        <div class="tooltip-hint">雙擊使用</div>
+        <button class="tooltip-delete-btn" @click.stop="handleDeleteItem(hoveredItem)">
+          <div class="trash-icon-small"></div>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+  inventory: {
+    type: Array,
+    default: () => [
+      { id: 'cookie', name: '幸運餅乾', description: '增加一點快樂值', count: 5, iconClass: 'icon-cookie' },
+      { id: 'water', name: '神水', description: '恢復健康', count: 2, iconClass: 'icon-water' },
+      { id: 'amulet', name: '平安符', description: '保佑寵物平安', count: 1, iconClass: 'icon-amulet' }
+    ]
+  }
+});
+
+const emit = defineEmits(['close', 'use-item', 'update:inventory']);
+
+const selectedIndex = ref(-1);
+const draggedIndex = ref(null);
+const isDragging = ref(false);
+
+const items = computed(() => props.inventory);
+const selectedItem = computed(() => {
+  if (selectedIndex.value >= 0 && selectedIndex.value < items.value.length) {
+    return items.value[selectedIndex.value];
+  }
+  return null;
+});
+
+function selectItem(index) {
+  if (items.value[index]) {
+    selectedIndex.value = index;
+  } else {
+    selectedIndex.value = -1;
+  }
+}
+
+// Drag and Drop Logic
+function handleDragStart(index, event) {
+  if (!items.value[index]) return;
+  draggedIndex.value = index;
+  isDragging.value = true;
+  // Set drag image or effect if needed
+  event.dataTransfer.effectAllowed = 'move';
+}
+
+function handleDrop(targetIndex) {
+  isDragging.value = false;
+  if (draggedIndex.value === null) return;
+  
+  const newInventory = [...items.value];
+  const draggedItem = newInventory[draggedIndex.value];
+  const targetItem = newInventory[targetIndex];
+  
+  // Swap items
+  newInventory[draggedIndex.value] = targetItem;
+  newInventory[targetIndex] = draggedItem;
+  
+  emit('update:inventory', newInventory);
+  draggedIndex.value = null;
+}
+
+function handleDeleteItem(item) {
+  const index = items.value.indexOf(item);
+  if (index !== -1) {
+    const newInventory = [...items.value];
+    newInventory[index] = null;
+    emit('update:inventory', newInventory);
+    
+    // Clear hover if deleted
+    if (hoveredItem.value === item) {
+      hoveredItem.value = null;
+    }
+  }
+}
+
+function useItem() {
+  // Use selected item if available, otherwise use hovered item (for double click)
+  const itemToUse = selectedItem.value || hoveredItem.value;
+  if (itemToUse) {
+    emit('use-item', itemToUse);
+  }
+}
+
+// Tooltip Logic
+const hoveredItem = ref(null);
+const tooltipStyle = ref({ top: '0px', left: '0px' });
+let hideTooltipTimeout = null;
+
+function handleMouseEnter(item, event) {
+  cancelHideTooltip();
+  hoveredItem.value = item;
+  updateTooltipPosition(event);
+}
+
+function handleMouseLeave() {
+  // Delay hiding to allow moving to tooltip
+  hideTooltipTimeout = setTimeout(() => {
+    hoveredItem.value = null;
+  }, 200);
+}
+
+function cancelHideTooltip() {
+  if (hideTooltipTimeout) {
+    clearTimeout(hideTooltipTimeout);
+    hideTooltipTimeout = null;
+  }
+}
+
+function updateTooltipPosition(event) {
+  const rect = event.target.getBoundingClientRect();
+  const tooltipWidth = 150; // Estimated width
+  const tooltipHeight = 80; // Estimated height
+  
+  let top = rect.top - 10;
+  let left = rect.left + rect.width / 2;
+  let transform = 'translate(-50%, -100%)';
+
+  // Check top boundary
+  if (top < tooltipHeight) {
+    // Show below if not enough space above
+    top = rect.bottom + 10;
+    transform = 'translate(-50%, 0)';
+  }
+
+  // Check left/right boundary
+  const viewportWidth = window.innerWidth;
+  if (left - tooltipWidth / 2 < 0) {
+    left = tooltipWidth / 2 + 10;
+  } else if (left + tooltipWidth / 2 > viewportWidth) {
+    left = viewportWidth - tooltipWidth / 2 - 10;
+  }
+
+  tooltipStyle.value = {
+    top: top + 'px',
+    left: left + 'px',
+    transform: transform
+  };
+}
+</script>
+
+<style scoped>
+@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
+
+.inventory-screen {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'DotGothic16', monospace;
+}
+
+.inventory-container {
+  width: 100%;
+  height: 100%;
+  background: #f0d09c;
+  border: none;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow-y: auto;
+}
+
+.screen-title {
+  text-align: center;
+  font-size: 20px;
+  font-weight: bold;
+  color: #3d2f1f;
+  border-bottom: 2px dashed #8b4513;
+  padding-bottom: 8px;
+}
+
+.inventory-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 4px;
+  background: #e0b070;
+  padding: 4px;
+  border-radius: 4px;
+  border: 2px solid #c49454;
+}
+
+.inventory-slot {
+  aspect-ratio: 1;
+  background: #f8e8c8;
+  border: 2px solid #c49454;
+  border-radius: 4px;
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.1s;
+}
+
+.inventory-slot:hover {
+  background: #fff;
+  transform: translateY(-1px);
+}
+
+.inventory-slot.selected {
+  border-color: #d32f2f;
+  background: #fff;
+  box-shadow: 0 0 0 2px #d32f2f;
+}
+
+.inventory-slot.empty {
+  background: rgba(0,0,0,0.05);
+  border-color: rgba(0,0,0,0.1);
+  cursor: default;
+}
+
+.inventory-slot.empty:hover {
+  background: rgba(0,0,0,0.05);
+  transform: none;
+}
+
+.item-count {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  font-size: 10px;
+  color: #333;
+  background: rgba(255,255,255,0.8);
+  padding: 0 2px;
+  border-radius: 2px;
+}
+
+
+
+/* Item Icons (CSS Shapes) */
+.icon-cookie::before {
+  content: '';
+  width: 16px;
+  height: 16px;
+  background: #d4a373;
+  border-radius: 50%;
+  display: block;
+  box-shadow: inset -2px -2px 0 #8b4513;
+}
+
+.icon-water::before {
+  content: '';
+  width: 12px;
+  height: 16px;
+  background: #4fc3f7;
+  border-radius: 40% 40% 40% 40% / 60% 60% 40% 40%;
+  display: block;
+  box-shadow: inset -2px -2px 0 #0288d1;
+}
+
+.icon-amulet::before {
+  content: '';
+  width: 14px;
+  height: 18px;
+  background: #ffeb3b;
+  border: 1px solid #fbc02d;
+  display: block;
+  box-shadow: 0 2px 0 rgba(0,0,0,0.2);
+}
+
+/* Floating Tooltip */
+.floating-tooltip {
+  position: fixed; /* Use fixed to position relative to viewport */
+  background: rgba(0, 0, 0, 0.9);
+  border: 1px solid #fff;
+  padding: 8px;
+  border-radius: 4px;
+  /* pointer-events: none;  <-- Removed to allow clicking button */
+  z-index: 200; /* Above everything */
+  min-width: 120px;
+  max-width: 200px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
+}
+
+.tooltip-name {
+  color: #ffcc00;
+  font-weight: bold;
+  font-size: 12px;
+  margin-bottom: 2px;
+}
+
+.tooltip-desc {
+  color: #fff;
+  font-size: 10px;
+  line-height: 1.3;
+  margin-bottom: 4px;
+}
+
+.tooltip-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px dashed #555;
+}
+
+.tooltip-hint {
+  color: #aaa;
+  font-size: 9px;
+  font-style: italic;
+}
+
+.tooltip-delete-btn {
+  background: #d32f2f;
+  border: 1px solid #b71c1c;
+  border-radius: 2px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0;
+}
+
+.tooltip-delete-btn:hover {
+  background: #f44336;
+}
+
+.trash-icon-small {
+  width: 10px;
+  height: 10px;
+  background: #fff;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E") no-repeat center;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E") no-repeat center;
+}
+</style>

src/components/PetGame.vue

@@ -3,7 +3,7 @@
     <!-- Top Menu -->
     <TopMenu 
       :disabled="stage === 'egg'"
-      @stats="$emit('action', 'stats')"
+      @info="showPetInfo = !showPetInfo"
       @feed="$emit('action', 'feed')"
       @play="$emit('action', 'play')"
       @sleep="$emit('action', 'sleep')"
@@ -15,6 +15,10 @@
       :hunger="stats?.hunger || 100"
       :happiness="stats?.happiness || 100"
       :health="stats?.health || 100"
+      :petName="CURRENT_PRESET.name"
+      :stage="stage"
+      :poopCount="poopCount"
+      :baseStats="baseStats"
     />
     
     <!-- Game Area (Center) -->
@@ -162,6 +166,28 @@
       @close="handleCloseResult"
     />
 
+    <!-- Pet Info Screen (覆蓋整個遊戲區域) -->
+    <PetInfoScreen
+      v-if="showPetInfo"
+      :petName="CURRENT_PRESET.name"
+      :stage="stage"
+      :poopCount="poopCount"
+      :baseStats="baseStats"
+      :hunger="stats?.hunger || 100"
+      :happiness="stats?.happiness || 100"
+      :health="stats?.health || 100"
+      @close="showPetInfo = false"
+    />
+
+    <!-- Inventory Screen -->
+    <InventoryScreen
+      v-if="showInventory"
+      :inventory="inventory"
+      @close="showInventory = false"
+      @use-item="handleUseItem"
+      @update:inventory="handleInventoryUpdate"
+    />
+
     <!-- Action Menu (Bottom) -->
     <ActionMenu 
       :disabled="stage === 'egg'"
@@ -171,7 +197,7 @@
       @clean="$emit('action', 'clean')"
       @medicine="$emit('action', 'medicine')"
       @training="showPrayerMenu = true"
-      @info="$emit('action', 'info')"
+      @inventory="showInventory = !showInventory"
     />
   </div>
 
@@ -179,7 +205,7 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
-import { SPRITE_PRESETS } from '../data/petPresets.js';
+import { SPRITE_PRESETS_FLAT as SPRITE_PRESETS, SPRITE_PRESETS as FULL_PRESETS } from '../data/petPresets.js';
 import { FOOD_OPTIONS } from '../data/foodOptions.js';
 import StatsBar from './StatsBar.vue';
 import ActionMenu from './ActionMenu.vue';
@@ -188,6 +214,8 @@ import PrayerMenu from './PrayerMenu.vue';
 import JiaobeiAnimation from './JiaobeiAnimation.vue';
 import FortuneStickAnimation from './FortuneStickAnimation.vue';
 import FortuneResult from './FortuneResult.vue';
+import PetInfoScreen from './PetInfoScreen.vue';
+import InventoryScreen from './InventoryScreen.vue';
 import guanyinLots from '../assets/guanyin_100_lots.json';
 
 const props = defineProps({
@@ -217,23 +245,29 @@ const emit = defineEmits(['update:state', 'action']);
 
 // Prayer Menu State
 const showPrayerMenu = ref(false);
+const fortuneMode = ref('jiaobei');
 const showJiaobeiAnimation = ref(false);
 const showFortuneStick = ref(false);
 const showFortuneResult = ref(false);
-
+const currentLotData = ref(null);
-// Fortune Logic State
-const fortuneMode = ref('normal'); // 'normal' or 'fortune'
 const currentLotNumber = ref(null);
 const consecutiveSaintCount = ref(0);
-const currentLotData = ref(null);
+const showPetInfo = ref(false);
+const showInventory = ref(false);
+const inventory = ref(new Array(16).fill(null));
+// Initialize some items
+inventory.value[0] = { id: 'cookie', name: '幸運餅乾', description: '增加一點快樂值', count: 5, iconClass: 'icon-cookie' };
+inventory.value[1] = { id: 'water', name: '神水', description: '恢復健康', count: 2, iconClass: 'icon-water' };
+inventory.value[2] = { id: 'amulet', name: '平安符', description: '保佑寵物平安', count: 1, iconClass: 'icon-amulet' };
+const infoPage = ref(0);
 
-function handlePrayerSelect(type) {
+const handlePrayerSelect = (mode) => {
   showPrayerMenu.value = false;
   
-  if (type === 'jiaobei') {
+  if (mode === 'jiaobei') {
     fortuneMode.value = 'normal';
     showJiaobeiAnimation.value = true;
-  } else if (type === 'fortune') {
+  } else if (mode === 'fortune') {
     // 開始求籤流程
     fortuneMode.value = 'fortune';
     showFortuneStick.value = true;
@@ -303,6 +337,27 @@ function handleCloseResult() {
   fortuneMode.value = 'normal';
 }
 
+function handleUseItem(item) {
+  console.log('Used item:', item.name);
+  // TODO: Implement item effects
+  
+  // Decrease count or remove item
+  const index = inventory.value.findIndex(i => i === item);
+  if (index !== -1) {
+    if (inventory.value[index].count > 1) {
+      inventory.value[index].count--;
+    } else {
+      inventory.value[index] = null;
+    }
+  }
+  
+  showInventory.value = false;
+}
+
+function handleInventoryUpdate(newInventory) {
+  inventory.value = newInventory;
+}
+
 // Stats visibility toggle (removed local ref, using prop instead)
 
 // Poop position calculator (all on left side, strictly in game area)
@@ -379,8 +434,27 @@ const FOOD_PALETTE = FOOD_OPTIONS[currentFood].palette;
 
 
 const CURRENT_PRESET = SPRITE_PRESETS.tinyTigerCatB;
+const FULL_PRESET = FULL_PRESETS.tinyTigerCatB;
 const pixelSize = CURRENT_PRESET.pixelSize;
 
+// Calculate base stats based on current stage
+const baseStats = computed(() => {
+  if (!FULL_PRESET.stats) {
+    return { hp: 0, attack: 0, defense: 0, speed: 0 };
+  }
+  
+  const base = FULL_PRESET.stats.base;
+  const stageId = props.stage === 'egg' ? 'baby' : props.stage;
+  const modifier = FULL_PRESET.stats.stageModifiers?.[stageId] || { hp: 1, attack: 1, defense: 1, speed: 1 };
+  
+  return {
+    hp: Math.floor(base.hp * modifier.hp),
+    attack: Math.floor(base.attack * modifier.attack),
+    defense: Math.floor(base.defense * modifier.defense),
+    speed: Math.floor(base.speed * modifier.speed)
+  };
+});
+
 // Define dimensions
 const rows = CURRENT_PRESET.sprite.length;
 const cols = CURRENT_PRESET.sprite[0].length;

src/components/PetInfoScreen.vue

@@ -0,0 +1,407 @@
+<template>
+  <div class="pet-info-screen" @click="$emit('close')">
+    <div class="info-container">
+      <!-- Stats Bars at Top (Pixel Style) -->
+      <div class="stats-section">
+        <div class="stat-item">
+          <div class="stat-label-row">
+            <span class="stat-label">飢餓</span>
+            <span class="stat-value">{{ displayHunger }}%</span>
+          </div>
+          <div class="pixel-bar">
+            <div 
+              v-for="i in 10" 
+              :key="'hunger-' + i"
+              class="pixel-block"
+              :class="{ 
+                'filled': i <= Math.floor(displayHunger / 10),
+                'color-orange': i <= Math.floor(displayHunger / 10)
+              }"
+            ></div>
+          </div>
+        </div>
+
+        <div class="stat-item">
+          <div class="stat-label-row">
+            <span class="stat-label">快樂</span>
+            <span class="stat-value">{{ displayHappiness }}%</span>
+          </div>
+          <div class="pixel-bar">
+            <div 
+              v-for="i in 10" 
+              :key="'happiness-' + i"
+              class="pixel-block"
+              :class="{ 
+                'filled': i <= Math.floor(displayHappiness / 10),
+                'color-yellow': i <= Math.floor(displayHappiness / 10)
+              }"
+            ></div>
+          </div>
+        </div>
+
+        <div class="stat-item">
+          <div class="stat-label-row">
+            <span class="stat-label">健康</span>
+            <span class="stat-value">{{ displayHealth }}%</span>
+          </div>
+          <div class="pixel-bar">
+            <div 
+              v-for="i in 10" 
+              :key="'health-' + i"
+              class="pixel-block pixel-heart"
+              :class="{ 
+                'filled': i <= Math.floor(displayHealth / 10),
+                'color-red': i <= Math.floor(displayHealth / 10)
+              }"
+            ></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="info-content">
+        <div class="info-title">═ 寵物資料 ═</div>
+        
+        <div class="info-item">
+          <span class="label">名字</span>
+          <span class="value">{{ petName }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">階段</span>
+          <span class="value">{{ stageText }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">年齡</span>
+          <span class="value">{{ age }}歲</span>
+        </div>
+        <div class="info-item">
+          <span class="label">身高</span>
+          <span class="value">{{ height }}cm</span>
+        </div>
+        <div class="info-item">
+          <span class="label">體重</span>
+          <span class="value">{{ weight }}kg</span>
+        </div>
+        
+        <div class="info-divider"></div>
+        
+        <div class="info-item">
+          <span class="label">HP</span>
+          <span class="value">{{ baseStats.hp }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">攻擊</span>
+          <span class="value">{{ baseStats.attack }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">防禦</span>
+          <span class="value">{{ baseStats.defense }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">速度</span>
+          <span class="value">{{ baseStats.speed }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  petName: String,
+  stage: String,
+  poopCount: Number,
+  baseStats: Object,
+  hunger: {
+    type: Number,
+    default: 100
+  },
+  happiness: {
+    type: Number,
+    default: 100
+  },
+  health: {
+    type: Number,
+    default: 100
+  }
+});
+
+defineEmits(['close']);
+
+// Display values (ceiling for bars)
+const displayHunger = computed(() => Math.ceil(props.hunger));
+const displayHappiness = computed(() => Math.ceil(props.happiness));
+const displayHealth = computed(() => Math.ceil(props.health));
+
+const stageText = computed(() => {
+  const stageMap = {
+    'egg': '蛋',
+    'baby': '幼年',
+    'child': '成長',
+    'adult': '成熟'
+  };
+  return stageMap[props.stage] || props.stage;
+});
+
+const age = computed(() => {
+  const ageMap = { 'egg': 0, 'baby': 1, 'child': 3, 'adult': 7 };
+  return ageMap[props.stage] || 0;
+});
+
+const height = computed(() => {
+  const heightMap = { 'egg': 5, 'baby': 15, 'child': 30, 'adult': 45 };
+  return heightMap[props.stage] || 30;
+});
+
+const weight = computed(() => {
+  const weightMap = { 'egg': 0.5, 'baby': 2, 'child': 5, 'adult': 8 };
+  return weightMap[props.stage] || 5;
+});
+</script>
+
+<style scoped>
+.pet-info-screen {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #f0d09c;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  image-rendering: pixelated;
+  overflow-y: auto;
+}
+
+.info-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: min-content;
+}
+
+/* Stats Section - Pixel Style */
+.stats-section {
+  padding: 12px 14px;
+  background: #c49454;
+  border-bottom: 3px solid #8b6f47;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.stat-label-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: 'DotGothic16', monospace;
+  font-size: 11px;
+  color: #3d2f1f;
+}
+
+.stat-label {
+  font-weight: bold;
+}
+
+.stat-value {
+  font-weight: 600;
+}
+
+.pixel-bar {
+  display: flex;
+  gap: 3px;
+  padding: 0;
+  background: transparent;
+  border: none;
+}
+
+.pixel-block {
+  width: 14px;
+  height: 14px;
+  background: rgba(139, 111, 71, 0.3);
+  border: 1px solid rgba(139, 111, 71, 0.5);
+  border-radius: 2px;
+  transition: all 0.2s ease;
+}
+
+.pixel-block.filled {
+  box-shadow: 
+    inset 1px 1px 0 rgba(255, 255, 255, 0.4),
+    0 2px 2px rgba(0, 0, 0, 0.2);
+}
+
+.pixel-block.color-orange.filled {
+  background: linear-gradient(135deg, #ff9966 0%, #ff6633 100%);
+  border-color: #cc4422;
+}
+
+.pixel-block.color-yellow.filled {
+  background: linear-gradient(135deg, #ffdd66 0%, #ffcc33 100%);
+  border-color: #ccaa22;
+}
+
+.pixel-block.color-red.filled {
+  background: linear-gradient(135deg, #ff6666 0%, #ff3333 100%);
+  border-color: #cc2222;
+}
+
+/* Pixel Heart Shape */
+.pixel-heart {
+  position: relative;
+  background: transparent !important;
+  border: none !important;
+  width: 16px;
+  height: 16px;
+}
+
+/* Empty heart outline */
+.pixel-heart::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 1px;
+  height: 1px;
+  background: transparent;
+  box-shadow:
+    /* Top bumps - outline only */
+    -3px -3px 0 0 #8b6f47,
+    -2px -3px 0 0 #8b6f47,
+    2px -3px 0 0 #8b6f47,
+    3px -3px 0 0 #8b6f47,
+    /* Upper sides */
+    -4px -2px 0 0 #8b6f47,
+    4px -2px 0 0 #8b6f47,
+    /* Middle sides */
+    -4px -1px 0 0 #8b6f47,
+    4px -1px 0 0 #8b6f47,
+    -4px 0px 0 0 #8b6f47,
+    4px 0px 0 0 #8b6f47,
+    /* Lower sides */
+    -3px 1px 0 0 #8b6f47,
+    3px 1px 0 0 #8b6f47,
+    -2px 2px 0 0 #8b6f47,
+    2px 2px 0 0 #8b6f47,
+    -1px 3px 0 0 #8b6f47,
+    1px 3px 0 0 #8b6f47,
+    /* Bottom point */
+    0px 4px 0 0 #8b6f47;
+}
+
+/* Filled heart */
+.pixel-heart.filled::before {
+  box-shadow:
+    /* Top bumps */
+    -3px -3px 0 0 #cc2222,
+    -2px -3px 0 0 #cc2222,
+    2px -3px 0 0 #cc2222,
+    3px -3px 0 0 #cc2222,
+    /* Second row */
+    -4px -2px 0 0 #ff3333,
+    -3px -2px 0 0 #ff6666,
+    -2px -2px 0 0 #ff6666,
+    -1px -2px 0 0 #ff6666,
+    0px -2px 0 0 #ff6666,
+    1px -2px 0 0 #ff6666,
+    2px -2px 0 0 #ff6666,
+    3px -2px 0 0 #ff6666,
+    4px -2px 0 0 #ff3333,
+    /* Third row */
+    -4px -1px 0 0 #ff3333,
+    -3px -1px 0 0 #ff6666,
+    -2px -1px 0 0 #ff8888,
+    -1px -1px 0 0 #ff8888,
+    0px -1px 0 0 #ff8888,
+    1px -1px 0 0 #ff8888,
+    2px -1px 0 0 #ff8888,
+    3px -1px 0 0 #ff6666,
+    4px -1px 0 0 #ff3333,
+    /* Middle row */
+    -4px 0px 0 0 #ff3333,
+    -3px 0px 0 0 #ff6666,
+    -2px 0px 0 0 #ff6666,
+    -1px 0px 0 0 #ff6666,
+    0px 0px 0 0 #ff6666,
+    1px 0px 0 0 #ff6666,
+    2px 0px 0 0 #ff6666,
+    3px 0px 0 0 #ff6666,
+    4px 0px 0 0 #ff3333,
+    /* Lower rows */
+    -3px 1px 0 0 #ff3333,
+    -2px 1px 0 0 #ff3333,
+    -1px 1px 0 0 #ff3333,
+    0px 1px 0 0 #ff3333,
+    1px 1px 0 0 #ff3333,
+    2px 1px 0 0 #ff3333,
+    3px 1px 0 0 #ff3333,
+    -2px 2px 0 0 #ff3333,
+    -1px 2px 0 0 #ff3333,
+    0px 2px 0 0 #ff3333,
+    1px 2px 0 0 #ff3333,
+    2px 2px 0 0 #ff3333,
+    -1px 3px 0 0 #cc2222,
+    0px 3px 0 0 #cc2222,
+    1px 3px 0 0 #cc2222,
+    /* Bottom point */
+    0px 4px 0 0 #cc2222;
+}
+
+.info-content {
+  padding: 12px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.info-title {
+  text-align: center;
+  font-family: 'DotGothic16', monospace;
+  font-size: 12px;
+  font-weight: bold;
+  color: #3d2f1f;
+  margin-bottom: 6px;
+  padding-bottom: 6px;
+  border-bottom: 2px solid #c49454;
+}
+
+.info-divider {
+  height: 2px;
+  background: #c49454;
+  margin: 6px 0;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 10px;
+  background: #e0b070;
+  border: 2px solid #c49454;
+  box-shadow: 
+    inset 1px 1px 0 #f0d09c,
+    inset -1px -1px 0 #8b6f47;
+}
+
+.label {
+  font-family: 'DotGothic16', monospace;
+  font-size: 11px;
+  font-weight: bold;
+  color: #3d2f1f;
+}
+
+.value {
+  font-family: 'DotGothic16', monospace;
+  font-size: 11px;
+  color: #3d2f1f;
+  font-weight: 600;
+}
+</style>

src/components/StatsBar.vue

@@ -1,57 +1,66 @@
 <template>
   <div class="stats-bar">
-    <div class="stat-row">
+    <div class="stats-content">
-      <div class="stat-icon pixel-heart"></div>
+      <div class="stat-rows">
-      <div class="pixel-bar">
+        <div class="stat-row">
-        <div 
+          <div class="stat-icon pixel-heart"></div>
-          v-for="i in 10" 
+          <div class="pixel-bar">
-          :key="'happy-' + i"
+            <div 
-          class="pixel-block"
+              v-for="i in 10" 
-          :class="{ 
+              :key="'happy-' + i"
-            'filled': i <= Math.floor(displayHappiness / 10),
+              class="pixel-block"
-            'color-red': i <= Math.floor(displayHappiness / 10)
+              :class="{ 
-          }"
+                'filled': i <= Math.floor(displayHappiness / 10),
-        ></div>
+                'color-red': i <= Math.floor(displayHappiness / 10)
-      </div>
+              }"
-      <span class="stat-value" :class="{ 'warning': displayHappiness < 30 }">{{ displayHappiness }}</span>
+            ></div>
-    </div>
+          </div>
+          <span class="stat-value" :class="{ 'warning': displayHappiness < 30 }">{{ displayHappiness }}</span>
+        </div>
         
-    <div class="stat-row">
+        <div class="stat-row">
-      <div class="stat-icon pixel-food"></div>
+          <div class="stat-icon pixel-food"></div>
-      <div class="pixel-bar">
+          <div class="pixel-bar">
-        <div 
+            <div 
-          v-for="i in 10" 
+              v-for="i in 10" 
-          :key="'food-' + i"
+              :key="'food-' + i"
-          class="pixel-block"
+              class="pixel-block"
-          :class="{ 
+              :class="{ 
-            'filled': i <= Math.floor(displayHunger / 10),
+                'filled': i <= Math.floor(displayHunger / 10),
-            'color-yellow': i <= Math.floor(displayHunger / 10)
+                'color-yellow': i <= Math.floor(displayHunger / 10)
-          }"
+              }"
-        ></div>
+            ></div>
-      </div>
+          </div>
-      <span class="stat-value" :class="{ 'warning': displayHunger < 30 }">{{ displayHunger }}</span>
+          <span class="stat-value" :class="{ 'warning': displayHunger < 30 }">{{ displayHunger }}</span>
-    </div>
+        </div>
         
-    <div class="stat-row">
+        <div class="stat-row">
-      <div class="stat-icon pixel-health"></div>
+          <div class="stat-icon pixel-health"></div>
-      <div class="pixel-bar">
+          <div class="pixel-bar">
-        <div 
+            <div 
-          v-for="i in 10" 
+              v-for="i in 10" 
-          :key="'health-' + i"
+              :key="'health-' + i"
-          class="pixel-block"
+              class="pixel-block"
-          :class="{ 
+              :class="{ 
-            'filled': i <= Math.floor(displayHealth / 10),
+                'filled': i <= Math.floor(displayHealth / 10),
-            'color-green': i <= Math.floor(displayHealth / 10)
+                'color-green': i <= Math.floor(displayHealth / 10)
-          }"
+              }"
-        ></div>
+            ></div>
+          </div>
+          <span class="stat-value" :class="{ 'warning': displayHealth < 30 }">{{ displayHealth }}</span>
+        </div>
       </div>
-      <span class="stat-value" :class="{ 'warning': displayHealth < 30 }">{{ displayHealth }}</span>
+
+      <!-- Info Icon Button -->
+      <button class="info-icon-btn" @click="$emit('toggle-info')" title="寵物資訊">
+        <div class="pixel-i-icon"></div>
+      </button>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import { ref, computed } from 'vue';
 
 const props = defineProps({
   hunger: {
@@ -65,9 +74,27 @@ const props = defineProps({
   health: {
     type: Number,
     default: 100
+  },
+  petName: {
+    type: String,
+    default: ''
+  },
+  stage: {
+    type: String,
+    default: 'adult'
+  },
+  poopCount: {
+    type: Number,
+    default: 0
+  },
+  baseStats: {
+    type: Object,
+    default: () => ({ hp: 0, attack: 0, defense: 0, speed: 0 })
   }
 });
 
+defineEmits(['toggle-info']);
+
 // 向上取整顯示，只有小數扣到0才會掉下一個整數
 const displayHunger = computed(() => Math.ceil(props.hunger));
 const displayHappiness = computed(() => Math.ceil(props.happiness));
@@ -78,10 +105,23 @@ const displayHealth = computed(() => Math.ceil(props.health));
 .stats-bar {
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  padding: 4px 8px 3px 8px;
   background: rgba(155, 188, 15, 0.08);
   border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+  position: relative;
+}
+
+.stats-content {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px 3px 8px;
+}
+
+.stat-rows {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
 }
 
 .stat-row {
@@ -242,4 +282,206 @@ const displayHealth = computed(() => Math.ceil(props.health));
   0%, 100% { opacity: 1; }
   50% { opacity: 0.5; }
 }
+
+/* Info Icon Button - Game Boy Pixel Style */
+.info-icon-btn {
+  width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+  background: #9bbc0f;
+  border: 2px solid #306230;
+  cursor: pointer;
+  transition: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  box-shadow: 
+    inset -2px -2px 0 #0f380f,
+    inset 2px 2px 0 #8bac0f;
+  image-rendering: pixelated;
+}
+
+/* Pixel Art "i" Icon */
+.pixel-i-icon {
+  width: 2px;
+  height: 2px;
+  background: #0f380f;
+  position: relative;
+  box-shadow:
+    /* Top dot */
+    0px -7px 0 #0f380f,
+    /* Vertical bar */
+    0px -3px 0 #0f380f, 0px -1px 0 #0f380f,
+    0px 0px 0 #0f380f, 0px 1px 0 #0f380f,
+    0px 3px 0 #0f380f, 0px 5px 0 #0f380f;
+}
+
+.info-icon-btn:hover {
+  background: #8bac0f;
+}
+
+.info-icon-btn:active {
+  box-shadow: 
+    inset 2px 2px 0 #0f380f;
+}
+
+/* Backdrop Overlay */
+.info-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(15, 56, 15, 0.7);
+  z-index: 999;
+  animation: fadeIn 0.2s steps(4);
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* Bottom Slide-out Info Panel - Game Boy Style */
+.info-panel {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #9bbc0f;
+  border-top: 4px solid #0f380f;
+  z-index: 1000;
+  max-height: 50vh;
+  overflow-y: auto;
+  animation: slideUp 0.2s steps(5);
+  box-shadow: 
+    0 -2px 0 #306230,
+    0 -4px 8px rgba(0, 0, 0, 0.3);
+  image-rendering: pixelated;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.info-panel-header {
+  padding: 10px 16px;
+  background: #306230;
+  border-bottom: 2px solid #0f380f;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.info-title {
+  font-family: 'DotGothic16', monospace;
+  font-size: 13px;
+  font-weight: bold;
+  color: #9bbc0f;
+  text-shadow: 1px 1px 0 #0f380f;
+  letter-spacing: 1px;
+}
+
+.page-indicator {
+  font-family: 'DotGothic16', monospace;
+  font-size: 11px;
+  color: #8bac0f;
+  background: #0f380f;
+  padding: 2px 6px;
+  border: 1px solid #306230;
+}
+
+.info-panel-body {
+  padding: 12px 16px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 180px;
+}
+
+.stats-header {
+  text-align: center;
+  padding: 4px 0 8px;
+  font-family: 'DotGothic16', monospace;
+  font-size: 12px;
+  font-weight: bold;
+  color: #306230;
+  letter-spacing: 1px;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: #8bac0f;
+  border: 2px solid #306230;
+  box-shadow: 
+    inset 1px 1px 0 #9bbc0f,
+    inset -1px -1px 0 #0f380f;
+}
+
+.info-label {
+  font-family: 'DotGothic16', monospace;
+  font-size: 12px;
+  font-weight: bold;
+  color: #0f380f;
+}
+
+.info-value {
+  font-family: 'DotGothic16', monospace;
+  font-size: 12px;
+  color: #0f380f;
+  font-weight: 600;
+}
+
+.info-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 16px;
+  background: #306230;
+  border-top: 2px solid #0f380f;
+}
+
+.nav-btn {
+  width: 36px;
+  height: 28px;
+  background: #8bac0f;
+  border: 2px solid #0f380f;
+  color: #0f380f;
+  font-size: 14px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: none;
+  box-shadow: 
+    inset 1px 1px 0 #9bbc0f,
+    inset -1px -1px 0 #306230;
+}
+
+.nav-btn:hover {
+  background: #9bbc0f;
+}
+
+.nav-btn:active {
+  box-shadow: inset 2px 2px 0 #0f380f;
+}
+
+.nav-hint {
+  font-family: 'DotGothic16', monospace;
+  font-size: 9px;
+  color: #8bac0f;
+  letter-spacing: 0.5px;
+}
 </style>
+
+
+
+
+

src/components/TopMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="top-menu">
-    <button class="icon-btn icon-stats" @click="$emit('stats')" title="Stats"></button>
+    <button class="icon-btn icon-stats" @click="$emit('info')" title="Status"></button>
     <button class="icon-btn icon-feed" @click="$emit('feed')" :disabled="disabled" title="Feed"></button>
     <button class="icon-btn icon-play" @click="$emit('play')" :disabled="disabled" title="Play"></button>
     <button class="icon-btn icon-sleep" @click="$emit('sleep')" :disabled="disabled" title="Sleep"></button>
@@ -15,7 +15,7 @@ const props = defineProps({
   }
 });
 
-defineEmits(['stats', 'feed', 'play', 'sleep']);
+defineEmits(['info', 'feed', 'play', 'sleep']);
 </script>
 
 <style scoped>

src/data/petPresets.js

@@ -74,183 +74,425 @@ export const SPRITE_PRESETS = {
         iconBackLeft: { x: 3, y: 2 },
         iconBackRight: { x: 12, y: 2 },
     },
-    tinyTigerCat: {
-        name: '小虎斑貓',
-        pixelSize: 3,
-        sprite: [
-            '0000000000000000',
-            '0011000000110000', // row 1 - Ears
-            '0122111111221000', // row 2
-            '0122222222221000', // row 3
-            '0122322223221000', // row 4 - Stripes
-            '0122222222221000', // row 5
-            '0120022220021000', // row 6 - Eyes
-            '0122223322221000', // row 7 - Nose/Mouth
-            '0122222222221000', // row 8
-            '0011222222110000', // row 9 - Body
-            '0001222222121000', // row 10 - Body + Tail
-            '0001222222121000', // row 11
-            '0001100110110000', // row 12 - Legs
-            '0000000000000000', // row 13
-            '0000000000000000', // row 14
-            '0000000000000000', // row 15
-        ],
-        spriteMouthOpen: [
-            '0000000000000000',
-            '0011000000110000',
-            '0122111111221000',
-            '0122222222221000',
-            '0122322223221000',
-            '0122222222221000',
-            '0120022220021000',
-            '0122223322221000',
-            '0122200002221000', // Mouth Open
-            '0011222222110000',
-            '0001222222121000',
-            '0001222222121000',
-            '0001100110110000',
-            '0000000000000000',
-            '0000000000000000',
-            '0000000000000000',
-        ],
-        palette: {
-            '0': '#000000', // Black eyes/outline
-            '1': '#2b1d12', // Dark brown outline
-            '2': '#ffb347', // Orange fur
-            '3': '#cd853f', // Darker stripes/nose
-        },
-        tailPixels: [
-            [11, 10], [12, 10],
-            [11, 11], [12, 11],
-        ],
-        earPixels: [
-            [2, 1], [3, 1],
-            [10, 1], [11, 1],
-        ],
-        legFrontPixels: [
-            [4, 12], [5, 12],
-        ],
-        legBackPixels: [
-            [8, 12], [9, 12],
-        ],
-        blushPixels: [
-            [3, 7], [10, 7]
-        ],
-        iconBackLeft: { x: 2, y: 2 },
-        iconBackRight: { x: 11, y: 2 }
-    },
     tinyTigerCatB: {
-        name: '小虎斑貓',
+        id: 'tinyTigerCatB',
-        pixelSize: 3,
+        meta: {
-        sprite: [
+            name: '小虎斑貓',
-            '0000000000000000',
+            displayNameEn: 'Tiny Tiger Cat',
-            '0011000000110000', // row 1 - Ears
+            species: 'cat',
-            '0124444111442100', // row 2 粉紅耳朵內側
+            element: 'normal',
-            '0123222323221000', // row 3 三條虎紋
+            description: '一隻活潑、黏人的小虎斑貓，喜歡被餵食和玩耍。'
-            '0122322223221000', // row 4 - Stripes
-            '0122522222522100', // row 5 眼睛反光
-            '0125052225052100', // row 6 大圓眼＋黑瞳孔＋白反光
-            '0112223322221100', // row 7 鼻子＋左右鬍鬚
-            '0122220222221000', // row 8 小微笑
-            '0011222222110000', // row 9 - Body
-            '0001222222121000', // row 10 - Body + Tail
-            '0001222222121000', // row 11
-            '0001100110110000', // row 12 - Legs
-            '0000000000000000', // row 13
-            '0000000000000000', // row 14
-            '0000000000000000', // row 15
-        ],
-        spriteMouthOpen: [
-            '0000000000000000',
-            '0011000000110000',
-            '0124444111442100',
-            '0123222323221000',
-            '0122322223221000',
-            '0122522222522100',
-            '0125052225052100',
-            '0112223322221100',
-            '0122204002221000', // Mouth Open 粉紅舌頭
-            '0011222222110000',
-            '0001222222121000',
-            '0001222222121000',
-            '0001100110110000',
-            '0000000000000000',
-            '0000000000000000',
-            '0000000000000000',
-        ],
-        palette: {
-            '0': '#000000', // Black eyes/outline
-            '1': '#2b1d12', // Dark brown outline
-            '2': '#ffb347', // Orange fur
-            '3': '#cd853f', // Darker stripes/nose
-            '4': '#ffb6c1', // Pink (ears, blush, tongue)
-            '5': '#ffffff' // White eye highlight
         },
-        tailPixels: [
-            [11, 10], [12, 10],
-            [11, 11], [12, 11],
-        ],
-        earPixels: [
-            [2, 1], [3, 1],
-            [10, 1], [11, 1],
-        ],
-        legFrontPixels: [
-            [4, 12], [5, 12],
-        ],
-        legBackPixels: [
-            [8, 12], [9, 12],
-        ],
-        blushPixels: [
-            [3, 7], [10, 7]
-        ],
-        eyePixels: [
-            [3, 6], [4, 6],  // Left eye
-            [8, 6], [9, 6]   // Right eye
-        ],
-        spriteEyesClosed: [
-            '0000000000000000',
-            '0011000000110000',
-            '0124444111442100',
-            '0123222323221000',
-            '0122322223221000',
-            '0122522222522100',
-            '0122222222222100', // row 6 - Eyes closed (all '2' = closed eyes)
-            '0112223322221100',
-            '0122220222221000',
-            '0011222222110000',
-            '0001222222121000',
-            '0001222222121000',
-            '0001100110110000',
-            '0000000000000000',
-            '0000000000000000',
-            '0000000000000000',
-        ],
-        iconBackLeft: { x: 2, y: 2 },
-        iconBackRight: { x: 13, y: 2 },
 
-        // Growth Stages
+        // === 1. 生命週期設定 ===
-        eggSprite: [
+        lifecycle: {
-            '0000000000000000',
+            baseLifeMinutes: 7 * 24 * 60,
-            '0000000000000000',
+            stages: [
-            '0000000111000000', // Top (Narrow)
+                {
-            '0000001222100000',
+                    id: 'egg',
-            '0000012232210000', // Small stripe
+                    name: '蛋',
-            '0000122333221000',
+                    minAgeMinutes: 0,
-            '0000122232221000',
+                    maxAgeMinutes: 30,
-            '0001222222222100', // Widest part
+                    spriteKey: 'egg',
-            '0001233322332100', // Side stripes
+                    canBattle: false,
-            '0001223222232100',
+                    canEquip: false
-            '0000122222221000',
+                },
-            '0000122222221000',
+                {
-            '0000011222110000', // Bottom
+                    id: 'baby',
-            '0000000111000000',
+                    name: '幼年期',
-            '0000000000000000',
+                    minAgeMinutes: 30,
-            '0000000000000000',
+                    maxAgeMinutes: 6 * 60,
-        ],
+                    spriteKey: 'child',
-        eggPalette: {
+                    canBattle: false,
-            '1': '#5d4037', // Dark brown outline
+                    canEquip: false
-            '2': '#fff8e1', // Creamy white shell
+                },
-            '3': '#ffb74d', // Orange tiger stripes
+                {
-        }
+                    id: 'child',
+                    name: '成長期',
+                    minAgeMinutes: 6 * 60,
+                    maxAgeMinutes: 24 * 60,
+                    spriteKey: 'child',
+                    canBattle: true,
+                    canEquip: true
+                },
+                {
+                    id: 'adult',
+                    name: '成熟期',
+                    minAgeMinutes: 24 * 60,
+                    maxAgeMinutes: Infinity,
+                    spriteKey: 'adult',
+                    canBattle: true,
+                    canEquip: true
+                }
+            ],
+            evolutionRules: [
+                {
+                    fromStage: 'baby',
+                    toStage: 'child',
+                    condition: {
+                        maxHungerEvents: 5,
+                        maxSicknessEvents: 2
+                    }
+                }
+            ]
+        },
+
+        // === 2. 需求衰減設定 ===
+        needs: {
+            hunger: {
+                max: 100,
+                startValue: 70,
+                decayPerMinute: 2,
+                warnThreshold: 40,
+                criticalThreshold: 10,
+                feedRecover: 40
+            },
+            happiness: {
+                max: 100,
+                startValue: 60,
+                decayPerMinute: 1,
+                playRecover: 25,
+                lowThreshold: 30
+            },
+            cleanliness: {
+                max: 100,
+                startValue: 80,
+                decayPerPoop: 30,
+                criticalThreshold: 30
+            },
+            energy: {
+                max: 100,
+                startValue: 80,
+                decayPerMinuteActive: 2,
+                recoverPerMinuteSleep: 5,
+                sleepSuggestThreshold: 30
+            },
+            poop: {
+                feedsPerPoop: 3,
+                maxPoopOnScreen: 3
+            },
+            sickness: {
+                baseChancePerMinute: 0.001,
+                extraChanceIfDirty: 0.01,
+                extraChanceIfStarving: 0.02
+            }
+        },
+
+        // === 3. 數值設定 ===
+        stats: {
+            base: {
+                hp: 30,
+                attack: 8,
+                defense: 5,
+                speed: 7
+            },
+            stageModifiers: {
+                baby: { hp: 0.6, attack: 0.5, defense: 0.5, speed: 0.8 },
+                child: { hp: 1.0, attack: 1.0, defense: 1.0, speed: 1.0 },
+                adult: { hp: 1.4, attack: 1.3, defense: 1.2, speed: 1.1 }
+            }
+        },
+
+        // === 4. 外觀 / Sprite 設定 ===
+        appearance: {
+            pixelSize: 3,
+            sprites: {
+                child: {
+                    idle: [
+                        '0000000000000000',
+                        '0011000000110000',
+                        '0124444111442100',
+                        '0123222323221000',
+                        '0122322223221000',
+                        '0122522222522100',
+                        '0125052225052100',
+                        '0112223322221100',
+                        '0122220222221000',
+                        '0011222222110000',
+                        '0001222222121000',
+                        '0001222222121000',
+                        '0001100110110000',
+                        '0000000000000000',
+                        '0000000000000000',
+                        '0000000000000000',
+                    ],
+                    mouthOpen: [
+                        '0000000000000000',
+                        '0011000000110000',
+                        '0124444111442100',
+                        '0123222323221000',
+                        '0122322223221000',
+                        '0122522222522100',
+                        '0125052225052100',
+                        '0112223322221100',
+                        '0122204002221000',
+                        '0011222222110000',
+                        '0001222222121000',
+                        '0001222222121000',
+                        '0001100110110000',
+                        '0000000000000000',
+                        '0000000000000000',
+                        '0000000000000000',
+                    ],
+                    eyesClosed: [
+                        '0000000000000000',
+                        '0011000000110000',
+                        '0124444111442100',
+                        '0123222323221000',
+                        '0122322223221000',
+                        '0122522222522100',
+                        '0122222222222100',
+                        '0112223322221100',
+                        '0122220222221000',
+                        '0011222222110000',
+                        '0001222222121000',
+                        '0001222222121000',
+                        '0001100110110000',
+                        '0000000000000000',
+                        '0000000000000000',
+                        '0000000000000000',
+                    ]
+                },
+                egg: {
+                    idle: [
+                        '0000000000000000',
+                        '0000000000000000',
+                        '0000000111000000',
+                        '0000001222100000',
+                        '0000012232210000',
+                        '0000122333221000',
+                        '0000122232221000',
+                        '0001222222222100',
+                        '0001233322332100',
+                        '0001223222232100',
+                        '0000122222221000',
+                        '0000122222221000',
+                        '0000011222110000',
+                        '0000000111000000',
+                        '0000000000000000',
+                        '0000000000000000',
+                    ]
+                }
+            },
+            palettes: {
+                default: {
+                    '0': '#000000',
+                    '1': '#2b1d12',
+                    '2': '#ffb347',
+                    '3': '#cd853f',
+                    '4': '#ffb6c1',
+                    '5': '#ffffff'
+                },
+                egg: {
+                    '1': '#5d4037',
+                    '2': '#fff8e1',
+                    '3': '#ffb74d',
+                }
+            },
+            bodyParts: {
+                tailPixels: [
+                    [11, 10], [12, 10],
+                    [11, 11], [12, 11],
+                ],
+                earPixels: [
+                    [2, 1], [3, 1],
+                    [10, 1], [11, 1],
+                ],
+                legFrontPixels: [
+                    [4, 12], [5, 12],
+                ],
+                legBackPixels: [
+                    [8, 12], [9, 12],
+                ],
+                blushPixels: [
+                    [3, 7], [10, 7]
+                ],
+                eyePixels: [
+                    [3, 6], [4, 6],
+                    [8, 6], [9, 6]
+                ],
+                iconBackLeft: { x: 2, y: 2 },
+                iconBackRight: { x: 13, y: 2 }
+            },
+            behaviorAnimation: {
+                blinkIntervalSec: 5,
+                blinkDurationMs: 200,
+                mouthOpenDurationMs: 300,
+                idleEmoteIntervalSec: 15
+            }
+        },
+
+        // === 5. 裝備設定 ===
+        equipment: {
+            slots: ['head', 'face', 'neck', 'back'],
+            items: [
+                {
+                    id: 'sunglasses_basic',
+                    name: '基本墨鏡',
+                    slot: 'face',
+                    overlays: {
+                        child: {
+                            pixels: [
+                                { x: 3, y: 6, color: '0' },
+                                { x: 4, y: 6, color: '0' },
+                                { x: 8, y: 6, color: '0' },
+                                { x: 9, y: 6, color: '0' },
+                            ]
+                        }
+                    },
+                    statModifiers: {
+                        coolness: +10
+                    }
+                }
+            ]
+        },
+
+        // === 6. 個性系統 ===
+        personality: {
+            traits: [
+                {
+                    id: 'clingy',
+                    name: '黏人',
+                    description: '喜歡被互動，不理牠會生氣',
+                    effects: {
+                        decayRateMultiplier: { happiness: 1.2 },
+                        idleActionChance: { 'seek_owner': 0.3 }
+                    }
+                },
+                {
+                    id: 'aggressive',
+                    name: '暴躁',
+                    description: '吃東西時容易咬碗',
+                    effects: {
+                        decayRateMultiplier: { hunger: 1.1 },
+                        interactionReaction: { 'poke': 'bite' }
+                    }
+                },
+                {
+                    id: 'lazy',
+                    name: '懶惰',
+                    description: '容易睡過頭',
+                    effects: {
+                        decayRateMultiplier: { energy: 0.8 },
+                        sleepDurationMultiplier: 1.2
+                    }
+                },
+                {
+                    id: 'curious',
+                    name: '好奇',
+                    description: 'Idle 時會到處張望',
+                    effects: {
+                        idleActionChance: { 'explore': 0.4 }
+                    }
+                },
+                {
+                    id: 'shy',
+                    name: '膽小',
+                    description: '怕生',
+                    effects: {
+                        stressThreshold: 0.8
+                    }
+                }
+            ],
+            defaultTrait: 'clingy'
+        },
+
+        // === 7. 情緒濾鏡（Mood System）===
+        mood: {
+            states: [
+                {
+                    id: 'happy',
+                    name: '開心',
+                    condition: 'needs.happiness > 80 && needs.hunger > 50',
+                    spriteModifier: 'bounce'
+                },
+                {
+                    id: 'sleepy',
+                    name: '愛睏',
+                    condition: 'needs.energy < 30',
+                    spriteModifier: 'yawn'
+                },
+                {
+                    id: 'naughty',
+                    name: '調皮',
+                    condition: 'needs.happiness > 90 && needs.energy > 90',
+                    spriteModifier: 'prank'
+                },
+                {
+                    id: 'angry',
+                    name: '生氣',
+                    condition: 'needs.happiness < 20',
+                    spriteModifier: 'turn_away'
+                },
+                {
+                    id: 'sad',
+                    name: '難過',
+                    condition: 'needs.happiness < 40 || needs.sickness > 0',
+                    spriteModifier: 'cry'
+                }
+            ],
+            updateIntervalMinutes: 60
+        },
+
+        // === 8. 隨機事件 ===
+        randomEvents: [
+            {
+                id: 'gift_flower',
+                name: '叼來一朵花',
+                chance: 0.05,
+                effects: { happiness: +20, message: '送你一朵花！' }
+            },
+            {
+                id: 'play_toy',
+                name: '自己找玩具玩',
+                chance: 0.1,
+                effects: { happiness: +10, animation: 'play' }
+            },
+            {
+                id: 'sneeze',
+                name: '打噴嚏',
+                chance: 0.05,
+                effects: { sickness: +10, animation: 'sneeze' }
+            },
+            {
+                id: 'find_treasure',
+                name: '挖到寶物',
+                chance: 0.01,
+                effects: { happiness: +50, message: '挖到金幣了！' }
+            },
+            {
+                id: 'nightmare',
+                name: '做惡夢',
+                chance: 0.05,
+                condition: { time: 'night' },
+                effects: { happiness: -20, energy: -10, message: '做惡夢了...' }
+            }
+        ]
+    }
+};
+
+// Backward Compatibility Layer
+// Create flat versions for components that expect the old structure
+export const SPRITE_PRESETS_FLAT = {
+    tigerChick: SPRITE_PRESETS.tigerChick,
+    tinyTigerCat: SPRITE_PRESETS.tinyTigerCat,
+    tinyTigerCatB: {
+        // Legacy flat structure for backward compatibility
+        name: SPRITE_PRESETS.tinyTigerCatB.meta.name,
+        pixelSize: SPRITE_PRESETS.tinyTigerCatB.appearance.pixelSize,
+        sprite: SPRITE_PRESETS.tinyTigerCatB.appearance.sprites.child.idle,
+        spriteMouthOpen: SPRITE_PRESETS.tinyTigerCatB.appearance.sprites.child.mouthOpen,
+        spriteEyesClosed: SPRITE_PRESETS.tinyTigerCatB.appearance.sprites.child.eyesClosed,
+        palette: SPRITE_PRESETS.tinyTigerCatB.appearance.palettes.default,
+        tailPixels: SPRITE_PRESETS.tinyTigerCatB.appearance.bodyParts.tailPixels,
+        earPixels: SPRITE_PRESETS.tinyTigerCatB.appearance.bodyParts.earPixels,
+        legFrontPixels: SPRITE_PRESETS.tinyTigerCatB.appearance.bodyParts.legFrontPixels,
+        legBackPixels: SPRITE_PRESETS.tinyTigerCatB.appearance.bodyParts.legBackPixels,
+        blushPixels: SPRITE_PRESETS.tinyTigerCatB.appearance.bodyParts.blushPixels,
+        eyePixels: SPRITE_PRESETS.tinyTigerCatB.appearance.bodyParts.eyePixels,
+        iconBackLeft: SPRITE_PRESETS.tinyTigerCatB.appearance.bodyParts.iconBackLeft,
+        iconBackRight: SPRITE_PRESETS.tinyTigerCatB.appearance.bodyParts.iconBackRight,
+        eggSprite: SPRITE_PRESETS.tinyTigerCatB.appearance.sprites.egg.idle,
+        eggPalette: SPRITE_PRESETS.tinyTigerCatB.appearance.palettes.egg
     }
 };