tobspr
4 years ago
parent
e43a22b56d
commit
38970141d8
|
After Width: | Height: | Size: 878 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 854 B |
@ -1,8 +0,0 @@
|
||||
body.ingameDialogOpen {
|
||||
#ingame_Canvas,
|
||||
#ingame_HUD_GameMenu,
|
||||
#ingame_HUD_KeybindingOverlay,
|
||||
#ingame_HUD_buildings_toolbar {
|
||||
filter: blur(5px);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,54 @@
|
||||
#ingame_HUD_PinnedShapes {
|
||||
position: absolute;
|
||||
@include S(left, 9px);
|
||||
@include S(top, 120px);
|
||||
@include PlainText;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
|
||||
> .shape {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include S(margin-bottom, 5px);
|
||||
|
||||
&.unpinable {
|
||||
> canvas {
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
||||
> canvas {
|
||||
@include S(width, 25px);
|
||||
@include S(height, 25px);
|
||||
}
|
||||
|
||||
> .amountLabel {
|
||||
@include S(margin-left, 5px);
|
||||
@include SuperSmallText;
|
||||
font-weight: bold;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&.marked .amountLabel {
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
@include S(width, 9px);
|
||||
@include S(height, 9px);
|
||||
opacity: 0.8;
|
||||
@include S(top, -4px);
|
||||
@include S(left, -4px);
|
||||
background: uiResource("icons/current_goal_marker.png") center center / contain no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,128 @@
|
||||
import { BaseHUDPart } from "../base_hud_part";
|
||||
import { makeDiv, removeAllChildren, formatBigNumber } from "../../../core/utils";
|
||||
import { ClickDetector } from "../../../core/click_detector";
|
||||
import { ShapeDefinition } from "../../shape_definition";
|
||||
|
||||
export class HUDPinnedShapes extends BaseHUDPart {
|
||||
createElements(parent) {
|
||||
this.element = makeDiv(parent, "ingame_HUD_PinnedShapes", []);
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.pinnedShapes = [];
|
||||
|
||||
/** @type {Array<{key: string, amountLabel: HTMLElement, lastRenderedValue: number, element: HTMLElement, detector?: ClickDetector}>} */
|
||||
this.handles = [];
|
||||
this.rerenderFull();
|
||||
|
||||
this.root.signals.storyGoalCompleted.add(this.rerenderFull, this);
|
||||
this.root.hud.signals.shapePinRequested.add(this.pinNewShape, this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns whether a given shape is pinned
|
||||
* @param {string} key
|
||||
*/
|
||||
isShapePinned(key) {
|
||||
if (!this.pinnedShapes) {
|
||||
return false;
|
||||
}
|
||||
return (
|
||||
this.pinnedShapes.indexOf(key) >= 0 || key === this.root.hubGoals.currentGoal.definition.getHash()
|
||||
);
|
||||
}
|
||||
|
||||
rerenderFull() {
|
||||
const currentGoal = this.root.hubGoals.currentGoal.definition.getHash();
|
||||
|
||||
// First, remove old ones
|
||||
for (let i = 0; i < this.handles.length; ++i) {
|
||||
this.handles[i].element.remove();
|
||||
const detector = this.handles[i].detector;
|
||||
if (detector) {
|
||||
detector.cleanup();
|
||||
}
|
||||
}
|
||||
this.handles = [];
|
||||
|
||||
this.internalPinShape(currentGoal, false);
|
||||
|
||||
for (let i = 0; i < this.pinnedShapes.length; ++i) {
|
||||
const key = this.pinnedShapes[i];
|
||||
if (key !== currentGoal) {
|
||||
this.internalPinShape(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Pins a shape
|
||||
* @param {string} key
|
||||
* @param {boolean} canUnpin
|
||||
*/
|
||||
internalPinShape(key, canUnpin = true) {
|
||||
const definition = this.root.shapeDefinitionMgr.getShapeFromShortKey(key);
|
||||
|
||||
const element = makeDiv(this.element, null, ["shape"]);
|
||||
const canvas = definition.generateAsCanvas(120);
|
||||
element.appendChild(canvas);
|
||||
|
||||
let detector = null;
|
||||
if (canUnpin) {
|
||||
element.classList.add("unpinable");
|
||||
detector = new ClickDetector(element, {
|
||||
consumeEvents: true,
|
||||
preventDefault: true,
|
||||
});
|
||||
detector.click.add(() => this.unpinShape(key));
|
||||
} else {
|
||||
element.classList.add("marked");
|
||||
}
|
||||
|
||||
const amountLabel = makeDiv(element, null, ["amountLabel"], "123");
|
||||
|
||||
this.handles.push({
|
||||
key,
|
||||
element,
|
||||
amountLabel,
|
||||
lastRenderedValue: -1,
|
||||
});
|
||||
}
|
||||
|
||||
update() {
|
||||
for (let i = 0; i < this.handles.length; ++i) {
|
||||
const handle = this.handles[i];
|
||||
|
||||
const currentValue = this.root.hubGoals.getShapesStoredByKey(handle.key);
|
||||
if (currentValue !== handle.lastRenderedValue) {
|
||||
handle.lastRenderedValue = currentValue;
|
||||
handle.amountLabel.innerText = formatBigNumber(currentValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
unpinShape(key) {
|
||||
const index = this.pinnedShapes.indexOf(key);
|
||||
if (index >= 0) {
|
||||
const key = this.pinnedShapes[index];
|
||||
this.pinnedShapes.splice(index, 1);
|
||||
this.rerenderFull();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {ShapeDefinition} definition
|
||||
*/
|
||||
pinNewShape(definition) {
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue