refactor(battle-modal): 使用进度条替换描述项以简化视图

Encaik · Sep 15, 2024 · 6c0e0a1 · 6c0e0a1 · vercel · Sep 15, 2024
1 parent f4de248
commit 6c0e0a1
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 73 deletions.
diff --git a/src/app/components/battle-modal/battle-modal.component.html b/src/app/components/battle-modal/battle-modal.component.html
@@ -2,60 +2,47 @@
   <div class="flex justify-between items-center">
     <div class="flex-1 flex flex-col justify-start items-center gap-2">
       <div class="w-12 flex-none">我方</div>
-      <nz-descriptions nzSize="small" [nzColumn]="1">
-        <nz-descriptions-item nzTitle="总血量">
-          <div class="w-full flex flex-col">
-            <nz-progress
-              class="flex-1"
-              nzStrokeColor="#52c41a"
-              [nzPercent]="getPercent(leftTotalData.hp, leftTotalData.totalHp)"
-              nzSize="small"
-              [nzShowInfo]="false"
-            ></nz-progress>
-            <div class="self-center hidden sm:block">{{ leftTotalData.hp.toFixed(1) }}/{{ leftTotalData.totalHp.toFixed(1) }}</div>
-          </div>
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="总灵力">
-          <div class="w-full flex flex-col">
-            <nz-progress
-              class="flex-1"
-              nzStrokeColor="#1890ff"
-              [nzPercent]="getPercent(leftTotalData.mp, leftTotalData.totalMp)"
-              nzSize="small"
-              [nzShowInfo]="false"
-            ></nz-progress>
-          </div>
-        </nz-descriptions-item>
-      </nz-descriptions>
+      <div class="justify-start relative flex h-5 w-full overflow-hidden rounded-full bg-blue-gray-50 font-sans text-xs font-medium">
+        <div
+          [ngStyle]="{ width: getPercent(leftTotalData.hp, leftTotalData.totalHp) + '%' }"
+          class="flex items-center justify-center h-full overflow-hidden text-white break-all bg-green-500 rounded-full"
+        >
+        </div>
+        <div class="self-center absolute w-full text-center">{{ leftTotalData.hp.toFixed(1) }}/{{ leftTotalData.totalHp.toFixed(1) }}</div>
+      </div>
+
+      <div class="justify-start relative flex h-5 w-full overflow-hidden rounded-full bg-blue-gray-50 font-sans text-xs font-medium">
+        <div
+          [ngStyle]="{ width: getPercent(leftTotalData.mp, leftTotalData.totalMp) + '%' }"
+          class="flex items-center justify-center h-full overflow-hidden text-white break-all bg-blue-500 rounded-full"
+        >
+        </div>
+        <div class="self-center absolute w-full text-center">{{ leftTotalData.mp.toFixed(1) }}/{{ leftTotalData.totalMp.toFixed(1) }}</div>
+      </div>
     </div>
     <div class="text-xl font-bold m-12">vs</div>
     <div class="flex-1 flex flex-col justify-start items-center gap-2">
       <div class="w-12 flex-none">敌方</div>
-      <nz-descriptions nzSize="small" [nzColumn]="1">
-        <nz-descriptions-item nzTitle="总血量">
-          <div class="w-full flex flex-col">
-            <nz-progress
-              class="flex-1"
-              nzStrokeColor="#52c41a"
-              [nzPercent]="getPercent(rightTotalData.hp, rightTotalData.totalHp)"
-              nzSize="small"
-              [nzShowInfo]="false"
-            ></nz-progress>
-            <div class="self-center hidden sm:block">{{ rightTotalData.hp.toFixed(1) }}/{{ rightTotalData.totalHp.toFixed(1) }}</div>
-          </div>
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="总灵力">
-          <div class="w-full flex flex-col">
-            <nz-progress
-              class="flex-1"
-              nzStrokeColor="#1890ff"
-              [nzPercent]="getPercent(rightTotalData.mp, rightTotalData.totalMp)"
-              nzSize="small"
-              [nzShowInfo]="false"
-            ></nz-progress>
-          </div>
-        </nz-descriptions-item>
-      </nz-descriptions>
+      <div class="justify-end relative flex h-5 w-full overflow-hidden rounded-full bg-blue-gray-50 font-sans text-xs font-medium">
+        <div
+          [ngStyle]="{ width: getPercent(rightTotalData.hp, rightTotalData.totalHp) + '%' }"
+          class="flex items-center justify-center h-full overflow-hidden text-white break-all bg-green-500 rounded-full"
+        >
+        </div>
+        <div class="self-center absolute w-full text-center"
+          >{{ rightTotalData.hp.toFixed(1) }}/{{ rightTotalData.totalHp.toFixed(1) }}</div
+        >
+      </div>
+      <div class="justify-end relative flex h-5 w-full overflow-hidden rounded-full bg-blue-gray-50 font-sans text-xs font-medium">
+        <div
+          [ngStyle]="{ width: getPercent(rightTotalData.mp, rightTotalData.totalMp) + '%' }"
+          class="flex items-center justify-center h-full overflow-hidden text-white break-all bg-blue-500 rounded-full"
+        >
+        </div>
+        <div class="self-center absolute w-full text-center"
+          >{{ rightTotalData.mp.toFixed(1) }}/{{ rightTotalData.totalMp.toFixed(1) }}</div
+        >
+      </div>
     </div>
   </div>
   <div class="border border-gray-300 rounded overflow-auto h-32 sm:h-96 p-4">

