Stash commit to open a new branch.

client/package-lock.json

@@ -6179,9 +6179,9 @@
       "dev": true
     },
     "node_modules/nodemon": {
-      "version": "2.0.20",
-      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.20.tgz",
-      "integrity": "sha512-Km2mWHKKY5GzRg6i1j5OxOHQtuvVsgskLfigG25yTtbyfRGn/GNvIbRyOf1PSCKJ2aT/58TiuUsuOU5UToVViw==",
+      "version": "2.0.22",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.22.tgz",
+      "integrity": "sha512-B8YqaKMmyuCO7BowF1Z1/mkPqLk6cs/l63Ojtd6otKjMx47Dq1utxfRxcavH1I7VSaL8n5BUaoutadnsX3AAVQ==",
       "dev": true,
       "dependencies": {
         "chokidar": "^3.5.2",
@@ -6231,9 +6231,9 @@
       "dev": true
     },
     "node_modules/nodemon/node_modules/semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
       "dev": true,
       "bin": {
         "semver": "bin/semver"
@@ -6840,9 +6840,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "dev": true,
       "bin": {
         "semver": "bin/semver.js"
@@ -12508,9 +12508,9 @@
       "dev": true
     },
     "nodemon": {
-      "version": "2.0.20",
-      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.20.tgz",
-      "integrity": "sha512-Km2mWHKKY5GzRg6i1j5OxOHQtuvVsgskLfigG25yTtbyfRGn/GNvIbRyOf1PSCKJ2aT/58TiuUsuOU5UToVViw==",
+      "version": "2.0.22",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.22.tgz",
+      "integrity": "sha512-B8YqaKMmyuCO7BowF1Z1/mkPqLk6cs/l63Ojtd6otKjMx47Dq1utxfRxcavH1I7VSaL8n5BUaoutadnsX3AAVQ==",
       "dev": true,
       "requires": {
         "chokidar": "^3.5.2",
@@ -12547,9 +12547,9 @@
           "dev": true
         },
         "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "version": "5.7.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
           "dev": true
         },
         "supports-color": {
@@ -13058,9 +13058,9 @@
       }
     },
     "semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "dev": true
     },
     "send": {

client/package.json

@@ -14,9 +14,9 @@
     "debug": "~2.6.9",
     "ejs": "^3.1.8",
     "express": "~4.16.1",
+    "express-basic-auth": "^1.2.1",
     "morgan": "~1.9.1",
-    "save": "^2.9.0",
-    "express-basic-auth": "^1.2.1"
+    "save": "^2.9.0"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.21.4",

client/src/index.ts

@@ -20,6 +20,9 @@ import { BLUE_COMMANDER, GAME_MASTER, RED_COMMANDER } from "./constants/constant
 import { ServerStatusPanel } from "./panels/serverstatuspanel";
 import { WeaponsManager } from "./weapon/weaponsmanager";
 import { IndexApp } from "./indexapp";
+import { ShortcutKeyboard } from "./shortcut/shortcut";
+import { ShortcutManager } from "./shortcut/shortcutmanager";
+import { OlympusApp } from "./olympusapp";
 
 var map: Map;
 
@@ -86,9 +89,6 @@ function setup() {
         atc.startUpdates();
     }
 
-    /* Setup event handlers */
-    setupEvents();
-
     /* Load the config file */
     getConfig(readConfig);
 
@@ -114,8 +114,9 @@ function setup() {
         "unitDataTable": unitDataTable,
         "unitsManager": unitsManager
     });
-    
-    indexApp.start();
+
+    /* Setup event handlers */
+    setupEvents( indexApp );
 
 }
 
@@ -131,7 +132,7 @@ function readConfig(config: any) {
     }
 }
 
