MapleShrine/mkxp
1
0
Fork 0
Code Issues 32 Pull requests 11 Projects Releases Wiki Activity

Show loading progress

Browse source
This commit is contained in:
Varun Patil 2020-05-07 15:05:27 +05:30
parent 2de283af8e
commit 30c4b1d594
2 changed files with 66 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

63
shell.html
View file

@ -29,7 +29,7 @@
} }
#spinner { #spinner {
position: fixed; position: fixed;
bottom: 20px; bottom: 40px;
left: 20px; left: 20px;
opacity: 0.5; opacity: 0.5;
} }
@ -80,6 +80,16 @@
height: 25px; height: 25px;
width: 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;
}
</style> </style>
</head> </head>
<body> <body>
@ -87,6 +97,7 @@
<div style="overflow:visible;" id="spinner"> <div style="overflow:visible;" id="spinner">
<div class="spinner"></div> <div class="spinner"></div>
</div> </div>
<div id="progress">Loading ...</div>
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1 width="640" height="480"></canvas> <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1 width="640" height="480"></canvas>
</div> </div>
@ -179,11 +190,11 @@
}; };
window.setBusy = function() { window.setBusy = function() {
document.getElementById('spinner').style.display = "block"; document.getElementById('spinner').style.opacity = "0.5";
}; };
window.setNotBusy = function() { window.setNotBusy = function() {
document.getElementById('spinner').style.display = "none"; document.getElementById('spinner').style.opacity = "0";
}; };
function fullscreen() { function fullscreen() {
@ -206,10 +217,54 @@
const url = mapping[f.toLowerCase().replace(new RegExp("\\.[^/.]+$"), "")]; const url = mapping[f.toLowerCase().replace(new RegExp("\\.[^/.]+$"), "")];
if (!url) return; 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> </script>
{{{ SCRIPT }}} {{{ SCRIPT }}}

16
src/emscripten.cpp
View file

@ -13,9 +13,6 @@ EM_JS(void, load_file_async_js, (const char* fullPathC), {
// Check if already loaded // Check if already loaded
if (window.fileAsyncCache.hasOwnProperty(fullPath)) return wakeUp(); if (window.fileAsyncCache.hasOwnProperty(fullPath)) return wakeUp();
// Show spinner
if (window.setBusy) window.setBusy();
// Get mapping key // Get mapping key
const mappingKey = fullPath.toLowerCase().replace(new RegExp("\\\\.[^/.]+$"), ""); const mappingKey = fullPath.toLowerCase().replace(new RegExp("\\\\.[^/.]+$"), "");
const mappingValue = mapping[mappingKey]; const mappingValue = mapping[mappingKey];
@ -39,12 +36,13 @@ EM_JS(void, load_file_async_js, (const char* fullPathC), {
} catch (err) {} } catch (err) {}
// Get the new file // Get the new file
FS.createPreloadedFile(path, filename, iurl, true, true, function() { getLazyAsset(iurl, filename, () => {
window.fileAsyncCache[fullPath] = 1; FS.createPreloadedFile(path, filename, iurl, true, true, function() {
if (window.setNotBusy) window.setNotBusy(); window.fileAsyncCache[fullPath] = 1;
if (window.fileLoadedAsync) window.fileLoadedAsync(fullPath); if (window.fileLoadedAsync) window.fileLoadedAsync(fullPath);
wakeUp(); wakeUp();
}, console.error); }, console.error);
});
}); });
}); });