Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2024-10-27 20:34:29 +00:00
Code Issues Projects Releases Wiki Activity

Improve preload screen

Browse Source
This commit is contained in:
tobspr 2022-06-17 13:04:19 +02:00
parent 11d2c701a2
commit 51fcc1e470
5 changed files with 34 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
gulp/gulpfile.js
View File

@ -165,6 +165,7 @@ function serveHTML({ version = "web-dev" }) {
// Watch .html files, those trigger a html rebuild // Watch .html files, those trigger a html rebuild
gulp.watch("../src/**/*.html", gulp.series("html." + version + ".dev")); gulp.watch("../src/**/*.html", gulp.series("html." + version + ".dev"));
gulp.watch("./preloader.css", gulp.series("html." + version + ".dev"));
// Watch translations // Watch translations
gulp.watch("../translations/**/*.yaml", gulp.series("translations.convertToJson")); gulp.watch("../translations/**/*.yaml", gulp.series("translations.convertToJson"));

1
gulp/html.js
View File

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

41
gulp/preloader.css
View File

@ -96,11 +96,12 @@ body {
#ll_progressbar { #ll_progressbar {
width: 80vw; width: 80vw;
max-width: 800px;
margin-top: 40px; margin-top: 40px;
height: 30px; height: 14px;
overflow: hidden; border-radius: 20px;
border-radius: 4px; background: rgba(0, 10, 40, 0.1);
background: rgba(0, 0, 0, 0.03); border: 5px solid transparent;
display: flex; display: flex;
position: relative; position: relative;
align-items: flex-start; align-items: flex-start;
@ -109,23 +110,23 @@ body {
@keyframes LL_LoadingAnimation { @keyframes LL_LoadingAnimation {
0% { 0% {
width: 0%; width: 0%;
background-color: #67aeed; background-color: #777a7f;
} }
19.99% { 19.99% {
width: 99.5%; width: 99.5%;
background-color: #67aeed; background-color: rgb(50, 197, 121);
} }
20% { 20% {
width: 0%; width: 0%;
background-color: #a1c074; background-color: #777a7f;
} }
49.99% { 49.99% {
width: 98%; width: 98%;
background-color: #a1c074; background-color: #4fbfce;
} }
50% { 50% {
width: 0%; width: 0%;
background-color: #74a8c0; background-color: #777a7f;
} }
74.99% { 74.99% {
width: 98%; width: 98%;
@ -133,21 +134,22 @@ body {
} }
75% { 75% {
width: 0%; width: 0%;
background-color: #8f74c0; background-color: #777a7f;
} }
100% { 100% {
width: 98%; width: 98%;
background-color: #8f74c0; background-color: #a186d4;
} }
} }
#ll_progressbar > span { #ll_progressbar > span {
border-radius: 20px;
position: absolute;
height: 100%; height: 100%;
border-radius: 7px;
width: 98%; width: 98%;
background: #fff; background: #fff;
display: inline-flex; display: inline-flex;
animation: LL_LoadingAnimation 60s ease-in-out infinite; animation: LL_LoadingAnimation 90s ease-in-out infinite;
position: relative; position: relative;
z-index: 10; z-index: 10;
} }
@ -207,3 +209,16 @@ body {
background: center center / contain no-repeat; background: center center / contain no-repeat;
display: none; 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;
}

2
src/js/platform/browser/game_analytics.js
View File

@ -15,7 +15,7 @@ import OR from "@openreplay/tracker";
import OR_fetch from "@openreplay/tracker-fetch"; import OR_fetch from "@openreplay/tracker-fetch";
let connector; 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 = new OR({ projectKey: "mhZgUFQBI6QAtt3PRLer" });
connector.start(); connector.start();
connector.use(OR_fetch({ overrideGlobal: true })); connector.use(OR_fetch({ overrideGlobal: true }));

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

@ -49,6 +49,8 @@ export class PreloadState extends GameState {
this.lastHintShown = -1000; this.lastHintShown = -1000;
this.nextHintDuration = 0; this.nextHintDuration = 0;
this.statusText = this.htmlElement.querySelector("#ll_preload_status");
this.startLoading(); this.startLoading();
} }
@ -282,7 +284,7 @@ export class PreloadState extends GameState {
return Promise.resolve(); return Promise.resolve();
} }
this.currentStatus = text; this.currentStatus = text;
// this.statusText.innerText = text; this.statusText.innerText = text;
return Promise.resolve(); return Promise.resolve();
} }