Show required amount in pinned shapes

src/css/ingame_hud/pinned_shapes.scss

@@ -10,10 +10,11 @@
 
     > .shape {
         position: relative;
-        display: flex;
+        display: grid;
-        flex-direction: row;
         align-items: center;
         justify-content: center;
+        grid-template-columns: auto 1fr;
+        grid-template-rows: 1fr 1fr;
         @include S(margin-bottom, 5px);
 
         &.unpinable {
@@ -26,15 +27,34 @@
         > canvas {
             @include S(width, 25px);
             @include S(height, 25px);
+            grid-column: 1 / 2;
+            grid-row: 1 / 3;
         }
 
-        > .amountLabel {
+        > .amountLabel,
+        > .goalLabel {
             @include S(margin-left, 5px);
             @include SuperSmallText;
             font-weight: bold;
             display: inline-flex;
             align-items: center;
             flex-direction: row;
+            grid-column: 2 / 3;
+            @include S(height, 9px);
+        }
+
+        > .goalLabel {
+            @include S(font-size, 7px);
+            opacity: 0.3;
+            align-self: start;
+            justify-self: start;
+            grid-row: 2 / 3;
+        }
+
+        > .amountLabel {
+            align-self: end;
+            justify-self: start;
+            grid-row: 1 / 2;
         }
 
         &.marked .amountLabel {

src/js/game/hud/hud.js

@@ -56,7 +56,7 @@ export class GameHUD {
 
         this.signals = {
             selectedPlacementBuildingChanged: /** @type {TypedSignal<[MetaBuilding|null]>} */ (new Signal()),
-            shapePinRequested: /** @type {TypedSignal<[ShapeDefinition]>} */ (new Signal()),
+            shapePinRequested: /** @type {TypedSignal<[ShapeDefinition, number]>} */ (new Signal()),
         };
 
         if (!IS_MOBILE) {

src/js/game/hud/parts/pinned_shapes.js

@@ -2,6 +2,7 @@ import { BaseHUDPart } from "../base_hud_part";
 import { makeDiv, removeAllChildren, formatBigNumber } from "../../../core/utils";
 import { ClickDetector } from "../../../core/click_detector";
 import { ShapeDefinition } from "../../shape_definition";
+import { Math_max } from "../../../core/builtins";
 
 export class HUDPinnedShapes extends BaseHUDPart {
     createElements(parent) {
@@ -9,6 +10,7 @@ export class HUDPinnedShapes extends BaseHUDPart {
     }
 
     initialize() {
+        /** @type {Array<{ key: string, goal: number }>} */
         this.pinnedShapes = [];
 
         /** @type {Array<{key: string, amountLabel: HTMLElement, lastRenderedValue: number, element: HTMLElement, detector?: ClickDetector}>} */
@@ -27,13 +29,20 @@ export class HUDPinnedShapes extends BaseHUDPart {
         if (!this.pinnedShapes) {
             return false;
         }
-        return (
+        if (key === this.root.hubGoals.currentGoal.definition.getHash()) {
-            this.pinnedShapes.indexOf(key) >= 0 || key === this.root.hubGoals.currentGoal.definition.getHash()
+            return true;
-        );
+        }
+        for (let i = 0; i < this.pinnedShapes.length; ++i) {
+            if (this.pinnedShapes[i].key === key) {
+                return true;
+            }
+        }
+        return false;
     }
 
     rerenderFull() {
-        const currentGoal = this.root.hubGoals.currentGoal.definition.getHash();
+        const currentGoal = this.root.hubGoals.currentGoal;
+        const currentKey = currentGoal.definition.getHash();
 
         // First, remove old ones
         for (let i = 0; i < this.handles.length; ++i) {
@@ -45,12 +54,12 @@ export class HUDPinnedShapes extends BaseHUDPart {
         }
         this.handles = [];
 
-        this.internalPinShape(currentGoal, false);
+        this.internalPinShape(currentKey, currentGoal.required, false);
 
         for (let i = 0; i < this.pinnedShapes.length; ++i) {
-            const key = this.pinnedShapes[i];
+            const key = this.pinnedShapes[i].key;
-            if (key !== currentGoal) {
+            if (key !== currentKey) {
-                this.internalPinShape(key);
+                this.internalPinShape(key, this.pinnedShapes[i].goal);
             }
         }
     }
@@ -58,9 +67,10 @@ export class HUDPinnedShapes extends BaseHUDPart {
     /**
      * Pins a shape
      * @param {string} key
+     * @param {number} goal
      * @param {boolean} canUnpin
      */
-    internalPinShape(key, canUnpin = true) {
+    internalPinShape(key, goal, canUnpin = true) {
         const definition = this.root.shapeDefinitionMgr.getShapeFromShortKey(key);
 
         const element = makeDiv(this.element, null, ["shape"]);
@@ -79,7 +89,8 @@ export class HUDPinnedShapes extends BaseHUDPart {
             element.classList.add("marked");
         }
 
-        const amountLabel = makeDiv(element, null, ["amountLabel"], "123");
+        const amountLabel = makeDiv(element, null, ["amountLabel"], "");
+        const goalLabel = makeDiv(element, null, ["goalLabel"], "/" + formatBigNumber(goal));
 
         this.handles.push({
             key,
@@ -101,28 +112,39 @@ export class HUDPinnedShapes extends BaseHUDPart {
         }
     }
 
+    /**
+     * Unpins a shape
+     * @param {string} key
+     */
     unpinShape(key) {
-        const index = this.pinnedShapes.indexOf(key);
+        for (let i = 0; i < this.pinnedShapes.length; ++i) {
-        if (index >= 0) {
+            if (this.pinnedShapes[i].key === key) {
-            const key = this.pinnedShapes[index];
+                this.pinnedShapes.splice(i, 1);
-            this.pinnedShapes.splice(index, 1);
+                this.rerenderFull();
-            this.rerenderFull();
+                return;
+            }
         }
     }
 
     /**
      * @param {ShapeDefinition} definition
+     * @param {number} goal
      */
-    pinNewShape(definition) {
+    pinNewShape(definition, goal) {
         const key = definition.getHash();
         if (key === this.root.hubGoals.currentGoal.definition.getHash()) {
             // Can not pin current goal
             return;
         }
-        if (this.pinnedShapes.indexOf(key) < 0) {
+        for (let i = 0; i < this.pinnedShapes.length; ++i) {
-            // Pin
+            if (this.pinnedShapes[i].key === key) {
-            this.pinnedShapes.push(key);
+                // Already pinned
-            this.rerenderFull();
+                this.pinnedShapes[i].goal = Math_max(this.pinnedShapes[i].goal, goal);
+                return;
+            }
         }
+
+        this.pinnedShapes.push({ key, goal });
+        this.rerenderFull();
     }
 }

src/js/game/hud/parts/shop.js

@@ -121,7 +121,7 @@ export class HUDShop extends BaseHUDPart {
                     preventDefault: true,
                 });
                 pinDetector.click.add(() => {
-                    this.root.hud.signals.shapePinRequested.dispatch(shapeDef);
+                    this.root.hud.signals.shapePinRequested.dispatch(shapeDef, amount);
                     pinButton.classList.add("pinned");
                 });