Merge branch 'main' into feat-canvas-visualizer

app/play/page.tsx

@@ -122,15 +122,12 @@ export default function PlayPage() {
             className={cn(
               "flex flex-col h-full relative",
               resMap.get(map._id)
-                ? "bg-green-500"
+                ? "border-green-500"
                 : resMap.has(map._id)
-                  ? "bg-red-500"
+                  ? "border-red-500"
                   : "",
             )}
           >
-            {resMap.get(map._id) && (
-              <StarFilledIcon className="absolute top-3 right-3 w-9 h-9 -rotate-45 text-yellow-500" />
-            )}
             <CardHeader>
               <CardTitle className="text-xl font-semibold text-center">
                 Night #{map.level}

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,17 +23,31 @@ 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;
@@ -40,7 +61,7 @@ export function Map({ map, size = 64 }: { map: string[][]; size?: number }) {
         alt="Background Map"
         className="absolute inset-0 w-full h-full object-cover opacity-50"
       />
-      <div className="relative z-10">
+      <div className="relative z-10 test">
         {map.map((row, y) => (
           <div key={y} className="flex">
             {row.map((cell, x) => (