Merge branch 'master' of https://github.com/tobspr/shapez.io into arrays-now-sets

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
@@ -92,10 +92,32 @@ This project is based on ES5. Some ES2015 features are used but most of them are
 4. Add the system in `src/js/game/game_system_manager.js` (To `this.systems` and also call `add` in the `internalInitSystems()` method)
 5. If your system should draw stuff, this is a bit more complicated. Have a look at existing systems on how they do it.
 
+#### Checklist for a new building / testing it
+
+This is a quick checklist, if a new building is added this points should be fulfilled:
+
+2. The translation for all variants is done and finalized
+3. The artwork (regular sprite) is finalized
+4. The blueprint sprite has been generated and is up to date
+5. The building has been added to the appropriate toolbar
+6. The building has a keybinding which makes sense
+7. The building has a reward assigned and is unlocked at a meaningful point
+8. The reward for the building has a proper translation
+9. The reward for the building has a proper image
+10. The building has a proper tutorial image assigned
+11. The buliding has a proper toolbar icon
+12. The reward requires a proper shape
+13. The building has a proper silhouette color
+14. The building has a proper matrix for being rendered on the minimap
+15. The building has proper statistics in the dialog
+16. The building properly contributes to the shapes produced analytics
+17. The building is properly persisted in the savegame
+18. The building is explained properly, ideally via an interactive tutorial
+
 ### Assets
 
 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/convert_atlas.js

