Show required amount in pinned shapes
This commit is contained in:
parent
38970141d8
commit
faa2ef9bd7
|
@ -10,10 +10,11 @@
|
||||||
|
|
||||||
> .shape {
|
> .shape {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
grid-template-rows: 1fr 1fr;
|
||||||
@include S(margin-bottom, 5px);
|
@include S(margin-bottom, 5px);
|
||||||
|
|
||||||
&.unpinable {
|
&.unpinable {
|
||||||
|
@ -26,15 +27,34 @@
|
||||||
> canvas {
|
> canvas {
|
||||||
@include S(width, 25px);
|
@include S(width, 25px);
|
||||||
@include S(height, 25px);
|
@include S(height, 25px);
|
||||||
|
grid-column: 1 / 2;
|
||||||
|
grid-row: 1 / 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .amountLabel {
|
> .amountLabel,
|
||||||
|
> .goalLabel {
|
||||||
@include S(margin-left, 5px);
|
@include S(margin-left, 5px);
|
||||||
@include SuperSmallText;
|
@include SuperSmallText;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: row;
|
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 {
|
&.marked .amountLabel {
|
||||||
|
|
|
@ -56,7 +56,7 @@ export class GameHUD {
|
||||||
|
|
||||||
this.signals = {
|
this.signals = {
|
||||||
selectedPlacementBuildingChanged: /** @type {TypedSignal<[MetaBuilding|null]>} */ (new Signal()),
|
selectedPlacementBuildingChanged: /** @type {TypedSignal<[MetaBuilding|null]>} */ (new Signal()),
|
||||||
shapePinRequested: /** @type {TypedSignal<[ShapeDefinition]>} */ (new Signal()),
|
shapePinRequested: /** @type {TypedSignal<[ShapeDefinition, number]>} */ (new Signal()),
|
||||||
};
|
};
|
||||||
|
|
||||||
if (!IS_MOBILE) {
|
if (!IS_MOBILE) {
|
||||||
|
|
|
@ -2,6 +2,7 @@ import { BaseHUDPart } from "../base_hud_part";
|
||||||
import { makeDiv, removeAllChildren, formatBigNumber } from "../../../core/utils";
|
import { makeDiv, removeAllChildren, formatBigNumber } from "../../../core/utils";
|
||||||
import { ClickDetector } from "../../../core/click_detector";
|
import { ClickDetector } from "../../../core/click_detector";
|
||||||
import { ShapeDefinition } from "../../shape_definition";
|
import { ShapeDefinition } from "../../shape_definition";
|
||||||
|
import { Math_max } from "../../../core/builtins";
|
||||||
|
|
||||||
export class HUDPinnedShapes extends BaseHUDPart {
|
export class HUDPinnedShapes extends BaseHUDPart {
|
||||||
createElements(parent) {
|
createElements(parent) {
|
||||||
|
@ -9,6 +10,7 @@ export class HUDPinnedShapes extends BaseHUDPart {
|
||||||
}
|
}
|
||||||
|
|
||||||
initialize() {
|
initialize() {
|
||||||
|
/** @type {Array<{ key: string, goal: number }>} */
|
||||||
this.pinnedShapes = [];
|
this.pinnedShapes = [];
|
||||||
|
|
||||||
/** @type {Array<{key: string, amountLabel: HTMLElement, lastRenderedValue: number, element: HTMLElement, detector?: ClickDetector}>} */
|
/** @type {Array<{key: string, amountLabel: HTMLElement, lastRenderedValue: number, element: HTMLElement, detector?: ClickDetector}>} */
|
||||||
|
@ -27,13 +29,20 @@ export class HUDPinnedShapes extends BaseHUDPart {
|
||||||
if (!this.pinnedShapes) {
|
if (!this.pinnedShapes) {
|
||||||
return false;
|
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() {
|
rerenderFull() {
|
||||||
const currentGoal = this.root.hubGoals.currentGoal.definition.getHash();
|
const currentGoal = this.root.hubGoals.currentGoal;
|
||||||
|
const currentKey = currentGoal.definition.getHash();
|
||||||
|
|
||||||
// First, remove old ones
|
// First, remove old ones
|
||||||
for (let i = 0; i < this.handles.length; ++i) {
|
for (let i = 0; i < this.handles.length; ++i) {
|
||||||
|
@ -45,12 +54,12 @@ export class HUDPinnedShapes extends BaseHUDPart {
|
||||||
}
|
}
|
||||||
this.handles = [];
|
this.handles = [];
|
||||||
|
|
||||||
this.internalPinShape(currentGoal, false);
|
this.internalPinShape(currentKey, currentGoal.required, false);
|
||||||
|
|
||||||
for (let i = 0; i < this.pinnedShapes.length; ++i) {
|
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
|
* Pins a shape
|
||||||
* @param {string} key
|
* @param {string} key
|
||||||
|
* @param {number} goal
|
||||||
* @param {boolean} canUnpin
|
* @param {boolean} canUnpin
|
||||||
*/
|
*/
|
||||||
internalPinShape(key, canUnpin = true) {
|
internalPinShape(key, goal, canUnpin = true) {
|
||||||
const definition = this.root.shapeDefinitionMgr.getShapeFromShortKey(key);
|
const definition = this.root.shapeDefinitionMgr.getShapeFromShortKey(key);
|
||||||
|
|
||||||
const element = makeDiv(this.element, null, ["shape"]);
|
const element = makeDiv(this.element, null, ["shape"]);
|
||||||
|
@ -79,7 +89,8 @@ export class HUDPinnedShapes extends BaseHUDPart {
|
||||||
element.classList.add("marked");
|
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({
|
this.handles.push({
|
||||||
key,
|
key,
|
||||||
|
@ -101,28 +112,39 @@ export class HUDPinnedShapes extends BaseHUDPart {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Unpins a shape
|
||||||
|
* @param {string} key
|
||||||
|
*/
|
||||||
unpinShape(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 {ShapeDefinition} definition
|
||||||
|
* @param {number} goal
|
||||||
*/
|
*/
|
||||||
pinNewShape(definition) {
|
pinNewShape(definition, goal) {
|
||||||
const key = definition.getHash();
|
const key = definition.getHash();
|
||||||
if (key === this.root.hubGoals.currentGoal.definition.getHash()) {
|
if (key === this.root.hubGoals.currentGoal.definition.getHash()) {
|
||||||
// Can not pin current goal
|
// Can not pin current goal
|
||||||
return;
|
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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -121,7 +121,7 @@ export class HUDShop extends BaseHUDPart {
|
||||||
preventDefault: true,
|
preventDefault: true,
|
||||||
});
|
});
|
||||||
pinDetector.click.add(() => {
|
pinDetector.click.add(() => {
|
||||||
this.root.hud.signals.shapePinRequested.dispatch(shapeDef);
|
this.root.hud.signals.shapePinRequested.dispatch(shapeDef, amount);
|
||||||
pinButton.classList.add("pinned");
|
pinButton.classList.add("pinned");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Reference in New Issue