feat: #fe low health pulse

frontend/src/js/fight_scene.ts

@@ -300,6 +300,7 @@ export default class FightScene extends Phaser.Scene {
     this.health = Math.max(this.health, 0);
     this.hud.setHealth(this.health);
     this.hud.changeFlash(this.hud.health, delta > 0 ? 0x00ff00 : 0xff0000);
+    if (this.health <= 25) this.hud.startLowHealthPulse();
     this.checkAlive();
   }
 

frontend/src/js/hud.ts

@@ -49,6 +49,8 @@ export default class HUD {
   clock: Phaser.GameObjects.Text;
   health: Phaser.GameObjects.Text;
 
+  lowHealthPulse: Phaser.Tweens.Tween;
+
   constructor(scene: Phaser.Scene, options?: HudOptions) {
     this.scene = scene;
     this.options = options || {
@@ -182,4 +184,18 @@ export default class HUD {
     object.setTintFill(color);
     this.scene.time.delayedCall(100, () => object.clearTint());
   }
+
+  startLowHealthPulse() {
+    this.lowHealthPulse ??= this.scene.tweens.addCounter({
+      from: 0,
+      to: 255,
+      duration: 500,
+      ease: Phaser.Math.Easing.Sine.Out,
+      repeat: -1,
+      onUpdate: (tween) => {
+        const value = Math.floor(tween.getValue());
+        this.health.setTint(Phaser.Display.Color.GetColor(255, value, value));
+      },
+    });
+  }
 }