миграция на pixi

src/pixi/healthBar.ts

@@ -0,0 +1,28 @@
+import { Graphics } from 'pixi.js';
+
+/** Matches `.health-bar`/`.health-bar__fill` in App.css. */
+const WIDTH = 28;
+const HEIGHT = 5;
+
+export function createHealthBar(): Graphics {
+  return new Graphics();
+}
+
+/** Redraws a health bar's background/border/fill for the given hp ratio (0-1). Position (the
+ * bottom-center anchor CSS did via `transform: translate(-50%, -100%)`) is the caller's job —
+ * see setHealthBarPosition. */
+export function updateHealthBar(g: Graphics, ratio: number): void {
+  const clamped = Math.max(0, Math.min(1, ratio));
+  g.clear();
+  g.rect(0, 0, WIDTH, HEIGHT)
+    .fill({ color: 0x000000, alpha: 0.5 })
+    .stroke({ width: 1, color: 0x1b1611 });
+  if (clamped > 0)
+    g.rect(0, 0, WIDTH * clamped, HEIGHT).fill(0x4caf50);
+}
+
+/** Positions a health bar so (x, yAboveSprite) is its bottom-center, same anchor as the original
+ * CSS transform. */
+export function setHealthBarPosition(g: Graphics, x: number, yAboveSprite: number): void {
+  g.position.set(x - WIDTH / 2, yAboveSprite - HEIGHT);
+}