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

Add in mana and an asset viewer

Browse Source
This commit is contained in:
Peter Stockings
2026-01-05 18:57:17 +11:00
parent 43d5dce2e5
commit a7091c70c6
14 changed files with 866 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,6 +6,7 @@ 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) {
@@ -25,8 +26,12 @@ export class HudComponent {
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, 85, "EXP", { fontSize: "14px", color: "#8888ff", fontStyle: "bold" }).setScrollFactor(0).setDepth(1000);
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);
}
@@ -46,15 +51,26 @@ export class HudComponent {
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, 88, 200, 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, 88, 200 * expPercent, 8);
this.expBar.fillRect(60, 98, 200 * expPercent, 8);
this.expBar.lineStyle(1, 0xffffff, 0.3);
this.expBar.strokeRect(60, 88, 200, 8);
this.expBar.strokeRect(60, 98, 200, 8);
}
}