*

1 files changed, 71 insertions, 10 deletions

diff --git a/js/pixel-art/pixel/app.js b/js/pixel-art/pixel/app.js
index e4a2235..2066db5 100644
--- a/js/pixel-art/pixel/app.js
+++ b/js/pixel-art/pixel/app.js
@@ -13,9 +13,18 @@ let offsetY = 0;
 const paletteToggle = document.getElementById('palette-toggle');
 const palette = document.getElementById('palette');
 let isPaletteVisible = true;
+let isDrawing = false;
+let lastX = null;
+let lastY = null;
+let lastCell = null;
 
 // Event Listeners
-canvas.addEventListener('click', handleCanvasClick);
+canvas.addEventListener('mousedown', handleInputStart);
+canvas.addEventListener('mousemove', handleInputMove);
+canvas.addEventListener('mouseup', handleInputEnd);
+canvas.addEventListener('touchstart', handleInputStart);
+canvas.addEventListener('touchmove', handleInputMove);
+canvas.addEventListener('touchend', handleInputEnd);
 document.getElementById('colorPicker').addEventListener('input', handleColorChange);
 document.getElementById('gridWidth').addEventListener('change', updateGridSize);
 document.getElementById('gridHeight').addEventListener('change', updateGridSize);
@@ -180,22 +189,74 @@ function exportToPNG() {
     });
 }
 
-function handleCanvasClick(e) {
-    const rect = canvas.getBoundingClientRect();
-    const x = Math.floor((e.clientX - rect.left - offsetX) / cellSize);
-    const y = Math.floor((e.clientY - rect.top - offsetY) / cellSize);
+function handleInputStart(e) {
+    e.preventDefault();
+    isDrawing = true;
+    const coords = getInputCoordinates(e);
+    const cell = getCellFromCoords(coords);
     
-    if (x >= 0 && x < gridWidth && y >= 0 && y < gridHeight) {
-        if (e.detail === 2) {  // Double-click resets the cell
-            grid[x][y] = null;
-        } else {  // Single-click paints the cell with the current color
-            grid[x][y] = currentColor;
+    if (cell) {
+        lastCell = cell;
+        // If cell already has a color, remove it. Otherwise, add color
+        if (grid[cell.x][cell.y]) {
+            grid[cell.x][cell.y] = null;
+        } else {
+            grid[cell.x][cell.y] = currentColor;
         }
         drawGrid();
         saveToLocalStorage();
     }
 }
 
+function handleInputMove(e) {
+    e.preventDefault();
+    if (!isDrawing) return;
+    
+    const coords = getInputCoordinates(e);
+    const cell = getCellFromCoords(coords);
+    
+    if (cell && (!lastCell || cell.x !== lastCell.x || cell.y !== lastCell.y)) {
+        lastCell = cell;
+        // When dragging, always draw (don't erase)
+        grid[cell.x][cell.y] = currentColor;
+        drawGrid();
+        saveToLocalStorage();
+    }
+}
+
+function handleInputEnd(e) {
+    e.preventDefault();
+    isDrawing = false;
+    lastCell = null;
+}
+
+function getInputCoordinates(e) {
+    const rect = canvas.getBoundingClientRect();
+    if (e.touches) {
+        // Touch event
+        return {
+            x: e.touches[0].clientX - rect.left,
+            y: e.touches[0].clientY - rect.top
+        };
+    } else {
+        // Mouse event
+        return {
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top
+        };
+    }
+}
+
+function getCellFromCoords(coords) {
+    const x = Math.floor((coords.x - offsetX) / cellSize);
+    const y = Math.floor((coords.y - offsetY) / cellSize);
+    
+    if (x >= 0 && x < gridWidth && y >= 0 && y < gridHeight) {
+        return { x, y };
+    }
+    return null;
+}
+
 function togglePalette() {
     isPaletteVisible = !isPaletteVisible;