Update toolbar

src/css/ingame_hud/buildings_toolbar.scss

@@ -4,25 +4,14 @@
     left: 50%;
     transform: translateX(-50%);
 
-    // NOTE: This flex rule may not be necessary. Need to find out intent.
+    display: grid;
-    display: flex;
+    grid-template-rows: auto auto;
-    flex-direction: column;
+    justify-items: center;
+
     background: transparent;
     transition: transform 120ms ease-in-out;
     will-change: transform;
 
-    backdrop-filter: blur(D(3px));
-    background-color: rgba(0, 40, 80, 0.05);
-    @include S(border-radius, $globalBorderRadius);
-
-    @include DarkThemeOverride {
-        background-color: rgba(darken($darkModeGameBackground, 15), 0.4);
-
-        &#ingame_HUD_wires_toolbar {
-            background-color: rgba(darken($darkModeGameBackground, 5), 0.1);
-        }
-    }
-
     &:not(.visible) {
         transform: translateX(-50%) translateY(#{D(100px)});
     }
@@ -30,6 +19,34 @@
     .buildings {
         display: grid;
         grid-auto-flow: column;
+        justify-items: center;
+        align-self: center;
+        grid-row: 2 / 3;
+
+        background-color: rgba(240, 241, 243, 0.5);
+        @include S(border-radius, $globalBorderRadius);
+
+        @include DarkThemeOverride {
+            background-color: rgba(darken($darkModeGameBackground, 15), 0.4);
+        }
+
+        &.secondary {
+            grid-row: 1 / 2;
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+
+            .building {
+                @include S(width, 30px);
+                @include S(height, 22px);
+                background-size: 45%;
+
+                &:not(.unlocked) {
+                    &::before {
+                        background-size: #{D(13px)};
+                    }
+                }
+            }
+        }
 
         .building {
             color: $accentColorDark;

src/js/game/buildings/display.js

@@ -4,6 +4,7 @@ import { Entity } from "../entity";
 import { MetaBuilding } from "../meta_building";
 import { GameRoot } from "../root";
 import { DisplayComponent } from "../components/display";
+import { enumHubGoalRewards } from "../tutorial_goals";
 
 export class MetaDisplayBuilding extends MetaBuilding {
     constructor() {
@@ -18,8 +19,7 @@ export class MetaDisplayBuilding extends MetaBuilding {
      * @param {GameRoot} root
      */
     getIsUnlocked(root) {
-        // @todo
+        return root.hubGoals.isRewardUnlocked(enumHubGoalRewards.reward_display);
-        return true;
     }
 
     getDimensions() {

src/js/game/buildings/filter.js

@@ -6,6 +6,7 @@ import { enumPinSlotType, WiredPinsComponent } from "../components/wired_pins";
 import { Entity } from "../entity";
 import { MetaBuilding } from "../meta_building";
 import { GameRoot } from "../root";
+import { enumHubGoalRewards } from "../tutorial_goals";
 
 export class MetaFilterBuilding extends MetaBuilding {
     constructor() {
@@ -20,8 +21,7 @@ export class MetaFilterBuilding extends MetaBuilding {
      * @param {GameRoot} root
      */
     getIsUnlocked(root) {
-        // @todo
+        return root.hubGoals.isRewardUnlocked(enumHubGoalRewards.reward_wires_filters_and_levers);
-        return true;
     }
 
     getDimensions() {

src/js/game/buildings/lever.js

@@ -4,6 +4,7 @@ import { Entity } from "../entity";
 import { MetaBuilding } from "../meta_building";
 import { GameRoot } from "../root";
 import { LeverComponent } from "../components/lever";
+import { enumHubGoalRewards } from "../tutorial_goals";
 
 export class MetaLeverBuilding extends MetaBuilding {
     constructor() {
@@ -19,8 +20,7 @@ export class MetaLeverBuilding extends MetaBuilding {
      * @param {GameRoot} root
      */
     getIsUnlocked(root) {
-        // @todo
+        return root.hubGoals.isRewardUnlocked(enumHubGoalRewards.reward_wires_filters_and_levers);
-        return true;
     }
 
     getDimensions() {

src/js/game/buildings/reader.js

@@ -8,6 +8,7 @@ import { MetaBuilding } from "../meta_building";
 import { GameRoot } from "../root";
 import { BeltUnderlaysComponent } from "../components/belt_underlays";
 import { BeltReaderComponent } from "../components/belt_reader";
+import { enumHubGoalRewards } from "../tutorial_goals";
 
 export class MetaReaderBuilding extends MetaBuilding {
     constructor() {
@@ -22,8 +23,7 @@ export class MetaReaderBuilding extends MetaBuilding {
      * @param {GameRoot} root
      */
     getIsUnlocked(root) {
-        // @todo
+        return root.hubGoals.isRewardUnlocked(enumHubGoalRewards.reward_belt_reader);
-        return true;
     }
 
     getDimensions() {

src/js/game/hud/parts/base_toolbar.js

@@ -11,14 +11,16 @@ export class HUDBaseToolbar extends BaseHUDPart {
     /**
      * @param {GameRoot} root
      * @param {object} param0
-     * @param {Array<typeof MetaBuilding>} param0.supportedBuildings
+     * @param {Array<typeof MetaBuilding>} param0.primaryBuildings
+     * @param {Array<typeof MetaBuilding>=} param0.secondaryBuildings
      * @param {function} param0.visibilityCondition
      * @param {string} param0.htmlElementId
      */
-    constructor(root, { supportedBuildings, visibilityCondition, htmlElementId }) {
+    constructor(root, { primaryBuildings, secondaryBuildings = [], visibilityCondition, htmlElementId }) {
         super(root);
 
-        this.supportedBuildings = supportedBuildings;
+        this.primaryBuildings = primaryBuildings;
+        this.secondaryBuildings = secondaryBuildings;
         this.visibilityCondition = visibilityCondition;
         this.htmlElementId = htmlElementId;
 
@@ -40,17 +42,40 @@ export class HUDBaseToolbar extends BaseHUDPart {
         this.element = makeDiv(parent, this.htmlElementId, ["ingame_buildingsToolbar"], "");
     }
 
+    /**
+     * Returns all buildings
+     * @returns {Array<typeof MetaBuilding>}
+     */
+    get allBuildings() {
+        return [...this.primaryBuildings, ...this.secondaryBuildings];
+    }
+
     initialize() {
         const actionMapper = this.root.keyMapper;
+        let rowSecondary;
+        if (this.secondaryBuildings.length > 0) {
+            rowSecondary = makeDiv(this.element, null, ["buildings", "secondary"]);
 
-        const items = makeDiv(this.element, null, ["buildings"]);
+            this.secondaryDomAttach = new DynamicDomAttach(this.root, rowSecondary, {
+                attachClass: "visible",
+            });
+        }
 
-        for (let i = 0; i < this.supportedBuildings.length; ++i) {
+        const rowPrimary = makeDiv(this.element, null, ["buildings", "primary"]);
-            const metaBuilding = gMetaBuildingRegistry.findByClass(this.supportedBuildings[i]);
+
+        const allBuildings = this.allBuildings;
+
+        for (let i = 0; i < allBuildings.length; ++i) {
+            const metaBuilding = gMetaBuildingRegistry.findByClass(allBuildings[i]);
             const binding = actionMapper.getBinding(KEYMAPPINGS.buildings[metaBuilding.getId()]);
 
-            const itemContainer = makeDiv(items, null, ["building"]);
+            const itemContainer = makeDiv(
+                this.primaryBuildings.includes(allBuildings[i]) ? rowPrimary : rowSecondary,
+                null,
+                ["building"]
+            );
             itemContainer.setAttribute("data-icon", "building_icons/" + metaBuilding.getId() + ".png");
+            itemContainer.setAttribute("data-id", metaBuilding.getId());
 
             binding.add(() => this.selectBuildingForPlacement(metaBuilding));
 
@@ -88,14 +113,29 @@ export class HUDBaseToolbar extends BaseHUDPart {
         this.domAttach.update(visible);
 
         if (visible) {
+            let recomputeSecondaryToolbarVisibility = false;
             for (const buildingId in this.buildingHandles) {
                 const handle = this.buildingHandles[buildingId];
                 const newStatus = handle.metaBuilding.getIsUnlocked(this.root);
                 if (handle.unlocked !== newStatus) {
                     handle.unlocked = newStatus;
                     handle.element.classList.toggle("unlocked", newStatus);
+                    recomputeSecondaryToolbarVisibility = true;
                 }
             }
+
+            if (recomputeSecondaryToolbarVisibility && this.secondaryDomAttach) {
+                let anyUnlocked = false;
+                for (let i = 0; i < this.secondaryBuildings.length; ++i) {
+                    const metaClass = gMetaBuildingRegistry.findByClass(this.secondaryBuildings[i]);
+                    if (metaClass.getIsUnlocked(this.root)) {
+                        anyUnlocked = true;
+                        break;
+                    }
+                }
+
+                this.secondaryDomAttach.update(anyUnlocked);
+            }
         }
     }
 
@@ -110,9 +150,9 @@ export class HUDBaseToolbar extends BaseHUDPart {
 
         let newBuildingFound = false;
         let newIndex = this.lastSelectedIndex;
-        for (let i = 0; i < this.supportedBuildings.length; ++i, ++newIndex) {
+        for (let i = 0; i < this.primaryBuildings.length; ++i, ++newIndex) {
-            newIndex %= this.supportedBuildings.length;
+            newIndex %= this.primaryBuildings.length;
-            const metaBuilding = gMetaBuildingRegistry.findByClass(this.supportedBuildings[newIndex]);
+            const metaBuilding = gMetaBuildingRegistry.findByClass(this.primaryBuildings[newIndex]);
             const handle = this.buildingHandles[metaBuilding.id];
             if (!handle.selected && handle.unlocked) {
                 newBuildingFound = true;
@@ -122,7 +162,7 @@ export class HUDBaseToolbar extends BaseHUDPart {
         if (!newBuildingFound) {
             return;
         }
-        const metaBuildingClass = this.supportedBuildings[newIndex];
+        const metaBuildingClass = this.primaryBuildings[newIndex];
         const metaBuilding = gMetaBuildingRegistry.findByClass(metaBuildingClass);
         this.selectBuildingForPlacement(metaBuilding);
     }

src/js/game/hud/parts/buildings_toolbar.js

@@ -15,28 +15,28 @@ import { MetaUndergroundBeltBuilding } from "../../buildings/underground_belt";
 import { HUDBaseToolbar } from "./base_toolbar";
 import { MetaStorageBuilding } from "../../buildings/storage";
 
-const supportedBuildings = [
-    MetaBeltBuilding,
-    MetaBalancerBuilding,
-    MetaUndergroundBeltBuilding,
-    MetaMinerBuilding,
-    MetaCutterBuilding,
-    MetaRotaterBuilding,
-    MetaStackerBuilding,
-    MetaMixerBuilding,
-    MetaPainterBuilding,
-    MetaTrashBuilding,
-    MetaStorageBuilding,
-    MetaLeverBuilding,
-    MetaFilterBuilding,
-    MetaDisplayBuilding,
-    MetaReaderBuilding,
-];
-
 export class HUDBuildingsToolbar extends HUDBaseToolbar {
     constructor(root) {
         super(root, {
-            supportedBuildings,
+            primaryBuildings: [
+                MetaBeltBuilding,
+                MetaBalancerBuilding,
+                MetaUndergroundBeltBuilding,
+                MetaMinerBuilding,
+                MetaCutterBuilding,
+                MetaRotaterBuilding,
+                MetaStackerBuilding,
+                MetaMixerBuilding,
+                MetaPainterBuilding,
+                MetaTrashBuilding,
+            ],
+            secondaryBuildings: [
+                MetaStorageBuilding,
+                MetaLeverBuilding,
+                MetaFilterBuilding,
+                MetaDisplayBuilding,
+                MetaReaderBuilding,
+            ],
             visibilityCondition: () =>
                 !this.root.camera.getIsMapOverlayActive() && this.root.currentLayer === "regular",
             htmlElementId: "ingame_HUD_buildings_toolbar",

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

@@ -6,19 +6,17 @@ import { MetaLeverBuilding } from "../../buildings/lever";
 import { MetaWireTunnelBuilding } from "../../buildings/wire_tunnel";
 import { MetaVirtualProcessorBuilding } from "../../buildings/virtual_processor";
 
-const supportedBuildings = [
-    MetaWireBuilding,
-    MetaWireTunnelBuilding,
-    MetaConstantSignalBuilding,
-    MetaLogicGateBuilding,
-    MetaLeverBuilding,
-    MetaVirtualProcessorBuilding,
-];
-
 export class HUDWiresToolbar extends HUDBaseToolbar {
     constructor(root) {
         super(root, {
-            supportedBuildings,
+            primaryBuildings: [
+                MetaWireBuilding,
+                MetaWireTunnelBuilding,
+                MetaConstantSignalBuilding,
+                MetaLogicGateBuilding,
+                MetaLeverBuilding,
+                MetaVirtualProcessorBuilding,
+            ],
             visibilityCondition: () =>
                 !this.root.camera.getIsMapOverlayActive() && this.root.currentLayer === "wires",
             htmlElementId: "ingame_HUD_wires_toolbar",