From 746a0eb57c9cf6483a4e3bf3eca7dd8a7f4a1497 Mon Sep 17 00:00:00 2001
From: hanqin <qinhan@cupower.com>
Date: Thu, 30 Apr 2026 14:40:23 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E6=88=98=E6=96=97=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E5=B0=8F=E6=95=B0=E7=82=B9=E6=98=BE=E7=A4=BA=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Build_God_Game/src/views/BattleView.vue | 50 ++++++++++++++++---------
 1 file changed, 32 insertions(+), 18 deletions(-)

diff --git a/Build_God_Game/src/views/BattleView.vue b/Build_God_Game/src/views/BattleView.vue
index ae0bd93..41e3e80 100644
--- a/Build_God_Game/src/views/BattleView.vue
+++ b/Build_God_Game/src/views/BattleView.vue
@@ -22,15 +22,29 @@ const isFighting = ref(false)
 const battleResult = ref<'win' | 'lose' | null>(null)
 const rewards = ref<{ type: string; itemName: string; count: number }[]>([])
 
-const playerHealthPercent = computed(() => {
-  if (playerMaxHealth.value === 0) return 0
-  return (playerHealth.value / playerMaxHealth.value) * 100
-})
+const formatBattleStat = (value: number) => Math.floor(value)
 
-const monsterHealthPercent = computed(() => {
-  if (monsterMaxHealth.value === 0) return 0
-  return (monsterHealth.value / monsterMaxHealth.value) * 100
-})
+const toHealthPercent = (current: number, max: number) => {
+  if (max <= 0) return 0
+  const ratio = current / max
+  return Math.min(100, Math.max(0, Math.round(ratio * 100)))
+}
+
+const playerHealthPercent = computed(() =>
+  toHealthPercent(playerHealth.value, playerMaxHealth.value)
+)
+
+const monsterHealthPercent = computed(() =>
+  toHealthPercent(monsterHealth.value, monsterMaxHealth.value)
+)
+
+const playerHealthDisplay = computed(
+  () => `${formatBattleStat(playerHealth.value)} / ${formatBattleStat(playerMaxHealth.value)}`
+)
+
+const monsterHealthDisplay = computed(
+  () => `${formatBattleStat(monsterHealth.value)} / ${formatBattleStat(monsterMaxHealth.value)}`
+)
 
 const currentCharacter = computed(() => characterStore.currentCharacter)
 const currentMonster = computed(() => monsterStore.currentMonster)
@@ -60,10 +74,10 @@ const startBattle = async () => {
   battleLog.value = []
   rewards.value = []
 
-  playerMaxHealth.value = currentCharacter.value.maxHP
-  playerHealth.value = currentCharacter.value.currentHP
-  monsterMaxHealth.value = currentMonster.value.health
-  monsterHealth.value = currentMonster.value.health
+  playerMaxHealth.value = Math.floor(currentCharacter.value.maxHP)
+  playerHealth.value = Math.floor(currentCharacter.value.currentHP)
+  monsterMaxHealth.value = Math.floor(currentMonster.value.health)
+  monsterHealth.value = Math.floor(currentMonster.value.health)
 
   const playerAttack = currentCharacter.value.attack
   const playerDefend = currentCharacter.value.defend
@@ -154,13 +168,13 @@ onMounted(async () => {
     await monsterStore.fetchMonster(monsterId.value)
     
     if (currentCharacter.value) {
-      playerMaxHealth.value = currentCharacter.value.maxHP
-      playerHealth.value = currentCharacter.value.currentHP
+      playerMaxHealth.value = Math.floor(currentCharacter.value.maxHP)
+      playerHealth.value = Math.floor(currentCharacter.value.currentHP)
     }
 
     if (currentMonster.value) {
-      monsterMaxHealth.value = currentMonster.value.health
-      monsterHealth.value = currentMonster.value.health
+      monsterMaxHealth.value = Math.floor(currentMonster.value.health)
+      monsterHealth.value = Math.floor(currentMonster.value.health)
     }
   }
 })
@@ -196,7 +210,7 @@ onUnmounted(() => {
             :color="monsterHealthPercent > 30 ? '#ef4444' : '#dc2626'"
           />
           <div class="health-text">
-            {{ monsterHealth }} / {{ monsterMaxHealth }}
+            {{ monsterHealthDisplay }}
           </div>
         </div>
 
@@ -215,7 +229,7 @@ onUnmounted(() => {
             :color="playerHealthPercent > 30 ? '#22c55e' : '#ef4444'"
           />
           <div class="health-text">
-            {{ playerHealth }} / {{ playerMaxHealth }}
+            {{ playerHealthDisplay }}
           </div>
         </div>
       </div>