Add image lazy loading

extra/js/drive.js

@@ -19,7 +19,13 @@ function _base64ToBytes(base64) {
     return bytes;
 }
 
-window.loadFileAsync = function(fullPath, callback) {
+// Canvas used for image generation
+var generationCanvas = document.createElement('canvas')
+
+window.loadFileAsync = function(fullPath, bitmap, callback) {
+    // noop
+    callback = callback || (() => {});
+
     // Make cache object
     if (!window.fileAsyncCache) window.fileAsyncCache = {};
 
@@ -27,7 +33,7 @@ window.loadFileAsync = function(fullPath, callback) {
     if (window.fileAsyncCache.hasOwnProperty(fullPath)) return callback();
 
     // Show spinner
-    if (window.setBusy) window.setBusy();
+    if (!bitmap && window.setBusy) window.setBusy();
 
     // Get mapping key
     const mappingKey = fullPath.toLowerCase().replace(new RegExp("\\.[^/.]+$"), "");
@@ -46,18 +52,47 @@ window.loadFileAsync = function(fullPath, callback) {
     const path = "/game/" + mappingValue.substring(0, mappingValue.lastIndexOf("/"));
     const filename = mappingValue.substring(mappingValue.lastIndexOf("/") + 1).split("?")[0];
 
-    // Delete original file if existent
-    try {
-        FS.unlink(path + "/" + filename);
-    } catch (err) {}
+    // Main loading function
+    const load = (cb1) => {
+        getLazyAsset(iurl, filename, (data) => {
+            // Delete original file if existent
+            try { FS.unlink(path + "/" + filename); } catch (err) {}
 
-    // Get the new file
-    getLazyAsset(iurl, filename, () => {
-        FS.createPreloadedFile(path, filename, iurl, true, true, function() {
-            window.fileAsyncCache[fullPath] = 1;
-            if (window.setNotBusy) window.setNotBusy();
-            if (window.fileLoadedAsync) window.fileLoadedAsync(fullPath);
-            callback();
+            FS.createPreloadedFile(path, filename, new Uint8Array(data), true, true, function() {
+                window.fileAsyncCache[fullPath] = 1;
+                if (!bitmap && window.setNotBusy) window.setNotBusy();
+                if (window.fileLoadedAsync) window.fileLoadedAsync(fullPath);
+                callback();
+                if (cb1) cb1();
+            }, console.error);
+        });
+    }
+
+    // Show progress if doing it synchronously only
+    if (bitmap && bitmapSizeMapping[mappingKey]) {
+        // Remove existing file
+        try { FS.unlink(path + "/" + filename); } catch (err) {}
+
+        // Get image
+        const sm = bitmapSizeMapping[mappingKey];
+        generationCanvas.width = sm[0];
+        generationCanvas.height = sm[1];
+
+        // Create dummy from data uri
+        FS.createPreloadedFile(path, filename, generationCanvas.toDataURL(), true, true, function() {
+            // Return control to C++
+            callback(); callback = () => {};
+
+            // Lazy load and refresh
+            load(() => {
+                const reloadBitmap = Module.cwrap('reloadBitmap', 'number', ['number'])
+                reloadBitmap(bitmap);
+            });
         }, console.error);
-    });
+    } else {
+        if (bitmap) {
+            console.warn('No sizemap for image', mappingKey);
+        }
+        load();
+    }
 }