117 lines
4.0 KiB
TypeScript
117 lines
4.0 KiB
TypeScript
import Phaser from "phaser";
|
|
import { type Stats } from "../../core/types";
|
|
|
|
export class HudComponent {
|
|
private scene: Phaser.Scene;
|
|
private container!: Phaser.GameObjects.Container;
|
|
private healthBar!: Phaser.GameObjects.Graphics;
|
|
private manaBar!: Phaser.GameObjects.Graphics;
|
|
private expBar!: Phaser.GameObjects.Graphics;
|
|
|
|
constructor(scene: Phaser.Scene) {
|
|
this.scene = scene;
|
|
}
|
|
|
|
create() {
|
|
// Create container for the HUD panel
|
|
this.container = this.scene.add.container(20, 20);
|
|
this.container.setScrollFactor(0).setDepth(1500);
|
|
|
|
const panelWidth = 360;
|
|
const panelHeight = 70;
|
|
|
|
// Draw background panel
|
|
const bg = this.scene.add.graphics();
|
|
bg.fillStyle(0x2a1f3d, 0.95);
|
|
bg.fillRect(0, 0, panelWidth, panelHeight);
|
|
|
|
// Gold border (outer)
|
|
bg.lineStyle(3, 0xD4AF37, 1);
|
|
bg.strokeRect(0, 0, panelWidth, panelHeight);
|
|
|
|
// Inner gold border accent
|
|
bg.lineStyle(2, 0xB8860B, 0.6);
|
|
bg.strokeRect(4, 4, panelWidth - 8, panelHeight - 8);
|
|
|
|
this.container.add(bg);
|
|
|
|
// Heart icon (HP) - red pixel heart
|
|
const heartIcon = this.scene.add.graphics();
|
|
heartIcon.fillStyle(0xFF3333, 1);
|
|
// Simple pixel heart shape (smaller)
|
|
heartIcon.fillRect(14, 14, 6, 6);
|
|
heartIcon.fillRect(20, 14, 6, 6);
|
|
heartIcon.fillRect(11, 18, 18, 8);
|
|
heartIcon.fillRect(14, 26, 12, 3);
|
|
this.container.add(heartIcon);
|
|
|
|
// Water drop icon (Mana) - blue pixel drop
|
|
const manaIcon = this.scene.add.graphics();
|
|
manaIcon.fillStyle(0x3399FF, 1);
|
|
// Simple pixel water drop
|
|
manaIcon.fillRect(17, 34, 6, 4);
|
|
manaIcon.fillRect(14, 38, 12, 8);
|
|
this.container.add(manaIcon);
|
|
|
|
// Star icon (EXP) - cyan pixel star (smaller)
|
|
const starIcon = this.scene.add.graphics();
|
|
starIcon.fillStyle(0xFFD700, 1);
|
|
// Simple pixel star shape
|
|
starIcon.fillRect(17, 52, 6, 3);
|
|
starIcon.fillRect(14, 55, 12, 6);
|
|
starIcon.fillRect(17, 61, 6, 2);
|
|
this.container.add(starIcon);
|
|
|
|
// Create bar graphics (will be updated each frame)
|
|
this.healthBar = this.scene.add.graphics();
|
|
this.manaBar = this.scene.add.graphics();
|
|
this.expBar = this.scene.add.graphics();
|
|
this.container.add(this.healthBar);
|
|
this.container.add(this.manaBar);
|
|
this.container.add(this.expBar);
|
|
}
|
|
|
|
update(stats: Stats, _floorIndex: number) {
|
|
const barX = 40;
|
|
const barWidth = 305;
|
|
const barHeight = 14;
|
|
const barSpacing = 4;
|
|
|
|
// Update Health Bar
|
|
this.healthBar.clear();
|
|
this.healthBar.fillStyle(0x1a1a1a, 0.9);
|
|
this.healthBar.fillRect(barX, 14, barWidth, barHeight);
|
|
|
|
const healthPercent = Phaser.Math.Clamp(stats.hp / stats.maxHp, 0, 1);
|
|
this.healthBar.fillStyle(0xFF3333, 1);
|
|
this.healthBar.fillRect(barX, 14, barWidth * healthPercent, barHeight);
|
|
|
|
this.healthBar.lineStyle(2, 0xD4AF37, 1);
|
|
this.healthBar.strokeRect(barX, 14, barWidth, barHeight);
|
|
|
|
// Update Mana Bar
|
|
this.manaBar.clear();
|
|
this.manaBar.fillStyle(0x1a1a1a, 0.9);
|
|
this.manaBar.fillRect(barX, 14 + barHeight + barSpacing, barWidth, barHeight);
|
|
|
|
const manaPercent = Phaser.Math.Clamp(stats.mana / stats.maxMana, 0, 1);
|
|
this.manaBar.fillStyle(0x3399FF, 1);
|
|
this.manaBar.fillRect(barX, 14 + barHeight + barSpacing, barWidth * manaPercent, barHeight);
|
|
|
|
this.manaBar.lineStyle(2, 0xD4AF37, 1);
|
|
this.manaBar.strokeRect(barX, 14 + barHeight + barSpacing, barWidth, barHeight);
|
|
|
|
// Update EXP Bar
|
|
this.expBar.clear();
|
|
this.expBar.fillStyle(0x1a1a1a, 0.9);
|
|
this.expBar.fillRect(barX, 14 + (barHeight + barSpacing) * 2, barWidth, barHeight);
|
|
|
|
const expPercent = Phaser.Math.Clamp(stats.exp / stats.expToNextLevel, 0, 1);
|
|
this.expBar.fillStyle(0xFFD700, 1);
|
|
this.expBar.fillRect(barX, 14 + (barHeight + barSpacing) * 2, barWidth * expPercent, barHeight);
|
|
|
|
this.expBar.lineStyle(2, 0xD4AF37, 1);
|
|
this.expBar.strokeRect(barX, 14 + (barHeight + barSpacing) * 2, barWidth, barHeight);
|
|
}
|
|
}
|