Some Sprite Changes

src/js/core/sprites.js

@@ -123,11 +123,11 @@ export class AtlasSprite extends BaseSprite {
      * @param {DrawParameters} parameters
      * @param {number} x
      * @param {number} y
-     * @param {number} size
+     * @param {number} size_x
      * @param {boolean=} clipping
      */
-    drawCachedCentered(parameters, x, y, size, clipping = true) {
+    drawCachedCentered(parameters, x, y, size_x, clipping = true) {
-        this.drawCached(parameters, x - size / 2, y - size / 2, size, size, clipping);
+        this.drawCached(parameters, x - size_x / 2, y - size_x / 2, size_x, size_x, clipping);
     }
 
     /**

src/js/game/buildings/wireless_display.js

@@ -31,7 +31,7 @@ export class MetaWirelessDisplayBuilding extends MetaBuilding {
      * @param {GameRoot} root
      */
     getIsUnlocked(root) {
-        return true //root.hubGoals.isRewardUnlocked(enumHubGoalRewards.reward_display);
+        return root.hubGoals.isRewardUnlocked(enumHubGoalRewards.reward_display);
     }
 
     /**

src/js/game/hud/parts/mass_selector.js

@@ -14,6 +14,7 @@ import { KEYMAPPINGS } from "../../key_action_mapper";
 import { THEME } from "../../theme";
 import { enumHubGoalRewards } from "../../tutorial_goals";
 import { Blueprint } from "../../blueprint";
+import { drawRotatedSprite } from "../../../core/draw_utils";
 
 const logger = createLogger("hud/mass_selector");
 
@@ -304,16 +305,9 @@ export class HUDMassSelector extends BaseHUDPart {
                         renderedUids.add(uid);
 
                         const staticComp = contents.components.StaticMapEntity;
-                        const bounds = staticComp.getTileSpaceBounds();
+                        staticComp.drawSpriteOnBoundsClipped(parameters, staticComp.getBlueprintSprite(), 0);
-                        parameters.context.beginRoundedRect(
-                            bounds.x * globalConfig.tileSize + boundsBorder,
-                            bounds.y * globalConfig.tileSize + boundsBorder,
-                            bounds.w * globalConfig.tileSize - 2 * boundsBorder,
-                            bounds.h * globalConfig.tileSize - 2 * boundsBorder,
-                            2
-                        );
-                        parameters.context.fill();
                     }
+                    parameters.context.globalAlpha = 1;
                 }
             }
         }
@@ -322,15 +316,8 @@ export class HUDMassSelector extends BaseHUDPart {
         this.selectedUids.forEach(uid => {
             const entity = this.root.entityMgr.findByUid(uid);
             const staticComp = entity.components.StaticMapEntity;
-            const bounds = staticComp.getTileSpaceBounds();
+    
-            parameters.context.beginRoundedRect(
+            staticComp.drawSpriteOnBoundsClipped(parameters, staticComp.getBlueprintSprite(), 0);
-                bounds.x * globalConfig.tileSize + boundsBorder,
-                bounds.y * globalConfig.tileSize + boundsBorder,
-                bounds.w * globalConfig.tileSize - 2 * boundsBorder,
-                bounds.h * globalConfig.tileSize - 2 * boundsBorder,
-                2
-            );
-            parameters.context.fill();
         });
     }
 }

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

@@ -11,6 +11,7 @@ import { MetaComparatorBuilding } from "../../buildings/comparator";
 import { MetaReaderBuilding } from "../../buildings/reader";
 import { MetaFilterBuilding } from "../../buildings/filter";
 import { MetaDisplayBuilding } from "../../buildings/display";
+import { MetaWirelessDisplayBuilding } from "../../buildings/wireless_display";
 import { MetaStorageBuilding } from "../../buildings/storage";
 
 export class HUDWiresToolbar extends HUDBaseToolbar {
@@ -32,6 +33,7 @@ export class HUDWiresToolbar extends HUDBaseToolbar {
                 MetaLeverBuilding,
                 MetaFilterBuilding,
                 MetaDisplayBuilding,
+                MetaWirelessDisplayBuilding,
             ],
             visibilityCondition: () =>
                 !this.root.camera.getIsMapOverlayActive() && this.root.currentLayer === "wires",

src/js/game/systems/wireless_display.js

@@ -14,6 +14,7 @@ import { fillInLinkIntoTranslation } from "../../core/utils";
 import { T } from "../../translations";
 import { Entity } from "../entity";
 import { WirelessCodeComponent } from "../components/wireless_code";
+import { THEME} from "../theme";
 
 export class WirelessDisplaySystem extends GameSystemWithFilter {
     constructor(root) {
@@ -47,6 +48,7 @@ export class WirelessDisplaySystem extends GameSystemWithFilter {
             }
             this.entityCount = this.allEntities.length;
         }
+        const mousePos = this.root.app.mousePosition;
     }
 
     /**
@@ -159,6 +161,48 @@ export class WirelessDisplaySystem extends GameSystemWithFilter {
         }
     }
 
+    /**
+     * Computes the color below the current tile
+     * @returns {number}
+     */
+    computeColorBelowTile() {
+        const mousePosition = this.root.app.mousePosition;
+        if (!mousePosition) {
+            // Not on screen
+            return null;
+        }
+
+        const worldPos = this.root.camera.screenToWorld(mousePosition);
+        const tile = worldPos.toTileSpace();
+        const contents = this.root.map.getTileContent(tile, "regular");
+
+        if (contents && contents.components.WirelessDisplay) {
+            // We hovered a lower layer, show the color there
+            if (contents && contents.components.WirelessCode && contents.components.WirelessCode.wireless_code) {
+                return contents.components.WirelessCode.wireless_code;
+            }
+        }
+
+        return null;
+    }
+
+    /**
+     * Draws Text Storked
+     * @param {string} text
+     * @param {number} y
+     * @param {number} x
+     * @param {number=} width
+     */
+    drawStroked(ctx, text, x, y, width = undefined) {
+        ctx.font = '15px Sans-serif';
+        ctx.strokeStyle = 'black';
+        ctx.lineWidth = 1;
+        ctx.miterLimit=2
+        ctx.strokeText(text, x, y, width);
+        ctx.fillStyle = 'white';
+        ctx.fillText(text, x, y, width);
+    }
+
     /**
      * Draws a given chunk
      * @param {import("../../core/draw_utils").DrawParameters} parameters
@@ -168,42 +212,57 @@ export class WirelessDisplaySystem extends GameSystemWithFilter {
         const contents = chunk.containedEntitiesByLayer.regular;
         for (let i = 0; i < contents.length; ++i) {
             const entity_a = contents[i];
-            if (entity_a && !entity_a.components.WiredPins && entity_a.components.WirelessDisplay && entity_a.components.WirelessCode) {
+            if (entity_a && entity_a.components.WirelessDisplay) {
-                const entity_b = this.wirelessMachineList[entity_a.components.WirelessCode["wireless_code"]];
+                const below = this.computeColorBelowTile();
-                if (entity_b) {
+                if (below) {
-                    if (!this.allEntities.includes(entity_b)) {
+                    // We have something below our tile
-                        this.wirelessMachineList[entity_b] = undefined;
+                    const mousePosition = this.root.app.mousePosition;
-                        return;
+                    const worldPos = this.root.camera.screenToWorld(mousePosition);
-                    }
+                    const tile = worldPos.toTileSpace().toWorldSpace();
-                    const origin = entity_a.components.StaticMapEntity.origin;
+                    
-                    const pinsComp = entity_b.components.WiredPins;
+                    this.drawStroked(parameters.context, below.toString(), worldPos.x + 5, worldPos.y + 5)
-                    const network = pinsComp.slots[0].linkedNetwork;
+                    parameters.context.strokeStyle = THEME.map.colorBlindPickerTile;
-    
+                    parameters.context.beginPath();
-                    if (!network) {
+                    parameters.context.rect(tile.x, tile.y, globalConfig.tileSize, globalConfig.tileSize);
-                        continue;
+                    parameters.context.stroke();
-                    }
+                }
-    
+                if (!entity_a.components.WiredPins) {
-                    const value = this.getDisplayItem(network.currentValue);
+                    const entity_b = this.wirelessMachineList[entity_a.components.WirelessCode["wireless_code"]];
-    
+                    if (entity_b) {
-                    if (!value) {
+                        if (!this.allEntities.includes(entity_b)) {
-                        continue;
+                            this.wirelessMachineList[entity_b] = undefined;
-                    }
+                            return;
-    
+                        }
-                    if (value.getItemType()) {
+                        const origin = entity_a.components.StaticMapEntity.origin;
-                        if (value.getItemType() === "color") {
+                        const pinsComp = entity_b.components.WiredPins;
-                            this.displaySprites[/** @type {ColorItem} */ (value).color].drawCachedCentered(
+                        const network = pinsComp.slots[0].linkedNetwork;
-                                parameters,
+        
-                                (origin.x + 0.5) * globalConfig.tileSize,
+                        if (!network) {
-                                (origin.y + 0.5) * globalConfig.tileSize,
+                            continue;
-                                globalConfig.tileSize
+                        }
-                            );
+        
-                        } else if (value.getItemType() === "shape") {
+                        const value = this.getDisplayItem(network.currentValue);
-                            value.drawItemCenteredClipped(
+        
-                                (origin.x + 0.5) * globalConfig.tileSize,
+                        if (!value) {
-                                (origin.y + 0.5) * globalConfig.tileSize,
+                            continue;
-                                parameters,
+                        }
-                                30
+        
-                            );
+                        if (value.getItemType()) {
+                            if (value.getItemType() === "color") {
+                                this.displaySprites[/** @type {ColorItem} */ (value).color].drawCachedCentered(
+                                    parameters,
+                                    (origin.x + 0.5) * globalConfig.tileSize,
+                                    (origin.y + 0.5) * globalConfig.tileSize,
+                                    globalConfig.tileSize
+                                );
+                            } else if (value.getItemType() === "shape") {
+                                value.drawItemCenteredClipped(
+                                    (origin.x + 0.5) * globalConfig.tileSize,
+                                    (origin.y + 0.5) * globalConfig.tileSize,
+                                    parameters,
+                                    30
+                                );
+                            }
                         }
                     }
                 }

translations/base-en.yaml

@@ -706,10 +706,10 @@ buildings:
     wireless_display:
         default:
             name: &wireless_display Wireless Display
-            description: Connect a signal to show it on the display - It can be a shape, color or boolean.
+            description: Connect to a channel and if channel connects, it receives the signal coming from Remote Control - Signal can be a shape, color or boolean.
         remote_control:
-            name: OR Gate
+            name: Remote Control
-            description: Emits a boolean "1" if one of the inputs is truthy. (Truthy means shape, color or boolean "1")
+            description: Connect to a channel and if channel connects, it emits signal to Wireless Control - Signal can be a shape, color or boolean.
 
     reader:
         default: