1 files changed, 20 insertions, 0 deletions
diff --git a/js/pixel-art/pixel/app.js b/js/pixel-art/pixel/app.js
index 2066db5..5da21b0 100644
--- a/js/pixel-art/pixel/app.js
+++ b/js/pixel-art/pixel/app.js
@@ -17,6 +17,8 @@ let isDrawing = false;
 let lastX = null;
 let lastY = null;
 let lastCell = null;
+const MIN_CELL_SIZE = 4;
+const MAX_CELL_SIZE = 64;
 
 // Event Listeners
 canvas.addEventListener('mousedown', handleInputStart);
@@ -32,6 +34,8 @@ document.getElementById('resetBtn').addEventListener('click', handleReset);
 document.getElementById('exportBtn').addEventListener('click', exportToPNG);
 window.addEventListener('keydown', handlePan);
 paletteToggle.addEventListener('click', togglePalette);
+document.getElementById('zoomInBtn').addEventListener('click', () => handleZoom(1.5));
+document.getElementById('zoomOutBtn').addEventListener('click', () => handleZoom(0.666));
 
 // Initialization
 resizeCanvas();
@@ -269,4 +273,20 @@ function togglePalette() {
         paletteToggle.classList.add('hidden');
         paletteToggle.innerHTML = '🎨';
     }
+}
+
+function handleZoom(factor) {
+    const newCellSize = Math.max(MIN_CELL_SIZE, Math.min(MAX_CELL_SIZE, cellSize * factor));
+    
+    if (newCellSize === cellSize) return;
+    
+    const centerX = (canvas.width / 2 - offsetX) / cellSize;
+    const centerY = (canvas.height / 2 - offsetY) / cellSize;
+    
+    cellSize = newCellSize;
+    
+    centerGrid();
+    
+    drawGrid();
+    saveToLocalStorage();
 }
\ No newline at end of file