2 files changed, 68 insertions, 29 deletions

diff --git a/js/pixel-art/pixel/app.js b/js/pixel-art/pixel/app.js
index 8a7aceb..2d83997 100644
--- a/js/pixel-art/pixel/app.js
+++ b/js/pixel-art/pixel/app.js
@@ -299,29 +299,44 @@ function exportToPNG() {
     const filename = prompt("Enter a name for your file(s)", "pixel-art");
     if (!filename) return; // Cancelled
     
-    canvases.forEach((canvasData, index) => {
-        const tempCanvas = document.createElement('canvas');
-        const tempCtx = tempCanvas.getContext('2d');
-        tempCanvas.width = gridWidth * cellSize;
-        tempCanvas.height = gridHeight * cellSize;
-
-        for (let x = 0; x < gridWidth; x++) {
-            for (let y = 0; y < gridHeight; y++) {
-                tempCtx.fillStyle = canvasData.grid[x][y] || 'transparent';
-                tempCtx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
+    // An array of promises for each canvas
+    const exportPromises = canvases.map((canvasData, index) => {
+        return new Promise(resolve => {
+            const tempCanvas = document.createElement('canvas');
+            const tempCtx = tempCanvas.getContext('2d');
+            tempCanvas.width = gridWidth * cellSize;
+            tempCanvas.height = gridHeight * cellSize;
+
+            // Draw the canvas content
+            for (let x = 0; x < gridWidth; x++) {
+                for (let y = 0; y < gridHeight; y++) {
+                    tempCtx.fillStyle = canvasData.grid[x][y] || 'transparent';
+                    tempCtx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
+                }
             }
-        }
 
-        const paddedNumber = String(index + 1).padStart(2, '0');
-        const finalFilename = canvases.length > 1 
-            ? `${filename}-${paddedNumber}.png`
-            : `${filename}.png`;
+            // Convert to data URL (trying to work around a webkit bug where blobs don't work so well)
+            const dataURL = tempCanvas.toDataURL('image/png');
+            const paddedNumber = String(index + 1).padStart(2, '0');
+            const finalFilename = canvases.length > 1 
+                ? `${filename}-${paddedNumber}.png`
+                : `${filename}.png`;
+
+            resolve({ dataURL, filename: finalFilename });
+        });
+    });
 
-        tempCanvas.toBlob(blob => {
-            const link = document.createElement('a');
-            link.href = URL.createObjectURL(blob);
-            link.download = finalFilename;
-            link.click();
+    // Process exports sequentially with delay
+    Promise.all(exportPromises).then(exports => {
+        exports.forEach((exportData, index) => {
+            setTimeout(() => {
+                const link = document.createElement('a');
+                link.href = exportData.dataURL;
+                link.download = exportData.filename;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            }, index * 1000); // 1 second delay between each download
         });
     });
 }
diff --git a/js/pixel-art/pixel/index.html b/js/pixel-art/pixel/index.html
index 3d48f5e..7e3df56 100644
--- a/js/pixel-art/pixel/index.html
+++ b/js/pixel-art/pixel/index.html
@@ -12,15 +12,31 @@
             overflow: hidden;
             background-color: teal;
         }
+
         button {
             padding: 0.5rem 0.75rem;
             font-size: 1rem;
             cursor: pointer;
             min-height: 2.75rem;
         }
+        
+        button.reset-btn {
+            cursor: pointer;
+            margin: 0;
+            padding: 0.25rem 0.5rem;
+            border: none;
+            background-color: tomato;
+            color: #fafafa;
+            min-height: 2rem;
+            font-size: 0.875rem;
+            border-radius: 0.25rem;
+            margin-top: 0.5rem;
+        }
+        
         #canvas {
             display: block;
         }
+        
         #palette {
             position: fixed;
             top: 0.625rem;
@@ -91,13 +107,20 @@
             display: flex;
             gap: 0.3125rem;
             margin-top: 0.625rem;
+            justify-content: space-between;
+            width: 100%;
         }
 
         .zoom-controls button {
             flex: 1;
-            padding: 0.5rem;
-            min-height: 2.75rem;
-            font-size: 1.125rem;
+            padding: 0.25rem;
+            height: 2rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1rem;
+            min-height: unset;
+            width: unset;
         }
 
         .pan-controls {
@@ -115,20 +138,21 @@
         }
 
         .pan-controls button {
-            padding: 0.5rem;
-            width: 2.75rem;
-            height: 2.75rem;
+            padding: 0.25rem;
+            width: 2rem;
+            height: 2rem;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 1.125rem;
+            font-size: 1rem;
+            min-height: unset;
         }
 
         #centerViewBtn {
             margin-top: 0.625rem;
         }
 
-        @media (max-width: 48rem) {  /* 768px */
+        @media (max-width: 48rem) {
             #palette {
                 width: 12.5rem;
                 top: auto;
@@ -182,7 +206,7 @@
         <button id="exportBtn">Export as PNG</button>
         <button id="saveProjectBtn">Save Project</button>
         <button id="loadProjectBtn">Load Project</button>
-        <button id="resetBtn">Reset</button>
+        <button id="resetBtn" class="reset-btn">Reset</button>
     </div>
     <script src="app.js"></script>
 </body>