Properly hide some hud elements when hovering
This commit is contained in:
parent
87f79a6c25
commit
a24e7b8d33
|
@ -18,12 +18,11 @@
|
||||||
background-color: #55585a;
|
background-color: #55585a;
|
||||||
}
|
}
|
||||||
|
|
||||||
pointer-events: all;
|
transition: opacity 0.1s ease-out;
|
||||||
|
&.hovered {
|
||||||
&:hover {
|
opacity: 0.1;
|
||||||
opacity: 10%;
|
|
||||||
.buildingImage {
|
.buildingImage {
|
||||||
opacity: 0%;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -79,6 +78,7 @@
|
||||||
@include S(height, 100px);
|
@include S(height, 100px);
|
||||||
background: top left / 100% 100% no-repeat;
|
background: top left / 100% 100% no-repeat;
|
||||||
@include S(border-radius, $globalBorderRadius);
|
@include S(border-radius, $globalBorderRadius);
|
||||||
|
transition: opacity 0.1s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include StyleBelowWidth(700px) {
|
@include StyleBelowWidth(700px) {
|
||||||
|
|
|
@ -31,7 +31,8 @@
|
||||||
|
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
|
|
||||||
&:hover {
|
transition: opacity 0.1s ease-out;
|
||||||
|
&.hovered {
|
||||||
opacity: 10%;
|
opacity: 10%;
|
||||||
.helperGif {
|
.helperGif {
|
||||||
opacity: 0%;
|
opacity: 0%;
|
||||||
|
@ -57,5 +58,6 @@
|
||||||
@include S(margin-top, 5px);
|
@include S(margin-top, 5px);
|
||||||
@include S(height, 150px);
|
@include S(height, 150px);
|
||||||
background: center center / contain no-repeat;
|
background: center center / contain no-repeat;
|
||||||
|
transition: opacity 0.1s ease-out;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,6 +14,11 @@
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
transition: opacity 0.1s ease-out;
|
||||||
|
&.hovered {
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
> .binding {
|
> .binding {
|
||||||
&:not(.visible) {
|
&:not(.visible) {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
|
|
|
@ -19,6 +19,7 @@ export const CHANGELOG = [
|
||||||
"Updated and added new translations (Thanks to all contributors!)",
|
"Updated and added new translations (Thanks to all contributors!)",
|
||||||
"Added setting to be able to delete buildings while placing (inspired by hexy)",
|
"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)",
|
"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)",
|
"Mark pinned shapes in statistics dialog and show them first (inspired by davidburhans)",
|
||||||
"Added setting to show chunk borders",
|
"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)",
|
"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";
|
import { GameRoot } from "../root";
|
||||||
|
|
||||||
// Automatically attaches and detaches elements from the dom
|
// Automatically attaches and detaches elements from the dom
|
||||||
|
@ -7,15 +8,28 @@ import { GameRoot } from "../root";
|
||||||
// Also attaches a class name if desired
|
// Also attaches a class name if desired
|
||||||
|
|
||||||
export class DynamicDomAttach {
|
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} */
|
/** @type {GameRoot} */
|
||||||
this.root = root;
|
this.root = root;
|
||||||
|
|
||||||
/** @type {HTMLElement} */
|
/** @type {HTMLElement} */
|
||||||
this.element = element;
|
this.element = element;
|
||||||
this.parent = this.element.parentElement;
|
this.parent = this.element.parentElement;
|
||||||
|
assert(this.parent, "Dom attach created without parent");
|
||||||
|
|
||||||
this.attachClass = attachClass;
|
this.attachClass = attachClass;
|
||||||
|
this.trackHover = trackHover;
|
||||||
|
|
||||||
this.timeToKeepSeconds = timeToKeepSeconds;
|
this.timeToKeepSeconds = timeToKeepSeconds;
|
||||||
this.lastVisibleTime = 0;
|
this.lastVisibleTime = 0;
|
||||||
|
@ -26,8 +40,19 @@ export class DynamicDomAttach {
|
||||||
|
|
||||||
this.internalIsClassAttached = false;
|
this.internalIsClassAttached = false;
|
||||||
this.classAttachTimeout = null;
|
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() {
|
internalAttach() {
|
||||||
if (!this.attached) {
|
if (!this.attached) {
|
||||||
this.parent.appendChild(this.element);
|
this.parent.appendChild(this.element);
|
||||||
|
@ -36,6 +61,9 @@ export class DynamicDomAttach {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Internal method to detach the element
|
||||||
|
*/
|
||||||
internalDetach() {
|
internalDetach() {
|
||||||
if (this.attached) {
|
if (this.attached) {
|
||||||
assert(this.element.parentElement === this.parent, "Invalid parent #2");
|
assert(this.element.parentElement === this.parent, "Invalid parent #2");
|
||||||
|
@ -44,14 +72,50 @@ export class DynamicDomAttach {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns whether the element is currently attached
|
||||||
|
*/
|
||||||
isAttached() {
|
isAttached() {
|
||||||
return this.attached;
|
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) {
|
update(isVisible) {
|
||||||
if (isVisible) {
|
if (isVisible) {
|
||||||
this.lastVisibleTime = this.root ? this.root.time.realtimeNow() : 0;
|
this.lastVisibleTime = this.root ? this.root.time.realtimeNow() : 0;
|
||||||
this.internalAttach();
|
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 {
|
} else {
|
||||||
if (!this.root || this.root.time.realtimeNow() - this.lastVisibleTime >= this.timeToKeepSeconds) {
|
if (!this.root || this.root.time.realtimeNow() - this.lastVisibleTime >= this.timeToKeepSeconds) {
|
||||||
this.internalDetach();
|
this.internalDetach();
|
||||||
|
|
|
@ -55,7 +55,7 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
|
||||||
this.signals.variantChanged.add(this.rerenderVariants, this);
|
this.signals.variantChanged.add(this.rerenderVariants, this);
|
||||||
this.root.hud.signals.buildingSelectedForPlacement.add(this.startSelection, 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.variantsAttach = new DynamicDomAttach(this.root, this.variantsElement, {});
|
||||||
|
|
||||||
this.currentInterpolatedCornerTile = new Vector();
|
this.currentInterpolatedCornerTile = new Vector();
|
||||||
|
|
|
@ -48,7 +48,7 @@ export class HUDInteractiveTutorial extends BaseHUDPart {
|
||||||
}
|
}
|
||||||
|
|
||||||
initialize() {
|
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);
|
this.currentHintId = new TrackedState(this.onHintChanged, this);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -28,8 +28,6 @@ const ADDER_TOKEN = "+";
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export class HUDKeybindingOverlay extends BaseHUDPart {
|
export class HUDKeybindingOverlay extends BaseHUDPart {
|
||||||
initialize() {}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* HELPER / Returns if there is a building selected for placement
|
* HELPER / Returns if there is a building selected for placement
|
||||||
* @returns {boolean}
|
* @returns {boolean}
|
||||||
|
@ -310,6 +308,12 @@ export class HUDKeybindingOverlay extends BaseHUDPart {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
initialize() {
|
||||||
|
this.domAttach = new DynamicDomAttach(this.root, this.element, {
|
||||||
|
trackHover: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
update() {
|
update() {
|
||||||
for (let i = 0; i < this.keybindings.length; ++i) {
|
for (let i = 0; i < this.keybindings.length; ++i) {
|
||||||
const handle = this.keybindings[i];
|
const handle = this.keybindings[i];
|
||||||
|
@ -319,5 +323,8 @@ export class HUDKeybindingOverlay extends BaseHUDPart {
|
||||||
handle.cachedElement.classList.toggle("visible", visibility);
|
handle.cachedElement.classList.toggle("visible", visibility);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Required for hover
|
||||||
|
this.domAttach.update(true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue