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

@@ -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,
+};

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"));

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,
+};

gulp/image-resources.js

@@ -1,148 +1,141 @@
-// @ts-ignore
-const path = require("path");
-
-// Globs for non-ui resources
-const nonImageResourcesGlobs = ["../res/**/*.woff2", "../res/*.ico", "../res/**/*.webm"];
-
-// Globs for ui resources
-const imageResourcesGlobs = ["../res/**/*.png", "../res/**/*.svg", "../res/**/*.jpg", "../res/**/*.gif"];
-
-function gulptasksImageResources($, gulp, buildFolder) {
-    // Lossless options
-    const minifyImagesOptsLossless = () => [
-        $.imageminJpegtran({
-            progressive: true,
-        }),
-        $.imagemin.svgo({}),
-        $.imagemin.optipng({
-            optimizationLevel: 3,
-        }),
-        $.imageminGifsicle({
-            optimizationLevel: 3,
-            colors: 128,
-        }),
-    ];
-
-    // Lossy options
-    const minifyImagesOpts = () => [
-        $.imagemin.mozjpeg({
-            quality: 80,
-            maxMemory: 1024 * 1024 * 8,
-        }),
-        $.imagemin.svgo({}),
-        $.imageminPngquant({
-            speed: 1,
-            strip: true,
-            quality: [0.65, 0.9],
-            dithering: false,
-            verbose: false,
-        }),
-        $.imagemin.optipng({
-            optimizationLevel: 3,
-        }),
-        $.imageminGifsicle({
-            optimizationLevel: 3,
-            colors: 128,
-        }),
-    ];
-
-    // Where the resources folder are
-    const resourcesDestFolder = path.join(buildFolder, "res");
-
-    /**
-     * Determines if an atlas must use lossless compression
-     * @param {string} fname
-     */
-    function fileMustBeLossless(fname) {
-        return fname.indexOf("lossless") >= 0;
-    }
-
-    /////////////// ATLAS /////////////////////
-
-    // 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));
-    });
-
-    // 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]),
-                    $.imagemin(minifyImagesOptsLossless()),
-                    $.imagemin(minifyImagesOpts())
-                )
-            )
-            .pipe(gulp.dest(resourcesDestFolder));
-    });
-
-    //////////////////// RESOURCES //////////////////////
-
-    // Copies all resources which are no ui resources
-    gulp.task("imgres.copyNonImageResources", () => {
-        return gulp
-            .src(nonImageResourcesGlobs)
-            .pipe($.cached("imgres.copyNonImageResources"))
-            .pipe(gulp.dest(resourcesDestFolder));
-    });
-
-    // Copies all ui resources
-    gulp.task("imgres.copyImageResources", () => {
-        return gulp
-            .src(imageResourcesGlobs)
-            .pipe($.cached("copyImageResources"))
-            .pipe(gulp.dest(path.join(resourcesDestFolder)));
-    });
-
-    // Copies all ui resources and optimizes them
-    gulp.task("imgres.copyImageResourcesOptimized", () => {
-        return gulp
-            .src(imageResourcesGlobs)
-            .pipe($.cached("imgres.copyImageResourcesOptimized"))
-            .pipe(
-                $.if(
-                    fname => fileMustBeLossless(fname.history[0]),
-                    $.imagemin(minifyImagesOptsLossless()),
-                    $.imagemin(minifyImagesOpts())
-                )
-            )
-            .pipe(gulp.dest(path.join(resourcesDestFolder)));
-    });
-
-    // Copies all resources and optimizes them
-    gulp.task(
-        "imgres.allOptimized",
-        gulp.parallel(
-            "imgres.atlasOptimized",
-            "imgres.copyNonImageResources",
-            "imgres.copyImageResourcesOptimized"
-        )
-    );
-
-    // Cleans up unused images which are instead inline into the css
-    gulp.task("imgres.cleanupUnusedCssInlineImages", () => {
-        return gulp
-            .src(
-                [
-                    path.join(buildFolder, "res", "ui", "**", "*.png"),
-                    path.join(buildFolder, "res", "ui", "**", "*.jpg"),
-                    path.join(buildFolder, "res", "ui", "**", "*.svg"),
-                    path.join(buildFolder, "res", "ui", "**", "*.gif"),
-                ],
-                { read: false }
-            )
-            .pipe($.if(fname => fname.history[0].indexOf("noinline") < 0, $.clean({ force: true })));
-    });
-}
-
-module.exports = {
-    nonImageResourcesGlobs,
-    imageResourcesGlobs,
-    gulptasksImageResources,
-};
+// @ts-ignore
+const path = require("path");
+
+// Globs for non-ui resources
+const nonImageResourcesGlobs = ["../res/**/*.woff2", "../res/*.ico", "../res/**/*.webm"];
+
+// Globs for ui resources
+const imageResourcesGlobs = ["../res/**/*.png", "../res/**/*.svg", "../res/**/*.jpg", "../res/**/*.gif"];
+
+function gulptasksImageResources($, gulp, buildFolder) {
+    // Lossless options
+    const minifyImagesOptsLossless = () => [
+        $.imageminJpegtran({
+            progressive: true,
+        }),
+        $.imagemin.svgo({}),
+        $.imagemin.optipng({
+            optimizationLevel: 3,
+        }),
+        $.imageminGifsicle({
+            optimizationLevel: 3,
+            colors: 128,
+        }),
+    ];
+
+    // Lossy options
+    const minifyImagesOpts = () => [
+        $.imagemin.mozjpeg({
+            quality: 80,
+            maxMemory: 1024 * 1024 * 8,
+        }),
+        $.imagemin.svgo({}),
+        $.imageminPngquant({
+            speed: 1,
+            strip: true,
+            quality: [0.65, 0.9],
+            dithering: false,
+            verbose: false,
+        }),
+        $.imagemin.optipng({
+            optimizationLevel: 3,
+        }),
+        $.imageminGifsicle({
+            optimizationLevel: 3,
+            colors: 128,
+        }),
+    ];
+
+    // Where the resources folder are
+    const resourcesDestFolder = path.join(buildFolder, "res");
+
+    /**
+     * Determines if an atlas must use lossless compression
+     * @param {string} fname
+     */
+    function fileMustBeLossless(fname) {
+        return fname.indexOf("lossless") >= 0;
+    }
+
+    /////////////// ATLAS /////////////////////
+
+    // Copies the atlas to the final destination
+    gulp.task("imgres.atlas", () => {
+        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(
+                $.if(
+                    fname => fileMustBeLossless(fname.history[0]),
+                    $.imagemin(minifyImagesOptsLossless()),
+                    $.imagemin(minifyImagesOpts())
+                )
+            )
+            .pipe(gulp.dest(resourcesDestFolder));
+    });
+
+    //////////////////// RESOURCES //////////////////////
+
+    // Copies all resources which are no ui resources
+    gulp.task("imgres.copyNonImageResources", () => {
+        return gulp.src(nonImageResourcesGlobs).pipe(gulp.dest(resourcesDestFolder));
+    });
+
+    // Copies all ui resources
+    gulp.task("imgres.copyImageResources", () => {
+        return gulp
+            .src(imageResourcesGlobs)
+
+            .pipe($.cached("imgres.copyImageResources"))
+            .pipe(gulp.dest(path.join(resourcesDestFolder)));
+    });
+
+    // Copies all ui resources and optimizes them
+    gulp.task("imgres.copyImageResourcesOptimized", () => {
+        return gulp
+            .src(imageResourcesGlobs)
+            .pipe(
+                $.if(
+                    fname => fileMustBeLossless(fname.history[0]),
+                    $.imagemin(minifyImagesOptsLossless()),
+                    $.imagemin(minifyImagesOpts())
+                )
+            )
+            .pipe(gulp.dest(path.join(resourcesDestFolder)));
+    });
+
+    // Copies all resources and optimizes them
+    gulp.task(
+        "imgres.allOptimized",
+        gulp.parallel(
+            "imgres.atlasOptimized",
+            "imgres.copyNonImageResources",
+            "imgres.copyImageResourcesOptimized"
+        )
+    );
+
+    // Cleans up unused images which are instead inline into the css
+    gulp.task("imgres.cleanupUnusedCssInlineImages", () => {
+        return gulp
+            .src(
+                [
+                    path.join(buildFolder, "res", "ui", "**", "*.png"),
+                    path.join(buildFolder, "res", "ui", "**", "*.jpg"),
+                    path.join(buildFolder, "res", "ui", "**", "*.svg"),
+                    path.join(buildFolder, "res", "ui", "**", "*.gif"),
+                ],
+                { read: false }
+            )
+            .pipe($.if(fname => fname.history[0].indexOf("noinline") < 0, $.clean({ force: true })));
+    });
+}
+
+module.exports = {
+    nonImageResourcesGlobs,
+    imageResourcesGlobs,
+    gulptasksImageResources,
+};

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"
+    }
+}

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

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

