feat: add draw meter to isocanvas

clients/design-system/src/game-assets/IsometricCanvas/draw/DrawMeter.ts

@@ -0,0 +1,34 @@
+import { MeterProps } from './MeterProps';
+import { GRID_WIDTH } from '../utils/GridDimensions';
+
+export function drawMeter(ctx: CanvasRenderingContext2D, props: MeterProps) {
+  const x = props.x;
+  const y = props.y;
+  const width = props.width ?? GRID_WIDTH;
+  const height = props.height ?? 5;
+  const percent = props.percent ? props.percent * 0.01 : 1;
+  const lineWidth = props.lineWidth ?? 2;
+  const strokeColor = props.strokeColor ?? '#000';
+  const fillColor = props.fillColor ?? '#f00';
+
+  const startX = x - width / 2;
+  const startY = y;
+
+  ctx.lineWidth = lineWidth;
+  ctx.strokeStyle = strokeColor;
+
+  // Draw the background rectangle
+  ctx.beginPath();
+
+  ctx.globalAlpha = 0.618;
+  ctx.fillStyle = '#000';
+  ctx.rect(startX, startY, width, height);
+  ctx.fill();
+  ctx.stroke();
+  ctx.globalAlpha = 1.0;
+
+  // Draw the filled rectangle
+  const filledWidth = width * percent;
+  ctx.fillStyle = fillColor;
+  ctx.fillRect(startX, startY, filledWidth, height);
+}

clients/design-system/src/game-assets/IsometricCanvas/draw/MeterProps.ts

@@ -0,0 +1,10 @@
+export type MeterProps = {
+  x: number;
+  y: number;
+  percent: number;
+  width?: number;
+  height?: number;
+  lineWidth?: number;
+  strokeColor?: string;
+  fillColor?: string;
+};

clients/design-system/src/game-assets/IsometricCanvas/utils/IsometricRender.ts

@@ -12,6 +12,7 @@ import { kebabCase } from 'lodash';
 import { GridAnimations } from '../types/Animation.type';
 import { Duration } from 'luxon';
 import { ActorModel } from '../models/Actor.model';
+import { drawMeter } from '../draw/DrawMeter';
 
 export class IsometricRender {
   private tilesRendered: number = 0;
@@ -313,6 +314,13 @@ export class IsometricRender {
                   x: vectors.right.x - (vectors.right.x - vectors.left.x),
                   y: vectors.top.y - 17,
                 });
+
+                // TODO determine percent based on actor's health
+                drawMeter(ctx, {
+                  x: vectors.left.x,
+                  y: vectors.top.y - 17 - (actor.height ?? 60),
+                  percent: 50,
+                });
               });
             }
           }

clients/design-system/stories/game-assets/data/Sewer.json

@@ -91,7 +91,7 @@
       "currentAnimation": "look1",
       "startingFrame": 0,
       "totalFrames": 3,
-      "frameDuration": { "seconds": 0.83 },
+      "frameDuration": { "seconds": 10 },
       "isAnimating": true
     },
     "wave1": {

clients/design-system/stories/game-assets/data/TrainRoom.json

@@ -38,10 +38,6 @@
     }
   ],
   "dialogues": [
-    {
-      "actorId": "MEEKU_ONI",
-      "text": "Look at that! A new game engine!"
-    }
   ],
   "spriteMapRegistry": {
     "f": "/game-assets/fadewall-1x1.png",