Merge pull request #2 from EmeraldBlock/master

make things make sense

.gitattributes

@@ -1,4 +0,0 @@
-*.wav filter=lfs diff=lfs merge=lfs -text
-*.webm filter=lfs diff=lfs merge=lfs -text
-*.mp3 filter=lfs diff=lfs merge=lfs -text
-*.psd filter=lfs diff=lfs merge=lfs -text

README.md

@@ -22,8 +22,6 @@ Your goal is to produce shapes by cutting, rotating, merging and painting parts
 
 ## Building
 
--   Make sure git `git lfs` extension is on your path
--   Run `git lfs pull` to download sound assets
 -   Make sure `ffmpeg` is on your path
 -   Install Node.js and Yarn
 -   Run `yarn` in the root folder

gulp/.gitattributes

@@ -1 +0,0 @@
-*.wav filter=lfs diff=lfs merge=lfs -text

gulp/html.js

@@ -54,19 +54,19 @@ function gulptasksHTML($, gulp, buildFolder) {
                         document.head.appendChild(css);
 
                         // Append async css
-                        const asyncCss = document.createElement("link");
+                        // const asyncCss = document.createElement("link");
-                        asyncCss.rel = "stylesheet";
+                        // asyncCss.rel = "stylesheet";
-                        asyncCss.type = "text/css";
+                        // asyncCss.type = "text/css";
-                        asyncCss.media = "none";
+                        // asyncCss.media = "none";
-                        asyncCss.setAttribute("onload", "this.media='all'");
+                        // asyncCss.setAttribute("onload", "this.media='all'");
-                        asyncCss.href = cachebust("async-resources.css");
+                        // asyncCss.href = cachebust("async-resources.css");
-                        if (integrity) {
+                        // if (integrity) {
-                            asyncCss.setAttribute(
+                        //     asyncCss.setAttribute(
-                                "integrity",
+                        //         "integrity",
-                                computeIntegrityHash(path.join(buildFolder, "async-resources.css"))
+                        //         computeIntegrityHash(path.join(buildFolder, "async-resources.css"))
-                            );
+                        //     );
-                        }
+                        // }
-                        document.head.appendChild(asyncCss);
+                        // document.head.appendChild(asyncCss);
 
                         if (app) {
                             // Append cordova link

res_raw/sounds/music/theme-short.wav

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:df7487fb5e8cb34cecee2519b9c3162a5107d2d7b1301c4a550904cfb108a015
-size 223361394

src/css/ingame_hud/beta_overlay.scss

@@ -1,8 +1,24 @@
 #ingame_HUD_BetaOverlay {
     position: fixed;
     @include S(top, 10px);
-    @include S(right, 15px);
+    left: 50%;
+    transform: translateX(-50%);
     color: $colorRedBright;
     @include Heading;
     text-transform: uppercase;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+    h2 {
+        @include PlainText;
+    }
+
+    span {
+        color: #555;
+        @include SuperSmallText;
+    }
 }

src/css/ingame_hud/dialogs.scss

@@ -178,6 +178,27 @@
                     display: list-item;
                 }
             }
+
+            .ingameItemChooser {
+                @include S(margin, 20px, 0);
+                display: grid;
+                grid-auto-flow: column;
+                grid-auto-columns: 1fr;
+                @include S(grid-column-gap, 3px);
+
+                canvas {
+                    pointer-events: all;
+                    @include S(width, 25px);
+                    @include S(height, 25px);
+                    position: relative;
+                    cursor: pointer;
+                    @include IncreasedClickArea(3px);
+
+                    &:hover {
+                        opacity: 0.9;
+                    }
+                }
+            }
         }
 
         > .buttons {

src/js/core/background_resources_loader.js

@@ -1,215 +1,232 @@
-/* typehints:start */
+/* typehints:start */
-import { Application } from "../application";
+import { Application } from "../application";
-/* typehints:end */
+/* typehints:end */
-
+
-import { Loader } from "./loader";
+import { Loader } from "./loader";
-import { createLogger } from "./logging";
+import { createLogger } from "./logging";
-import { Signal } from "./signal";
+import { Signal } from "./signal";
-import { SOUNDS, MUSIC } from "../platform/sound";
+import { SOUNDS, MUSIC } from "../platform/sound";
-import { AtlasDefinition, atlasFiles } from "./atlas_definitions";
+import { AtlasDefinition, atlasFiles } from "./atlas_definitions";
-import { initBuildingCodesAfterResourcesLoaded } from "../game/meta_building_registry";
+import { initBuildingCodesAfterResourcesLoaded } from "../game/meta_building_registry";
-
+import { cachebust } from "./cachebust";
-const logger = createLogger("background_loader");
+
-
+const logger = createLogger("background_loader");
-const essentialMainMenuSprites = [
+
-    "logo.png",
+const essentialMainMenuSprites = [
-    ...G_ALL_UI_IMAGES.filter(src => src.startsWith("ui/") && src.indexOf(".gif") < 0),
+    "logo.png",
-];
+    ...G_ALL_UI_IMAGES.filter(src => src.startsWith("ui/") && src.indexOf(".gif") < 0),
-const essentialMainMenuSounds = [
+];
-    SOUNDS.uiClick,
+const essentialMainMenuSounds = [
-    SOUNDS.uiError,
+    SOUNDS.uiClick,
-    SOUNDS.dialogError,
+    SOUNDS.uiError,
-    SOUNDS.dialogOk,
+    SOUNDS.dialogError,
-    SOUNDS.swishShow,
+    SOUNDS.dialogOk,
-    SOUNDS.swishHide,
+    SOUNDS.swishShow,
-];
+    SOUNDS.swishHide,
-
+];
-const essentialBareGameAtlases = atlasFiles;
+
-const essentialBareGameSprites = G_ALL_UI_IMAGES.filter(src => src.indexOf(".gif") < 0);
+const essentialBareGameAtlases = atlasFiles;
-const essentialBareGameSounds = [MUSIC.theme];
+const essentialBareGameSprites = G_ALL_UI_IMAGES.filter(src => src.indexOf(".gif") < 0);
-
+const essentialBareGameSounds = [MUSIC.theme];
-const additionalGameSprites = [];
+
-// @ts-ignore
+const additionalGameSprites = [];
-const additionalGameSounds = [...Object.values(SOUNDS), ...Object.values(MUSIC)];
+// @ts-ignore
-
+const additionalGameSounds = [...Object.values(SOUNDS), ...Object.values(MUSIC)];
-export class BackgroundResourcesLoader {
+
-    /**
+export class BackgroundResourcesLoader {
-     *
+    /**
-     * @param {Application} app
+     *
-     */
+     * @param {Application} app
-    constructor(app) {
+     */
-        this.app = app;
+    constructor(app) {
-
+        this.app = app;
-        this.registerReady = false;
+
-        this.mainMenuReady = false;
+        this.registerReady = false;
-        this.bareGameReady = false;
+        this.mainMenuReady = false;
-        this.additionalReady = false;
+        this.bareGameReady = false;
-
+        this.additionalReady = false;
-        this.signalMainMenuLoaded = new Signal();
+
-        this.signalBareGameLoaded = new Signal();
+        this.signalMainMenuLoaded = new Signal();
-        this.signalAdditionalLoaded = new Signal();
+        this.signalBareGameLoaded = new Signal();
-
+        this.signalAdditionalLoaded = new Signal();
-        this.numAssetsLoaded = 0;
+
-        this.numAssetsToLoadTotal = 0;
+        this.numAssetsLoaded = 0;
-
+        this.numAssetsToLoadTotal = 0;
-        // Avoid loading stuff twice
+
-        this.spritesLoaded = [];
+        // Avoid loading stuff twice
-        this.soundsLoaded = [];
+        this.spritesLoaded = [];
-    }
+        this.soundsLoaded = [];
-
+    }
-    getNumAssetsLoaded() {
+
-        return this.numAssetsLoaded;
+    getNumAssetsLoaded() {
-    }
+        return this.numAssetsLoaded;
-
+    }
-    getNumAssetsTotal() {
+
-        return this.numAssetsToLoadTotal;
+    getNumAssetsTotal() {
-    }
+        return this.numAssetsToLoadTotal;
-
+    }
-    getPromiseForMainMenu() {
+
-        if (this.mainMenuReady) {
+    getPromiseForMainMenu() {
-            return Promise.resolve();
+        if (this.mainMenuReady) {
-        }
+            return Promise.resolve();
-
+        }
-        return new Promise(resolve => {
+
-            this.signalMainMenuLoaded.add(resolve);
+        return new Promise(resolve => {
-        });
+            this.signalMainMenuLoaded.add(resolve);
-    }
+        });
-
+    }
-    getPromiseForBareGame() {
+
-        if (this.bareGameReady) {
+    getPromiseForBareGame() {
-            return Promise.resolve();
+        if (this.bareGameReady) {
-        }
+            return Promise.resolve();
-
+        }
-        return new Promise(resolve => {
+
-            this.signalBareGameLoaded.add(resolve);
+        return new Promise(resolve => {
-        });
+            this.signalBareGameLoaded.add(resolve);
-    }
+        });
-
+    }
-    startLoading() {
+
-        this.internalStartLoadingEssentialsForMainMenu();
+    startLoading() {
-    }
+        this.internalStartLoadingEssentialsForMainMenu();
-
+    }
-    internalStartLoadingEssentialsForMainMenu() {
+
-        logger.log("⏰ Start load: main menu");
+    internalStartLoadingEssentialsForMainMenu() {
-        this.internalLoadSpritesAndSounds(essentialMainMenuSprites, essentialMainMenuSounds)
+        logger.log("⏰ Start load: main menu");
-            .catch(err => {
+        this.internalLoadSpritesAndSounds(essentialMainMenuSprites, essentialMainMenuSounds)
-                logger.warn("⏰ Failed to load essentials for main menu:", err);
+            .catch(err => {
-            })
+                logger.warn("⏰ Failed to load essentials for main menu:", err);
-            .then(() => {
+            })
-                logger.log("⏰ Finish load: main menu");
+            .then(() => {
-                this.mainMenuReady = true;
+                logger.log("⏰ Finish load: main menu");
-                this.signalMainMenuLoaded.dispatch();
+                this.mainMenuReady = true;
-                this.internalStartLoadingEssentialsForBareGame();
+                this.signalMainMenuLoaded.dispatch();
-            });
+                this.internalStartLoadingEssentialsForBareGame();
-    }
+            });
-
+    }
-    internalStartLoadingEssentialsForBareGame() {
+
-        logger.log("⏰ Start load: bare game");
+    internalStartLoadingEssentialsForBareGame() {
-        this.internalLoadSpritesAndSounds(
+        logger.log("⏰ Start load: bare game");
-            essentialBareGameSprites,
+        this.internalLoadSpritesAndSounds(
-            essentialBareGameSounds,
+            essentialBareGameSprites,
-            essentialBareGameAtlases
+            essentialBareGameSounds,
-        )
+            essentialBareGameAtlases
-            .catch(err => {
+        )
-                logger.warn("⏰ Failed to load essentials for bare game:", err);
+            .then(() => this.internalPreloadCss("async-resources.scss"))
-            })
+            .catch(err => {
-            .then(() => {
+                logger.warn("⏰ Failed to load essentials for bare game:", err);
-                logger.log("⏰ Finish load: bare game");
+            })
-                this.bareGameReady = true;
+            .then(() => {
-                initBuildingCodesAfterResourcesLoaded();
+                logger.log("⏰ Finish load: bare game");
-                this.signalBareGameLoaded.dispatch();
+                this.bareGameReady = true;
-                this.internalStartLoadingAdditionalGameAssets();
+                initBuildingCodesAfterResourcesLoaded();
-            });
+                this.signalBareGameLoaded.dispatch();
-    }
+                this.internalStartLoadingAdditionalGameAssets();
-
+            });
-    internalStartLoadingAdditionalGameAssets() {
+    }
-        const additionalAtlases = [];
+
-        logger.log("⏰ Start load: additional assets (", additionalAtlases.length, "images)");
+    internalStartLoadingAdditionalGameAssets() {
-        this.internalLoadSpritesAndSounds(additionalGameSprites, additionalGameSounds, additionalAtlases)
+        const additionalAtlases = [];
-            .catch(err => {
+        logger.log("⏰ Start load: additional assets (", additionalAtlases.length, "images)");
-                logger.warn("⏰ Failed to load additional assets:", err);
+        this.internalLoadSpritesAndSounds(additionalGameSprites, additionalGameSounds, additionalAtlases)
-            })
+            .catch(err => {
-            .then(() => {
+                logger.warn("⏰ Failed to load additional assets:", err);
-                logger.log("⏰ Finish load: additional assets");
+            })
-                this.additionalReady = true;
+            .then(() => {
-                this.signalAdditionalLoaded.dispatch();
+                logger.log("⏰ Finish load: additional assets");
-            });
+                this.additionalReady = true;
-    }
+                this.signalAdditionalLoaded.dispatch();
-
+            });
-    /**
+    }
-     * @param {Array<string>} sprites
+
-     * @param {Array<string>} sounds
+    internalPreloadCss(name) {
-     * @param {Array<AtlasDefinition>} atlases
+        return new Promise((resolve, reject) => {
-     * @returns {Promise<void>}
+            const link = document.createElement("link");
-     */
+
-    internalLoadSpritesAndSounds(sprites, sounds, atlases = []) {
+            link.onload = resolve;
-        this.numAssetsToLoadTotal = sprites.length + sounds.length + atlases.length;
+            link.onerror = reject;
-        this.numAssetsLoaded = 0;
+
-
+            link.setAttribute("rel", "stylesheet");
-        let promises = [];
+            link.setAttribute("media", "all");
-
+            link.setAttribute("type", "text/css");
-        for (let i = 0; i < sounds.length; ++i) {
+            link.setAttribute("href", cachebust("async-resources.css"));
-            if (this.soundsLoaded.indexOf(sounds[i]) >= 0) {
+            document.head.appendChild(link);
-                // Already loaded
+        });
-                continue;
+    }
-            }
+
-
+    /**
-            this.soundsLoaded.push(sounds[i]);
+     * @param {Array<string>} sprites
-            promises.push(
+     * @param {Array<string>} sounds
-                this.app.sound
+     * @param {Array<AtlasDefinition>} atlases
-                    .loadSound(sounds[i])
+     * @returns {Promise<void>}
-                    .catch(err => {
+     */
-                        logger.warn("Failed to load sound:", sounds[i]);
+    internalLoadSpritesAndSounds(sprites, sounds, atlases = []) {
-                    })
+        this.numAssetsToLoadTotal = sprites.length + sounds.length + atlases.length;
-                    .then(() => {
+        this.numAssetsLoaded = 0;
-                        this.numAssetsLoaded++;
+
-                    })
+        let promises = [];
-            );
+
-        }
+        for (let i = 0; i < sounds.length; ++i) {
-
+            if (this.soundsLoaded.indexOf(sounds[i]) >= 0) {
-        for (let i = 0; i < sprites.length; ++i) {
+                // Already loaded
-            if (this.spritesLoaded.indexOf(sprites[i]) >= 0) {
+                continue;
-                // Already loaded
+            }
-                continue;
+
-            }
+            this.soundsLoaded.push(sounds[i]);
-            this.spritesLoaded.push(sprites[i]);
+            promises.push(
-            promises.push(
+                this.app.sound
-                Loader.preloadCSSSprite(sprites[i])
+                    .loadSound(sounds[i])
-                    .catch(err => {
+                    .catch(err => {
-                        logger.warn("Failed to load css sprite:", sprites[i]);
+                        logger.warn("Failed to load sound:", sounds[i]);
-                    })
+                    })
-                    .then(() => {
+                    .then(() => {
-                        this.numAssetsLoaded++;
+                        this.numAssetsLoaded++;
-                    })
+                    })
-            );
+            );
-        }
+        }
-
+
-        for (let i = 0; i < atlases.length; ++i) {
+        for (let i = 0; i < sprites.length; ++i) {
-            const atlas = atlases[i];
+            if (this.spritesLoaded.indexOf(sprites[i]) >= 0) {
-            promises.push(
+                // Already loaded
-                Loader.preloadAtlas(atlas)
+                continue;
-                    .catch(err => {
+            }
-                        logger.warn("Failed to load atlas:", atlas.sourceFileName);
+            this.spritesLoaded.push(sprites[i]);
-                    })
+            promises.push(
-                    .then(() => {
+                Loader.preloadCSSSprite(sprites[i])
-                        this.numAssetsLoaded++;
+                    .catch(err => {
-                    })
+                        logger.warn("Failed to load css sprite:", sprites[i]);
-            );
+                    })
-        }
+                    .then(() => {
-
+                        this.numAssetsLoaded++;
-        return (
+                    })
-            Promise.all(promises)
+            );
-
+        }
-                // // Remove some pressure by waiting a bit
+
-                // .then(() => {
+        for (let i = 0; i < atlases.length; ++i) {
-                //     return new Promise(resolve => {
+            const atlas = atlases[i];
-                //         setTimeout(resolve, 200);
+            promises.push(
-                //     });
+                Loader.preloadAtlas(atlas)
-                // })
+                    .catch(err => {
-                .then(() => {
+                        logger.warn("Failed to load atlas:", atlas.sourceFileName);
-                    this.numAssetsToLoadTotal = 0;
+                    })
-                    this.numAssetsLoaded = 0;
+                    .then(() => {
-                })
+                        this.numAssetsLoaded++;
-        );
+                    })
-    }
+            );
-}
+        }
+
+        return (
+            Promise.all(promises)
+
+                // // Remove some pressure by waiting a bit
+                // .then(() => {
+                //     return new Promise(resolve => {
+                //         setTimeout(resolve, 200);
+                //     });
+                // })
+                .then(() => {
+                    this.numAssetsToLoadTotal = 0;
+                    this.numAssetsLoaded = 0;
+                })
+        );
+    }
+}

