Add IndexedDB support for large image data storage; implement async pixel loading and fallback handling.

Extension/scripts/utils-manager.js

@@ -673,7 +673,7 @@ class WPlaceUtilsManager {
   }
 
   buildProgressData() {
-    return {
+    const result = {
       timestamp: Date.now(),
       version: '2.2',
       state: {
@@ -691,16 +691,42 @@ class WPlaceUtilsManager {
         blockHeight: window.state.blockHeight,
         availableColors: window.state.availableColors,
       },
-      imageData: window.state.imageData
-        ? {
-          width: window.state.imageData.width,
-          height: window.state.imageData.height,
-          pixels: Array.from(window.state.imageData.pixels),
-          totalPixels: window.state.imageData.totalPixels,
-        }
-        : null,
-      paintedMapPacked: this.buildPaintedMapPacked(),
+      imageData: null,
+      paintedMapPacked: null,
     };
+
+    // Decide how to store image pixels
+    if (window.state.imageData) {
+      const img = window.state.imageData;
+      const width = img.width;
+      const height = img.height;
+      const totalPixels = img.totalPixels;
+      const pixels = img.pixels;
+
+      const USE_IDB_THRESHOLD = 500000; // ~0.5 MB raw RGBA (before JSON expansion)
+
+      if (pixels && pixels.length) {
+        const bytes = pixels.length; // Uint8ClampedArray length equals byte size
+        if (bytes > USE_IDB_THRESHOLD) {
+          // Store pixels in IndexedDB and keep only the reference in save payload
+          const ref = this.generatePixelsRef(width, height);
+          try {
+            // Fire-and-forget async persist
+            this.storePixelsInIndexedDB(ref, { width, height, totalPixels, pixels });
+          } catch (e) {
+            console.warn('Failed to schedule IDB pixel store:', e);
+          }
+          result.imageData = { width, height, totalPixels, pixelsRef: ref, pixelsBackend: 'idb' };
+        } else {
+          result.imageData = { width, height, pixels: Array.from(pixels), totalPixels };
+        }
+      } else {
+        result.imageData = { width, height, totalPixels, pixels: null };
+      }
+    }
+
+    result.paintedMapPacked = this.buildPaintedMapPacked();
+    return result;
   }
 
   migrateProgress(saved) {
@@ -865,6 +891,45 @@ class WPlaceUtilsManager {
         } catch (e) {
           console.warn('Could not rebuild processor from saved image data:', e);
         }
+      } else if (savedData.imageData && savedData.imageData.pixelsRef) {
+        // Asynchronously load large pixel data from IndexedDB using the stored reference
+        console.log('🔄 Loading large image pixels from IndexedDB via ref:', savedData.imageData.pixelsRef);
+        window.state.imageData = {
+          width: savedData.imageData.width,
+          height: savedData.imageData.height,
+          totalPixels: savedData.imageData.totalPixels,
+          pixels: null,
+        };
+        window.state.imageLoaded = false;
+
+        this.loadPixelsFromIndexedDB(savedData.imageData.pixelsRef)
+          .then((payload) => {
+            if (!payload || !payload.pixels) {
+              console.warn('⚠️ No pixel payload found in IndexedDB for ref:', savedData.imageData.pixelsRef);
+              this.showAlert?.('⚠️ Saved image pixels not found in local database. Please reload the image file.', 'warning');
+              return;
+            }
+            try {
+              window.state.imageData.pixels = payload.pixels instanceof Uint8Array || payload.pixels instanceof Uint8ClampedArray
+                ? new Uint8ClampedArray(payload.pixels)
+                : new Uint8ClampedArray(payload.pixels);
+              window.state.imageLoaded = true;
+
+              // Rebuild processor and notify modules/UI
+              this._syncModulesAfterStateRestore();
+              this.showAlert?.('✅ Large image restored from local database.', 'success');
+
+              // Attempt overlay restoration if available
+              if (typeof this.restoreOverlayFromData === 'function') {
+                this.restoreOverlayFromData().catch(() => {});
+              }
+            } catch (err) {
+              console.warn('Failed to apply pixels from IndexedDB:', err);
+            }
+          })
+          .catch((err) => {
+            console.warn('Failed to load pixels from IndexedDB:', err);
+          });
       } else if (savedData.imageData && savedData.imageData.pixelsStripped) {
         console.warn('⚠️ Saved progress did not include raw pixel data due to quota limits. Please reload the image to resume.');
         window.state.imageData = {
@@ -1293,4 +1358,71 @@ if (!window.globalUtilsManager) {
       console.error('❌ Failed to reinitialize WPlaceUtilsManager:', error);
     }
   }, 100);
-}
+}
+
+// === IndexedDB helpers for large pixel storage ===
+WPlaceUtilsManager.prototype._openPixelDB = function() {
+  return new Promise((resolve, reject) => {
+    try {
+      const request = indexedDB.open('wplace-bot-db', 1);
+      request.onupgradeneeded = () => {
+        const db = request.result;
+        if (!db.objectStoreNames.contains('pixels')) {
+          const store = db.createObjectStore('pixels', { keyPath: 'ref' });
+          try { store.createIndex('createdAt', 'createdAt', { unique: false }); } catch {}
+        }
+      };
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    } catch (e) {
+      reject(e);
+    }
+  });
+};
+
+WPlaceUtilsManager.prototype.generatePixelsRef = function(width, height) {
+  const rand = Math.random().toString(36).slice(2, 8);
+  return `img_${width}x${height}_${Date.now().toString(36)}_${rand}`;
+};
+
+WPlaceUtilsManager.prototype.storePixelsInIndexedDB = async function(ref, payload) {
+  try {
+    const db = await this._openPixelDB();
+    return await new Promise((resolve, reject) => {
+      const tx = db.transaction('pixels', 'readwrite');
+      const store = tx.objectStore('pixels');
+      const data = {
+        ref,
+        width: payload.width,
+        height: payload.height,
+        totalPixels: payload.totalPixels,
+        pixels: payload.pixels instanceof Uint8Array || payload.pixels instanceof Uint8ClampedArray
+          ? new Uint8Array(payload.pixels)
+          : new Uint8Array(payload.pixels),
+        createdAt: Date.now(),
+      };
+      const req = store.put(data);
+      req.onsuccess = () => resolve(true);
+      req.onerror = () => reject(req.error);
+    });
+  } catch (e) {
+    console.warn('IDB storePixels failed:', e);
+    return false;
+  }
+};
+
+WPlaceUtilsManager.prototype.loadPixelsFromIndexedDB = async function(ref) {
+  try {
+    const db = await this._openPixelDB();
+    return await new Promise((resolve, reject) => {
+      const tx = db.transaction('pixels', 'readonly');
+      const store = tx.objectStore('pixels');
+      const req = store.get(ref);
+      req.onsuccess = () => resolve(req.result || null);
+      req.onerror = () => reject(req.error);
+    });
+  } catch (e) {
+    console.warn('IDB loadPixels failed:', e);
+    return null;
+  }
+};