From 01b30ccf1241bbd4f5eb8bafc67955eb1f0678ca Mon Sep 17 00:00:00 2001 From: PeekabooSteam Date: Thu, 14 Sep 2023 20:56:34 +0100 Subject: [PATCH] Refined the options a bit. --- .../public/stylesheets/other/controltips.css | 6 +- client/src/mission/airbase.ts | 6 ++ client/src/shortcut/controltips.ts | 95 +++++++++++++++---- 3 files changed, 88 insertions(+), 19 deletions(-) diff --git a/client/public/stylesheets/other/controltips.css b/client/public/stylesheets/other/controltips.css index 38d59cbc..6ed26c79 100644 --- a/client/public/stylesheets/other/controltips.css +++ b/client/public/stylesheets/other/controltips.css @@ -20,14 +20,14 @@ column-gap: 8px; display:flex; justify-items: right; - opacity: .85; + opacity: .9; padding:5px; width:fit-content; } #control-tips-panel > * > .key { - background-color: white; + background-color: var( --background-grey ); border-radius: var( --border-radius-sm ); - color: var( --background-steel ); + color: white; padding:1px 4px; } \ No newline at end of file diff --git a/client/src/mission/airbase.ts b/client/src/mission/airbase.ts index 0534803e..6e85a997 100644 --- a/client/src/mission/airbase.ts +++ b/client/src/mission/airbase.ts @@ -66,6 +66,12 @@ export class Airbase extends CustomMarker { img.onload = () => SVGInjector(img); el.appendChild(img); this.getElement()?.appendChild(el); + el.addEventListener( "mouseover", ( ev ) => { + document.dispatchEvent( new CustomEvent( "airbaseMouseover", { detail: this })); + }); + el.addEventListener( "mouseout", ( ev ) => { + document.dispatchEvent( new CustomEvent( "airbaseMouseout", { detail: this })); + }); el.dataset.coalition = this.#coalition; } diff --git a/client/src/shortcut/controltips.ts b/client/src/shortcut/controltips.ts index 26d93d49..25cff7bf 100644 --- a/client/src/shortcut/controltips.ts +++ b/client/src/shortcut/controltips.ts @@ -7,6 +7,7 @@ export class ControlTips { #element:HTMLElement; #cursorIsHoveringOverUnit:boolean = false; + #cursorIsHoveringOverAirbase:boolean = false; #olympusApp:OlympusApp; #shortcutManager:ShortcutManager; @@ -26,6 +27,16 @@ export class ControlTips { this.#updateTips() }); + document.addEventListener( "airbaseMouseover", ( ev:CustomEventInit ) => { + this.#cursorIsHoveringOverAirbase = true; + this.#updateTips(); + }); + + document.addEventListener( "airbaseMouseout", ( ev:CustomEventInit ) => { + this.#cursorIsHoveringOverAirbase = false; + this.#updateTips(); + }); + document.addEventListener( "unitDeselection", ( ev:CustomEvent ) => { this.#updateTips(); }); @@ -67,14 +78,11 @@ export class ControlTips { { "keys": [], "tips": [ - { - "key": `W/A/S/D`, - "action": `Pan map`, - "showIfUnitSelected": false - }, { "key": `SHIFT`, "action": `Box select`, + "showIfHoveringOverAirbase": false, + "showIfHoveringOverUnit": false, "showIfUnitSelected": false }, { @@ -85,27 +93,73 @@ export class ControlTips { { "key": `Mouse1+drag`, "action": `Move map`, + "showIfHoveringOverAirbase": false, + "showIfHoveringOverUnit": false, "showIfUnitSelected": false }, { "key": `Mouse2`, "action": `Spawn menu`, - "showIfUnitSelected": false + "showIfUnitSelected": false, + "showIfHoveringOverAirbase": false, + "showIfHoveringOverUnit": false + }, + { + "key": `Mouse2`, + "action": `Quick options`, + "showIfUnitSelected": false, + "showIfHoveringOverAirbase": false, + "showIfHoveringOverUnit": true + }, + { + "key": `Mouse2`, + "action": `Airbase menu`, + "showIfUnitSelected": false, + "showIfHoveringOverAirbase": true, + "showIfHoveringOverUnit": false }, { "key": `Mouse2`, "action": `Set first waypoint`, + "showIfHoveringOverAirbase": false, "showIfUnitSelected": true, "unitsMustBeControlled": true }, + { + "key": "CTRL+Mouse2", + "action": "Add waypoint", + "showIfUnitSelected": true, + "showIfHoveringOverAirbase": false, + "unitsMustBeControlled": true + }, + { + "key": `Mouse2 (hold)`, + "action": `Point operations`, + "showIfUnitSelected": true, + "showIfHoveringOverAirbase": false, + "showIfHoveringOverUnit": false, + "unitsMustBeControlled": true + }, + { + "key": "CTRL", + "action": " Pin tool", + "showIfUnitSelected": false, + "showIfHoveringOverAirbase": false, + "showIfHoveringOverUnit": false, + "unitsMustBeControlled": true + }, + { + "key": "CTRL+Mouse2", + "action": " Airbase menu", + "showIfUnitSelected": true, + "showIfHoveringOverAirbase": true, + "unitsMustBeControlled": true + }, { "key": `Delete`, "action": `Delete unit`, + "showIfHoveringOverAirbase": false, "showIfUnitSelected": true - }, - { - "key": "CTRL", - "action": " (more...)" } ] }, @@ -116,18 +170,22 @@ export class ControlTips { "key": `Mouse1`, "action": "Toggle pin", "showIfUnitSelected": false, + "showIfHoveringOverAirbase": false, "showIfHoveringOverUnit": false }, { "key": `Mouse1`, "action": "Toggle selection", "showIfUnitSelected": true, + "showIfHoveringOverAirbase": false, "showIfHoveringOverUnit": true }, { "key": `Mouse2`, "action": `Add waypoint`, - "showIfUnitSelected": true + "showIfHoveringOverAirbase": false, + "showIfUnitSelected": true, + "unitsMustBeControlled": true } ] }, @@ -176,17 +234,22 @@ export class ControlTips { return; } - // console.log( tip.action, "state:", this.#cursorIsHoveringOverUnit, "typeof", typeof tip.showIfHoveringOverUnit, "logic", tip.showIfHoveringOverUnit !== this.#cursorIsHoveringOverUnit ); + if ( typeof tip.showIfHoveringOverAirbase === "boolean" ) { + if ( tip.showIfHoveringOverAirbase !== this.#cursorIsHoveringOverAirbase ) { + return; + } + } - if ( typeof tip.showIfHoveringOverUnit === "boolean" && tip.showIfHoveringOverUnit !== this.#cursorIsHoveringOverUnit ) { - return; + if ( typeof tip.showIfHoveringOverUnit === "boolean" ) { + if ( tip.showIfHoveringOverUnit !== this.#cursorIsHoveringOverUnit ) { + return; + } } element.innerHTML += `
${tip.key}${tip.action}
` }); - - // console.log( "----" ); + }