Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/css/resources.scss
#	src/js/game/hud/parts/buildings_toolbar.js
#	src/js/game/meta_building_registry.js
#	src/js/game/systems/item_processor.js
#	translations/base-en.yaml

README.md

@@ -64,7 +64,7 @@ This project is based on ES5. Some ES2015 features are used but most of them are
 5. Add a constructor. **The constructor must be called with optional parameters only!** `new MyFancyComponent({})` should always work.
 6. Add any props you need in the constructor.
 7. Add the component in `src/js/game/component_registry.js`
-8. Add the componetn in `src/js/game/entity_components.js`
+8. Add the component in `src/js/game/entity_components.js`
 9. Done! You can use your component now
 
 #### Adding a new building
@@ -81,7 +81,7 @@ This project is based on ES5. Some ES2015 features are used but most of them are
 8. In `translations/base-en.yaml` add it to two sections: `buildings.[my_building].XXX` (See other buildings) and also `keybindings.mappings.[my_building]`. Be sure to do it the same way as other buildings do!
 9. Create a icon (128x128, [prefab](https://github.com/tobspr/shapez.io-artwork/blob/master/ui/toolbar-icons.psd)) for your building and save it in `res/ui/buildings_icons` with the id of your building
 10. Create a tutorial image (600x600) for your building and save it in `res/ui/building_tutorials`
-11. In `src/css/icons.scss` add your building to `$buildings` as well as `$buildingAndVariants`
+11. In `src/css/resources.scss` add your building to `$buildings` as well as `$buildingAndVariants`
 12. Done! Optional: Add a new reward for unlocking your building at some point.
 
 #### Adding a new game system
@@ -96,6 +96,6 @@ This project is based on ES5. Some ES2015 features are used but most of them are
 
 For most assets I use Adobe Photoshop, you can find them in `assets/`.
 
-You will need a <a href="https://www.codeandweb.com/texturepacker" target="_blank">Texture Packer</a> license in order to regenerate the atlas. If you don't have one but want to contribute assets, let me know and I might compile it for you. I'm currently switching to an open source solution but I can't give an estimate when thats done.
+You will need a <a href="https://www.codeandweb.com/texturepacker" target="_blank">Texture Packer</a> license in order to regenerate the atlas. If you don't have one but want to contribute assets, let me know and I might compile it for you. I'm currently switching to an open source solution but I can't give an estimate when that's done.
 
 <img src="https://i.imgur.com/W25Fkl0.png" alt="shapez.io Screenshot">

gulp/css.js

@@ -58,40 +58,78 @@ function gulptasksCSS($, gulp, buildFolder, browserSync) {
             .pipe($.sassLint.failOnError());
     });
 
-    // Builds the css in dev mode
-    gulp.task("css.dev", () => {
+    function resourcesTask({ cachebust, isProd }) {
         return gulp
-            .src(["../src/css/main.scss"])
+            .src("../src/css/main.scss", { cwd: __dirname })
             .pipe($.plumber())
             .pipe($.sass.sync().on("error", $.sass.logError))
-            .pipe($.postcss(postcssPlugins(false, {})))
+            .pipe(
+                $.postcss([
+                    $.postcssCriticalSplit({
+                        blockTag: "@load-async",
+                    }),
+                ])
+            )
+            .pipe($.rename("async-resources.css"))
+            .pipe($.postcss(postcssPlugins(isProd, { cachebust })))
             .pipe(gulp.dest(buildFolder))
             .pipe(browserSync.stream());
+    }
+
+    // Builds the css resources
+    gulp.task("css.resources.dev", () => {
+        return resourcesTask({ cachebust: false, isProd: false });
     });
 
-    // Builds the css in production mode (=minified)
-    gulp.task("css.prod", () => {
-        return (
-            gulp
-                .src("../src/css/main.scss", { cwd: __dirname })
-                .pipe($.plumber())
-                .pipe($.sass.sync({ outputStyle: "compressed" }).on("error", $.sass.logError))
-                .pipe($.postcss(postcssPlugins(true, { cachebust: true })))
-                .pipe(gulp.dest(buildFolder))
-        );
+    // Builds the css resources in prod (=minified)
+    gulp.task("css.resources.prod", () => {
+        return resourcesTask({ cachebust: true, isProd: true });
     });
 
-    // Builds the css in production mode (=minified), without cachebusting
-    gulp.task("css.prod-standalone", () => {
-        return (
-            gulp
+    // Builds the css resources in prod (=minified), without cachebusting
+    gulp.task("css.resources.prod-standalone", () => {
+        return resourcesTask({ cachebust: false, isProd: true });
+    });
+
+    function mainTask({ cachebust, isProd }) {
+        return gulp
             .src("../src/css/main.scss", { cwd: __dirname })
             .pipe($.plumber())
-                .pipe($.sass.sync({ outputStyle: "compressed" }).on("error", $.sass.logError))
-                .pipe($.postcss(postcssPlugins(true, { cachebust: false })))
+            .pipe($.sass.sync().on("error", $.sass.logError))
+            .pipe(
+                $.postcss([
+                    $.postcssCriticalSplit({
+                        blockTag: "@load-async",
+                        output: "rest",
+                    }),
+                ])
+            )
+            .pipe($.postcss(postcssPlugins(isProd, { cachebust })))
             .pipe(gulp.dest(buildFolder))
-        );
+            .pipe(browserSync.stream());
+    }
+
+    // Builds the css main
+    gulp.task("css.main.dev", () => {
+        return mainTask({ cachebust: false, isProd: false });
     });
+
+    // Builds the css main in prod (=minified)
+    gulp.task("css.main.prod", () => {
+        return mainTask({ cachebust: true, isProd: true });
+    });
+
+    // Builds the css main in prod (=minified), without cachebusting
+    gulp.task("css.main.prod-standalone", () => {
+        return mainTask({ cachebust: false, isProd: true });
+    });
+
+    gulp.task("css.dev", gulp.parallel("css.main.dev", "css.resources.dev"));
+    gulp.task("css.prod", gulp.parallel("css.main.prod", "css.resources.prod"));
+    gulp.task(
+        "css.prod-standalone",
+        gulp.parallel("css.main.prod-standalone", "css.resources.prod-standalone")
+    );
 }
 
 module.exports = {

gulp/html.js

@@ -27,7 +27,8 @@ function gulptasksHTML($, gulp, buildFolder) {
         return gulp
             .src("../src/html/" + (standalone ? "index.standalone.html" : "index.html"))
             .pipe(
-                $.dom(/** @this {Document} **/ function () {
+                $.dom(
+                    /** @this {Document} **/ function () {
                         const document = this;
 
                         // Preconnect to api
@@ -52,6 +53,21 @@ function gulptasksHTML($, gulp, buildFolder) {
                         }
                         document.head.appendChild(css);
 
+                        // Append async css
+                        const asyncCss = document.createElement("link");
+                        asyncCss.rel = "stylesheet";
+                        asyncCss.type = "text/css";
+                        asyncCss.media = "none";
+                        asyncCss.setAttribute("onload", "this.media='all'");
+                        asyncCss.href = cachebust("async-resources.css");
+                        if (integrity) {
+                            asyncCss.setAttribute(
+                                "integrity",
+                                computeIntegrityHash(path.join(buildFolder, "async-resources.css"))
+                            );
+                        }
+                        document.head.appendChild(asyncCss);
+
                         if (app) {
                             // Append cordova link
                             const cdv = document.createElement("script");
@@ -63,7 +79,8 @@ function gulptasksHTML($, gulp, buildFolder) {
                         // Google analytics
                         if (analytics) {
                             const tagManagerScript = document.createElement("script");
-                        tagManagerScript.src = "https://www.googletagmanager.com/gtag/js?id=UA-165342524-1";
+                            tagManagerScript.src =
+                                "https://www.googletagmanager.com/gtag/js?id=UA-165342524-1";
                             tagManagerScript.setAttribute("async", "");
                             document.head.appendChild(tagManagerScript);
 
@@ -212,7 +229,8 @@ function gulptasksHTML($, gulp, buildFolder) {
                 `;
 
                         document.body.innerHTML = bodyContent;
-                })
+                    }
+                )
             )
             .pipe(
                 $.htmlmin({

gulp/package.json

@@ -66,6 +66,7 @@
         "babel-plugin-danger-remove-unused-import": "^1.1.2",
         "css-mqpacker": "^7.0.0",
         "cssnano": "^4.1.10",
+        "postcss-critical-split": "^2.5.3",
         "electron-packager": "^14.0.6",
         "faster.js": "^1.1.0",
         "glob": "^7.1.3",

gulp/sounds.js

@@ -16,6 +16,12 @@ function gulptasksSounds($, gulp, buildFolder) {
         cacheDirName: "shapezio-precompiled-sounds",
     });
 
+    function getFileCacheValue(file) {
+        const { _isVinyl, base, cwd, contents, history, stat, path } = file;
+        const encodedContents = Buffer.from(contents).toString('base64');
+        return { _isVinyl, base, cwd, contents: encodedContents, history, stat, path };
+    }
+
     // Encodes the game music
     gulp.task("sounds.music", () => {
         return gulp
@@ -34,6 +40,7 @@ function gulptasksSounds($, gulp, buildFolder) {
                     {
                         name: "music",
                         fileCache,
+                        value: getFileCacheValue,
                     }
                 )
             )
@@ -58,6 +65,7 @@ function gulptasksSounds($, gulp, buildFolder) {
                     {
                         name: "music-high-quality",
                         fileCache,
+                        value: getFileCacheValue,
                     }
                 )
             )

gulp/yarn.lock

@@ -9623,6 +9623,14 @@ postcss-convert-values@^4.0.1:
     postcss "^7.0.0"
     postcss-value-parser "^3.0.0"
 
+postcss-critical-split@^2.5.3:
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/postcss-critical-split/-/postcss-critical-split-2.5.3.tgz#9339d3699f6363d0a3ad0952420dc9faa181363b"
+  integrity sha512-FDG+evU4RBGM9/LQ5nCktzFKjYH2O/SLollJwtrdGagXXbMvk620Bc9o8WpqHJnu573uxVkx9lhob1HZvSWhZg==
+  dependencies:
+    merge "^1.2.0"
+    postcss "^6.0.1"
+
 postcss-custom-media@^7.0.8:
   version "7.0.8"
   resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-7.0.8.tgz#fffd13ffeffad73621be5f387076a28b00294e0c"
@@ -10181,7 +10189,7 @@ postcss@^5.0.2:
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-postcss@^6.0.10, postcss@^6.0.9:
+postcss@^6.0.1, postcss@^6.0.10, postcss@^6.0.9:
   version "6.0.23"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
   integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==

res_raw/atlas.tps

@@ -197,7 +197,7 @@
             <key>scaleMode</key>
             <enum type="ScaleMode">Smooth</enum>
             <key>extrude</key>
-            <uint>2</uint>
+            <uint>3</uint>
             <key>trimThreshold</key>
             <uint>2</uint>
             <key>trimMargin</key>
@@ -257,6 +257,10 @@
             <key type="filename">sprites/belt/built/right_7.png</key>
             <key type="filename">sprites/belt/built/right_8.png</key>
             <key type="filename">sprites/belt/built/right_9.png</key>
+            <key type="filename">sprites/blueprints/balancer-merger-inverse.png</key>
+            <key type="filename">sprites/blueprints/balancer-merger.png</key>
+            <key type="filename">sprites/blueprints/balancer-splitter-inverse.png</key>
+            <key type="filename">sprites/blueprints/balancer-splitter.png</key>
             <key type="filename">sprites/blueprints/constant_signal.png</key>
             <key type="filename">sprites/blueprints/display.png</key>
             <key type="filename">sprites/blueprints/lever.png</key>
@@ -269,24 +273,26 @@
             <key type="filename">sprites/blueprints/miner.png</key>
             <key type="filename">sprites/blueprints/reader.png</key>
             <key type="filename">sprites/blueprints/rotater-ccw.png</key>
-            <key type="filename">sprites/blueprints/rotater-fl.png</key>
+            <key type="filename">sprites/blueprints/rotater-rotate180.png</key>
             <key type="filename">sprites/blueprints/rotater.png</key>
-            <key type="filename">sprites/blueprints/splitter-compact-inverse.png</key>
-            <key type="filename">sprites/blueprints/splitter-compact-merge-inverse.png</key>
-            <key type="filename">sprites/blueprints/splitter-compact-merge.png</key>
-            <key type="filename">sprites/blueprints/splitter-compact.png</key>
             <key type="filename">sprites/blueprints/trash.png</key>
             <key type="filename">sprites/blueprints/underground_belt_entry-tier2.png</key>
             <key type="filename">sprites/blueprints/underground_belt_entry.png</key>
             <key type="filename">sprites/blueprints/underground_belt_exit-tier2.png</key>
             <key type="filename">sprites/blueprints/underground_belt_exit.png</key>
             <key type="filename">sprites/blueprints/virtual_processor-analyzer.png</key>
+            <key type="filename">sprites/blueprints/virtual_processor-painter.png</key>
             <key type="filename">sprites/blueprints/virtual_processor-rotater.png</key>
             <key type="filename">sprites/blueprints/virtual_processor-shapecompare.png</key>
+            <key type="filename">sprites/blueprints/virtual_processor-stacker.png</key>
             <key type="filename">sprites/blueprints/virtual_processor-unstacker.png</key>
             <key type="filename">sprites/blueprints/virtual_processor.png</key>
             <key type="filename">sprites/blueprints/wire_tunnel-coating.png</key>
             <key type="filename">sprites/blueprints/wire_tunnel.png</key>
+            <key type="filename">sprites/buildings/balancer-merger-inverse.png</key>
+            <key type="filename">sprites/buildings/balancer-merger.png</key>
+            <key type="filename">sprites/buildings/balancer-splitter-inverse.png</key>
+            <key type="filename">sprites/buildings/balancer-splitter.png</key>
             <key type="filename">sprites/buildings/constant_signal.png</key>
             <key type="filename">sprites/buildings/display.png</key>
             <key type="filename">sprites/buildings/lever.png</key>
@@ -298,18 +304,16 @@
             <key type="filename">sprites/buildings/miner-chainable.png</key>
             <key type="filename">sprites/buildings/reader.png</key>
             <key type="filename">sprites/buildings/rotater-ccw.png</key>
-            <key type="filename">sprites/buildings/rotater-fl.png</key>
-            <key type="filename">sprites/buildings/splitter-compact-inverse.png</key>
-            <key type="filename">sprites/buildings/splitter-compact-merge-inverse.png</key>
-            <key type="filename">sprites/buildings/splitter-compact-merge.png</key>
-            <key type="filename">sprites/buildings/splitter-compact.png</key>
+            <key type="filename">sprites/buildings/rotater-rotate180.png</key>
             <key type="filename">sprites/buildings/underground_belt_entry-tier2.png</key>
             <key type="filename">sprites/buildings/underground_belt_entry.png</key>
             <key type="filename">sprites/buildings/underground_belt_exit-tier2.png</key>
             <key type="filename">sprites/buildings/underground_belt_exit.png</key>
             <key type="filename">sprites/buildings/virtual_processor-analyzer.png</key>
+            <key type="filename">sprites/buildings/virtual_processor-painter.png</key>
             <key type="filename">sprites/buildings/virtual_processor-rotater.png</key>
             <key type="filename">sprites/buildings/virtual_processor-shapecompare.png</key>
+            <key type="filename">sprites/buildings/virtual_processor-stacker.png</key>
             <key type="filename">sprites/buildings/virtual_processor-unstacker.png</key>
             <key type="filename">sprites/buildings/virtual_processor.png</key>
             <key type="filename">sprites/buildings/wire_tunnel-coating.png</key>
@@ -346,6 +350,30 @@
                 <key>scale9FromFile</key>
                 <false/>
             </struct>
+            <key type="filename">sprites/blueprints/balancer.png</key>
+            <key type="filename">sprites/blueprints/cutter.png</key>
+            <key type="filename">sprites/blueprints/filter.png</key>
+            <key type="filename">sprites/blueprints/mixer.png</key>
+            <key type="filename">sprites/blueprints/painter-mirrored.png</key>
+            <key type="filename">sprites/blueprints/painter.png</key>
+            <key type="filename">sprites/blueprints/stacker.png</key>
+            <key type="filename">sprites/buildings/balancer.png</key>
+            <key type="filename">sprites/buildings/filter.png</key>
+            <key type="filename">sprites/buildings/painter-mirrored.png</key>
+            <struct type="IndividualSpriteSettings">
+                <key>pivotPoint</key>
+                <point_f>0.5,0.5</point_f>
+                <key>spriteScale</key>
+                <double>1</double>
+                <key>scale9Enabled</key>
+                <false/>
+                <key>scale9Borders</key>
+                <rect>96,48,192,96</rect>
+                <key>scale9Paddings</key>
+                <rect>96,48,192,96</rect>
+                <key>scale9FromFile</key>
+                <false/>
+            </struct>
             <key type="filename">sprites/blueprints/belt_left.png</key>
             <key type="filename">sprites/blueprints/belt_right.png</key>
             <key type="filename">sprites/blueprints/belt_top.png</key>
@@ -392,29 +420,6 @@
                 <key>scale9FromFile</key>
                 <false/>
             </struct>
-            <key type="filename">sprites/blueprints/cutter.png</key>
-            <key type="filename">sprites/blueprints/filter.png</key>
-            <key type="filename">sprites/blueprints/mixer.png</key>
-            <key type="filename">sprites/blueprints/painter-mirrored.png</key>
-            <key type="filename">sprites/blueprints/painter.png</key>
-            <key type="filename">sprites/blueprints/splitter.png</key>
-            <key type="filename">sprites/blueprints/stacker.png</key>
-            <key type="filename">sprites/buildings/filter.png</key>
-            <key type="filename">sprites/buildings/painter-mirrored.png</key>
-            <struct type="IndividualSpriteSettings">
-                <key>pivotPoint</key>
-                <point_f>0.5,0.5</point_f>
-                <key>spriteScale</key>
-                <double>1</double>
-                <key>scale9Enabled</key>
-                <false/>
-                <key>scale9Borders</key>
-                <rect>96,48,192,96</rect>
-                <key>scale9Paddings</key>
-                <rect>96,48,192,96</rect>
-                <key>scale9FromFile</key>
-                <false/>
-            </struct>
             <key type="filename">sprites/blueprints/painter-double.png</key>
             <key type="filename">sprites/blueprints/trash-storage.png</key>
             <key type="filename">sprites/buildings/painter-double.png</key>
@@ -435,7 +440,6 @@
             <key type="filename">sprites/buildings/cutter.png</key>
             <key type="filename">sprites/buildings/mixer.png</key>
             <key type="filename">sprites/buildings/painter.png</key>
-            <key type="filename">sprites/buildings/splitter.png</key>
             <key type="filename">sprites/buildings/stacker.png</key>
             <struct type="IndividualSpriteSettings">
                 <key>pivotPoint</key>
@@ -503,6 +507,28 @@
                 <key>scale9FromFile</key>
                 <false/>
             </struct>
+            <key type="filename">sprites/colors/blue.png</key>
+            <key type="filename">sprites/colors/cyan.png</key>
+            <key type="filename">sprites/colors/green.png</key>
+            <key type="filename">sprites/colors/purple.png</key>
+            <key type="filename">sprites/colors/red.png</key>
+            <key type="filename">sprites/colors/uncolored.png</key>
+            <key type="filename">sprites/colors/white.png</key>
+            <key type="filename">sprites/colors/yellow.png</key>
+            <struct type="IndividualSpriteSettings">
+                <key>pivotPoint</key>
+                <point_f>0.5,0.5</point_f>
+                <key>spriteScale</key>
+                <double>1</double>
+                <key>scale9Enabled</key>
+                <false/>
+                <key>scale9Borders</key>
+                <rect>18,18,36,36</rect>
+                <key>scale9Paddings</key>
+                <rect>18,18,36,36</rect>
+                <key>scale9FromFile</key>
+                <false/>
+            </struct>
             <key type="filename">sprites/debug/acceptor_slot.png</key>
             <key type="filename">sprites/debug/ejector_slot.png</key>
             <key type="filename">sprites/misc/hub_direction_indicator.png</key>

src/css/adinplay.scss

@@ -50,7 +50,6 @@
                 left: 0;
                 right: 0;
                 bottom: 0;
-                background: rgba($mainBgColor, 0.9) uiResource("loading.svg") center center / #{D(60px)} no-repeat;
                 @include InlineAnimation(0.2s ease-in-out) {
                     0% {
                         opacity: 0;
@@ -59,6 +58,11 @@
                         opacity: 1;
                     }
                 }
+
+                & {
+                    /* @load-async */
+                    background: rgba($mainBgColor, 0.9) uiResource("loading.svg") center center / #{D(60px)} no-repeat;
+                }
             }
         }
     }

src/css/common.scss

@@ -391,14 +391,23 @@ canvas {
     color: #393747;
     &::after {
         content: " ";
-        background: uiResource("loading.svg") center center / contain no-repeat;
-        @include S(width, 15px);
-        @include S(height, 15px);
-        @include S(margin-top, 1px);
-        @include S(margin-left, 5px);
+        @include S(width, 35px);
+        @include S(height, 35px);
         display: inline-block;
         vertical-align: middle;
+
+        & {
+            /* @load-async */
+            background: uiResource("loading.svg") center center / contain no-repeat;
         }
+    }
+
+    @include InlineAnimation(1.5s ease-in-out infinite) {
+        50% {
+            transform: scale(1.2) rotate(160deg);
+        }
+    }
+
     @include DarkThemeOverride {
         color: #fff;
     }
@@ -446,7 +455,6 @@ canvas {
 .prefab_InfoIcon {
     @include S(width, 25px);
     @include S(height, 25px);
-    // background: uiResource("icons_small/info.png") center center / contain no-repeat;
     z-index: 100;
     opacity: 0.8;
     cursor: pointer;
@@ -463,18 +471,48 @@ canvas {
     justify-content: center;
     flex-direction: column;
     .loadingImage {
-        background: uiResource("loading.svg") center center / #{D(60px)} no-repeat;
         width: 100%;
         display: flex;
         flex-grow: 1;
+
+        @include InlineAnimation(1.5s ease-in-out infinite) {
+            50% {
+                transform: scale(1.2) rotate(160deg);
             }
+        }
+
+        & {
+            /* @load-async */
+            background: uiResource("loading.svg") center center / #{D(40px)} no-repeat;
+        }
+    }
+
+    .prefab_GameHint {
+        position: absolute;
+        @include S(left, 20px);
+        @include S(right, 20px);
+        @include S(bottom, 60px);
+        @include Text;
+        color: #666;
+
+        @include DarkThemeOverride() {
+            color: lighten($darkModeGameBackground, 50);
+        }
+    }
+
     .loadingStatus {
         position: absolute;
         @include S(left, 20px);
         @include S(right, 20px);
         @include S(bottom, 30px);
         @include Text;
-        @include TextShadow3D(#aaa);
+        @include PlainText;
+        color: #aaa;
+
+        @include DarkThemeOverride {
+            color: lighten($darkModeGameBackground, 20);
+        }
+
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -568,6 +606,13 @@ canvas {
             background-color: lighten($themeColor, 15);
         }
     }
+
+    @include DarkThemeOverride {
+        background-color: $darkModeGameBackground !important;
+        &.checked {
+            background-color: $colorBlueBright !important;
+        }
+    }
 }
 
 .rangeInputContainer {
@@ -597,6 +642,16 @@ input.rangeInput {
         @include S(border-radius, 8px);
     }
 
+    @include DarkThemeOverride {
+        &::-webkit-slider-runnable-track {
+            background-color: $darkModeControlsBackground;
+        }
+
+        &::-webkit-slider-thumb {
+            box-shadow: inset 0 0 0 D(10px) #eee;
+        }
+    }
+
     &::-webkit-slider-thumb {
         appearance: none;
         -webkit-appearance: none;