Implement color inverter building

src/css/ingame_hud/sandbox_controller.scss

@@ -38,8 +38,11 @@
     }
 
     .additionalOptions {
+        display: flex;
+        flex-direction: column;
         @include S(margin-top, 10px);
         button {
+            @include S(margin-bottom, 2px);
             @include IncreasedClickArea(0px);
             @include SuperSmallText;
         }

src/js/game/colors.js

@@ -10,6 +10,8 @@ export const enumColors = {
 
     white: "white",
     uncolored: "uncolored",
+
+    black: "black",
 };
 
 /** @enum {string} */
@@ -24,6 +26,8 @@ export const enumColorToShortcode = {
 
     [enumColors.white]: "w",
     [enumColors.uncolored]: "u",
+
+    [enumColors.black]: "0",
 };
 
 /** @enum {enumColors} */
@@ -50,9 +54,27 @@ export const enumColorsToHexCode = {
     // blue + green + red
     [enumColors.white]: "#ffffff",
 
+    [enumColors.black]: "#212428",
+
     [enumColors.uncolored]: "#aaaaaa",
 };
 
+/** @enum {enumColors} */
+export const enumInvertedColors = {
+    [enumColors.red]: enumColors.cyan,
+    [enumColors.green]: enumColors.purple,
+    [enumColors.blue]: enumColors.yellow,
+
+    [enumColors.yellow]: enumColors.blue,
+    [enumColors.purple]: enumColors.green,
+    [enumColors.cyan]: enumColors.red,
+
+    [enumColors.white]: enumColors.black,
+    [enumColors.black]: enumColors.white,
+
+    [enumColors.uncolored]: enumColors.uncolored,
+};
+
 const c = enumColors;
 /** @enum {Object.<string, string>} */
 export const enumColorMixingResults = {
@@ -66,6 +88,7 @@ export const enumColorMixingResults = {
         [c.cyan]: c.white,
 
         [c.white]: c.white,
+        [c.black]: c.red,
     },
 
     // 0, 255, 0
@@ -77,6 +100,7 @@ export const enumColorMixingResults = {
         [c.cyan]: c.cyan,
 
         [c.white]: c.white,
+        [c.black]: c.green,
     },
 
     // 0, 255, 0
@@ -86,17 +110,20 @@ export const enumColorMixingResults = {
         [c.cyan]: c.cyan,
 
         [c.white]: c.white,
+        [c.black]: c.blue,
     },
 
     // 255, 255, 0
     [c.yellow]: {
         [c.purple]: c.white,
         [c.cyan]: c.white,
+        [c.black]: c.yellow,
     },
 
     // 255, 0, 255
     [c.purple]: {
         [c.cyan]: c.white,
+        [c.black]: c.purple,
     },
 
     // 0, 255, 255
@@ -113,6 +140,13 @@ export const enumColorMixingResults = {
     [c.uncolored]: {
         // auto
     },
+
+    [c.black]: {
+        // auto
+        [c.white]: c.white,
+        [c.cyan]: c.cyan,
+        [c.uncolored]: c.uncolored,
+    },
 };
 
 // Create same color lookups

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

@@ -48,6 +48,7 @@ export class HUDSandboxController extends BaseHUDPart {
 
                 <div class="additionalOptions">
                     <button class="styledButton giveBlueprints">Fill blueprint shapes</button>
+                    <button class="styledButton maxOutAll">Max out all</button>
                 </div>
             </div>
         `
@@ -56,6 +57,7 @@ export class HUDSandboxController extends BaseHUDPart {
         const bind = (selector, handler) => this.trackClicks(this.element.querySelector(selector), handler);
 
         bind(".giveBlueprints", this.giveBlueprints);
+        bind(".maxOutAll", this.maxOutAll);
         bind(".levelToggle .minus", () => this.modifyLevel(-1));
         bind(".levelToggle .plus", () => this.modifyLevel(1));
 
@@ -76,6 +78,13 @@ export class HUDSandboxController extends BaseHUDPart {
         this.root.hubGoals.storedShapes[blueprintShape] += 1e4;
     }
 
+    maxOutAll() {
+        this.modifyUpgrade("belt", 100);
+        this.modifyUpgrade("miner", 100);
+        this.modifyUpgrade("processors", 100);
+        this.modifyUpgrade("painting", 100);
+    }
+
     modifyUpgrade(id, amount) {
         const handle = UPGRADES[id];
         const maxLevel = handle.tiers.length;

src/js/game/shape_definition.js

@@ -5,7 +5,13 @@ import { DrawParameters } from "../core/draw_parameters";
 import { createLogger } from "../core/logging";
 import { Vector } from "../core/vector";
 import { BasicSerializableObject, types } from "../savegame/serialization";
-import { enumColors, enumColorsToHexCode, enumColorToShortcode, enumShortcodeToColor } from "./colors";
+import {
+    enumColors,
+    enumColorsToHexCode,
+    enumColorToShortcode,
+    enumShortcodeToColor,
+    enumInvertedColors,
+} from "./colors";
 import { THEME } from "./theme";
 
 const rusha = require("rusha");
@@ -566,6 +572,23 @@ export class ShapeDefinition extends BasicSerializableObject {
         return new ShapeDefinition({ layers: newLayers });
     }
 
+    /**
+     * Clones the shape and inverts all colors
+     */
+    cloneAndInvertColors() {
+        const newLayers = this.internalCloneLayers();
+        for (let layerIndex = 0; layerIndex < newLayers.length; ++layerIndex) {
+            const quadrants = newLayers[layerIndex];
+            for (let quadrantIndex = 0; quadrantIndex < 4; ++quadrantIndex) {
+                const item = quadrants[quadrantIndex];
+                if (item) {
+                    item.color = enumInvertedColors[item.color];
+                }
+            }
+        }
+        return new ShapeDefinition({ layers: newLayers });
+    }
+
     /**
      * Clones the shape and colors everything in the given colors
      * @param {[enumColors, enumColors, enumColors, enumColors]} colors

src/js/game/shape_definition_manager.js

@@ -161,6 +161,22 @@ export class ShapeDefinitionManager extends BasicSerializableObject {
         ));
     }
 
+    /**
+     * Generates a definition for inverting all colors on that shape
+     * @param {ShapeDefinition} definition
+     * @returns {ShapeDefinition}
+     */
+    shapeActionInvertColors(definition) {
+        const key = "invert:" + definition.getHash();
+        if (this.operationCache[key]) {
+            return /** @type {ShapeDefinition} */ (this.operationCache[key]);
+        }
+        const inverted = definition.cloneAndInvertColors();
+        return /** @type {ShapeDefinition} */ (this.operationCache[key] = this.registerOrReturnHandle(
+            inverted
+        ));
+    }
+
     /**
      * Generates a definition for painting it with the 4 colors
      * @param {ShapeDefinition} definition

src/js/game/systems/item_processor.js

@@ -348,8 +348,11 @@ export class ItemProcessorSystem extends GameSystemWithFilter {
             // ADVANCED PROCESSING
 
             case enumItemProcessorTypes.advancedProcessor: {
+                const shapeItem = /** @type {ShapeItem} */ (items[0].item);
+                const newItem = this.root.shapeDefinitionMgr.shapeActionInvertColors(shapeItem.definition);
+
                 outItems.push({
-                    item: items[0].item,
+                    item: new ShapeItem(newItem),
                     requiredSlot: 0,
                 });
                 break;

translations/base-en.yaml

@@ -301,6 +301,7 @@ ingame:
         purple: Purple
         cyan: Cyan
         white: White
+        black: Black
         uncolored: No color
 
     # Everything related to placing buildings (I.e. as soon as you selected a building