diff --git a/gulp/gulpfile.js b/gulp/gulpfile.js index 5051219b..8db31a48 100644 --- a/gulp/gulpfile.js +++ b/gulp/gulpfile.js @@ -165,6 +165,7 @@ function serveHTML({ version = "web-dev" }) { // Watch .html files, those trigger a html rebuild gulp.watch("../src/**/*.html", gulp.series("html." + version + ".dev")); + gulp.watch("./preloader.css", gulp.series("html." + version + ".dev")); // Watch translations gulp.watch("../translations/**/*.yaml", gulp.series("translations.convertToJson")); diff --git a/gulp/html.js b/gulp/html.js index 833c5dec..f05f3680 100644 --- a/gulp/html.js +++ b/gulp/html.js @@ -165,6 +165,7 @@ function gulptasksHTML($, gulp, buildFolder) { } Game Files
+
Downloading Bundle
Page does not load? Try the Steam Version! diff --git a/gulp/preloader.css b/gulp/preloader.css index 24b3bc65..cc691a7b 100644 --- a/gulp/preloader.css +++ b/gulp/preloader.css @@ -96,11 +96,12 @@ body { #ll_progressbar { width: 80vw; + max-width: 800px; margin-top: 40px; - height: 30px; - overflow: hidden; - border-radius: 4px; - background: rgba(0, 0, 0, 0.03); + height: 14px; + border-radius: 20px; + background: rgba(0, 10, 40, 0.1); + border: 5px solid transparent; display: flex; position: relative; align-items: flex-start; @@ -109,23 +110,23 @@ body { @keyframes LL_LoadingAnimation { 0% { width: 0%; - background-color: #67aeed; + background-color: #777a7f; } 19.99% { width: 99.5%; - background-color: #67aeed; + background-color: rgb(50, 197, 121); } 20% { width: 0%; - background-color: #a1c074; + background-color: #777a7f; } 49.99% { width: 98%; - background-color: #a1c074; + background-color: #4fbfce; } 50% { width: 0%; - background-color: #74a8c0; + background-color: #777a7f; } 74.99% { width: 98%; @@ -133,21 +134,22 @@ body { } 75% { width: 0%; - background-color: #8f74c0; + background-color: #777a7f; } 100% { width: 98%; - background-color: #8f74c0; + background-color: #a186d4; } } #ll_progressbar > span { + border-radius: 20px; + position: absolute; height: 100%; - border-radius: 7px; width: 98%; background: #fff; display: inline-flex; - animation: LL_LoadingAnimation 60s ease-in-out infinite; + animation: LL_LoadingAnimation 90s ease-in-out infinite; position: relative; z-index: 10; } @@ -207,3 +209,16 @@ body { background: center center / contain no-repeat; display: none; } + +#ll_preload_status { + position: absolute; + top: 30px; + left: 50%; + transform: translate(-50%, -50%); + z-index: 100; + color: rgba(#000, 0.4); + opacity: 1 !important; + font-size: 12px; + text-transform: uppercase; + text-align: center; +} diff --git a/src/js/platform/browser/game_analytics.js b/src/js/platform/browser/game_analytics.js index cf9749f9..51eb6ad0 100644 --- a/src/js/platform/browser/game_analytics.js +++ b/src/js/platform/browser/game_analytics.js @@ -15,7 +15,7 @@ import OR from "@openreplay/tracker"; import OR_fetch from "@openreplay/tracker-fetch"; let connector; -if (G_IS_STEAM_DEMO || !G_IS_STANDALONE) { +if ((G_IS_STEAM_DEMO || !G_IS_STANDALONE) && !G_IS_DEV) { connector = new OR({ projectKey: "mhZgUFQBI6QAtt3PRLer" }); connector.start(); connector.use(OR_fetch({ overrideGlobal: true })); diff --git a/src/js/states/preload.js b/src/js/states/preload.js index def7393f..2537f49b 100644 --- a/src/js/states/preload.js +++ b/src/js/states/preload.js @@ -49,6 +49,8 @@ export class PreloadState extends GameState { this.lastHintShown = -1000; this.nextHintDuration = 0; + this.statusText = this.htmlElement.querySelector("#ll_preload_status"); + this.startLoading(); } @@ -282,7 +284,7 @@ export class PreloadState extends GameState { return Promise.resolve(); } this.currentStatus = text; - // this.statusText.innerText = text; + this.statusText.innerText = text; return Promise.resolve(); }