src/js/core/config.js

@@ -20,6 +20,7 @@ export const THIRDPARTY_URLS = {
     discord: "https://discord.gg/HN7EVzV",
     github: "https://github.com/tobspr/shapez.io",
     reddit: "https://www.reddit.com/r/shapezio",
+    shapeViewer: "https://viewer.shapez.io",
 
     standaloneStorePage: "https://store.steampowered.com/app/1318690/shapezio/",
 };

src/js/core/modal_dialog_elements.js

@@ -60,6 +60,8 @@ export class Dialog {
             this.buttonSignals[buttonId] = new Signal();
         }
 
+        this.valueChosen = new Signal();
+
         this.timeouts = [];
         this.clickDetectors = [];
 
@@ -431,10 +433,12 @@ export class DialogWithForm extends Dialog {
         for (let i = 0; i < this.formElements.length; ++i) {
             const elem = this.formElements[i];
             elem.bindEvents(div, this.clickDetectors);
+            elem.valueChosen.add(this.closeRequested.dispatch, this.closeRequested);
+            elem.valueChosen.add(this.valueChosen.dispatch, this.valueChosen);
         }
 
         waitNextFrame().then(() => {
-            this.formElements[0].focus();
+            this.formElements[this.formElements.length - 1].focus();
         });
 
         return div;

src/js/core/modal_dialog_forms.js

@@ -1,150 +1,221 @@
-import { ClickDetector } from "./click_detector";
+import { BaseItem } from "../game/base_item";
-
+import { ClickDetector } from "./click_detector";
-export class FormElement {
+import { Signal } from "./signal";
-    constructor(id, label) {
+
-        this.id = id;
+export class FormElement {
-        this.label = label;
+    constructor(id, label) {
-    }
+        this.id = id;
-
+        this.label = label;
-    getHtml() {
+
-        abstract;
+        this.valueChosen = new Signal();
-        return "";
+    }
-    }
+
-
+    getHtml() {
-    getFormElement(parent) {
+        abstract;
-        return parent.querySelector("[data-formId='" + this.id + "']");
+        return "";
-    }
+    }
-
+
-    bindEvents(parent, clickTrackers) {
+    getFormElement(parent) {
-        abstract;
+        return parent.querySelector("[data-formId='" + this.id + "']");
-    }
+    }
-
+
-    focus() {}
+    bindEvents(parent, clickTrackers) {
-
+        abstract;
-    isValid() {
+    }
-        return true;
+
-    }
+    focus() {}
-
+
-    /** @returns {any} */
+    isValid() {
-    getValue() {
+        return true;
-        abstract;
+    }
-    }
+
-}
+    /** @returns {any} */
-
+    getValue() {
-export class FormElementInput extends FormElement {
+        abstract;
-    constructor({ id, label = null, placeholder, defaultValue = "", inputType = "text", validator = null }) {
+    }
-        super(id, label);
+}
-        this.placeholder = placeholder;
+
-        this.defaultValue = defaultValue;
+export class FormElementInput extends FormElement {
-        this.inputType = inputType;
+    constructor({ id, label = null, placeholder, defaultValue = "", inputType = "text", validator = null }) {
-        this.validator = validator;
+        super(id, label);
-
+        this.placeholder = placeholder;
-        this.element = null;
+        this.defaultValue = defaultValue;
-    }
+        this.inputType = inputType;
-
+        this.validator = validator;
-    getHtml() {
+
-        let classes = [];
+        this.element = null;
-        let inputType = "text";
+    }
-        let maxlength = 256;
+
-        switch (this.inputType) {
+    getHtml() {
-            case "text": {
+        let classes = [];
-                classes.push("input-text");
+        let inputType = "text";
-                break;
+        let maxlength = 256;
-            }
+        switch (this.inputType) {
-
+            case "text": {
-            case "email": {
+                classes.push("input-text");
-                classes.push("input-email");
+                break;
-                inputType = "email";
+            }
-                break;
+
-            }
+            case "email": {
-
+                classes.push("input-email");
-            case "token": {
+                inputType = "email";
-                classes.push("input-token");
+                break;
-                inputType = "text";
+            }
-                maxlength = 4;
+
-                break;
+            case "token": {
-            }
+                classes.push("input-token");
-        }
+                inputType = "text";
-
+                maxlength = 4;
-        return `
+                break;
-            <div class="formElement input">
+            }
-                ${this.label ? `<label>${this.label}</label>` : ""}
+        }
-                <input
+
-                    type="${inputType}"
+        return `
-                    value="${this.defaultValue.replace(/["\\]+/gi, "")}"
+            <div class="formElement input">
-                    maxlength="${maxlength}"
+                ${this.label ? `<label>${this.label}</label>` : ""}
-                    autocomplete="off"
+                <input
-                    autocorrect="off"
+                    type="${inputType}"
-                    autocapitalize="off"
+                    value="${this.defaultValue.replace(/["\\]+/gi, "")}"
-                    spellcheck="false"
+                    maxlength="${maxlength}"
-                    class="${classes.join(" ")}"
+                    autocomplete="off"
-                    placeholder="${this.placeholder.replace(/["\\]+/gi, "")}"
+                    autocorrect="off"
-                    data-formId="${this.id}">
+                    autocapitalize="off"
-            </div>
+                    spellcheck="false"
-        `;
+                    class="${classes.join(" ")}"
-    }
+                    placeholder="${this.placeholder.replace(/["\\]+/gi, "")}"
-
+                    data-formId="${this.id}">
-    bindEvents(parent, clickTrackers) {
+            </div>
-        this.element = this.getFormElement(parent);
+        `;
-        this.element.addEventListener("input", event => this.updateErrorState());
+    }
-        this.updateErrorState();
+
-    }
+    bindEvents(parent, clickTrackers) {
-
+        this.element = this.getFormElement(parent);
-    updateErrorState() {
+        this.element.addEventListener("input", event => this.updateErrorState());
-        this.element.classList.toggle("errored", !this.isValid());
+        this.updateErrorState();
-    }
+    }
-
+
-    isValid() {
+    updateErrorState() {
-        return !this.validator || this.validator(this.element.value);
+        this.element.classList.toggle("errored", !this.isValid());
-    }
+    }
-
+
-    getValue() {
+    isValid() {
-        return this.element.value;
+        return !this.validator || this.validator(this.element.value);
-    }
+    }
-
+
-    focus() {
+    getValue() {
-        this.element.focus();
+        return this.element.value;
-    }
+    }
-}
+
-
+    focus() {
-export class FormElementCheckbox extends FormElement {
+        this.element.focus();
-    constructor({ id, label, defaultValue = true }) {
+    }
-        super(id, label);
+}
-        this.defaultValue = defaultValue;
+
-        this.value = this.defaultValue;
+export class FormElementCheckbox extends FormElement {
-
+    constructor({ id, label, defaultValue = true }) {
-        this.element = null;
+        super(id, label);
-    }
+        this.defaultValue = defaultValue;
-
+        this.value = this.defaultValue;
-    getHtml() {
+
-        return `
+        this.element = null;
-            <div class="formElement checkBoxFormElem">
+    }
-            ${this.label ? `<label>${this.label}</label>` : ""}
+
-                <div class="checkbox ${this.defaultValue ? "checked" : ""}" data-formId='${this.id}'>
+    getHtml() {
-                    <span class="knob"></span >
+        return `
-                </div >
+            <div class="formElement checkBoxFormElem">
-            </div>
+            ${this.label ? `<label>${this.label}</label>` : ""}
-        `;
+                <div class="checkbox ${this.defaultValue ? "checked" : ""}" data-formId='${this.id}'>
-    }
+                    <span class="knob"></span >
-
+                </div >
-    bindEvents(parent, clickTrackers) {
+            </div>
-        this.element = this.getFormElement(parent);
+        `;
-        const detector = new ClickDetector(this.element, {
+    }
-            consumeEvents: false,
+
-            preventDefault: false,
+    bindEvents(parent, clickTrackers) {
-        });
+        this.element = this.getFormElement(parent);
-        clickTrackers.push(detector);
+        const detector = new ClickDetector(this.element, {
-        detector.click.add(this.toggle, this);
+            consumeEvents: false,
-    }
+            preventDefault: false,
-
+        });
-    getValue() {
+        clickTrackers.push(detector);
-        return this.value;
+        detector.click.add(this.toggle, this);
-    }
+    }
-
+
-    toggle() {
+    getValue() {
-        this.value = !this.value;
+        return this.value;
-        this.element.classList.toggle("checked", this.value);
+    }
-    }
+
-
+    toggle() {
-    focus(parent) {}
+        this.value = !this.value;
-}
+        this.element.classList.toggle("checked", this.value);
+    }
+
+    focus(parent) {}
+}
+
+export class FormElementItemChooser extends FormElement {
+    /**
+     *
+     * @param {object} param0
+     * @param {string} param0.id
+     * @param {string=} param0.label
+     * @param {Array<BaseItem>} param0.items
+     */
+    constructor({ id, label, items = [] }) {
+        super(id, label);
+        this.items = items;
+        this.element = null;
+
+        /**
+         * @type {BaseItem}
+         */
+        this.chosenItem = null;
+    }
+
+    getHtml() {
+        let classes = [];
+
+        return `
+            <div class="formElement">
+                ${this.label ? `<label>${this.label}</label>` : ""}
+                <div class="ingameItemChooser input" data-formId="${this.id}"></div>
+            </div>
+            `;
+    }
+
+    /**
+     * @param {HTMLElement} parent
+     * @param {Array<ClickDetector>} clickTrackers
+     */
+    bindEvents(parent, clickTrackers) {
+        this.element = this.getFormElement(parent);
+
+        for (let i = 0; i < this.items.length; ++i) {
+            const item = this.items[i];
+
+            const canvas = document.createElement("canvas");
+            canvas.width = 128;
+            canvas.height = 128;
+            const context = canvas.getContext("2d");
+            item.drawFullSizeOnCanvas(context, 128);
+            this.element.appendChild(canvas);
+
+            const detector = new ClickDetector(canvas, {});
+            clickTrackers.push(detector);
+            detector.click.add(() => {
+                this.chosenItem = item;
+                this.valueChosen.dispatch(item);
+            });
+        }
+    }
+
+    isValid() {
+        return true;
+    }
+
+    getValue() {
+        return null;
+    }
+
+    focus() {}
+}

