peterstockings/rogue
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update hud

Browse Source
This commit is contained in:
Peter Stockings
2026-01-07 18:30:39 +11:00
parent 47e15ccf5c
commit dd85891831
1 changed files with 79 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/ui/components/HudComponent.ts
View File

@@ -1,10 +1,9 @@
import Phaser from "phaser"; import Phaser from "phaser";
import { type Stats } from "../../core/types"; import { type Stats } from "../../core/types";
import { GAME_CONFIG } from "../../core/config/GameConfig";
export class HudComponent { export class HudComponent {
private scene: Phaser.Scene; private scene: Phaser.Scene;
private floorText!: Phaser.GameObjects.Text; private container!: Phaser.GameObjects.Container;
private healthBar!: Phaser.GameObjects.Graphics; private healthBar!: Phaser.GameObjects.Graphics;
private manaBar!: Phaser.GameObjects.Graphics; private manaBar!: Phaser.GameObjects.Graphics;
private expBar!: Phaser.GameObjects.Graphics; private expBar!: Phaser.GameObjects.Graphics;
@@ -14,63 +13,104 @@ export class HudComponent {
} }
create() { create() {
this.floorText = this.scene.add.text(20, 20, "Floor: 1", { // Create container for the HUD panel
fontSize: "24px", this.container = this.scene.add.container(20, 20);
color: "#ffffff", this.container.setScrollFactor(0).setDepth(1500);
fontStyle: "bold",
stroke: "#000000",
strokeThickness: 4
}).setScrollFactor(0).setDepth(1000);
// Health Bar const panelWidth = 360;
this.scene.add.text(20, 55, "HP", { fontSize: "14px", color: "#ff8888", fontStyle: "bold" }).setScrollFactor(0).setDepth(1000); const panelHeight = 70;
this.healthBar = this.scene.add.graphics().setScrollFactor(0).setDepth(1000);
// Mana Bar // Draw background panel
this.scene.add.text(20, 75, "MP", { fontSize: "14px", color: "#88ccff", fontStyle: "bold" }).setScrollFactor(0).setDepth(1000); const bg = this.scene.add.graphics();
this.manaBar = this.scene.add.graphics().setScrollFactor(0).setDepth(1000); 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 // Heart icon (HP) - red pixel heart
this.scene.add.text(20, 95, "EXP", { fontSize: "14px", color: "#8888ff", fontStyle: "bold" }).setScrollFactor(0).setDepth(1000); const heartIcon = this.scene.add.graphics();
this.expBar = this.scene.add.graphics().setScrollFactor(0).setDepth(1000); 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) { update(stats: Stats, _floorIndex: number) {
this.floorText.setText(`Floor: ${floorIndex}`); const barX = 40;
const barWidth = 305;
const barHeight = 14;
const barSpacing = 4;
// Update Health Bar // Update Health Bar
this.healthBar.clear(); this.healthBar.clear();
this.healthBar.fillStyle(0x333333, 0.8); this.healthBar.fillStyle(0x1a1a1a, 0.9);
this.healthBar.fillRect(60, 58, 200, 12); this.healthBar.fillRect(barX, 14, barWidth, barHeight);
const healthPercent = Phaser.Math.Clamp(stats.hp / stats.maxHp, 0, 1); 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.lineStyle(2, 0xD4AF37, 1);
this.healthBar.fillRect(60, 58, 200 * healthPercent, 12); this.healthBar.strokeRect(barX, 14, barWidth, barHeight);
this.healthBar.lineStyle(2, 0xffffff, 0.5);
this.healthBar.strokeRect(60, 58, 200, 12);
// Update Mana Bar // Update Mana Bar
this.manaBar.clear(); this.manaBar.clear();
this.manaBar.fillStyle(0x333333, 0.8); this.manaBar.fillStyle(0x1a1a1a, 0.9);
this.manaBar.fillRect(60, 78, 200, 12); this.manaBar.fillRect(barX, 14 + barHeight + barSpacing, barWidth, barHeight);
const manaPercent = Phaser.Math.Clamp(stats.mana / stats.maxMana, 0, 1); const manaPercent = Phaser.Math.Clamp(stats.mana / stats.maxMana, 0, 1);
this.manaBar.fillStyle(0x3399ff, 1); this.manaBar.fillStyle(0x3399FF, 1);
this.manaBar.fillRect(60, 78, 200 * manaPercent, 12); this.manaBar.fillRect(barX, 14 + barHeight + barSpacing, barWidth * manaPercent, barHeight);
this.manaBar.lineStyle(2, 0xffffff, 0.5);
this.manaBar.strokeRect(60, 78, 200, 12); this.manaBar.lineStyle(2, 0xD4AF37, 1);
this.manaBar.strokeRect(barX, 14 + barHeight + barSpacing, barWidth, barHeight);
// Update EXP Bar // Update EXP Bar
this.expBar.clear(); this.expBar.clear();
this.expBar.fillStyle(0x333333, 0.8); this.expBar.fillStyle(0x1a1a1a, 0.9);
this.expBar.fillRect(60, 98, 200, 8); this.expBar.fillRect(barX, 14 + (barHeight + barSpacing) * 2, barWidth, barHeight);
const expPercent = Phaser.Math.Clamp(stats.exp / stats.expToNextLevel, 0, 1); const expPercent = Phaser.Math.Clamp(stats.exp / stats.expToNextLevel, 0, 1);
this.expBar.fillStyle(GAME_CONFIG.rendering.expOrbColor, 1); this.expBar.fillStyle(0xFFD700, 1);
this.expBar.fillRect(60, 98, 200 * expPercent, 8); this.expBar.fillRect(barX, 14 + (barHeight + barSpacing) * 2, barWidth * expPercent, barHeight);
this.expBar.lineStyle(1, 0xffffff, 0.3);
this.expBar.strokeRect(60, 98, 200, 8); this.expBar.lineStyle(2, 0xD4AF37, 1);
this.expBar.strokeRect(barX, 14 + (barHeight + barSpacing) * 2, barWidth, barHeight);
} }
} }