Make shapes unpinnable. The current goal shape uses a special pin icon.

This commit is contained in:
hexagonhexagon 2020-06-05 20:33:35 -04:00
parent a2ee16589f
commit 0885bd6727
4 changed files with 42 additions and 8 deletions

View File

@ -132,15 +132,37 @@
} }
&.alreadyPinned { &.alreadyPinned {
opacity: 0.1 !important; opacity: 0.3 !important;
pointer-events: none; }
&.isGoal {
background: uiResource("icons/current_goal_marker.png") center center / 95% no-repeat;
opacity: 0.3 !important;
cursor: default; cursor: default;
pointer-events: none;
} }
&.pinned { &.pinned {
opacity: 0.1; opacity: 0.3;
pointer-events: none; @include InlineAnimation(0.3s ease-in-out) {
cursor: default; 0% {
opacity: 1;
transform: scale(0.8);
}
30% {
opacity: 1;
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
}
&.unpinned {
opacity: 0.6;
@include InlineAnimation(0.3s ease-in-out) { @include InlineAnimation(0.3s ease-in-out) {
0% { 0% {
opacity: 1; opacity: 1;

View File

@ -71,6 +71,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, number]>} */ (new Signal()), shapePinRequested: /** @type {TypedSignal<[ShapeDefinition, number]>} */ (new Signal()),
shapeUnpinRequested: /** @type {TypedSignal<[string]>} */ (new Signal()),
notification: /** @type {TypedSignal<[string, enumNotificationType]>} */ (new Signal()), notification: /** @type {TypedSignal<[string, enumNotificationType]>} */ (new Signal()),
buildingsSelectedForCopy: /** @type {TypedSignal<[Array<number>]>} */ (new Signal()), buildingsSelectedForCopy: /** @type {TypedSignal<[Array<number>]>} */ (new Signal()),
}; };

View File

@ -35,6 +35,7 @@ export class HUDPinnedShapes extends BaseHUDPart {
this.root.signals.storyGoalCompleted.add(this.rerenderFull, this); this.root.signals.storyGoalCompleted.add(this.rerenderFull, this);
this.root.signals.postLoadHook.add(this.rerenderFull, this); this.root.signals.postLoadHook.add(this.rerenderFull, this);
this.root.hud.signals.shapePinRequested.add(this.pinNewShape, this); this.root.hud.signals.shapePinRequested.add(this.pinNewShape, this);
this.root.hud.signals.shapeUnpinRequested.add(this.unpinShape, this);
} }
/** /**

View File

@ -117,7 +117,10 @@ export class HUDShop extends BaseHUDPart {
pinButton.classList.add("pin"); pinButton.classList.add("pin");
container.appendChild(pinButton); container.appendChild(pinButton);
if (this.root.hud.parts.pinnedShapes.isShapePinned(shape)) { const currentGoalShape = this.root.hubGoals.currentGoal.definition.getHash();
if (shape === currentGoalShape) {
pinButton.classList.add("isGoal");
} else if (this.root.hud.parts.pinnedShapes.isShapePinned(shape)) {
pinButton.classList.add("alreadyPinned"); pinButton.classList.add("alreadyPinned");
} }
@ -126,8 +129,15 @@ export class HUDShop extends BaseHUDPart {
preventDefault: true, preventDefault: true,
}); });
pinDetector.click.add(() => { pinDetector.click.add(() => {
this.root.hud.signals.shapePinRequested.dispatch(shapeDef, amount); if (this.root.hud.parts.pinnedShapes.isShapePinned(shape)) {
pinButton.classList.add("pinned"); this.root.hud.signals.shapeUnpinRequested.dispatch(shape);
pinButton.classList.add("unpinned");
pinButton.classList.remove("pinned", "alreadyPinned");
} else {
this.root.hud.signals.shapePinRequested.dispatch(shapeDef, amount);
pinButton.classList.add("pinned");
pinButton.classList.remove("unpinned");
}
}); });
handle.requireIndexToElement.push({ handle.requireIndexToElement.push({