adding map sprites

webdevcody · Oct 17, 2024 · 570e20e · 570e20e
1 parent 9ea8a17
commit 570e20e
Show file tree

Hide file tree

Showing 12 changed files with 1,949 additions and 70 deletions.
diff --git a/app/map.tsx b/app/map.tsx
@@ -1,20 +1,59 @@
 export const CELL_SIZE = 32;
 
+export function getCellImage(cell: string) {
+  if (cell === "Z") {
+    return (
+      <img
+        src="/entities/zombie_alive_1.svg"
+        alt="Zombie"
+        className="w-full h-full"
+      />
+    );
+  }
+  if (cell === "P") {
+    return (
+      <img
+        src="/entities/player_alive_1.svg"
+        alt="Player"
+        className="w-full h-full"
+      />
+    );
+  }
+  if (cell === "R") {
+    return (
+      <img src="/entities/rocks.png" alt="Block" className="w-full h-full" />
+    );
+  }
+  if (cell === "B") {
+    return (
+      <img src="/entities/block.svg" alt="Block" className="w-full h-full" />
+    );
+  }
+  return null;
+}
+
 export function Map({ map }: { map: string[][] }) {
   return (
-    <div>
-      {map.map((row, y) => (
-        <div key={y} className="flex">
-          {row.map((cell, x) => (
-            <div
-              key={x}
-              className={`size-16 border flex items-center justify-center text-2xl dark:bg-black bg-slate-50`}
-            >
-              {cell}
-            </div>
-          ))}
-        </div>
-      ))}
+    <div className="relative">
+      <img
+        src="/map.png"
+        alt="Background Map"
+        className="absolute inset-0 w-full h-full object-cover opacity-50"
+      />
+      <div className="relative z-10">
+        {map.map((row, y) => (
+          <div key={y} className="flex">
+            {row.map((cell, x) => (
+              <div
+                key={x}
+                className={`size-16 border dark:border-gray-300 border-gray-700 flex items-center justify-center text-2xl bg-transparent`}
+              >
+                {getCellImage(cell)}
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
     </div>
   );
 }
diff --git a/app/play/[level]/page.tsx b/app/play/[level]/page.tsx
@@ -68,6 +68,7 @@ export default function PlayLevelPage({
     setGameResult(null);
     setBlockCount(0);
     setPlayerMap(map.grid.map((row) => [...row]));
+    setPlacementMode("player");
   };
 
   const handleCellClick = (x: number, y: number) => {
@@ -198,7 +199,7 @@ export default function PlayLevelPage({
                       <div
                         key={`${x}-${y}`}
                         className={`
-                          ${cell === " " ? "cursor-pointer hover:border-2 hover:border-dashed hover:border-slate-500" : ""}
+                          ${cell === " " ? "cursor-pointer hover:border-2 z-10 hover:border-dashed hover:border-slate-300" : ""}
                           border border-transparent
                         `}
                         onClick={() => cell === " " && handleCellClick(x, y)}

diff --git a/app/visualizer.tsx b/app/visualizer.tsx
@@ -1,6 +1,7 @@
 import { Button } from "@/components/ui/button";
 import { EntityType, ZombieSurvival } from "@/simulators/zombie-survival";
 import { useEffect, useRef, useState } from "react";
+import { getCellImage } from "./map";
 
 const AUTO_REPLAY_SPEED = 1_500;
 const REPLAY_SPEED = 600;
@@ -80,55 +81,66 @@ export function Visualizer({
   }, []);
 
   return (
-    <div>
-      {mapState.map((row, y) => (
-        <div key={y} className="flex">
-          {row.map((cell, x) => (
-            <div
-              key={x}
-              style={{
-                width: `${cellSize}px`,
-                height: `${cellSize}px`,
-                fontSize: `${parseInt(cellSize) / 2}px`,
-                opacity: (() => {
-                  const entity = simulator.current?.getEntityAt({
-                    x,
-                    y,
-                  });
-                  if (
-                    entity?.getType() === EntityType.Zombie &&
-                    entity.getHealth() === 1
-                  ) {
-                    return 0.5;
-                  }
-                  return 1;
-                })(),
-              }}
-              className={`border flex items-center justify-center dark:bg-black bg-slate-50`}
-            >
-              {cell}
+    <>
+      <div className="relative">
+        <img
+          src="/map.png"
+          alt="Background Map"
+          className="absolute inset-0 w-full h-full object-cover opacity-50"
+        />
+        <div className="relative z-10">
+          {mapState.map((row, y) => (
+            <div key={y} className="flex">
+              {row.map((cell, x) => (
+                <div
+                  key={x}
+                  style={{
+                    width: `${cellSize}px`,
+                    height: `${cellSize}px`,
+                    fontSize: `${parseInt(cellSize) / 2}px`,
+                    opacity: (() => {
+                      const entity = simulator.current?.getEntityAt({
+                        x,
+                        y,
+                      });
+                      if (
+                        entity?.getType() === EntityType.Zombie &&
+                        entity.getHealth() === 1
+                      ) {
+                        return 0.5;
+                      }
+                      return 1;
+                    })(),
+                  }}
+                  className={`border flex items-center justify-center`}
+                >
+                  {getCellImage(cell)}
+                </div>
+              ))}
             </div>
           ))}
         </div>
-      ))}
-      {controls && (
-        <div className="flex gap-2 justify-center py-2">
-          <Button onClick={startSimulation} disabled={isRunning}>
-            Replay
-          </Button>
-          <Button
-            disabled={isRunning}
-            onClick={() => {
-              simulator.current = new ZombieSurvival(map);
-              setMapState(simulator.current!.getState());
-              setIsRunning(false);
-              setNeedsReset(false);
-            }}
-          >
-            Reset
-          </Button>
-        </div>
-      )}
-    </div>
+      </div>
+      <div>
+        {controls && (
+          <div className="flex gap-2 justify-center py-2">
+            <Button onClick={startSimulation} disabled={isRunning}>
+              Replay
+            </Button>
+            <Button
+              disabled={isRunning}
+              onClick={() => {
+                simulator.current = new ZombieSurvival(map);
+                setMapState(simulator.current!.getState());
+                setIsRunning(false);
+                setNeedsReset(false);
+              }}
+            >
+              Reset
+            </Button>
+          </div>
+        )}
+      </div>
+    </>
   );
 }
diff --git a/convex/maps.ts b/convex/maps.ts
@@ -45,15 +45,6 @@ const LEVELS = [
       [" ", " ", "Z"],
     ],
   },
-  {
-    grid: [
-      [" ", " ", "R", " ", "Z"],
-      [" ", " ", " ", " ", "B"],
-      [" ", " ", " ", "R", " "],
-      ["Z", " ", " ", " ", " "],
-      [" ", " ", "B", " ", " "],
-    ],
-  },
 ];
 
 export const addMap = mutation({

diff --git a/public/entities/block.svg b/public/entities/block.svg