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
+    // 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/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!");
 }