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 {
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;
}
</style>
</head>
<body>
@ -87,6 +97,7 @@
<div style="overflow:visible;" id="spinner">
<div class="spinner"></div>
</div>
<div id="progress">Loading ...</div>
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1 width="640" height="480"></canvas>
</div>
@ -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>
{{{ SCRIPT }}}