More plugin design

client/src/index.ts

@@ -162,7 +162,8 @@ function setupEvents( indexApp:OlympusApp ) {
 
     const shortcutManager = indexApp.getShortcutManager();
 
-    shortcutManager .add( "toggleDemo", new ShortcutKeyboard({
+    
+    shortcutManager.add( "toggleDemo", new ShortcutKeyboard({
             "callback": () => {
                 toggleDemoEnabled();
             },
@@ -217,10 +218,6 @@ function setupEvents( indexApp:OlympusApp ) {
         }));
     });
 
-    /* Keyup events */
-
-
-    /* Keydown events */
 
 
     document.addEventListener("closeDialog", (ev: CustomEventInit) => {

client/src/indexapp.ts

@@ -17,7 +17,6 @@ import { UnitsManager } from "./unit/unitsmanager";
 
 export interface IIndexApp extends IOlympusApp {
     "featureSwitches": FeatureSwitches,
-    "map": Map,
     "missionHandler": MissionHandler,
     "panels": IIndexAppPanels,
     "unitsManager": UnitsManager
@@ -42,8 +41,6 @@ export class IndexApp extends OlympusApp {
         
         super( config );
 
-        // this.setMap( config.map );
-
         //  Panels
         this.getPanelsManager()
             .add( "connectionStatus", config.panels.connectionStatus )
@@ -66,7 +63,9 @@ export class IndexApp extends OlympusApp {
         this.#pluginManager = new PluginManager( this );
 
         //  Manual loading for now
-        this.#pluginManager.add( "helloWorld", new PluginHelloWorld( this ) );
+        this.getMap().whenReady( () => {
+            this.#pluginManager.add( "helloWorld", new PluginHelloWorld( this ) );
+        });
     }
 
 

client/src/map/map.ts

@@ -157,7 +157,7 @@ export class Map extends L.Map {
 
         /* Pan interval */
         this.#panInterval = window.setInterval(() => {
-            if (this.#panLeft || this.#panDown || this.#panRight || this.#panLeft)
+            if (this.#panUp || this.#panDown || this.#panRight || this.#panLeft)
                 this.panBy(new L.Point(((this.#panLeft ? -1 : 0) + (this.#panRight ? 1 : 0)) * this.#deafultPanDelta,
                     ((this.#panUp ? -1 : 0) + (this.#panDown ? 1 : 0)) * this.#deafultPanDelta));
         }, 20);

client/src/olympusapp.ts

@@ -8,6 +8,7 @@ import { UnitsManager } from "./unit/unitsmanager";
 
 export interface IOlympusApp {
     featureSwitches: FeatureSwitches;
+    map: Map,
     missionHandler: MissionHandler;
     unitDataTable: UnitDataTable;
     unitsManager: UnitsManager;
@@ -16,7 +17,7 @@ export interface IOlympusApp {
 export abstract class OlympusApp {
 
     #featureSwitches: FeatureSwitches;
-    #map!: Map;
+    #map: Map;
     #missionHandler: MissionHandler;
     #panelsManager: PanelsManager = new PanelsManager( this );
     #shortcutManager: ShortcutManager = new ShortcutManager( this );
@@ -26,6 +27,7 @@ export abstract class OlympusApp {
     constructor( config:IOlympusApp ) {
 
         this.#featureSwitches = config.featureSwitches;
+        this.#map             = config.map;
         this.#missionHandler  = config.missionHandler;
         this.#unitDataTable   = config.unitDataTable;
         this.#unitsManager    = config.unitsManager;
@@ -64,10 +66,6 @@ export abstract class OlympusApp {
         return this.getWeaponsManager;
     }
 
-    setMap( map:Map ) {
-        this.#map = map;
-    }
-
     start() {
 
         //  Start the app

client/src/plugins/helloworld/pluginhelloworld.ts

@@ -1,3 +1,4 @@
+import { IndexApp } from "../../indexapp";
 import { OlympusApp } from "../../olympusapp";
 import { Plugin } from "../../plugin/plugin";
 
@@ -8,28 +9,22 @@ export class PluginHelloWorld extends Plugin {
         
         super( olympusApp, "HelloWorld" );
 
-        const panel = this.getOlympusApp().getPanelsManager().get( "unitControl" );
-        const em    = panel.getEventsManager();
+        const templates = {
+            bar: `<div id="shortcut-bar"
+                        style="
+                            background-color:var( --background-steel );
+                            border-radius:var( --border-radius-sm );
+                            bottom:100px;
+                            color:white;
+                            display:flex;
+                            font-size:12px;
+                            justify-self:center;
+                            padding:5px;
+                            position:absolute;
+                            z-index:999;">CTRL: Pin tool | SHIFT: box select tool</div>`
+        }
 
-        em.on( "show", {
-            "callback": () => {
-                console.log( "Showing unit control panel" );
-            }
-        });
-
-        em.on( "hide", {
-            "callback": () => {
-                console.log( "Hiding unit control panel" );
-            }
-        });
-
-        const tpl = `
-            <div id="hello-world">
-                Hello world!
-            </div>
-        `;
-
-        panel.getElement().innerHTML = this.getTemplateParser().render( tpl );
+        document.body.insertAdjacentHTML( "beforeend", templates.bar );
 
     }
 }