-function setupEvents() {
+function setupEvents( indexApp:OlympusApp ) {
 
     /* Generic clicks */
     document.addEventListener("click", (ev) => {
@@ -158,48 +159,69 @@ function setupEvents() {
         }
     });
 
-    /* Keyup events */
-    document.addEventListener("keyup", ev => {
-        if (keyEventWasInInput(ev)) {
-            return;
-        }
-        switch (ev.code) {
-            case "KeyT":
+
+    const shortcutManager = indexApp.getShortcutManager();
+
+    shortcutManager .add( "toggleDemo", new ShortcutKeyboard({
+            "callback": () => {
                 toggleDemoEnabled();
-                break;
-            case "Quote":
+            },
+            "code": "KeyT"
+        })
+    )
+    .add( "toggleUnitDataTable", new ShortcutKeyboard({
+            "callback": () => {
                 unitDataTable.toggle();
-                break
-            case "Space":
+            },
+            "code": "Quote"
+        })
+    )
+    .add( "togglePause", new ShortcutKeyboard({
+            "callback": () => {
                 setPaused(!getPaused());
-                break;
-            case "KeyW": case "KeyA": case "KeyS": case "KeyD":
-            case "ArrowLeft":  case "ArrowRight": case "ArrowUp": case "ArrowDown":
+            },
+            "code": "space"
+        })
+    );
+
+    [ "KeyW", "KeyA", "KeyS", "KeyD", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown" ].forEach( code => {
+        shortcutManager.add( `pan${code}keydown`, new ShortcutKeyboard({
+            "callback": ( ev:KeyboardEvent ) => {
                 getMap().handleMapPanning(ev);
-                break;
-            case "Digit1": case "Digit2": case "Digit3": case "Digit4": case "Digit5": case "Digit6": case "Digit7": case "Digit8": case "Digit9":     
-                // Using the substring because the key will be invalid when pressing the Shift key
+            },
+            "code": code,
+            "event": "keydown"
+        }));
+    });
+    
+    [ "KeyW", "KeyA", "KeyS", "KeyD", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown" ].forEach( code => {
+        shortcutManager.add( `pan${code}keyup`, new ShortcutKeyboard({
+            "callback": ( ev:KeyboardEvent ) => {
+                getMap().handleMapPanning(ev);
+            },
+            "code": code
+        }));
+    });
+
+    [ "Digit1", "Digit2", "Digit3", "Digit4", "Digit5", "Digit6", "Digit7", "Digit8", "Digit9" ].forEach( code => {
+        shortcutManager.add( `hotgroup${code}`, new ShortcutKeyboard({
+            "callback": ( ev:KeyboardEvent ) => {
                 if (ev.ctrlKey && ev.shiftKey)
                     getUnitsManager().selectedUnitsAddToHotgroup(parseInt(ev.code.substring(5)));
                 else if (ev.ctrlKey && !ev.shiftKey)
                     getUnitsManager().selectedUnitsSetHotgroup(parseInt(ev.code.substring(5)));
                 else
                     getUnitsManager().selectUnitsByHotgroup(parseInt(ev.code.substring(5)));
-                break;
-        }
+            },
+            "code": code
+        }));
     });
 
+    /* Keyup events */
+
+
     /* Keydown events */
-    document.addEventListener("keydown", ev => {
-        if (keyEventWasInInput(ev)) {
-            return;
-        }
-        switch (ev.code) {
-            case "KeyW": case "KeyA": case "KeyS": case "KeyD": case "ArrowLeft": case "ArrowRight": case "ArrowUp": case "ArrowDown":
-                getMap().handleMapPanning(ev);
-                break;
-        }
-    });
+
 
     document.addEventListener("closeDialog", (ev: CustomEventInit) => {
         ev.detail._element.closest(".ol-dialog").classList.add("hide");

client/src/indexapp.ts

@@ -45,13 +45,14 @@ export class IndexApp extends OlympusApp {
         // this.setMap( config.map );
 
         //  Panels
-        this.getPanelsManager().add( "connectionStatus", config.panels.connectionStatus );
-        this.getPanelsManager().add( "hotgroup", config.panels.hotgroup );
-        this.getPanelsManager().add( "log", config.panels.log );
-        this.getPanelsManager().add( "mouseInfo", config.panels.mouseInfo );
-        this.getPanelsManager().add( "serverStatus", config.panels.serverStatus );
-        this.getPanelsManager().add( "unitControl", config.panels.unitControl );
-        this.getPanelsManager().add( "unitInfo", config.panels.unitInfo );
+        this.getPanelsManager()
+            .add( "connectionStatus", config.panels.connectionStatus )
+            .add( "hotgroup", config.panels.hotgroup )
+            .add( "log", config.panels.log )
+            .add( "mouseInfo", config.panels.mouseInfo )
+            .add( "serverStatus", config.panels.serverStatus )
+            .add( "unitControl", config.panels.unitControl )
+            .add( "unitInfo", config.panels.unitInfo );
         
         //  Popup
         this.getPanelsManager().add( "unitPopup", config.panels.infoPopup );

client/src/olympusapp.ts

@@ -3,6 +3,7 @@ import { FeatureSwitches } from "./features/featureswitches";
 import { Map } from "./map/map";
 import { MissionHandler } from "./mission/missionhandler";
 import { PanelsManager } from "./panels/panelsmanager";
+import { ShortcutManager } from "./shortcut/shortcutmanager";
 import { UnitsManager } from "./unit/unitsmanager";
 
 export interface IOlympusApp {
@@ -18,6 +19,7 @@ export abstract class OlympusApp {
     #map!: Map;
     #missionHandler: MissionHandler;
     #panelsManager: PanelsManager = new PanelsManager( this );
+    #shortcutManager: ShortcutManager = new ShortcutManager( this );
     #unitDataTable: UnitDataTable;
     #unitsManager: UnitsManager;
 
@@ -38,10 +40,18 @@ export abstract class OlympusApp {
         return this.#map;
     }
 
+    getMissionHandler() {
+        return this.#missionHandler;
+    }
+
     getPanelsManager() {
         return this.#panelsManager;
     }
 
+    getShortcutManager() {
+        return this.#shortcutManager;
+    }
+
     getUnitDataTable() {
         return this.#unitDataTable;
     }

client/src/other/manager.ts

@@ -29,6 +29,8 @@ export abstract class Manager {
 
         this.#items[ name ] = item;
 
+        return this;
+
     }
 
     get( name:string ) {

client/src/plugin/plugin.ts

@@ -1,12 +1,11 @@
 import { OlympusApp } from "../olympusapp";
-
-export interface PluginInterface {
-}
+const templateParser = require( "ejs" );
 
 export abstract class Plugin {
 
     #olympusApp!:OlympusApp;
     protected name = "";
+    #templateParser:any;
 
     constructor( olympusApp:OlympusApp, pluginName:string ) {
 
@@ -16,8 +15,9 @@ export abstract class Plugin {
             throw new Error( `Plugin names must match regex: ${regex}` );
         }
 
-        this.name        = pluginName;
-        this.#olympusApp = olympusApp;
+        this.name            = pluginName;
+        this.#olympusApp     = olympusApp;
+        this.#templateParser = templateParser;
 
     }
 
@@ -29,4 +29,8 @@ export abstract class Plugin {
         return this.#olympusApp;
     }
 
+    getTemplateParser() {
+        return this.#templateParser;
+    }
+
 }

client/src/plugins/helloworld/pluginhelloworld.ts

@@ -1,8 +1,8 @@
 import { OlympusApp } from "../../olympusapp";
-import { Plugin, PluginInterface } from "../../plugin/plugin";
+import { Plugin } from "../../plugin/plugin";
 
 
-export class PluginHelloWorld extends Plugin implements PluginInterface {
+export class PluginHelloWorld extends Plugin {
 
     constructor( olympusApp:OlympusApp ) {
         
@@ -23,7 +23,13 @@ export class PluginHelloWorld extends Plugin implements PluginInterface {
             }
         });
 
-        //const tpl = new ejs
+        const tpl = `
+            <div id="hello-world">
+                Hello world!
+            </div>
+        `;
+
+        panel.getElement().innerHTML = this.getTemplateParser().render( tpl );
 
     }
 }

client/src/shortcut/shortcut.ts

@@ -0,0 +1,70 @@
+import { keyEventWasInInput } from "../other/utils";
+
+interface IShortcut {
+    altKey?:boolean;
+    callback:CallableFunction;
+    ctrlKey?:boolean;
+    name?:string;
+    shiftKey?:boolean;
+}
+
+interface IShortcutKeyboard extends IShortcut {
+    code:string;
+    event?:"keydown"|"keyup";
+}
+
+interface IShortcutMouse extends IShortcut {
+    button:number;
+    event:"mousedown"|"mouseup";
+}
+
+export abstract class Shortcut {
+
+    #config:IShortcut
+
+    constructor( config:IShortcut ) {
+        this.#config = config;
+    }
+
+    getConfig() {
+        return this.#config;
+    }
+
+}
+
+export class ShortcutKeyboard extends Shortcut {
+
+    constructor( config:IShortcutKeyboard ) {
+
+        config.event = config.event || "keyup";
+        
+        super( config );
+
+        document.addEventListener( config.event, ( ev:any ) => {
+
+            if ( ev instanceof KeyboardEvent === false || keyEventWasInInput( ev )) {
+                return;
+            }
+
+            if ( config.code !== ev.code ) {
+                return;
+            }
+
+            if ( ( ( typeof config.altKey !== "boolean" ) || ( typeof config.altKey === "boolean" && ev.altKey === config.altKey ) )
+                && ( ( typeof config.ctrlKey !== "boolean" ) || ( typeof config.ctrlKey === "boolean" && ev.ctrlKey === config.ctrlKey ) )
+                &&  ( ( typeof config.shiftKey !== "boolean" ) || ( typeof config.shiftKey === "boolean" && ev.shiftKey === config.shiftKey ) ) ) {
+                    config.callback( ev );
+            }
+        });
+
+    }
+
+}
+
+export class ShortcutMouse extends Shortcut {
+
+    constructor( config:IShortcutMouse ) {
+        super( config );
+    }
+
+}

client/src/shortcut/shortcutmanager.ts

@@ -0,0 +1,18 @@
+import { OlympusApp } from "../olympusapp";
+import { Manager } from "../other/manager";
+import { Shortcut } from "./shortcut";
+
+export class ShortcutManager extends Manager {
+
+    constructor( olympusApp:OlympusApp ) {
+        
+        super( olympusApp );
+
+    }
+
+    add( name:string, shortcut:Shortcut ) {
+        super.add( name, shortcut );
+        return this;
+    }
+
+}