diff --git a/frontend/src/js/fight_scene.ts b/frontend/src/js/fight_scene.ts index e06b6c5fa6c1f2ae18ca68aad836042b36a89b7c..dadc59cfa0af35a1039154bf01490acebffaaad8 100644 --- a/frontend/src/js/fight_scene.ts +++ b/frontend/src/js/fight_scene.ts @@ -9,6 +9,7 @@ import levenshtein from "damerau-levenshtein"; import * as Types from "../../../backend/src/types"; import Foe from "./foe"; import Typewriter from "./typewriter"; +import HUD from "./hud"; const DEVICE_KEY = "OETZI/DEVICE_ID"; @@ -19,12 +20,6 @@ interface InputStatus { final: string; } -interface HUD { - score: Phaser.GameObjects.Text; - input: Phaser.GameObjects.Text; - health: Phaser.GameObjects.Text; -} - export default class FightScene extends Phaser.Scene { foes: Array<Foe>; player: Phaser.Types.Physics.Arcade.SpriteWithDynamicBody; @@ -39,7 +34,6 @@ export default class FightScene extends Phaser.Scene { constructor() { super("fight"); this.foes = []; - this.hud = {}; } preload() { @@ -80,6 +74,9 @@ export default class FightScene extends Phaser.Scene { init() { this.score = 0; this.health = 100; + this.hud = new HUD(this); + this.hud.setHealth(this.health); + this.hud.setScore(this.score); this.events.on("pause", this.concealClues.bind(this)); this.events.on("resume", this.uncoverClues.bind(this)); } @@ -120,7 +117,6 @@ export default class FightScene extends Phaser.Scene { // ); // this.scale.refresh(); - this.createHUD(); this.createAndBindTypewriter(); await this.initBeDevice(); @@ -202,42 +198,15 @@ export default class FightScene extends Phaser.Scene { }); } - createHUD() { - this.hud.input = this.add.text( - this.cameras.main.width / 2, - this.cameras.main.height / 2, - "", - { - font: "bold 64px Courier", - color: "#ffffff", - }, - ); - this.hud.input.setOrigin(0.5, 0.5); - - this.hud.score = this.add.text(10, 10, "", { - font: "bold 48px Courier", - color: "lightgreen", - }); - this.hud.score.setOrigin(0, 0); - this.updateScore(0); - - this.hud.health = this.add.text(this.cameras.main.width - 10, 10, "", { - font: "bold 48px Courier", - color: "orange", - }); - this.hud.health.setOrigin(1, 0); - this.updateHealth(0); - } - updateScore(delta: number) { this.score += delta; - this.hud.score.text = "✪ " + this.score.toString(); + this.hud.setScore(this.score); } updateHealth(delta: number) { this.health += delta; this.health = Math.max(this.health, 0); - this.hud.health.text = this.health.toString() + " â¤"; + this.hud.setHealth(this.health); this.checkAlive(); } @@ -360,7 +329,7 @@ export default class FightScene extends Phaser.Scene { if (inputStatus.began_at === null) return; if (inputStatus.ended_at === null) return; if (inputStatus.final === "") return; - this.hud.input.text = ""; + this.hud.setInput(""); this.submitTranscription({ began_at: inputStatus.began_at.toISOString(), ended_at: inputStatus.ended_at.toISOString(), @@ -369,7 +338,7 @@ export default class FightScene extends Phaser.Scene { }); }; this.typewriter.onChange = (inputStatus) => { - this.hud.input.text = inputStatus.final; + this.hud.setInput(inputStatus.final); }; } diff --git a/frontend/src/js/hud.ts b/frontend/src/js/hud.ts new file mode 100644 index 0000000000000000000000000000000000000000..8a3b874b1b5e7eaada033206f75e5487abbc71cb --- /dev/null +++ b/frontend/src/js/hud.ts @@ -0,0 +1,59 @@ +const ICONS = { + SCORE: "ï¸âï¸", + HEALTH: "â¤ï¸ï¸", +}; + +export default class HUD { + scene: Phaser.Scene; + input: Phaser.GameObjects.Text; + score: Phaser.GameObjects.Text; + health: Phaser.GameObjects.Text; + + constructor(scene: Phaser.Scene) { + this.scene = scene; + this.input = this.initInput(scene); + this.score = this.initScore(scene); + this.health = this.initHealth(scene); + } + + initInput(scene: Phaser.Scene) { + return scene.add + .text(scene.cameras.main.width / 2, scene.cameras.main.height / 2, "", { + font: "bold 64px Courier", + color: "#ffffff", + }) + .setOrigin(0.5, 0.5); + } + + initScore(scene: Phaser.Scene) { + return scene.add + .text(10, 10, "", { + font: "bold 32px Courier", + color: "lightgreen", + testString: `${ICONS.SCORE}100000`, + }) + .setOrigin(0, 0); + } + + initHealth(scene: Phaser.Scene) { + return scene.add + .text(scene.cameras.main.width - 10, 10, "", { + font: "bold 32px Courier", + color: "orange", + testString: `100 ${ICONS.HEALTH}`, + }) + .setOrigin(1, 0); + } + + setInput(input: string) { + this.input.text = input; + } + + setScore(score: number) { + this.score.text = `${ICONS.SCORE}${score}`; + } + + setHealth(health: number) { + this.health.text = `${health}${ICONS.HEALTH}`; + } +}