Display zombie health bar

webdevcody · Nov 2, 2024 · 62b0899 · 62b0899
1 parent 471076e
commit 62b0899
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 8 deletions.
diff --git a/renderer/Item.ts b/renderer/Item.ts
@@ -2,17 +2,17 @@ import { type RendererEffect, type RendererEffectType } from "./Effect";
 import { type Position } from "@/simulators/zombie-survival";
 
 export class RendererItem {
-  data: HTMLImageElement;
+  data: HTMLImageElement | string;
   effects: RendererEffect[] = [];
   height: number;
   position: Position;
   width: number;
 
   constructor(
-    data: HTMLImageElement,
-    height: number,
+    data: HTMLImageElement | string,
     position: Position,
     width: number,
+    height: number,
   ) {
     this.data = data;
     this.height = height;

diff --git a/renderer/Renderer.ts b/renderer/Renderer.ts
@@ -1,12 +1,13 @@
 import { assets, loadAssets } from "./Assets";
 import * as Canvas from "./Canvas";
-import { RendererEffectType } from "./Effect";
+import { type RendererEffect, RendererEffectType } from "./Effect";
 import { RendererItem } from "./Item";
 import { REPLAY_SPEED } from "@/constants/visualizer";
 import {
   type Entity,
   EntityType,
   type Position,
+  Zombie,
   type ZombieSurvival,
 } from "@/simulators/zombie-survival";
 import { ChangeType } from "@/simulators/zombie-survival/Change";
@@ -103,6 +104,13 @@ export class Renderer {
       y += (effect.to.y - y) * delta;
     }
 
+    if (typeof item.data === "string") {
+      this.ctx.fillStyle = item.data;
+      this.ctx.fillRect(x, y, item.width, item.height);
+      this.ctx.globalAlpha = 1;
+      return;
+    }
+
     let source: HTMLImageElement = item.data;
 
     if (item.hasEffect(RendererEffectType.AssetSwap)) {
@@ -209,9 +217,9 @@ export class Renderer {
 
     const rendererItem = new RendererItem(
       assets.bg,
-      drawHeight,
       position,
       drawWidth,
+      drawHeight,
     );
 
     rendererItem.addEffect({
@@ -234,11 +242,25 @@ export class Renderer {
       y: entity.getPosition().y * this.cellSize,
     };
 
+    const healthBarItem = new RendererItem(
+      "#F00",
+      position,
+      (entity.getHealth() / Zombie.Health) * this.cellSize,
+      2,
+    );
+
+    const healthBarBgItem = new RendererItem(
+      "#FFF",
+      position,
+      this.cellSize,
+      2,
+    );
+
     const rendererItem = new RendererItem(
       entityImage,
-      this.cellSize,
       position,
       this.cellSize,
+      this.cellSize,
     );
 
     if (entity.hasChange(ChangeType.Walking)) {
@@ -248,15 +270,19 @@ export class Renderer {
       position.x = from.x * this.cellSize;
       position.y = from.y * this.cellSize;
 
-      rendererItem.addEffect({
+      const positionToEffect: RendererEffect = {
         type: RendererEffectType.PositionTo,
         duration: REPLAY_SPEED,
         startedAt: Date.now(),
         to: {
           x: to.x * this.cellSize,
           y: to.y * this.cellSize,
         },
-      });
+      };
+
+      healthBarItem.addEffect(positionToEffect);
+      healthBarBgItem.addEffect(positionToEffect);
+      rendererItem.addEffect(positionToEffect);
 
       if (from.x >= to.x) {
         rendererItem.addEffect({
@@ -284,6 +310,11 @@ export class Renderer {
     }
 
     this.items.push(rendererItem);
+
+    if (entity.getType() === EntityType.Zombie && !entity.dead()) {
+      this.items.push(healthBarBgItem);
+      this.items.push(healthBarItem);
+    }
   }
 
   private shouldAnimate(): boolean {