Mascali
/
shapez
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Show required amount in pinned shapes

This commit is contained in:
tobspr 2020-05-14 13:40:38 +02:00
parent 38970141d8
commit faa2ef9bd7
4 changed files with 67 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/css/ingame_hud/pinned_shapes.scss
View File

@ -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 {

2
src/js/game/hud/hud.js
View File

@ -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) {

62
src/js/game/hud/parts/pinned_shapes.js
View File

@ -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();
}
}

2
src/js/game/hud/parts/shop.js
View File

@ -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");
});