Started working on shurtcuts plugin

client/src/index.ts

@@ -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"
         }));
     });

client/src/plugins/helloworld/pluginhelloworld.ts

@@ -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" );
+        }
+
+    }
+
 }

client/src/shortcut/shortcutmanager.ts

@@ -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 );
+    }
+
 }