Refactor background resources loader - game should now load much faster and also reports progress while downloading resources
parent
7fe088a0c8
commit
34ed689875
@ -1,115 +0,0 @@
|
|||||||
/**
|
|
||||||
* ES6 Bundle Loader
|
|
||||||
*
|
|
||||||
* Attempts to load the game code, and if that fails tries with the transpiled
|
|
||||||
* version. Also handles errors during load.
|
|
||||||
*/
|
|
||||||
|
|
||||||
(function () {
|
|
||||||
var loadTimeout = null;
|
|
||||||
var callbackDone = false;
|
|
||||||
|
|
||||||
// Catch load errors
|
|
||||||
|
|
||||||
function errorHandler(event, source, lineno, colno, error) {
|
|
||||||
console.error("👀 Init Error:", event, source, lineno, colno, error);
|
|
||||||
var element = document.createElement("div");
|
|
||||||
element.style.position = "fixed";
|
|
||||||
element.style.top = "0";
|
|
||||||
element.style.right = "0";
|
|
||||||
element.style.bottom = "0";
|
|
||||||
element.style.left = "0";
|
|
||||||
element.style.zIndex = "29999";
|
|
||||||
element.style.backgroundColor = "#222429";
|
|
||||||
element.style.display = "flex";
|
|
||||||
element.style.justifyContent = "center";
|
|
||||||
element.style.alignItems = "center";
|
|
||||||
|
|
||||||
var inner = document.createElement("div");
|
|
||||||
inner.style.color = "#fff";
|
|
||||||
inner.style.fontFamily = "GameFont, sans-serif";
|
|
||||||
inner.style.fontSize = "15px";
|
|
||||||
inner.style.padding = "30px";
|
|
||||||
inner.style.textAlign = "center";
|
|
||||||
element.appendChild(inner);
|
|
||||||
|
|
||||||
var heading = document.createElement("h3");
|
|
||||||
heading.style.color = "#ef5072";
|
|
||||||
heading.innerText = "Error";
|
|
||||||
heading.style.marginBottom = "40px";
|
|
||||||
heading.style.fontSize = "45px";
|
|
||||||
inner.appendChild(heading);
|
|
||||||
|
|
||||||
var content = document.createElement("p");
|
|
||||||
content.style.color = "#eee";
|
|
||||||
content.innerText = error || (event && event.message) || event || "Unknown Error";
|
|
||||||
inner.appendChild(content);
|
|
||||||
|
|
||||||
if (source) {
|
|
||||||
var sourceElement = document.createElement("p");
|
|
||||||
sourceElement.style.color = "#777";
|
|
||||||
sourceElement.innerText = sourceElement + ":" + lineno + ":" + colno;
|
|
||||||
inner.appendChild(sourceElement);
|
|
||||||
}
|
|
||||||
|
|
||||||
document.documentElement.appendChild(element);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (window.location.host.indexOf("localhost") < 0) {
|
|
||||||
window.addEventListener("error", errorHandler);
|
|
||||||
window.addEventListener("unhandledrejection", errorHandler);
|
|
||||||
}
|
|
||||||
|
|
||||||
function makeJsTag(src, integrity) {
|
|
||||||
var script = document.createElement("script");
|
|
||||||
script.src = src;
|
|
||||||
script.type = "text/javascript";
|
|
||||||
script.charset = "utf-8";
|
|
||||||
script.defer = true;
|
|
||||||
if (integrity) {
|
|
||||||
script.setAttribute("integrity", integrity);
|
|
||||||
}
|
|
||||||
return script;
|
|
||||||
}
|
|
||||||
|
|
||||||
// function loadFallbackJs(error) {
|
|
||||||
// console.warn("👀 ES6 Script not supported, loading transpiled code.");
|
|
||||||
// console.warn("👀 Error was:", error);
|
|
||||||
// var scriptTransp = makeJsTag(bundleSrcTranspiled, bundleIntegrityTranspiled);
|
|
||||||
// scriptTransp.addEventListener("error", scriptFail);
|
|
||||||
// scriptTransp.addEventListener("load", onJsLoaded);
|
|
||||||
// document.head.appendChild(scriptTransp);
|
|
||||||
// }
|
|
||||||
|
|
||||||
function scriptFail(error) {
|
|
||||||
console.error("👀 Failed to load bundle!");
|
|
||||||
console.error("👀 Error was:", error);
|
|
||||||
throw new Error("Core load failed.");
|
|
||||||
}
|
|
||||||
|
|
||||||
function expectJsParsed() {
|
|
||||||
if (!callbackDone) {
|
|
||||||
console.error("👀 Got no core callback");
|
|
||||||
throw new Error("Core thread failed to respond within time.");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function onJsLoaded() {
|
|
||||||
console.log("👀 Core loaded at", Math.floor(performance.now()), "ms");
|
|
||||||
loadTimeout = setTimeout(expectJsParsed, 15000);
|
|
||||||
window.removeEventListener("error", errorHandler);
|
|
||||||
window.removeEventListener("unhandledrejection", errorHandler);
|
|
||||||
}
|
|
||||||
|
|
||||||
window.coreThreadLoadedCb = function () {
|
|
||||||
console.log("👀 Core responded at", Math.floor(performance.now()), "ms");
|
|
||||||
clearTimeout(loadTimeout);
|
|
||||||
loadTimeout = null;
|
|
||||||
callbackDone = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
var scriptEs6 = makeJsTag(bundleSrc, bundleIntegrity);
|
|
||||||
// scriptEs6.addEventListener("error", loadFallbackJs);
|
|
||||||
scriptEs6.addEventListener("load", onJsLoaded);
|
|
||||||
document.head.appendChild(scriptEs6);
|
|
||||||
})();
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,127 @@
|
|||||||
|
(function () {
|
||||||
|
var loadTimeout = null;
|
||||||
|
var callbackDone = false;
|
||||||
|
|
||||||
|
// Catch load errors
|
||||||
|
|
||||||
|
function errorHandler(event, source, lineno, colno, error) {
|
||||||
|
console.error("👀 Init Error:", event, source, lineno, colno, error);
|
||||||
|
var element = document.createElement("div");
|
||||||
|
element.id = "ll_preload_error";
|
||||||
|
|
||||||
|
var inner = document.createElement("div");
|
||||||
|
inner.classList.add("inner");
|
||||||
|
element.appendChild(inner);
|
||||||
|
|
||||||
|
var heading = document.createElement("h3");
|
||||||
|
heading.classList.add("heading");
|
||||||
|
heading.innerText = "Fatal Error";
|
||||||
|
inner.appendChild(heading);
|
||||||
|
|
||||||
|
var content = document.createElement("p");
|
||||||
|
content.classList.add("content");
|
||||||
|
content.innerText = error || (event && event.message) || event || "Unknown Error";
|
||||||
|
inner.appendChild(content);
|
||||||
|
|
||||||
|
var discordLink = document.createElement("p");
|
||||||
|
discordLink.classList.add("discordLink");
|
||||||
|
discordLink.innerHTML =
|
||||||
|
"Please report this error in the <strong>#bugs</strong> channel of the <a href='https://discord.gg/rtuRRJDc7u' target='_blank'>official discord</a>!";
|
||||||
|
|
||||||
|
inner.appendChild(discordLink);
|
||||||
|
|
||||||
|
if (source) {
|
||||||
|
var sourceElement = document.createElement("p");
|
||||||
|
sourceElement.classList.add("source");
|
||||||
|
sourceElement.innerText = source + ":" + lineno + ":" + colno;
|
||||||
|
inner.appendChild(sourceElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.documentElement.appendChild(element);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("error", errorHandler);
|
||||||
|
|
||||||
|
function expectJsParsed() {
|
||||||
|
if (!callbackDone) {
|
||||||
|
console.error("👀 Got no core callback");
|
||||||
|
throw new Error("Core thread failed to respond within time.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onJsLoaded() {
|
||||||
|
console.log("👀 Core loaded at", Math.floor(performance.now()), "ms");
|
||||||
|
loadTimeout = setTimeout(expectJsParsed, 120000);
|
||||||
|
window.removeEventListener("unhandledrejection", errorHandler);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.coreThreadLoadedCb = function () {
|
||||||
|
console.log("👀 Core responded at", Math.floor(performance.now()), "ms");
|
||||||
|
clearTimeout(loadTimeout);
|
||||||
|
loadTimeout = null;
|
||||||
|
callbackDone = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
function progressHandler(progress) {
|
||||||
|
var progressElement = document.querySelector("#ll_preload_status");
|
||||||
|
if (progressElement) {
|
||||||
|
progressElement.innerText = "Downloading Bundle (" + Math.round(progress * 1200) + " / 1200 KB)";
|
||||||
|
}
|
||||||
|
var barElement = document.querySelector("#ll_progressbar span");
|
||||||
|
if (barElement) {
|
||||||
|
barElement.style.width = (5 + progress * 75.0).toFixed(2) + "%";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function startBundleDownload() {
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
var notifiedNotComputable = false;
|
||||||
|
|
||||||
|
xhr.open("GET", bundleSrc, true);
|
||||||
|
xhr.responseType = "arraybuffer";
|
||||||
|
xhr.onprogress = function (ev) {
|
||||||
|
if (ev.lengthComputable) {
|
||||||
|
progressHandler(ev.loaded / ev.total);
|
||||||
|
} else {
|
||||||
|
if (!notifiedNotComputable) {
|
||||||
|
notifiedNotComputable = true;
|
||||||
|
console.warn("Progress not computable:", ev);
|
||||||
|
progressHandler(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
xhr.onloadend = function () {
|
||||||
|
if (!xhr.status.toString().match(/^2/)) {
|
||||||
|
throw new Error("Failed to load bundle: " + xhr.status + " " + xhr.statusText);
|
||||||
|
} else {
|
||||||
|
if (!notifiedNotComputable) {
|
||||||
|
progressHandler(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
var options = {};
|
||||||
|
var headers = xhr.getAllResponseHeaders();
|
||||||
|
var m = headers.match(/^Content-Type\:\s*(.*?)$/im);
|
||||||
|
|
||||||
|
if (m && m[1]) {
|
||||||
|
options.type = m[1];
|
||||||
|
}
|
||||||
|
|
||||||
|
var blob = new Blob([this.response], options);
|
||||||
|
var script = document.createElement("script");
|
||||||
|
script.addEventListener("load", onJsLoaded);
|
||||||
|
script.src = window.URL.createObjectURL(blob);
|
||||||
|
script.type = "text/javascript";
|
||||||
|
script.charset = "utf-8";
|
||||||
|
if (bundleIntegrity) {
|
||||||
|
script.setAttribute("integrity", bundleIntegrity);
|
||||||
|
}
|
||||||
|
document.head.appendChild(script);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhr.send();
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("Start bundle download ...");
|
||||||
|
window.addEventListener("load", startBundleDownload);
|
||||||
|
})();
|
@ -1,67 +0,0 @@
|
|||||||
#applicationError {
|
|
||||||
z-index: 9999;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: $mainBgColor;
|
|
||||||
color: #333;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-content: center;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
@include S(padding, 30px);
|
|
||||||
|
|
||||||
@include Text;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
@include TextShadow3D(#ff0b40);
|
|
||||||
@include S(margin-top, 20px);
|
|
||||||
@include S(margin-bottom, 30px);
|
|
||||||
@include SuperHeading;
|
|
||||||
@include S(font-size, 35px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.desc {
|
|
||||||
// color: rgba(#fff, 0.6);
|
|
||||||
color: $themeColor;
|
|
||||||
text-align: left;
|
|
||||||
@include PlainText;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
a {
|
|
||||||
cursor: pointer;
|
|
||||||
pointer-events: all;
|
|
||||||
font-weight: bold;
|
|
||||||
display: block;
|
|
||||||
@include TextShadow3D(#ff0b40);
|
|
||||||
@include S(margin-top, 10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
@include S(max-width, 350px);
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.details {
|
|
||||||
font-size: 11px;
|
|
||||||
line-height: 15px;
|
|
||||||
color: #888;
|
|
||||||
font-family: monospace;
|
|
||||||
text-align: left;
|
|
||||||
@include S(padding, 6px);
|
|
||||||
@include S(border-radius, $globalBorderRadius);
|
|
||||||
@include BoxShadow3D(#eee);
|
|
||||||
position: absolute;
|
|
||||||
@include S(bottom, 25px);
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
max-width: calc(100vw - 40px);
|
|
||||||
box-sizing: border-box;
|
|
||||||
@include BreakText;
|
|
||||||
min-width: 300px;
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in new issue