@@ -1,226 +1,212 @@
-/**
- *
- * Run `yarn global add canvas` first
- */
-
-const { createCanvas } = require("canvas");
-const fs = require("fs");
-const path = require("path");
-
-const outputFolder = path.join(__dirname, "..", "wires", "sets");
-
-const dimensions = 192;
-const lineSize = 12;
-const lowerLineSize = 20;
-
-function hexToRGB(h) {
-    let r = 0,
-        g = 0,
-        b = 0;
-
-    // 3 digits
-    if (h.length == 4) {
-        r = "0x" + h[1] + h[1];
-        g = "0x" + h[2] + h[2];
-        b = "0x" + h[3] + h[3];
-
-        // 6 digits
-    } else if (h.length == 7) {
-        r = "0x" + h[1] + h[2];
-        g = "0x" + h[3] + h[4];
-        b = "0x" + h[5] + h[6];
-    }
-
-    return [+r, +g, +b];
-}
-
-function RGBToHSL(r, g, b) {
-    // Make r, g, and b fractions of 1
-    r /= 255;
-    g /= 255;
-    b /= 255;
-
-    // Find greatest and smallest channel values
-    let cmin = Math.min(r, g, b),
-        cmax = Math.max(r, g, b),
-        delta = cmax - cmin,
-        h = 0,
-        s = 0,
-        l = 0;
-    // Calculate hue
-    // No difference
-    if (delta == 0) h = 0;
-    // Red is max
-    else if (cmax == r) h = ((g - b) / delta) % 6;
-    // Green is max
-    else if (cmax == g) h = (b - r) / delta + 2;
-    // Blue is max
-    else h = (r - g) / delta + 4;
-
-    h = Math.round(h * 60);
-
-    // Make negative hues positive behind 360°
-    if (h < 0) h += 360;
-
-    // Calculate lightness
-    l = (cmax + cmin) / 2;
-
-    // Calculate saturation
-    s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
-
-    // Multiply l and s by 100
-    s = +(s * 100).toFixed(1);
-    l = +(l * 100).toFixed(1);
-
-    return [h, s, l];
-}
-
-function HSLToRGB(h, s, l) {
-    // Must be fractions of 1
-    s /= 100;
-    l /= 100;
-
-    let c = (1 - Math.abs(2 * l - 1)) * s,
-        x = c * (1 - Math.abs(((h / 60) % 2) - 1)),
-        m = l - c / 2,
-        r = 0,
-        g = 0,
-        b = 0;
-
-    if (0 <= h && h < 60) {
-        r = c;
-        g = x;
-        b = 0;
-    } else if (60 <= h && h < 120) {
-        r = x;
-        g = c;
-        b = 0;
-    } else if (120 <= h && h < 180) {
-        r = 0;
-        g = c;
-        b = x;
-    } else if (180 <= h && h < 240) {
-        r = 0;
-        g = x;
-        b = c;
-    } else if (240 <= h && h < 300) {
-        r = x;
-        g = 0;
-        b = c;
-    } else if (300 <= h && h < 360) {
-        r = c;
-        g = 0;
-        b = x;
-    }
-    r = Math.round((r + m) * 255);
-    g = Math.round((g + m) * 255);
-    b = Math.round((b + m) * 255);
-
-    return [r, g, b];
-}
-
-async function run() {
-    console.log("Running");
-
-    const variants = {
-        regular: "#25fff2",
-        color: "#eba458",
-        shape: "#8858eb",
-        conflict: "#ff3e3e",
-    };
-
-    const promises = [];
-
-    for (const variantId in variants) {
-        const variantColor = variants[variantId];
-        const variantHSL = RGBToHSL(...hexToRGB(variantColor));
-        const darkenedColor = HSLToRGB(variantHSL[0], variantHSL[1] - 15, variantHSL[2] - 20);
-        const hexDarkenedColor = "rgb(" + darkenedColor.join(",") + ")";
-
-        console.log(variantColor, "->", hexToRGB(variantColor), variantHSL, "->", darkenedColor);
-
-        const parts = {
-            forward: [[0.5, 0, 0.5, 1]],
-            turn: [
-                [0.5, 0.5, 0.5, 1],
-                [0.5, 0.5, 1, 0.5],
-            ],
-            split: [
-                [0.5, 0.5, 0.5, 1],
-                [0, 0.5, 1, 0.5],
-            ],
-            cross: [
-                [0, 0.5, 1, 0.5],
-                [0.5, 0, 0.5, 1],
-            ],
-        };
-
-        for (const partId in parts) {
-            const partLines = parts[partId];
-
-            const canvas = createCanvas(dimensions, dimensions);
-            const context = canvas.getContext("2d");
-            context.quality = "best";
-            context.clearRect(0, 0, dimensions, dimensions);
-
-            context.strokeStyle = hexDarkenedColor;
-            context.lineWidth = lowerLineSize;
-            context.lineCap = "square";
-            context.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();
-            });
-
-            context.strokeStyle = variantColor;
-            context.lineWidth = lineSize;
-
-            // Draw upper lines
-            partLines.forEach(([x1, y1, x2, y2]) => {
-                context.beginPath();
-                context.moveTo(x1 * dimensions, y1 * dimensions);
-                context.lineTo(x2 * dimensions, y2 * dimensions);
-                context.stroke();
-            });
-
-            const out = fs.createWriteStream(path.join(outputFolder, variantId + "_" + partId + ".png"));
-            const stream = canvas.createPNGStream();
-            stream.pipe(out);
-            promises.push(new Promise(resolve => stream.on("end", resolve)));
-        }
-    }
-
-    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!");
-}
-
-run();
+/**
+ *
+ * Run `yarn global add canvas` first
+ */
+
+const { createCanvas } = require("canvas");
+const fs = require("fs");
+const path = require("path");
+
+const outputFolder = path.join(__dirname, "..", "wires", "sets");
+
+const dimensions = 192;
+const lineSize = 14;
+const lowerLineSize = 32;
+
+const variants = {
+    first: "#61ef6f",
+    second: "#5fb2f1",
+    conflict: "#f74c4c",
+};
+
+function hexToRGB(h) {
+    let r = 0,
+        g = 0,
+        b = 0;
+
+    // 3 digits
+    if (h.length == 4) {
+        r = "0x" + h[1] + h[1];
+        g = "0x" + h[2] + h[2];
+        b = "0x" + h[3] + h[3];
+
+        // 6 digits
+    } else if (h.length == 7) {
+        r = "0x" + h[1] + h[2];
+        g = "0x" + h[3] + h[4];
+        b = "0x" + h[5] + h[6];
+    }
+
+    return [+r, +g, +b];
+}
+
+function RGBToHSL(r, g, b) {
+    // Make r, g, and b fractions of 1
+    r /= 255;
+    g /= 255;
+    b /= 255;
+
+    // Find greatest and smallest channel values
+    let cmin = Math.min(r, g, b),
+        cmax = Math.max(r, g, b),
+        delta = cmax - cmin,
+        h = 0,
+        s = 0,
+        l = 0;
+    // Calculate hue
+    // No difference
+    if (delta == 0) h = 0;
+    // Red is max
+    else if (cmax == r) h = ((g - b) / delta) % 6;
+    // Green is max
+    else if (cmax == g) h = (b - r) / delta + 2;
+    // Blue is max
+    else h = (r - g) / delta + 4;
+
+    h = Math.round(h * 60);
+
+    // Make negative hues positive behind 360°
+    if (h < 0) h += 360;
+
+    // Calculate lightness
+    l = (cmax + cmin) / 2;
+
+    // Calculate saturation
+    s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+
+    // Multiply l and s by 100
+    s = +(s * 100).toFixed(1);
+    l = +(l * 100).toFixed(1);
+
+    return [h, s, l];
+}
+
+function HSLToRGB(h, s, l) {
+    // Must be fractions of 1
+    s /= 100;
+    l /= 100;
+
+    let c = (1 - Math.abs(2 * l - 1)) * s,
+        x = c * (1 - Math.abs(((h / 60) % 2) - 1)),
+        m = l - c / 2,
+        r = 0,
+        g = 0,
+        b = 0;
+
+    if (0 <= h && h < 60) {
+        r = c;
+        g = x;
+        b = 0;
+    } else if (60 <= h && h < 120) {
+        r = x;
+        g = c;
+        b = 0;
+    } else if (120 <= h && h < 180) {
+        r = 0;
+        g = c;
+        b = x;
+    } else if (180 <= h && h < 240) {
+        r = 0;
+        g = x;
+        b = c;
+    } else if (240 <= h && h < 300) {
+        r = x;
+        g = 0;
+        b = c;
+    } else if (300 <= h && h < 360) {
+        r = c;
+        g = 0;
+        b = x;
+    }
+    r = Math.round((r + m) * 255);
+    g = Math.round((g + m) * 255);
+    b = Math.round((b + m) * 255);
+
+    return [r, g, b];
+}
+
+async function run() {
+    console.log("Running");
+
+    const promises = [];
+
+    for (const variantId in variants) {
+        const variantColor = variants[variantId];
+        const variantHSL = RGBToHSL(...hexToRGB(variantColor));
+        const darkenedColor = HSLToRGB(variantHSL[0], variantHSL[1] - 15, variantHSL[2] - 20);
+        const hexDarkenedColor = "rgb(" + darkenedColor.join(",") + ")";
+
+        console.log(variantColor, "->", hexToRGB(variantColor), variantHSL, "->", darkenedColor);
+
+        const parts = {
+            forward: [[0.5, 0, 0.5, 1]],
+            turn: [
+                [0.5, 0.5, 0.5, 1],
+                [0.5, 0.5, 1, 0.5],
+            ],
+            split: [
+                [0.5, 0.5, 0.5, 1],
+                [0, 0.5, 1, 0.5],
+            ],
+            cross: [
+                [0, 0.5, 1, 0.5],
+                [0.5, 0, 0.5, 1],
+            ],
+        };
+
+        for (const partId in parts) {
+            const partLines = parts[partId];
+
+            const canvas = createCanvas(dimensions, dimensions);
+            const context = canvas.getContext("2d");
+            context.quality = "best";
+            context.clearRect(0, 0, dimensions, dimensions);
+
+            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]) => {
+                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;
+
+            // Draw upper lines
+            partLines.forEach(([x1, y1, x2, y2]) => {
+                context.beginPath();
+                context.moveTo(x1 * dimensions, y1 * dimensions);
+                context.lineTo(x2 * dimensions, y2 * dimensions);
+                context.stroke();
+            });
+
+            const out = fs.createWriteStream(path.join(outputFolder, variantId + "_" + partId + ".png"));
+            const stream = canvas.createPNGStream();
+            stream.pipe(out);
+            promises.push(new Promise(resolve => stream.on("end", resolve)));
+        }
+    }
+
+    console.log("Waiting for completion");
+    await Promise.all(promises);
+
+    console.log("Done!");
+}
+
+run();