*

1 files changed, 35 insertions, 20 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
         });
     });
 }