Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2026-03-02 03:39:21 +00:00
Code Issues Projects Releases Wiki Activity

Refactor background resources loader - game should now load much faster and also reports progress while downloading resources

Browse Source
This commit is contained in:
tobspr
2022-06-18 14:43:26 +02:00
parent 7fe088a0c8
commit 34ed689875
24 changed files with 657 additions and 721 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/css/application_error.scss
View File

@@ -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;
}
}

10
src/css/common.scss
View File

@@ -427,6 +427,16 @@ canvas {
}
}
.prefab_LoadingProgressIndicator {
@include PlainText;
@include S(margin-top, 20px);
width: 100%;
color: #336c9f;
@include S(height, 20px);
text-transform: uppercase;
text-align: center;
}
.prefab_FeatureComingSoon {
position: relative;
&::after {

1
src/css/main.scss
View File

@@ -16,7 +16,6 @@
@import "common";
@import "animations";
@import "game_state";
@import "application_error";
@import "textual_game_state";
@import "adinplay";
@import "changelog_skins";

2
src/html/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" style="--ui-scale: 1.33;">
<head>
<title>shapez Demo - Factory Automation Game</title>

400
src/js/core/background_resources_loader.js
View File

@@ -2,58 +2,36 @@
import { Application } from "../application";
/* typehints:end */
import { initSpriteCache } from "../game/meta_building_registry";
import { MUSIC, SOUNDS } from "../platform/sound";
import { T } from "../translations";
import { AtlasDefinition, atlasFiles } from "./atlas_definitions";
import { cachebust } from "./cachebust";
import { Loader } from "./loader";
import { createLogger } from "./logging";
import { Signal } from "./signal";
import { SOUNDS, MUSIC } from "../platform/sound";
import { AtlasDefinition, atlasFiles } from "./atlas_definitions";
import { initBuildingCodesAfterResourcesLoaded } from "../game/meta_building_registry";
import { cachebust } from "./cachebust";
import { clamp, getLogoSprite, timeoutPromise } from "./utils";
const logger = createLogger("background_loader");
export function getLogoSprite() {
if (G_WEGAME_VERSION) {
return "logo_wegame.png";
}
const MAIN_MENU_ASSETS = {
sprites: [getLogoSprite()],
sounds: [SOUNDS.uiClick, SOUNDS.uiError, SOUNDS.dialogError, SOUNDS.dialogOk],
atlas: [],
css: [],
};
if (G_IS_STEAM_DEMO) {
return "logo_demo.png";
}
const INGAME_ASSETS = {
sprites: [],
sounds: [
...Array.from(Object.values(MUSIC)),
...Array.from(Object.values(SOUNDS)).filter(sound => !MAIN_MENU_ASSETS.sounds.includes(sound)),
],
atlas: atlasFiles,
css: ["async-resources.css"],
};
if (G_CHINA_VERSION) {
return "logo_cn.png";
}
if (G_IS_STANDALONE) {
return "logo.png";
}
if (G_IS_BROWSER) {
return "logo_demo.png";
}
return "logo.png";
}
const essentialMainMenuSprites = [getLogoSprite()];
const essentialMainMenuSounds = [
SOUNDS.uiClick,
SOUNDS.uiError,
SOUNDS.dialogError,
SOUNDS.dialogOk,
SOUNDS.swishShow,
SOUNDS.swishHide,
];
const essentialBareGameAtlases = atlasFiles;
const essentialBareGameSprites = [];
const essentialBareGameSounds = [MUSIC.theme];
const additionalGameSprites = [];
// @ts-ignore
const additionalGameSounds = [...Object.values(SOUNDS), ...Object.values(MUSIC)];
const LOADER_TIMEOUT_PER_RESOURCE = 180000;
export class BackgroundResourcesLoader {
/**
@@ -63,193 +41,199 @@ export class BackgroundResourcesLoader {
constructor(app) {
this.app = app;
this.registerReady = false;
this.mainMenuReady = false;
this.bareGameReady = false;
this.additionalReady = false;
this.mainMenuPromise = null;
this.ingamePromise = null;
this.signalMainMenuLoaded = new Signal();
this.signalBareGameLoaded = new Signal();
this.signalAdditionalLoaded = new Signal();
this.numAssetsLoaded = 0;
this.numAssetsToLoadTotal = 0;
// Avoid loading stuff twice
this.spritesLoaded = [];
this.soundsLoaded = [];
this.atlasesLoaded = [];
this.cssLoaded = [];
this.resourceStateChangedSignal = new Signal();
}
getNumAssetsLoaded() {
return this.numAssetsLoaded;
}
getNumAssetsTotal() {
return this.numAssetsToLoadTotal;
}
getPromiseForMainMenu() {
if (this.mainMenuReady) {
return Promise.resolve();
getMainMenuPromise() {
if (this.mainMenuPromise) {
return this.mainMenuPromise;
}
return new Promise(resolve => {
this.signalMainMenuLoaded.add(resolve);
});
logger.warn("⏰ Loading main menu assets");
return (this.mainMenuPromise = this.loadAssets(MAIN_MENU_ASSETS));
}
getPromiseForBareGame() {
if (this.bareGameReady) {
return Promise.resolve();
getIngamePromise() {
if (this.ingamePromise) {
return this.ingamePromise;
}
return new Promise(resolve => {
this.signalBareGameLoaded.add(resolve);
});
}
startLoading() {
this.internalStartLoadingEssentialsForMainMenu();
}
internalStartLoadingEssentialsForMainMenu() {
logger.log("⏰ Start load: main menu");
this.internalLoadSpritesAndSounds(essentialMainMenuSprites, essentialMainMenuSounds)
.catch(err => {
logger.warn("⏰ Failed to load essentials for main menu:", err);
})
.then(() => {
logger.log("⏰ Finish load: main menu");
this.mainMenuReady = true;
this.signalMainMenuLoaded.dispatch();
});
}
internalStartLoadingEssentialsForBareGame() {
logger.log("⏰ Start load: bare game");
this.internalLoadSpritesAndSounds(
essentialBareGameSprites,
essentialBareGameSounds,
essentialBareGameAtlases
)
.then(() => this.internalPreloadCss("async-resources.scss"))
.catch(err => {
logger.warn("⏰ Failed to load essentials for bare game:", err);
})
.then(() => {
logger.log("⏰ Finish load: bare game");
this.bareGameReady = true;
initBuildingCodesAfterResourcesLoaded();
this.signalBareGameLoaded.dispatch();
this.internalStartLoadingAdditionalGameAssets();
});
}
internalStartLoadingAdditionalGameAssets() {
const additionalAtlases = [];
logger.log("⏰ Start load: additional assets (", additionalAtlases.length, "images)");
this.internalLoadSpritesAndSounds(additionalGameSprites, additionalGameSounds, additionalAtlases)
.catch(err => {
logger.warn("⏰ Failed to load additional assets:", err);
})
.then(() => {
logger.log("⏰ Finish load: additional assets");
this.additionalReady = true;
this.signalAdditionalLoaded.dispatch();
});
}
internalPreloadCss(name) {
if (this.cssLoaded.includes(name)) {
return;
}
this.cssLoaded.push(name);
return new Promise((resolve, reject) => {
const link = document.createElement("link");
link.onload = resolve;
link.onerror = reject;
link.setAttribute("rel", "stylesheet");
link.setAttribute("media", "all");
link.setAttribute("type", "text/css");
link.setAttribute("href", cachebust("async-resources.css"));
document.head.appendChild(link);
});
logger.warn("⏰ Loading ingame assets");
const promise = this.loadAssets(INGAME_ASSETS).then(() => initSpriteCache());
return (this.ingamePromise = promise);
}
/**
* @param {Array<string>} sprites
* @param {Array<string>} sounds
* @param {Array<AtlasDefinition>} atlases
* @returns {Promise<void>}
*
* @param {object} param0
* @param {string[]} param0.sprites
* @param {string[]} param0.sounds
* @param {AtlasDefinition[]} param0.atlas
* @param {string[]} param0.css
*/
internalLoadSpritesAndSounds(sprites, sounds, atlases = []) {
this.numAssetsToLoadTotal = sprites.length + sounds.length + atlases.length;
this.numAssetsLoaded = 0;
async loadAssets({ sprites, sounds, atlas, css }) {
/**
* @type {((progressHandler: (progress: number) => void) => Promise<void>)[]}
*/
let promiseFunctions = [];
let promises = [];
for (let i = 0; i < sounds.length; ++i) {
if (this.soundsLoaded.indexOf(sounds[i]) >= 0) {
// Already loaded
continue;
}
this.soundsLoaded.push(sounds[i]);
promises.push(
this.app.sound
.loadSound(sounds[i])
.catch(err => {
logger.warn("Failed to load sound:", sounds[i]);
})
.then(() => {
this.numAssetsLoaded++;
})
// CSS
for (let i = 0; i < css.length; ++i) {
promiseFunctions.push(progress =>
timeoutPromise(
this.internalPreloadCss(cachebust(css[i]), progress),
LOADER_TIMEOUT_PER_RESOURCE
).catch(err => {
logger.error("Failed to load css:", css[i], err);
throw new Error("HUD Stylesheet " + css[i] + " failed to load: " + err);
})
);
}
// ATLAS FILES
for (let i = 0; i < atlas.length; ++i) {
promiseFunctions.push(progress =>
timeoutPromise(Loader.preloadAtlas(atlas[i], progress), LOADER_TIMEOUT_PER_RESOURCE).catch(
err => {
logger.error("Failed to load atlas:", atlas[i].sourceFileName, err);
throw new Error("Atlas " + atlas[i].sourceFileName + " failed to load: " + err);
}
)
);
}
// HUD Sprites
for (let i = 0; i < sprites.length; ++i) {
if (this.spritesLoaded.indexOf(sprites[i]) >= 0) {
// Already loaded
continue;
}
this.spritesLoaded.push(sprites[i]);
promises.push(
Loader.preloadCSSSprite(sprites[i])
.catch(err => {
logger.warn("Failed to load css sprite:", sprites[i]);
})
.then(() => {
this.numAssetsLoaded++;
})
promiseFunctions.push(progress =>
timeoutPromise(
Loader.preloadCSSSprite(sprites[i], progress),
LOADER_TIMEOUT_PER_RESOURCE
).catch(err => {
logger.error("Failed to load css sprite:", sprites[i], err);
throw new Error("HUD Sprite " + sprites[i] + " failed to load: " + err);
})
);
}
for (let i = 0; i < atlases.length; ++i) {
const atlas = atlases[i];
if (this.atlasesLoaded.includes(atlas)) {
// Already loaded
continue;
}
this.atlasesLoaded.push(atlas);
promises.push(
Loader.preloadAtlas(atlas)
.catch(err => {
logger.warn("Failed to load atlas:", atlas.sourceFileName, err);
})
.then(() => {
this.numAssetsLoaded++;
})
// SFX & Music
for (let i = 0; i < sounds.length; ++i) {
promiseFunctions.push(progress =>
timeoutPromise(this.app.sound.loadSound(sounds[i]), LOADER_TIMEOUT_PER_RESOURCE).catch(
err => {
logger.warn("Failed to load sound, will not be available:", sounds[i], err);
}
)
);
}
return Promise.all(promises).then(() => {
this.numAssetsToLoadTotal = 0;
this.numAssetsLoaded = 0;
const originalAmount = promiseFunctions.length;
const start = performance.now();
logger.log("⏰ Preloading", originalAmount, "assets");
let progress = 0;
this.resourceStateChangedSignal.dispatch({ progress });
let promises = [];
for (let i = 0; i < promiseFunctions.length; i++) {
let lastIndividualProgress = 0;
const progressHandler = individualProgress => {
const delta = clamp(individualProgress) - lastIndividualProgress;
lastIndividualProgress = individualProgress;
progress += delta / originalAmount;
this.resourceStateChangedSignal.dispatch({ progress });
};
promises.push(
promiseFunctions
.shift()(progressHandler)
.then(() => {
progressHandler(1);
})
);
}
await Promise.all(promises);
logger.log("⏰ Preloaded assets in", Math.round((performance.now() - start) / 1000.0), "ms");
}
/**
* Shows an error when a resource failed to load and allows to reload the game
*/
showLoaderError(dialogs, err) {
if (G_IS_STANDALONE) {
dialogs
.showWarning(
T.dialogs.resourceLoadFailed.title,
T.dialogs.resourceLoadFailed.descSteamDemo + "<br>" + err,
["retry"]
)
.retry.add(() => window.location.reload());
} else {
dialogs
.showWarning(
T.dialogs.resourceLoadFailed.title,
T.dialogs.resourceLoadFailed.descWeb.replace(
"<demoOnSteamLinkText>",
`<a href="https://get.shapez.io/resource_timeout" target="_blank">${T.dialogs.resourceLoadFailed.demoLinkText}</a>`
) +
"<br>" +
err,
["retry"]
)
.retry.add(() => window.location.reload());
}
}
preloadWithProgress(src, progressHandler) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
let notifiedNotComputable = false;
xhr.open("GET", src, 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/)) {
reject(src + ": " + xhr.status + " " + xhr.statusText);
} else {
if (!notifiedNotComputable) {
progressHandler(1);
}
const options = {};
const headers = xhr.getAllResponseHeaders();
const contentType = headers.match(/^Content-Type\:\s*(.*?)$/im);
if (contentType && contentType[1]) {
options.type = contentType[1].split(";")[0];
}
const blob = new Blob([this.response], options);
resolve(window.URL.createObjectURL(blob));
}
};
xhr.send();
});
}
internalPreloadCss(src, progressHandler) {
return this.preloadWithProgress(cachebust(src), progressHandler).then(blobSrc => {
var styleElement = document.createElement("link");
styleElement.href = blobSrc;
styleElement.rel = "stylesheet";
styleElement.setAttribute("media", "all");
styleElement.type = "text/css";
document.head.appendChild(styleElement);
});
}
}

114
src/js/core/error_handler.js
View File

@@ -1,7 +1,3 @@
import { logSection } from "./logging";
import { stringifyObjectContainingErrors } from "./logging";
import { removeAllChildren } from "./utils";
export let APPLICATION_ERROR_OCCURED = false;
/**
@@ -13,114 +9,8 @@ export let APPLICATION_ERROR_OCCURED = false;
* @param {Error} source
*/
function catchErrors(message, source, lineno, colno, error) {
let fullPayload = JSON.parse(
stringifyObjectContainingErrors({
message,
source,
lineno,
colno,
error,
})
);
if (("" + message).indexOf("Script error.") >= 0) {
console.warn("Thirdparty script error:", message);
return;
}
if (("" + message).indexOf("NS_ERROR_FAILURE") >= 0) {
console.warn("Firefox NS_ERROR_FAILURE error:", message);
return;
}
if (("" + message).indexOf("Cannot read property 'postMessage' of null") >= 0) {
console.warn("Safari can not read post message error:", message);
return;
}
if (!G_IS_DEV && G_IS_BROWSER && ("" + source).indexOf("shapez.io") < 0) {
console.warn("Thirdparty error:", message);
return;
}
console.log("\n\n\n⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️\n\n\n");
console.log(" APPLICATION CRASHED ");
console.log("\n\n⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️\n\n\n");
logSection("APPLICATION CRASH", "#e53935");
console.error("Error:", message, "->", error);
console.log("Payload:", fullPayload);
if (window.Sentry && !window.anyModLoaded) {
window.Sentry.withScope(scope => {
window.Sentry.setTag("message", message);
window.Sentry.setTag("source", source);
window.Sentry.setExtra("message", message);
window.Sentry.setExtra("source", source);
window.Sentry.setExtra("lineno", lineno);
window.Sentry.setExtra("colno", colno);
window.Sentry.setExtra("error", error);
window.Sentry.setExtra("fullPayload", fullPayload);
try {
const userName = window.localStorage.getItem("tracking_context") || null;
window.Sentry.setTag("username", userName);
} catch (ex) {
// ignore
}
window.Sentry.captureException(error || source);
});
}
if (APPLICATION_ERROR_OCCURED) {
console.warn("ERROR: Only showing and submitting first error");
return;
}
APPLICATION_ERROR_OCCURED = true;
const element = document.createElement("div");
element.id = "applicationError";
const title = document.createElement("h1");
title.innerText = "Whoops!";
element.appendChild(title);
const desc = document.createElement("div");
desc.classList.add("desc");
desc.innerHTML = `
It seems the application crashed - I am sorry for that!<br /><br />
An anonymized crash report has been sent, and I will have a look as soon as possible.<br /><br />
If you have additional information how I can reproduce this error, please E-Mail me:&nbsp;
<a href="mailto:bugs@shapez.io?title=Application+Crash">bugs@shapez.io</a>`;
element.appendChild(desc);
const details = document.createElement("pre");
details.classList.add("details");
details.innerText = (error && error.stack) || message;
element.appendChild(details);
const inject = function () {
if (!G_IS_DEV) {
removeAllChildren(document.body);
}
if (document.body.parentElement) {
document.body.parentElement.appendChild(element);
} else {
document.body.appendChild(element);
}
};
if (document.body) {
inject();
} else {
setTimeout(() => {
inject();
}, 200);
}
return true;
console.error(message, source, lineno, colno, error);
}
window.onerror = catchErrors;
window.addEventListener("error", catchErrors);

66
src/js/core/loader.js
View File

@@ -76,61 +76,36 @@ class LoaderImpl {
/**
*
* @param {string} key
* @param {(progress: number) => void} progressHandler
* @returns {Promise<HTMLImageElement|null>}
*/
internalPreloadImage(key) {
internalPreloadImage(key, progressHandler) {
const url = cachebust("res/" + key);
const image = new Image();
let triesSoFar = 0;
return Promise.race([
new Promise((resolve, reject) => {
setTimeout(() => reject("loader request timeout"), G_IS_DEV ? 500 : 30000);
}),
new Promise(resolve => {
image.onload = () => {
image.onerror = null;
image.onload = null;
if (typeof image.decode === "function") {
// SAFARI: Image.decode() fails on safari with svgs -> we dont want to fail
// on that
// FIREFOX: Decode never returns if the image is in cache, so call it in background
image.decode().then(
() => null,
() => null
);
}
resolve(image);
};
image.onerror = reason => {
logger.warn("Failed to load '" + url + "':", reason);
if (++triesSoFar < 4) {
logger.log("Retrying to load image from", url);
image.src = url + "?try=" + triesSoFar;
} else {
logger.warn("Failed to load", url, "after", triesSoFar, "tries with reason", reason);
image.onerror = null;
image.onload = null;
resolve(null);
}
};
image.src = url;
}),
]);
return this.app.backgroundResourceLoader
.preloadWithProgress(url, progress => {
progressHandler(progress);
})
.then(url => {
return new Promise((resolve, reject) => {
image.addEventListener("load", () => resolve(image));
image.addEventListener("error", err =>
reject("Failed to load sprite " + key + ": " + err)
);
image.src = url;
});
});
}
/**
* Preloads a sprite
* @param {string} key
* @param {(progress: number) => void} progressHandler
* @returns {Promise<void>}
*/
preloadCSSSprite(key) {
return this.internalPreloadImage(key).then(image => {
preloadCSSSprite(key, progressHandler) {
return this.internalPreloadImage(key, progressHandler).then(image => {
if (key.indexOf("game_misc") >= 0) {
// Allow access to regular sprites
this.sprites.set(key, new RegularSprite(image, image.width, image.height));
@@ -142,10 +117,11 @@ class LoaderImpl {
/**
* Preloads an atlas
* @param {AtlasDefinition} atlas
* @param {(progress: number) => void} progressHandler
* @returns {Promise<void>}
*/
preloadAtlas(atlas) {
return this.internalPreloadImage(atlas.getFullSourcePath()).then(image => {
preloadAtlas(atlas, progressHandler) {
return this.internalPreloadImage(atlas.getFullSourcePath(), progressHandler).then(image => {
// @ts-ignore
image.label = atlas.sourceFileName;
return this.internalParseAtlas(atlas, image);

39
src/js/core/utils.js
View File

@@ -747,3 +747,42 @@ export function getRomanNumber(number) {
romanLiteralsCache[number] = formatted;
return formatted;
}
/**
* Returns the appropriate logo sprite path
*/
export function getLogoSprite() {
if (G_WEGAME_VERSION) {
return "logo_wegame.png";
}
if (G_IS_STEAM_DEMO) {
return "logo_demo.png";
}
if (G_CHINA_VERSION) {
return "logo_cn.png";
}
if (G_IS_STANDALONE) {
return "logo.png";
}
if (G_IS_BROWSER) {
return "logo_demo.png";
}
return "logo.png";
}
/**
* Rejects a promise after X ms
*/
export function timeoutPromise(promise, timeout = 30000) {
return Promise.race([
new Promise((resolve, reject) => {
setTimeout(() => reject("timeout of " + timeout + " ms exceeded"), timeout);
}),
promise,
]);
}

9
src/js/game/game_loading_overlay.js
View File

@@ -46,6 +46,7 @@ export class GameLoadingOverlay {
this.parent.appendChild(this.element);
this.internalAddSpinnerAndText(this.element);
this.internalAddHint(this.element);
this.internalAddProgressIndicator(this.element);
}
/**
@@ -68,4 +69,12 @@ export class GameLoadingOverlay {
hint.classList.add("prefab_GameHint");
element.appendChild(hint);
}
internalAddProgressIndicator(element) {
const indicator = document.createElement("span");
indicator.innerHTML = "";
indicator.classList.add("prefab_LoadingProgressIndicator");
element.appendChild(indicator);
this.loadingIndicator = indicator;
}
}

2
src/js/game/meta_building_registry.js
View File

@@ -113,7 +113,7 @@ export function initMetaBuildingRegistry() {
/**
* Once all sprites are loaded, propagates the cache
*/
export function initBuildingCodesAfterResourcesLoaded() {
export function initSpriteCache() {
logger.log("Propagating sprite cache");
for (const key in gBuildingVariants) {
const variant = gBuildingVariants[key];

2
src/js/main.js
View File

@@ -64,4 +64,4 @@ function bootApp() {
app.boot();
}
window.addEventListener("load", bootApp);
bootApp();

111
src/js/platform/browser/sound.js
View File

@@ -21,33 +21,28 @@ class SoundSpritesContainer {
if (this.loadingPromise) {
return this.loadingPromise;
}
return (this.loadingPromise = Promise.race([
new Promise((resolve, reject) => {
setTimeout(reject, G_IS_DEV ? 500 : 5000);
}),
new Promise(resolve => {
this.howl = new Howl({
src: cachebust("res/sounds/sfx.mp3"),
sprite: sprites.sprite,
autoplay: false,
loop: false,
volume: 0,
preload: true,
pool: 20,
onload: () => {
resolve();
},
onloaderror: (id, err) => {
logger.warn("SFX failed to load:", id, err);
this.howl = null;
resolve();
},
onplayerror: (id, err) => {
logger.warn("SFX failed to play:", id, err);
},
});
}),
]));
return (this.loadingPromise = new Promise(resolve => {
this.howl = new Howl({
src: cachebust("res/sounds/sfx.mp3"),
sprite: sprites.sprite,
autoplay: false,
loop: false,
volume: 0,
preload: true,
pool: 20,
onload: () => {
resolve();
},
onloaderror: (id, err) => {
logger.warn("SFX failed to load:", id, err);
this.howl = null;
resolve();
},
onplayerror: (id, err) => {
logger.warn("SFX failed to play:", id, err);
},
});
}));
}
play(volume, key) {
@@ -98,41 +93,37 @@ class MusicInstance extends MusicInstanceInterface {
this.playing = false;
}
load() {
return Promise.race([
new Promise((resolve, reject) => {
setTimeout(reject, G_IS_DEV ? 500 : 5000);
}),
new Promise((resolve, reject) => {
this.howl = new Howl({
src: cachebust("res/sounds/music/" + this.url + ".mp3"),
autoplay: false,
loop: true,
html5: true,
volume: 1,
preload: true,
pool: 2,
return new Promise((resolve, reject) => {
this.howl = new Howl({
src: cachebust("res/sounds/music/" + this.url + ".mp3"),
autoplay: false,
loop: true,
html5: true,
volume: 1,
preload: true,
pool: 2,
onunlock: () => {
if (this.playing) {
logger.log("Playing music after manual unlock");
this.play();
}
},
onunlock: () => {
if (this.playing) {
logger.log("Playing music after manual unlock");
this.play();
}
},
onload: () => {
resolve();
},
onloaderror: (id, err) => {
logger.warn(this, "Music", this.url, "failed to load:", id, err);
this.howl = null;
resolve();
},
onplayerror: (id, err) => {
logger.warn(this, "Music", this.url, "failed to play:", id, err);
},
});
}),
]);
onload: () => {
resolve();
},
onloaderror: (id, err) => {
logger.warn(this, "Music", this.url, "failed to load:", id, err);
this.howl = null;
resolve();
},
onplayerror: (id, err) => {
logger.warn(this, "Music", this.url, "failed to play:", id, err);
},
});
});
}
stop() {

2
src/js/states/about.js
View File

@@ -2,7 +2,7 @@ import { TextualGameState } from "../core/textual_game_state";
import { T } from "../translations";
import { THIRDPARTY_URLS } from "../core/config";
import { cachebust } from "../core/cachebust";
import { getLogoSprite } from "../core/background_resources_loader";
import { getLogoSprite } from "../core/utils";
export class AboutState extends TextualGameState {
constructor() {

49
src/js/states/ingame.js
View File

@@ -10,6 +10,8 @@ import { GameCore } from "../game/core";
import { MUSIC } from "../platform/sound";
import { enumGameModeIds } from "../game/game_mode";
import { MOD_SIGNALS } from "../mods/mod_signals";
import { HUDModalDialogs } from "../game/hud/parts/modal_dialogs";
import { T } from "../translations";
const logger = createLogger("state/ingame");
@@ -231,19 +233,42 @@ export class InGameState extends GameState {
if (this.switchStage(GAME_LOADING_STATES.s3_createCore)) {
logger.log("Waiting for resources to load");
this.app.backgroundResourceLoader.getPromiseForBareGame().then(() => {
logger.log("Creating new game core");
this.core = new GameCore(this.app);
this.core.initializeRoot(this, this.savegame, this.gameModeId);
if (this.savegame.hasGameDump()) {
this.stage4bResumeGame();
} else {
this.app.gameAnalytics.handleGameStarted();
this.stage4aInitEmptyGame();
}
this.app.backgroundResourceLoader.resourceStateChangedSignal.add(({ progress }) => {
this.loadingOverlay.loadingIndicator.innerText = T.global.loadingResources.replace(
"<percentage>",
(progress * 100.0).toFixed(1)
);
});
this.app.backgroundResourceLoader.getIngamePromise().then(
() => {
this.loadingOverlay.loadingIndicator.innerText = "";
this.app.backgroundResourceLoader.resourceStateChangedSignal.removeAll();
logger.log("Creating new game core");
this.core = new GameCore(this.app);
this.core.initializeRoot(this, this.savegame, this.gameModeId);
if (this.savegame.hasGameDump()) {
this.stage4bResumeGame();
} else {
this.app.gameAnalytics.handleGameStarted();
this.stage4aInitEmptyGame();
}
},
err => {
logger.error("Failed to preload resources:", err);
const dialogs = new HUDModalDialogs(null, this.app);
const dialogsElement = document.createElement("div");
dialogsElement.id = "ingame_HUD_ModalDialogs";
dialogsElement.style.zIndex = "999999";
document.body.appendChild(dialogsElement);
dialogs.initializeToElement(dialogsElement);
this.app.backgroundResourceLoader.showLoaderError(dialogs, err);
}
);
}
}

6
src/js/states/main_menu.js
View File

@@ -1,4 +1,3 @@
import { getLogoSprite } from "../core/background_resources_loader";
import { cachebust } from "../core/cachebust";
import { globalConfig, openStandaloneLink, THIRDPARTY_URLS } from "../core/config";
import { GameState } from "../core/game_state";
@@ -8,7 +7,7 @@ import { ReadWriteProxy } from "../core/read_write_proxy";
import {
formatSecondsToTimeAgo,
generateFileDownload,
isSupportedBrowser,
getLogoSprite,
makeButton,
makeDiv,
makeDivElement,
@@ -321,8 +320,9 @@ export class MainMenuState extends GameState {
}
onEnter(payload) {
// Start loading already
const app = this.app;
setTimeout(() => app.backgroundResourceLoader.internalStartLoadingEssentialsForBareGame(), 10);
setTimeout(() => app.backgroundResourceLoader.getIngamePromise(), 10);
this.dialogs = new HUDModalDialogs(null, this.app);
const dialogsElement = document.body.querySelector(".modalDialogParent");

5
src/js/states/mobile_warning.js
View File

@@ -1,7 +1,6 @@
import { GameState } from "../core/game_state";
import { cachebust } from "../core/cachebust";
import { THIRDPARTY_URLS } from "../core/config";
import { getLogoSprite } from "../core/background_resources_loader";
import { GameState } from "../core/game_state";
import { getLogoSprite } from "../core/utils";
export class MobileWarningState extends GameState {
constructor() {

52
src/js/states/preload.js
View File

@@ -1,9 +1,9 @@
import { CHANGELOG } from "../changelog";
import { getLogoSprite } from "../core/background_resources_loader";
import { cachebust } from "../core/cachebust";
import { globalConfig } from "../core/config";
import { GameState } from "../core/game_state";
import { createLogger } from "../core/logging";
import { getLogoSprite } from "../core/utils";
import { getRandomHint } from "../game/hints";
import { HUDModalDialogs } from "../game/hud/parts/modal_dialogs";
import { PlatformWrapperImplBrowser } from "../platform/browser/wrapper";
@@ -39,6 +39,7 @@ export class PreloadState extends GameState {
this.nextHintDuration = 0;
this.statusText = this.htmlElement.querySelector("#ll_preload_status");
this.progressElement = this.htmlElement.querySelector("#ll_progressbar span");
this.startLoading();
}
@@ -70,10 +71,10 @@ export class PreloadState extends GameState {
startLoading() {
this.setStatus("Booting")
.then(() => this.setStatus("Creating platform wrapper"))
.then(() => this.setStatus("Creating platform wrapper", 3))
.then(() => this.app.platformWrapper.initialize())
.then(() => this.setStatus("Initializing local storage"))
.then(() => this.setStatus("Initializing local storage", 6))
.then(() => {
const wrapper = this.app.platformWrapper;
if (wrapper instanceof PlatformWrapperImplBrowser) {
@@ -94,19 +95,19 @@ export class PreloadState extends GameState {
}
})
.then(() => this.setStatus("Creating storage"))
.then(() => this.setStatus("Creating storage", 9))
.then(() => {
return this.app.storage.initialize();
})
.then(() => this.setStatus("Initializing libraries"))
.then(() => this.setStatus("Initializing libraries", 12))
.then(() => this.app.analytics.initialize())
.then(() => this.app.gameAnalytics.initialize())
.then(() => this.setStatus("Connecting to api"))
.then(() => this.setStatus("Connecting to api", 15))
.then(() => this.fetchDiscounts())
.then(() => this.setStatus("Initializing settings"))
.then(() => this.setStatus("Initializing settings", 20))
.then(() => {
return this.app.settings.initialize();
})
@@ -118,7 +119,7 @@ export class PreloadState extends GameState {
}
})
.then(() => this.setStatus("Initializing language"))
.then(() => this.setStatus("Initializing language", 25))
.then(() => {
if (G_CHINA_VERSION || G_WEGAME_VERSION) {
return this.app.settings.updateLanguage("zh-CN");
@@ -139,22 +140,17 @@ export class PreloadState extends GameState {
updateApplicationLanguage(language);
})
.then(() => this.setStatus("Initializing sounds"))
.then(() => this.setStatus("Initializing sounds", 30))
.then(() => {
// Notice: We don't await the sounds loading itself
return this.app.sound.initialize();
})
.then(() => {
this.app.backgroundResourceLoader.startLoading();
})
.then(() => this.setStatus("Initializing restrictions"))
.then(() => this.setStatus("Initializing restrictions", 34))
.then(() => {
return this.app.restrictionMgr.initialize();
})
.then(() => this.setStatus("Initializing savegame"))
.then(() => this.setStatus("Initializing savegames", 38))
.then(() => {
return this.app.savegameMgr.initialize().catch(err => {
logger.error("Failed to initialize savegames:", err);
@@ -165,12 +161,25 @@ export class PreloadState extends GameState {
});
})
.then(() => this.setStatus("Downloading resources"))
.then(() => this.setStatus("Downloading resources", 40))
.then(() => {
return this.app.backgroundResourceLoader.getPromiseForMainMenu();
this.app.backgroundResourceLoader.resourceStateChangedSignal.add(({ progress }) => {
this.setStatus(
"Downloading resources (" + (progress * 100.0).toFixed(1) + " %)",
40 + progress * 50
);
});
return this.app.backgroundResourceLoader.getMainMenuPromise().catch(err => {
logger.error("Failed to load resources:", err);
this.app.backgroundResourceLoader.showLoaderError(this.dialogs, err);
return new Promise(() => null);
});
})
.then(() => {
this.app.backgroundResourceLoader.resourceStateChangedSignal.removeAll();
})
.then(() => this.setStatus("Checking changelog"))
.then(() => this.setStatus("Checking changelog", 95))
.then(() => {
if (G_IS_DEV && globalConfig.debug.disableUpgradeNotification) {
return;
@@ -231,7 +240,7 @@ export class PreloadState extends GameState {
});
})
.then(() => this.setStatus("Launching"))
.then(() => this.setStatus("Launching", 99))
.then(
() => {
this.moveToState("MainMenuState");
@@ -274,7 +283,7 @@ export class PreloadState extends GameState {
*
* @param {string} text
*/
setStatus(text) {
setStatus(text, progress) {
logger.log("✅ " + text);
if (G_CHINA_VERSION || G_WEGAME_VERSION) {
@@ -282,6 +291,7 @@ export class PreloadState extends GameState {
}
this.currentStatus = text;
this.statusText.innerText = text;
this.progressElement.style.width = 80 + (progress / 100) * 20 + "%";
return Promise.resolve();
}