Started working on shurtcuts plugin

This commit is contained in:
PeekabooSteam 2023-09-05 09:43:36 +01:00
parent a99b85e646
commit 803f9a7fd6
3 changed files with 92 additions and 3 deletions

View File

@ -187,10 +187,12 @@ function setupEvents( indexApp:OlympusApp ) {
[ "KeyW", "KeyA", "KeyS", "KeyD", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown" ].forEach( code => {
shortcutManager.add( `pan${code}keydown`, new ShortcutKeyboard({
"altKey": false,
"callback": ( ev:KeyboardEvent ) => {
getMap().handleMapPanning(ev);
},
"code": code,
"ctrlKey": false,
"event": "keydown"
}));
});

View File

@ -1,10 +1,13 @@
import { IndexApp } from "../../indexapp";
import { OlympusApp } from "../../olympusapp";
import { Plugin } from "../../plugin/plugin";
import { ShortcutManager } from "../../shortcut/shortcutmanager";
export class PluginHelloWorld extends Plugin {
#element:HTMLElement;
#shortcutManager:ShortcutManager;
constructor( olympusApp:OlympusApp ) {
super( olympusApp, "HelloWorld" );
@ -13,18 +16,74 @@ export class PluginHelloWorld extends Plugin {
bar: `<div id="shortcut-bar"
style="
background-color:var( --background-steel );
border-radius:var( --border-radius-sm );
border-radius:var( --border-radius-md );
bottom:100px;
color:white;
display:flex;
font-size:12px;
justify-self:center;
line-height:28px;
padding:5px;
position:absolute;
z-index:999;">CTRL: Pin tool | SHIFT: box select tool</div>`
z-index:999;"></div>`
}
document.body.insertAdjacentHTML( "beforeend", templates.bar );
this.#element = <HTMLElement>document.getElementById( "shortcut-bar" );
this.#shortcutManager = this.getOlympusApp().getShortcutManager();
this.#shortcutManager.onKeyDown( () => {
this.#updateText()
});
this.#shortcutManager.onKeyUp( () => {
this.#updateText()
});
this.#updateText();
}
#matches( combo:string[], heldKeys:string[] ) {
if ( combo.length !== heldKeys.length ) {
return false;
}
return combo.every( key => heldKeys.indexOf( key ) > -1 );
}
#updateText() {
const heldKeys = this.#shortcutManager.getKeysBeingHeld();
const combos:Array<object> = [
{
"keys": [],
"text": `[CTRL]: Pin tool | [SHIFT]: box select tool<br />[Mouse1+drag]: Move map | [Mouse2]: Spawn menu `
},
{
"keys": [ "ControlLeft" ],
"text": "Mouse1: drop pin"
},
{
"keys": [ "ShiftLeft" ],
"text": "Mouse1+drag: select units"
}
];
const currentCombo:any = combos.find( (combo:any) => this.#matches( combo.keys, heldKeys ) );
if ( currentCombo ) {
this.#element.innerHTML = currentCombo.text;
this.#element.classList.remove( "hide" );
} else {
this.#element.classList.add( "hide" );
}
}
}

View File

@ -4,10 +4,26 @@ import { Shortcut } from "./shortcut";
export class ShortcutManager extends Manager {
#keysBeingHeld:string[] = [];
#keyDownCallbacks:CallableFunction[] = [];
#keyUpCallbacks:CallableFunction[] = [];
constructor( olympusApp:OlympusApp ) {
super( olympusApp );
document.addEventListener( "keydown", ( ev:KeyboardEvent ) => {
if ( this.#keysBeingHeld.indexOf( ev.code ) < 0 ) {
this.#keysBeingHeld.push( ev.code )
}
this.#keyDownCallbacks.forEach( callback => callback( ev ) );
});
document.addEventListener( "keyup", ( ev:KeyboardEvent ) => {
this.#keysBeingHeld = this.#keysBeingHeld.filter( held => held !== ev.code );
this.#keyUpCallbacks.forEach( callback => callback( ev ) );
});
}
add( name:string, shortcut:Shortcut ) {
@ -15,4 +31,16 @@ export class ShortcutManager extends Manager {
return this;
}
getKeysBeingHeld() {
return this.#keysBeingHeld;
}
onKeyDown( callback:CallableFunction ) {
this.#keyDownCallbacks.push( callback );
}
onKeyUp( callback:CallableFunction ) {
this.#keyUpCallbacks.push( callback );
}
}