@@ -1,96 +0,0 @@
-// Converts the atlas description to a JSON file
-
-String.prototype.replaceAll = function (search, replacement) {
-    var target = this;
-    return target.split(search).join(replacement);
-};
-
-const fs = require("fs");
-const path = require("path");
-
-const folder = path.join(__dirname, "res_built", "atlas");
-const files = fs.readdirSync(folder);
-
-const metadata = [];
-
-files.forEach(filename => {
-    if (filename.endsWith(".atlas")) {
-        // Read content
-
-        const content = fs.readFileSync(path.join(folder, filename), "ascii");
-
-        const lines = content.replaceAll("\r", "").replaceAll("\t", "").split("\n");
-
-        const readLine = () => lines.splice(0, 1)[0];
-        const readValue = () => readLine().replaceAll(" ", "").split(":")[1];
-        const readVector = () =>
-            readValue()
-                .split(",")
-                .map(d => parseInt(d, 10));
-
-        let maxAtlas = 100;
-
-        atlasLoop: while (maxAtlas-- > 0 && lines.length >= 7) {
-            const result = {
-                entries: [],
-            };
-
-            // Extract header
-            const header_fileStart = readLine();
-            const header_fileName = readLine();
-            const header_size = readVector();
-            const header_format = readLine();
-            const header_filter = readLine();
-            const header_repeat = readLine();
-            const baseAtlasName = header_fileName.replace(".png", "");
-
-            // Store size
-            result.size = header_size;
-
-            lineLoop: while (lines.length >= 7) {
-                const entryResult = {};
-
-                const nextLine = lines[0];
-                if (nextLine.length === 0) {
-                    break;
-                }
-
-                const entry_fileName = readLine() + ".png";
-
-                const entry_rotate = readValue();
-                const entry_xy = readVector();
-                const entry_size = readVector();
-                const entry_orig = readVector();
-                const entry_offset = readVector();
-                const entry_index = readValue();
-
-                entryResult.filename = entry_fileName;
-                entryResult.xy = entry_xy;
-                entryResult.size = entry_size;
-                // entryResult.offset = entry_offset;
-
-                entryResult.origSize = entry_orig;
-
-                let offset = [0, 0];
-
-                // GDX Atlas packer uses 1 - y coordinates. This sucks, and we have to convert it
-                offset[0] = entry_offset[0];
-                offset[1] = entry_orig[1] - entry_offset[1] - entry_size[1];
-
-                entryResult.offset = offset;
-
-                result.entries.push(entryResult);
-            }
-
-            console.log("[Atlas]", "'" + baseAtlasName + "'", "has", result.entries.length, "entries");
-            // fs.writeFileSync(path.join(folder, baseAtlasName + ".gen.json"), JSON.stringify(result));
-
-            metadata.push({
-                filename: baseAtlasName + ".png",
-                entries: result,
-            });
-        }
-    }
-});
-
-fs.writeFileSync(path.join(folder, "meta.gen.json"), JSON.stringify(metadata, null, 4));

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
-                .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(gulp.dest(buildFolder))
-        );
+    // 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().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,86 +27,103 @@ function gulptasksHTML($, gulp, buildFolder) {
         return gulp
             .src("../src/html/" + (standalone ? "index.standalone.html" : "index.html"))
             .pipe(
-                $.dom(/** @this {Document} **/ function () {
-                    const document = this;
+                $.dom(
+                    /** @this {Document} **/ function () {
+                        const document = this;
 
-                    // Preconnect to api
-                    const prefetchLink = document.createElement("link");
-                    prefetchLink.rel = "preconnect";
-                    prefetchLink.href = apiUrl;
-                    prefetchLink.setAttribute("crossorigin", "anonymous");
-                    document.head.appendChild(prefetchLink);
+                        // Preconnect to api
+                        const prefetchLink = document.createElement("link");
+                        prefetchLink.rel = "preconnect";
+                        prefetchLink.href = apiUrl;
+                        prefetchLink.setAttribute("crossorigin", "anonymous");
+                        document.head.appendChild(prefetchLink);
 
-                    // Append css
-                    const css = document.createElement("link");
-                    css.rel = "stylesheet";
-                    css.type = "text/css";
-                    css.media = "none";
-                    css.setAttribute("onload", "this.media='all'");
-                    css.href = cachebust("main.css");
-                    if (integrity) {
-                        css.setAttribute(
-                            "integrity",
-                            computeIntegrityHash(path.join(buildFolder, "main.css"))
-                        );
-                    }
-                    document.head.appendChild(css);
+                        // Append css
+                        const css = document.createElement("link");
+                        css.rel = "stylesheet";
+                        css.type = "text/css";
+                        css.media = "none";
+                        css.setAttribute("onload", "this.media='all'");
+                        css.href = cachebust("main.css");
+                        if (integrity) {
+                            css.setAttribute(
+                                "integrity",
+                                computeIntegrityHash(path.join(buildFolder, "main.css"))
+                            );
+                        }
+                        document.head.appendChild(css);
 
-                    if (app) {
-                        // Append cordova link
-                        const cdv = document.createElement("script");
-                        cdv.src = "cordova.js";
-                        cdv.type = "text/javascript";
-                        document.head.appendChild(cdv);
-                    }
+                        // 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);
 
-                    // Google analytics
-                    if (analytics) {
-                        const tagManagerScript = document.createElement("script");
-                        tagManagerScript.src = "https://www.googletagmanager.com/gtag/js?id=UA-165342524-1";
-                        tagManagerScript.setAttribute("async", "");
-                        document.head.appendChild(tagManagerScript);
+                        if (app) {
+                            // Append cordova link
+                            const cdv = document.createElement("script");
+                            cdv.src = "cordova.js";
+                            cdv.type = "text/javascript";
+                            document.head.appendChild(cdv);
+                        }
 
-                        const initScript = document.createElement("script");
-                        initScript.textContent = `
+                        // Google analytics
+                        if (analytics) {
+                            const tagManagerScript = document.createElement("script");
+                            tagManagerScript.src =
+                                "https://www.googletagmanager.com/gtag/js?id=UA-165342524-1";
+                            tagManagerScript.setAttribute("async", "");
+                            document.head.appendChild(tagManagerScript);
+
+                            const initScript = document.createElement("script");
+                            initScript.textContent = `
                         window.dataLayer = window.dataLayer || [];
                         function gtag(){dataLayer.push(arguments);}
                         gtag('js', new Date());
                         gtag('config', 'UA-165342524-1', { anonymize_ip: true });
                         `;
-                        document.head.appendChild(initScript);
+                            document.head.appendChild(initScript);
 
-                        const abTestingScript = document.createElement("script");
-                        abTestingScript.setAttribute(
-                            "src",
-                            "https://www.googleoptimize.com/optimize.js?id=OPT-M5NHCV7"
-                        );
-                        abTestingScript.setAttribute("async", "");
-                        document.head.appendChild(abTestingScript);
-                    }
+                            const abTestingScript = document.createElement("script");
+                            abTestingScript.setAttribute(
+                                "src",
+                                "https://www.googleoptimize.com/optimize.js?id=OPT-M5NHCV7"
+                            );
+                            abTestingScript.setAttribute("async", "");
+                            document.head.appendChild(abTestingScript);
+                        }
 
-                    // Do not need to preload in app or standalone
-                    if (!hasLocalFiles) {
-                        // Preload essentials
-                        const preloads = ["fonts/GameFont.woff2"];
+                        // Do not need to preload in app or standalone
+                        if (!hasLocalFiles) {
+                            // Preload essentials
+                            const preloads = ["fonts/GameFont.woff2"];
 
-                        preloads.forEach(src => {
-                            const preloadLink = document.createElement("link");
-                            preloadLink.rel = "preload";
-                            preloadLink.href = cachebust("res/" + src);
-                            if (src.endsWith(".woff2")) {
-                                preloadLink.setAttribute("crossorigin", "anonymous");
-                                preloadLink.setAttribute("as", "font");
-                            } else {
-                                preloadLink.setAttribute("as", "image");
-                            }
-                            document.head.appendChild(preloadLink);
-                        });
-                    }
+                            preloads.forEach(src => {
+                                const preloadLink = document.createElement("link");
+                                preloadLink.rel = "preload";
+                                preloadLink.href = cachebust("res/" + src);
+                                if (src.endsWith(".woff2")) {
+                                    preloadLink.setAttribute("crossorigin", "anonymous");
+                                    preloadLink.setAttribute("as", "font");
+                                } else {
+                                    preloadLink.setAttribute("as", "image");
+                                }
+                                document.head.appendChild(preloadLink);
+                            });
+                        }
 
-                    const loadingSvg = `background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46YXV0bztiYWNrZ3JvdW5kOjAgMCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgZGlzcGxheT0iYmxvY2siPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzM5Mzc0NyIgc3Ryb2tlLXdpZHRoPSIzIiByPSI0MiIgc3Ryb2tlLWRhc2hhcnJheT0iMTk3LjkyMDMzNzE3NjE1Njk4IDY3Ljk3MzQ0NTcyNTM4NTY2IiB0cmFuc2Zvcm09InJvdGF0ZSg0OC4yNjUgNTAgNTApIj48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGR1cj0iNS41NTU1NTU1NTU1NTU1NTVzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIi8+PC9jaXJjbGU+PC9zdmc+")`;
+                        const loadingSvg = `background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46YXV0bztiYWNrZ3JvdW5kOjAgMCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgZGlzcGxheT0iYmxvY2siPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzM5Mzc0NyIgc3Ryb2tlLXdpZHRoPSIzIiByPSI0MiIgc3Ryb2tlLWRhc2hhcnJheT0iMTk3LjkyMDMzNzE3NjE1Njk4IDY3Ljk3MzQ0NTcyNTM4NTY2IiB0cmFuc2Zvcm09InJvdGF0ZSg0OC4yNjUgNTAgNTApIj48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGR1cj0iNS41NTU1NTU1NTU1NTU1NTVzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIi8+PC9jaXJjbGU+PC9zdmc+")`;
 
-                    const loadingCss = `
+                        const loadingCss = `
                     @font-face {
                         font-family: 'GameFont';
                         font-style: normal;
@@ -158,52 +175,52 @@ function gulptasksHTML($, gulp, buildFolder) {
                     }
                 `;
 
-                    const style = document.createElement("style");
-                    style.setAttribute("type", "text/css");
-                    style.textContent = loadingCss;
-                    document.head.appendChild(style);
+                        const style = document.createElement("style");
+                        style.setAttribute("type", "text/css");
+                        style.textContent = loadingCss;
+                        document.head.appendChild(style);
 
-                    // Append loader, but not in standalone (directly include bundle there)
-                    if (standalone) {
-                        const bundleScript = document.createElement("script");
-                        bundleScript.type = "text/javascript";
-                        bundleScript.src = "bundle.js";
-                        if (integrity) {
-                            bundleScript.setAttribute(
-                                "integrity",
-                                computeIntegrityHash(path.join(buildFolder, "bundle.js"))
-                            );
-                        }
-                        document.head.appendChild(bundleScript);
-                    } else {
-                        const loadJs = document.createElement("script");
-                        loadJs.type = "text/javascript";
-                        let scriptContent = "";
-                        scriptContent += `var bundleSrc = '${cachebust("bundle.js")}';\n`;
-                        scriptContent += `var bundleSrcTranspiled = '${cachebust(
-                            "bundle-transpiled.js"
-                        )}';\n`;
-
-                        if (integrity) {
-                            scriptContent +=
-                                "var bundleIntegrity = '" +
-                                computeIntegrityHash(path.join(buildFolder, "bundle.js")) +
-                                "';\n";
-                            scriptContent +=
-                                "var bundleIntegrityTranspiled = '" +
-                                computeIntegrityHash(path.join(buildFolder, "bundle-transpiled.js")) +
-                                "';\n";
+                        // Append loader, but not in standalone (directly include bundle there)
+                        if (standalone) {
+                            const bundleScript = document.createElement("script");
+                            bundleScript.type = "text/javascript";
+                            bundleScript.src = "bundle.js";
+                            if (integrity) {
+                                bundleScript.setAttribute(
+                                    "integrity",
+                                    computeIntegrityHash(path.join(buildFolder, "bundle.js"))
+                                );
+                            }
+                            document.head.appendChild(bundleScript);
                         } else {
-                            scriptContent += "var bundleIntegrity = null;\n";
-                            scriptContent += "var bundleIntegrityTranspiled = null;\n";
+                            const loadJs = document.createElement("script");
+                            loadJs.type = "text/javascript";
+                            let scriptContent = "";
+                            scriptContent += `var bundleSrc = '${cachebust("bundle.js")}';\n`;
+                            scriptContent += `var bundleSrcTranspiled = '${cachebust(
+                                "bundle-transpiled.js"
+                            )}';\n`;
+
+                            if (integrity) {
+                                scriptContent +=
+                                    "var bundleIntegrity = '" +
+                                    computeIntegrityHash(path.join(buildFolder, "bundle.js")) +
+                                    "';\n";
+                                scriptContent +=
+                                    "var bundleIntegrityTranspiled = '" +
+                                    computeIntegrityHash(path.join(buildFolder, "bundle-transpiled.js")) +
+                                    "';\n";
+                            } else {
+                                scriptContent += "var bundleIntegrity = null;\n";
+                                scriptContent += "var bundleIntegrityTranspiled = null;\n";
+                            }
+
+                            scriptContent += fs.readFileSync("./bundle-loader.js").toString();
+                            loadJs.textContent = scriptContent;
+                            document.head.appendChild(loadJs);
                         }
 
-                        scriptContent += fs.readFileSync("./bundle-loader.js").toString();
-                        loadJs.textContent = scriptContent;
-                        document.head.appendChild(loadJs);
-                    }
-
-                    const bodyContent = `
+                        const bodyContent = `
                 <div id="ll_fp">_</div>
                 <div id="ll_p">
                     <span></span>
@@ -211,8 +228,9 @@ function gulptasksHTML($, gulp, buildFolder) {
                 </div >
                 `;
 
-                    document.body.innerHTML = bodyContent;
-                })
+                        document.body.innerHTML = bodyContent;
+                    }
+                )
             )
             .pipe(
                 $.htmlmin({

gulp/image-resources.js

@@ -61,17 +61,13 @@ function gulptasksImageResources($, gulp, buildFolder) {
 
     // Copies the atlas to the final destination
     gulp.task("imgres.atlas", () => {
-        return gulp
-            .src(["../res_built/atlas/*.png"])
-            .pipe($.cached("imgres.atlas"))
-            .pipe(gulp.dest(resourcesDestFolder));
+        return gulp.src(["../res_built/atlas/*.png"]).pipe(gulp.dest(resourcesDestFolder));
     });
 
     // Copies the atlas to the final destination after optimizing it (lossy compression)
     gulp.task("imgres.atlasOptimized", () => {
         return gulp
             .src(["../res_built/atlas/*.png"])
-            .pipe($.cached("imgres.atlasOptimized"))
             .pipe(
                 $.if(
                     fname => fileMustBeLossless(fname.history[0]),
@@ -86,17 +82,15 @@ function gulptasksImageResources($, gulp, buildFolder) {
 
     // Copies all resources which are no ui resources
     gulp.task("imgres.copyNonImageResources", () => {
-        return gulp
-            .src(nonImageResourcesGlobs)
-            .pipe($.cached("imgres.copyNonImageResources"))
-            .pipe(gulp.dest(resourcesDestFolder));
+        return gulp.src(nonImageResourcesGlobs).pipe(gulp.dest(resourcesDestFolder));
     });
 
     // Copies all ui resources
     gulp.task("imgres.copyImageResources", () => {
         return gulp
             .src(imageResourcesGlobs)
-            .pipe($.cached("copyImageResources"))
+
+            .pipe($.cached("imgres.copyImageResources"))
             .pipe(gulp.dest(path.join(resourcesDestFolder)));
     });
 
@@ -104,7 +98,6 @@ function gulptasksImageResources($, gulp, buildFolder) {
     gulp.task("imgres.copyImageResourcesOptimized", () => {
         return gulp
             .src(imageResourcesGlobs)
-            .pipe($.cached("imgres.copyImageResourcesOptimized"))
             .pipe(
                 $.if(
                     fname => fileMustBeLossless(fname.history[0]),

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,
                     }
                 )
             )
@@ -110,7 +118,6 @@ function gulptasksSounds($, gulp, buildFolder) {
         return gulp
             .src(path.join(builtSoundsDir, "**", "*.mp3"))
             .pipe($.plumber())
-            .pipe($.cached("sounds.copy"))
             .pipe(gulp.dest(path.join(buildFolder, "res", "sounds")));
     });
 

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

@@ -104,7 +104,7 @@
             </struct>
         </struct>
         <key>shapePadding</key>
-        <uint>0</uint>
+        <uint>2</uint>
         <key>jpgQuality</key>
         <uint>80</uint>
         <key>pngOptimizationLevel</key>
@@ -118,7 +118,7 @@
         <key>textureFormat</key>
         <enum type="SettingsBase::TextureFormat">png</enum>
         <key>borderPadding</key>
-        <uint>1</uint>
+        <uint>3</uint>
         <key>maxTextureSize</key>
         <QSize>
             <key>width</key>
@@ -257,81 +257,84 @@
             <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/analyzer.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/belt_left.png</key>
+            <key type="filename">sprites/blueprints/belt_right.png</key>
+            <key type="filename">sprites/blueprints/belt_top.png</key>
+            <key type="filename">sprites/blueprints/comparator.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>
             <key type="filename">sprites/blueprints/logic_gate-not.png</key>
             <key type="filename">sprites/blueprints/logic_gate-or.png</key>
-            <key type="filename">sprites/blueprints/logic_gate-transistor.png</key>
             <key type="filename">sprites/blueprints/logic_gate-xor.png</key>
             <key type="filename">sprites/blueprints/logic_gate.png</key>
             <key type="filename">sprites/blueprints/miner-chainable.png</key>
             <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/transistor-mirrored.png</key>
+            <key type="filename">sprites/blueprints/transistor.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/analyzer.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/comparator.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>
             <key type="filename">sprites/buildings/logic_gate-not.png</key>
             <key type="filename">sprites/buildings/logic_gate-or.png</key>
-            <key type="filename">sprites/buildings/logic_gate-transistor.png</key>
             <key type="filename">sprites/buildings/logic_gate-xor.png</key>
             <key type="filename">sprites/buildings/logic_gate.png</key>
             <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/transistor-mirrored.png</key>
+            <key type="filename">sprites/buildings/transistor.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>
             <key type="filename">sprites/buildings/wire_tunnel.png</key>
             <key type="filename">sprites/misc/reader_overlay.png</key>
             <key type="filename">sprites/wires/lever_on.png</key>
-            <key type="filename">sprites/wires/sets/color_cross.png</key>
-            <key type="filename">sprites/wires/sets/color_forward.png</key>
-            <key type="filename">sprites/wires/sets/color_split.png</key>
-            <key type="filename">sprites/wires/sets/color_turn.png</key>
             <key type="filename">sprites/wires/sets/conflict_cross.png</key>
             <key type="filename">sprites/wires/sets/conflict_forward.png</key>
             <key type="filename">sprites/wires/sets/conflict_split.png</key>
             <key type="filename">sprites/wires/sets/conflict_turn.png</key>
-            <key type="filename">sprites/wires/sets/regular_cross.png</key>
-            <key type="filename">sprites/wires/sets/regular_forward.png</key>
-            <key type="filename">sprites/wires/sets/regular_split.png</key>
-            <key type="filename">sprites/wires/sets/regular_turn.png</key>
-            <key type="filename">sprites/wires/sets/shape_cross.png</key>
-            <key type="filename">sprites/wires/sets/shape_forward.png</key>
-            <key type="filename">sprites/wires/sets/shape_split.png</key>
-            <key type="filename">sprites/wires/sets/shape_turn.png</key>
+            <key type="filename">sprites/wires/sets/first_cross.png</key>
+            <key type="filename">sprites/wires/sets/first_forward.png</key>
+            <key type="filename">sprites/wires/sets/first_split.png</key>
+            <key type="filename">sprites/wires/sets/first_turn.png</key>
+            <key type="filename">sprites/wires/sets/second_cross.png</key>
+            <key type="filename">sprites/wires/sets/second_forward.png</key>
+            <key type="filename">sprites/wires/sets/second_split.png</key>
+            <key type="filename">sprites/wires/sets/second_turn.png</key>
             <struct type="IndividualSpriteSettings">
                 <key>pivotPoint</key>
                 <point_f>0.5,0.5</point_f>
@@ -346,20 +349,16 @@
                 <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>
-            <key type="filename">sprites/blueprints/wire-cross.png</key>
-            <key type="filename">sprites/blueprints/wire-split.png</key>
-            <key type="filename">sprites/blueprints/wire-turn.png</key>
-            <key type="filename">sprites/blueprints/wire.png</key>
-            <key type="filename">sprites/buildings/belt_left.png</key>
-            <key type="filename">sprites/buildings/belt_right.png</key>
-            <key type="filename">sprites/buildings/belt_top.png</key>
-            <key type="filename">sprites/buildings/wire-cross.png</key>
-            <key type="filename">sprites/buildings/wire-split.png</key>
-            <key type="filename">sprites/buildings/wire-turn.png</key>
-            <key type="filename">sprites/buildings/wire.png</key>
+            <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>
@@ -368,9 +367,9 @@
                 <key>scale9Enabled</key>
                 <false/>
                 <key>scale9Borders</key>
-                <rect>32,32,63,63</rect>
+                <rect>96,48,192,96</rect>
                 <key>scale9Paddings</key>
-                <rect>32,32,63,63</rect>
+                <rect>96,48,192,96</rect>
                 <key>scale9FromFile</key>
                 <false/>
             </struct>
@@ -392,15 +391,10 @@
                 <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>
+            <key type="filename">sprites/blueprints/painter-double.png</key>
+            <key type="filename">sprites/blueprints/storage.png</key>
+            <key type="filename">sprites/buildings/painter-double.png</key>
+            <key type="filename">sprites/buildings/storage.png</key>
             <struct type="IndividualSpriteSettings">
                 <key>pivotPoint</key>
                 <point_f>0.5,0.5</point_f>
@@ -409,15 +403,15 @@
                 <key>scale9Enabled</key>
                 <false/>
                 <key>scale9Borders</key>
-                <rect>96,48,192,96</rect>
+                <rect>96,96,192,192</rect>
                 <key>scale9Paddings</key>
-                <rect>96,48,192,96</rect>
+                <rect>96,96,192,192</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>
+            <key type="filename">sprites/buildings/belt_left.png</key>
+            <key type="filename">sprites/buildings/belt_right.png</key>
+            <key type="filename">sprites/buildings/belt_top.png</key>
             <struct type="IndividualSpriteSettings">
                 <key>pivotPoint</key>
                 <point_f>0.5,0.5</point_f>
@@ -426,16 +420,15 @@
                 <key>scale9Enabled</key>
                 <false/>
                 <key>scale9Borders</key>
-                <rect>96,96,192,192</rect>
+                <rect>32,32,63,63</rect>
                 <key>scale9Paddings</key>
-                <rect>96,96,192,192</rect>
+                <rect>32,32,63,63</rect>
                 <key>scale9FromFile</key>
                 <false/>
             </struct>
             <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>
@@ -488,7 +481,14 @@
                 <key>scale9FromFile</key>
                 <false/>
             </struct>
-            <key type="filename">sprites/buildings/trash-storage.png</key>
+            <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>
@@ -497,9 +497,9 @@
                 <key>scale9Enabled</key>
                 <false/>
                 <key>scale9Borders</key>
-                <rect>144,144,288,288</rect>
+                <rect>18,18,36,36</rect>
                 <key>scale9Paddings</key>
-                <rect>144,144,288,288</rect>
+                <rect>18,18,36,36</rect>
                 <key>scale9FromFile</key>
                 <false/>
             </struct>

res_raw/sprites/belt/generate_wire_sprites.js

@@ -10,8 +10,14 @@ const path = require("path");
 const outputFolder = path.join(__dirname, "..", "wires", "sets");
 
 const dimensions = 192;
-const lineSize = 12;
-const lowerLineSize = 20;
+const lineSize = 14;
+const lowerLineSize = 32;
+
+const variants = {
+    first: "#61ef6f",
+    second: "#5fb2f1",
+    conflict: "#f74c4c",
+};
 
 function hexToRGB(h) {
     let r = 0,
@@ -122,13 +128,6 @@ function HSLToRGB(h, s, l) {
 async function run() {
     console.log("Running");
 
-    const variants = {
-        regular: "#25fff2",
-        color: "#eba458",
-        shape: "#8858eb",
-        conflict: "#ff3e3e",
-    };
-
     const promises = [];
 
     for (const variantId in variants) {
@@ -163,19 +162,29 @@ async function run() {
             context.quality = "best";
             context.clearRect(0, 0, dimensions, dimensions);
 
-            context.strokeStyle = hexDarkenedColor;
-            context.lineWidth = lowerLineSize;
-            context.lineCap = "square";
-            context.imageSmoothingEnabled = false;
+            const lineCanvas = createCanvas(dimensions, dimensions);
+            const lineContext = lineCanvas.getContext("2d");
+            lineContext.quality = "best";
+            lineContext.clearRect(0, 0, dimensions, dimensions);
+            lineContext.strokeStyle = hexDarkenedColor;
+            lineContext.lineWidth = lowerLineSize;
+            lineContext.lineCap = "square";
+            lineContext.imageSmoothingEnabled = false;
 
             // Draw lower lines
             partLines.forEach(([x1, y1, x2, y2]) => {
-                context.beginPath();
-                context.moveTo(x1 * dimensions, y1 * dimensions);
-                context.lineTo(x2 * dimensions, y2 * dimensions);
-                context.stroke();
+                lineContext.beginPath();
+                lineContext.moveTo(x1 * dimensions, y1 * dimensions);
+                lineContext.lineTo(x2 * dimensions, y2 * dimensions);
+                lineContext.stroke();
             });
 
+            context.globalAlpha = 0.4;
+            context.drawImage(lineCanvas, 0, 0, dimensions, dimensions);
+
+            context.globalAlpha = 1;
+            context.imageSmoothingEnabled = false;
+            context.lineCap = "square";
             context.strokeStyle = variantColor;
             context.lineWidth = lineSize;
 
@@ -197,29 +206,6 @@ async function run() {
     console.log("Waiting for completion");
     await Promise.all(promises);
 
-    // Also wait a bit more
-    await new Promise(resolve => setTimeout(resolve, 1000));
-
-    console.log("Copying files to all locations");
-
-    // // Copy other files
-    fs.copyFileSync(
-        path.join(outputFolder, "regular_forward.png"),
-        path.join(__dirname, "..", "buildings", "wire.png")
-    );
-    fs.copyFileSync(
-        path.join(outputFolder, "regular_turn.png"),
-        path.join(__dirname, "..", "buildings", "wire-turn.png")
-    );
-    fs.copyFileSync(
-        path.join(outputFolder, "regular_split.png"),
-        path.join(__dirname, "..", "buildings", "wire-split.png")
-    );
-    fs.copyFileSync(
-        path.join(outputFolder, "regular_cross.png"),
-        path.join(__dirname, "..", "buildings", "wire-cross.png")
-    );
-
     console.log("Done!");
 }