Fix lots of bugs, add wire splitters / mergers

src/css/icons.scss

@@ -1,5 +1,5 @@
 $buildings: belt, cutter, miner, mixer, painter, rotater, splitter, stacker, trash, underground_belt,
-    energy_generator, wire, advanced_processor;
+    energy_generator, wire, advanced_processor, wire_crossings;
 
 @each $building in $buildings {
     [data-icon="building_icons/#{$building}.png"] {

src/js/core/config.js

@@ -45,7 +45,7 @@ export const globalConfig = {
 
     // Map
     mapChunkSize: 16,
-    mapChunkPrerenderMinZoom: 0.7,
+    mapChunkPrerenderMinZoom: -1,
     mapChunkOverviewMinZoom: 0.7,
 
     // Belt speeds
@@ -55,7 +55,7 @@ export const globalConfig = {
 
     beltItemSpacingByLayer: {
         regular: 0.63,
-        wires: 0.33,
+        wires: 0.4,
     },
 
     wiresSpeedItemsPerSecond: 6,

src/js/game/base_item.js

@@ -8,6 +8,9 @@ export const enumItemType = {
     color: "color",
     positiveEnergy: "positiveEnergy",
     negativeEnergy: "negativeEnergy",
+
+    // Can be used for filters
+    genericEnergy: "genericEnergy",
 };
 
 /** @enum {enumLayer} */
@@ -16,6 +19,7 @@ export const enumItemTypeToLayer = {
     [enumItemType.color]: enumLayer.regular,
     [enumItemType.positiveEnergy]: enumLayer.wires,
     [enumItemType.negativeEnergy]: enumLayer.wires,
+    [enumItemType.genericEnergy]: enumLayer.wires,
 };
 
 /**

src/js/game/buildings/splitter.js

@@ -72,16 +72,7 @@ export class MetaSplitterBuilding extends MetaBuilding {
     setupEntityComponents(entity) {
         entity.addComponent(
             new ItemAcceptorComponent({
-                slots: [
+                slots: [], // set later
-                    {
-                        pos: new Vector(0, 0),
-                        directions: [enumDirection.bottom],
-                    },
-                    {
-                        pos: new Vector(1, 0),
-                        directions: [enumDirection.bottom],
-                    },
-                ],
             })
         );
 
@@ -94,10 +85,7 @@ export class MetaSplitterBuilding extends MetaBuilding {
 
         entity.addComponent(
             new ItemEjectorComponent({
-                slots: [
+                slots: [], // set later
-                    { pos: new Vector(0, 0), direction: enumDirection.top },
-                    { pos: new Vector(1, 0), direction: enumDirection.top },
-                ],
             })
         );
     }

src/js/game/buildings/wire_crossings.js

@@ -0,0 +1,119 @@
+import { enumDirection, Vector } from "../../core/vector";
+import { enumItemType } from "../base_item";
+import { ItemAcceptorComponent } from "../components/item_acceptor";
+import { ItemEjectorComponent } from "../components/item_ejector";
+import { enumItemProcessorTypes, ItemProcessorComponent } from "../components/item_processor";
+import { Entity } from "../entity";
+import { defaultBuildingVariant, MetaBuilding } from "../meta_building";
+import { enumLayer, GameRoot } from "../root";
+
+/** @enum {string} */
+export const enumWireCrossingVariants = {
+    // Default = splitter
+    merger: "merger",
+};
+
+export class MetaWireCrossingsBuilding extends MetaBuilding {
+    constructor() {
+        super("wire_crossings");
+    }
+
+    getDimensions(variant) {
+        return new Vector(1, 1);
+    }
+
+    getSilhouetteColor() {
+        return "#c425d7";
+    }
+
+    getLayer() {
+        return enumLayer.wires;
+    }
+
+    /**
+     * @param {GameRoot} root
+     */
+    getAvailableVariants(root) {
+        return [defaultBuildingVariant, enumWireCrossingVariants.merger];
+    }
+
+    /**
+     * @param {GameRoot} root
+     */
+    getIsUnlocked(root) {
+        return true;
+    }
+
+    /**
+     * Creates the entity at the given location
+     * @param {Entity} entity
+     */
+    setupEntityComponents(entity) {
+        entity.addComponent(
+            new ItemAcceptorComponent({
+                slots: [], // set later
+            })
+        );
+
+        entity.addComponent(
+            new ItemProcessorComponent({
+                inputsPerCharge: 1,
+                processorType: enumItemProcessorTypes.splitterWires,
+            })
+        );
+
+        entity.addComponent(
+            new ItemEjectorComponent({
+                slots: [], // set later
+            })
+        );
+    }
+
+    /**
+     *
+     * @param {Entity} entity
+     * @param {number} rotationVariant
+     * @param {string} variant
+     */
+    updateVariants(entity, rotationVariant, variant) {
+        switch (variant) {
+            case defaultBuildingVariant: {
+                entity.components.ItemAcceptor.setSlots([
+                    {
+                        pos: new Vector(0, 0),
+                        directions: [enumDirection.bottom],
+                        layer: enumLayer.wires,
+                    },
+                ]);
+
+                entity.components.ItemEjector.setSlots([
+                    { pos: new Vector(0, 0), direction: enumDirection.left, layer: enumLayer.wires },
+                    { pos: new Vector(0, 0), direction: enumDirection.right, layer: enumLayer.wires },
+                ]);
+
+                break;
+            }
+            case enumWireCrossingVariants.merger: {
+                entity.components.ItemAcceptor.setSlots([
+                    {
+                        pos: new Vector(0, 0),
+                        directions: [enumDirection.left],
+                        layer: enumLayer.wires,
+                    },
+                    {
+                        pos: new Vector(0, 0),
+                        directions: [enumDirection.right],
+                        layer: enumLayer.wires,
+                    },
+                ]);
+
+                entity.components.ItemEjector.setSlots([
+                    { pos: new Vector(0, 0), direction: enumDirection.top, layer: enumLayer.wires },
+                ]);
+                break;
+            }
+            default:
+                assertAlways(false, "Unknown painter variant: " + variant);
+        }
+    }
+}

src/js/game/colors.js

@@ -54,7 +54,7 @@ export const enumColorsToHexCode = {
     // blue + green + red
     [enumColors.white]: "#ffffff",
 
-    [enumColors.black]: "#212428",
+    [enumColors.black]: "#31383a",
 
     [enumColors.uncolored]: "#aaaaaa",
 };

src/js/game/components/item_acceptor.js

@@ -136,7 +136,25 @@ export class ItemAcceptorComponent extends Component {
      */
     canAcceptItem(slotIndex, item) {
         const slot = this.slots[slotIndex];
-        return !slot.filter || slot.filter === item.getItemType();
+        return this.filterMatches(slot.filter, item);
+    }
+
+    /**
+     * Returns if the given filter matches
+     * @param {enumItemType|null} filter
+     * @param {BaseItem} item
+     */
+    filterMatches(filter, item) {
+        if (!filter) {
+            return true;
+        }
+
+        const itemType = item.getItemType();
+        if (filter === enumItemType.genericEnergy) {
+            return itemType === enumItemType.positiveEnergy || itemType === enumItemType.negativeEnergy;
+        }
+
+        return itemType === filter;
     }
 
     /**

src/js/game/components/item_processor.js

@@ -6,6 +6,7 @@ import { Component } from "../component";
 /** @enum {string} */
 export const enumItemProcessorTypes = {
     splitter: "splitter",
+    splitterWires: "splitterWires",
     cutter: "cutter",
     cutterQuad: "cutterQuad",
     rotater: "rotater",

src/js/game/core.js

@@ -393,39 +393,54 @@ export class GameCore {
         // Main rendering order
         // -----
 
+        // BG / Map Resources / Belt Backgrounds
         root.map.drawBackground(params);
 
         if (!this.root.camera.getIsMapOverlayActive()) {
+            // Underlays for splitters / balancers
             systems.itemAcceptor.drawUnderlays(params, enumLayer.regular);
-            systems.belt.drawLayer(params, enumLayer.regular);
+
+            // Belt items
+            systems.belt.drawLayerBeltItems(params, enumLayer.regular);
+
+            // Items being ejected / accepted currently (animations)
             systems.itemEjector.drawLayer(params, enumLayer.regular);
             systems.itemAcceptor.drawLayer(params, enumLayer.regular);
         }
 
+        // Miner & Static map entities
         root.map.drawForeground(params);
 
         if (!this.root.camera.getIsMapOverlayActive()) {
+            // HUB Overlay
             systems.hub.draw(params);
+
+            // Energy generator overlay
             systems.energyGenerator.draw(params);
+
+            // Storage items
             systems.storage.draw(params);
+
+            // Energy consumer (Battery icons)
             systems.energyConsumer.draw(params);
         }
 
+        // Green wires overlay (not within the if because it can fade)
         root.hud.parts.wiresOverlay.draw(params);
 
-        if (this.root.currentLayer === enumLayer.wires) {
+        if (this.root.currentLayer === enumLayer.wires && !this.root.camera.getIsMapOverlayActive()) {
-            if (!this.root.camera.getIsMapOverlayActive()) {
+            // Belt sprites & Static map entities
-                systems.itemAcceptor.drawUnderlays(params, enumLayer.wires);
-            }
-
             root.map.drawWiresLayer(params);
 
-            if (!this.root.camera.getIsMapOverlayActive()) {
+            // Belt items as well as accepted / ejected items
-                systems.itemEjector.drawLayer(params, enumLayer.wires);
+            systems.belt.drawLayerBeltItems(params, enumLayer.wires);
-                systems.itemAcceptor.drawLayer(params, enumLayer.wires);
+            systems.itemEjector.drawLayer(params, enumLayer.wires);
-                systems.belt.drawLayer(params, enumLayer.wires);
+            systems.itemAcceptor.drawLayer(params, enumLayer.wires);
-                systems.wiredPins.draw(params);
+
-            }
+            root.map.drawWiresForegroundLayer(params);
+
+            // pins
+            systems.wiredPins.draw(params);
         }
 
         if (G_IS_DEV) {

src/js/game/hub_goals.js

@@ -403,6 +403,9 @@ export class HubGoals extends BasicSerializableObject {
      */
     getProcessorBaseSpeed(processorType) {
         switch (processorType) {
+            case enumItemProcessorTypes.splitterWires:
+                return globalConfig.wiresSpeedItemsPerSecond * 2;
+
             case enumItemProcessorTypes.trash:
             case enumItemProcessorTypes.hub:
                 return 1e30;

src/js/game/hud/parts/building_placer.js

@@ -328,8 +328,8 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
 
         const mouseWorld = this.root.camera.screenToWorld(mousePosition);
         const mouseTile = mouseWorld.toTileSpace();
-        parameters.context.fillStyle = THEME.map.directionLock;
+        parameters.context.fillStyle = THEME.map.directionLock[this.root.currentLayer].color;
-        parameters.context.strokeStyle = THEME.map.directionLockTrack;
+        parameters.context.strokeStyle = THEME.map.directionLock[this.root.currentLayer].background;
         parameters.context.lineWidth = 10;
 
         parameters.context.beginCircle(mouseWorld.x, mouseWorld.y, 4);

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

@@ -1,8 +1,9 @@
 import { MetaWireBaseBuilding } from "../../buildings/wire_base";
 import { enumLayer } from "../../root";
 import { HUDBaseToolbar } from "./base_toolbar";
+import { MetaWireCrossingsBuilding } from "../../buildings/wire_crossings";
 
-const supportedBuildings = [MetaWireBaseBuilding];
+const supportedBuildings = [MetaWireBaseBuilding, MetaWireCrossingsBuilding];
 
 export class HUDWiresToolbar extends HUDBaseToolbar {
     constructor(root) {

src/js/game/key_action_mapper.js

@@ -56,6 +56,7 @@ export const KEYMAPPINGS = {
         trash: { keyCode: key("0") },
         energy_generator: { keyCode: key("O") },
         advanced_processor: { keyCode: key("P") },
+        wire_crossings: { keyCode: key("H") },
 
         // Wires layer
         wire: { keyCode: key("1") },

src/js/game/map.js

@@ -139,7 +139,10 @@ export class BaseMap extends BasicSerializableObject {
      */
     getLayersContentsMultipleXY(x, y) {
         const chunk = this.getChunkAtTileOrNull(x, y);
-        return chunk && chunk.getLayersContentsMultipleFromWorldCoords(x, y);
+        if (!chunk) {
+            return [];
+        }
+        return chunk.getLayersContentsMultipleFromWorldCoords(x, y);
     }
 
     /**

src/js/game/map_chunk_view.js

@@ -21,10 +21,6 @@ export class MapChunkView extends MapChunk {
     constructor(root, x, y) {
         super(root, x, y);
 
-        this.boundInternalDrawBackgroundToContext = this.internalDrawBackgroundToContext.bind(this);
-        this.boundInternalDrawForegroundToContext = this.internalDrawForegroundToContext.bind(this);
-        this.boundInternalDrawWiresToContext = this.internalDrawWiresToContext.bind(this);
-
         /**
          * Whenever something changes, we increase this number - so we know we need to redraw
          */
@@ -46,29 +42,9 @@ export class MapChunkView extends MapChunk {
      * @param {DrawParameters} parameters
      */
     drawBackgroundLayer(parameters) {
-        if (parameters.zoomLevel > globalConfig.mapChunkPrerenderMinZoom) {
+        const systems = this.root.systemMgr.systems;
-            this.internalDrawBackgroundSystems(parameters);
+        systems.mapResources.drawChunk(parameters, this);
-            return;
+        systems.belt.drawChunk(parameters, this);
-        }
-
-        const dpi = smoothenDpi(parameters.zoomLevel);
-        const buffer = this.root.buffers.getForKey(
-            "" + dpi,
-            this.renderKey + "@bg",
-            chunkSizePixels,
-            chunkSizePixels,
-            dpi,
-            this.boundInternalDrawBackgroundToContext,
-            { zoomLevel: parameters.zoomLevel }
-        );
-
-        parameters.context.drawImage(
-            buffer,
-            this.tileX * globalConfig.tileSize,
-            this.tileY * globalConfig.tileSize,
-            chunkSizePixels,
-            chunkSizePixels
-        );
     }
 
     /**
@@ -76,28 +52,9 @@ export class MapChunkView extends MapChunk {
      * @param {DrawParameters} parameters
      */
     drawForegroundLayer(parameters) {
-        if (parameters.zoomLevel > globalConfig.mapChunkPrerenderMinZoom) {
+        const systems = this.root.systemMgr.systems;
-            this.internalDrawForegroundSystems(parameters);
+        systems.miner.drawChunk(parameters, this);
-            return;
+        systems.staticMapEntities.drawChunk(parameters, this);
-        }
-
-        const dpi = smoothenDpi(parameters.zoomLevel);
-        const buffer = this.root.buffers.getForKey(
-            "" + dpi,
-            this.renderKey + "@fg",
-            chunkSizePixels,
-            chunkSizePixels,
-            dpi,
-            this.boundInternalDrawForegroundToContext,
-            { zoomLevel: parameters.zoomLevel }
-        );
-        parameters.context.drawImage(
-            buffer,
-            this.tileX * globalConfig.tileSize,
-            this.tileY * globalConfig.tileSize,
-            chunkSizePixels,
-            chunkSizePixels
-        );
     }
 
     /**
@@ -105,166 +62,16 @@ export class MapChunkView extends MapChunk {
      * @param {DrawParameters} parameters
      */
     drawWiresLayer(parameters) {
-        if (parameters.zoomLevel > globalConfig.mapChunkPrerenderMinZoom) {
-            this.internalDrawWireSystems(parameters);
-            return;
-        }
-
-        const dpi = smoothenDpi(parameters.zoomLevel);
-        const buffer = this.root.buffers.getForKey(
-            "" + dpi,
-            this.renderKey + "@wire",
-            chunkSizePixels,
-            chunkSizePixels,
-            dpi,
-            this.boundInternalDrawWiresToContext,
-            { zoomLevel: parameters.zoomLevel }
-        );
-        parameters.context.drawImage(
-            buffer,
-            this.tileX * globalConfig.tileSize,
-            this.tileY * globalConfig.tileSize,
-            chunkSizePixels,
-            chunkSizePixels
-        );
-    }
-
-    /**
-     *
-     * @param {HTMLCanvasElement} canvas
-     * @param {CanvasRenderingContext2D} context
-     * @param {number} w
-     * @param {number} h
-     * @param {number} dpi
-     */
-    internalDrawBackgroundToContext(canvas, context, w, h, dpi, { zoomLevel }) {
-        const pattern = context.createPattern(this.root.map.cachedBackgroundCanvas, "repeat");
-        context.scale(dpi, dpi);
-
-        if (zoomLevel >= globalConfig.mapChunkOverviewMinZoom) {
-            const bgDpi = this.root.map.backgroundCacheDPI;
-            context.scale(1 / bgDpi, 1 / bgDpi);
-            context.fillStyle = pattern;
-            context.fillRect(0, 0, chunkSizePixels * bgDpi, chunkSizePixels * bgDpi);
-            context.scale(bgDpi, bgDpi);
-        } else {
-            if (this.containedEntities.length > 0) {
-                context.fillStyle = THEME.map.chunkOverview.filled;
-            } else {
-                context.fillStyle = THEME.map.chunkOverview.empty;
-            }
-            context.fillRect(0, 0, 10000, 10000);
-        }
-
-        if (G_IS_DEV && globalConfig.debug.showChunkBorders) {
-            context.fillStyle = "rgba(0, 0, 255, 0.1)";
-            context.fillRect(0, 0, 10000, 10000);
-        }
-
-        const parameters = new DrawParameters({
-            context,
-            visibleRect: new Rectangle(
-                this.tileX * globalConfig.tileSize,
-                this.tileY * globalConfig.tileSize,
-                chunkSizePixels,
-                chunkSizePixels
-            ),
-            desiredAtlasScale: "1",
-            zoomLevel,
-            root: this.root,
-        });
-
-        parameters.context.translate(
-            -this.tileX * globalConfig.tileSize,
-            -this.tileY * globalConfig.tileSize
-        );
-        this.internalDrawBackgroundSystems(parameters);
-    }
-
-    /**
-     *
-     * @param {HTMLCanvasElement} canvas
-     * @param {CanvasRenderingContext2D} context
-     * @param {number} w
-     * @param {number} h
-     * @param {number} dpi
-     */
-    internalDrawForegroundToContext(canvas, context, w, h, dpi, { zoomLevel }) {
-        context.scale(dpi, dpi);
-
-        const parameters = new DrawParameters({
-            context,
-            visibleRect: new Rectangle(
-                this.tileX * globalConfig.tileSize,
-                this.tileY * globalConfig.tileSize,
-                chunkSizePixels,
-                chunkSizePixels
-            ),
-            desiredAtlasScale: "1",
-            zoomLevel,
-            root: this.root,
-        });
-        parameters.context.translate(
-            -this.tileX * globalConfig.tileSize,
-            -this.tileY * globalConfig.tileSize
-        );
-        this.internalDrawForegroundSystems(parameters);
-    }
-
-    /**
-     *
-     * @param {HTMLCanvasElement} canvas
-     * @param {CanvasRenderingContext2D} context
-     * @param {number} w
-     * @param {number} h
-     * @param {number} dpi
-     */
-    internalDrawWiresToContext(canvas, context, w, h, dpi, { zoomLevel }) {
-        context.scale(dpi, dpi);
-        const parameters = new DrawParameters({
-            context,
-            visibleRect: new Rectangle(
-                this.tileX * globalConfig.tileSize,
-                this.tileY * globalConfig.tileSize,
-                chunkSizePixels,
-                chunkSizePixels
-            ),
-            desiredAtlasScale: "1",
-            zoomLevel,
-            root: this.root,
-        });
-        parameters.context.translate(
-            -this.tileX * globalConfig.tileSize,
-            -this.tileY * globalConfig.tileSize
-        );
-        this.internalDrawWireSystems(parameters);
-    }
-
-    /**
-     * @param {DrawParameters} parameters
-     */
-    internalDrawBackgroundSystems(parameters) {
         const systems = this.root.systemMgr.systems;
-        systems.mapResources.drawChunk(parameters, this);
-        systems.belt.drawChunk(parameters, this);
-    }
-
-    /**
-     * @param {DrawParameters} parameters
-     */
-    internalDrawWireSystems(parameters) {
-        const systems = this.root.systemMgr.systems;
-
         systems.belt.drawWiresChunk(parameters, this);
+    }
+
+    /**
+     * Draws the wires layer
+     * @param {DrawParameters} parameters
+     */
+    drawWiresForegroundLayer(parameters) {
+        const systems = this.root.systemMgr.systems;
         systems.staticMapEntities.drawWiresChunk(parameters, this);
     }
-
-    /**
-     * @param {DrawParameters} parameters
-     */
-    internalDrawForegroundSystems(parameters) {
-        const systems = this.root.systemMgr.systems;
-        systems.miner.drawChunk(parameters, this);
-        systems.staticMapEntities.drawChunk(parameters, this);
-    }
 }

src/js/game/map_view.js

@@ -4,6 +4,7 @@ import { BaseMap } from "./map";
 import { freeCanvas, makeOffscreenBuffer } from "../core/buffer_utils";
 import { Entity } from "./entity";
 import { THEME } from "./theme";
+import { MapChunkView } from "./map_chunk_view";
 
 /**
  * This is the view of the map, it extends the map which is the raw model and allows
@@ -130,6 +131,15 @@ export class MapView extends BaseMap {
      * @param {DrawParameters} parameters
      */
     drawForeground(parameters) {
+        this.drawVisibleChunks(parameters, MapChunkView.prototype.drawForegroundLayer);
+    }
+
+    /**
+     * Calls a given method on all given chunks
+     * @param {DrawParameters} parameters
+     * @param {function} method
+     */
+    drawVisibleChunks(parameters, method) {
         const cullRange = parameters.visibleRect.toTileCullRectangle();
         const top = cullRange.top();
         const right = cullRange.right();
@@ -152,41 +162,25 @@ export class MapView extends BaseMap {
         for (let chunkX = chunkStartX; chunkX <= chunkEndX; ++chunkX) {
             for (let chunkY = chunkStartY; chunkY <= chunkEndY; ++chunkY) {
                 const chunk = this.root.map.getChunk(chunkX, chunkY, true);
-                chunk.drawForegroundLayer(parameters);
+                method.call(chunk, parameters);
             }
         }
     }
 
     /**
-     * Draws the maps foreground
+     * Draws the wires background
      * @param {DrawParameters} parameters
      */
     drawWiresLayer(parameters) {
-        const cullRange = parameters.visibleRect.toTileCullRectangle();
+        this.drawVisibleChunks(parameters, MapChunkView.prototype.drawWiresLayer);
-        const top = cullRange.top();
+    }
-        const right = cullRange.right();
-        const bottom = cullRange.bottom();
-        const left = cullRange.left();
 
-        const border = 1;
+    /**
-        const minY = top - border;
+     * Draws the wires foreground
-        const maxY = bottom + border;
+     * @param {DrawParameters} parameters
-        const minX = left - border;
+     */
-        const maxX = right + border - 1;
+    drawWiresForegroundLayer(parameters) {
-
+        this.drawVisibleChunks(parameters, MapChunkView.prototype.drawWiresForegroundLayer);
-        const chunkStartX = Math.floor(minX / globalConfig.mapChunkSize);
-        const chunkStartY = Math.floor(minY / globalConfig.mapChunkSize);
-
-        const chunkEndX = Math.ceil(maxX / globalConfig.mapChunkSize);
-        const chunkEndY = Math.ceil(maxY / globalConfig.mapChunkSize);
-
-        // Render y from top down for proper blending
-        for (let chunkX = chunkStartX; chunkX <= chunkEndX; ++chunkX) {
-            for (let chunkY = chunkStartY; chunkY <= chunkEndY; ++chunkY) {
-                const chunk = this.root.map.getChunk(chunkX, chunkY, true);
-                chunk.drawWiresLayer(parameters);
-            }
-        }
     }
 
     /**
@@ -216,31 +210,7 @@ export class MapView extends BaseMap {
             parameters.context.scale(dpi, dpi);
         }
 
-        const cullRange = parameters.visibleRect.toTileCullRectangle();
+        this.drawVisibleChunks(parameters, MapChunkView.prototype.drawBackgroundLayer);
-        const top = cullRange.top();
-        const right = cullRange.right();
-        const bottom = cullRange.bottom();
-        const left = cullRange.left();
-
-        const border = 1;
-        const minY = top - border;
-        const maxY = bottom + border;
-        const minX = left - border;
-        const maxX = right + border - 1;
-
-        const chunkStartX = Math.floor(minX / globalConfig.mapChunkSize);
-        const chunkStartY = Math.floor(minY / globalConfig.mapChunkSize);
-
-        const chunkEndX = Math.ceil(maxX / globalConfig.mapChunkSize);
-        const chunkEndY = Math.ceil(maxY / globalConfig.mapChunkSize);
-
-        // Render y from top down for proper blending
-        for (let chunkX = chunkStartX; chunkX <= chunkEndX; ++chunkX) {
-            for (let chunkY = chunkStartY; chunkY <= chunkEndY; ++chunkY) {
-                const chunk = this.root.map.getChunk(chunkX, chunkY, true);
-                chunk.drawBackgroundLayer(parameters);
-            }
-        }
 
         if (G_IS_DEV && globalConfig.debug.showChunkBorders) {
             const cullRange = parameters.visibleRect.toTileCullRectangle();

src/js/game/meta_building_registry.js

@@ -14,6 +14,7 @@ import { MetaEnergyGenerator } from "./buildings/energy_generator";
 import { MetaWireBaseBuilding } from "./buildings/wire_base";
 import { MetaAdvancedProcessorBuilding } from "./buildings/advanced_processor";
 import { MetaBeltBuilding } from "./buildings/belt";
+import { MetaWireCrossingsBuilding } from "./buildings/wire_crossings";
 
 export function initMetaBuildingRegistry() {
     gMetaBuildingRegistry.register(MetaSplitterBuilding);
@@ -30,4 +31,5 @@ export function initMetaBuildingRegistry() {
     gMetaBuildingRegistry.register(MetaEnergyGenerator);
     gMetaBuildingRegistry.register(MetaWireBaseBuilding);
     gMetaBuildingRegistry.register(MetaAdvancedProcessorBuilding);
+    gMetaBuildingRegistry.register(MetaWireCrossingsBuilding);
 }

src/js/game/systems/belt.js

@@ -312,7 +312,7 @@ export class BeltSystem extends GameSystemWithFilter {
      * @param {DrawParameters} parameters
      * @param {enumLayer} layer
      */
-    drawLayer(parameters, layer) {
+    drawLayerBeltItems(parameters, layer) {
         for (let i = 0; i < this.beltPaths.length; ++i) {
             const path = this.beltPaths[i];
             if (path.layer === layer) {

src/js/game/systems/item_processor.js

@@ -50,14 +50,11 @@ export class ItemProcessorSystem extends GameSystemWithFilter {
                         if (ejectorComp.canEjectOnSlot(preferredSlot)) {
                             slot = preferredSlot;
                         } else {
-                            /* FIXME: WIRES */
+                            slot = ejectorComp.getFirstFreeSlot(entity.layer);
-                            slot = ejectorComp.getFirstFreeSlot(enumLayer.regular);
                         }
                     } else {
-                        /* FIXME: WIRES */
-
                         // We can eject on any slot
-                        slot = ejectorComp.getFirstFreeSlot(enumLayer.regular);
+                        slot = ejectorComp.getFirstFreeSlot(entity.layer);
                     }
 
                     if (slot !== null) {
@@ -120,6 +117,7 @@ export class ItemProcessorSystem extends GameSystemWithFilter {
 
         switch (processorComp.type) {
             // SPLITTER
+            case enumItemProcessorTypes.splitterWires:
             case enumItemProcessorTypes.splitter: {
                 trackProduction = false;
                 const availableSlots = entity.components.ItemEjector.slots.length;

src/js/game/themes/dark.json

@@ -9,8 +9,16 @@
         "selectionOutline": "rgba(74, 163, 223, 0.5)",
         "selectionBackground": "rgba(74, 163, 223, 0.2)",
 
-        "directionLock": "rgb(74, 237, 134)",
+        "directionLock": {
-        "directionLockTrack": "rgba(74, 237, 134, 0.2)",
+            "regular": {
+                "color": "rgb(74, 237, 134)",
+                "background": "rgba(74, 237, 134, 0.2)"
+            },
+            "wires": {
+                "color": "rgb(144, 24, 255)",
+                "background": "rgba(144, 24, 255, 0.2)"
+            }
+        },
 
         "colorBlindPickerTile": "rgba(255, 255, 255, 0.5)",
 

src/js/game/themes/light.json

@@ -9,8 +9,16 @@
         "selectionOutline": "rgba(74, 163, 223, 0.5)",
         "selectionBackground": "rgba(74, 163, 223, 0.2)",
 
-        "directionLock": "rgb(74, 237, 134)",
+        "directionLock": {
-        "directionLockTrack": "rgba(74, 237, 134, 0.2)",
+            "regular": {
+                "color": "rgb(74, 237, 134)",
+                "background": "rgba(74, 237, 134, 0.2)"
+            },
+            "wires": {
+                "color": "rgb(144, 24, 255)",
+                "background": "rgba(144, 24, 255, 0.2)"
+            }
+        },
 
         "colorBlindPickerTile": "rgba(50, 50, 50, 0.4)",
 

translations/base-en.yaml

@@ -567,6 +567,15 @@ buildings:
             name: &energy_generator Energy Generator
             description: Generates energy by consuming shapes. Each energy generator requires a different shape.
 
+    wire_crossings:
+        default:
+            name: &wire_crossings Wire Splitter
+            description: Splits a wire into two
+
+        merger:
+            name: Wire Merger
+            description: Merges two wires into one
+
 storyRewards:
     # Those are the rewards gained from completing the store
     reward_cutter_and_trash: