ES modules and config refactor

- switches to ES modules in gulp and src
- uses dengr's webpack configs and package.json, with modifications
- removes gulp/package.json
- removes babel stuff
- removes gulp-load-plugins, instead importing gulp plugins manually
- removes unused and trivial packages
- upgrades packages
- uses path/posix, for gulp
- removes __dirname in favor of relative urls

gulp/.babelrc

@@ -1,3 +0,0 @@
-{
-    "presets": ["es2015"]
-}

gulp/atlas2json.js

@@ -1,13 +1,13 @@
-const { join, resolve } = require("path");
+import { join, resolve } from "path/posix";
-const { readFileSync, readdirSync, writeFileSync } = require("fs");
+import { readFileSync, readdirSync, writeFileSync } from "fs";
 
 const suffixToScale = {
     lq: "0.25",
     mq: "0.5",
-    hq: "0.75"
+    hq: "0.75",
 };
 
-function convert(srcDir) {
+export default function convert(srcDir) {
     const full = resolve(srcDir);
     const srcFiles = readdirSync(full)
         .filter(n => n.endsWith(".atlas"))
@@ -65,7 +65,7 @@ function convert(srcDir) {
                             x: xy[0],
                             y: xy[1],
                             w: size[0],
-                            h: size[1]
+                            h: size[1],
                         },
 
                         // Whether image was rotated
@@ -75,21 +75,21 @@ function convert(srcDir) {
                         // How is the image trimmed
                         spriteSourceSize: {
                             x: offset[0],
-                            y: (orig[1] - size[1]) - offset[1],
+                            y: orig[1] - size[1] - offset[1],
                             w: size[0],
-                            h: size[1]
+                            h: size[1],
                         },
 
                         sourceSize: {
                             w: orig[0],
-                            h: orig[1]
+                            h: orig[1],
-                        }
+                        },
-                    }
+                    };
                 }
 
                 // Simple object that will hold other metadata
                 current = {
-                    name: line
+                    name: line,
                 };
             } else {
                 // Read and set current image metadata
@@ -108,20 +108,14 @@ function convert(srcDir) {
                 format: srcMeta.format,
                 size: {
                     w: atlasSize[0],
-                    h: atlasSize[1]
+                    h: atlasSize[1],
+                },
+                scale: atlasScale.toString(),
             },
-                scale: atlasScale.toString()
-            }
         });
 
         writeFileSync(atlas.replace(".atlas", ".json"), result, {
-            encoding: "utf-8"
+            encoding: "utf-8",
         });
     }
 }
-
-if (require.main == module) {
-    convert(process.argv[2]);
-}
-
-module.exports = { convert };

gulp/babel-es6.config.js

@@ -1,47 +0,0 @@
-module.exports = function (api) {
-    api.cache(true);
-    const presets = [
-        [
-            "@babel/preset-env",
-            {
-                targets: "> 5%",
-                useBuiltIns: "usage",
-                corejs: 3,
-                loose: true,
-                spec: false,
-                modules: "auto",
-            },
-        ],
-    ];
-    const plugins = [
-        "closure-elimination",
-        // var is faster than let and const!
-        [
-            "@babel/plugin-transform-block-scoping",
-            {
-                throwIfClosureRequired: false,
-            },
-        ],
-        [
-            "@babel/plugin-transform-classes",
-            {
-                loose: true,
-            },
-        ],
-    ];
-    return {
-        presets,
-        plugins,
-        highlightCode: true,
-        sourceType: "module",
-        sourceMaps: false,
-        parserOpts: {},
-        only: ["../src/js"],
-        generatorOpts: {
-            retainLines: false,
-            compact: true,
-            minified: true,
-            comments: true,
-        },
-    };
-};

gulp/babel.config.js

@@ -1,55 +0,0 @@
-module.exports = function (api) {
-    api.cache(true);
-    const presets = [
-        [
-            "@babel/preset-env",
-            {
-                // targets: ">0.01%",
-                targets: {
-                    edge: 10,
-                    firefox: 37,
-                    chrome: 24,
-                    safari: 10,
-                    ie: 10,
-                },
-                useBuiltIns: "usage",
-                corejs: 3,
-                loose: true,
-                spec: false,
-                modules: "auto",
-            },
-        ],
-    ];
-    const plugins = [
-        "@babel/plugin-transform-arrow-functions",
-        "closure-elimination",
-        // var is faster than let and const!
-        // [
-        //     "@babel/plugin-transform-block-scoping",
-        //     {
-        //         throwIfClosureRequired: true,
-        //     },
-        // ],
-        [
-            "@babel/plugin-transform-classes",
-            {
-                loose: true,
-            },
-        ],
-    ];
-    return {
-        presets,
-        plugins,
-        highlightCode: true,
-        sourceType: "unambiguous",
-        sourceMaps: false,
-        parserOpts: {},
-        exclude: /(core-js|babel-core|babel-runtime)/,
-        generatorOpts: {
-            retainLines: false,
-            compact: true,
-            minified: true,
-            comments: true,
-        },
-    };
-};

gulp/build_variants.js

@@ -7,7 +7,7 @@
  *  executableName?: string
  * }>}
  */
-const BUILD_VARIANTS = {
+export const BUILD_VARIANTS = {
     "web-localhost": {
         standalone: false,
         environment: "dev",
@@ -26,4 +26,3 @@ const BUILD_VARIANTS = {
         steamAppId: 1318690,
     },
 };
-module.exports = { BUILD_VARIANTS };

gulp/buildutils.js

@@ -1,18 +1,14 @@
-const glob = require("glob");
+import glob from "glob";
-const execSync = require("child_process").execSync;
+import { execSync } from "child_process";
-const trim = require("trim");
+import fs from "fs";
-const fs = require("fs");
+import path from "path/posix";
-const path = require("path");
 
-module.exports = {
+export function getRevision(useLast = false) {
-    getRevision: function (useLast = false) {
+    const commitHash = execSync("git rev-parse --short " + (useLast ? "HEAD^1" : "HEAD")).toString("ascii");
-        const commitHash = execSync("git rev-parse --short " + (useLast ? "HEAD^1" : "HEAD")).toString(
-            "ascii"
-        );
     return commitHash.replace(/^\s+|\s+$/g, "");
-    },
+}
 
-    getAllResourceImages() {
+export function getAllResourceImages() {
     return glob
         .sync("res/**/*.@(png|svg|jpg)", { cwd: ".." })
         .map(f => f.replace(/^res\//gi, ""))
@@ -23,25 +19,24 @@ module.exports = {
             }
             return true;
         });
-    },
+}
 
-    getTag() {
+export function getTag() {
     try {
         return execSync("git describe --tag --exact-match").toString("ascii");
     } catch (e) {
         throw new Error("Current git HEAD is not a version tag");
     }
-    },
+}
 
-    getVersion() {
+export function getVersion() {
-        return trim(fs.readFileSync(path.join(__dirname, "..", "version")).toString());
+    return fs.readFileSync(path.join("..", "version")).toString().trim();
-    },
+}
 
-    /**
+/**
  * @param {string} url
  * @param {string} commitHash
  */
-    cachebust(url, commitHash) {
+export function cachebust(url, commitHash) {
     return "/v/" + commitHash + "/" + url;
-    },
+}
-};

gulp/css.js

@@ -1,17 +1,29 @@
-const path = require("path");
+import path from "path/posix";
-const buildUtils = require("./buildutils");
+import { getRevision, cachebust } from "./buildutils.js";
 
-function gulptasksCSS($, gulp, buildFolder, browserSync) {
+import gulpPostcss from "gulp-postcss";
+import postcssAssets from "postcss-assets";
+import postcssPresetEnv from "postcss-preset-env";
+import postcssRoundSubpixels from "postcss-round-subpixels";
+import postcssCriticalSplit from "postcss-critical-split";
+import cssMqpacker from "css-mqpacker";
+import cssnano from "cssnano";
+import gulpSassLint from "gulp-sass-lint";
+import gulpDartSass from "gulp-dart-sass";
+import gulpPlumber from "gulp-plumber";
+import gulpRename from "gulp-rename";
+
+export default function gulptasksCSS(gulp, buildFolder, browserSync) {
     // The assets plugin copies the files
-    const commitHash = buildUtils.getRevision();
+    const commitHash = getRevision();
-    const postcssAssetsPlugin = cachebust =>
+    const postcssAssetsPlugin = enableCachebust =>
-        $.postcssAssets({
+        postcssAssets({
             loadPaths: [path.join(buildFolder, "res", "ui")],
             basePath: buildFolder,
             baseUrl: ".",
-            cachebuster: cachebust
+            cachebuster: enableCachebust
                 ? (filePath, urlPathname) => ({
-                      pathname: buildUtils.cachebust(urlPathname, commitHash),
+                      pathname: cachebust(urlPathname, commitHash),
                   })
                 : "",
         });
@@ -21,16 +33,16 @@ function gulptasksCSS($, gulp, buildFolder, browserSync) {
         const plugins = [postcssAssetsPlugin(cachebust)];
         if (prod) {
             plugins.unshift(
-                $.postcssPresetEnv({
+                postcssPresetEnv({
                     browsers: ["> 0.1%"],
                 })
             );
 
             plugins.push(
-                $.cssMqpacker({
+                cssMqpacker({
                     sort: true,
                 }),
-                $.cssnano({
+                cssnano({
                     preset: [
                         "advanced",
                         {
@@ -42,7 +54,7 @@ function gulptasksCSS($, gulp, buildFolder, browserSync) {
                         },
                     ],
                 }),
-                $.postcssRoundSubpixels()
+                postcssRoundSubpixels()
             );
         }
         return plugins;
@@ -52,25 +64,25 @@ function gulptasksCSS($, gulp, buildFolder, browserSync) {
     gulp.task("css.lint", () => {
         return gulp
             .src(["../src/css/**/*.scss"])
-            .pipe($.sassLint({ configFile: ".sasslint.yml" }))
+            .pipe(gulpSassLint({ configFile: ".sasslint.yml" }))
-            .pipe($.sassLint.format())
+            .pipe(gulpSassLint.format())
-            .pipe($.sassLint.failOnError());
+            .pipe(gulpSassLint.failOnError());
     });
 
     function resourcesTask({ cachebust, isProd }) {
         return gulp
-            .src("../src/css/main.scss", { cwd: __dirname })
+            .src("../src/css/main.scss")
-            .pipe($.plumber())
+            .pipe(gulpPlumber())
-            .pipe($.dartSass.sync().on("error", $.dartSass.logError))
+            .pipe(gulpDartSass.sync().on("error", gulpDartSass.logError))
             .pipe(
-                $.postcss([
+                gulpPostcss([
-                    $.postcssCriticalSplit({
+                    postcssCriticalSplit({
                         blockTag: "@load-async",
                     }),
                 ])
             )
-            .pipe($.rename("async-resources.css"))
+            .pipe(gulpRename("async-resources.css"))
-            .pipe($.postcss(postcssPlugins(isProd, { cachebust })))
+            .pipe(gulpPostcss(postcssPlugins(isProd, { cachebust })))
             .pipe(gulp.dest(buildFolder))
             .pipe(browserSync.stream());
     }
@@ -92,18 +104,18 @@ function gulptasksCSS($, gulp, buildFolder, browserSync) {
 
     function mainTask({ cachebust, isProd }) {
         return gulp
-            .src("../src/css/main.scss", { cwd: __dirname })
+            .src("../src/css/main.scss")
-            .pipe($.plumber())
+            .pipe(gulpPlumber())
-            .pipe($.dartSass.sync().on("error", $.dartSass.logError))
+            .pipe(gulpDartSass.sync().on("error", gulpDartSass.logError))
             .pipe(
-                $.postcss([
+                gulpPostcss([
-                    $.postcssCriticalSplit({
+                    postcssCriticalSplit({
                         blockTag: "@load-async",
                         output: "rest",
                     }),
                 ])
             )
-            .pipe($.postcss(postcssPlugins(isProd, { cachebust })))
+            .pipe(gulpPostcss(postcssPlugins(isProd, { cachebust })))
             .pipe(gulp.dest(buildFolder))
             .pipe(browserSync.stream());
     }
@@ -130,7 +142,3 @@ function gulptasksCSS($, gulp, buildFolder, browserSync) {
         gulp.parallel("css.main.prod-standalone", "css.resources.prod-standalone")
     );
 }
-
-module.exports = {
-    gulptasksCSS,
-};

gulp/docs.js

@@ -1,12 +1,15 @@
-const path = require("path");
+import path from "path/posix";
-const fs = require("fs");
+import fs from "fs";
 
-function gulptasksDocs($, gulp, buildFolder) {
+import gulpRename from "gulp-rename";
+import stripJsonComments from "strip-json-comments";
+
+export default function gulptasksDocs(gulp, buildFolder) {
     gulp.task("docs.convertJsToTs", () => {
         return gulp
             .src(path.join("..", "src", "js", "**", "*.js"))
             .pipe(
-                $.rename(path => {
+                gulpRename(path => {
                     path.extname = ".ts";
                 })
             )
@@ -15,7 +18,7 @@ function gulptasksDocs($, gulp, buildFolder) {
 
     gulp.task("docs.copyTsconfigForHints", cb => {
         const src = fs.readFileSync(path.join("..", "src", "js", "tsconfig.json")).toString();
-        const baseConfig = JSON.parse($.stripJsonComments(src));
+        const baseConfig = JSON.parse(stripJsonComments(src));
 
         baseConfig.allowJs = false;
         baseConfig.checkJs = false;
@@ -33,7 +36,3 @@ function gulptasksDocs($, gulp, buildFolder) {
 
     gulp.task("main.prepareDocs", gulp.series("docs.convertJsToTs", "docs.copyTsconfigForHints"));
 }
-
-module.exports = {
-    gulptasksDocs,
-};

gulp/ftp.js

@@ -1,12 +1,15 @@
-const path = require("path");
+import path from "path/posix";
-const fs = require("fs");
+import fs from "fs";
 
-const buildUtils = require("./buildutils");
+import { getRevision, getVersion } from "./buildutils.js";
 
-function gulptasksFTP($, gulp, buildFolder) {
+import gulpRename from "gulp-rename";
-    const commitHash = buildUtils.getRevision();
+import gulpSftp from "gulp-sftp";
 
-    const additionalFolder = path.join(__dirname, "additional_build_files");
+export default function gulptasksFTP(gulp, buildFolder) {
+    const commitHash = getRevision();
+
+    const additionalFolder = path.join("additional_build_files");
 
     const additionalFiles = [
         path.join(additionalFolder, "*"),
@@ -38,8 +41,8 @@ function gulptasksFTP($, gulp, buildFolder) {
             path.join(buildFolder, "version.json"),
             JSON.stringify(
                 {
-                    commit: buildUtils.getRevision(),
+                    commit: getRevision(),
-                    appVersion: buildUtils.getVersion(),
+                    appVersion: getVersion(),
                     buildTime: new Date().getTime(),
                 },
                 null,
@@ -63,11 +66,11 @@ function gulptasksFTP($, gulp, buildFolder) {
             return gulp
                 .src(gameSrcGlobs, { base: buildFolder })
                 .pipe(
-                    $.rename(pth => {
+                    gulpRename(pth => {
                         pth.dirname = path.join("v", commitHash, pth.dirname);
                     })
                 )
-                .pipe($.sftp(deployCredentials));
+                .pipe(gulpSftp(deployCredentials));
         });
 
         gulp.task(`ftp.upload.${deployEnv}.indexHtml`, () => {
@@ -75,13 +78,13 @@ function gulptasksFTP($, gulp, buildFolder) {
                 .src([path.join(buildFolder, "index.html"), path.join(buildFolder, "version.json")], {
                     base: buildFolder,
                 })
-                .pipe($.sftp(deployCredentials));
+                .pipe(gulpSftp(deployCredentials));
         });
 
         gulp.task(`ftp.upload.${deployEnv}.additionalFiles`, () => {
             return gulp
                 .src(additionalFiles, { base: additionalFolder }) //
-                .pipe($.sftp(deployCredentials));
+                .pipe(gulpSftp(deployCredentials));
         });
 
         gulp.task(
@@ -95,7 +98,3 @@ function gulptasksFTP($, gulp, buildFolder) {
         );
     }
 }
-
-module.exports = {
-    gulptasksFTP,
-};

gulp/gulpfile.js

@@ -1,18 +1,13 @@
-/* eslint-disable */
+import gulp from "gulp";
+import BrowserSync from "browser-sync";
+const browserSync = BrowserSync.create({});
+import path from "path/posix";
+import deleteEmpty from "delete-empty";
+import { execSync } from "child_process";
 
-require("colors");
+// Load other plugins
-
+import gulpClean from "gulp-clean";
-const gulp = require("gulp");
+import gulpWebserver from "gulp-webserver";
-const browserSync = require("browser-sync").create({});
-const path = require("path");
-const deleteEmpty = require("delete-empty");
-const execSync = require("child_process").execSync;
-
-// Load other plugins dynamically
-const $ = require("gulp-load-plugins")({
-    scope: ["devDependencies"],
-    pattern: "*",
-});
 
 // Check environment variables
 
@@ -36,59 +31,59 @@ for (let i = 0; i < envVars.length; ++i) {
     }
 }
 
-const baseDir = path.join(__dirname, "..");
+const baseDir = path.resolve("..");
 const buildFolder = path.join(baseDir, "build");
 const buildOuptutFolder = path.join(baseDir, "build_output");
 
-const imgres = require("./image-resources");
+import gulptasksImageResources, * as imgres from "./image-resources.js";
-imgres.gulptasksImageResources($, gulp, buildFolder);
+gulptasksImageResources(gulp, buildFolder);
 
-const css = require("./css");
+import gulptasksCSS from "./css.js";
-css.gulptasksCSS($, gulp, buildFolder, browserSync);
+gulptasksCSS(gulp, buildFolder, browserSync);
 
-const sounds = require("./sounds");
+import gulptasksSounds from "./sounds.js";
-sounds.gulptasksSounds($, gulp, buildFolder);
+gulptasksSounds(gulp, buildFolder);
 
-const localConfig = require("./local-config");
+import gulptasksLocalConfig from "./local-config.js";
-localConfig.gulptasksLocalConfig($, gulp);
+gulptasksLocalConfig(gulp);
 
-const js = require("./js");
+import gulptasksJS from "./js.js";
-js.gulptasksJS($, gulp, buildFolder, browserSync);
+gulptasksJS(gulp, buildFolder, browserSync);
 
-const html = require("./html");
+import gulptasksHTML from "./html.js";
-html.gulptasksHTML($, gulp, buildFolder);
+gulptasksHTML(gulp, buildFolder);
 
-const ftp = require("./ftp");
+import gulptasksFTP from "./ftp.js";
-ftp.gulptasksFTP($, gulp, buildFolder);
+gulptasksFTP(gulp, buildFolder);
 
-const docs = require("./docs");
+import gulptasksDocs from "./docs.js";
-docs.gulptasksDocs($, gulp, buildFolder);
+gulptasksDocs(gulp, buildFolder);
 
-const standalone = require("./standalone");
+import gulptasksStandalone from "./standalone.js";
-standalone.gulptasksStandalone($, gulp);
+gulptasksStandalone(gulp);
 
-const translations = require("./translations");
+import gulptasksTranslations from "./translations.js";
-const { BUILD_VARIANTS } = require("./build_variants");
+import { BUILD_VARIANTS } from "./build_variants.js";
-translations.gulptasksTranslations($, gulp);
+gulptasksTranslations(gulp);
 
 /////////////////////  BUILD TASKS  /////////////////////
 
 // Cleans up everything
 gulp.task("utils.cleanBuildFolder", () => {
-    return gulp.src(buildFolder, { read: false, allowEmpty: true }).pipe($.clean({ force: true }));
+    return gulp.src(buildFolder, { read: false, allowEmpty: true }).pipe(gulpClean({ force: true }));
 });
 gulp.task("utils.cleanBuildOutputFolder", () => {
-    return gulp.src(buildOuptutFolder, { read: false, allowEmpty: true }).pipe($.clean({ force: true }));
+    return gulp.src(buildOuptutFolder, { read: false, allowEmpty: true }).pipe(gulpClean({ force: true }));
 });
 gulp.task("utils.cleanBuildTempFolder", () => {
     return gulp
-        .src(path.join(__dirname, "..", "src", "js", "built-temp"), { read: false, allowEmpty: true })
+        .src(path.join("..", "src", "js", "built-temp"), { read: false, allowEmpty: true })
-        .pipe($.clean({ force: true }));
+        .pipe(gulpClean({ force: true }));
 });
 gulp.task("utils.cleanImageBuildFolder", () => {
     return gulp
-        .src(path.join(__dirname, "res_built"), { read: false, allowEmpty: true })
+        .src(path.join("res_built"), { read: false, allowEmpty: true })
-        .pipe($.clean({ force: true }));
+        .pipe(gulpClean({ force: true }));
 });
 
 gulp.task(
@@ -98,7 +93,7 @@ gulp.task(
 
 // Requires no uncomitted files
 gulp.task("utils.requireCleanWorkingTree", cb => {
-    let output = $.trim(execSync("git status -su").toString("ascii")).replace(/\r/gi, "").split("\n");
+    let output = execSync("git status -su").toString("ascii").trim().replace(/\r/gi, "").split("\n");
 
     // Filter files which are OK to be untracked
     output = output
@@ -128,7 +123,7 @@ gulp.task("utils.copyAdditionalBuildFiles", cb => {
 // Starts a webserver on the built directory (useful for testing prod build)
 gulp.task("main.webserver", () => {
     return gulp.src(buildFolder).pipe(
-        $.webserver({
+        gulpWebserver({
             livereload: {
                 enable: true,
             },
@@ -298,4 +293,4 @@ gulp.task(
 );
 
 // Default task (dev, localhost)
-gulp.task("default", gulp.series("serve.web-localhost"));
+gulp.task("default", gulp.series("serve.standalone-steam"));

gulp/html.js

@@ -1,8 +1,13 @@
-const buildUtils = require("./buildutils");
+import { getRevision, cachebust as cachebustUtil } from "./buildutils.js";
-const fs = require("fs");
+import fs from "fs";
-const path = require("path");
+import path from "path/posix";
-const crypto = require("crypto");
+import crypto from "crypto";
-const { BUILD_VARIANTS } = require("./build_variants");
+import { BUILD_VARIANTS } from "./build_variants.js";
+
+import gulpDom from "gulp-dom";
+import gulpHtmlmin from "gulp-htmlmin";
+import gulpHtmlBeautify from "gulp-html-beautify";
+import gulpRename from "gulp-rename";
 
 function computeIntegrityHash(fullPath, algorithm = "sha256") {
     const file = fs.readFileSync(fullPath);
@@ -16,12 +21,12 @@ function computeIntegrityHash(fullPath, algorithm = "sha256") {
  * html.<variant>.dev
  * html.<variant>.prod
  */
-function gulptasksHTML($, gulp, buildFolder) {
+export default function gulptasksHTML(gulp, buildFolder) {
-    const commitHash = buildUtils.getRevision();
+    const commitHash = getRevision();
     async function buildHtml({ standalone = false, integrity = true, enableCachebust = true }) {
         function cachebust(url) {
             if (enableCachebust) {
-                return buildUtils.cachebust(url, commitHash);
+                return cachebustUtil(url, commitHash);
             }
             return url;
         }
@@ -31,7 +36,7 @@ function gulptasksHTML($, gulp, buildFolder) {
         return gulp
             .src("../src/html/" + (standalone ? "index.standalone.html" : "index.html"))
             .pipe(
-                $.dom(
+                gulpDom(
                     /** @this {Document} **/ function () {
                         const document = this;
 
@@ -87,8 +92,7 @@ function gulptasksHTML($, gulp, buildFolder) {
                         }
                         `;
                         let loadingCss =
-                            fontCss +
+                            fontCss + fs.readFileSync(path.join("preloader", "preloader.css")).toString();
-                            fs.readFileSync(path.join(__dirname, "preloader", "preloader.css")).toString();
 
                         const style = document.createElement("style");
                         style.setAttribute("type", "text/css");
@@ -96,7 +100,7 @@ function gulptasksHTML($, gulp, buildFolder) {
                         document.head.appendChild(style);
 
                         let bodyContent = fs
-                            .readFileSync(path.join(__dirname, "preloader", "preloader.html"))
+                            .readFileSync(path.join("preloader", "preloader.html"))
                             .toString();
 
                         // Append loader, but not in standalone (directly include bundle there)
@@ -128,7 +132,7 @@ function gulptasksHTML($, gulp, buildFolder) {
                             }
 
                             scriptContent += fs
-                                .readFileSync(path.join(__dirname, "preloader", "preloader.js"))
+                                .readFileSync(path.join("preloader", "preloader.js"))
                                 .toString();
                             loadJs.textContent = scriptContent;
                             document.head.appendChild(loadJs);
@@ -139,7 +143,7 @@ function gulptasksHTML($, gulp, buildFolder) {
                 )
             )
             .pipe(
-                $.htmlmin({
+                gulpHtmlmin({
                     caseSensitive: true,
                     collapseBooleanAttributes: true,
                     collapseInlineTagWhitespace: true,
@@ -151,8 +155,8 @@ function gulptasksHTML($, gulp, buildFolder) {
                     useShortDoctype: true,
                 })
             )
-            .pipe($.htmlBeautify())
+            .pipe(gulpHtmlBeautify())
-            .pipe($.rename("index.html"))
+            .pipe(gulpRename("index.html"))
             .pipe(gulp.dest(buildFolder));
     }
 
@@ -174,7 +178,3 @@ function gulptasksHTML($, gulp, buildFolder) {
         });
     }
 }
-
-module.exports = {
-    gulptasksHTML,
-};

gulp/image-resources.js

@@ -1,36 +1,50 @@
-const { existsSync } = require("fs");
+import fs from "fs";
-// @ts-ignore
+import path from "path/posix";
-const path = require("path");
+import atlasToJson from "./atlas2json.js";
-const atlasToJson = require("./atlas2json");
 
+import { execSync } from "child_process";
 const execute = command =>
-    require("child_process").execSync(command, {
+    execSync(command, {
         encoding: "utf-8",
     });
 
+import gulpImagemin from "gulp-imagemin";
+import imageminJpegtran from "imagemin-jpegtran";
+import imageminGifsicle from "imagemin-gifsicle";
+import imageminPngquant from "imagemin-pngquant";
+import gulpIf from "gulp-if";
+import gulpCached from "gulp-cached";
+import gulpClean from "gulp-clean";
+
 // Globs for atlas resources
-const rawImageResourcesGlobs = ["../res_raw/atlas.json", "../res_raw/**/*.png"];
+export const rawImageResourcesGlobs = ["../res_raw/atlas.json", "../res_raw/**/*.png"];
 
 // Globs for non-ui resources
-const nonImageResourcesGlobs = ["../res/**/*.woff2", "../res/*.ico", "../res/**/*.webm"];
+export const nonImageResourcesGlobs = ["../res/**/*.woff2", "../res/*.ico", "../res/**/*.webm"];
 
 // Globs for ui resources
-const imageResourcesGlobs = ["../res/**/*.png", "../res/**/*.svg", "../res/**/*.jpg", "../res/**/*.gif"];
+export const imageResourcesGlobs = [
+    "../res/**/*.png",
+    "../res/**/*.svg",
+    "../res/**/*.jpg",
+    "../res/**/*.gif",
+];
 
 // Link to download LibGDX runnable-texturepacker.jar
-const runnableTPSource = "https://libgdx-nightlies.s3.eu-central-1.amazonaws.com/libgdx-runnables/runnable-texturepacker.jar";
+const runnableTPSource =
+    "https://libgdx-nightlies.s3.eu-central-1.amazonaws.com/libgdx-runnables/runnable-texturepacker.jar";
 
-function gulptasksImageResources($, gulp, buildFolder) {
+export default function gulptasksImageResources(gulp, buildFolder) {
     // Lossless options
     const minifyImagesOptsLossless = () => [
-        $.imageminJpegtran({
+        imageminJpegtran({
             progressive: true,
         }),
-        $.imagemin.svgo({}),
+        gulpImagemin.svgo({}),
-        $.imagemin.optipng({
+        gulpImagemin.optipng({
             optimizationLevel: 3,
         }),
-        $.imageminGifsicle({
+        imageminGifsicle({
             optimizationLevel: 3,
             colors: 128,
         }),
@@ -38,22 +52,22 @@ function gulptasksImageResources($, gulp, buildFolder) {
 
     // Lossy options
     const minifyImagesOpts = () => [
-        $.imagemin.mozjpeg({
+        gulpImagemin.mozjpeg({
             quality: 80,
             maxMemory: 1024 * 1024 * 8,
         }),
-        $.imagemin.svgo({}),
+        gulpImagemin.svgo({}),
-        $.imageminPngquant({
+        imageminPngquant({
             speed: 1,
             strip: true,
             quality: [0.65, 0.9],
             dithering: false,
             verbose: false,
         }),
-        $.imagemin.optipng({
+        gulpImagemin.optipng({
             optimizationLevel: 3,
         }),
-        $.imageminGifsicle({
+        imageminGifsicle({
             optimizationLevel: 3,
             colors: 128,
         }),
@@ -81,7 +95,7 @@ function gulptasksImageResources($, gulp, buildFolder) {
             // First check whether Java is installed
             execute("java -version");
             // Now check and try downloading runnable-texturepacker.jar (22MB)
-            if (!existsSync("./runnable-texturepacker.jar")) {
+            if (!fs.existsSync("./runnable-texturepacker.jar")) {
                 const safeLink = JSON.stringify(runnableTPSource);
                 const commands = [
                     // linux/macos if installed
@@ -116,7 +130,7 @@ function gulptasksImageResources($, gulp, buildFolder) {
 
     // Converts .atlas LibGDX files to JSON
     gulp.task("imgres.atlasToJson", cb => {
-        atlasToJson.convert("../res_built/atlas");
+        atlasToJson("../res_built/atlas");
         cb();
     });
 
@@ -130,10 +144,10 @@ function gulptasksImageResources($, gulp, buildFolder) {
         return gulp
             .src(["../res_built/atlas/*.png"])
             .pipe(
-                $.if(
+                gulpIf(
                     fname => fileMustBeLossless(fname.history[0]),
-                    $.imagemin(minifyImagesOptsLossless()),
+                    gulpImagemin(minifyImagesOptsLossless()),
-                    $.imagemin(minifyImagesOpts())
+                    gulpImagemin(minifyImagesOpts())
                 )
             )
             .pipe(gulp.dest(resourcesDestFolder));
@@ -151,7 +165,7 @@ function gulptasksImageResources($, gulp, buildFolder) {
         return gulp
             .src(imageResourcesGlobs)
 
-            .pipe($.cached("imgres.copyImageResources"))
+            .pipe(gulpCached("imgres.copyImageResources"))
             .pipe(gulp.dest(path.join(resourcesDestFolder)));
     });
 
@@ -160,10 +174,10 @@ function gulptasksImageResources($, gulp, buildFolder) {
         return gulp
             .src(imageResourcesGlobs)
             .pipe(
-                $.if(
+                gulpIf(
                     fname => fileMustBeLossless(fname.history[0]),
-                    $.imagemin(minifyImagesOptsLossless()),
+                    gulpImagemin(minifyImagesOptsLossless()),
-                    $.imagemin(minifyImagesOpts())
+                    gulpImagemin(minifyImagesOpts())
                 )
             )
             .pipe(gulp.dest(path.join(resourcesDestFolder)));
@@ -193,13 +207,6 @@ function gulptasksImageResources($, gulp, buildFolder) {
                 ],
                 { read: false }
             )
-            .pipe($.if(fname => fname.history[0].indexOf("noinline") < 0, $.clean({ force: true })));
+            .pipe(gulpIf(fname => fname.history[0].indexOf("noinline") < 0, gulpClean({ force: true })));
     });
 }
-
-module.exports = {
-    rawImageResourcesGlobs,
-    nonImageResourcesGlobs,
-    imageResourcesGlobs,
-    gulptasksImageResources,
-};

gulp/js.js

@@ -1,10 +1,10 @@
-const path = require("path");
+import { BUILD_VARIANTS } from "./build_variants.js";
-const { BUILD_VARIANTS } = require("./build_variants");
 
-function requireUncached(module) {
+import webpackConfig from "./webpack.config.js";
-    delete require.cache[require.resolve(module)];
+import webpackProductionConfig from "./webpack.production.config.js";
-    return require(module);
+
-}
+import webpackStream from "webpack-stream";
+import gulpRename from "gulp-rename";
 
 /**
  * PROVIDES (per <variant>)
@@ -15,23 +15,15 @@ function requireUncached(module) {
  *
  */
 
-function gulptasksJS($, gulp, buildFolder, browserSync) {
+export default function gulptasksJS(gulp, buildFolder, browserSync) {
     //// DEV
 
     for (const variant in BUILD_VARIANTS) {
         const data = BUILD_VARIANTS[variant];
 
         gulp.task("js." + variant + ".dev.watch", () => {
-            return gulp
+            gulp.src("../src/js/main.js")
-                .src("../src/js/main.js")
+                .pipe(webpackStream(webpackConfig))
-                .pipe(
-                    $.webpackStream(
-                        requireUncached("./webpack.config.js")({
-                            standalone: data.standalone,
-                            watch: true,
-                        })
-                    )
-                )
                 .pipe(gulp.dest(buildFolder))
                 .pipe(browserSync.stream());
         });
@@ -42,36 +34,22 @@ function gulptasksJS($, gulp, buildFolder, browserSync) {
             gulp.task("js." + variant + ".dev", () => {
                 return gulp
                     .src("../src/js/main.js")
-                    .pipe($.webpackStream(requireUncached("./webpack.config.js")()))
+                    .pipe(webpackStream(webpackConfig))
                     .pipe(gulp.dest(buildFolder));
             });
 
             gulp.task("js." + variant + ".prod.transpiled", () => {
                 return gulp
                     .src("../src/js/main.js")
-                    .pipe(
+                    .pipe(webpackStream(webpackProductionConfig))
-                        $.webpackStream(
+                    .pipe(gulpRename("bundle-transpiled.js"))
-                            requireUncached("./webpack.production.config.js")({
-                                es6: false,
-                                environment: data.environment,
-                            })
-                        )
-                    )
-                    .pipe($.rename("bundle-transpiled.js"))
                     .pipe(gulp.dest(buildFolder));
             });
 
             gulp.task("js." + variant + ".prod.es6", () => {
                 return gulp
                     .src("../src/js/main.js")
-                    .pipe(
+                    .pipe(webpackStream(webpackProductionConfig))
-                        $.webpackStream(
-                            requireUncached("./webpack.production.config.js")({
-                                es6: true,
-                                environment: data.environment,
-                            })
-                        )
-                    )
                     .pipe(gulp.dest(buildFolder));
             });
             gulp.task(
@@ -86,33 +64,15 @@ function gulptasksJS($, gulp, buildFolder, browserSync) {
             gulp.task("js." + variant + ".dev", () => {
                 return gulp
                     .src("../src/js/main.js")
-                    .pipe(
+                    .pipe(webpackStream(webpackConfig))
-                        $.webpackStream(
-                            requireUncached("./webpack.config.js")({
-                                standalone: true,
-                            })
-                        )
-                    )
                     .pipe(gulp.dest(buildFolder));
             });
             gulp.task("js." + variant + ".prod", () => {
                 return gulp
                     .src("../src/js/main.js")
-                    .pipe(
+                    .pipe(webpackStream(webpackProductionConfig))
-                        $.webpackStream(
-                            requireUncached("./webpack.production.config.js")({
-                                environment: "prod",
-                                es6: true,
-                                standalone: true,
-                            })
-                        )
-                    )
                     .pipe(gulp.dest(buildFolder));
             });
         }
     }
 }
-
-module.exports = {
-    gulptasksJS,
-};

gulp/local-config.js

@@ -1,18 +1,14 @@
-const path = require("path");
+import fs from "fs";
-const fs = require("fs");
-const fse = require("fs-extra");
 
-const configTemplatePath = path.join(__dirname, "../src/js/core/config.local.template.js");
+const configTemplatePath = "../src/js/core/config.local.template.js";
-const configPath = path.join(__dirname, "../src/js/core/config.local.js");
+const configPath = "../src/js/core/config.local.js";
 
-function gulptasksLocalConfig($, gulp) {
+export default function gulptasksLocalConfig(gulp) {
     gulp.task("localConfig.findOrCreate", cb => {
         if (!fs.existsSync(configPath)) {
-            fse.copySync(configTemplatePath, configPath);
+            fs.copyFileSync(configTemplatePath, configPath);
         }
 
         cb();
     });
 }
-
-module.exports = { gulptasksLocalConfig };

gulp/package.json

@@ -1,124 +0,0 @@
-{
-    "name": "builder",
-    "version": "1.0.0",
-    "description": "builder",
-    "private": true,
-    "scripts": {
-        "gulp": "gulp"
-    },
-    "author": "tobspr",
-    "license": "private",
-    "browserslist": "> 0.01%",
-    "dependencies": {
-        "@babel/core": "^7.9.0",
-        "@babel/plugin-transform-arrow-functions": "^7.17.12",
-        "@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",
-        "are-you-es5": "^2.1.2",
-        "audiosprite": "^0.7.2",
-        "babel-core": "^6.26.3",
-        "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",
-        "gifsicle": "^5.2.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",
-        "postcss": ">=5.0.0",
-        "promise-polyfill": "^8.1.0",
-        "query-string": "^6.8.1",
-        "raw-loader": "^4.0.2",
-        "rusha": "^0.8.13",
-        "stream-browserify": "^3.0.0",
-        "strictdom": "^1.0.1",
-        "string-replace-webpack-plugin": "^0.1.3",
-        "strip-indent": "^3.0.0",
-        "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",
-        "yaml": "^1.10.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-notarize": "^1.2.1",
-        "electron-packager": "^15.4.0",
-        "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-dart-sass": "^1.0.2",
-        "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-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-critical-split": "^2.5.3",
-        "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"
-    },
-    "optionalDependencies": {
-        "tobspr-osx-sign": "^1.0.1"
-    }
-}

gulp/sounds.js

@@ -1,18 +1,23 @@
-const path = require("path");
+import path from "path/posix";
-const audiosprite = require("gulp-audiosprite");
+import audiosprite from "gulp-audiosprite";
 
-function gulptasksSounds($, gulp, buildFolder) {
+import gulpClean from "gulp-clean";
+import gulpCache from "gulp-cache";
+import gulpPlumber from "gulp-plumber";
+import gulpFluentFfmpeg from "gulp-fluent-ffmpeg";
+
+export default function gulptasksSounds(gulp, buildFolder) {
     // Gather some basic infos
-    const soundsDir = path.join(__dirname, "..", "res_raw", "sounds");
+    const soundsDir = path.join("..", "res_raw", "sounds");
-    const builtSoundsDir = path.join(__dirname, "..", "res_built", "sounds");
+    const builtSoundsDir = path.join("..", "res_built", "sounds");
 
     gulp.task("sounds.clear", () => {
-        return gulp.src(builtSoundsDir, { read: false, allowEmpty: true }).pipe($.clean({ force: true }));
+        return gulp.src(builtSoundsDir, { read: false, allowEmpty: true }).pipe(gulpClean({ force: true }));
     });
 
     const filters = ["volume=0.2"];
 
-    const fileCache = new $.cache.Cache({
+    const fileCache = new gulpCache.Cache({
         cacheDirName: "shapezio-precompiled-sounds",
     });
 
@@ -26,10 +31,10 @@ function gulptasksSounds($, gulp, buildFolder) {
     gulp.task("sounds.music", () => {
         return gulp
             .src([path.join(soundsDir, "music", "**", "*.wav"), path.join(soundsDir, "music", "**", "*.mp3")])
-            .pipe($.plumber())
+            .pipe(gulpPlumber())
             .pipe(
-                $.cache(
+                gulpCache(
-                    $.fluentFfmpeg("mp3", function (cmd) {
+                    gulpFluentFfmpeg("mp3", function (cmd) {
                         return cmd
                             .audioBitrate(48)
                             .audioChannels(1)
@@ -51,10 +56,10 @@ function gulptasksSounds($, gulp, buildFolder) {
     gulp.task("sounds.musicHQ", () => {
         return gulp
             .src([path.join(soundsDir, "music", "**", "*.wav"), path.join(soundsDir, "music", "**", "*.mp3")])
-            .pipe($.plumber())
+            .pipe(gulpPlumber())
             .pipe(
-                $.cache(
+                gulpCache(
-                    $.fluentFfmpeg("mp3", function (cmd) {
+                    gulpFluentFfmpeg("mp3", function (cmd) {
                         return cmd
                             .audioBitrate(256)
                             .audioChannels(2)
@@ -76,7 +81,7 @@ function gulptasksSounds($, gulp, buildFolder) {
     gulp.task("sounds.sfxGenerateSprites", () => {
         return gulp
             .src([path.join(soundsDir, "sfx", "**", "*.wav"), path.join(soundsDir, "sfx", "**", "*.mp3")])
-            .pipe($.plumber())
+            .pipe(gulpPlumber())
             .pipe(
                 audiosprite({
                     format: "howler",
@@ -90,9 +95,9 @@ function gulptasksSounds($, gulp, buildFolder) {
     gulp.task("sounds.sfxOptimize", () => {
         return gulp
             .src([path.join(builtSoundsDir, "sfx.mp3")])
-            .pipe($.plumber())
+            .pipe(gulpPlumber())
             .pipe(
-                $.fluentFfmpeg("mp3", function (cmd) {
+                gulpFluentFfmpeg("mp3", function (cmd) {
                     return cmd
                         .audioBitrate(128)
                         .audioChannels(1)
@@ -106,7 +111,7 @@ function gulptasksSounds($, gulp, buildFolder) {
     gulp.task("sounds.sfxCopyAtlas", () => {
         return gulp
             .src([path.join(builtSoundsDir, "sfx.json")])
-            .pipe(gulp.dest(path.join(__dirname, "..", "src", "js", "built-temp")));
+            .pipe(gulp.dest(path.join("..", "src", "js", "built-temp")));
     });
 
     gulp.task(
@@ -117,7 +122,7 @@ function gulptasksSounds($, gulp, buildFolder) {
     gulp.task("sounds.copy", () => {
         return gulp
             .src(path.join(builtSoundsDir, "**", "*.mp3"))
-            .pipe($.plumber())
+            .pipe(gulpPlumber())
             .pipe(gulp.dest(path.join(buildFolder, "res", "sounds")));
     });
 
@@ -128,7 +133,3 @@ function gulptasksSounds($, gulp, buildFolder) {
     gulp.task("sounds.fullbuildHQ", gulp.series("sounds.clear", "sounds.buildallHQ", "sounds.copy"));
     gulp.task("sounds.dev", gulp.series("sounds.buildall", "sounds.copy"));
 }
-
-module.exports = {
-    gulptasksSounds,
-};

gulp/standalone.js

@@ -1,35 +1,34 @@
-require("colors");
+import packager from "electron-packager";
-const packager = require("electron-packager");
+import pj from "../electron/package.json" assert { type: "json" };
-const pj = require("../electron/package.json");
+import path from "path/posix";
-const path = require("path");
+import { getRevision, getVersion } from "./buildutils.js";
-const { getVersion } = require("./buildutils");
+import fs from "fs";
-const fs = require("fs");
+import { execSync } from "child_process";
-const fse = require("fs-extra");
+import electronNotarize from "electron-notarize";
-const buildutils = require("./buildutils");
+import { BUILD_VARIANTS } from "./build_variants.js";
-const execSync = require("child_process").execSync;
+
-const electronNotarize = require("electron-notarize");
+import gulpClean from "gulp-clean";
-const { BUILD_VARIANTS } = require("./build_variants");
 
 let signAsync;
 try {
-    signAsync = require("tobspr-osx-sign").signAsync;
+    signAsync = (await import("tobspr-osx-sign")).signAsync;
 } catch (ex) {
     console.warn("tobspr-osx-sign not installed, can not create osx builds");
 }
 
-function gulptasksStandalone($, gulp) {
+export default function gulptasksStandalone(gulp) {
     for (const variant in BUILD_VARIANTS) {
         const variantData = BUILD_VARIANTS[variant];
         if (!variantData.standalone) {
             continue;
         }
-        const tempDestDir = path.join(__dirname, "..", "build_output", variant);
+        const tempDestDir = path.join("..", "build_output", variant);
         const taskPrefix = "standalone." + variant;
-        const electronBaseDir = path.join(__dirname, "..", variantData.electronBaseDir || "electron");
+        const electronBaseDir = path.join("..", variantData.electronBaseDir || "electron");
         const tempDestBuildDir = path.join(tempDestDir, "built");
 
         gulp.task(taskPrefix + ".prepare.cleanup", () => {
-            return gulp.src(tempDestDir, { read: false, allowEmpty: true }).pipe($.clean({ force: true }));
+            return gulp.src(tempDestDir, { read: false, allowEmpty: true }).pipe(gulpClean({ force: true }));
         });
 
         gulp.task(taskPrefix + ".prepare.copyPrefab", () => {
@@ -161,7 +160,7 @@ function gulptasksStandalone($, gulp) {
                         if (variantData.steamAppId) {
                             fs.writeFileSync(
                                 path.join(appPath, "LICENSE"),
-                                fs.readFileSync(path.join(__dirname, "..", "LICENSE"))
+                                fs.readFileSync(path.join("..", "LICENSE"))
                             );
 
                             fs.writeFileSync(
@@ -228,7 +227,7 @@ function gulptasksStandalone($, gulp) {
                         execSync(
                             `codesign --force --verbose --options runtime --timestamp --no-strict --sign "${
                                 process.env.SHAPEZ_CLI_APPLE_CERT_NAME
-                            }" --entitlements "${path.join(__dirname, "entitlements.plist")}" ${appIdDest}`,
+                            }" --entitlements "${path.join("entitlements.plist")}" ${appIdDest}`,
                             {
                                 cwd: appFile,
                             }
@@ -247,7 +246,7 @@ function gulptasksStandalone($, gulp) {
                         type: "distribution",
                         optionsForFile: f => {
                             return {
-                                entitlements: path.join(__dirname, "entitlements.plist"),
+                                entitlements: path.join("entitlements.plist"),
                                 hardenedRuntime: true,
                                 signatureFlags: ["runtime"],
                             };
@@ -295,20 +294,20 @@ function gulptasksStandalone($, gulp) {
 
     // Steam helpers
     gulp.task("standalone.prepareVDF", cb => {
-        const hash = buildutils.getRevision();
+        const hash = getRevision();
-        const version = buildutils.getVersion();
+        const version = getVersion();
 
         // for (const platform of ["steampipe", "steampipe-darwin"]) {
-        const templatesSource = path.join(__dirname, "steampipe", "templates");
+        const templatesSource = path.join("steampipe", "templates");
-        const templatesDest = path.join(__dirname, "steampipe", "built_vdfs");
+        const templatesDest = path.join("steampipe", "built_vdfs");
 
         const variables = {
-            PROJECT_DIR: path.resolve(path.join(__dirname, "..")).replace(/\\/g, "/"),
+            PROJECT_DIR: path.resolve(path.join("..")).replace(/\\/g, "/"),
-            BUNDLE_DIR: path.resolve(path.join(__dirname, "..", "build_output")).replace(/\\/g, "/"),
+            BUNDLE_DIR: path.resolve(path.join("..", "build_output")).replace(/\\/g, "/"),
 
-            TMP_DIR: path.resolve(path.join(__dirname, "steampipe", "tmp")).replace(/\\/g, "/"),
+            TMP_DIR: path.resolve(path.join("steampipe", "tmp")).replace(/\\/g, "/"),
             // BUILD_DESC: "v" + version + " @ " + hash,
-            VDF_DIR: path.resolve(path.join(__dirname, "steampipe", "built_vdfs")).replace(/\\/g, "/"),
+            VDF_DIR: path.resolve(path.join("steampipe", "built_vdfs")).replace(/\\/g, "/"),
         };
 
         const files = fs.readdirSync(templatesSource);
@@ -333,5 +332,3 @@ function gulptasksStandalone($, gulp) {
         cb();
     });
 }
-
-module.exports = { gulptasksStandalone };

gulp/translations.js

@@ -1,18 +1,18 @@
-const path = require("path");
+import path from "path/posix";
-const fs = require("fs");
+import fs from "fs";
-const gulpYaml = require("gulp-yaml");
+import gulpYaml from "gulp-yaml";
-const YAML = require("yaml");
+import YAML from "yaml";
-const stripIndent = require("strip-indent");
-const trim = require("trim");
 
-const translationsSourceDir = path.join(__dirname, "..", "translations");
+import gulpPlumber from "gulp-plumber";
-const translationsJsonDir = path.join(__dirname, "..", "src", "js", "built-temp");
 
-function gulptasksTranslations($, gulp) {
+const translationsSourceDir = path.join("..", "translations");
+const translationsJsonDir = path.join("..", "src", "js", "built-temp");
+
+export default function gulptasksTranslations(gulp) {
     gulp.task("translations.convertToJson", () => {
         return gulp
             .src(path.join(translationsSourceDir, "*.yaml"))
-            .pipe($.plumber())
+            .pipe(gulpPlumber())
             .pipe(gulpYaml({ space: 2, safe: true }))
             .pipe(gulp.dest(translationsJsonDir));
     });
@@ -50,7 +50,7 @@ function gulptasksTranslations($, gulp) {
                 [/list]
                     `;
 
-                fs.writeFileSync(destpath, trim(content.replace(/(\n[ \t\r]*)/gi, "\n")), {
+                fs.writeFileSync(destpath, content.replace(/(\n[ \t\r]*)/gi, "\n").trim(), {
                     encoding: "utf-8",
                 });
             });
@@ -58,7 +58,3 @@ function gulptasksTranslations($, gulp) {
         cb();
     });
 }
-
-module.exports = {
-    gulptasksTranslations,
-};

gulp/webpack.config.js

@@ -1,79 +1,35 @@
-// @ts-nocheck
+import CircularDependencyPlugin from "circular-dependency-plugin";
+import { resolve } from "path/posix";
+import webpack from "webpack";
+import { getAllResourceImages, getRevision, getVersion } from "./buildutils.js";
 
-const path = require("path");
+const globalDefs = {
-const webpack = require("webpack");
-const { getRevision, getVersion, getAllResourceImages } = require("./buildutils");
-const CircularDependencyPlugin = require("circular-dependency-plugin");
-
-module.exports = ({ watch = false, standalone = false }) => {
-    return {
-        mode: "development",
-        devtool: "cheap-source-map",
-        entry: {
-            "bundle.js": [path.resolve(__dirname, "../src/js/main.js")],
-        },
-        watch,
-        node: {
-            fs: "empty",
-        },
-        resolve: {
-            alias: {
-                "global-compression": path.resolve(__dirname, "..", "src", "js", "core", "lzstring.js"),
-            },
-        },
-        context: path.resolve(__dirname, ".."),
-        plugins: [
-            new webpack.DefinePlugin({
     assert: "window.assert",
     assertAlways: "window.assert",
     abstract:
-                    "window.assert(false, 'abstract method called of: ' + (this.name || (this.constructor && this.constructor.name)));",
+        "window.assert(false, 'abstract method called of: ' + " +
-                G_HAVE_ASSERT: "true",
+        "(this.name || (this.constructor && this.constructor.name)));",
-                G_APP_ENVIRONMENT: JSON.stringify("dev"),
     G_IS_DEV: "true",
-                G_IS_RELEASE: "false",
+    G_APP_ENVIRONMENT: JSON.stringify("development"),
-                G_IS_BROWSER: "true",
+    G_BUILD_TIME: new Date().getTime().toString(),
-                G_IS_STANDALONE: JSON.stringify(standalone),
-                G_BUILD_TIME: "" + new Date().getTime(),
     G_BUILD_COMMIT_HASH: JSON.stringify(getRevision()),
     G_BUILD_VERSION: JSON.stringify(getVersion()),
     G_ALL_UI_IMAGES: JSON.stringify(getAllResourceImages()),
-            }),
 
-            new CircularDependencyPlugin({
+    G_IS_RELEASE: "false",
-                // exclude detection of files based on a RegExp
+    G_IS_STANDALONE: "true",
-                exclude: /node_modules/,
+    G_IS_BROWSER: "false",
+    G_HAVE_ASSERT: "true",
+};
 
-                // add errors to webpack instead of warnings
+/** @type {import("webpack").RuleSetRule[]} */
-                failOnError: true,
+const moduleRules = [
-
-                // allow import cycles that include an asyncronous import,
-                // e.g. via import(/* webpackMode: "weak" */ './file.js')
-                allowAsyncCycles: false,
-
-                // set the current working directory for displaying module paths
-                cwd: path.join(__dirname, "..", "src", "js"),
-            }),
-        ],
-        module: {
-            rules: [
     {
         test: /\.json$/,
         enforce: "pre",
-                    use: ["./gulp/loader.compressjson"],
+        use: resolve("./loader.compressjson.cjs"),
         type: "javascript/auto",
     },
-                { test: /\.(png|jpe?g|svg)$/, loader: "ignore-loader" },
-                { test: /\.nobuild/, loader: "ignore-loader" },
-                {
-                    test: /\.md$/,
-                    use: [
-                        {
-                            loader: "html-loader",
-                        },
-                        "markdown-loader",
-                    ],
-                },
     {
         test: /\.js$/,
         enforce: "pre",
@@ -86,31 +42,58 @@ module.exports = ({ watch = false, standalone = false }) => {
                     end: "typehints:end",
                 },
             },
-                        {
-                            loader: path.resolve(__dirname, "mod.js"),
-                        },
         ],
     },
     {
         test: /\.worker\.js$/,
-                    use: {
+        use: [
+            {
                 loader: "worker-loader",
                 options: {
-                            fallback: false,
+                    filename: "[fullhash].worker.js",
-                            inline: true,
+                    inline: "fallback",
                 },
             },
-                },
-                {
-                    test: /\.ya?ml$/,
-                    type: "json", // Required by Webpack v4
-                    use: "yaml-loader",
-                },
         ],
     },
-        output: {
+    {
-            filename: "bundle.js",
+        test: /\.js$/,
-            path: path.resolve(__dirname, "..", "build"),
+        resolve: {
+            fullySpecified: false,
+        },
+    },
+];
+
+/** @type {import("webpack").Configuration} */
+export default {
+    mode: "development",
+    entry: resolve("../src/js/main.js"),
+    context: resolve(".."),
+    output: {
+        path: resolve("../build"),
+        filename: "bundle.js",
+    },
+    resolve: {
+        fallback: { fs: false },
+        alias: {
+            "global-compression": resolve("../src/js/core/lzstring.js"),
+        },
+    },
+    devtool: "cheap-source-map",
+    watch: true,
+    plugins: [
+        new webpack.DefinePlugin(globalDefs),
+        new webpack.IgnorePlugin({ resourceRegExp: /\.(png|jpe?g|svg)$/ }),
+        new webpack.IgnorePlugin({ resourceRegExp: /\.nobuild/ }),
+        new CircularDependencyPlugin({
+            exclude: /node_modules/,
+            failOnError: true,
+            allowAsyncCycles: false,
+            cwd: resolve("../src/js"),
+        }),
+    ],
+    module: { rules: moduleRules },
+    experiments: {
+        topLevelAwait: true,
     },
-    };
 };

gulp/webpack.production.config.js

@@ -1,98 +1,122 @@
-// @ts-nocheck
+import { resolve } from "path/posix";
+import TerserPlugin from "terser-webpack-plugin";
+import webpack from "webpack";
+const { DefinePlugin, IgnorePlugin } = webpack;
+import DeadCodePlugin from "webpack-deadcode-plugin";
+import pj from "../package.json" assert { type: "json" };
+const { version } = pj;
+import { getAllResourceImages, getRevision } from "./buildutils.js";
 
-const path = require("path");
+const globalDefs = {
-const webpack = require("webpack");
+    "assert": "false && window.assert",
-const { getRevision, getVersion, getAllResourceImages } = require("./buildutils");
+    "assertAlways": "window.assert",
+    "abstract": "window.assert(false, 'abstract method called');",
+    "globalConfig.debug": "({})",
+    "G_IS_DEV": "false",
+    "G_APP_ENVIRONMENT": JSON.stringify("release"),
+    "G_BUILD_TIME": new Date().getTime().toString(),
+    "G_BUILD_COMMIT_HASH": JSON.stringify(getRevision()),
+    "G_BUILD_VERSION": JSON.stringify(version),
+    "G_ALL_UI_IMAGES": JSON.stringify(getAllResourceImages()),
 
-const TerserPlugin = require("terser-webpack-plugin");
+    "G_IS_RELEASE": "true",
-const StringReplacePlugin = require("string-replace-webpack-plugin");
+    "G_IS_STANDALONE": "true",
-const UnusedFilesPlugin = require("unused-files-webpack-plugin").UnusedFilesWebpackPlugin;
+    "G_IS_BROWSER": "false",
+    "G_HAVE_ASSERT": "false",
+};
 
-module.exports = ({
+/** @type {import("webpack").RuleSetRule[]} */
-    environment,
+const moduleRules = [
-    es6 = false,
+    {
-
+        test: /\.json$/,
-    standalone = false,
+        enforce: "pre",
-    isBrowser = true,
+        use: resolve("./loader.compressjson.cjs"),
-}) => {
+        type: "javascript/auto",
-    const globalDefs = {
-        assert: "false && window.assert",
-        assertAlways: "window.assert",
-        abstract: "window.assert(false, 'abstract method called');",
-        G_IS_DEV: "false",
-
-        G_IS_RELEASE: environment === "prod" ? "true" : "false",
-        G_IS_STANDALONE: standalone ? "true" : "false",
-        G_IS_BROWSER: isBrowser ? "true" : "false",
-        G_APP_ENVIRONMENT: JSON.stringify(environment),
-        G_HAVE_ASSERT: "false",
-        G_BUILD_TIME: "" + new Date().getTime(),
-        G_BUILD_COMMIT_HASH: JSON.stringify(getRevision()),
-        G_BUILD_VERSION: JSON.stringify(getVersion()),
-        G_ALL_UI_IMAGES: JSON.stringify(getAllResourceImages()),
-    };
-
-    const minifyNames = false;
-
-    return {
-        mode: "production",
-        entry: {
-            "bundle.js": [path.resolve(__dirname, "..", "src", "js", "main.js")],
     },
-        node: {
+    {
-            fs: "empty",
+        test: /\.js$/,
+        enforce: "pre",
+        exclude: /node_modules/,
+        use: [
+            {
+                loader: "webpack-strip-block",
+                options: {
+                    start: "typehints:start",
+                    end: "typehints:end",
                 },
-        output: {
-            filename: "bundle.js",
-            path: path.resolve(__dirname, "..", "build"),
             },
-        context: path.resolve(__dirname, ".."),
+            {
-        stats: {
+                // TODO: Consider removing this separation
-            // Examine all modules
+                loader: "webpack-strip-block",
-            maxModules: Infinity,
+                options: {
-            // Display bailout reasons
+                    start: "dev:start",
-            optimizationBailout: true,
+                    end: "dev:end",
                 },
-        devtool: false,
+            },
+        ],
+    },
+    {
+        test: /\.worker\.js$/,
+        use: [
+            {
+                loader: "worker-loader",
+                options: {
+                    filename: "[fullhash].worker.js",
+                    inline: "fallback",
+                },
+            },
+        ],
+    },
+    {
+        test: /\.js$/,
         resolve: {
-            alias: {
+            fullySpecified: false,
-                "global-compression": path.resolve(__dirname, "..", "src", "js", "core", "lzstring.js"),
         },
     },
-        optimization: {
+];
-            minimize: true,
-            // namedModules: true,
 
+/** @type {import("webpack").Configuration} */
+export default {
+    mode: "production",
+    entry: resolve("../src/js/main.js"),
+    context: resolve(".."),
+    output: {
+        path: resolve("../build"),
+        filename: "bundle.js",
+    },
+    resolve: {
+        fallback: { fs: false },
+        alias: {
+            "global-compression": resolve("../src/js/core/lzstring.js"),
+        },
+    },
+    stats: { optimizationBailout: true },
+    devtool: false,
+    optimization: {
         noEmitOnErrors: true,
         removeAvailableModules: true,
         removeEmptyChunks: true,
         mergeDuplicateChunks: true,
         flagIncludedChunks: true,
-            occurrenceOrder: true,
         providedExports: true,
         usedExports: true,
         concatenateModules: true,
         sideEffects: true,
-
         minimizer: [
             new TerserPlugin({
                 parallel: true,
-                    sourceMap: false,
-                    cache: false,
                 terserOptions: {
-                        ecma: es6 ? 6 : 5,
+                    ecma: 2020,
                     parse: {},
                     module: true,
                     toplevel: true,
-                        keep_classnames: !minifyNames,
+                    keep_classnames: true,
-                        keep_fnames: !minifyNames,
+                    keep_fnames: true,
-                        keep_fargs: !minifyNames,
-                        safari10: true,
                     compress: {
-                            arguments: false, // breaks
+                        arguments: false,
                         drop_console: false,
                         global_defs: globalDefs,
-                            keep_fargs: !minifyNames,
+                        keep_fargs: true,
                         keep_infinity: true,
                         passes: 2,
                         module: true,
@@ -117,144 +141,39 @@ module.exports = ({
                         toplevel: true,
                         unsafe_math: true,
                         unsafe_arrows: false,
-                            warnings: true,
                     },
                     mangle: {
-                            reserved: ["__$S__"],
                         eval: true,
-                            keep_classnames: !minifyNames,
+                        keep_classnames: true,
-                            keep_fnames: !minifyNames,
+                        keep_fnames: true,
                         module: true,
                         toplevel: true,
-                            safari10: true,
                     },
                     output: {
                         comments: false,
                         ascii_only: true,
                         beautify: false,
                         braces: false,
-                            ecma: es6 ? 6 : 5,
+                        ecma: 2020,
-                            preamble:
-                                "/* shapez.io Codebase - Copyright 2022 tobspr Games - " +
-                                getVersion() +
-                                " @ " +
-                                getRevision() +
-                                " */",
                     },
                 },
             }),
         ],
     },
+    plugins: [
+        new DefinePlugin(globalDefs),
+        new IgnorePlugin({ resourceRegExp: /\.(png|jpe?g|svg)$/ }),
+        new IgnorePlugin({ resourceRegExp: /\.nobuild/ }),
+        new DeadCodePlugin({
+            patterns: ["../src/js/**/*.js"],
+        }),
+    ],
+    module: { rules: moduleRules },
     performance: {
         maxEntrypointSize: 5120000,
         maxAssetSize: 5120000,
     },
-        plugins: [
+    experiments: {
-            new webpack.DefinePlugin(globalDefs),
+        topLevelAwait: true,
-
-            new UnusedFilesPlugin({
-                failOnUnused: false,
-                cwd: path.join(__dirname, "..", "src", "js"),
-                patterns: ["../src/js/**/*.js"],
-            }),
-        ],
-        module: {
-            rules: [
-                {
-                    test: /\.json$/,
-                    enforce: "pre",
-                    use: ["./gulp/loader.compressjson"],
-                    type: "javascript/auto",
     },
-                { test: /\.(png|jpe?g|svg)$/, loader: "ignore-loader" },
-                { test: /\.nobuild/, loader: "ignore-loader" },
-                {
-                    test: /\.js$/,
-                    enforce: "pre",
-                    exclude: /node_modules/,
-                    use: [
-                        {
-                            loader: "webpack-strip-block",
-                            options: {
-                                start: "typehints:start",
-                                end: "typehints:end",
-                            },
-                        },
-                        {
-                            loader: "webpack-strip-block",
-                            options: {
-                                start: "dev:start",
-                                end: "dev:end",
-                            },
-                        },
-                        {
-                            loader: "webpack-strip-block",
-                            options: {
-                                start: "wires:start",
-                                end: "wires:end",
-                            },
-                        },
-                    ],
-                },
-                {
-                    test: /\.js$/,
-                    use: [
-                        // "thread-loader",
-                        {
-                            loader: path.resolve(__dirname, "mod.js"),
-                        },
-                        {
-                            loader: "babel-loader?cacheDirectory",
-                            options: {
-                                configFile: require.resolve(
-                                    es6 ? "./babel-es6.config.js" : "./babel.config.js"
-                                ),
-                            },
-                        },
-                        "uglify-template-string-loader", // Finally found this plugin
-                        StringReplacePlugin.replace({
-                            replacements: [
-                                { pattern: /globalConfig\.tileSize/g, replacement: () => "32" },
-                                { pattern: /globalConfig\.halfTileSize/g, replacement: () => "16" },
-                                {
-                                    pattern: /globalConfig\.beltSpeedItemsPerSecond/g,
-                                    replacement: () => "2.0",
-                                },
-                                { pattern: /globalConfig\.debug/g, replacement: () => "''" },
-                            ],
-                        }),
-                    ],
-                },
-                {
-                    test: /\.worker\.js$/,
-                    use: [
-                        {
-                            loader: "worker-loader",
-                            options: {
-                                fallback: false,
-                                inline: true,
-                            },
-                        },
-                        {
-                            loader: "babel-loader?cacheDirectory",
-                            options: {
-                                configFile: require.resolve(
-                                    es6 ? "./babel-es6.config.js" : "./babel.config.js"
-                                ),
-                            },
-                        },
-                    ],
-                },
-                {
-                    test: /\.md$/,
-                    use: ["html-loader", "markdown-loader"],
-                },
-                {
-                    test: /\.ya?ml$/,
-                    type: "json", // Required by Webpack v4
-                    use: "yaml-loader",
-                },
-            ],
-        },
-    };
 };

package.json

@@ -1,106 +1,87 @@
 {
-    "name": "shapez.io",
+    "name": "shapez",
-    "version": "1.0.0",
+    "version": "1.6.0",
     "main": "index.js",
     "repository": "https://github.com/tobspr-games/shapez.io",
     "author": "tobspr Games <hello@tobspr.io>",
-    "license": "MIT",
+    "license": "GPL-3.0-or-later",
     "private": true,
+    "type": "module",
     "scripts": {
-        "dev": "cd gulp && yarn gulp",
+        "gulp": "gulp --cwd gulp",
-        "devStandalone": "cd gulp && yarn gulp serve.standalone-steam",
-        "tslint": "cd src/js && tsc",
         "lint": "eslint src/js",
         "prettier-all": "prettier --write src/**/*.* && prettier --write gulp/**/*.*",
-        "publishOnItchWindows": "butler push tmp_standalone_files/shapez.io-standalone-win32-x64 tobspr/shapezio:windows --userversion-file version",
-        "publishOnItchLinux": "butler push tmp_standalone_files/shapez.io-standalone-linux-x64 tobspr/shapezio:linux --userversion-file version",
-        "publishOnItch": "yarn publishOnItchWindows && yarn publishOnItchLinux",
-        "publishOnSteam": "cd gulp/steampipe && ./upload.bat",
-        "publishStandalone": "yarn publishOnItch && yarn publishOnSteam",
-        "publishWeb": "cd gulp && yarn main.deploy.prod",
-        "publish": "yarn publishStandalone && yarn publishWeb",
-        "syncTranslations": "node sync-translations.js",
         "buildTypes": "tsc src/js/application.js --declaration --allowJs --emitDeclarationOnly --skipLibCheck --out types.js"
     },
     "dependencies": {
-        "@babel/core": "^7.5.4",
-        "@babel/plugin-transform-block-scoping": "^7.4.4",
-        "@babel/plugin-transform-classes": "^7.5.5",
-        "@babel/preset-env": "^7.5.4",
-        "@nastyox/rando.js": "^2.0.5",
-        "@types/cordova": "^0.0.34",
-        "@types/filesystem": "^0.0.29",
         "ajv": "^6.10.2",
-        "babel-core": "^6.26.3",
-        "babel-loader": "^8.0.4",
-        "circular-dependency-plugin": "^5.0.2",
         "circular-json": "^0.5.9",
         "clipboard-copy": "^3.1.0",
-        "colors": "^1.3.3",
-        "core-js": "3",
         "crc": "^3.8.0",
-        "cssnano-preset-advanced": "^4.0.7",
         "debounce-promise": "^3.1.2",
-        "email-validator": "^2.0.4",
-        "eslint": "7.1.0",
-        "fastdom": "^1.0.8",
-        "flatted": "^2.0.1",
         "howler": "^2.1.2",
-        "html-loader": "^0.5.5",
-        "ignore-loader": "^0.1.2",
-        "logrocket": "^1.0.7",
         "lz-string": "^1.4.4",
-        "markdown-loader": "^4.0.0",
-        "match-all": "^1.2.5",
-        "phonegap-plugin-mobile-accessibility": "^1.0.5",
-        "postcss": ">=5.0.0",
-        "promise-polyfill": "^8.1.0",
-        "query-string": "^6.8.1",
         "rusha": "^0.8.13",
-        "semver": "^7.3.5",
+        "semver": "^7.3.5"
-        "strictdom": "^1.0.1",
-        "string-replace-webpack-plugin": "^0.1.3",
-        "terser-webpack-plugin": "^1.1.0",
-        "typescript": "3.9.3",
-        "uglify-template-string-loader": "^1.1.0",
-        "unused-files-webpack-plugin": "^3.4.0",
-        "webpack": "^4.43.0",
-        "webpack-bundle-analyzer": "^3.0.3",
-        "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",
-        "yaml": "^1.10.0",
-        "yawn-yaml": "^1.5.0"
     },
     "devDependencies": {
-        "@octokit/rest": "^18.0.6",
+        "@types/circular-dependency-plugin": "^5.0.5",
-        "@typescript-eslint/eslint-plugin": "3.0.1",
+        "@types/filesystem": "^0.0.29",
-        "@typescript-eslint/parser": "3.0.1",
+        "@types/gulp": "^4.0.9",
-        "autoprefixer": "^9.4.3",
+        "@types/gulp-htmlmin": "^1.3.32",
-        "babel-plugin-closure-elimination": "^1.3.0",
+        "@types/lz-string": "^1.3.34",
-        "babel-plugin-console-source": "^2.0.2",
+        "@types/node": "^16.0.0",
-        "babel-plugin-danger-remove-unused-import": "^1.1.2",
+        "@types/webpack": "^5.28.0",
+        "@typescript-eslint/eslint-plugin": "^5.42.1",
+        "@typescript-eslint/parser": "^5.42.1",
+        "browser-sync": "^2.27.10",
+        "circular-dependency-plugin": "^5.2.2",
         "css-mqpacker": "^7.0.0",
         "cssnano": "^4.1.10",
-        "eslint-config-prettier": "6.11.0",
+        "delete-empty": "^3.0.0",
-        "eslint-plugin-prettier": "3.1.3",
+        "electron-notarize": "^1.2.1",
-        "faster.js": "^1.1.0",
+        "electron-packager": "^15.4.0",
+        "eslint": "^8.27.0",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-prettier": "^4.2.1",
         "glob": "^7.1.3",
+        "gulp": "^4.0.2",
+        "gulp-audiosprite": "^1.1.0",
+        "gulp-cache": "^1.1.3",
+        "gulp-cached": "^1.1.1",
+        "gulp-clean": "^0.4.0",
+        "gulp-dart-sass": "^1.0.2",
+        "gulp-dom": "^1.0.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-plumber": "^1.2.1",
+        "gulp-postcss": "^8.0.0",
+        "gulp-rename": "^2.0.0",
+        "gulp-sass-lint": "^1.4.0",
+        "gulp-sftp": "git+https://git@github.com/webksde/gulp-sftp",
+        "gulp-webserver": "^0.9.1",
+        "gulp-yaml": "^2.0.4",
+        "imagemin-gifsicle": "^7.0.0",
+        "imagemin-jpegtran": "^7.0.0",
         "imagemin-mozjpeg": "^8.0.0",
         "imagemin-pngquant": "^8.0.0",
-        "jimp": "^0.6.1",
-        "js-yaml": "^3.13.1",
         "postcss-assets": "^5.0.0",
+        "postcss-critical-split": "^2.5.3",
         "postcss-preset-env": "^6.5.0",
         "postcss-round-subpixels": "^1.2.0",
-        "postcss-unprefix": "^2.1.3",
         "prettier": "^2.0.4",
-        "sass-unused": "^0.3.0",
         "strip-json-comments": "^3.0.1",
-        "trim": "^0.0.1",
+        "terser-webpack-plugin": "^5.3.6",
+        "typescript": "3.9.3",
+        "webpack": "^5.75.0",
+        "webpack-deadcode-plugin": "^0.1.17",
+        "webpack-stream": "^7.0.0",
+        "webpack-strip-block": "^0.2.0",
+        "worker-loader": "^3.0.8",
+        "yaml": "^1.10.0",
         "yarn": "^1.22.4"
     }
 }

src/js/core/atlas_definitions.js

@@ -41,10 +41,13 @@ export class AtlasDefinition {
 }
 
 /** @type {AtlasDefinition[]} **/
-export const atlasFiles = require
+export const atlasFiles = (
+    await Promise.all(
+        import.meta
             // @ts-ignore
-    .context("../../../res_built/atlas/", false, /.*\.json/i)
+            .webpackContext("../../../res_built/atlas/", { recursive: false, regExp: /.*\.json/i })
             .keys()
             .map(f => f.replace(/^\.\//gi, ""))
-    .map(f => require("../../../res_built/atlas/" + f))
+            .map(f => import("../../../res_built/atlas/" + f))
-    .map(data => new AtlasDefinition(data));
+    )
+).map(data => new AtlasDefinition(data.default));

src/js/core/config.js

@@ -2,6 +2,8 @@
 import { Application } from "../application";
 /* typehints:end */
 
+import debug from "./config.local";
+
 export const IS_DEBUG =
     G_IS_DEV &&
     typeof window !== "undefined" &&
@@ -128,7 +130,7 @@ export const globalConfig = {
     },
 
     rendering: {},
-    debug: require("./config.local").default,
+    debug,
 
     currentDiscount: 0,
 

src/js/core/logging.js

@@ -1,5 +1,5 @@
 import { globalConfig } from "../core/config";
-const circularJson = require("circular-json");
+import circularJson from "circular-json";
 
 /*
 Logging functions

src/js/core/polyfills.js

@@ -116,8 +116,6 @@ function initExtensions() {
     };
 }
 
-// Fetch polyfill
-import "whatwg-fetch";
 // Other polyfills
 initPolyfills();
 initExtensions();

src/js/core/query_parameters.js

@@ -1,5 +1,4 @@
-const queryString = require("query-string");
+const options = Object.fromEntries(new URLSearchParams(location.search).entries());
-const options = queryString.parse(location.search);
 
 export let queryParamOptions = {
     embedProvider: null,

src/js/core/read_write_proxy.js

@@ -12,7 +12,7 @@ import { decompressX64, compressX64 } from "./lzstring";
 import { asyncCompressor, compressionPrefix } from "./async_compression";
 import { compressObject, decompressObject } from "../savegame/savegame_compressor";
 
-const debounce = require("debounce-promise");
+import debounce from "debounce-promise";
 
 const logger = createLogger("read_write_proxy");
 

src/js/core/utils.js

@@ -1,5 +1,4 @@
 import { T } from "../translations";
-import { rando } from "@nastyox/rando.js";
 import { WEB_STEAM_SSO_AUTHENTICATED } from "./steam_sso";
 
 const bigNumberSuffixTranslationKeys = ["thousands", "millions", "billions", "trillions"];
@@ -44,7 +43,7 @@ export function newEmptyMap() {
  * @param {number} end
  */
 export function randomInt(start, end) {
-    return rando(start, end);
+    return Math.floor(Math.random() * (end - start + 1) + start);
 }
 
 /**

src/js/game/component_registry.js

@@ -53,7 +53,7 @@ export function initComponentRegistry() {
 
     assert(
         // @ts-ignore
-        require.context("./components", false, /.*\.js/i).keys().length ===
+        import.meta.webpackContext("./components", { recursive: false, regExp: /.*\.js/i }).keys().length ===
             gComponentRegistry.getNumEntries(),
         "Not all components are registered"
     );

src/js/game/hud/parts/constant_signal_edit.js

@@ -11,7 +11,6 @@ import { Entity } from "../../entity";
 import { BOOL_FALSE_SINGLETON, BOOL_TRUE_SINGLETON } from "../../items/boolean_item";
 import { COLOR_ITEM_SINGLETONS } from "../../items/color_item";
 import { BaseHUDPart } from "../base_hud_part";
-import trim from "trim";
 import { enumColors } from "../../colors";
 import { ShapeDefinition } from "../../shape_definition";
 
@@ -192,7 +191,7 @@ export class HUDConstantSignalEdit extends BaseHUDPart {
             return null;
         }
 
-        code = trim(code);
+        code = code.trim();
         const codeLower = code.toLowerCase();
 
         if (MODS_ADDITIONAL_CONSTANT_SIGNAL_RESOLVER[codeLower]) {

src/js/game/hud/parts/puzzle_editor_review.js

@@ -13,7 +13,6 @@ import { ShapeItem } from "../../items/shape_item";
 import { ShapeDefinition } from "../../shape_definition";
 import { BaseHUDPart } from "../base_hud_part";
 
-const trim = require("trim");
 const logger = createLogger("puzzle-review");
 
 export class HUDPuzzleEditorReview extends BaseHUDPart {
@@ -106,7 +105,7 @@ export class HUDPuzzleEditorReview extends BaseHUDPart {
             label: T.dialogs.submitPuzzle.descName,
             placeholder: T.dialogs.submitPuzzle.placeholderName,
             defaultValue: title,
-            validator: val => trim(val).match(regex) && trim(val).length > 0,
+            validator: val => val.trim().match(regex) && val.trim().length > 0,
         });
 
         let items = new Set();
@@ -135,7 +134,7 @@ export class HUDPuzzleEditorReview extends BaseHUDPart {
             label: null,
             placeholder: "CuCuCuCu",
             defaultValue: shortKey,
-            validator: val => ShapeDefinition.isValidShortKey(trim(val)),
+            validator: val => ShapeDefinition.isValidShortKey(val.trim()),
         });
 
         const dialog = new DialogWithForm({
@@ -153,8 +152,8 @@ export class HUDPuzzleEditorReview extends BaseHUDPart {
         this.root.hud.parts.dialogs.internalShowDialog(dialog);
 
         dialog.buttonSignals.ok.add(() => {
-            const title = trim(nameInput.getValue());
+            const title = nameInput.getValue().trim();
-            const shortKey = trim(shapeKeyInput.getValue());
+            const shortKey = shapeKeyInput.getValue().trim();
             this.doSubmitPuzzle(title, shortKey);
         });
     }

src/js/game/hud/parts/puzzle_play_metadata.js

@@ -6,8 +6,6 @@ import { formatBigNumberFull, formatSeconds, makeDiv } from "../../../core/utils
 import { T } from "../../../translations";
 import { BaseHUDPart } from "../base_hud_part";
 
-const copy = require("clipboard-copy");
-
 export class HUDPuzzlePlayMetadata extends BaseHUDPart {
     createElements(parent) {
         this.titleElement = makeDiv(parent, "ingame_HUD_PuzzlePlayTitle");

src/js/game/hud/parts/shape_viewer.js

@@ -6,7 +6,7 @@ import { ShapeDefinition } from "../../shape_definition";
 import { BaseHUDPart } from "../base_hud_part";
 import { DynamicDomAttach } from "../dynamic_dom_attach";
 
-const copy = require("clipboard-copy");
+import copy from "clipboard-copy";
 
 export class HUDShapeViewer extends BaseHUDPart {
     createElements(parent) {

src/js/game/hud/parts/wires_overlay.js

@@ -8,7 +8,7 @@ import { KEYMAPPINGS } from "../../key_action_mapper";
 import { enumHubGoalRewards } from "../../tutorial_goals";
 import { BaseHUDPart } from "../base_hud_part";
 
-const copy = require("clipboard-copy");
+import copy from "clipboard-copy";
 const wiresBackgroundDpi = 4;
 
 export class HUDWiresOverlay extends BaseHUDPart {

src/js/game/modes/puzzle_play.js

@@ -33,7 +33,7 @@ import { gMetaBuildingRegistry } from "../../core/global_registries";
 import { HUDPuzzleNextPuzzle } from "../hud/parts/next_puzzle";
 
 const logger = createLogger("puzzle-play");
-const copy = require("clipboard-copy");
+import copy from "clipboard-copy";
 
 export class PuzzlePlayGameMode extends PuzzleGameMode {
     static getId() {

src/js/game/theme.js

@@ -1,6 +1,9 @@
+import dark from "./themes/dark.json";
+import light from "./themes/light.json";
+
 export const THEMES = {
-    dark: require("./themes/dark.json"),
+    dark,
-    light: require("./themes/light.json"),
+    light,
 };
 
 export let THEME = THEMES.light;

src/js/languages.js

@@ -1,3 +1,27 @@
+import zh_CN from "./built-temp/base-zh-CN.json";
+import zh_TW from "./built-temp/base-zh-TW.json";
+import ja from "./built-temp/base-ja.json";
+import kor from "./built-temp/base-kor.json";
+import cz from "./built-temp/base-cz.json";
+import da from "./built-temp/base-da.json";
+import de from "./built-temp/base-de.json";
+import es from "./built-temp/base-es.json";
+import fr from "./built-temp/base-fr.json";
+import it from "./built-temp/base-it.json";
+import hu from "./built-temp/base-hu.json";
+import nl from "./built-temp/base-nl.json";
+import no from "./built-temp/base-no.json";
+import pl from "./built-temp/base-pl.json";
+import pt_PT from "./built-temp/base-pt-PT.json";
+import pt_BR from "./built-temp/base-pt-BR.json";
+import ro from "./built-temp/base-ro.json";
+import ru from "./built-temp/base-ru.json";
+import fi from "./built-temp/base-fi.json";
+import sv from "./built-temp/base-sv.json";
+import tr from "./built-temp/base-tr.json";
+import uk from "./built-temp/base-uk.json";
+import he from "./built-temp/base-he.json";
+
 /**
  * @type {Object<string, {name: string, data: any, code: string, region: string}>}
  */
@@ -12,7 +36,7 @@ export const LANGUAGES = {
     "zh-CN": {
         // simplified chinese
         name: "简体中文",
-        data: require("./built-temp/base-zh-CN.json"),
+        data: zh_CN,
         code: "zh",
         region: "CN",
     },
@@ -20,7 +44,7 @@ export const LANGUAGES = {
     "zh-TW": {
         // traditional chinese
         name: "繁體中文",
-        data: require("./built-temp/base-zh-TW.json"),
+        data: zh_TW,
         code: "zh",
         region: "TW",
     },
@@ -28,7 +52,7 @@ export const LANGUAGES = {
     "ja": {
         // japanese
         name: "日本語",
-        data: require("./built-temp/base-ja.json"),
+        data: ja,
         code: "ja",
         region: "",
     },
@@ -36,7 +60,7 @@ export const LANGUAGES = {
     "kor": {
         // korean
         name: "한국어",
-        data: require("./built-temp/base-kor.json"),
+        data: kor,
         code: "ko",
         region: "",
     },
@@ -44,7 +68,7 @@ export const LANGUAGES = {
     "cs": {
         // czech
         name: "Čeština",
-        data: require("./built-temp/base-cz.json"),
+        data: cz,
         code: "cs",
         region: "",
     },
@@ -52,7 +76,7 @@ export const LANGUAGES = {
     "da": {
         // danish
         name: "Dansk",
-        data: require("./built-temp/base-da.json"),
+        data: da,
         code: "da",
         region: "",
     },
@@ -60,7 +84,7 @@ export const LANGUAGES = {
     "de": {
         // german
         name: "Deutsch",
-        data: require("./built-temp/base-de.json"),
+        data: de,
         code: "de",
         region: "",
     },
@@ -68,7 +92,7 @@ export const LANGUAGES = {
     "es-419": {
         // spanish
         name: "Español",
-        data: require("./built-temp/base-es.json"),
+        data: es,
         code: "es",
         region: "",
     },
@@ -76,7 +100,7 @@ export const LANGUAGES = {
     "fr": {
         // french
         name: "Français",
-        data: require("./built-temp/base-fr.json"),
+        data: fr,
         code: "fr",
         region: "",
     },
@@ -84,7 +108,7 @@ export const LANGUAGES = {
     "it": {
         // italian
         name: "Italiano",
-        data: require("./built-temp/base-it.json"),
+        data: it,
         code: "it",
         region: "",
     },
@@ -92,7 +116,7 @@ export const LANGUAGES = {
     "hu": {
         // hungarian
         name: "Magyar",
-        data: require("./built-temp/base-hu.json"),
+        data: hu,
         code: "hu",
         region: "",
     },
@@ -100,7 +124,7 @@ export const LANGUAGES = {
     "nl": {
         // dutch
         name: "Nederlands",
-        data: require("./built-temp/base-nl.json"),
+        data: nl,
         code: "nl",
         region: "",
     },
@@ -108,7 +132,7 @@ export const LANGUAGES = {
     "no": {
         // norwegian
         name: "Norsk",
-        data: require("./built-temp/base-no.json"),
+        data: no,
         code: "no",
         region: "",
     },
@@ -116,7 +140,7 @@ export const LANGUAGES = {
     "pl": {
         // polish
         name: "Polski",
-        data: require("./built-temp/base-pl.json"),
+        data: pl,
         code: "pl",
         region: "",
     },
@@ -124,15 +148,15 @@ export const LANGUAGES = {
     "pt-PT": {
         // portuguese
         name: "Português",
-        data: require("./built-temp/base-pt-PT.json"),
+        data: pt_PT,
         code: "pt",
         region: "PT",
     },
 
     "pt-BR": {
-        // portuguese - brazil
+        // portuguese _ brazil
         name: "Português - Brasil",
-        data: require("./built-temp/base-pt-BR.json"),
+        data: pt_BR,
         code: "pt",
         region: "BR",
     },
@@ -140,7 +164,7 @@ export const LANGUAGES = {
     "ro": {
         // romanian
         name: "Română",
-        data: require("./built-temp/base-ro.json"),
+        data: ro,
         code: "ro",
         region: "",
     },
@@ -148,7 +172,7 @@ export const LANGUAGES = {
     "ru": {
         // russian
         name: "Русский",
-        data: require("./built-temp/base-ru.json"),
+        data: ru,
         code: "ru",
         region: "",
     },
@@ -156,7 +180,7 @@ export const LANGUAGES = {
     "fi": {
         // finish
         name: "Suomi",
-        data: require("./built-temp/base-fi.json"),
+        data: fi,
         code: "fi",
         region: "",
     },
@@ -164,7 +188,7 @@ export const LANGUAGES = {
     "sv": {
         // swedish
         name: "Svenska",
-        data: require("./built-temp/base-sv.json"),
+        data: sv,
         code: "sv",
         region: "",
     },
@@ -172,7 +196,7 @@ export const LANGUAGES = {
     "tr": {
         // turkish
         name: "Türkçe",
-        data: require("./built-temp/base-tr.json"),
+        data: tr,
         code: "tr",
         region: "",
     },
@@ -180,7 +204,7 @@ export const LANGUAGES = {
     "uk": {
         // ukrainian
         name: "Українська",
-        data: require("./built-temp/base-uk.json"),
+        data: uk,
         code: "uk",
         region: "",
     },
@@ -188,7 +212,7 @@ export const LANGUAGES = {
     "he": {
         // hebrew
         name: "עברית",
-        data: require("./built-temp/base-he.json"),
+        data: he,
         code: "he",
         region: "",
     },

src/js/mods/modloader.js

@@ -107,7 +107,7 @@ export class ModLoader {
     exposeExports() {
         if (G_IS_DEV || G_IS_STANDALONE) {
             let exports = {};
-            const modules = require.context("../", true, /\.js$/);
+            const modules = import.meta.webpackContext("../", { recursive: true, regExp: /\.js$/ });
             Array.from(modules.keys()).forEach(key => {
                 // @ts-ignore
                 const module = modules(key);

src/js/platform/browser/sound.js

@@ -3,12 +3,12 @@ import { cachebust } from "../../core/cachebust";
 import { createLogger } from "../../core/logging";
 import { globalConfig } from "../../core/config";
 
-const { Howl, Howler } = require("howler");
+import { Howl, Howler } from "howler";
 
 const logger = createLogger("sound/browser");
 
 // @ts-ignore
-const sprites = require("../../built-temp/sfx.json");
+import sprites from "../../built-temp/sfx.json";
 
 class SoundSpritesContainer {
     constructor() {

src/js/savegame/puzzle_serializer.js

@@ -11,7 +11,6 @@ import { gMetaBuildingRegistry } from "../core/global_registries";
 import { MetaGoalAcceptorBuilding } from "../game/buildings/goal_acceptor";
 import { createLogger } from "../core/logging";
 import { BaseItem } from "../game/base_item";
-import trim from "trim";
 import { enumColors } from "../game/colors";
 import { COLOR_ITEM_SINGLETONS } from "../game/items/color_item";
 import { ShapeDefinition } from "../game/shape_definition";
@@ -117,7 +116,7 @@ export class PuzzleSerializer {
             return null;
         }
 
-        code = trim(code);
+        code = code.trim();
         const codeLower = code.toLowerCase();
 
         if (enumColors[codeLower]) {

src/js/savegame/savegame_interface.js

@@ -1,6 +1,6 @@
 import { createLogger } from "../core/logging";
 
-const Ajv = require("ajv");
+import Ajv from "ajv";
 const ajv = new Ajv({
     allErrors: false,
     uniqueItems: false,

src/js/savegame/savegame_manager.js

@@ -5,7 +5,7 @@ import { globalConfig } from "../core/config";
 import { Savegame } from "./savegame";
 const logger = createLogger("savegame_manager");
 
-const Rusha = require("rusha");
+import Rusha from "rusha";
 
 /**
  * @typedef {import("./savegame_typedefs").SavegamesData} SavegamesData

src/js/savegame/schemas/1000.js

@@ -1,6 +1,6 @@
 import { BaseSavegameInterface } from "../savegame_interface.js";
 
-const schema = require("./1000.json");
+import schema from "./1000.json";
 
 export class SavegameInterface_V1000 extends BaseSavegameInterface {
     getVersion() {

src/js/savegame/schemas/1001.js

@@ -3,7 +3,7 @@ import { createLogger } from "../../core/logging.js";
 import { T } from "../../translations.js";
 import { TypeVector, TypeNumber, TypeString, TypeNullable } from "../serialization_data_types.js";
 
-const schema = require("./1001.json");
+import schema from "./1001.json";
 
 const logger = createLogger("savegame_interface/1001");
 

src/js/savegame/schemas/1002.js

@@ -2,7 +2,7 @@ import { createLogger } from "../../core/logging.js";
 import { T } from "../../translations.js";
 import { SavegameInterface_V1001 } from "./1001.js";
 
-const schema = require("./1002.json");
+import schema from "./1002.json";
 const logger = createLogger("savegame_interface/1002");
 
 export class SavegameInterface_V1002 extends SavegameInterface_V1001 {

src/js/savegame/schemas/1003.js

@@ -1,7 +1,7 @@
 import { createLogger } from "../../core/logging.js";
 import { SavegameInterface_V1002 } from "./1002.js";
 
-const schema = require("./1003.json");
+import schema from "./1003.json";
 const logger = createLogger("savegame_interface/1003");
 
 export class SavegameInterface_V1003 extends SavegameInterface_V1002 {

src/js/savegame/schemas/1004.js

@@ -1,7 +1,7 @@
 import { createLogger } from "../../core/logging.js";
 import { SavegameInterface_V1003 } from "./1003.js";
 
-const schema = require("./1004.json");
+import schema from "./1004.json";
 const logger = createLogger("savegame_interface/1004");
 
 export class SavegameInterface_V1004 extends SavegameInterface_V1003 {

src/js/savegame/schemas/1005.js

@@ -1,7 +1,7 @@
 import { createLogger } from "../../core/logging.js";
 import { SavegameInterface_V1004 } from "./1004.js";
 
-const schema = require("./1005.json");
+import schema from "./1005.json";
 const logger = createLogger("savegame_interface/1005");
 
 export class SavegameInterface_V1005 extends SavegameInterface_V1004 {

src/js/savegame/schemas/1006.js

@@ -21,7 +21,7 @@ import { Entity } from "../../game/entity.js";
 import { defaultBuildingVariant, MetaBuilding } from "../../game/meta_building.js";
 import { SavegameInterface_V1005 } from "./1005.js";
 
-const schema = require("./1006.json");
+import schema from "./1006.json";
 const logger = createLogger("savegame_interface/1006");
 
 /**

src/js/savegame/schemas/1007.js

@@ -1,7 +1,7 @@
 import { createLogger } from "../../core/logging.js";
 import { SavegameInterface_V1006 } from "./1006.js";
 
-const schema = require("./1007.json");
+import schema from "./1007.json";
 const logger = createLogger("savegame_interface/1007");
 
 export class SavegameInterface_V1007 extends SavegameInterface_V1006 {

src/js/savegame/schemas/1008.js

@@ -1,7 +1,7 @@
 import { createLogger } from "../../core/logging.js";
 import { SavegameInterface_V1007 } from "./1007.js";
 
-const schema = require("./1008.json");
+import schema from "./1008.json";
 const logger = createLogger("savegame_interface/1008");
 
 export class SavegameInterface_V1008 extends SavegameInterface_V1007 {

src/js/savegame/schemas/1009.js

@@ -2,7 +2,7 @@ import { createLogger } from "../../core/logging.js";
 import { RegularGameMode } from "../../game/modes/regular.js";
 import { SavegameInterface_V1008 } from "./1008.js";
 
-const schema = require("./1009.json");
+import schema from "./1009.json";
 const logger = createLogger("savegame_interface/1009");
 
 export class SavegameInterface_V1009 extends SavegameInterface_V1008 {

src/js/savegame/schemas/1010.js

@@ -1,7 +1,7 @@
 import { createLogger } from "../../core/logging.js";
 import { SavegameInterface_V1009 } from "./1009.js";
 
-const schema = require("./1010.json");
+import schema from "./1010.json";
 const logger = createLogger("savegame_interface/1010");
 
 export class SavegameInterface_V1010 extends SavegameInterface_V1009 {

src/js/states/main_menu.js

@@ -24,8 +24,6 @@ import { PlatformWrapperImplElectron } from "../platform/electron/wrapper";
 import { Savegame } from "../savegame/savegame";
 import { T } from "../translations";
 
-const trim = require("trim");
-
 /**
  * @typedef {import("../savegame/savegame_typedefs").SavegameMetadata} SavegameMetadata
  * @typedef {import("../profile/setting_types").EnumSetting} EnumSetting
@@ -723,7 +721,7 @@ export class MainMenuState extends GameState {
 
         // When confirmed, save the name
         dialog.buttonSignals.ok.add(() => {
-            game.name = trim(nameInput.getValue());
+            game.name = nameInput.getValue().trim();
             this.app.savegameMgr.writeAsync();
             this.renderSavegames();
         });

src/js/translations.js

@@ -5,7 +5,7 @@ import { LANGUAGES } from "./languages";
 const logger = createLogger("translations");
 
 // @ts-ignore
-const baseTranslations = require("./built-temp/base-en.json");
+import baseTranslations from "./built-temp/base-en.json";
 
 export let T = baseTranslations;
 

sync-translations.js

@@ -1,7 +1,6 @@
 // Synchronizes all translations
 
 const fs = require("fs");
-const matchAll = require("match-all");
 const path = require("path");
 const YAML = require("yaml");
 
@@ -36,8 +35,8 @@ function match(originalObj, translatedObj, path = "/", ignorePlaceholderMismatch
         if (typeof valueOriginal === "object") {
             match(valueOriginal, valueMatching, path + key + "/", ignorePlaceholderMismatch);
         } else if (typeof valueOriginal === "string") {
-            const originalPlaceholders = matchAll(valueOriginal, placeholderRegexp).toArray();
+            const originalPlaceholders = [...valueOriginal.matchAll(placeholderRegexp)];
-            const translatedPlaceholders = matchAll(valueMatching, placeholderRegexp).toArray();
+            const translatedPlaceholders = [...valueMatching.matchAll(placeholderRegexp)];
 
             if (!ignorePlaceholderMismatch && originalPlaceholders.length !== translatedPlaceholders.length) {
                 console.warn(