src/js/game/base_item.js

@@ -1,82 +1,100 @@
-import { globalConfig } from "../core/config";
+import { globalConfig } from "../core/config";
-import { DrawParameters } from "../core/draw_parameters";
+import { DrawParameters } from "../core/draw_parameters";
-import { BasicSerializableObject } from "../savegame/serialization";
+import { BasicSerializableObject } from "../savegame/serialization";
-
+
-/** @type {ItemType[]} **/
+/** @type {ItemType[]} **/
-export const itemTypes = ["shape", "color", "boolean"];
+export const itemTypes = ["shape", "color", "boolean"];
-
+
-/**
+/**
- * Class for items on belts etc. Not an entity for performance reasons
+ * Class for items on belts etc. Not an entity for performance reasons
- */
+ */
-export class BaseItem extends BasicSerializableObject {
+export class BaseItem extends BasicSerializableObject {
-    constructor() {
+    constructor() {
-        super();
+        super();
-    }
+    }
-
+
-    static getId() {
+    static getId() {
-        return "base_item";
+        return "base_item";
-    }
+    }
-
+
-    /** @returns {object} */
+    /** @returns {object} */
-    static getSchema() {
+    static getSchema() {
-        return {};
+        return {};
-    }
+    }
-
+
-    /** @returns {ItemType} **/
+    /** @returns {ItemType} **/
-    getItemType() {
+    getItemType() {
-        abstract;
+        abstract;
-        return "shape";
+        return "shape";
-    }
+    }
-
+
-    /**
+    /**
-     * Returns if the item equals the other itme
+     * Returns a string id of the item
-     * @param {BaseItem} other
+     * @returns {string}
-     * @returns {boolean}
+     */
-     */
+    getAsCopyableKey() {
-    equals(other) {
+        abstract;
-        if (this.getItemType() !== other.getItemType()) {
+        return "";
-            return false;
+    }
-        }
+
-        return this.equalsImpl(other);
+    /**
-    }
+     * Returns if the item equals the other itme
-
+     * @param {BaseItem} other
-    /**
+     * @returns {boolean}
-     * Override for custom comparison
+     */
-     * @abstract
+    equals(other) {
-     * @param {BaseItem} other
+        if (this.getItemType() !== other.getItemType()) {
-     * @returns {boolean}
+            return false;
-     */
+        }
-    equalsImpl(other) {
+        return this.equalsImpl(other);
-        abstract;
+    }
-        return false;
+
-    }
+    /**
-
+     * Override for custom comparison
-    /**
+     * @abstract
-     * Draws the item at the given position
+     * @param {BaseItem} other
-     * @param {number} x
+     * @returns {boolean}
-     * @param {number} y
+     */
-     * @param {DrawParameters} parameters
+    equalsImpl(other) {
-     * @param {number=} diameter
+        abstract;
-     */
+        return false;
-    drawItemCenteredClipped(x, y, parameters, diameter = globalConfig.defaultItemDiameter) {
+    }
-        if (parameters.visibleRect.containsCircle(x, y, diameter / 2)) {
+
-            this.drawItemCenteredImpl(x, y, parameters, diameter);
+    /**
-        }
+     * Draws the item to a canvas
-    }
+     * @param {CanvasRenderingContext2D} context
-
+     * @param {number} size
-    /**
+     */
-     * INTERNAL
+    drawFullSizeOnCanvas(context, size) {
-     * @param {number} x
+        abstract;
-     * @param {number} y
+    }
-     * @param {DrawParameters} parameters
+
-     * @param {number=} diameter
+    /**
-     */
+     * Draws the item at the given position
-    drawItemCenteredImpl(x, y, parameters, diameter = globalConfig.defaultItemDiameter) {
+     * @param {number} x
-        abstract;
+     * @param {number} y
-    }
+     * @param {DrawParameters} parameters
-
+     * @param {number=} diameter
-    getBackgroundColorAsResource() {
+     */
-        abstract;
+    drawItemCenteredClipped(x, y, parameters, diameter = globalConfig.defaultItemDiameter) {
-        return "";
+        if (parameters.visibleRect.containsCircle(x, y, diameter / 2)) {
-    }
+            this.drawItemCenteredImpl(x, y, parameters, diameter);
-}
+        }
+    }
+
+    /**
+     * INTERNAL
+     * @param {number} x
+     * @param {number} y
+     * @param {DrawParameters} parameters
+     * @param {number=} diameter
+     */
+    drawItemCenteredImpl(x, y, parameters, diameter = globalConfig.defaultItemDiameter) {
+        abstract;
+    }
+
+    getBackgroundColorAsResource() {
+        abstract;
+        return "";
+    }
+}

src/js/game/blueprint.js

@@ -1,12 +1,11 @@
+import { globalConfig } from "../core/config";
 import { DrawParameters } from "../core/draw_parameters";
-import { Loader } from "../core/loader";
 import { createLogger } from "../core/logging";
+import { findNiceIntegerValue } from "../core/utils";
 import { Vector } from "../core/vector";
 import { Entity } from "./entity";
 import { GameRoot } from "./root";
-import { findNiceIntegerValue } from "../core/utils";
 import { blueprintShape } from "./upgrades";
-import { globalConfig } from "../core/config";
 
 const logger = createLogger("blueprint");
 

src/js/game/buildings/wire_tunnel.js

@@ -53,6 +53,6 @@ export class MetaWireTunnelBuilding extends MetaBuilding {
      * @param {Entity} entity
      */
     setupEntityComponents(entity) {
-        entity.addComponent(new WireTunnelComponent({}));
+        entity.addComponent(new WireTunnelComponent());
     }
 }

src/js/game/camera.js

@@ -502,10 +502,10 @@ export class Camera extends BasicSerializableObject {
         }
         const prevZoom = this.zoomLevel;
 
-        const delta = Math.sign(event.deltaY) * -0.15 * this.root.app.settings.getScrollWheelSensitivity();
+        const scale = 1 + 0.15 * this.root.app.settings.getScrollWheelSensitivity();
         assert(Number.isFinite(delta), "Got invalid delta in mouse wheel event: " + event.deltaY);
         assert(Number.isFinite(this.zoomLevel), "Got invalid zoom level *before* wheel: " + this.zoomLevel);
-        this.zoomLevel *= 1 + delta;
+        this.zoomLevel *= (event.deltaY < 0) ? scale : 1/scale;
         assert(Number.isFinite(this.zoomLevel), "Got invalid zoom level *after* wheel: " + this.zoomLevel);
 
         this.clampZoomLevel();

src/js/game/hub_goals.js

@@ -1,8 +1,10 @@
 import { globalConfig } from "../core/config";
+import { RandomNumberGenerator } from "../core/rng";
 import { clamp, findNiceIntegerValue, randomChoice, randomInt } from "../core/utils";
 import { BasicSerializableObject, types } from "../savegame/serialization";
 import { enumColors } from "./colors";
 import { enumItemProcessorTypes } from "./components/item_processor";
+import { enumAnalyticsDataSource } from "./production_analytics";
 import { GameRoot } from "./root";
 import { enumSubShape, ShapeDefinition } from "./shape_definition";
 import { enumHubGoalRewards, tutorialGoals } from "./tutorial_goals";
@@ -18,12 +20,6 @@ export class HubGoals extends BasicSerializableObject {
             level: types.uint,
             storedShapes: types.keyValueMap(types.uint),
             upgradeLevels: types.keyValueMap(types.uint),
-
-            currentGoal: types.structured({
-                definition: types.knownType(ShapeDefinition),
-                required: types.uint,
-                reward: types.nullable(types.enum(enumHubGoalRewards)),
-            }),
         };
     }
 
@@ -53,15 +49,7 @@ export class HubGoals extends BasicSerializableObject {
         }
 
         // Compute current goal
-        const goal = tutorialGoals[this.level - 1];
+        this.computeNextGoal();
-        if (goal) {
-            this.currentGoal = {
-                /** @type {ShapeDefinition} */
-                definition: this.root.shapeDefinitionMgr.getShapeFromShortKey(goal.shape),
-                required: goal.required,
-                reward: goal.reward,
-            };
-        }
     }
 
     /**
@@ -106,7 +94,7 @@ export class HubGoals extends BasicSerializableObject {
             this.upgradeImprovements[key] = 1;
         }
 
-        this.createNextGoal();
+        this.computeNextGoal();
 
         // Allow quickly switching goals in dev mode
         if (G_IS_DEV) {
@@ -155,6 +143,13 @@ export class HubGoals extends BasicSerializableObject {
      * Returns how much of the current goal was already delivered
      */
     getCurrentGoalDelivered() {
+        if (this.currentGoal.throughputOnly) {
+            return this.root.productionAnalytics.getCurrentShapeRate(
+                enumAnalyticsDataSource.delivered,
+                this.currentGoal.definition
+            );
+        }
+
         return this.getShapesStored(this.currentGoal.definition);
     }
 
@@ -189,9 +184,8 @@ export class HubGoals extends BasicSerializableObject {
         this.root.signals.shapeDelivered.dispatch(definition);
 
         // Check if we have enough for the next level
-        const targetHash = this.currentGoal.definition.getHash();
         if (
-            this.storedShapes[targetHash] >= this.currentGoal.required ||
+            this.getCurrentGoalDelivered() >= this.currentGoal.required ||
             (G_IS_DEV && globalConfig.debug.rewardsInstant)
         ) {
             this.onGoalCompleted();
@@ -201,24 +195,28 @@ export class HubGoals extends BasicSerializableObject {
     /**
      * Creates the next goal
      */
-    createNextGoal() {
+    computeNextGoal() {
         const storyIndex = this.level - 1;
         if (storyIndex < tutorialGoals.length) {
-            const { shape, required, reward } = tutorialGoals[storyIndex];
+            const { shape, required, reward, throughputOnly } = tutorialGoals[storyIndex];
             this.currentGoal = {
                 /** @type {ShapeDefinition} */
                 definition: this.root.shapeDefinitionMgr.getShapeFromShortKey(shape),
                 required,
                 reward,
+                throughputOnly,
             };
             return;
         }
 
+        const required = 4 + (this.level - 27) * 0.25;
+
         this.currentGoal = {
             /** @type {ShapeDefinition} */
-            definition: this.createRandomShape(),
+            definition: this.computeFreeplayShape(this.level),
-            required: findNiceIntegerValue(1000 + Math.pow(this.level * 2000, 0.8)),
+            required,
             reward: enumHubGoalRewards.no_reward_freeplay,
+            throughputOnly: true,
         };
     }
 
@@ -231,7 +229,7 @@ export class HubGoals extends BasicSerializableObject {
 
         this.root.app.gameAnalytics.handleLevelCompleted(this.level);
         ++this.level;
-        this.createNextGoal();
+        this.computeNextGoal();
 
         this.root.signals.storyGoalCompleted.dispatch(this.level - 1, reward);
     }
@@ -325,15 +323,85 @@ export class HubGoals extends BasicSerializableObject {
     }
 
     /**
+     * Picks random colors which are close to each other
+     * @param {RandomNumberGenerator} rng
+     */
+    generateRandomColorSet(rng, allowUncolored = false) {
+        const colorWheel = [
+            enumColors.red,
+            enumColors.yellow,
+            enumColors.green,
+            enumColors.cyan,
+            enumColors.blue,
+            enumColors.purple,
+            enumColors.red,
+            enumColors.yellow,
+        ];
+
+        const universalColors = [enumColors.white];
+        if (allowUncolored) {
+            universalColors.push(enumColors.uncolored);
+        }
+        const index = rng.nextIntRangeInclusive(0, colorWheel.length - 3);
+        const pickedColors = colorWheel.slice(index, index + 3);
+        pickedColors.push(rng.choice(universalColors));
+        return pickedColors;
+    }
+
+    /**
+     * Creates a (seeded) random shape
+     * @param {number} level
      * @returns {ShapeDefinition}
      */
-    createRandomShape() {
+    computeFreeplayShape(level) {
         const layerCount = clamp(this.level / 25, 2, 4);
+
         /** @type {Array<import("./shape_definition").ShapeLayer>} */
         let layers = [];
 
-        const randomColor = () => randomChoice(Object.values(enumColors));
+        const rng = new RandomNumberGenerator(this.root.map.seed + "/" + level);
-        const randomShape = () => randomChoice(Object.values(enumSubShape));
+
+        const colors = this.generateRandomColorSet(rng, level > 35);
+
+        let pickedSymmetry = null; // pairs of quadrants that must be the same
+        let availableShapes = [enumSubShape.rect, enumSubShape.circle, enumSubShape.star];
+        if (rng.next() < 0.5) {
+            pickedSymmetry = [
+                // radial symmetry
+                [0, 2],
+                [1, 3],
+            ];
+            availableShapes.push(enumSubShape.windmill); // windmill looks good only in radial symmetry
+        } else {
+            const symmetries = [
+                [
+                    // horizontal axis
+                    [0, 3],
+                    [1, 2],
+                ],
+                [
+                    // vertical axis
+                    [0, 1],
+                    [2, 3],
+                ],
+                [
+                    // diagonal axis
+                    [0, 2],
+                    [1],
+                    [3],
+                ],
+                [
+                    // other diagonal axis
+                    [1, 3],
+                    [0],
+                    [2],
+                ],
+            ];
+            pickedSymmetry = rng.choice(symmetries);
+        }
+
+        const randomColor = () => rng.choice(colors);
+        const randomShape = () => rng.choice(Object.values(enumSubShape));
 
         let anyIsMissingTwo = false;
 
@@ -341,23 +409,24 @@ export class HubGoals extends BasicSerializableObject {
             /** @type {import("./shape_definition").ShapeLayer} */
             const layer = [null, null, null, null];
 
-            for (let quad = 0; quad < 4; ++quad) {
+            for (let j = 0; j < pickedSymmetry.length; ++j) {
-                layer[quad] = {
+                const group = pickedSymmetry[j];
-                    subShape: randomShape(),
+                const shape = randomShape();
-                    color: randomColor(),
+                const color = randomColor();
-                };
+                for (let k = 0; k < group.length; ++k) {
-            }
+                    const quad = group[k];
-
+                    layer[quad] = {
-            // Sometimes shapes are missing
+                        subShape: shape,
-            if (Math.random() > 0.85) {
+                        color,
-                layer[randomInt(0, 3)] = null;
+                    };
+                }
             }
 
             // Sometimes they actually are missing *two* ones!
             // Make sure at max only one layer is missing it though, otherwise we could
             // create an uncreateable shape
-            if (Math.random() > 0.95 && !anyIsMissingTwo) {
+            if (level > 75 && rng.next() > 0.95 && !anyIsMissingTwo) {
-                layer[randomInt(0, 3)] = null;
+                layer[rng.nextIntRange(0, 4)] = null;
                 anyIsMissingTwo = true;
             }
 

src/js/game/hud/hud.js

@@ -44,6 +44,8 @@ import { HUDWireInfo } from "./parts/wire_info";
 import { HUDLeverToggle } from "./parts/lever_toggle";
 import { HUDLayerPreview } from "./parts/layer_preview";
 import { HUDMinerHighlight } from "./parts/miner_highlight";
+import { HUDBetaOverlay } from "./parts/beta_overlay";
+import { HUDPerformanceWarning } from "./parts/performance_warning";
 
 export class GameHUD {
     /**
@@ -75,7 +77,6 @@ export class GameHUD {
             pinnedShapes: new HUDPinnedShapes(this.root),
             notifications: new HUDNotifications(this.root),
             settingsMenu: new HUDSettingsMenu(this.root),
-            // betaOverlay: new HUDBetaOverlay(this.root),
             debugInfo: new HUDDebugInfo(this.root),
             dialogs: new HUDModalDialogs(this.root),
             screenshotExporter: new HUDScreenshotExporter(this.root),
@@ -85,6 +86,7 @@ export class GameHUD {
             layerPreview: new HUDLayerPreview(this.root),
 
             minerHighlight: new HUDMinerHighlight(this.root),
+            performanceWarning: new HUDPerformanceWarning(this.root),
 
             // Typing hints
             /* typehints:start */
@@ -137,6 +139,10 @@ export class GameHUD {
             this.parts.sandboxController = new HUDSandboxController(this.root);
         }
 
+        if (!G_IS_RELEASE) {
+            this.parts.betaOverlay = new HUDBetaOverlay(this.root);
+        }
+
         const frag = document.createDocumentFragment();
         for (const key in this.parts) {
             this.parts[key].createElements(frag);

src/js/game/hud/parts/beta_overlay.js

@@ -3,7 +3,12 @@ import { makeDiv } from "../../../core/utils";
 
 export class HUDBetaOverlay extends BaseHUDPart {
     createElements(parent) {
-        this.element = makeDiv(parent, "ingame_HUD_BetaOverlay", [], "CLOSED BETA");
+        this.element = makeDiv(
+            parent,
+            "ingame_HUD_BetaOverlay",
+            [],
+            "<h2>CLOSED BETA VERSION</h2><span>This version is unstable, might crash and is not final!</span>"
+        );
     }
 
     initialize() {}

src/js/game/hud/parts/building_placer_logic.js

@@ -334,7 +334,11 @@ export class HUDBuildingPlacerLogic extends BaseHUDPart {
             const tileBelow = this.root.map.getLowerLayerContentXY(tile.x, tile.y);
 
             // Check if there's a shape or color item below, if so select the miner
-            if (tileBelow && this.root.app.settings.getAllSettings().pickMinerOnPatch) {
+            if (
+                tileBelow &&
+                this.root.app.settings.getAllSettings().pickMinerOnPatch &&
+                this.root.currentLayer === "regular"
+            ) {
                 this.currentMetaBuilding.set(gMetaBuildingRegistry.findByClass(MetaMinerBuilding));
 
                 // Select chained miner if available, since that's always desired once unlocked

src/js/game/hud/parts/performance_warning.js

@@ -0,0 +1,16 @@
+import { T } from "../../../translations";
+import { BaseHUDPart } from "../base_hud_part";
+
+export class HUDPerformanceWarning extends BaseHUDPart {
+    initialize() {
+        this.warningShown = false;
+        this.root.signals.entityManuallyPlaced.add(this.checkAfterPlace, this);
+    }
+
+    checkAfterPlace() {
+        if (!this.warningShown && this.root.entityMgr.entities.length > 10000) {
+            this.root.hud.parts.dialogs.showInfo(T.dialogs.entityWarning.title, T.dialogs.entityWarning.desc);
+            this.warningShown = true;
+        }
+    }
+}

src/js/game/hud/parts/pinned_shapes.js

@@ -4,6 +4,8 @@ import { ShapeDefinition } from "../../shape_definition";
 import { BaseHUDPart } from "../base_hud_part";
 import { blueprintShape, UPGRADES } from "../../upgrades";
 import { enumHubGoalRewards } from "../../tutorial_goals";
+import { enumAnalyticsDataSource } from "../../production_analytics";
+import { T } from "../../../translations";
 
 /**
  * Manages the pinned shapes on the left side of the screen
@@ -22,11 +24,13 @@ export class HUDPinnedShapes extends BaseHUDPart {
          * convenient. Also allows for cleaning up handles.
          * @type {Array<{
          *  key: string,
+         *  definition: ShapeDefinition,
          *  amountLabel: HTMLElement,
          *  lastRenderedValue: string,
          *  element: HTMLElement,
          *  detector?: ClickDetector,
-         *  infoDetector?: ClickDetector
+         *  infoDetector?: ClickDetector,
+         *  throughputOnly?: boolean
          * }>}
          */
         this.handles = [];
@@ -163,29 +167,40 @@ export class HUDPinnedShapes extends BaseHUDPart {
         this.handles = [];
 
         // Pin story goal
-        this.internalPinShape(currentKey, false, "goal");
+        this.internalPinShape({
+            key: currentKey,
+            canUnpin: false,
+            className: "goal",
+            throughputOnly: currentGoal.throughputOnly,
+        });
 
         // Pin blueprint shape as well
         if (this.root.hubGoals.isRewardUnlocked(enumHubGoalRewards.reward_blueprints)) {
-            this.internalPinShape(blueprintShape, false, "blueprint");
+            this.internalPinShape({
+                key: blueprintShape,
+                canUnpin: false,
+                className: "blueprint",
+            });
         }
 
         // Pin manually pinned shapes
         for (let i = 0; i < this.pinnedShapes.length; ++i) {
             const key = this.pinnedShapes[i];
             if (key !== currentKey) {
-                this.internalPinShape(key);
+                this.internalPinShape({ key });
             }
         }
     }
 
     /**
      * Pins a new shape
-     * @param {string} key
+     * @param {object} param0
-     * @param {boolean} canUnpin
+     * @param {string} param0.key
-     * @param {string=} className
+     * @param {boolean=} param0.canUnpin
+     * @param {string=} param0.className
+     * @param {boolean=} param0.throughputOnly
      */
-    internalPinShape(key, canUnpin = true, className = null) {
+    internalPinShape({ key, canUnpin = true, className = null, throughputOnly = false }) {
         const definition = this.root.shapeDefinitionMgr.getShapeFromShortKey(key);
 
         const element = makeDiv(this.element, null, ["shape"]);
@@ -229,11 +244,13 @@ export class HUDPinnedShapes extends BaseHUDPart {
 
         this.handles.push({
             key,
+            definition,
             element,
             amountLabel,
             lastRenderedValue: "",
             detector,
             infoDetector,
+            throughputOnly,
         });
     }
 
@@ -244,8 +261,20 @@ export class HUDPinnedShapes extends BaseHUDPart {
         for (let i = 0; i < this.handles.length; ++i) {
             const handle = this.handles[i];
 
-            const currentValue = this.root.hubGoals.getShapesStoredByKey(handle.key);
+            let currentValue = this.root.hubGoals.getShapesStoredByKey(handle.key);
-            const currentValueFormatted = formatBigNumber(currentValue);
+            let currentValueFormatted = formatBigNumber(currentValue);
+
+            if (handle.throughputOnly) {
+                currentValue = this.root.productionAnalytics.getCurrentShapeRate(
+                    enumAnalyticsDataSource.delivered,
+                    handle.definition
+                );
+                currentValueFormatted = T.ingame.statistics.shapesDisplayUnits.second.replace(
+                    "<shapes>",
+                    String(currentValue)
+                );
+            }
+
             if (currentValueFormatted !== handle.lastRenderedValue) {
                 handle.lastRenderedValue = currentValueFormatted;
                 handle.amountLabel.innerText = currentValueFormatted;

src/js/game/hud/parts/sandbox_controller.js

@@ -113,7 +113,7 @@ export class HUDSandboxController extends BaseHUDPart {
     modifyLevel(amount) {
         const hubGoals = this.root.hubGoals;
         hubGoals.level = Math.max(1, hubGoals.level + amount);
-        hubGoals.createNextGoal();
+        hubGoals.computeNextGoal();
 
         // Clear all shapes of this level
         hubGoals.storedShapes[hubGoals.currentGoal.definition.getHash()] = 0;

src/js/game/hud/parts/shop.js

@@ -90,17 +90,15 @@ export class HUDShop extends BaseHUDPart {
                 // Max level
                 handle.elemDescription.innerText = T.ingame.shop.maximumLevel.replace(
                     "<currentMult>",
-                    currentTierMultiplier.toString()
+                    formatBigNumber(currentTierMultiplier)
                 );
                 continue;
             }
 
             // Set description
             handle.elemDescription.innerText = T.shopUpgrades[upgradeId].description
-                .replace("<currentMult>", currentTierMultiplier.toString())
+                .replace("<currentMult>", formatBigNumber(currentTierMultiplier))
-                .replace("<newMult>", (currentTierMultiplier + tierHandle.improvement).toString())
+                .replace("<newMult>", formatBigNumber(currentTierMultiplier + tierHandle.improvement));
-                // Backwards compatibility
-                .replace("<gain>", (tierHandle.improvement * 100.0).toString());
 
             tierHandle.required.forEach(({ shape, amount }) => {
                 const container = makeDiv(handle.elemRequirements, null, ["requirement"]);

src/js/game/hud/parts/unlock_notification.js

@@ -4,11 +4,12 @@ import { makeDiv } from "../../../core/utils";
 import { SOUNDS } from "../../../platform/sound";
 import { T } from "../../../translations";
 import { defaultBuildingVariant } from "../../meta_building";
-import { enumHubGoalRewards } from "../../tutorial_goals";
+import { enumHubGoalRewards, tutorialGoals } from "../../tutorial_goals";
 import { BaseHUDPart } from "../base_hud_part";
 import { DynamicDomAttach } from "../dynamic_dom_attach";
 import { enumHubGoalRewardsToContentUnlocked } from "../../tutorial_goals_mappings";
 import { InputReceiver } from "../../../core/input_receiver";
+import { enumNotificationType } from "./notifications";
 
 export class HUDUnlockNotification extends BaseHUDPart {
     initialize() {
@@ -50,6 +51,14 @@ export class HUDUnlockNotification extends BaseHUDPart {
      * @param {enumHubGoalRewards} reward
      */
     showForLevel(level, reward) {
+        if (level > tutorialGoals.length) {
+            this.root.hud.signals.notification.dispatch(
+                T.ingame.notifications.freeplayLevelComplete.replace("<level>", String(level)),
+                enumNotificationType.success
+            );
+            return;
+        }
+
         this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever);
         this.elemTitle.innerText = T.ingame.levelCompleteNotification.levelTitle.replace(
             "<level>",

src/js/game/hud/parts/waypoints.js

@@ -1,12 +1,18 @@
 import { makeOffscreenBuffer } from "../../../core/buffer_utils";
-import { globalConfig, IS_DEMO } from "../../../core/config";
+import { globalConfig, IS_DEMO, THIRDPARTY_URLS } from "../../../core/config";
 import { DrawParameters } from "../../../core/draw_parameters";
 import { Loader } from "../../../core/loader";
 import { DialogWithForm } from "../../../core/modal_dialog_elements";
 import { FormElementInput } from "../../../core/modal_dialog_forms";
 import { Rectangle } from "../../../core/rectangle";
 import { STOP_PROPAGATION } from "../../../core/signal";
-import { arrayDeleteValue, lerp, makeDiv, removeAllChildren } from "../../../core/utils";
+import {
+    arrayDeleteValue,
+    fillInLinkIntoTranslation,
+    lerp,
+    makeDiv,
+    removeAllChildren,
+} from "../../../core/utils";
 import { Vector } from "../../../core/vector";
 import { T } from "../../../translations";
 import { BaseItem } from "../../base_item";
@@ -272,7 +278,7 @@ export class HUDWaypoints extends BaseHUDPart {
         const dialog = new DialogWithForm({
             app: this.root.app,
             title: waypoint ? T.dialogs.createMarker.titleEdit : T.dialogs.createMarker.title,
-            desc: T.dialogs.createMarker.desc,
+            desc: fillInLinkIntoTranslation(T.dialogs.createMarker.desc, THIRDPARTY_URLS.shapeViewer),
             formElements: [markerNameInput],
             buttons: waypoint ? ["delete:bad", "cancel", "ok:good"] : ["cancel", "ok:good"],
         });

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

@@ -1,13 +1,14 @@
 import { makeOffscreenBuffer } from "../../../core/buffer_utils";
 import { globalConfig } from "../../../core/config";
 import { DrawParameters } from "../../../core/draw_parameters";
-import { KEYMAPPINGS } from "../../key_action_mapper";
-import { THEME } from "../../theme";
-import { BaseHUDPart } from "../base_hud_part";
 import { Loader } from "../../../core/loader";
 import { lerp } from "../../../core/utils";
+import { SOUNDS } from "../../../platform/sound";
+import { KEYMAPPINGS } from "../../key_action_mapper";
 import { enumHubGoalRewards } from "../../tutorial_goals";
+import { BaseHUDPart } from "../base_hud_part";
 
+const copy = require("clipboard-copy");
 const wiresBackgroundDpi = 4;
 
 export class HUDWiresOverlay extends BaseHUDPart {
@@ -16,6 +17,7 @@ export class HUDWiresOverlay extends BaseHUDPart {
     initialize() {
         // Probably not the best location, but the one which makes most sense
         this.root.keyMapper.getBinding(KEYMAPPINGS.ingame.switchLayers).add(this.switchLayers, this);
+        this.root.keyMapper.getBinding(KEYMAPPINGS.placement.copyWireValue).add(this.copyWireValue, this);
 
         this.generateTilePattern();
 
@@ -54,7 +56,53 @@ export class HUDWiresOverlay extends BaseHUDPart {
 
     update() {
         const desiredAlpha = this.root.currentLayer === "wires" ? 1.0 : 0.0;
-        this.currentAlpha = lerp(this.currentAlpha, desiredAlpha, 0.12);
+
+        // On low performance, skip the fade
+        if (this.root.entityMgr.entities.length > 5000 || this.root.dynamicTickrate.averageFps < 50) {
+            this.currentAlpha = desiredAlpha;
+        } else {
+            this.currentAlpha = lerp(this.currentAlpha, desiredAlpha, 0.12);
+        }
+    }
+
+    /**
+     * Copies the wires value below the cursor
+     */
+    copyWireValue() {
+        if (this.root.currentLayer !== "wires") {
+            return;
+        }
+
+        const mousePos = this.root.app.mousePosition;
+        if (!mousePos) {
+            return;
+        }
+
+        const tile = this.root.camera.screenToWorld(mousePos).toTileSpace();
+        const contents = this.root.map.getLayerContentXY(tile.x, tile.y, "wires");
+        if (!contents) {
+            return;
+        }
+
+        let value = null;
+        if (contents.components.Wire) {
+            const network = contents.components.Wire.linkedNetwork;
+            if (network && network.hasValue()) {
+                value = network.currentValue;
+            }
+        }
+
+        if (contents.components.ConstantSignal) {
+            value = contents.components.ConstantSignal.signal;
+        }
+
+        if (value) {
+            copy(value.getAsCopyableKey());
+            this.root.soundProxy.playUi(SOUNDS.copy);
+        } else {
+            copy("");
+            this.root.soundProxy.playUiError();
+        }
     }
 
     /**

src/js/game/hud/parts/wires_toolbar.js

@@ -8,6 +8,9 @@ import { MetaVirtualProcessorBuilding } from "../../buildings/virtual_processor"
 import { MetaTransistorBuilding } from "../../buildings/transistor";
 import { MetaAnalyzerBuilding } from "../../buildings/analyzer";
 import { MetaComparatorBuilding } from "../../buildings/comparator";
+import { MetaReaderBuilding } from "../../buildings/reader";
+import { MetaFilterBuilding } from "../../buildings/filter";
+import { MetaDisplayBuilding } from "../../buildings/display";
 
 export class HUDWiresToolbar extends HUDBaseToolbar {
     constructor(root) {
@@ -16,13 +19,18 @@ export class HUDWiresToolbar extends HUDBaseToolbar {
                 MetaWireBuilding,
                 MetaWireTunnelBuilding,
                 MetaConstantSignalBuilding,
-                MetaLeverBuilding,
                 MetaLogicGateBuilding,
                 MetaVirtualProcessorBuilding,
                 MetaAnalyzerBuilding,
                 MetaComparatorBuilding,
                 MetaTransistorBuilding,
             ],
+            secondaryBuildings: [
+                MetaReaderBuilding,
+                MetaLeverBuilding,
+                MetaFilterBuilding,
+                MetaDisplayBuilding,
+            ],
             visibilityCondition: () =>
                 !this.root.camera.getIsMapOverlayActive() && this.root.currentLayer === "wires",
             htmlElementId: "ingame_HUD_wires_toolbar",

src/js/game/items/boolean_item.js

@@ -26,6 +26,13 @@ export class BooleanItem extends BaseItem {
         return "boolean";
     }
 
+    /**
+     * @returns {string}
+     */
+    getAsCopyableKey() {
+        return this.value ? "1" : "0";
+    }
+
     /**
      * @param {number} value
      */
@@ -56,6 +63,21 @@ export class BooleanItem extends BaseItem {
         }
         sprite.drawCachedCentered(parameters, x, y, diameter);
     }
+
+    /**
+     * Draws the item to a canvas
+     * @param {CanvasRenderingContext2D} context
+     * @param {number} size
+     */
+    drawFullSizeOnCanvas(context, size) {
+        let sprite;
+        if (this.value) {
+            sprite = Loader.getSprite("sprites/wires/boolean_true.png");
+        } else {
+            sprite = Loader.getSprite("sprites/wires/boolean_false.png");
+        }
+        sprite.drawCentered(context, size / 2, size / 2, size);
+    }
 }
 
 export const BOOL_FALSE_SINGLETON = new BooleanItem(0);

src/js/game/items/color_item.js

@@ -28,6 +28,13 @@ export class ColorItem extends BaseItem {
         return "color";
     }
 
+    /**
+     * @returns {string}
+     */
+    getAsCopyableKey() {
+        return this.color;
+    }
+
     /**
      * @param {BaseItem} other
      */
@@ -47,6 +54,18 @@ export class ColorItem extends BaseItem {
         return THEME.map.resources[this.color];
     }
 
+    /**
+     * Draws the item to a canvas
+     * @param {CanvasRenderingContext2D} context
+     * @param {number} size
+     */
+    drawFullSizeOnCanvas(context, size) {
+        if (!this.cachedSprite) {
+            this.cachedSprite = Loader.getSprite("sprites/colors/" + this.color + ".png");
+        }
+        this.cachedSprite.drawCentered(context, size / 2, size / 2, size);
+    }
+
     /**
      * @param {number} x
      * @param {number} y

src/js/game/items/shape_item.js

@@ -1,62 +1,78 @@
-import { DrawParameters } from "../../core/draw_parameters";
+import { DrawParameters } from "../../core/draw_parameters";
-import { types } from "../../savegame/serialization";
+import { types } from "../../savegame/serialization";
-import { BaseItem } from "../base_item";
+import { BaseItem } from "../base_item";
-import { ShapeDefinition } from "../shape_definition";
+import { ShapeDefinition } from "../shape_definition";
-import { THEME } from "../theme";
+import { THEME } from "../theme";
-import { globalConfig } from "../../core/config";
+import { globalConfig } from "../../core/config";
-
+
-export class ShapeItem extends BaseItem {
+export class ShapeItem extends BaseItem {
-    static getId() {
+    static getId() {
-        return "shape";
+        return "shape";
-    }
+    }
-
+
-    static getSchema() {
+    static getSchema() {
-        return types.string;
+        return types.string;
-    }
+    }
-
+
-    serialize() {
+    serialize() {
-        return this.definition.getHash();
+        return this.definition.getHash();
-    }
+    }
-
+
-    deserialize(data) {
+    deserialize(data) {
-        this.definition = ShapeDefinition.fromShortKey(data);
+        this.definition = ShapeDefinition.fromShortKey(data);
-    }
+    }
-
+
-    /** @returns {"shape"} **/
+    /** @returns {"shape"} **/
-    getItemType() {
+    getItemType() {
-        return "shape";
+        return "shape";
-    }
+    }
-
+
-    /**
+    /**
-     * @param {BaseItem} other
+     * @returns {string}
-     */
+     */
-    equalsImpl(other) {
+    getAsCopyableKey() {
-        return this.definition.getHash() === /** @type {ShapeItem} */ (other).definition.getHash();
+        return this.definition.getHash();
-    }
+    }
-
+
-    /**
+    /**
-     * @param {ShapeDefinition} definition
+     * @param {BaseItem} other
-     */
+     */
-    constructor(definition) {
+    equalsImpl(other) {
-        super();
+        return this.definition.getHash() === /** @type {ShapeItem} */ (other).definition.getHash();
-
+    }
-        /**
+
-         * This property must not be modified on runtime, you have to clone the class in order to change the definition
+    /**
-         */
+     * @param {ShapeDefinition} definition
-        this.definition = definition;
+     */
-    }
+    constructor(definition) {
-
+        super();
-    getBackgroundColorAsResource() {
+
-        return THEME.map.resources.shape;
+        /**
-    }
+         * This property must not be modified on runtime, you have to clone the class in order to change the definition
-
+         */
-    /**
+        this.definition = definition;
-     * @param {number} x
+    }
-     * @param {number} y
+
-     * @param {DrawParameters} parameters
+    getBackgroundColorAsResource() {
-     * @param {number=} diameter
+        return THEME.map.resources.shape;
-     */
+    }
-    drawItemCenteredImpl(x, y, parameters, diameter = globalConfig.defaultItemDiameter) {
+
-        this.definition.drawCentered(x, y, parameters, diameter);
+    /**
-    }
+     * Draws the item to a canvas
-}
+     * @param {CanvasRenderingContext2D} context
+     * @param {number} size
+     */
+    drawFullSizeOnCanvas(context, size) {
+        this.definition.drawFullSizeOnCanvas(context, size);
+    }
+
+    /**
+     * @param {number} x
+     * @param {number} y
+     * @param {DrawParameters} parameters
+     * @param {number=} diameter
+     */
+    drawItemCenteredImpl(x, y, parameters, diameter = globalConfig.defaultItemDiameter) {
+        this.definition.drawCentered(x, y, parameters, diameter);
+    }
+}

src/js/game/key_action_mapper.js

@@ -67,12 +67,11 @@ export const KEYMAPPINGS = {
         wire: { keyCode: key("1") },
         wire_tunnel: { keyCode: key("2") },
         constant_signal: { keyCode: key("3") },
-        lever_wires: { keyCode: key("4") },
+        logic_gate: { keyCode: key("4") },
-        logic_gate: { keyCode: key("5") },
+        virtual_processor: { keyCode: key("5") },
-        virtual_processor: { keyCode: key("6") },
+        analyzer: { keyCode: key("6") },
-        analyzer: { keyCode: key("7") },
+        comparator: { keyCode: key("7") },
-        comparator: { keyCode: key("8") },
+        transistor: { keyCode: key("8") },
-        transistor: { keyCode: key("9") },
     },
 
     placement: {
@@ -82,6 +81,8 @@ export const KEYMAPPINGS = {
         cycleBuildingVariants: { keyCode: key("T") },
         cycleBuildings: { keyCode: 9 }, // TAB
         switchDirectionLockSide: { keyCode: key("R") },
+
+        copyWireValue: { keyCode: key("Z") },
     },
 
     massSelect: {

src/js/game/shape_definition.js

@@ -297,6 +297,15 @@ export class ShapeDefinition extends BasicSerializableObject {
         parameters.context.drawImage(canvas, x - diameter / 2, y - diameter / 2, diameter, diameter);
     }
 
+    /**
+     * Draws the item to a canvas
+     * @param {CanvasRenderingContext2D} context
+     * @param {number} size
+     */
+    drawFullSizeOnCanvas(context, size) {
+        this.internalGenerateShapeBuffer(null, context, size, size, 1);
+    }
+
     /**
      * Generates this shape as a canvas
      * @param {number} size

src/js/game/systems/constant_signal.js

@@ -1,6 +1,9 @@
 import trim from "trim";
+import { THIRDPARTY_URLS } from "../../core/config";
 import { DialogWithForm } from "../../core/modal_dialog_elements";
-import { FormElementInput } from "../../core/modal_dialog_forms";
+import { FormElementInput, FormElementItemChooser } from "../../core/modal_dialog_forms";
+import { fillInLinkIntoTranslation } from "../../core/utils";
+import { T } from "../../translations";
 import { BaseItem } from "../base_item";
 import { enumColors } from "../colors";
 import { ConstantSignalComponent } from "../components/constant_signal";
@@ -9,6 +12,7 @@ import { GameSystemWithFilter } from "../game_system_with_filter";
 import { BOOL_FALSE_SINGLETON, BOOL_TRUE_SINGLETON } from "../items/boolean_item";
 import { COLOR_ITEM_SINGLETONS } from "../items/color_item";
 import { ShapeDefinition } from "../shape_definition";
+import { blueprintShape } from "../upgrades";
 
 export class ConstantSignalSystem extends GameSystemWithFilter {
     constructor(root) {
@@ -41,23 +45,35 @@ export class ConstantSignalSystem extends GameSystemWithFilter {
 
         const signalValueInput = new FormElementInput({
             id: "signalValue",
-            label: null,
+            label: fillInLinkIntoTranslation(T.dialogs.editSignal.descShortKey, THIRDPARTY_URLS.shapeViewer),
             placeholder: "",
             defaultValue: "",
             validator: val => this.parseSignalCode(val),
         });
+
+        const itemInput = new FormElementItemChooser({
+            id: "signalItem",
+            label: null,
+            items: [
+                BOOL_FALSE_SINGLETON,
+                BOOL_TRUE_SINGLETON,
+                ...Object.values(COLOR_ITEM_SINGLETONS),
+                this.root.shapeDefinitionMgr.getShapeItemFromShortKey(blueprintShape),
+            ],
+        });
+
         const dialog = new DialogWithForm({
             app: this.root.app,
-            title: "Set Signal",
+            title: T.dialogs.editSignal.title,
-            desc: "Enter a shape code, color or '0' or '1'",
+            desc: T.dialogs.editSignal.descItems,
-            formElements: [signalValueInput],
+            formElements: [itemInput, signalValueInput],
             buttons: ["cancel:bad:escape", "ok:good:enter"],
             closeButton: false,
         });
         this.root.hud.parts.dialogs.internalShowDialog(dialog);
 
         // When confirmed, set the signal
-        dialog.buttonSignals.ok.add(() => {
+        const closeHandler = () => {
             if (!this.root || !this.root.entityMgr) {
                 // Game got stopped
                 return;
@@ -75,8 +91,16 @@ export class ConstantSignalSystem extends GameSystemWithFilter {
                 return;
             }
 
-            constantComp.signal = this.parseSignalCode(signalValueInput.getValue());
+            if (itemInput.chosenItem) {
-        });
+                console.log(itemInput.chosenItem);
+                constantComp.signal = itemInput.chosenItem;
+            } else {
+                constantComp.signal = this.parseSignalCode(signalValueInput.getValue());
+            }
+        };
+
+        dialog.buttonSignals.ok.add(closeHandler);
+        dialog.valueChosen.add(closeHandler);
 
         // When cancelled, destroy the entity again
         dialog.buttonSignals.cancel.add(() => {

src/js/game/systems/hub.js

@@ -1,15 +1,15 @@
+import { globalConfig } from "../../core/config";
+import { smoothenDpi } from "../../core/dpi_manager";
 import { DrawParameters } from "../../core/draw_parameters";
+import { drawSpriteClipped } from "../../core/draw_utils";
 import { Loader } from "../../core/loader";
+import { Rectangle } from "../../core/rectangle";
+import { ORIGINAL_SPRITE_SCALE } from "../../core/sprites";
 import { formatBigNumber } from "../../core/utils";
 import { T } from "../../translations";
 import { HubComponent } from "../components/hub";
 import { Entity } from "../entity";
 import { GameSystemWithFilter } from "../game_system_with_filter";
-import { globalConfig } from "../../core/config";
-import { smoothenDpi } from "../../core/dpi_manager";
-import { drawSpriteClipped } from "../../core/draw_utils";
-import { Rectangle } from "../../core/rectangle";
-import { ORIGINAL_SPRITE_SCALE } from "../../core/sprites";
 
 const HUB_SIZE_TILES = 4;
 const HUB_SIZE_PIXELS = HUB_SIZE_TILES * globalConfig.tileSize;
@@ -73,25 +73,36 @@ export class HubSystem extends GameSystemWithFilter {
         const textOffsetX = 70;
         const textOffsetY = 61;
 
-        // Deliver count
+        if (goals.throughputOnly) {
-        const delivered = this.root.hubGoals.getCurrentGoalDelivered();
+            // Throughput
-        const deliveredText = "" + formatBigNumber(delivered);
+            const deliveredText = T.ingame.statistics.shapesDisplayUnits.second.replace(
+                "<shapes>",
+                formatBigNumber(goals.required)
+            );
 
-        if (delivered > 9999) {
+            context.font = "bold 12px GameFont";
-            context.font = "bold 16px GameFont";
+            context.fillStyle = "#64666e";
-        } else if (delivered > 999) {
+            context.textAlign = "left";
-            context.font = "bold 20px GameFont";
+            context.fillText(deliveredText, textOffsetX, textOffsetY);
         } else {
-            context.font = "bold 25px GameFont";
+            // Deliver count
-        }
+            const delivered = this.root.hubGoals.getCurrentGoalDelivered();
-        context.fillStyle = "#64666e";
+            const deliveredText = "" + formatBigNumber(delivered);
-        context.textAlign = "left";
-        context.fillText(deliveredText, textOffsetX, textOffsetY);
 
-        // Required
+            if (delivered > 999) {
-        context.font = "13px GameFont";
+                context.font = "bold 16px GameFont";
-        context.fillStyle = "#a4a6b0";
+            } else {
-        context.fillText("/ " + formatBigNumber(goals.required), textOffsetX, textOffsetY + 13);
+                context.font = "bold 25px GameFont";
+            }
+            context.fillStyle = "#64666e";
+            context.textAlign = "left";
+            context.fillText(deliveredText, textOffsetX, textOffsetY);
+
+            // Required
+            context.font = "13px GameFont";
+            context.fillStyle = "#a4a6b0";
+            context.fillText("/ " + formatBigNumber(goals.required), textOffsetX, textOffsetY + 13);
+        }
 
         // Reward
         const rewardText = T.storyRewards[goals.reward].title.toUpperCase();

src/js/game/systems/logic_gate.js

@@ -3,7 +3,7 @@ import { enumColors } from "../colors";
 import { enumLogicGateType, LogicGateComponent } from "../components/logic_gate";
 import { enumPinSlotType } from "../components/wired_pins";
 import { GameSystemWithFilter } from "../game_system_with_filter";
-import { BOOL_FALSE_SINGLETON, BOOL_TRUE_SINGLETON, isTruthyItem } from "../items/boolean_item";
+import { BOOL_FALSE_SINGLETON, BOOL_TRUE_SINGLETON, BooleanItem, isTruthyItem } from "../items/boolean_item";
 import { ColorItem, COLOR_ITEM_SINGLETONS } from "../items/color_item";
 import { ShapeItem } from "../items/shape_item";
 import { ShapeDefinition } from "../shape_definition";

src/js/game/tutorial_goals.js

@@ -143,10 +143,10 @@ export const tutorialGoals = [
     // 14
     // Belt reader
     {
-        // @todo
+        shape: "--Cg----:--Cr----", // unused
-        shape: "CuCuCuCu",
+        required: 16, // Per second!
-        required: 0,
         reward: enumHubGoalRewards.reward_belt_reader,
+        throughputOnly: true,
     },
 
     // 15
@@ -176,8 +176,7 @@ export const tutorialGoals = [
     // 18
     // Rotater (180deg)
     {
-        // @TODO
+        shape: "Sg----Sg:CgCgCgCg:--CyCy--", // unused
-        shape: "CuCuCuCu",
         required: 20000,
         reward: enumHubGoalRewards.reward_rotater_180,
     },
@@ -185,8 +184,7 @@ export const tutorialGoals = [
     // 19
     // Compact splitter
     {
-        // @TODO
+        shape: "CpRpCp--:SwSwSwSw",
-        shape: "CuCuCuCu",
         required: 25000,
         reward: enumHubGoalRewards.reward_splitter,
     },
@@ -195,15 +193,14 @@ export const tutorialGoals = [
     // WIRES
     {
         shape: finalGameShape,
-        required: 50000,
+        required: 25000,
         reward: enumHubGoalRewards.reward_wires_filters_and_levers,
     },
 
     // 21
     // Display
     {
-        // @TODO
+        shape: "CrCrCrCr:CwCwCwCw:CrCrCrCr:CwCwCwCw",
-        shape: "CuCuCuCu",
         required: 25000,
         reward: enumHubGoalRewards.reward_display,
     },
@@ -211,43 +208,37 @@ export const tutorialGoals = [
     // 22
     // Constant signal
     {
-        // @TODO
+        shape: "Cg----Cr:Cw----Cw:Sy------:Cy----Cy",
-        shape: "CuCuCuCu",
+        required: 25000,
-        required: 30000,
         reward: enumHubGoalRewards.reward_constant_signal,
     },
 
     // 23
     // Quad Painter
     {
-        // @TODO
+        shape: "CcSyCcSy:SyCcSyCc:CcSyCcSy",
-        shape: "CuCuCuCu",
+        required: 5000,
-        // shape: "WrRgWrRg:CwCrCwCr:SgSgSgSg", // processors t4 (two variants)
-        required: 35000,
         reward: enumHubGoalRewards.reward_painter_quad,
     },
 
     // 24 Logic gates
     {
-        // @TODO
+        shape: "CcRcCcRc:RwCwRwCw:Sr--Sw--:CyCyCyCy",
-        shape: "CuCuCuCu",
+        required: 10000,
-        required: 40000,
         reward: enumHubGoalRewards.reward_logic_gates,
     },
 
     // 25 Virtual Processing
     {
-        // @TODO
+        shape: "Rg--Rg--:CwRwCwRw:--Rg--Rg",
-        shape: "CuCuCuCu",
+        required: 10000,
-        required: 45000,
         reward: enumHubGoalRewards.reward_virtual_processing,
     },
 
     // 26 Freeplay
     {
-        // @TODO
+        shape: "CbCuCbCu:Sr------:--CrSrCr:CwCwCwCw",
-        shape: "CuCuCuCu",
+        required: 10000,
-        required: 100000,
         reward: enumHubGoalRewards.reward_freeplay,
     },
 ];

src/js/game/upgrades.js

@@ -2,10 +2,28 @@ import { findNiceIntegerValue } from "../core/utils";
 import { ShapeDefinition } from "./shape_definition";
 
 export const finalGameShape = "RuCw--Cw:----Ru--";
+export const rocketShape = "CbCuCbCu:Sr------:--CrSrCr:CwCwCwCw";
 export const blueprintShape = "CbCbCbRb:CwCwCwCw";
 
 const fixedImprovements = [0.5, 0.5, 1, 1, 2, 2];
 
+const numEndgameUpgrades = G_IS_DEV || G_IS_STANDALONE ? 20 - fixedImprovements.length - 1 : 0;
+
+function generateEndgameUpgrades() {
+    return new Array(numEndgameUpgrades).fill(null).map((_, i) => ({
+        required: [
+            { shape: blueprintShape, amount: 30000 + i * 10000 },
+            { shape: finalGameShape, amount: 20000 + i * 5000 },
+            { shape: rocketShape, amount: 20000 + i * 5000 },
+        ],
+        excludePrevious: true,
+    }));
+}
+
+for (let i = 0; i < numEndgameUpgrades; ++i) {
+    fixedImprovements.push(0.1);
+}
+
 /** @typedef {{
  *   shape: string,
  *   amount: number
@@ -41,6 +59,7 @@ export const UPGRADES = {
             required: [{ shape: finalGameShape, amount: 50000 }],
             excludePrevious: true,
         },
+        ...generateEndgameUpgrades(),
     ],
 
     miner: [
@@ -63,6 +82,7 @@ export const UPGRADES = {
             required: [{ shape: finalGameShape, amount: 50000 }],
             excludePrevious: true,
         },
+        ...generateEndgameUpgrades(),
     ],
 
     processors: [
@@ -85,6 +105,7 @@ export const UPGRADES = {
             required: [{ shape: finalGameShape, amount: 50000 }],
             excludePrevious: true,
         },
+        ...generateEndgameUpgrades(),
     ],
 
     painting: [
@@ -107,6 +128,7 @@ export const UPGRADES = {
             required: [{ shape: finalGameShape, amount: 50000 }],
             excludePrevious: true,
         },
+        ...generateEndgameUpgrades(),
     ],
 };
 

src/js/globals.d.ts

@@ -19,9 +19,6 @@ declare const G_BUILD_VERSION: string;
 declare const G_ALL_UI_IMAGES: Array<string>;
 declare const G_IS_RELEASE: boolean;
 
-// Node require
-declare function require(...args): any;
-
 // Polyfills
 declare interface String {
     replaceAll(search: string, replacement: string): string;

src/js/platform/sound.js

@@ -25,6 +25,7 @@ export const SOUNDS = {
     destroyBuilding: "destroy_building",
     placeBuilding: "place_building",
     placeBelt: "place_belt",
+    copy: "copy",
 };
 
 export const MUSIC = {

src/js/savegame/schemas/1006.js

@@ -19,6 +19,7 @@ import { getCodeFromBuildingData } from "../../game/building_codes.js";
 import { StaticMapEntityComponent } from "../../game/components/static_map_entity.js";
 import { Entity } from "../../game/entity.js";
 import { defaultBuildingVariant, MetaBuilding } from "../../game/meta_building.js";
+import { finalGameShape } from "../../game/upgrades.js";
 import { SavegameInterface_V1005 } from "./1005.js";
 
 const schema = require("./1006.json");
@@ -151,11 +152,26 @@ export class SavegameInterface_V1006 extends SavegameInterface_V1005 {
             stored[shapeKey] = rebalance(stored[shapeKey]);
         }
 
+        stored[finalGameShape] = 0;
+
         // Reduce goals
         if (dump.hubGoals.currentGoal) {
             dump.hubGoals.currentGoal.required = rebalance(dump.hubGoals.currentGoal.required);
         }
 
+        let level = Math.min(19, dump.hubGoals.level);
+
+        const levelMapping = {
+            14: 15,
+            15: 16,
+            16: 17,
+            17: 18,
+            18: 19,
+            19: 20,
+        };
+
+        dump.hubGoals.level = levelMapping[level] || level;
+
         // Update entities
         const entities = dump.entities;
         for (let i = 0; i < entities.length; ++i) {

sync-translations.js

@@ -1,82 +1,80 @@
-// Synchronizes all translations
+// Synchronizes all translations
-
+
-const fs = require("fs");
+const fs = require("fs");
-const matchAll = require("match-all");
+const matchAll = require("match-all");
-const path = require("path");
+const path = require("path");
-const YAWN = require("yawn-yaml/cjs");
+const YAML = require("yaml");
-const YAML = require("yaml");
+
-
+const files = fs
-const files = fs
+    .readdirSync(path.join(__dirname, "translations"))
-    .readdirSync(path.join(__dirname, "translations"))
+    .filter(x => x.endsWith(".yaml"))
-    .filter(x => x.endsWith(".yaml"))
+    .filter(x => x.indexOf("base-en") < 0);
-    .filter(x => x.indexOf("base-en") < 0);
+
-
+const originalContents = fs
-const originalContents = fs
+    .readFileSync(path.join(__dirname, "translations", "base-en.yaml"))
-    .readFileSync(path.join(__dirname, "translations", "base-en.yaml"))
+    .toString("utf-8");
-    .toString("utf-8");
+
-
+const original = YAML.parse(originalContents);
-const original = YAML.parse(originalContents);
+
-
+const placeholderRegexp = /[[<]([a-zA-Z_0-9]+)[\]<]/gi;
-const placeholderRegexp = /[[<]([a-zA-Z_0-9]+)[\]<]/gi;
+
-
+function match(originalObj, translatedObj, path = "/") {
-function match(originalObj, translatedObj, path = "/") {
+    for (const key in originalObj) {
-    for (const key in originalObj) {
+        if (!translatedObj.hasOwnProperty(key)) {
-        if (!translatedObj.hasOwnProperty(key)) {
+            console.warn(" | Missing key", path + key);
-            console.warn(" | Missing key", path + key);
+            translatedObj[key] = originalObj[key];
-            translatedObj[key] = originalObj[key];
+            continue;
-            continue;
+        }
-        }
+        const valueOriginal = originalObj[key];
-        const valueOriginal = originalObj[key];
+        const valueMatching = translatedObj[key];
-        const valueMatching = translatedObj[key];
+        if (typeof valueOriginal !== typeof valueMatching) {
-        if (typeof valueOriginal !== typeof valueMatching) {
+            console.warn(" | MISMATCHING type (obj|non-obj) in", path + key);
-            console.warn(" | MISMATCHING type (obj|non-obj) in", path + key);
+            continue;
-            continue;
+        }
-        }
+
-
+        if (typeof valueOriginal === "object") {
-        if (typeof valueOriginal === "object") {
+            match(valueOriginal, valueMatching, path + key + "/");
-            match(valueOriginal, valueMatching, path + key + "/");
+        } else if (typeof valueOriginal === "string") {
-        } else if (typeof valueOriginal === "string") {
+            // todo
-            // todo
+            const originalPlaceholders = matchAll(valueOriginal, placeholderRegexp).toArray();
-            const originalPlaceholders = matchAll(valueOriginal, placeholderRegexp).toArray();
+            const translatedPlaceholders = matchAll(valueMatching, placeholderRegexp).toArray();
-            const translatedPlaceholders = matchAll(valueMatching, placeholderRegexp).toArray();
+
-
+            if (originalPlaceholders.length !== translatedPlaceholders.length) {
-            if (originalPlaceholders.length !== translatedPlaceholders.length) {
+                console.warn(
-                console.warn(
+                    " | Mismatching placeholders in",
-                    " | Mismatching placeholders in",
+                    path + key,
-                    path + key,
+                    "->",
-                    "->",
+                    originalPlaceholders,
-                    originalPlaceholders,
+                    "vs",
-                    "vs",
+                    translatedPlaceholders
-                    translatedPlaceholders
+                );
-                );
+                translatedObj[key] = originalObj[key];
-                translatedObj[key] = originalObj[key];
+                continue;
-                continue;
+            }
-            }
+        } else {
-        } else {
+            console.warn(" | Unknown type: ", typeof valueOriginal);
-            console.warn(" | Unknown type: ", typeof valueOriginal);
+        }
-        }
+    }
-
+
-        // const matching = translatedObj[key];
+    for (const key in translatedObj) {
-    }
+        if (!originalObj.hasOwnProperty(key)) {
-
+            console.warn(" | Obsolete key", path + key);
-    for (const key in translatedObj) {
+            delete translatedObj[key];
-        if (!originalObj.hasOwnProperty(key)) {
+        }
-            console.warn(" | Obsolete key", path + key);
+    }
-            delete translatedObj[key];
+}
-        }
+
-    }
+for (let i = 0; i < files.length; ++i) {
-}
+    const filePath = path.join(__dirname, "translations", files[i]);
-
+    console.log("Processing", files[i]);
-for (let i = 0; i < files.length; ++i) {
+    const translatedContents = fs.readFileSync(filePath).toString("utf-8");
-    const filePath = path.join(__dirname, "translations", files[i]);
+
-    console.log("Processing", files[i]);
+    const json = YAML.parse(translatedContents);
-    const translatedContents = fs.readFileSync(filePath).toString("utf-8");
+    match(original, json, "/");
-    const translated = YAML.parse(translatedContents);
+
-    const handle = new YAWN(translatedContents);
+    const stringified = YAML.stringify(json, {
-
+        indent: 4,
-    const json = handle.json;
+        simpleKeys: true,
-    match(original, json, "/");
+    });
-    handle.json = json;
+    fs.writeFileSync(filePath, stringified, "utf-8");
-
+}
-    fs.writeFileSync(filePath, handle.yaml, "utf-8");
-}

translations/base-en.yaml

@@ -268,7 +268,13 @@ dialogs:
     createMarker:
         title: New Marker
         titleEdit: Edit Marker
-        desc: Give it a meaningful name, you can also include a <strong>short key</strong> of a shape (Which you can generate <a href="https://viewer.shapez.io" target="_blank">here</a>)
+        desc: Give it a meaningful name, you can also include a <strong>short key</strong> of a shape (Which you can generate <link>here</link>)
+
+    editSignal:
+        title: Set Signal
+        descItems: >-
+            Choose a pre-defined item:
+        descShortKey: ... or enter the <strong>short key</strong> of a shape (Which you can generate <link>here</link>)
 
     markerDemoLimit:
         desc: You can only create two custom markers in the demo. Get the standalone for unlimited markers!
@@ -281,6 +287,10 @@ dialogs:
         title: Rename Savegame
         desc: You can rename your savegame here.
 
+    entityWarning:
+        title: Performance Warning
+        desc: You have placed a lot of buildings, this is just a friendly reminder that the game can not handle an endless count of buildings - So try to keep your factories compact!
+
 ingame:
     # This is shown in the top left corner and displays useful keybindings in
     # every situation
@@ -350,6 +360,7 @@ ingame:
     notifications:
         newUpgrade: A new upgrade is available!
         gameSaved: Your game has been saved.
+        freeplayLevelComplete: Level <level> has been completed!
 
     # The "Upgrades" window
     shop:
@@ -360,7 +371,8 @@ ingame:
         tier: Tier <x>
 
         # The roman number for each tier
-        tierLabels: [I, II, III, IV, V, VI, VII, VIII, IX, X]
+        tierLabels:
+            [I, II, III, IV, V, VI, VII, VIII, IX, X, XI, XII, XIII, XIV, XV, XVI, XVII, XVIII, XIX, XX]
 
         maximumLevel: MAXIMUM LEVEL (Speed x<currentMult>)
 
@@ -788,13 +800,13 @@ storyRewards:
     no_reward_freeplay:
         title: Next level
         desc: >-
-            Congratulations! By the way, more content is planned for the standalone!
+            Congratulations!
 
     reward_freeplay:
         title: Freeplay
         desc: >-
             You did it! You unlocked the <strong>free-play mode</strong>! This means that shapes are now <strong>randomly</strong> generated!<br><br>
-            Since the hub will only require low quantities from now on, I highly recommend to build a machine which automatically delivers the requested shape!<br><br>
+            Since the hub will require a <strong>throughput</strong> from now on, I highly recommend to build a machine which automatically delivers the requested shape!<br><br>
             The HUB outputs the requested shape on the wires layer, so all you have to do is to analyze it and automatically configure your factory based on that.
 
 settings:
@@ -1039,8 +1051,7 @@ keybindings:
         wire: *wire
         constant_signal: *constant_signal
         logic_gate: Logic Gate
-        lever: Switch (regular)
+        lever: *lever
-        lever_wires: Switch (wires)
         filter: *filter
         wire_tunnel: *wire_tunnel
         display: *display
@@ -1062,7 +1073,8 @@ keybindings:
         lockBeltDirection: Enable belt planner
         switchDirectionLockSide: >-
             Planner: Switch side
-
+        copyWireValue: >-
+            Wires: Copy value below cursor
         massSelectStart: Hold and drag to start
         massSelectSelectMultiple: Select multiple areas
         massSelectCopy: Copy area