From dd85891831dee647055c58ed685a246d4d7303c1 Mon Sep 17 00:00:00 2001 From: Peter Stockings Date: Wed, 7 Jan 2026 18:30:39 +1100 Subject: [PATCH] Update hud --- src/ui/components/HudComponent.ts | 118 ++++++++++++++++++++---------- 1 file changed, 79 insertions(+), 39 deletions(-) diff --git a/src/ui/components/HudComponent.ts b/src/ui/components/HudComponent.ts index 04f55a4..35b1ebc 100644 --- a/src/ui/components/HudComponent.ts +++ b/src/ui/components/HudComponent.ts @@ -1,10 +1,9 @@ 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 container!: Phaser.GameObjects.Container; private healthBar!: Phaser.GameObjects.Graphics; private manaBar!: Phaser.GameObjects.Graphics; private expBar!: Phaser.GameObjects.Graphics; @@ -14,63 +13,104 @@ export class HudComponent { } 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); + // Create container for the HUD panel + this.container = this.scene.add.container(20, 20); + this.container.setScrollFactor(0).setDepth(1500); - // 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); + const panelWidth = 360; + const panelHeight = 70; - // 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); + // 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); - // 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); + // 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) { - this.floorText.setText(`Floor: ${floorIndex}`); + 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(0x333333, 0.8); - this.healthBar.fillRect(60, 58, 200, 12); + this.healthBar.fillStyle(0x1a1a1a, 0.9); + this.healthBar.fillRect(barX, 14, barWidth, barHeight); 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(0xFF3333, 1); + this.healthBar.fillRect(barX, 14, barWidth * healthPercent, barHeight); - 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); + this.healthBar.lineStyle(2, 0xD4AF37, 1); + this.healthBar.strokeRect(barX, 14, barWidth, barHeight); // Update Mana Bar this.manaBar.clear(); - this.manaBar.fillStyle(0x333333, 0.8); - this.manaBar.fillRect(60, 78, 200, 12); + 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(60, 78, 200 * manaPercent, 12); - this.manaBar.lineStyle(2, 0xffffff, 0.5); - this.manaBar.strokeRect(60, 78, 200, 12); + 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(0x333333, 0.8); - this.expBar.fillRect(60, 98, 200, 8); + 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(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); + 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); } }