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
2025-06-13 13:04:03 +00:00 · 2020-09-23 18:49:45 +02:00 · 2020-09-23 18:49:45 +02:00 · f2b9d15373
commit f2b9d15373
parent 5b35c2e49d 8a019c285d
258 changed files with 31595 additions and 29280 deletions
--- a/README.md
+++ b/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">
--- a/gulp/css.js
+++ b/gulp/css.js
@ -1,99 +1,137 @@
-const path = require("path");
-const buildUtils = require("./buildutils");
-
-function gulptasksCSS($, gulp, buildFolder, browserSync) {
-    // The assets plugin copies the files
-    const commitHash = buildUtils.getRevision();
-    const postcssAssetsPlugin = cachebust =>
-        $.postcssAssets({
-            loadPaths: [path.join(buildFolder, "res", "ui")],
-            basePath: buildFolder,
-            baseUrl: ".",
-            cachebuster: cachebust
-                ? (filePath, urlPathname) => ({
-                      pathname: buildUtils.cachebust(urlPathname, commitHash),
-                  })
-                : "",
-        });
-
-    // Postcss configuration
-    const postcssPlugins = (prod, { cachebust = false }) => {
-        const plugins = [postcssAssetsPlugin(cachebust)];
-        if (prod) {
-            plugins.unshift(
-                $.postcssUnprefix(),
-                $.postcssPresetEnv({
-                    browsers: ["> 0.1%"],
-                })
-            );
-
-            plugins.push(
-                $.cssMqpacker({
-                    sort: true,
-                }),
-                $.cssnano({
-                    preset: [
-                        "advanced",
-                        {
-                            cssDeclarationSorter: false,
-                            discardUnused: true,
-                            mergeIdents: false,
-                            reduceIdents: true,
-                            zindex: true,
-                        },
-                    ],
-                }),
-                $.postcssRoundSubpixels()
-            );
-        }
-        return plugins;
-    };
-
-    // Performs linting on css
-    gulp.task("css.lint", () => {
-        return gulp
-            .src(["../src/css/**/*.scss"])
-            .pipe($.sassLint({ configFile: ".sasslint.yml" }))
-            .pipe($.sassLint.format())
-            .pipe($.sassLint.failOnError());
-    });
-
-    // Builds the css in dev mode
-    gulp.task("css.dev", () => {
-        return gulp
-            .src(["../src/css/main.scss"])
-            .pipe($.plumber())
-            .pipe($.sass.sync().on("error", $.sass.logError))
-            .pipe($.postcss(postcssPlugins(false, {})))
-            .pipe(gulp.dest(buildFolder))
-            .pipe(browserSync.stream());
-    });
-
-    // 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 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))
-        );
-    });
-}
-
-module.exports = {
-    gulptasksCSS,
-};
+const path = require("path");
+const buildUtils = require("./buildutils");
+
+function gulptasksCSS($, gulp, buildFolder, browserSync) {
+    // The assets plugin copies the files
+    const commitHash = buildUtils.getRevision();
+    const postcssAssetsPlugin = cachebust =>
+        $.postcssAssets({
+            loadPaths: [path.join(buildFolder, "res", "ui")],
+            basePath: buildFolder,
+            baseUrl: ".",
+            cachebuster: cachebust
+                ? (filePath, urlPathname) => ({
+                      pathname: buildUtils.cachebust(urlPathname, commitHash),
+                  })
+                : "",
+        });
+
+    // Postcss configuration
+    const postcssPlugins = (prod, { cachebust = false }) => {
+        const plugins = [postcssAssetsPlugin(cachebust)];
+        if (prod) {
+            plugins.unshift(
+                $.postcssUnprefix(),
+                $.postcssPresetEnv({
+                    browsers: ["> 0.1%"],
+                })
+            );
+
+            plugins.push(
+                $.cssMqpacker({
+                    sort: true,
+                }),
+                $.cssnano({
+                    preset: [
+                        "advanced",
+                        {
+                            cssDeclarationSorter: false,
+                            discardUnused: true,
+                            mergeIdents: false,
+                            reduceIdents: true,
+                            zindex: true,
+                        },
+                    ],
+                }),
+                $.postcssRoundSubpixels()
+            );
+        }
+        return plugins;
+    };
+
+    // Performs linting on css
+    gulp.task("css.lint", () => {
+        return gulp
+            .src(["../src/css/**/*.scss"])
+            .pipe($.sassLint({ configFile: ".sasslint.yml" }))
+            .pipe($.sassLint.format())
+            .pipe($.sassLint.failOnError());
+    });
+
+    function resourcesTask({ 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",
+                    }),
+                ])
+            )
+            .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 resources in prod (=minified)
+    gulp.task("css.resources.prod", () => {
+        return resourcesTask({ cachebust: true, isProd: true });
+    });
+
+    // 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 = {
+    gulptasksCSS,
+};
--- a/gulp/gulpfile.js
+++ b/gulp/gulpfile.js
@ -1,325 +1,325 @@
-/* eslint-disable */
-
-require("colors");
-
-const gulp = require("gulp");
-const browserSync = require("browser-sync").create({});
-const path = require("path");
-const deleteEmpty = require("delete-empty");
-const execSync = require("child_process").execSync;
-
-const lfsOutput = execSync("git lfs install", { encoding: "utf-8" });
-if (!lfsOutput.toLowerCase().includes("git lfs initialized")) {
-    console.error(`
-    Git LFS is not installed, unable to build.
-
-    To install Git LFS on Linux:
-      - Arch:
-        sudo pacman -S git-lfs
-      - Debian/Ubuntu:
-        sudo apt install git-lfs
-
-    For other systems, see:
-    https://github.com/git-lfs/git-lfs/wiki/Installation
-    `);
-    process.exit(1);
-}
-
-// Load other plugins dynamically
-const $ = require("gulp-load-plugins")({
-    scope: ["devDependencies"],
-    pattern: "*",
-});
-
-// Check environment variables
-
-const envVars = [
-    "SHAPEZ_CLI_SERVER_HOST",
-    // "SHAPEZ_CLI_PHONEGAP_KEY",
-    "SHAPEZ_CLI_ALPHA_FTP_USER",
-    "SHAPEZ_CLI_ALPHA_FTP_PW",
-    "SHAPEZ_CLI_STAGING_FTP_USER",
-    "SHAPEZ_CLI_STAGING_FTP_PW",
-    "SHAPEZ_CLI_LIVE_FTP_USER",
-    "SHAPEZ_CLI_LIVE_FTP_PW",
-];
-
-for (let i = 0; i < envVars.length; ++i) {
-    if (!process.env[envVars[i]]) {
-        console.warn("Please set", envVars[i]);
-        // process.exit(1);
-    }
-}
-
-const baseDir = path.join(__dirname, "..");
-const buildFolder = path.join(baseDir, "build");
-
-const imgres = require("./image-resources");
-imgres.gulptasksImageResources($, gulp, buildFolder);
-
-const css = require("./css");
-css.gulptasksCSS($, gulp, buildFolder, browserSync);
-
-const sounds = require("./sounds");
-sounds.gulptasksSounds($, gulp, buildFolder);
-
-const js = require("./js");
-js.gulptasksJS($, gulp, buildFolder, browserSync);
-
-const html = require("./html");
-html.gulptasksHTML($, gulp, buildFolder, browserSync);
-
-const ftp = require("./ftp");
-ftp.gulptasksFTP($, gulp, buildFolder);
-
-const docs = require("./docs");
-docs.gulptasksDocs($, gulp, buildFolder);
-
-const standalone = require("./standalone");
-standalone.gulptasksStandalone($, gulp, buildFolder);
-
-const translations = require("./translations");
-translations.gulptasksTranslations($, gulp, buildFolder);
-
-// FIXME
-// const cordova = require("./cordova");
-// cordova.gulptasksCordova($, gulp, buildFolder);
-
-/////////////////////  BUILD TASKS  /////////////////////
-
-// Cleans up everything
-gulp.task("utils.cleanBuildFolder", () => {
-    return gulp.src(buildFolder, { read: false, allowEmpty: true }).pipe($.clean({ force: true }));
-});
-gulp.task("utils.cleanBuildTempFolder", () => {
-    return gulp
-        .src(path.join(__dirname, "..", "src", "js", "built-temp"), { read: false, allowEmpty: true })
-        .pipe($.clean({ force: true }));
-});
-
-gulp.task("utils.cleanup", gulp.series("utils.cleanBuildFolder", "utils.cleanBuildTempFolder"));
-
-// Requires no uncomitted files
-gulp.task("utils.requireCleanWorkingTree", cb => {
-    let output = $.trim(execSync("git status -su").toString("ascii")).replace(/\r/gi, "").split("\n");
-
-    // Filter files which are OK to be untracked
-    output = output
-        .map(x => x.replace(/[\r\n]+/gi, ""))
-        .filter(x => x.indexOf(".local.js") < 0)
-        .filter(x => x.length > 0);
-    if (output.length > 0) {
-        console.error("\n\nYou have unstaged changes, please commit everything first!");
-        console.error("Unstaged files:");
-        console.error(output.map(x => "'" + x + "'").join("\n"));
-        process.exit(1);
-    }
-    cb();
-});
-
-gulp.task("utils.copyAdditionalBuildFiles", cb => {
-    const additionalFolder = path.join("additional_build_files");
-    const additionalSrcGlobs = [
-        path.join(additionalFolder, "**/*.*"),
-        path.join(additionalFolder, "**/.*"),
-        path.join(additionalFolder, "**/*"),
-    ];
-
-    return gulp.src(additionalSrcGlobs).pipe(gulp.dest(buildFolder));
-});
-
-// Starts a webserver on the built directory (useful for testing prod build)
-gulp.task("main.webserver", () => {
-    return gulp.src(buildFolder).pipe(
-        $.webserver({
-            livereload: {
-                enable: true,
-            },
-            directoryListing: false,
-            open: true,
-            port: 3005,
-        })
-    );
-});
-
-function serve({ standalone }) {
-    browserSync.init({
-        server: buildFolder,
-        port: 3005,
-        ghostMode: {
-            clicks: false,
-            scroll: false,
-            location: false,
-            forms: false,
-        },
-        logLevel: "info",
-        logPrefix: "BS",
-        online: false,
-        xip: false,
-        notify: false,
-        reloadDebounce: 100,
-        reloadOnRestart: true,
-        watchEvents: ["add", "change"],
-    });
-
-    // Watch .scss files, those trigger a css rebuild
-    gulp.watch(["../src/**/*.scss"], gulp.series("css.dev"));
-
-    // Watch .html files, those trigger a html rebuild
-    gulp.watch("../src/**/*.html", gulp.series(standalone ? "html.standalone-dev" : "html.dev"));
-
-    // Watch sound files
-    // gulp.watch(["../res_raw/sounds/**/*.mp3", "../res_raw/sounds/**/*.wav"], gulp.series("sounds.dev"));
-
-    // Watch translations
-    gulp.watch("../translations/**/*.yaml", gulp.series("translations.convertToJson"));
-
-    gulp.watch(
-        ["../res_raw/sounds/sfx/*.mp3", "../res_raw/sounds/sfx/*.wav"],
-        gulp.series("sounds.sfx", "sounds.copy")
-    );
-    gulp.watch(
-        ["../res_raw/sounds/music/*.mp3", "../res_raw/sounds/music/*.wav"],
-        gulp.series("sounds.music", "sounds.copy")
-    );
-
-    // Watch resource files and copy them on change
-    gulp.watch(imgres.nonImageResourcesGlobs, gulp.series("imgres.copyNonImageResources"));
-    gulp.watch(imgres.imageResourcesGlobs, gulp.series("imgres.copyImageResources"));
-
-    // Watch .atlas files and recompile the atlas on change
-    gulp.watch("../res_built/atlas/*.json", gulp.series("imgres.atlas"));
-
-    // Watch the build folder and reload when anything changed
-    const extensions = ["html", "js", "png", "gif", "jpg", "svg", "mp3", "ico", "woff2", "json"];
-    gulp.watch(extensions.map(ext => path.join(buildFolder, "**", "*." + ext))).on("change", function (path) {
-        return gulp.src(path).pipe(browserSync.reload({ stream: true }));
-    });
-
-    gulp.watch("../src/js/built-temp/*.json").on("change", function (path) {
-        return gulp.src(path).pipe(browserSync.reload({ stream: true }));
-    });
-
-    // Start the webpack watching server (Will never return)
-    if (standalone) {
-        gulp.series("js.standalone-dev.watch")(() => true);
-    } else {
-        gulp.series("js.dev.watch")(() => true);
-    }
-}
-
-/////////////////////  RUNNABLE TASKS  /////////////////////
-
-// Pre and postbuild
-gulp.task("step.baseResources", gulp.series("imgres.allOptimized"));
-gulp.task("step.deleteEmpty", cb => {
-    deleteEmpty.sync(buildFolder);
-    cb();
-});
-
-gulp.task("step.postbuild", gulp.series("imgres.cleanupUnusedCssInlineImages", "step.deleteEmpty"));
-
-// Builds everything (dev)
-gulp.task(
-    "build.dev",
-    gulp.series(
-        "utils.cleanup",
-        "utils.copyAdditionalBuildFiles",
-        "imgres.atlas",
-        "sounds.dev",
-        "imgres.copyImageResources",
-        "imgres.copyNonImageResources",
-        "translations.fullBuild",
-        "css.dev",
-        "html.dev"
-    )
-);
-
-// Builds everything (standalone -dev)
-gulp.task(
-    "build.standalone.dev",
-    gulp.series(
-        "utils.cleanup",
-        "imgres.atlas",
-        "sounds.dev",
-        "imgres.copyImageResources",
-        "imgres.copyNonImageResources",
-        "translations.fullBuild",
-        "js.standalone-dev",
-        "css.dev",
-        "html.standalone-dev"
-    )
-);
-
-// Builds everything (staging)
-gulp.task("step.staging.code", gulp.series("sounds.fullbuild", "translations.fullBuild", "js.staging"));
-gulp.task(
-    "step.staging.mainbuild",
-    gulp.parallel("utils.copyAdditionalBuildFiles", "step.baseResources", "step.staging.code")
-);
-gulp.task("step.staging.all", gulp.series("step.staging.mainbuild", "css.prod", "html.staging"));
-gulp.task("build.staging", gulp.series("utils.cleanup", "step.staging.all", "step.postbuild"));
-
-// Builds everything (prod)
-gulp.task("step.prod.code", gulp.series("sounds.fullbuild", "translations.fullBuild", "js.prod"));
-gulp.task(
-    "step.prod.mainbuild",
-    gulp.parallel("utils.copyAdditionalBuildFiles", "step.baseResources", "step.prod.code")
-);
-gulp.task("step.prod.all", gulp.series("step.prod.mainbuild", "css.prod", "html.prod"));
-gulp.task("build.prod", gulp.series("utils.cleanup", "step.prod.all", "step.postbuild"));
-
-// Builds everything (standalone-beta)
-gulp.task(
-    "step.standalone-beta.code",
-    gulp.series("sounds.fullbuildHQ", "translations.fullBuild", "js.standalone-beta")
-);
-gulp.task("step.standalone-beta.mainbuild", gulp.parallel("step.baseResources", "step.standalone-beta.code"));
-gulp.task(
-    "step.standalone-beta.all",
-    gulp.series("step.standalone-beta.mainbuild", "css.prod-standalone", "html.standalone-beta")
-);
-gulp.task(
-    "build.standalone-beta",
-    gulp.series("utils.cleanup", "step.standalone-beta.all", "step.postbuild")
-);
-
-// Builds everything (standalone-prod)
-gulp.task(
-    "step.standalone-prod.code",
-    gulp.series("sounds.fullbuildHQ", "translations.fullBuild", "js.standalone-prod")
-);
-gulp.task("step.standalone-prod.mainbuild", gulp.parallel("step.baseResources", "step.standalone-prod.code"));
-gulp.task(
-    "step.standalone-prod.all",
-    gulp.series("step.standalone-prod.mainbuild", "css.prod-standalone", "html.standalone-prod")
-);
-gulp.task(
-    "build.standalone-prod",
-    gulp.series("utils.cleanup", "step.standalone-prod.all", "step.postbuild")
-);
-
-// Deploying!
-gulp.task(
-    "main.deploy.alpha",
-    gulp.series("utils.requireCleanWorkingTree", "build.staging", "ftp.upload.alpha")
-);
-gulp.task(
-    "main.deploy.staging",
-    gulp.series("utils.requireCleanWorkingTree", "build.staging", "ftp.upload.staging")
-);
-gulp.task("main.deploy.prod", gulp.series("utils.requireCleanWorkingTree", "build.prod", "ftp.upload.prod"));
-gulp.task("main.deploy.all", gulp.series("main.deploy.staging", "main.deploy.prod"));
-gulp.task("main.standalone", gulp.series("build.standalone-prod", "standalone.package.prod"));
-
-// Live-development
-gulp.task(
-    "main.serveDev",
-    gulp.series("build.dev", () => serve({ standalone: false }))
-);
-gulp.task(
-    "main.serveStandalone",
-    gulp.series("build.standalone.dev", () => serve({ standalone: true }))
-);
-
-gulp.task("default", gulp.series("main.serveDev"));
+/* eslint-disable */
+
+require("colors");
+
+const gulp = require("gulp");
+const browserSync = require("browser-sync").create({});
+const path = require("path");
+const deleteEmpty = require("delete-empty");
+const execSync = require("child_process").execSync;
+
+const lfsOutput = execSync("git lfs install", { encoding: "utf-8" });
+if (!lfsOutput.toLowerCase().includes("git lfs initialized")) {
+    console.error(`
+    Git LFS is not installed, unable to build.
+
+    To install Git LFS on Linux:
+      - Arch:
+        sudo pacman -S git-lfs
+      - Debian/Ubuntu:
+        sudo apt install git-lfs
+
+    For other systems, see:
+    https://github.com/git-lfs/git-lfs/wiki/Installation
+    `);
+    process.exit(1);
+}
+
+// Load other plugins dynamically
+const $ = require("gulp-load-plugins")({
+    scope: ["devDependencies"],
+    pattern: "*",
+});
+
+// Check environment variables
+
+const envVars = [
+    "SHAPEZ_CLI_SERVER_HOST",
+    // "SHAPEZ_CLI_PHONEGAP_KEY",
+    "SHAPEZ_CLI_ALPHA_FTP_USER",
+    "SHAPEZ_CLI_ALPHA_FTP_PW",
+    "SHAPEZ_CLI_STAGING_FTP_USER",
+    "SHAPEZ_CLI_STAGING_FTP_PW",
+    "SHAPEZ_CLI_LIVE_FTP_USER",
+    "SHAPEZ_CLI_LIVE_FTP_PW",
+];
+
+for (let i = 0; i < envVars.length; ++i) {
+    if (!process.env[envVars[i]]) {
+        console.warn("Please set", envVars[i]);
+        // process.exit(1);
+    }
+}
+
+const baseDir = path.join(__dirname, "..");
+const buildFolder = path.join(baseDir, "build");
+
+const imgres = require("./image-resources");
+imgres.gulptasksImageResources($, gulp, buildFolder);
+
+const css = require("./css");
+css.gulptasksCSS($, gulp, buildFolder, browserSync);
+
+const sounds = require("./sounds");
+sounds.gulptasksSounds($, gulp, buildFolder);
+
+const js = require("./js");
+js.gulptasksJS($, gulp, buildFolder, browserSync);
+
+const html = require("./html");
+html.gulptasksHTML($, gulp, buildFolder, browserSync);
+
+const ftp = require("./ftp");
+ftp.gulptasksFTP($, gulp, buildFolder);
+
+const docs = require("./docs");
+docs.gulptasksDocs($, gulp, buildFolder);
+
+const standalone = require("./standalone");
+standalone.gulptasksStandalone($, gulp, buildFolder);
+
+const translations = require("./translations");
+translations.gulptasksTranslations($, gulp, buildFolder);
+
+// FIXME
+// const cordova = require("./cordova");
+// cordova.gulptasksCordova($, gulp, buildFolder);
+
+/////////////////////  BUILD TASKS  /////////////////////
+
+// Cleans up everything
+gulp.task("utils.cleanBuildFolder", () => {
+    return gulp.src(buildFolder, { read: false, allowEmpty: true }).pipe($.clean({ force: true }));
+});
+gulp.task("utils.cleanBuildTempFolder", () => {
+    return gulp
+        .src(path.join(__dirname, "..", "src", "js", "built-temp"), { read: false, allowEmpty: true })
+        .pipe($.clean({ force: true }));
+});
+
+gulp.task("utils.cleanup", gulp.series("utils.cleanBuildFolder", "utils.cleanBuildTempFolder"));
+
+// Requires no uncomitted files
+gulp.task("utils.requireCleanWorkingTree", cb => {
+    let output = $.trim(execSync("git status -su").toString("ascii")).replace(/\r/gi, "").split("\n");
+
+    // Filter files which are OK to be untracked
+    output = output
+        .map(x => x.replace(/[\r\n]+/gi, ""))
+        .filter(x => x.indexOf(".local.js") < 0)
+        .filter(x => x.length > 0);
+    if (output.length > 0) {
+        console.error("\n\nYou have unstaged changes, please commit everything first!");
+        console.error("Unstaged files:");
+        console.error(output.map(x => "'" + x + "'").join("\n"));
+        process.exit(1);
+    }
+    cb();
+});
+
+gulp.task("utils.copyAdditionalBuildFiles", cb => {
+    const additionalFolder = path.join("additional_build_files");
+    const additionalSrcGlobs = [
+        path.join(additionalFolder, "**/*.*"),
+        path.join(additionalFolder, "**/.*"),
+        path.join(additionalFolder, "**/*"),
+    ];
+
+    return gulp.src(additionalSrcGlobs).pipe(gulp.dest(buildFolder));
+});
+
+// Starts a webserver on the built directory (useful for testing prod build)
+gulp.task("main.webserver", () => {
+    return gulp.src(buildFolder).pipe(
+        $.webserver({
+            livereload: {
+                enable: true,
+            },
+            directoryListing: false,
+            open: true,
+            port: 3005,
+        })
+    );
+});
+
+function serve({ standalone }) {
+    browserSync.init({
+        server: buildFolder,
+        port: 3005,
+        ghostMode: {
+            clicks: false,
+            scroll: false,
+            location: false,
+            forms: false,
+        },
+        logLevel: "info",
+        logPrefix: "BS",
+        online: false,
+        xip: false,
+        notify: false,
+        reloadDebounce: 100,
+        reloadOnRestart: true,
+        watchEvents: ["add", "change"],
+    });
+
+    // Watch .scss files, those trigger a css rebuild
+    gulp.watch(["../src/**/*.scss"], gulp.series("css.dev"));
+
+    // Watch .html files, those trigger a html rebuild
+    gulp.watch("../src/**/*.html", gulp.series(standalone ? "html.standalone-dev" : "html.dev"));
+
+    // Watch sound files
+    // gulp.watch(["../res_raw/sounds/**/*.mp3", "../res_raw/sounds/**/*.wav"], gulp.series("sounds.dev"));
+
+    // Watch translations
+    gulp.watch("../translations/**/*.yaml", gulp.series("translations.convertToJson"));
+
+    gulp.watch(
+        ["../res_raw/sounds/sfx/*.mp3", "../res_raw/sounds/sfx/*.wav"],
+        gulp.series("sounds.sfx", "sounds.copy")
+    );
+    gulp.watch(
+        ["../res_raw/sounds/music/*.mp3", "../res_raw/sounds/music/*.wav"],
+        gulp.series("sounds.music", "sounds.copy")
+    );
+
+    // Watch resource files and copy them on change
+    gulp.watch(imgres.nonImageResourcesGlobs, gulp.series("imgres.copyNonImageResources"));
+    gulp.watch(imgres.imageResourcesGlobs, gulp.series("imgres.copyImageResources"));
+
+    // Watch .atlas files and recompile the atlas on change
+    gulp.watch("../res_built/atlas/*.json", gulp.series("imgres.atlas"));
+
+    // Watch the build folder and reload when anything changed
+    const extensions = ["html", "js", "png", "gif", "jpg", "svg", "mp3", "ico", "woff2", "json"];
+    gulp.watch(extensions.map(ext => path.join(buildFolder, "**", "*." + ext))).on("change", function (path) {
+        return gulp.src(path).pipe(browserSync.reload({ stream: true }));
+    });
+
+    gulp.watch("../src/js/built-temp/*.json").on("change", function (path) {
+        return gulp.src(path).pipe(browserSync.reload({ stream: true }));
+    });
+
+    // Start the webpack watching server (Will never return)
+    if (standalone) {
+        gulp.series("js.standalone-dev.watch")(() => true);
+    } else {
+        gulp.series("js.dev.watch")(() => true);
+    }
+}
+
+/////////////////////  RUNNABLE TASKS  /////////////////////
+
+// Pre and postbuild
+gulp.task("step.baseResources", gulp.series("imgres.allOptimized"));
+gulp.task("step.deleteEmpty", cb => {
+    deleteEmpty.sync(buildFolder);
+    cb();
+});
+
+gulp.task("step.postbuild", gulp.series("imgres.cleanupUnusedCssInlineImages", "step.deleteEmpty"));
+
+// Builds everything (dev)
+gulp.task(
+    "build.dev",
+    gulp.series(
+        "utils.cleanup",
+        "utils.copyAdditionalBuildFiles",
+        "imgres.atlas",
+        "sounds.dev",
+        "imgres.copyImageResources",
+        "imgres.copyNonImageResources",
+        "translations.fullBuild",
+        "css.dev",
+        "html.dev"
+    )
+);
+
+// Builds everything (standalone -dev)
+gulp.task(
+    "build.standalone.dev",
+    gulp.series(
+        "utils.cleanup",
+        "imgres.atlas",
+        "sounds.dev",
+        "imgres.copyImageResources",
+        "imgres.copyNonImageResources",
+        "translations.fullBuild",
+        "js.standalone-dev",
+        "css.dev",
+        "html.standalone-dev"
+    )
+);
+
+// Builds everything (staging)
+gulp.task("step.staging.code", gulp.series("sounds.fullbuild", "translations.fullBuild", "js.staging"));
+gulp.task(
+    "step.staging.mainbuild",
+    gulp.parallel("utils.copyAdditionalBuildFiles", "step.baseResources", "step.staging.code")
+);
+gulp.task("step.staging.all", gulp.series("step.staging.mainbuild", "css.prod", "html.staging"));
+gulp.task("build.staging", gulp.series("utils.cleanup", "step.staging.all", "step.postbuild"));
+
+// Builds everything (prod)
+gulp.task("step.prod.code", gulp.series("sounds.fullbuild", "translations.fullBuild", "js.prod"));
+gulp.task(
+    "step.prod.mainbuild",
+    gulp.parallel("utils.copyAdditionalBuildFiles", "step.baseResources", "step.prod.code")
+);
+gulp.task("step.prod.all", gulp.series("step.prod.mainbuild", "css.prod", "html.prod"));
+gulp.task("build.prod", gulp.series("utils.cleanup", "step.prod.all", "step.postbuild"));
+
+// Builds everything (standalone-beta)
+gulp.task(
+    "step.standalone-beta.code",
+    gulp.series("sounds.fullbuildHQ", "translations.fullBuild", "js.standalone-beta")
+);
+gulp.task("step.standalone-beta.mainbuild", gulp.parallel("step.baseResources", "step.standalone-beta.code"));
+gulp.task(
+    "step.standalone-beta.all",
+    gulp.series("step.standalone-beta.mainbuild", "css.prod-standalone", "html.standalone-beta")
+);
+gulp.task(
+    "build.standalone-beta",
+    gulp.series("utils.cleanup", "step.standalone-beta.all", "step.postbuild")
+);
+
+// Builds everything (standalone-prod)
+gulp.task(
+    "step.standalone-prod.code",
+    gulp.series("sounds.fullbuildHQ", "translations.fullBuild", "js.standalone-prod")
+);
+gulp.task("step.standalone-prod.mainbuild", gulp.parallel("step.baseResources", "step.standalone-prod.code"));
+gulp.task(
+    "step.standalone-prod.all",
+    gulp.series("step.standalone-prod.mainbuild", "css.prod-standalone", "html.standalone-prod")
+);
+gulp.task(
+    "build.standalone-prod",
+    gulp.series("utils.cleanup", "step.standalone-prod.all", "step.postbuild")
+);
+
+// Deploying!
+gulp.task(
+    "main.deploy.alpha",
+    gulp.series("utils.requireCleanWorkingTree", "build.staging", "ftp.upload.alpha")
+);
+gulp.task(
+    "main.deploy.staging",
+    gulp.series("utils.requireCleanWorkingTree", "build.staging", "ftp.upload.staging")
+);
+gulp.task("main.deploy.prod", gulp.series("utils.requireCleanWorkingTree", "build.prod", "ftp.upload.prod"));
+gulp.task("main.deploy.all", gulp.series("main.deploy.staging", "main.deploy.prod"));
+gulp.task("main.standalone", gulp.series("build.standalone-prod", "standalone.package.prod"));
+
+// Live-development
+gulp.task(
+    "main.serveDev",
+    gulp.series("build.dev", () => serve({ standalone: false }))
+);
+gulp.task(
+    "main.serveStandalone",
+    gulp.series("build.standalone.dev", () => serve({ standalone: true }))
+);
+
+gulp.task("default", gulp.series("main.serveDev"));
--- a/gulp/html.js
+++ b/gulp/html.js
@ -1,283 +1,301 @@
-const buildUtils = require("./buildutils");
-const fs = require("fs");
-const path = require("path");
-const crypto = require("crypto");
-
-function computeIntegrityHash(fullPath, algorithm = "sha256") {
-    const file = fs.readFileSync(fullPath);
-    const hash = crypto.createHash(algorithm).update(file).digest("base64");
-    return algorithm + "-" + hash;
-}
-
-function gulptasksHTML($, gulp, buildFolder) {
-    const commitHash = buildUtils.getRevision();
-    async function buildHtml(
-        apiUrl,
-        { analytics = false, standalone = false, app = false, integrity = true, enableCachebust = true }
-    ) {
-        function cachebust(url) {
-            if (enableCachebust) {
-                return buildUtils.cachebust(url, commitHash);
-            }
-            return url;
-        }
-
-        const hasLocalFiles = standalone || app;
-
-        return gulp
-            .src("../src/html/" + (standalone ? "index.standalone.html" : "index.html"))
-            .pipe(
-                $.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);
-
-                    // 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);
-                    }
-
-                    // 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);
-
-                        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"];
-
-                        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 loadingCss = `
-                    @font-face {
-                        font-family: 'GameFont';
-                        font-style: normal;
-                        font-weight: normal;
-                        font-display: swap;
-                        src: url('${cachebust("res/fonts/GameFont.woff2")}') format('woff2');
-                    }
-
-                    #ll_fp {
-                        font-family: GameFont;
-                        font-size: 14px;
-                        position: fixed;
-                        z-index: -1;
-                        top: 0;
-                        left: 0;
-                        opacity: 0.05;
-                    }
-
-                    #ll_p {
-                        display: flex;
-                        position: fixed;
-                        z-index: 99999;
-                        top: 0;
-                        left: 0;
-                        right: 0;
-                        bottom: 0;
-                        justify-content:
-                        center;
-                        align-items: center;
-                    }
-
-                    #ll_p > div {
-                        position: absolute;
-                        text-align: center;
-                        bottom: 40px;
-                        left: 20px;
-                        right: 20px;
-                        color: #393747;
-                        font-family: 'GameFont', sans-serif;
-                        font-size: 20px;
-                    }
-
-                    #ll_p > span {
-                        width: 60px;
-                        height: 60px;
-                        display: inline-flex;
-                        background: center center / contain no-repeat;
-                        ${loadingSvg};
-                    }
-                `;
-
-                    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";
-                        } 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);
-                    }
-
-                    const bodyContent = `
-                <div id="ll_fp">_</div>
-                <div id="ll_p">
-                    <span></span>
-                    <div>${hasLocalFiles ? "Loading" : "Downloading"} Game Files</div >
-                </div >
-                `;
-
-                    document.body.innerHTML = bodyContent;
-                })
-            )
-            .pipe(
-                $.htmlmin({
-                    caseSensitive: true,
-                    collapseBooleanAttributes: true,
-                    collapseInlineTagWhitespace: true,
-                    collapseWhitespace: true,
-                    preserveLineBreaks: true,
-                    minifyJS: true,
-                    minifyCSS: true,
-                    quoteCharacter: '"',
-                    useShortDoctype: true,
-                })
-            )
-            .pipe($.htmlBeautify())
-            .pipe($.rename("index.html"))
-            .pipe(gulp.dest(buildFolder));
-    }
-
-    gulp.task("html.dev", () => {
-        return buildHtml("http://localhost:5005", {
-            analytics: false,
-            integrity: false,
-            enableCachebust: false,
-        });
-    });
-
-    gulp.task("html.staging", () => {
-        return buildHtml("https://api-staging.shapez.io", {
-            analytics: true,
-        });
-    });
-
-    gulp.task("html.prod", () => {
-        return buildHtml("https://analytics.shapez.io", {
-            analytics: true,
-        });
-    });
-
-    gulp.task("html.standalone-dev", () => {
-        return buildHtml("https://localhost:5005", {
-            analytics: false,
-            standalone: true,
-            integrity: false,
-            enableCachebust: false,
-        });
-    });
-
-    gulp.task("html.standalone-beta", () => {
-        return buildHtml("https://api-staging.shapez.io", {
-            analytics: false,
-            standalone: true,
-            enableCachebust: false,
-        });
-    });
-
-    gulp.task("html.standalone-prod", () => {
-        return buildHtml("https://analytics.shapez.io", {
-            analytics: false,
-            standalone: true,
-            enableCachebust: false,
-        });
-    });
-}
-
-module.exports = {
-    gulptasksHTML,
-};
+const buildUtils = require("./buildutils");
+const fs = require("fs");
+const path = require("path");
+const crypto = require("crypto");
+
+function computeIntegrityHash(fullPath, algorithm = "sha256") {
+    const file = fs.readFileSync(fullPath);
+    const hash = crypto.createHash(algorithm).update(file).digest("base64");
+    return algorithm + "-" + hash;
+}
+
+function gulptasksHTML($, gulp, buildFolder) {
+    const commitHash = buildUtils.getRevision();
+    async function buildHtml(
+        apiUrl,
+        { analytics = false, standalone = false, app = false, integrity = true, enableCachebust = true }
+    ) {
+        function cachebust(url) {
+            if (enableCachebust) {
+                return buildUtils.cachebust(url, commitHash);
+            }
+            return url;
+        }
+
+        const hasLocalFiles = standalone || app;
+
+        return gulp
+            .src("../src/html/" + (standalone ? "index.standalone.html" : "index.html"))
+            .pipe(
+                $.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);
+
+                        // 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 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");
+                            cdv.src = "cordova.js";
+                            cdv.type = "text/javascript";
+                            document.head.appendChild(cdv);
+                        }
+
+                        // 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);
+
+                            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"];
+
+                            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 loadingCss = `
+                    @font-face {
+                        font-family: 'GameFont';
+                        font-style: normal;
+                        font-weight: normal;
+                        font-display: swap;
+                        src: url('${cachebust("res/fonts/GameFont.woff2")}') format('woff2');
+                    }
+
+                    #ll_fp {
+                        font-family: GameFont;
+                        font-size: 14px;
+                        position: fixed;
+                        z-index: -1;
+                        top: 0;
+                        left: 0;
+                        opacity: 0.05;
+                    }
+
+                    #ll_p {
+                        display: flex;
+                        position: fixed;
+                        z-index: 99999;
+                        top: 0;
+                        left: 0;
+                        right: 0;
+                        bottom: 0;
+                        justify-content:
+                        center;
+                        align-items: center;
+                    }
+
+                    #ll_p > div {
+                        position: absolute;
+                        text-align: center;
+                        bottom: 40px;
+                        left: 20px;
+                        right: 20px;
+                        color: #393747;
+                        font-family: 'GameFont', sans-serif;
+                        font-size: 20px;
+                    }
+
+                    #ll_p > span {
+                        width: 60px;
+                        height: 60px;
+                        display: inline-flex;
+                        background: center center / contain no-repeat;
+                        ${loadingSvg};
+                    }
+                `;
+
+                        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";
+                            } 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);
+                        }
+
+                        const bodyContent = `
+                <div id="ll_fp">_</div>
+                <div id="ll_p">
+                    <span></span>
+                    <div>${hasLocalFiles ? "Loading" : "Downloading"} Game Files</div >
+                </div >
+                `;
+
+                        document.body.innerHTML = bodyContent;
+                    }
+                )
+            )
+            .pipe(
+                $.htmlmin({
+                    caseSensitive: true,
+                    collapseBooleanAttributes: true,
+                    collapseInlineTagWhitespace: true,
+                    collapseWhitespace: true,
+                    preserveLineBreaks: true,
+                    minifyJS: true,
+                    minifyCSS: true,
+                    quoteCharacter: '"',
+                    useShortDoctype: true,
+                })
+            )
+            .pipe($.htmlBeautify())
+            .pipe($.rename("index.html"))
+            .pipe(gulp.dest(buildFolder));
+    }
+
+    gulp.task("html.dev", () => {
+        return buildHtml("http://localhost:5005", {
+            analytics: false,
+            integrity: false,
+            enableCachebust: false,
+        });
+    });
+
+    gulp.task("html.staging", () => {
+        return buildHtml("https://api-staging.shapez.io", {
+            analytics: true,
+        });
+    });
+
+    gulp.task("html.prod", () => {
+        return buildHtml("https://analytics.shapez.io", {
+            analytics: true,
+        });
+    });
+
+    gulp.task("html.standalone-dev", () => {
+        return buildHtml("https://localhost:5005", {
+            analytics: false,
+            standalone: true,
+            integrity: false,
+            enableCachebust: false,
+        });
+    });
+
+    gulp.task("html.standalone-beta", () => {
+        return buildHtml("https://api-staging.shapez.io", {
+            analytics: false,
+            standalone: true,
+            enableCachebust: false,
+        });
+    });
+
+    gulp.task("html.standalone-prod", () => {
+        return buildHtml("https://analytics.shapez.io", {
+            analytics: false,
+            standalone: true,
+            enableCachebust: false,
+        });
+    });
+}
+
+module.exports = {
+    gulptasksHTML,
+};
--- a/gulp/package.json
+++ b/gulp/package.json
@ -1,110 +1,111 @@
-{
-    "name": "builder",
-    "version": "1.0.0",
-    "description": "builder",
-    "private": true,
-    "scripts": {
-        "gulp": "gulp"
-    },
-    "author": "tobspr",
-    "license": "private",
-    "dependencies": {
-        "@babel/core": "^7.9.0",
-        "@babel/plugin-transform-block-scoping": "^7.4.4",
-        "@babel/plugin-transform-classes": "^7.5.5",
-        "@babel/preset-env": "^7.5.4",
-        "@types/cordova": "^0.0.34",
-        "@types/filesystem": "^0.0.29",
-        "@types/node": "^12.7.5",
-        "ajv": "^6.10.2",
-        "audiosprite": "^0.7.2",
-        "babel-loader": "^8.1.0",
-        "browser-sync": "^2.26.10",
-        "circular-dependency-plugin": "^5.0.2",
-        "circular-json": "^0.5.9",
-        "clipboard-copy": "^3.1.0",
-        "colors": "^1.3.3",
-        "core-js": "3",
-        "crypto": "^1.0.1",
-        "cssnano-preset-advanced": "^4.0.7",
-        "delete-empty": "^3.0.0",
-        "email-validator": "^2.0.4",
-        "eslint": "^5.9.0",
-        "fastdom": "^1.0.9",
-        "flatted": "^2.0.1",
-        "fs-extra": "^8.1.0",
-        "gulp-audiosprite": "^1.1.0",
-        "howler": "^2.1.2",
-        "html-loader": "^0.5.5",
-        "ignore-loader": "^0.1.2",
-        "lz-string": "^1.4.4",
-        "markdown-loader": "^5.1.0",
-        "node-sri": "^1.1.1",
-        "phonegap-plugin-mobile-accessibility": "^1.0.5",
-        "promise-polyfill": "^8.1.0",
-        "query-string": "^6.8.1",
-        "rusha": "^0.8.13",
-        "serialize-error": "^3.0.0",
-        "strictdom": "^1.0.1",
-        "string-replace-webpack-plugin": "^0.1.3",
-        "terser-webpack-plugin": "^1.1.0",
-        "through2": "^3.0.1",
-        "uglify-template-string-loader": "^1.1.0",
-        "unused-files-webpack-plugin": "^3.4.0",
-        "webpack": "^4.43.0",
-        "webpack-cli": "^3.1.0",
-        "webpack-deep-scope-plugin": "^1.6.0",
-        "webpack-plugin-replace": "^1.1.1",
-        "webpack-strip-block": "^0.2.0",
-        "whatwg-fetch": "^3.0.0",
-        "worker-loader": "^2.0.0"
-    },
-    "devDependencies": {
-        "autoprefixer": "^9.4.3",
-        "babel-plugin-closure-elimination": "^1.3.0",
-        "babel-plugin-console-source": "^2.0.2",
-        "babel-plugin-danger-remove-unused-import": "^1.1.2",
-        "css-mqpacker": "^7.0.0",
-        "cssnano": "^4.1.10",
-        "electron-packager": "^14.0.6",
-        "faster.js": "^1.1.0",
-        "glob": "^7.1.3",
-        "gulp": "^4.0.2",
-        "gulp-cache": "^1.1.3",
-        "gulp-cached": "^1.1.1",
-        "gulp-clean": "^0.4.0",
-        "gulp-dom": "^1.0.0",
-        "gulp-flatten": "^0.4.0",
-        "gulp-fluent-ffmpeg": "^2.0.0",
-        "gulp-html-beautify": "^1.0.1",
-        "gulp-htmlmin": "^5.0.1",
-        "gulp-if": "^3.0.0",
-        "gulp-imagemin": "^7.1.0",
-        "gulp-load-plugins": "^2.0.3",
-        "gulp-phonegap-build": "^0.1.5",
-        "gulp-plumber": "^1.2.1",
-        "gulp-pngquant": "^1.0.13",
-        "gulp-postcss": "^8.0.0",
-        "gulp-rename": "^2.0.0",
-        "gulp-sass": "^4.1.0",
-        "gulp-sass-lint": "^1.4.0",
-        "gulp-sftp": "git+https://git@github.com/webksde/gulp-sftp",
-        "gulp-terser": "^1.2.0",
-        "gulp-webserver": "^0.9.1",
-        "gulp-yaml": "^2.0.4",
-        "imagemin-gifsicle": "^7.0.0",
-        "imagemin-jpegtran": "^7.0.0",
-        "imagemin-pngquant": "^9.0.0",
-        "jimp": "^0.6.1",
-        "js-yaml": "^3.13.1",
-        "postcss-assets": "^5.0.0",
-        "postcss-preset-env": "^6.5.0",
-        "postcss-round-subpixels": "^1.2.0",
-        "postcss-unprefix": "^2.1.3",
-        "sass-unused": "^0.3.0",
-        "strip-json-comments": "^3.0.1",
-        "trim": "^0.0.1",
-        "webpack-stream": "^5.2.1",
-        "yaml-loader": "^0.6.0"
-    }
-}
+{
+    "name": "builder",
+    "version": "1.0.0",
+    "description": "builder",
+    "private": true,
+    "scripts": {
+        "gulp": "gulp"
+    },
+    "author": "tobspr",
+    "license": "private",
+    "dependencies": {
+        "@babel/core": "^7.9.0",
+        "@babel/plugin-transform-block-scoping": "^7.4.4",
+        "@babel/plugin-transform-classes": "^7.5.5",
+        "@babel/preset-env": "^7.5.4",
+        "@types/cordova": "^0.0.34",
+        "@types/filesystem": "^0.0.29",
+        "@types/node": "^12.7.5",
+        "ajv": "^6.10.2",
+        "audiosprite": "^0.7.2",
+        "babel-loader": "^8.1.0",
+        "browser-sync": "^2.26.10",
+        "circular-dependency-plugin": "^5.0.2",
+        "circular-json": "^0.5.9",
+        "clipboard-copy": "^3.1.0",
+        "colors": "^1.3.3",
+        "core-js": "3",
+        "crypto": "^1.0.1",
+        "cssnano-preset-advanced": "^4.0.7",
+        "delete-empty": "^3.0.0",
+        "email-validator": "^2.0.4",
+        "eslint": "^5.9.0",
+        "fastdom": "^1.0.9",
+        "flatted": "^2.0.1",
+        "fs-extra": "^8.1.0",
+        "gulp-audiosprite": "^1.1.0",
+        "howler": "^2.1.2",
+        "html-loader": "^0.5.5",
+        "ignore-loader": "^0.1.2",
+        "lz-string": "^1.4.4",
+        "markdown-loader": "^5.1.0",
+        "node-sri": "^1.1.1",
+        "phonegap-plugin-mobile-accessibility": "^1.0.5",
+        "promise-polyfill": "^8.1.0",
+        "query-string": "^6.8.1",
+        "rusha": "^0.8.13",
+        "serialize-error": "^3.0.0",
+        "strictdom": "^1.0.1",
+        "string-replace-webpack-plugin": "^0.1.3",
+        "terser-webpack-plugin": "^1.1.0",
+        "through2": "^3.0.1",
+        "uglify-template-string-loader": "^1.1.0",
+        "unused-files-webpack-plugin": "^3.4.0",
+        "webpack": "^4.43.0",
+        "webpack-cli": "^3.1.0",
+        "webpack-deep-scope-plugin": "^1.6.0",
+        "webpack-plugin-replace": "^1.1.1",
+        "webpack-strip-block": "^0.2.0",
+        "whatwg-fetch": "^3.0.0",
+        "worker-loader": "^2.0.0"
+    },
+    "devDependencies": {
+        "autoprefixer": "^9.4.3",
+        "babel-plugin-closure-elimination": "^1.3.0",
+        "babel-plugin-console-source": "^2.0.2",
+        "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": "^4.0.2",
+        "gulp-cache": "^1.1.3",
+        "gulp-cached": "^1.1.1",
+        "gulp-clean": "^0.4.0",
+        "gulp-dom": "^1.0.0",
+        "gulp-flatten": "^0.4.0",
+        "gulp-fluent-ffmpeg": "^2.0.0",
+        "gulp-html-beautify": "^1.0.1",
+        "gulp-htmlmin": "^5.0.1",
+        "gulp-if": "^3.0.0",
+        "gulp-imagemin": "^7.1.0",
+        "gulp-load-plugins": "^2.0.3",
+        "gulp-phonegap-build": "^0.1.5",
+        "gulp-plumber": "^1.2.1",
+        "gulp-pngquant": "^1.0.13",
+        "gulp-postcss": "^8.0.0",
+        "gulp-rename": "^2.0.0",
+        "gulp-sass": "^4.1.0",
+        "gulp-sass-lint": "^1.4.0",
+        "gulp-sftp": "git+https://git@github.com/webksde/gulp-sftp",
+        "gulp-terser": "^1.2.0",
+        "gulp-webserver": "^0.9.1",
+        "gulp-yaml": "^2.0.4",
+        "imagemin-gifsicle": "^7.0.0",
+        "imagemin-jpegtran": "^7.0.0",
+        "imagemin-pngquant": "^9.0.0",
+        "jimp": "^0.6.1",
+        "js-yaml": "^3.13.1",
+        "postcss-assets": "^5.0.0",
+        "postcss-preset-env": "^6.5.0",
+        "postcss-round-subpixels": "^1.2.0",
+        "postcss-unprefix": "^2.1.3",
+        "sass-unused": "^0.3.0",
+        "strip-json-comments": "^3.0.1",
+        "trim": "^0.0.1",
+        "webpack-stream": "^5.2.1",
+        "yaml-loader": "^0.6.0"
+    }
+}
--- a/gulp/sounds.js
+++ b/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,
                    }
                )
            )
