fix: Resolve drawing coordinate calculation and add debug mode

index.html

@@ -19,6 +19,7 @@
                 <button id="move-right">→</button>
                 <button id="move-up">↑</button>
                 <button id="move-down">↓</button>
+                <button id="debug-btn">Debug</button>
             </div>
             <div class="info">
                 <span id="coords">Chunk: 0,0</span>

script.js

@@ -24,6 +24,7 @@ let fps = 0;
 let worldOffsetX = 0;
 let worldOffsetY = 0;
 let chunks = new Map(); // Map to store chunks with key "x,y"
+let debugMode = false;
 
 // Initialize the simulation
 window.onload = function() {
@@ -44,6 +45,7 @@ window.onload = function() {
     document.getElementById('move-right').addEventListener('click', () => moveWorld(CHUNK_SIZE/2, 0));
     document.getElementById('move-up').addEventListener('click', () => moveWorld(0, -CHUNK_SIZE/2));
     document.getElementById('move-down').addEventListener('click', () => moveWorld(0, CHUNK_SIZE/2));
+    document.getElementById('debug-btn').addEventListener('click', toggleDebug);
     
     // Drawing events
     canvas.addEventListener('mousedown', handleMouseDown);
@@ -127,7 +129,7 @@ function handleMouseUp(e) {
 function draw(x, y) {
     if (!isDrawing) return;
     
-    // Convert to world coordinates
+    // Convert screen coordinates to world coordinates
     const worldX = Math.floor(x / PIXEL_SIZE) + worldOffsetX;
     const worldY = Math.floor(y / PIXEL_SIZE) + worldOffsetY;
     
@@ -191,7 +193,7 @@ function moveWorld(dx, dy) {
 function updateCoordinatesDisplay() {
     const chunkX = Math.floor(worldOffsetX / CHUNK_SIZE);
     const chunkY = Math.floor(worldOffsetY / CHUNK_SIZE);
-    document.getElementById('coords').textContent = `Chunk: ${chunkX},${chunkY}`;
+    document.getElementById('coords').textContent = `Chunk: ${chunkX},${chunkY} | Offset: ${Math.floor(worldOffsetX)},${Math.floor(worldOffsetY)}`;
 }
 
 function getChunkKey(chunkX, chunkY) {
@@ -390,6 +392,11 @@ function getVisibleChunks() {
     return visibleChunks;
 }
 
+function toggleDebug() {
+    debugMode = !debugMode;
+    document.getElementById('debug-btn').classList.toggle('active');
+}
+
 function render() {
     // Clear the canvas
     ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -409,6 +416,23 @@ function render() {
         const screenX = (chunkX * CHUNK_SIZE - worldOffsetX) * PIXEL_SIZE;
         const screenY = (chunkY * CHUNK_SIZE - worldOffsetY) * PIXEL_SIZE;
         
+        // Draw chunk border in debug mode
+        if (debugMode) {
+            ctx.strokeStyle = '#ff0000';
+            ctx.lineWidth = 1;
+            ctx.strokeRect(
+                screenX, 
+                screenY, 
+                CHUNK_SIZE * PIXEL_SIZE, 
+                CHUNK_SIZE * PIXEL_SIZE
+            );
+            
+            // Draw chunk coordinates
+            ctx.fillStyle = '#ffffff';
+            ctx.font = '12px Arial';
+            ctx.fillText(`${chunkX},${chunkY}`, screenX + 5, screenY + 15);
+        }
+        
         // Render each pixel in the chunk
         for (let y = 0; y < CHUNK_SIZE; y++) {
             for (let x = 0; x < CHUNK_SIZE; x++) {
@@ -436,4 +460,19 @@ function render() {
             }
         }
     }
+    
+    // Draw cursor position in debug mode
+    if (debugMode) {
+        canvas.addEventListener('mousemove', function(e) {
+            const rect = canvas.getBoundingClientRect();
+            const mouseX = e.clientX - rect.left;
+            const mouseY = e.clientY - rect.top;
+            const worldX = Math.floor(mouseX / PIXEL_SIZE) + worldOffsetX;
+            const worldY = Math.floor(mouseY / PIXEL_SIZE) + worldOffsetY;
+            
+            document.getElementById('coords').textContent = 
+                `Chunk: ${Math.floor(worldOffsetX / CHUNK_SIZE)},${Math.floor(worldOffsetY / CHUNK_SIZE)} | ` +
+                `Mouse: ${worldX},${worldY} | Offset: ${Math.floor(worldOffsetX)},${Math.floor(worldOffsetY)}`;
+        });
+    }
 }