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
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();
}