diff --git a/clients/design-system/src/game-assets/IsometricCanvas/draw/DrawMeter.ts b/clients/design-system/src/game-assets/IsometricCanvas/draw/DrawMeter.ts new file mode 100644 index 00000000..1941fb7a --- /dev/null +++ b/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); +} diff --git a/clients/design-system/src/game-assets/IsometricCanvas/draw/MeterProps.ts b/clients/design-system/src/game-assets/IsometricCanvas/draw/MeterProps.ts new file mode 100644 index 00000000..352b6351 --- /dev/null +++ b/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; +}; diff --git a/clients/design-system/src/game-assets/IsometricCanvas/utils/IsometricRender.ts b/clients/design-system/src/game-assets/IsometricCanvas/utils/IsometricRender.ts index 648d1f8e..fa0dc77e 100644 --- a/clients/design-system/src/game-assets/IsometricCanvas/utils/IsometricRender.ts +++ b/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, + }); }); } } diff --git a/clients/design-system/stories/game-assets/data/Sewer.json b/clients/design-system/stories/game-assets/data/Sewer.json index 79a53d18..d7367af8 100644 --- a/clients/design-system/stories/game-assets/data/Sewer.json +++ b/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": { diff --git a/clients/design-system/stories/game-assets/data/TrainRoom.json b/clients/design-system/stories/game-assets/data/TrainRoom.json index 2db4b850..79aac81d 100644 --- a/clients/design-system/stories/game-assets/data/TrainRoom.json +++ b/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",