From 62736b77498e5214b2615fe0d318c7bfe95e5111 Mon Sep 17 00:00:00 2001
From: Aaron Delasy <aaron@thelang.io>
Date: Tue, 22 Oct 2024 01:21:09 +0300
Subject: [PATCH] Display hits on zombies with different SVG

---
 public/entities/rocks.png | Bin 2412 -> 0 bytes
 renderer/index.ts         |  55 +++++++++++++++++++++++++++++++-------
 2 files changed, 46 insertions(+), 9 deletions(-)
 delete mode 100644 public/entities/rocks.png

diff --git a/public/entities/rocks.png b/public/entities/rocks.png
deleted file mode 100644
index 1f2e53a75ab628ba229e93d39f059c1198e5f9f5..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2412
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

diff --git a/renderer/index.ts b/renderer/index.ts
index f32827b..1cc422f 100644
--- a/renderer/index.ts
+++ b/renderer/index.ts
@@ -8,6 +8,7 @@ export interface RendererAssets {
   player: HTMLImageElement | null;
   rock: HTMLImageElement | null;
   zombie: HTMLImageElement | null;
+  zombieHit: HTMLImageElement | null;
 }
 
 const assets: RendererAssets = {
@@ -18,6 +19,7 @@ const assets: RendererAssets = {
   player: null,
   rock: null,
   zombie: null,
+  zombieHit: null,
 };
 
 async function loadAssets() {
@@ -27,12 +29,13 @@ async function loadAssets() {
 
   assets.loading = true;
 
-  const [bg, box, player, rock, zombie] = await Promise.all([
+  const [bg, box, player, rock, zombie, zombieHit] = await Promise.all([
     loadImage("/map.png"),
     loadImage("/entities/block.svg"),
     loadImage("/entities/player_alive_1.svg"),
     loadImage("/entities/rocks.svg"),
     loadImage("/entities/zombie_alive_1.svg"),
+    loadImage("/entities/zombie_alive_2.svg"),
   ]);
 
   assets.loaded = true;
@@ -41,6 +44,7 @@ async function loadAssets() {
   assets.player = player;
   assets.rock = rock;
   assets.zombie = zombie;
+  assets.zombieHit = zombieHit;
 }
 
 async function loadImage(src: string): Promise<HTMLImageElement> {
@@ -63,18 +67,46 @@ function getEntityImage(entity: Entity): HTMLImageElement | null {
       return assets.rock;
     }
     case EntityType.Zombie: {
-      return assets.zombie;
+      if (entity.getHealth() === 1) {
+        return assets.zombieHit;
+      } else {
+        return assets.zombie;
+      }
     }
   }
 }
 
 function getEntityOffset(entity: Entity): { x: number; y: number } {
   return {
-    x: entity.getType() === EntityType.Zombie ? 16 : 0,
+    x:
+      entity.getType() === EntityType.Zombie && entity.getHealth() !== 1
+        ? 8
+        : 0,
     y: 0,
   };
 }
 
+function getEntityRatio(entity: Entity): { width: number; height: number } {
+  switch (entity.getType()) {
+    case EntityType.Box: {
+      return { width: 0.87, height: 1 }; // 41x47
+    }
+    case EntityType.Player: {
+      return { width: 1, height: 1 }; // 64x64
+    }
+    case EntityType.Rock: {
+      return { width: 1, height: 0.76 }; // 67x51
+    }
+    case EntityType.Zombie: {
+      if (entity.getHealth() === 1) {
+        return { width: 0.61, height: 1 }; // 40x65
+      } else {
+        return { width: 1, height: 1 }; // 64x64
+      }
+    }
+  }
+}
+
 export class Renderer {
   private readonly assets: RendererAssets;
   private readonly cellSize: number;
@@ -118,8 +150,6 @@ export class Renderer {
     for (const entity of entities) {
       this.drawEntity(entity);
     }
-
-    this.ctx.globalAlpha = 1.0;
   }
 
   private drawBg() {
@@ -158,6 +188,7 @@ export class Renderer {
 
     const entityPosition = entity.getPosition();
     const entityOffset = getEntityOffset(entity);
+    const entityScale = getEntityRatio(entity);
 
     this.ctx.globalAlpha =
       entity.getType() === EntityType.Zombie && entity.getHealth() === 1
@@ -166,10 +197,16 @@ export class Renderer {
 
     this.ctx.drawImage(
       entityImage,
-      entityPosition.x * this.cellSize + entityOffset.x,
-      entityPosition.y * this.cellSize + entityOffset.y,
-      this.cellSize,
-      this.cellSize,
+      entityPosition.x * this.cellSize +
+        ((1 - entityScale.width) / 2) * this.cellSize +
+        entityOffset.x,
+      entityPosition.y * this.cellSize +
+        ((1 - entityScale.height) / 2) * this.cellSize +
+        entityOffset.y,
+      this.cellSize * entityScale.width,
+      this.cellSize * entityScale.height,
     );
+
+    this.ctx.globalAlpha = 1;
   }
 }