Allow hovering pinned shapes to enlarge them

src/css/ingame_hud/pinned_shapes.scss

@@ -31,6 +31,14 @@
             @include S(height, 25px);
             grid-column: 1 / 2;
             grid-row: 1 / 3;
+            pointer-events: all;
+            transition: transform 0.1s ease-in-out;
+            position: relative;
+            z-index: 20;
+            &:hover {
+                transform: scale(2) translateX(#{D(5px)});
+                z-index: 21;
+            }
         }
 
         > .amountLabel,
@@ -64,19 +72,27 @@
             grid-row: 1 / 2;
         }
 
-        &.marked .amountLabel {
+        &.goal,
-            &::after {
+        &.blueprint {
-                content: " ";
+            .amountLabel {
-                position: absolute;
+                &::after {
-                display: inline-block;
+                    content: " ";
-                @include S(width, 9px);
+                    position: absolute;
-                @include S(height, 9px);
+                    display: inline-block;
-                opacity: 0.8;
+                    @include S(width, 8px);
-                @include S(top, -4px);
+                    @include S(height, 8px);
-                @include S(left, -4px);
+                    opacity: 0.8;
-                background: uiResource("icons/current_goal_marker.png") center center / contain no-repeat;
+                    @include S(top, 4px);
+                    @include S(left, -7px);
+                    background: uiResource("icons/current_goal_marker.png") center center / contain no-repeat;
+
+                    @include DarkThemeInvert;
+                }
+            }
 
-                @include DarkThemeInvert;
+            &.blueprint .amountLabel::after {
+                background-image: uiResource("icons/blueprint_marker.png");
+                background-size: 90%;
             }
         }
     }

src/js/changelog.js

@@ -3,6 +3,7 @@ export const CHANGELOG = [
         version: "1.1.2",
         date: "unreleased",
         entries: [
+            "Allow hovering pinned shapes to enlarge them",
             "Move default key for deleting from 'X' to 'DEL'",
             "Show confirmation when deleting > 100 buildings",
             "Reintroduce 'SPACE' keybinding to center on map",

src/js/core/config.js

@@ -83,7 +83,7 @@ export const globalConfig = {
 
     debug: {
         /* dev:start */
-        // fastGameEnter: true,
+        fastGameEnter: true,
         // noArtificialDelays: true,
         // disableSavegameWrite: true,
         // showEntityBounds: true,

src/js/game/hud/parts/pinned_shapes.js

@@ -74,10 +74,10 @@ export class HUDPinnedShapes extends BaseHUDPart {
         }
         this.handles = [];
 
-        this.internalPinShape(currentKey, currentGoal.required, false);
+        this.internalPinShape(currentKey, currentGoal.required, false, "goal");
 
         if (this.root.hubGoals.isRewardUnlocked(enumHubGoalRewards.reward_blueprints)) {
-            this.internalPinShape(blueprintShape, null, false);
+            this.internalPinShape(blueprintShape, null, false, "blueprint");
         }
 
         for (let i = 0; i < this.pinnedShapes.length; ++i) {
@@ -93,14 +93,19 @@ export class HUDPinnedShapes extends BaseHUDPart {
      * @param {string} key
      * @param {number} goal
      * @param {boolean} canUnpin
+     * @param {string=} className
      */
-    internalPinShape(key, goal, canUnpin = true) {
+    internalPinShape(key, goal, canUnpin = true, className = null) {
         const definition = this.root.shapeDefinitionMgr.getShapeFromShortKey(key);
 
         const element = makeDiv(this.element, null, ["shape"]);
         const canvas = definition.generateAsCanvas(120);
         element.appendChild(canvas);
 
+        if (className) {
+            element.classList.add(className);
+        }
+
         let detector = null;
         if (canUnpin) {
             element.classList.add("unpinable");

version

@@ -1 +1 @@
-1.1.1
+1.1.2