--- a/gulp/yarn.lock
+++ b/gulp/yarn.lock
--- a/res/ui/building_icons/balancer.png
+++ b/res/ui/building_icons/balancer.png
--- a/res/ui/building_icons/belt.png
+++ b/res/ui/building_icons/belt.png
--- a/res/ui/building_icons/constant_signal.png
+++ b/res/ui/building_icons/constant_signal.png
--- a/res/ui/building_icons/cutter.png
+++ b/res/ui/building_icons/cutter.png
--- a/res/ui/building_icons/display.png
+++ b/res/ui/building_icons/display.png
--- a/res/ui/building_icons/filter.png
+++ b/res/ui/building_icons/filter.png
--- a/res/ui/building_icons/lever.png
+++ b/res/ui/building_icons/lever.png
--- a/res/ui/building_icons/logic_gate.png
+++ b/res/ui/building_icons/logic_gate.png
--- a/res/ui/building_icons/miner.png
+++ b/res/ui/building_icons/miner.png
--- a/res/ui/building_icons/mixer.png
+++ b/res/ui/building_icons/mixer.png
--- a/res/ui/building_icons/painter.png
+++ b/res/ui/building_icons/painter.png
--- a/res/ui/building_icons/reader.png
+++ b/res/ui/building_icons/reader.png
--- a/res/ui/building_icons/rotater.png
+++ b/res/ui/building_icons/rotater.png
--- a/res/ui/building_icons/splitter.png
+++ b/res/ui/building_icons/splitter.png
--- a/res/ui/building_icons/stacker.png
+++ b/res/ui/building_icons/stacker.png
--- a/res/ui/building_icons/storage.png
+++ b/res/ui/building_icons/storage.png
--- a/res/ui/building_icons/trash.png
+++ b/res/ui/building_icons/trash.png
--- a/res/ui/building_icons/underground_belt.png
+++ b/res/ui/building_icons/underground_belt.png
--- a/res/ui/building_icons/virtual_processor.png
+++ b/res/ui/building_icons/virtual_processor.png
--- a/res/ui/building_icons/wire.png
+++ b/res/ui/building_icons/wire.png
--- a/res/ui/building_icons/wire_tunnel.png
+++ b/res/ui/building_icons/wire_tunnel.png
--- a/res/ui/building_tutorials/splitter-compact.png
+++ b/res/ui/building_tutorials/splitter-compact.png
--- a/res/ui/building_tutorials/balancer-splitter.png
+++ b/res/ui/building_tutorials/balancer-splitter.png
--- a/res/ui/building_tutorials/balancer.png
+++ b/res/ui/building_tutorials/balancer.png
--- a/res/ui/building_tutorials/constant_signal.png
+++ b/res/ui/building_tutorials/constant_signal.png
--- a/res/ui/building_tutorials/display.png
+++ b/res/ui/building_tutorials/display.png
--- a/res/ui/building_tutorials/lever.png
+++ b/res/ui/building_tutorials/lever.png
--- a/res/ui/building_tutorials/reader.png
+++ b/res/ui/building_tutorials/reader.png
--- a/res/ui/building_tutorials/rotater-ccw.png
+++ b/res/ui/building_tutorials/rotater-ccw.png
--- a/res/ui/building_tutorials/rotater-fl.png
+++ b/res/ui/building_tutorials/rotater-fl.png
--- a/res/ui/building_tutorials/rotater-rotate180.png
+++ b/res/ui/building_tutorials/rotater-rotate180.png
--- a/res/ui/building_tutorials/rotater.png
+++ b/res/ui/building_tutorials/rotater.png
--- a/res/ui/building_tutorials/splitter-compact-inverse.png
+++ b/res/ui/building_tutorials/splitter-compact-inverse.png
--- a/res/ui/building_tutorials/storage.png
+++ b/res/ui/building_tutorials/storage.png
--- a/res/ui/building_tutorials/trash-storage.png
+++ b/res/ui/building_tutorials/trash-storage.png
--- a/res/ui/icons/delete.png
+++ b/res/ui/icons/delete.png
--- a/res/ui/icons/download.png
+++ b/res/ui/icons/download.png
--- a/res/ui/icons/enum_selector_white.png
+++ b/res/ui/icons/enum_selector_white.png
--- a/res/ui/icons/main_menu_exit.png
+++ b/res/ui/icons/main_menu_exit.png
--- a/res/ui/icons/main_menu_settings.png
+++ b/res/ui/icons/main_menu_settings.png
--- a/res/ui/icons/save.png
+++ b/res/ui/icons/save.png
--- a/res/ui/icons/settings_menu_exit.png
+++ b/res/ui/icons/settings_menu_exit.png
--- a/res/ui/icons/settings_menu_play.png
+++ b/res/ui/icons/settings_menu_play.png
--- a/res/ui/icons/settings_menu_settings.png
+++ b/res/ui/icons/settings_menu_settings.png
--- a/res/ui/icons/shop.png
+++ b/res/ui/icons/shop.png
--- a/res/ui/icons/shop_active.png
+++ b/res/ui/icons/shop_active.png
--- a/res/ui/icons/statistics.png
+++ b/res/ui/icons/statistics.png
--- a/res/ui/icons/toggle_unit.png
+++ b/res/ui/icons/toggle_unit.png
--- a/res_built/atlas/atlas0_hq.json
+++ b/res_built/atlas/atlas0_hq.json
--- a/res_built/atlas/atlas0_hq.png
+++ b/res_built/atlas/atlas0_hq.png
--- a/res_built/atlas/atlas0_lq.json
+++ b/res_built/atlas/atlas0_lq.json
--- a/res_built/atlas/atlas0_lq.png
+++ b/res_built/atlas/atlas0_lq.png
--- a/res_built/atlas/atlas0_mq.json
+++ b/res_built/atlas/atlas0_mq.json
--- a/res_built/atlas/atlas0_mq.png
+++ b/res_built/atlas/atlas0_mq.png
--- a/res_raw/atlas.tps
+++ b/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>
--- a/res_raw/sprites/blueprints/splitter-compact-inverse.png
+++ b/res_raw/sprites/blueprints/splitter-compact-inverse.png
--- a/res_raw/sprites/blueprints/splitter-compact.png
+++ b/res_raw/sprites/blueprints/splitter-compact.png
--- a/res_raw/sprites/blueprints/splitter-compact-merge-inverse.png
+++ b/res_raw/sprites/blueprints/splitter-compact-merge-inverse.png
--- a/res_raw/sprites/blueprints/splitter-compact-merge.png
+++ b/res_raw/sprites/blueprints/splitter-compact-merge.png
--- a/res_raw/sprites/blueprints/balancer.png
+++ b/res_raw/sprites/blueprints/balancer.png
--- a/res_raw/sprites/blueprints/lever.png
+++ b/res_raw/sprites/blueprints/lever.png
--- a/res_raw/sprites/blueprints/logic_gate-transistor.png
+++ b/res_raw/sprites/blueprints/logic_gate-transistor.png
--- a/res_raw/sprites/blueprints/rotater-fl.png
+++ b/res_raw/sprites/blueprints/rotater-fl.png
--- a/res_raw/sprites/blueprints/rotater-rotate180.png
+++ b/res_raw/sprites/blueprints/rotater-rotate180.png
--- a/res_raw/sprites/blueprints/splitter.png
+++ b/res_raw/sprites/blueprints/splitter.png
--- a/res_raw/sprites/blueprints/storage.png
+++ b/res_raw/sprites/blueprints/storage.png
--- a/res_raw/sprites/blueprints/trash-storage.png
+++ b/res_raw/sprites/blueprints/trash-storage.png
--- a/res_raw/sprites/blueprints/virtual_processor-painter.png
+++ b/res_raw/sprites/blueprints/virtual_processor-painter.png
--- a/res_raw/sprites/blueprints/virtual_processor-stacker.png
+++ b/res_raw/sprites/blueprints/virtual_processor-stacker.png
--- a/res_raw/sprites/buildings/splitter-compact-inverse.png
+++ b/res_raw/sprites/buildings/splitter-compact-inverse.png
--- a/res_raw/sprites/buildings/splitter-compact.png
+++ b/res_raw/sprites/buildings/splitter-compact.png
--- a/res_raw/sprites/buildings/splitter-compact-merge-inverse.png
+++ b/res_raw/sprites/buildings/splitter-compact-merge-inverse.png
--- a/res_raw/sprites/buildings/splitter-compact-merge.png
+++ b/res_raw/sprites/buildings/splitter-compact-merge.png
--- a/res_raw/sprites/buildings/balancer.png
+++ b/res_raw/sprites/buildings/balancer.png
--- a/res_raw/sprites/buildings/lever.png
+++ b/res_raw/sprites/buildings/lever.png
--- a/res_raw/sprites/buildings/logic_gate-transistor.png
+++ b/res_raw/sprites/buildings/logic_gate-transistor.png
--- a/res_raw/sprites/buildings/rotater-fl.png
+++ b/res_raw/sprites/buildings/rotater-fl.png
--- a/res_raw/sprites/buildings/rotater-rotate180.png
+++ b/res_raw/sprites/buildings/rotater-rotate180.png
--- a/res_raw/sprites/buildings/splitter.png
+++ b/res_raw/sprites/buildings/splitter.png
--- a/res_raw/sprites/buildings/storage.png
+++ b/res_raw/sprites/buildings/storage.png
--- a/res_raw/sprites/buildings/trash-storage.png
+++ b/res_raw/sprites/buildings/trash-storage.png
--- a/res_raw/sprites/buildings/virtual_processor-painter.png
+++ b/res_raw/sprites/buildings/virtual_processor-painter.png
--- a/res_raw/sprites/buildings/virtual_processor-stacker.png
+++ b/res_raw/sprites/buildings/virtual_processor-stacker.png
--- a/res_raw/sprites/colors/blue.png
+++ b/res_raw/sprites/colors/blue.png
--- a/res_raw/sprites/colors/cyan.png
+++ b/res_raw/sprites/colors/cyan.png
--- a/res_raw/sprites/colors/green.png
+++ b/res_raw/sprites/colors/green.png
--- a/res_raw/sprites/colors/purple.png
+++ b/res_raw/sprites/colors/purple.png
--- a/res_raw/sprites/colors/red.png
+++ b/res_raw/sprites/colors/red.png
--- a/res_raw/sprites/colors/uncolored.png
+++ b/res_raw/sprites/colors/uncolored.png
--- a/res_raw/sprites/colors/white.png
+++ b/res_raw/sprites/colors/white.png
--- a/res_raw/sprites/colors/yellow.png
+++ b/res_raw/sprites/colors/yellow.png
--- a/res_raw/sprites/wires/lever_on.png
+++ b/res_raw/sprites/wires/lever_on.png
--- a/src/css/adinplay.scss
+++ b/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;
+                }
            }
        }
    }
--- a/Show More
+++ b/Show More