Improve preload screen

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"));

gulp/html.js

@@ -165,6 +165,7 @@ function gulptasksHTML($, gulp, buildFolder) {
                         } Game Files</div >
                         <div id="ll_progressbar">
                             <span></span>
+                            <div id="ll_preload_status">Downloading Bundle</div>
                         </div>
                         <div id="ll_standalone">
                             Page does not load? Try the <a href="https://get.shapez.io/slowpageload" target="_blank">Steam Version</a>!

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

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

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