Merge branch 'main' into speed-change

renderer/Assets.ts

@@ -6,9 +6,15 @@ export interface RendererAssets {
   landmine: HTMLImageElement | null;
   player: HTMLImageElement | null;
   rock: HTMLImageElement | null;
-  zombie: HTMLImageElement | null;
   zombieDead: HTMLImageElement | null;
-  zombieWalking: HTMLImageElement | null;
+  zombieIdleFrame1: HTMLImageElement | null;
+  zombieIdleFrame2: HTMLImageElement | null;
+  zombieIdleFrame3: HTMLImageElement | null;
+  zombieIdleFrame4: HTMLImageElement | null;
+  zombieWalkingFrame1: HTMLImageElement | null;
+  zombieWalkingFrame2: HTMLImageElement | null;
+  zombieWalkingFrame3: HTMLImageElement | null;
+  zombieWalkingFrame4: HTMLImageElement | null;
 }
 
 export const assets: RendererAssets = {
@@ -19,9 +25,15 @@ export const assets: RendererAssets = {
   landmine: null,
   player: null,
   rock: null,
-  zombie: null,
   zombieDead: null,
-  zombieWalking: null,
+  zombieIdleFrame1: null,
+  zombieIdleFrame2: null,
+  zombieIdleFrame3: null,
+  zombieIdleFrame4: null,
+  zombieWalkingFrame1: null,
+  zombieWalkingFrame2: null,
+  zombieWalkingFrame3: null,
+  zombieWalkingFrame4: null,
 };
 
 export async function loadAssets() {
@@ -31,27 +43,53 @@ export async function loadAssets() {
 
   assets.loading = true;
 
-  const [bg, box, landmine, player, rock, zombie, zombieDead, zombieWalking] =
-    await Promise.all([
-      loadAssetImage("/map.webp"),
-      loadAssetImage("/entities/box.svg"),
-      loadAssetImage("/entities/landmine.svg"),
-      loadAssetImage("/entities/player-attacking.svg"),
-      loadAssetImage("/entities/rock.svg"),
-      loadAssetImage("/entities/zombie-idle.svg"),
-      loadAssetImage("/entities/zombie-dead.svg"),
-      loadAssetImage("/entities/zombie-walking.svg"),
-    ]);
+  const [
+    bg,
+    box,
+    landmine,
+    player,
+    rock,
+    zombieDead,
+    zombieIdleFrame1,
+    zombieIdleFrame2,
+    zombieIdleFrame3,
+    zombieIdleFrame4,
+    zombieWalkingFrame1,
+    zombieWalkingFrame2,
+    zombieWalkingFrame3,
+    zombieWalkingFrame4,
+  ] = await Promise.all([
+    loadAssetImage("/map.webp"),
+    loadAssetImage("/entities/box.svg"),
+    loadAssetImage("/entities/landmine.svg"),
+    loadAssetImage("/entities/player-attacking.svg"),
+    loadAssetImage("/entities/rock.svg"),
+    loadAssetImage("/entities/zombie-dead.png"),
+    loadAssetImage("/entities/zombie-idle-frame1.png"),
+    loadAssetImage("/entities/zombie-idle-frame2.png"),
+    loadAssetImage("/entities/zombie-idle-frame3.png"),
+    loadAssetImage("/entities/zombie-idle-frame4.png"),
+    loadAssetImage("/entities/zombie-walking-frame1.png"),
+    loadAssetImage("/entities/zombie-walking-frame2.png"),
+    loadAssetImage("/entities/zombie-walking-frame3.png"),
+    loadAssetImage("/entities/zombie-walking-frame4.png"),
+  ]);
 
   assets.loaded = true;
   assets.bg = bg;
   assets.box = box;
   assets.landmine = landmine;
   assets.player = player;
   assets.rock = rock;
-  assets.zombie = zombie;
   assets.zombieDead = zombieDead;
-  assets.zombieWalking = zombieWalking;
+  assets.zombieIdleFrame1 = zombieIdleFrame1;
+  assets.zombieIdleFrame2 = zombieIdleFrame2;
+  assets.zombieIdleFrame3 = zombieIdleFrame3;
+  assets.zombieIdleFrame4 = zombieIdleFrame4;
+  assets.zombieWalkingFrame1 = zombieWalkingFrame1;
+  assets.zombieWalkingFrame2 = zombieWalkingFrame2;
+  assets.zombieWalkingFrame3 = zombieWalkingFrame3;
+  assets.zombieWalkingFrame4 = zombieWalkingFrame4;
 }
 
 export async function loadAssetImage(src: string): Promise<HTMLImageElement> {

renderer/Canvas.ts

@@ -0,0 +1,13 @@
+const imagesMap = new Map<string, HTMLImageElement>();
+
+export function toImage(canvas: HTMLCanvasElement): HTMLImageElement {
+  const url = canvas.toDataURL();
+
+  if (!imagesMap.has(url)) {
+    const image = document.createElement("img");
+    image.src = url;
+    imagesMap.set(url, image);
+  }
+
+  return imagesMap.get(url)!;
+}

renderer/Effect.ts

@@ -1,23 +1,35 @@
 import { type Position } from "@/simulators/zombie-survival";
 
 export enum RendererEffectType {
+  AssetSwap,
+  FlipHorizontal,
   HueRotate,
-  Move,
   Opacity,
+  PositionTo,
 }
 
 export type RendererEffect =
+  | {
+      type: RendererEffectType.AssetSwap;
+      duration: number;
+      every: number;
+      startedAt: number;
+      steps: HTMLImageElement[];
+    }
+  | {
+      type: RendererEffectType.FlipHorizontal;
+    }
   | {
       type: RendererEffectType.HueRotate;
       degree: number;
     }
   | {
-      type: RendererEffectType.Move;
+      type: RendererEffectType.Opacity;
+      value: number;
+    }
+  | {
+      type: RendererEffectType.PositionTo;
       duration: number;
       startedAt: number;
       to: Position;
-    }
-  | {
-      type: RendererEffectType.Opacity;
-      value: number;
     };

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;