From 4dddadcaf702c11d4120aa3be721ad9a2f273f10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E6=80=A7=E9=A9=8A?=
 <daniel@TW-4120-NB.supermicro.com>
Date: Fri, 21 Nov 2025 17:54:17 +0800
Subject: [PATCH] feat:merge health

---
 src/components/PetGame.vue       |  60 +++-
 src/components/PetInfoScreen.vue | 407 +++++++++++++++++++++
 src/components/StatsBar.vue      | 338 +++++++++++++++---
 src/components/TopMenu.vue       |   4 +-
 src/data/petPresets.js           | 592 ++++++++++++++++++++++---------
 5 files changed, 1165 insertions(+), 236 deletions(-)
 create mode 100644 src/components/PetInfoScreen.vue

diff --git a/src/components/PetGame.vue b/src/components/PetGame.vue
index 31f05b4..59376bb 100644
--- a/src/components/PetGame.vue
+++ b/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,19 @@
       @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"
+    />
+
     <!-- Action Menu (Bottom) -->
     <ActionMenu 
       :disabled="stage === 'egg'"
@@ -171,7 +188,7 @@
       @clean="$emit('action', 'clean')"
       @medicine="$emit('action', 'medicine')"
       @training="showPrayerMenu = true"
-      @info="$emit('action', 'info')"
+      @info="showPetInfo = !showPetInfo"
     />
   </div>
 
