use border

webdevcody · Oct 19, 2024 · 16a3a9e · 16a3a9e
1 parent ed3c9ef
commit 16a3a9e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 17 deletions.
diff --git a/app/play/page.tsx b/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}

diff --git a/components/Map.tsx b/components/Map.tsx
@@ -8,11 +8,11 @@ export function getCellImage(cell: string) {
         alt="Zombie"
         className="w-full h-full"
         style={{
-          width: '100%',
-          height: '100%',
-          position: 'relative',
-          top: '-20px',
-          left: '4px',
+          width: "100%",
+          height: "100%",
+          position: "relative",
+          top: "-20px",
+          left: "4px",
         }}
       />
     );
@@ -24,9 +24,9 @@ export function getCellImage(cell: string) {
         alt="Player"
         className="w-full h-full"
         style={{
-          position: 'relative',
-          top: '-20px',
-          left: '4px',
+          position: "relative",
+          top: "-20px",
+          left: "4px",
         }}
       />
     );
@@ -43,9 +43,9 @@ export function getCellImage(cell: string) {
         alt="Block"
         className="w-full h-full"
         style={{
-          position: 'relative',
-          top: '0px',
-          left: '0px',
+          position: "relative",
+          top: "0px",
+          left: "0px",
         }}
       />
     );
@@ -55,7 +55,12 @@ export function getCellImage(cell: string) {
 
 export function Map({ map, size = 64 }: { map: string[][]; size?: number }) {
   return (
-    <div className="relative" style={{ backgroundImage: 'url(/map_tiles.svg)', backgroundSize: '128px', backgroundPosition: 'bottom left' }}>
+    <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 test">
         {map.map((row, y) => (
           <div key={y} className="flex">