1 files changed, 84 insertions, 47 deletions

diff --git a/js/sand/sand.js b/js/sand/sand.js
index 65e87bd..dfe6d80 100644
--- a/js/sand/sand.js
+++ b/js/sand/sand.js
@@ -8,55 +8,85 @@ const gridWidth = Math.floor(canvas.width / gridSize);
 const gridHeight = Math.floor(canvas.height / gridSize);
 const grid = Array(gridHeight).fill().map(() => Array(gridWidth).fill(0));
 
-let mouseDown = false;
+(function(){
 
-canvas.addEventListener('mousedown', (e) => {
-    mouseDown = true;
-    addSand(e);
-});
+    let mouseDown = false;
 
-canvas.addEventListener('mouseup', () => {
-    mouseDown = false;
-});
-
-canvas.addEventListener('mousemove', (e) => {
-    if (mouseDown) {
+    canvas.addEventListener('mousedown', (e) => {
+        mouseDown = true;
         addSand(e);
+    });
+
+    canvas.addEventListener('mouseup', () => {
+        mouseDown = false;
+    });
+
+    canvas.addEventListener('mousemove', (e) => {
+        if (mouseDown) {
+            addSand(e);
+        }
+    });
+
+    canvas.addEventListener('touchstart', (e) => {
+        mouseDown = true;
+        e.preventDefault(); // Prevent scrolling when touching the canvas
+        addSand(e.touches[0]); // Use the first touch point
+    });
+
+    canvas.addEventListener('touchend', () => {
+        mouseDown = false;
+    });
+
+    canvas.addEventListener('touchmove', (e) => {
+        if (mouseDown) {
+            e.preventDefault(); // Prevent scrolling when touching the canvas
+            addSand(e.touches[0]); // Use the first touch point
+        }
+    });
+
+    function addSand(e) {
+        const rect = canvas.getBoundingClientRect();
+        const x = Math.floor((e.clientX - rect.left) / gridSize);
+        const y = Math.floor((e.clientY - rect.top) / gridSize);
+        if (x >= 0 && x < gridWidth && y >= 0 && y < gridHeight) {
+            grid[y][x] = 1;
+        }
     }
-});
-
-function addSand(e) {
-    const rect = canvas.getBoundingClientRect();
-    const x = Math.floor((e.clientX - rect.left) / gridSize);
-    const y = Math.floor((e.clientY - rect.top) / gridSize);
-    if (x >= 0 && x < gridWidth && y >= 0 && y < gridHeight) {
-        grid[y][x] = 1;
-    }
-}
 
-const updateGrid = () => {
-    for (let y = gridHeight - 2; y >= 0; y--) {
-        for (let x = 0; x < gridWidth; x++) {
-            if (grid[y][x] === 1) {
-                if (grid[y + 1][x] === 0) {
-                    grid[y][x] = 0;
-                    grid[y + 1][x] = 1;
-                } else if (x > 0 && grid[y + 1][x - 1] === 0) {
-                    grid[y][x] = 0;
-                    grid[y + 1][x - 1] = 1;
-                } else if (x < gridWidth - 1 && grid[y + 1][x + 1] === 0) {
-                    grid[y][x] = 0;
-                    grid[y + 1][x + 1] = 1;
+    const updateGrid = () => {
+        for (let y = gridHeight - 2; y >= 0; y--) {
+            for (let x = 0; x < gridWidth; x++) {
+                if (grid[y][x] === 1) {
+                    if (grid[y + 1][x] === 0) {
+                        grid[y][x] = 0;
+                        grid[y + 1][x] = 1;
+                    } else if (x > 0 && grid[y + 1][x - 1] === 0) {
+                        grid[y][x] = 0;
+                        grid[y + 1][x - 1] = 1;
+                    } else if (x < gridWidth - 1 && grid[y + 1][x + 1] === 0) {
+                        grid[y][x] = 0;
+                        grid[y + 1][x + 1] = 1;
+                    }
                 }
             }
         }
-    }
-};
+    };
+
+    const drawGrid = () => {
+        // Clear the canvas
+        ctx.fillStyle = 'beige';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
 
-const drawGrid = () => {
-    // Clear the canvas
-    ctx.fillStyle = 'beige';
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
+        // Draw the sand
+        ctx.fillStyle = 'black';
+        for (let y = 0; y < gridHeight; y++) {
+            for (let x = 0; x < gridWidth; x++) {
+                if (grid[y][x] === 1) {
+                    ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize);
+                }
+            }
+        }
+    };
 
     // Draw the sand
     ctx.fillStyle = 'black';
@@ -67,12 +97,19 @@ const drawGrid = () => {
             }
         }
     }
-};
 
-const animate = () => {
-    updateGrid();
-    drawGrid();
-    requestAnimationFrame(animate);
-};
+    const framerate = 60;
+    let lastFrameTime = 0;
+    const loop = (currentTime) => {
+        const deltaTime = (currentTime - lastFrameTime) / 1000;
+        if (deltaTime > 1 / framerate) {
+            lastFrameTime = currentTime;
+            updateGrid();
+            drawGrid();
+        }
+        requestAnimationFrame(loop);
+    };
+
+    requestAnimationFrame(loop);
 
-animate();
\ No newline at end of file
+} )();
\ No newline at end of file