about summary refs log tree commit diff stats
diff options
context:
space:
mode:
authorelioat <elioat@tilde.institute>2024-12-22 11:15:27 -0500
committerelioat <elioat@tilde.institute>2024-12-22 11:15:27 -0500
commit6fc5e5177d75606e7be08fe6b9767f54bbe3e72a (patch)
treeca93ab55a558bbae6edf293b7e8a77f73c20c669
parentc9b0fe6ef8e9efe664ba56ccc5d1fa3c2dcf80bf (diff)
downloadtour-6fc5e5177d75606e7be08fe6b9767f54bbe3e72a.tar.gz
*
-rw-r--r--js/pixel-art/pixel/app.js20
-rw-r--r--js/pixel-art/pixel/index.html16
2 files changed, 35 insertions, 1 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
diff --git a/js/pixel-art/pixel/index.html b/js/pixel-art/pixel/index.html
index 610161c..c864a98 100644
--- a/js/pixel-art/pixel/index.html
+++ b/js/pixel-art/pixel/index.html
@@ -109,6 +109,17 @@
                 bottom: 10px;
             }
         }
+
+        .zoom-controls {
+            display: flex;
+            gap: 5px;
+            margin-top: 10px;
+        }
+
+        .zoom-controls button {
+            flex: 1;
+            padding: 4px;
+        }
     </style>
 </head>
 <body>
@@ -124,8 +135,11 @@
         <input type="color" id="colorPicker" value="#000000">
         <div id="colorHistory" class="color-history"></div>
         <button id="exportBtn">Export as PNG</button>
+        <div class="zoom-controls">
+            <button id="zoomInBtn">🔍+</button>
+            <button id="zoomOutBtn">🔍-</button>
+        </div>
         <button id="resetBtn">Reset</button>
-        <!--<input type="file" id="importBtn" accept="image/png">-->
     </div>
     <script src="app.js"></script>
 </body>