Properly hide some hud elements when hovering
This commit is contained in:
parent
87f79a6c25
commit
a24e7b8d33
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -14,6 +14,11 @@
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
transition: opacity 0.1s ease-out;
|
||||
&.hovered {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
> .binding {
|
||||
&:not(.visible) {
|
||||
display: none !important;
|
||||
|
|
|
@ -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)",
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue