From 0885bd67272825fda4f21c35105d13da0ada0f3b Mon Sep 17 00:00:00 2001
From: hexagonhexagon <hexagonhexagon163@gmail.com>
Date: Fri, 5 Jun 2020 20:33:35 -0400
Subject: [PATCH] Make shapes unpinnable. The current goal shape uses a special
 pin icon.

---
 src/css/ingame_hud/shop.scss           | 32 ++++++++++++++++++++++----
 src/js/game/hud/hud.js                 |  1 +
 src/js/game/hud/parts/pinned_shapes.js |  1 +
 src/js/game/hud/parts/shop.js          | 16 ++++++++++---
 4 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/src/css/ingame_hud/shop.scss b/src/css/ingame_hud/shop.scss
index d27c98de..4ca01787 100644
--- a/src/css/ingame_hud/shop.scss
+++ b/src/css/ingame_hud/shop.scss
@@ -132,15 +132,37 @@
                         }
 
                         &.alreadyPinned {
-                            opacity: 0.1 !important;
-                            pointer-events: none;
+                            opacity: 0.3 !important;
+                        }
+
+                        &.isGoal {
+                            background: uiResource("icons/current_goal_marker.png") center center / 95% no-repeat;
+                            opacity: 0.3 !important;
                             cursor: default;
+                            pointer-events: none;
                         }
 
                         &.pinned {
-                            opacity: 0.1;
-                            pointer-events: none;
-                            cursor: default;
+                            opacity: 0.3;
+                            @include InlineAnimation(0.3s ease-in-out) {
+                                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) {
                                 0% {
                                     opacity: 1;
diff --git a/src/js/game/hud/hud.js b/src/js/game/hud/hud.js
index 9104e3bf..d6a078f4 100644
--- a/src/js/game/hud/hud.js
+++ b/src/js/game/hud/hud.js
@@ -71,6 +71,7 @@ export class GameHUD {
         this.signals = {
             selectedPlacementBuildingChanged: /** @type {TypedSignal<[MetaBuilding|null]>} */ (new Signal()),
             shapePinRequested: /** @type {TypedSignal<[ShapeDefinition, number]>} */ (new Signal()),
+            shapeUnpinRequested: /** @type {TypedSignal<[string]>} */ (new Signal()),
             notification: /** @type {TypedSignal<[string, enumNotificationType]>} */ (new Signal()),
             buildingsSelectedForCopy: /** @type {TypedSignal<[Array<number>]>} */ (new Signal()),
         };
diff --git a/src/js/game/hud/parts/pinned_shapes.js b/src/js/game/hud/parts/pinned_shapes.js
index 1cdfa7ba..042eba98 100644
--- a/src/js/game/hud/parts/pinned_shapes.js
+++ b/src/js/game/hud/parts/pinned_shapes.js
@@ -35,6 +35,7 @@ export class HUDPinnedShapes extends BaseHUDPart {
         this.root.signals.storyGoalCompleted.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.shapeUnpinRequested.add(this.unpinShape, this);
     }
 
     /**
diff --git a/src/js/game/hud/parts/shop.js b/src/js/game/hud/parts/shop.js
index 0445e604..2d187082 100644
--- a/src/js/game/hud/parts/shop.js
+++ b/src/js/game/hud/parts/shop.js
@@ -117,7 +117,10 @@ export class HUDShop extends BaseHUDPart {
                 pinButton.classList.add("pin");
                 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");
                 }
 
@@ -126,8 +129,15 @@ export class HUDShop extends BaseHUDPart {
                     preventDefault: true,
                 });
                 pinDetector.click.add(() => {
-                    this.root.hud.signals.shapePinRequested.dispatch(shapeDef, amount);
-                    pinButton.classList.add("pinned");
+                    if (this.root.hud.parts.pinnedShapes.isShapePinned(shape)) {
+                        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({