diff --git a/index.html b/index.html
index 8cc8b74..91b17fb 100644
--- a/index.html
+++ b/index.html
@@ -19,6 +19,7 @@
+
Chunk: 0,0
diff --git a/script.js b/script.js
index 3c974d4..a843749 100644
--- a/script.js
+++ b/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)}`;
+ });
+ }
}