@@ -179,7 +196,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 +205,7 @@ 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 guanyinLots from '../assets/guanyin_100_lots.json';
 
 const props = defineProps({
@@ -217,22 +235,23 @@ 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);
-
-// Fortune Logic State
-const fortuneMode = ref('normal'); // 'normal' or 'fortune'
-const currentLotNumber = ref(null);
-const consecutiveSaintCount = ref(0);
 const currentLotData = ref(null);
+const consecutiveSaintCount = ref(0);
+const showPetInfo = ref(false);
+const infoPage = ref(0);
 
-function handlePrayerSelect(type) {
+const handlePrayerSelect = (mode) => {
+  fortuneMode.value = mode;
   showPrayerMenu.value = false;
   
-  if (type === 'jiaobei') {
-    fortuneMode.value = 'normal';
+  if (mode === 'jiaobei') {
     showJiaobeiAnimation.value = true;
+  } else if (mode === 'lots') {
+    showFortuneStick.value = true;
   } else if (type === 'fortune') {
     // 開始求籤流程
     fortuneMode.value = 'fortune';
@@ -379,8 +398,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;
diff --git a/src/components/PetInfoScreen.vue b/src/components/PetInfoScreen.vue
new file mode 100644
index 0000000..1b271b2
--- /dev/null
+++ b/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>
diff --git a/src/components/StatsBar.vue b/src/components/StatsBar.vue
index 2a3102c..62b4f82 100644
--- a/src/components/StatsBar.vue
+++ b/src/components/StatsBar.vue
@@ -1,57 +1,66 @@
 <template>
   <div class="stats-bar">
-    <div class="stat-row">
-      <div class="stat-icon pixel-heart"></div>
-      <div class="pixel-bar">
-        <div 
-          v-for="i in 10" 
-          :key="'happy-' + i"
-          class="pixel-block"
-          :class="{ 
-            'filled': i <= Math.floor(displayHappiness / 10),
-            'color-red': i <= Math.floor(displayHappiness / 10)
-          }"
-        ></div>
+    <div class="stats-content">
+      <div class="stat-rows">
+        <div class="stat-row">
+          <div class="stat-icon pixel-heart"></div>
+          <div class="pixel-bar">
+            <div 
+              v-for="i in 10" 
+              :key="'happy-' + i"
+              class="pixel-block"
+              :class="{ 
+                'filled': i <= Math.floor(displayHappiness / 10),
+                'color-red': i <= Math.floor(displayHappiness / 10)
+              }"
+            ></div>
+          </div>
+          <span class="stat-value" :class="{ 'warning': displayHappiness < 30 }">{{ displayHappiness }}</span>
+        </div>
+        
+        <div class="stat-row">
+          <div class="stat-icon pixel-food"></div>
+          <div class="pixel-bar">
+            <div 
+              v-for="i in 10" 
+              :key="'food-' + i"
+              class="pixel-block"
+              :class="{ 
+                'filled': i <= Math.floor(displayHunger / 10),
+                'color-yellow': i <= Math.floor(displayHunger / 10)
+              }"
+            ></div>
+          </div>
+          <span class="stat-value" :class="{ 'warning': displayHunger < 30 }">{{ displayHunger }}</span>
+        </div>
+        
+        <div class="stat-row">
+          <div class="stat-icon pixel-health"></div>
+          <div class="pixel-bar">
+            <div 
+              v-for="i in 10" 
+              :key="'health-' + i"
+              class="pixel-block"
+              :class="{ 
+                'filled': i <= Math.floor(displayHealth / 10),
+                'color-green': i <= Math.floor(displayHealth / 10)
+              }"
+            ></div>
+          </div>
+          <span class="stat-value" :class="{ 'warning': displayHealth < 30 }">{{ displayHealth }}</span>
+        </div>
       </div>
-      <span class="stat-value" :class="{ 'warning': displayHappiness < 30 }">{{ displayHappiness }}</span>
-    </div>
-    
-    <div class="stat-row">
-      <div class="stat-icon pixel-food"></div>
-      <div class="pixel-bar">
-        <div 
-          v-for="i in 10" 
-          :key="'food-' + i"
-          class="pixel-block"
-          :class="{ 
-            'filled': i <= Math.floor(displayHunger / 10),
-            'color-yellow': i <= Math.floor(displayHunger / 10)
-          }"
-        ></div>
-      </div>
-      <span class="stat-value" :class="{ 'warning': displayHunger < 30 }">{{ displayHunger }}</span>
-    </div>
-    
-    <div class="stat-row">
-      <div class="stat-icon pixel-health"></div>
-      <div class="pixel-bar">
-        <div 
-          v-for="i in 10" 
-          :key="'health-' + i"
-          class="pixel-block"
-          :class="{ 
-            'filled': i <= Math.floor(displayHealth / 10),
-            'color-green': i <= Math.floor(displayHealth / 10)
-          }"
-        ></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>
+
+
+
+
+
diff --git a/src/components/TopMenu.vue b/src/components/TopMenu.vue
index b63479d..3d58338 100644
--- a/src/components/TopMenu.vue
+++ b/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>
diff --git a/src/data/petPresets.js b/src/data/petPresets.js
index f44cba4..e45da0e 100644
--- a/src/data/petPresets.js
+++ b/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: '小虎斑貓',
-        pixelSize: 3,
-        sprite: [
-            '0000000000000000',
-            '0011000000110000', // row 1 - Ears
-            '0124444111442100', // row 2 粉紅耳朵內側
-            '0123222323221000', // row 3 三條虎紋
-            '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
+        id: 'tinyTigerCatB',
+        meta: {
+            name: '小虎斑貓',
+            displayNameEn: 'Tiny Tiger Cat',
+            species: 'cat',
+            element: 'normal',
+            description: '一隻活潑、黏人的小虎斑貓，喜歡被餵食和玩耍。'
         },
-        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
-        eggSprite: [
-            '0000000000000000',
-            '0000000000000000',
-            '0000000111000000', // Top (Narrow)
-            '0000001222100000',
-            '0000012232210000', // Small stripe
-            '0000122333221000',
-            '0000122232221000',
-            '0001222222222100', // Widest part
-            '0001233322332100', // Side stripes
-            '0001223222232100',
-            '0000122222221000',
-            '0000122222221000',
-            '0000011222110000', // Bottom
-            '0000000111000000',
-            '0000000000000000',
-            '0000000000000000',
-        ],
-        eggPalette: {
-            '1': '#5d4037', // Dark brown outline
-            '2': '#fff8e1', // Creamy white shell
-            '3': '#ffb74d', // Orange tiger stripes
-        }
+        // === 1. 生命週期設定 ===
+        lifecycle: {
+            baseLifeMinutes: 7 * 24 * 60,
+            stages: [
+                {
+                    id: 'egg',
+                    name: '蛋',
+                    minAgeMinutes: 0,
+                    maxAgeMinutes: 30,
+                    spriteKey: 'egg',
+                    canBattle: false,
+                    canEquip: false
+                },
+                {
+                    id: 'baby',
+                    name: '幼年期',
+                    minAgeMinutes: 30,
+                    maxAgeMinutes: 6 * 60,
+                    spriteKey: 'child',
+                    canBattle: false,
+                    canEquip: false
+                },
+                {
+                    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
     }
 };