Rework constant signal dialog

src/js/game/base_item.js

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

@@ -56,6 +56,21 @@ export class BooleanItem extends BaseItem {
         }
         sprite.drawCachedCentered(parameters, x, y, diameter);
     }
+
+    /**
+     * Draws the item to a canvas
+     * @param {CanvasRenderingContext2D} context
+     * @param {number} size
+     */
+    drawRaw(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

@@ -47,6 +47,18 @@ export class ColorItem extends BaseItem {
         return THEME.map.resources[this.color];
     }
 
+    /**
+     * Draws the item to a canvas
+     * @param {CanvasRenderingContext2D} context
+     * @param {number} size
+     */
+    drawRaw(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,71 @@
-import { DrawParameters } from "../../core/draw_parameters";
-import { types } from "../../savegame/serialization";
-import { BaseItem } from "../base_item";
-import { ShapeDefinition } from "../shape_definition";
-import { THEME } from "../theme";
-import { globalConfig } from "../../core/config";
-
-export class ShapeItem extends BaseItem {
-    static getId() {
-        return "shape";
-    }
-
-    static getSchema() {
-        return types.string;
-    }
-
-    serialize() {
-        return this.definition.getHash();
-    }
-
-    deserialize(data) {
-        this.definition = ShapeDefinition.fromShortKey(data);
-    }
-
-    /** @returns {"shape"} **/
-    getItemType() {
-        return "shape";
-    }
-
-    /**
-     * @param {BaseItem} other
-     */
-    equalsImpl(other) {
-        return this.definition.getHash() === /** @type {ShapeItem} */ (other).definition.getHash();
-    }
-
-    /**
-     * @param {ShapeDefinition} definition
-     */
-    constructor(definition) {
-        super();
-
-        /**
-         * This property must not be modified on runtime, you have to clone the class in order to change the definition
-         */
-        this.definition = definition;
-    }
-
-    getBackgroundColorAsResource() {
-        return THEME.map.resources.shape;
-    }
-
-    /**
-     * @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);
-    }
-}
+import { DrawParameters } from "../../core/draw_parameters";
+import { types } from "../../savegame/serialization";
+import { BaseItem } from "../base_item";
+import { ShapeDefinition } from "../shape_definition";
+import { THEME } from "../theme";
+import { globalConfig } from "../../core/config";
+
+export class ShapeItem extends BaseItem {
+    static getId() {
+        return "shape";
+    }
+
+    static getSchema() {
+        return types.string;
+    }
+
+    serialize() {
+        return this.definition.getHash();
+    }
+
+    deserialize(data) {
+        this.definition = ShapeDefinition.fromShortKey(data);
+    }
+
+    /** @returns {"shape"} **/
+    getItemType() {
+        return "shape";
+    }
+
+    /**
+     * @param {BaseItem} other
+     */
+    equalsImpl(other) {
+        return this.definition.getHash() === /** @type {ShapeItem} */ (other).definition.getHash();
+    }
+
+    /**
+     * @param {ShapeDefinition} definition
+     */
+    constructor(definition) {
+        super();
+
+        /**
+         * This property must not be modified on runtime, you have to clone the class in order to change the definition
+         */
+        this.definition = definition;
+    }
+
+    getBackgroundColorAsResource() {
+        return THEME.map.resources.shape;
+    }
+
+    /**
+     * Draws the item to a canvas
+     * @param {CanvasRenderingContext2D} context
+     * @param {number} size
+     */
+    drawRaw(context, size) {
+        this.definition.drawRaw(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/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
+     */
+    drawRaw(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",
-            desc: "Enter a shape code, color or '0' or '1'",
-            formElements: [signalValueInput],
+            title: T.dialogs.editSignal.title,
+            desc: T.dialogs.editSignal.descItems,
+            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(() => {