diff --git a/src/app/components/battle-modal/battle-modal.component.ts b/src/app/components/battle-modal/battle-modal.component.ts
@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import { Component, Input, OnInit } from '@angular/core';
 import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 import { NzProgressModule } from 'ng-zorro-antd/progress';
@@ -8,7 +9,7 @@ import { BattleCharacter, BattleInfo, BattleStatusInfo } from '../../models';
 @Component({
   selector: 'app-battle-modal',
   standalone: true,
-  imports: [NzDescriptionsModule, NzProgressModule],
+  imports: [CommonModule, NzDescriptionsModule, NzProgressModule],
   templateUrl: './battle-modal.component.html'
 })
 export class BattleModalComponent implements OnInit {
@@ -37,6 +38,7 @@ export class BattleModalComponent implements OnInit {
   timer: Subscription | undefined;
 
   ngOnInit() {
+    this.updateStatusInfo();
     this.updateAttackQueue();
     this.battleStart();
   }
@@ -116,7 +118,11 @@ export class BattleModalComponent implements OnInit {
   }
 
   getPercent(current: number, total: number) {
-    return Math.floor((current / total) * 100);
+    if (total === 0) {
+      return current >= 0 ? 100 : 0;
+    }
+    const percent = Math.round((current / total) * 100);
+    return Math.min(100, Math.max(0, percent));
   }
 
   getName(character: BattleCharacter) {

diff --git a/src/app/utils/generate.ts b/src/app/utils/generate.ts
@@ -45,34 +45,37 @@ export class Generate {
   }
 
   static enemys(length: number): BattleCharacter[] {
-    return Array.from({ length }, (_, i) => ({
-      id: `enemy-${uuidv4()}`,
-      isEnemy: true,
-      baseInfo: {
-        name: getCharacterName(),
-        gender: Math.random() > 0.5 ? '男' : '女',
-        age: Math.floor(Math.random() * 10) * 2 + 12,
-        talent: getCharacterTalent(1)
-      },
-      statusInfo: {
-        hp: Math.round(Math.random() * 40) + 100,
-        mp: Math.round(Math.random() * 40) + 100,
-        buffs: []
-      },
-      levelInfo: {
-        energy: Math.round(Math.random() * 1000),
-        level: 0
-      },
-      attrInfo: {
+    return Array.from({ length }, (_, i) => {
+      const attrInfo = {
         hp: Math.round(Math.random() * 40) + 100,
         mp: Math.round(Math.random() * 40) + 100,
         attack: Math.round(Math.random() * 40) + 20,
         defence: Math.round(Math.random() * 40) + 20,
         speed: Math.round(Math.random() * 40),
         critRate: Math.round(Math.random() * 5) + 2,
         critDamage: Math.round(Math.random() * 20) + 10
-      }
-    }));
+      };
+      return {
+        id: `enemy-${uuidv4()}`,
+        isEnemy: true,
+        baseInfo: {
+          name: getCharacterName(),
+          gender: Math.random() > 0.5 ? '男' : '女',
+          age: Math.floor(Math.random() * 10) * 2 + 12,
+          talent: getCharacterTalent(1)
+        },
+        statusInfo: {
+          hp: attrInfo.hp,
+          mp: attrInfo.mp,
+          buffs: []
+        },
+        levelInfo: {
+          energy: Math.round(Math.random() * 1000),
+          level: 0
+        },
+        attrInfo
+      };
+    });
   }
 
   /**