Merge pull request #97 from bymrbanks/main

Sprite adjustments
webdevcody · Oct 19, 2024 · ed3c9ef · ed3c9ef
2 parents 532c0ed + 932cffb
commit ed3c9ef
Show file tree

Hide file tree

Showing 4 changed files with 1,006 additions and 15 deletions.
diff --git a/components/Map.tsx b/components/Map.tsx
@@ -7,6 +7,13 @@ export function getCellImage(cell: string) {
         src="/entities/zombie_alive_1.svg"
         alt="Zombie"
         className="w-full h-full"
+        style={{
+          width: '100%',
+          height: '100%',
+          position: 'relative',
+          top: '-20px',
+          left: '4px',
+        }}
       />
     );
   }
@@ -16,31 +23,40 @@ export function getCellImage(cell: string) {
         src="/entities/player_alive_1.svg"
         alt="Player"
         className="w-full h-full"
+        style={{
+          position: 'relative',
+          top: '-20px',
+          left: '4px',
+        }}
       />
     );
   }
   if (cell === "R") {
     return (
-      <img src="/entities/rocks.png" alt="Block" className="w-full h-full" />
+      <img src="/entities/rocks.svg" alt="Block" className="w-full h-full" />
     );
   }
   if (cell === "B") {
     return (
-      <img src="/entities/block.svg" alt="Block" className="w-full h-full" />
+      <img
+        src="/entities/block.svg"
+        alt="Block"
+        className="w-full h-full"
+        style={{
+          position: 'relative',
+          top: '0px',
+          left: '0px',
+        }}
+      />
     );
   }
   return null;
 }
 
 export function Map({ map, size = 64 }: { map: string[][]; size?: number }) {
   return (
-    <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">
+    <div className="relative" style={{ backgroundImage: 'url(/map_tiles.svg)', backgroundSize: '128px', backgroundPosition: 'bottom left' }}>
+      <div className="relative z-10 test">
         {map.map((row, y) => (
           <div key={y} className="flex">
             {row.map((cell, x) => (

diff --git a/components/Visualizer.tsx b/components/Visualizer.tsx
@@ -108,12 +108,15 @@ export function Visualizer({
 
   return (
     <>
-      <div className="relative" ref={ref}>
-        <img
-          src="/map.png"
-          alt="Background Map"
-          className="absolute inset-0 w-full h-full object-cover opacity-50"
-        />
+      <div
+        className="relative"
+        ref={ref}
+        style={{
+          backgroundImage: "url(/map_tiles.svg)",
+          backgroundSize: "128px",
+          backgroundPosition: "bottom left",
+        }}
+      >
         <div
           className="relative z-10"
           style={{

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