format

src/components/MainContent.vue

@@ -11,14 +11,30 @@
         </div>
       </div>
       <div class="p-6">
-        <div ref="containerEl" class="relative overflow-auto bg-gray-700 rounded border border-gray-600 h-96" :class="{ 'cursor-grab': !isPanning, 'cursor-grabbing': isPanning }">
+        <div
+          ref="containerEl"
+          class="relative overflow-auto rounded border border-gray-600 h-96"
+          :class="{ 'cursor-grab': !isPanning, 'cursor-grabbing': isPanning }"
+          :style="{
+            backgroundImage: `
+              linear-gradient(45deg, #1a1a1a 25%, transparent 25%),
+              linear-gradient(-45deg, #1a1a1a 25%, transparent 25%),
+              linear-gradient(45deg, transparent 75%, #1a1a1a 75%),
+              linear-gradient(-45deg, transparent 75%, #1a1a1a 75%)
+            `,
+            backgroundSize: '20px 20px',
+            backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
+            backgroundColor: '#2d3748',
+          }"
+        >
           <canvas
             ref="canvasEl"
-            class="block"
+            class="block pixel-art"
             :style="{
               transform: `scale(${store.zoomLevel.value})`,
               transformOrigin: 'top left',
-              imageRendering: 'pixelated', // Keep pixel art sharp when zooming
+              imageRendering: 'pixelated',
+              backgroundColor: 'transparent',
             }"
           ></canvas>
         </div>
@@ -101,16 +117,7 @@
   );
 
   const setupCheckerboardPattern = () => {
-    if (!canvasEl.value) return;
-
-    canvasEl.value.style.backgroundImage = `
-      linear-gradient(45deg, #1a1a1a 25%, transparent 25%),
-      linear-gradient(-45deg, #1a1a1a 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, #1a1a1a 75%),
-      linear-gradient(-45deg, transparent 75%, #1a1a1a 75%)
-    `;
-    canvasEl.value.style.backgroundSize = '20px 20px';
-    canvasEl.value.style.backgroundPosition = '0 0, 0 10px, 10px -10px, -10px 0px';
+    // Remove this function or leave it empty since we don't need it anymore
   };
 
   const updateCanvasSize = () => {