Rework constant signal dialog

2026-03-02 03:39:21 +00:00 · 2020-09-28 12:17:13 +02:00
parent 8c57137b82
commit d4617edad5
28 changed files with 1072 additions and 874 deletions
--- a/src/js/core/config.js
+++ b/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/",
 };
--- a/src/js/core/modal_dialog_elements.js
+++ b/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;
--- a/src/js/core/modal_dialog_forms.js
+++ b/src/js/core/modal_dialog_forms.js
@@ -1,150 +1,221 @@
-import { ClickDetector } from "./click_detector";
-
-export class FormElement {
-    constructor(id, label) {
-        this.id = id;
-        this.label = label;
-    }
-
-    getHtml() {
-        abstract;
-        return "";
-    }
-
-    getFormElement(parent) {
-        return parent.querySelector("[data-formId='" + this.id + "']");
-    }
-
-    bindEvents(parent, clickTrackers) {
-        abstract;
-    }
-
-    focus() {}
-
-    isValid() {
-        return true;
-    }
-
-    /** @returns {any} */
-    getValue() {
-        abstract;
-    }
-}
-
-export class FormElementInput extends FormElement {
-    constructor({ id, label = null, placeholder, defaultValue = "", inputType = "text", validator = null }) {
-        super(id, label);
-        this.placeholder = placeholder;
-        this.defaultValue = defaultValue;
-        this.inputType = inputType;
-        this.validator = validator;
-
-        this.element = null;
-    }
-
-    getHtml() {
-        let classes = [];
-        let inputType = "text";
-        let maxlength = 256;
-        switch (this.inputType) {
-            case "text": {
-                classes.push("input-text");
-                break;
-            }
-
-            case "email": {
-                classes.push("input-email");
-                inputType = "email";
-                break;
-            }
-
-            case "token": {
-                classes.push("input-token");
-                inputType = "text";
-                maxlength = 4;
-                break;
-            }
-        }
-
-        return `
-            <div class="formElement input">
-                ${this.label ? `<label>${this.label}</label>` : ""}
-                <input
-                    type="${inputType}"
-                    value="${this.defaultValue.replace(/["\\]+/gi, "")}"
-                    maxlength="${maxlength}"
-                    autocomplete="off"
-                    autocorrect="off"
-                    autocapitalize="off"
-                    spellcheck="false"
-                    class="${classes.join(" ")}"
-                    placeholder="${this.placeholder.replace(/["\\]+/gi, "")}"
-                    data-formId="${this.id}">
-            </div>
-        `;
-    }
-
-    bindEvents(parent, clickTrackers) {
-        this.element = this.getFormElement(parent);
-        this.element.addEventListener("input", event => this.updateErrorState());
-        this.updateErrorState();
-    }
-
-    updateErrorState() {
-        this.element.classList.toggle("errored", !this.isValid());
-    }
-
-    isValid() {
-        return !this.validator || this.validator(this.element.value);
-    }
-
-    getValue() {
-        return this.element.value;
-    }
-
-    focus() {
-        this.element.focus();
-    }
-}
-
-export class FormElementCheckbox extends FormElement {
-    constructor({ id, label, defaultValue = true }) {
-        super(id, label);
-        this.defaultValue = defaultValue;
-        this.value = this.defaultValue;
-
-        this.element = null;
-    }
-
-    getHtml() {
-        return `
-            <div class="formElement checkBoxFormElem">
-            ${this.label ? `<label>${this.label}</label>` : ""}
-                <div class="checkbox ${this.defaultValue ? "checked" : ""}" data-formId='${this.id}'>
-                    <span class="knob"></span >
-                </div >
-            </div>
-        `;
-    }
-
-    bindEvents(parent, clickTrackers) {
-        this.element = this.getFormElement(parent);
-        const detector = new ClickDetector(this.element, {
-            consumeEvents: false,
-            preventDefault: false,
-        });
-        clickTrackers.push(detector);
-        detector.click.add(this.toggle, this);
-    }
-
-    getValue() {
-        return this.value;
-    }
-
-    toggle() {
-        this.value = !this.value;
-        this.element.classList.toggle("checked", this.value);
-    }
-
-    focus(parent) {}
-}
+import { BaseItem } from "../game/base_item";
+import { ClickDetector } from "./click_detector";
+import { Signal } from "./signal";
+
+export class FormElement {
+    constructor(id, label) {
+        this.id = id;
+        this.label = label;
+
+        this.valueChosen = new Signal();
+    }
+
+    getHtml() {
+        abstract;
+        return "";
+    }
+
+    getFormElement(parent) {
+        return parent.querySelector("[data-formId='" + this.id + "']");
+    }
+
+    bindEvents(parent, clickTrackers) {
+        abstract;
+    }
+
+    focus() {}
+
+    isValid() {
+        return true;
+    }
+
+    /** @returns {any} */
+    getValue() {
+        abstract;
+    }
+}
+
+export class FormElementInput extends FormElement {
+    constructor({ id, label = null, placeholder, defaultValue = "", inputType = "text", validator = null }) {
+        super(id, label);
+        this.placeholder = placeholder;
+        this.defaultValue = defaultValue;
+        this.inputType = inputType;
+        this.validator = validator;
+
+        this.element = null;
+    }
+
+    getHtml() {
+        let classes = [];
+        let inputType = "text";
+        let maxlength = 256;
+        switch (this.inputType) {
+            case "text": {
+                classes.push("input-text");
+                break;
+            }
+
+            case "email": {
+                classes.push("input-email");
+                inputType = "email";
+                break;
+            }
+
+            case "token": {
+                classes.push("input-token");
+                inputType = "text";
+                maxlength = 4;
+                break;
+            }
+        }
+
+        return `
+            <div class="formElement input">
+                ${this.label ? `<label>${this.label}</label>` : ""}
+                <input
+                    type="${inputType}"
+                    value="${this.defaultValue.replace(/["\\]+/gi, "")}"
+                    maxlength="${maxlength}"
+                    autocomplete="off"
+                    autocorrect="off"
+                    autocapitalize="off"
+                    spellcheck="false"
+                    class="${classes.join(" ")}"
+                    placeholder="${this.placeholder.replace(/["\\]+/gi, "")}"
+                    data-formId="${this.id}">
+            </div>
+        `;
+    }
+
+    bindEvents(parent, clickTrackers) {
+        this.element = this.getFormElement(parent);
+        this.element.addEventListener("input", event => this.updateErrorState());
+        this.updateErrorState();
+    }
+
+    updateErrorState() {
+        this.element.classList.toggle("errored", !this.isValid());
+    }
+
+    isValid() {
+        return !this.validator || this.validator(this.element.value);
+    }
+
+    getValue() {
+        return this.element.value;
+    }
+
+    focus() {
+        this.element.focus();
+    }
+}
+
+export class FormElementCheckbox extends FormElement {
+    constructor({ id, label, defaultValue = true }) {
+        super(id, label);
+        this.defaultValue = defaultValue;
+        this.value = this.defaultValue;
+
+        this.element = null;
+    }
+
+    getHtml() {
+        return `
+            <div class="formElement checkBoxFormElem">
+            ${this.label ? `<label>${this.label}</label>` : ""}
+                <div class="checkbox ${this.defaultValue ? "checked" : ""}" data-formId='${this.id}'>
+                    <span class="knob"></span >
+                </div >
+            </div>
+        `;
+    }
+
+    bindEvents(parent, clickTrackers) {
+        this.element = this.getFormElement(parent);
+        const detector = new ClickDetector(this.element, {
+            consumeEvents: false,
+            preventDefault: false,
+        });
+        clickTrackers.push(detector);
+        detector.click.add(this.toggle, this);
+    }
+
+    getValue() {
+        return this.value;
+    }
+
+    toggle() {
+        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.drawRaw(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() {}
+}
--- a/src/js/core/utils.js
+++ b/src/js/core/utils.js
@@ -670,3 +670,14 @@ export function safeModulo(n, m) {
 export function smoothPulse(time) {
    return Math.sin(time * 4) * 0.5 + 0.5;
 }
+
+/**
+ * Fills in a <link> tag
+ * @param {string} translation
+ * @param {string} link
+ */
+export function fillInLinkIntoTranslation(translation, link) {
+    return translation
+        .replace("<link>", "<a href='" + link + "' target='_blank'>")
+        .replace("</link>", "</a>");
+}