From faa2ef9bd7a0077245d5122612308e68150df399 Mon Sep 17 00:00:00 2001 From: tobspr Date: Thu, 14 May 2020 13:40:38 +0200 Subject: [PATCH] Show required amount in pinned shapes --- src/css/ingame_hud/pinned_shapes.scss | 26 +++++++++-- src/js/game/hud/hud.js | 2 +- src/js/game/hud/parts/pinned_shapes.js | 62 +++++++++++++++++--------- src/js/game/hud/parts/shop.js | 2 +- 4 files changed, 67 insertions(+), 25 deletions(-) diff --git a/src/css/ingame_hud/pinned_shapes.scss b/src/css/ingame_hud/pinned_shapes.scss index bf4da985..e8ac43c2 100644 --- a/src/css/ingame_hud/pinned_shapes.scss +++ b/src/css/ingame_hud/pinned_shapes.scss @@ -10,10 +10,11 @@ > .shape { position: relative; - display: flex; - flex-direction: row; + display: grid; 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 { diff --git a/src/js/game/hud/hud.js b/src/js/game/hud/hud.js index e1588181..7f71872a 100644 --- a/src/js/game/hud/hud.js +++ b/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) { diff --git a/src/js/game/hud/parts/pinned_shapes.js b/src/js/game/hud/parts/pinned_shapes.js index 883025b8..608b3312 100644 --- a/src/js/game/hud/parts/pinned_shapes.js +++ b/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 ( - this.pinnedShapes.indexOf(key) >= 0 || key === this.root.hubGoals.currentGoal.definition.getHash() - ); + if (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]; - if (key !== currentGoal) { - this.internalPinShape(key); + const key = this.pinnedShapes[i].key; + if (key !== currentKey) { + 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); - if (index >= 0) { - const key = this.pinnedShapes[index]; - this.pinnedShapes.splice(index, 1); - this.rerenderFull(); + for (let i = 0; i < this.pinnedShapes.length; ++i) { + if (this.pinnedShapes[i].key === key) { + this.pinnedShapes.splice(i, 1); + 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) { - // Pin - this.pinnedShapes.push(key); - this.rerenderFull(); + for (let i = 0; i < this.pinnedShapes.length; ++i) { + if (this.pinnedShapes[i].key === key) { + // Already pinned + this.pinnedShapes[i].goal = Math_max(this.pinnedShapes[i].goal, goal); + return; + } } + + this.pinnedShapes.push({ key, goal }); + this.rerenderFull(); } } diff --git a/src/js/game/hud/parts/shop.js b/src/js/game/hud/parts/shop.js index a272d499..8ae85e4f 100644 --- a/src/js/game/hud/parts/shop.js +++ b/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"); });