77 lines
2.9 KiB
TypeScript
77 lines
2.9 KiB
TypeScript
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 manaBar!: 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);
|
|
|
|
// Mana Bar
|
|
this.scene.add.text(20, 75, "MP", { fontSize: "14px", color: "#88ccff", fontStyle: "bold" }).setScrollFactor(0).setDepth(1000);
|
|
this.manaBar = this.scene.add.graphics().setScrollFactor(0).setDepth(1000);
|
|
|
|
// EXP Bar
|
|
this.scene.add.text(20, 95, "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 Mana Bar
|
|
this.manaBar.clear();
|
|
this.manaBar.fillStyle(0x333333, 0.8);
|
|
this.manaBar.fillRect(60, 78, 200, 12);
|
|
|
|
const manaPercent = Phaser.Math.Clamp(stats.mana / stats.maxMana, 0, 1);
|
|
this.manaBar.fillStyle(0x3399ff, 1);
|
|
this.manaBar.fillRect(60, 78, 200 * manaPercent, 12);
|
|
this.manaBar.lineStyle(2, 0xffffff, 0.5);
|
|
this.manaBar.strokeRect(60, 78, 200, 12);
|
|
|
|
// Update EXP Bar
|
|
this.expBar.clear();
|
|
this.expBar.fillStyle(0x333333, 0.8);
|
|
this.expBar.fillRect(60, 98, 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, 98, 200 * expPercent, 8);
|
|
this.expBar.lineStyle(1, 0xffffff, 0.3);
|
|
this.expBar.strokeRect(60, 98, 200, 8);
|
|
}
|
|
}
|