Properly hide some hud elements when hovering

src/css/ingame_hud/building_placer.scss

@@ -18,12 +18,11 @@
         background-color: #55585a;
     }
 
-    pointer-events: all;
-
-    &:hover {
-        opacity: 10%;
+    transition: opacity 0.1s ease-out;
+    &.hovered {
+        opacity: 0.1;
         .buildingImage {
-            opacity: 0%;
+            opacity: 0;
         }
     }
 
@@ -79,6 +78,7 @@
         @include S(height, 100px);
         background: top left / 100% 100% no-repeat;
         @include S(border-radius, $globalBorderRadius);
+        transition: opacity 0.1s ease-in-out;
     }
 
     @include StyleBelowWidth(700px) {

src/css/ingame_hud/interactive_tutorial.scss

@@ -31,7 +31,8 @@
 
     pointer-events: all;
 
-    &:hover {
+    transition: opacity 0.1s ease-out;
+    &.hovered {
         opacity: 10%;
         .helperGif {
             opacity: 0%;
@@ -57,5 +58,6 @@
         @include S(margin-top, 5px);
         @include S(height, 150px);
         background: center center / contain no-repeat;
+        transition: opacity 0.1s ease-out;
     }
 }

src/css/ingame_hud/keybindings_overlay.scss

@@ -14,6 +14,11 @@
         color: #fff;
     }
 
+    transition: opacity 0.1s ease-out;
+    &.hovered {
+        opacity: 0.1;
+    }
+
     > .binding {
         &:not(.visible) {
             display: none !important;

src/js/changelog.js

@@ -19,6 +19,7 @@ export const CHANGELOG = [
             "Updated and added new translations (Thanks to all contributors!)",
             "Added setting to be able to delete buildings while placing (inspired by hexy)",
             "You can now adjust the sound and music volumes! (inspired by  Yoshie2000)",
+            "Some hud elements now have reduced opacity when hovering, so you can see through (by mvb005)",
             "Mark pinned shapes in statistics dialog and show them first (inspired by davidburhans)",
             "Added setting to show chunk borders",
             "Quad painters have been reworked! They now are integrated with the wires, and only paint the shape when the value is 1 (inspired by dengr1605)",

src/js/game/hud/dynamic_dom_attach.js

@@ -1,3 +1,4 @@
+import { TrackedState } from "../../core/tracked_state";
 import { GameRoot } from "../root";
 
 // Automatically attaches and detaches elements from the dom
@@ -7,15 +8,28 @@ import { GameRoot } from "../root";
 // Also attaches a class name if desired
 
 export class DynamicDomAttach {
-    constructor(root, element, { timeToKeepSeconds = 0, attachClass = null } = {}) {
+    /**
+     *
+     * @param {GameRoot} root
+     * @param {HTMLElement} element
+     * @param {object} param2
+     * @param {number=} param2.timeToKeepSeconds How long to keep the element visible (in ms) after it should be hidden.
+     *                                           Useful for fade-out effects
+     * @param {string=} param2.attachClass If set, attaches a class while the element is visible
+     * @param {boolean=} param2.trackHover If set, attaches the 'hovered' class if the cursor is above the element. Useful
+     *                                     for fading out the element if its below the cursor for example.
+     */
+    constructor(root, element, { timeToKeepSeconds = 0, attachClass = null, trackHover = false } = {}) {
         /** @type {GameRoot} */
         this.root = root;
 
         /** @type {HTMLElement} */
         this.element = element;
         this.parent = this.element.parentElement;
+        assert(this.parent, "Dom attach created without parent");
 
         this.attachClass = attachClass;
+        this.trackHover = trackHover;
 
         this.timeToKeepSeconds = timeToKeepSeconds;
         this.lastVisibleTime = 0;
@@ -26,8 +40,19 @@ export class DynamicDomAttach {
 
         this.internalIsClassAttached = false;
         this.classAttachTimeout = null;
+
+        // Store the last bounds we computed
+        /** @type {DOMRect} */
+        this.lastComputedBounds = null;
+        this.lastComputedBoundsTime = -1;
+
+        // Track the 'hovered' class
+        this.trackedIsHovered = new TrackedState(this.setIsHoveredClass, this);
     }
 
+    /**
+     * Internal method to attach the element
+     */
     internalAttach() {
         if (!this.attached) {
             this.parent.appendChild(this.element);
@@ -36,6 +61,9 @@ export class DynamicDomAttach {
         }
     }
 
+    /**
+     * Internal method to detach the element
+     */
     internalDetach() {
         if (this.attached) {
             assert(this.element.parentElement === this.parent, "Invalid parent #2");
@@ -44,14 +72,50 @@ export class DynamicDomAttach {
         }
     }
 
+    /**
+     * Returns whether the element is currently attached
+     */
     isAttached() {
         return this.attached;
     }
 
+    /**
+     * Actually sets the 'hovered' class
+     * @param {boolean} isHovered
+     */
+    setIsHoveredClass(isHovered) {
+        this.element.classList.toggle("hovered", isHovered);
+    }
+
+    /**
+     * Call this every frame, and the dom attach class will take care of
+     * everything else
+     * @param {boolean} isVisible Whether the element should currently be visible or not
+     */
     update(isVisible) {
         if (isVisible) {
             this.lastVisibleTime = this.root ? this.root.time.realtimeNow() : 0;
             this.internalAttach();
+
+            if (this.trackHover && this.root) {
+                let bounds = this.lastComputedBounds;
+
+                // Recompute bounds only once in a while
+                if (!bounds || this.root.time.realtimeNow() - this.lastComputedBoundsTime > 1.0) {
+                    bounds = this.lastComputedBounds = this.element.getBoundingClientRect();
+                    this.lastComputedBoundsTime = this.root.time.realtimeNow();
+                }
+
+                const mousePos = this.root.app.mousePosition;
+                if (mousePos) {
+                    this.trackedIsHovered.set(
+                        mousePos.x > bounds.left &&
+                            mousePos.x < bounds.right &&
+                            mousePos.y > bounds.top &&
+                            mousePos.y < bounds.bottom
+                    );
+                }
+            }
         } else {
             if (!this.root || this.root.time.realtimeNow() - this.lastVisibleTime >= this.timeToKeepSeconds) {
                 this.internalDetach();

src/js/game/hud/parts/building_placer.js

@@ -55,7 +55,7 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
         this.signals.variantChanged.add(this.rerenderVariants, this);
         this.root.hud.signals.buildingSelectedForPlacement.add(this.startSelection, this);
 
-        this.domAttach = new DynamicDomAttach(this.root, this.element, {});
+        this.domAttach = new DynamicDomAttach(this.root, this.element, { trackHover: true });
         this.variantsAttach = new DynamicDomAttach(this.root, this.variantsElement, {});
 
         this.currentInterpolatedCornerTile = new Vector();

src/js/game/hud/parts/interactive_tutorial.js

@@ -48,7 +48,7 @@ export class HUDInteractiveTutorial extends BaseHUDPart {
     }
 
     initialize() {
-        this.domAttach = new DynamicDomAttach(this.root, this.element);
+        this.domAttach = new DynamicDomAttach(this.root, this.element, { trackHover: true });
         this.currentHintId = new TrackedState(this.onHintChanged, this);
     }
 

src/js/game/hud/parts/keybinding_overlay.js

@@ -28,8 +28,6 @@ const ADDER_TOKEN = "+";
  */
 
 export class HUDKeybindingOverlay extends BaseHUDPart {
-    initialize() {}
-
     /**
      * HELPER / Returns if there is a building selected for placement
      * @returns {boolean}
@@ -310,6 +308,12 @@ export class HUDKeybindingOverlay extends BaseHUDPart {
         }
     }
 
+    initialize() {
+        this.domAttach = new DynamicDomAttach(this.root, this.element, {
+            trackHover: true,
+        });
+    }
+
     update() {
         for (let i = 0; i < this.keybindings.length; ++i) {
             const handle = this.keybindings[i];
@@ -319,5 +323,8 @@ export class HUDKeybindingOverlay extends BaseHUDPart {
                 handle.cachedElement.classList.toggle("visible", visibility);
             }
         }
+
+        // Required for hover
+        this.domAttach.update(true);
     }
 }