diff --git a/shell.html b/shell.html
index c99c4ce..298f353 100644
--- a/shell.html
+++ b/shell.html
@@ -29,7 +29,7 @@
}
#spinner {
position: fixed;
- bottom: 20px;
+ bottom: 40px;
left: 20px;
opacity: 0.5;
}
@@ -80,6 +80,16 @@
height: 25px;
width: 25px;
}
+
+ #progress {
+ background-color: white;
+ opacity: 0.6;
+ position: fixed;
+ bottom: 0; left: 0;
+ color: black;
+ padding: 3px 10px;
+ border-top-right-radius: 5px;
+ }
@@ -87,6 +97,7 @@
+ Loading ...
@@ -179,11 +190,11 @@
};
window.setBusy = function() {
- document.getElementById('spinner').style.display = "block";
+ document.getElementById('spinner').style.opacity = "0.5";
};
window.setNotBusy = function() {
- document.getElementById('spinner').style.display = "none";
+ document.getElementById('spinner').style.opacity = "0";
};
function fullscreen() {
@@ -206,10 +217,54 @@
const url = mapping[f.toLowerCase().replace(new RegExp("\\.[^/.]+$"), "")];
if (!url) return;
- fetch('gameasync/' + url).then().catch();
+ // Get filename
+ let filename = url.split('?')[0];
+ filename = filename.split('/');
+ filename = filename[filename.length -1];
+
+ // Preload asset
+ getLazyAsset('gameasync/' + url, filename, () => {});
});
});
};
+
+ var hideTimer = 0;
+ function getLazyAsset(url, filename, callback) {
+ const xhr = new XMLHttpRequest();
+ const pdiv = document.getElementById("progress");
+ let showTimer = 0;
+
+ xhr.onreadystatechange = function() {
+ if (xhr.readyState == XMLHttpRequest.DONE) {
+ pdiv.innerHTML = `${filename} - done`;
+ hideTimer = setTimeout(() => {
+ window.setNotBusy();
+ pdiv.style.opacity = '0';
+ hideTimer = 0;
+ }, 500);
+ callback();
+
+ clearTimeout(showTimer);
+ }
+ }
+ xhr.onprogress = function (event) {
+ const loaded = Math.round(event.loaded / 1024);
+ const total = Math.round(event.total / 1024);
+ pdiv.innerHTML = `${filename} - ${loaded}KB / ${total}KB`;
+ };
+ xhr.open('GET', url);
+ xhr.send();
+
+ showTimer = setTimeout(() => {
+ pdiv.style.opacity = '0.5';
+ window.setBusy();
+ }, 100);
+
+ if (hideTimer) {
+ clearTimeout(hideTimer);
+ hideTimer = 0;
+ }
+ }
{{{ SCRIPT }}}
diff --git a/src/emscripten.cpp b/src/emscripten.cpp
index 588db8e..21b81ec 100644
--- a/src/emscripten.cpp
+++ b/src/emscripten.cpp
@@ -13,9 +13,6 @@ EM_JS(void, load_file_async_js, (const char* fullPathC), {
// Check if already loaded
if (window.fileAsyncCache.hasOwnProperty(fullPath)) return wakeUp();
- // Show spinner
- if (window.setBusy) window.setBusy();
-
// Get mapping key
const mappingKey = fullPath.toLowerCase().replace(new RegExp("\\\\.[^/.]+$"), "");
const mappingValue = mapping[mappingKey];
@@ -39,12 +36,13 @@ EM_JS(void, load_file_async_js, (const char* fullPathC), {
} catch (err) {}
// Get the new file
- FS.createPreloadedFile(path, filename, iurl, true, true, function() {
- window.fileAsyncCache[fullPath] = 1;
- if (window.setNotBusy) window.setNotBusy();
- if (window.fileLoadedAsync) window.fileLoadedAsync(fullPath);
- wakeUp();
- }, console.error);
+ getLazyAsset(iurl, filename, () => {
+ FS.createPreloadedFile(path, filename, iurl, true, true, function() {
+ window.fileAsyncCache[fullPath] = 1;
+ if (window.fileLoadedAsync) window.fileLoadedAsync(fullPath);
+ wakeUp();
+ }, console.error);
+ });
});
});