Another refactor

2026-01-05 13:24:56 +11:00
parent ac86d612e2
commit ce68470ab1
17 changed files with 853 additions and 801 deletions
--- a/src/ui/components/HudComponent.ts
+++ b/src/ui/components/HudComponent.ts
@@ -0,0 +1,60 @@
+import Phaser from "phaser";
+import { type Stats } from "../../core/types";
+import { GAME_CONFIG } from "../../core/config/GameConfig";
+
+export class HudComponent {
+  private scene: Phaser.Scene;
+  private floorText!: Phaser.GameObjects.Text;
+  private healthBar!: Phaser.GameObjects.Graphics;
+  private expBar!: Phaser.GameObjects.Graphics;
+
+  constructor(scene: Phaser.Scene) {
+    this.scene = scene;
+  }
+
+  create() {
+    this.floorText = this.scene.add.text(20, 20, "Floor: 1", {
+      fontSize: "24px",
+      color: "#ffffff",
+      fontStyle: "bold",
+      stroke: "#000000",
+      strokeThickness: 4
+    }).setScrollFactor(0).setDepth(1000);
+
+    // Health Bar
+    this.scene.add.text(20, 55, "HP", { fontSize: "14px", color: "#ff8888", fontStyle: "bold" }).setScrollFactor(0).setDepth(1000);
+    this.healthBar = this.scene.add.graphics().setScrollFactor(0).setDepth(1000);
+
+    // EXP Bar
+    this.scene.add.text(20, 85, "EXP", { fontSize: "14px", color: "#8888ff", fontStyle: "bold" }).setScrollFactor(0).setDepth(1000);
+    this.expBar = this.scene.add.graphics().setScrollFactor(0).setDepth(1000);
+  }
+
+  update(stats: Stats, floorIndex: number) {
+    this.floorText.setText(`Floor: ${floorIndex}`);
+
+    // Update Health Bar
+    this.healthBar.clear();
+    this.healthBar.fillStyle(0x333333, 0.8);
+    this.healthBar.fillRect(60, 58, 200, 12);
+    
+    const healthPercent = Phaser.Math.Clamp(stats.hp / stats.maxHp, 0, 1);
+    const healthColor = healthPercent > 0.5 ? 0x33ff33 : (healthPercent > 0.2 ? 0xffff33 : 0xff3333);
+    
+    this.healthBar.fillStyle(healthColor, 1);
+    this.healthBar.fillRect(60, 58, 200 * healthPercent, 12);
+    this.healthBar.lineStyle(2, 0xffffff, 0.5);
+    this.healthBar.strokeRect(60, 58, 200, 12);
+
+    // Update EXP Bar
+    this.expBar.clear();
+    this.expBar.fillStyle(0x333333, 0.8);
+    this.expBar.fillRect(60, 88, 200, 8);
+    
+    const expPercent = Phaser.Math.Clamp(stats.exp / stats.expToNextLevel, 0, 1);
+    this.expBar.fillStyle(GAME_CONFIG.rendering.expOrbColor, 1);
+    this.expBar.fillRect(60, 88, 200 * expPercent, 8);
+    this.expBar.lineStyle(1, 0xffffff, 0.3);
+    this.expBar.strokeRect(60, 88, 200, 8);
+  }
+}