Started event handling

client/src/@types/dom.d.ts

@@ -0,0 +1,29 @@
+interface CustomEventMap {
+    "unitSelection":                    CustomEvent<Unit>,  
+    "unitsSelection":                   CustomEvent<Unit[]>,
+    "clearSelection":                   CustomEvent<>,
+    "unitCreation":                     CustomEvent<Unit>,  
+    "unitDeletion":                     CustomEvent<Unit>,  
+    "unitUpdated":                      CustomEvent<Unit>,  
+    "unitMoveCommand":                  CustomEvent<Unit>,
+    "unitAttackCommand":                CustomEvent<Unit>,
+    "unitLandCommand":                  CustomEvent<Unit>,
+    "unitSetAltitudeCommand":           CustomEvent<Unit>,
+    "unitSetSpeedCommand":              CustomEvent<Unit>,
+    "unitSetROECommand":                CustomEvent<Unit>,
+    "unitSetReactionToThreatCommand":   CustomEvent<Unit>,
+    "groupCreation":                    CustomEvent<Unit[]>,
+    "groupDeletion":                    CustomEvent<Unit[]>,
+    "mapStateChanged":                  CustomEvent<string>,
+    "mapContextMenu":                   CustomEvent<>
+}
+
+declare global {
+    interface Document {
+        addEventListener<K extends keyof CustomEventMap>(type: K,
+           listener: (this: Document, ev: CustomEventMap[K]) => void): void;
+        dispatchEvent<K extends keyof CustomEventMap>(ev: CustomEventMap[K]): void;
+    }
+}
+
+export { }; 

client/src/controls/contextmenu.ts

@@ -1,7 +1,7 @@
 import { LatLng } from "leaflet";
 import { getActiveCoalition, setActiveCoalition } from "..";
 
-export class SelectionScroll {
+export class ContextMenu {
     #container: HTMLElement | null;
     #display: string;
 

client/src/controls/selectionwheel.ts

@@ -1,92 +0,0 @@
-import { getActiveCoalition, setActiveCoalition } from "..";
-import { deg2rad } from "../other/utils";
-
-export class SelectionWheel {
-    #container: HTMLElement | null;
-    #display: string;
-
-    constructor(id: string) {
-        this.#container = document.getElementById(id);
-        this.#display = '';
-        if (this.#container != null) {
-            this.#container.querySelector("#coalition-switch")?.addEventListener('change', (e) => this.#onSwitch(e))
-            this.#display = this.#container.style.display;
-            this.hide();
-        }
-    }
-
-    show(x: number, y: number, options: any, showCoalition: boolean) {
-        /* Hide to remove buttons, if present */
-        this.hide();
-
-        if (this.#container != null) {
-            this.#container.style.display = this.#display;
-            this.#container.style.left = x - 110 + "px";
-            this.#container.style.top = y - 110 + "px";
-
-            var angularSize = 360 / options.length;
-            var r = 80;
-
-            /* Create the buttons */
-            for (let id in options) {
-                var button = document.createElement("div");
-                button.classList.add("selection-wheel-button");
-                button.style.left = x - 25 + "px";
-                button.style.top = y - 25 + "px";
-                button.addEventListener('click', (e) => options[id].callback(e));
-                this.#container.appendChild(button);
-                var angle = parseInt(id) * angularSize;
-                button.style.opacity = "1";
-                button.style.left = x + r * Math.sin(deg2rad(angle)) - 25 + "px";
-                button.style.top = y - r * Math.cos(deg2rad(angle)) - 25 + "px";
-
-                var image = document.createElement("img");
-                image.classList.add("selection-wheel-image");
-                image.src = `images/buttons/${options[id].src}`
-                image.title = options[id].tooltip;
-                if ('tint' in options[id]) {
-                    button.style.setProperty('background-color', options[id].tint);
-                    image.style.opacity = "0";
-                }
-                button.appendChild(image);
-            }
-
-            /* Hide the coalition switch if required */
-            var switchContainer = <HTMLElement>this.#container.querySelector("#coalition-switch-container");
-            if (showCoalition == false) {
-                switchContainer.style.display = "none";
-                document.documentElement.style.setProperty('--active-coalition-color', getComputedStyle(this.#container).getPropertyValue("--neutral-coalition-color"));
-            }
-            else {
-                switchContainer.style.display = "block";
-                if (getActiveCoalition() == "blue")
-                    document.documentElement.style.setProperty('--active-coalition-color', getComputedStyle(this.#container).getPropertyValue("--blue-coalition-color"));
-                else
-                    document.documentElement.style.setProperty('--active-coalition-color', getComputedStyle(this.#container).getPropertyValue("--red-coalition-color"));
-            }
-        }
-    }
-
-    hide() {
-        if (this.#container != null) {
-            this.#container.style.display = "none";
-            var buttons = this.#container.querySelectorAll(".selection-wheel-button");
-            for (let child of buttons) {
-                this.#container.removeChild(child);
-            }
-        }
-    }
-
-    #onSwitch(e: any) {
-        if (this.#container != null) {
-            if (e.currentTarget.checked) {
-                document.documentElement.style.setProperty('--active-coalition-color', getComputedStyle(this.#container).getPropertyValue("--red-coalition-color"));
-                setActiveCoalition("red");
-            }
-            else {
-                document.documentElement.style.setProperty('--active-coalition-color', getComputedStyle(this.#container).getPropertyValue("--blue-coalition-color"));
-                setActiveCoalition("blue");
-            }
-        }
-    }
-}

client/src/index.ts

@@ -1,9 +1,8 @@
 import { Map } from "./map/map"
 import { getDataFromDCS } from "./dcs/dcs"
-import { SelectionWheel } from "./controls/selectionwheel";
 import { UnitsManager } from "./units/unitsmanager";
 import { UnitInfoPanel } from "./panels/unitinfopanel";
-import { SelectionScroll } from "./controls/selectionscroll";
+import { ContextMenu } from "./controls/contextmenu";
 import { Dropdown } from "./controls/dropdown";
 import { ConnectionStatusPanel } from "./panels/connectionstatuspanel";
 import { MissionData } from "./missiondata/missiondata";
@@ -14,8 +13,7 @@ import { LogPanel } from "./panels/logpanel";
 
 /* TODO: should this be a class? */
 var map: Map;
-var selectionWheel: SelectionWheel;
-var selectionScroll: SelectionScroll;
+var contextMenu: ContextMenu;
 
 var unitsManager: UnitsManager;
 var missionData: MissionData;
@@ -38,8 +36,7 @@ function setup() {
     unitsManager = new UnitsManager();
     missionData = new MissionData();
 
-    selectionWheel = new SelectionWheel("selection-wheel");
-    selectionScroll = new SelectionScroll("selection-scroll");
+    contextMenu = new ContextMenu("selection-scroll");
    
     unitInfoPanel = new UnitInfoPanel("unit-info-panel");
     unitControlPanel = new UnitControlPanel("unit-control-panel");
@@ -78,12 +75,8 @@ export function getMissionData() {
     return missionData;
 }
 
-export function getSelectionWheel() {
-    return selectionWheel;
-}
-
-export function getSelectionScroll() {
-    return selectionScroll;
+export function getContextMenu() {
+    return contextMenu;
 }
 
 export function getUnitsManager() {

client/src/map/map.ts

@@ -1,8 +1,8 @@
 import * as L from "leaflet"
-import { getSelectionWheel, getSelectionScroll, getUnitsManager, getActiveCoalition, getMouseInfoPanel } from "..";
+import { getContextMenu, getUnitsManager, getActiveCoalition, getMouseInfoPanel } from "..";
 import { spawnAircraft, spawnGroundUnit, spawnSmoke } from "../dcs/dcs";
 import { bearing, distance, zeroAppend } from "../other/utils";
-import { aircraftDatabase, getAircraftLabelsByRole, getLoadoutsByName, getLoadoutNamesByRole, getAircraftNameByLabel } from "../units/aircraftDatabase";
+import { getAircraftLabelsByRole, getLoadoutsByName, getLoadoutNamesByRole, getAircraftNameByLabel } from "../units/aircraftDatabase";
 import { unitTypes } from "../units/unitTypes";
 import { BoxSelect } from "./boxselect";
 
@@ -14,14 +14,14 @@ export interface ClickEvent {
     latlng: L.LatLng;
 }
 
-export interface SpawnEvent extends ClickEvent{
+export interface SpawnEvent extends ClickEvent {
     airbaseName: string | null;
     coalitionID: number | null;
 }
 
 export class Map extends L.Map {
     #state: string;
-    #layer?: L.TileLayer;
+    #layer: L.TileLayer | null = null;
     #preventLeftClick: boolean = false;
     #leftClickTimer: number = 0;
     #measurePoint: L.LatLng | null;
@@ -113,39 +113,30 @@ export class Map extends L.Map {
     /* State machine */
     setState(state: string) {
         this.#state = state;
-
         if (this.#state === "IDLE") {
             L.DomUtil.removeClass(this.getContainer(),'crosshair-cursor-enabled');
         }
         else if (this.#state === "MOVE_UNIT") {
             L.DomUtil.addClass(this.getContainer(),'crosshair-cursor-enabled');
         }
+        document.dispatchEvent(new CustomEvent("mapStateChanged"));
     }
 
     getState() {
         return this.#state;
     }
 
-    /* Selection wheel */
-    showSelectionWheel(e: ClickEvent | SpawnEvent, options: any, showCoalition: boolean) {
-        var x = e.x;
-        var y = e.y;
-        getSelectionWheel().show(x, y, options, showCoalition);
-    }
-
-    hideSelectionWheel() {
-        getSelectionWheel().hide();
-    }
-
     /* Selection scroll */
-    showSelectionScroll(e: ClickEvent | SpawnEvent, title: string, options: any, callback: CallableFunction, showCoalition: boolean = false) {
+    showContextMenu(e: ClickEvent | SpawnEvent, title: string, options: any, callback: CallableFunction, showCoalition: boolean = false) {
         var x = e.x;
         var y = e.y;
-        getSelectionScroll().show(x, y, title, options, callback, showCoalition);
+        getContextMenu().show(x, y, title, options, callback, showCoalition);
+        document.dispatchEvent(new CustomEvent("mapContextMenu"));
     }
 
-    hideSelectionScroll() {
-        getSelectionScroll().hide();
+    hideContextMenu() {
+        getContextMenu().hide();
+        document.dispatchEvent(new CustomEvent("mapContextMenu"));
     }
 
     getMousePosition() {
@@ -156,11 +147,16 @@ export class Map extends L.Map {
         return this.containerPointToLatLng(this.#lastMousePosition);
     }
 
+    /* Spawn from air base */
+    spawnFromAirbase(e: SpawnEvent)
+    {
+        this.#aircraftSpawnMenu(e);
+    }
+
     /* Event handlers */
     #onClick(e: any) {
         if (!this.#preventLeftClick) {
-            this.hideSelectionWheel();
-            this.hideSelectionScroll();
+            this.hideContextMenu();
             if (this.#state === "IDLE") {
                 if (e.originalEvent.ctrlKey)
                     if (!this.#measurePoint)
@@ -179,8 +175,7 @@ export class Map extends L.Map {
             else if (this.#state === "MOVE_UNIT") {
                 this.setState("IDLE");
                 getUnitsManager().deselectAllUnits();
-                this.hideSelectionWheel();
-                this.hideSelectionScroll();
+                this.hideContextMenu();
             }
         }
     }
@@ -190,8 +185,7 @@ export class Map extends L.Map {
     }
 
     #onContextMenu(e: any) {
-        this.hideSelectionWheel();
-        this.hideSelectionScroll();
+        this.hideContextMenu();
         if (this.#state === "IDLE") {
             var spawnEvent: SpawnEvent = {x: e.originalEvent.x, y: e.originalEvent.y, latlng: e.latlng, airbaseName: null, coalitionID: null};
             if (this.#state == "IDLE") {
@@ -201,7 +195,7 @@ export class Map extends L.Map {
                     { "tooltip": "Smoke", "src": "spawnSmoke.png", "callback": () => this.#smokeSpawnMenu(spawnEvent) },
                     //{ "tooltip": "Explosion", "src": "spawnExplosion.png", "callback": () => this.#explosionSpawnMenu(e) }
                 ]
-                this.showSelectionScroll(spawnEvent, "Action", options, () => {}, false);
+                this.showContextMenu(spawnEvent, "Action", options, () => {}, false);
             }
         }
         else if (this.#state === "MOVE_UNIT") {
@@ -265,12 +259,6 @@ export class Map extends L.Map {
             this.#hideMeasureLine();
     }
 
-    /* Spawn from air base */
-    spawnFromAirbase(e: SpawnEvent)
-    {
-        this.#aircraftSpawnMenu(e);
-    }
-
     /* Spawning menus */
     #aircraftSpawnMenu(e: SpawnEvent) {
         var options = [
@@ -284,9 +272,9 @@ export class Map extends L.Map {
             { 'coalition': true, 'tooltip': 'Transport', 'src': 'spawnTransport.png', 'callback': () => this.#selectAircraft(e, "transport") },
         ]
         if (e.airbaseName != null)
-            this.showSelectionScroll(e, "Spawn at " + e.airbaseName, options, () => {}, true);
+            this.showContextMenu(e, "Spawn at " + e.airbaseName, options, () => {}, true);
         else
-            this.showSelectionScroll(e, "Spawn air unit", options, () => {}, true);
+            this.showContextMenu(e, "Spawn air unit", options, () => {}, true);
     }
 
     #groundUnitSpawnMenu(e: SpawnEvent) {
@@ -299,20 +287,19 @@ export class Map extends L.Map {
             {'coalition': true, 'tooltip': 'Radar',      'src': 'spawnRadar.png',    'callback': () => this.#selectGroundUnit(e, "Radar")},
             {'coalition': true, 'tooltip': 'Unarmed',    'src': 'spawnUnarmed.png',  'callback': () => this.#selectGroundUnit(e, "Unarmed")}
         ]
-        this.showSelectionScroll(e, "Spawn ground unit", options, () => {}, true);
+        this.showContextMenu(e, "Spawn ground unit", options, () => {}, true);
     }
 
     #smokeSpawnMenu(e: SpawnEvent) {
-        this.hideSelectionWheel();
-        this.hideSelectionScroll();
+        this.hideContextMenu();
         var options = [
-            {'tooltip': 'Red smoke',      'src': 'spawnSmoke.png',  'callback': () => {this.hideSelectionWheel(); this.hideSelectionScroll(); spawnSmoke('red', e.latlng)}, 'tint': 'red'},
-            {'tooltip': 'White smoke',    'src': 'spawnSmoke.png',  'callback': () => {this.hideSelectionWheel(); this.hideSelectionScroll(); spawnSmoke('white', e.latlng)}, 'tint': 'white'},
-            {'tooltip': 'Blue smoke',     'src': 'spawnSmoke.png',  'callback': () => {this.hideSelectionWheel(); this.hideSelectionScroll(); spawnSmoke('blue', e.latlng)}, 'tint': 'blue'},
-            {'tooltip': 'Green smoke',    'src': 'spawnSmoke.png',  'callback': () => {this.hideSelectionWheel(); this.hideSelectionScroll(); spawnSmoke('green', e.latlng)}, 'tint': 'green'},
-            {'tooltip': 'Orange smoke',   'src': 'spawnSmoke.png',  'callback': () => {this.hideSelectionWheel(); this.hideSelectionScroll(); spawnSmoke('orange', e.latlng)}, 'tint': 'orange'},
+            {'tooltip': 'Red smoke',      'src': 'spawnSmoke.png',  'callback': () => {this.hideContextMenu(); spawnSmoke('red', e.latlng)}, 'tint': 'red'},
+            {'tooltip': 'White smoke',    'src': 'spawnSmoke.png',  'callback': () => {this.hideContextMenu(); spawnSmoke('white', e.latlng)}, 'tint': 'white'},
+            {'tooltip': 'Blue smoke',     'src': 'spawnSmoke.png',  'callback': () => {this.hideContextMenu(); spawnSmoke('blue', e.latlng)}, 'tint': 'blue'},
+            {'tooltip': 'Green smoke',    'src': 'spawnSmoke.png',  'callback': () => {this.hideContextMenu(); spawnSmoke('green', e.latlng)}, 'tint': 'green'},
+            {'tooltip': 'Orange smoke',   'src': 'spawnSmoke.png',  'callback': () => {this.hideContextMenu(); spawnSmoke('orange', e.latlng)}, 'tint': 'orange'},
         ]
-        this.showSelectionScroll(e, "Spawn smoke", options, () => {}, false);
+        this.showContextMenu(e, "Spawn smoke", options, () => {}, false);
     }
 
     #explosionSpawnMenu(e: SpawnEvent) {
@@ -321,12 +308,10 @@ export class Map extends L.Map {
 
     /* Show unit selection for air units */
     #selectAircraft(e: SpawnEvent, role: string) {
-        this.hideSelectionWheel();
-        this.hideSelectionScroll();
+        this.hideContextMenu();
         var options = getAircraftLabelsByRole(role);
-        this.showSelectionScroll(e, "Select aircraft", options, (label: string) => {
-            this.hideSelectionWheel();
-            this.hideSelectionScroll();
+        this.showContextMenu(e, "Select aircraft", options, (label: string) => {
+            this.hideContextMenu();
             var name = getAircraftNameByLabel(label);
             if (name != null)
                 this.#unitSelectPayload(e, name, role);
@@ -335,15 +320,13 @@ export class Map extends L.Map {
 
     /* Show weapon selection for air units */
     #unitSelectPayload(e: SpawnEvent, unitType: string, role: string) {
-        this.hideSelectionWheel();
-        this.hideSelectionScroll();
+        this.hideContextMenu();
         var options = getLoadoutNamesByRole(unitType, role);
         //options = payloadNames[unitType]
         if (options != undefined && options.length > 0) {
             options.sort();
-            this.showSelectionScroll({x: e.x, y: e.y, latlng: e.latlng}, "Select loadout", options, (loadoutName: string) => {
-                this.hideSelectionWheel();
-                this.hideSelectionScroll();
+            this.showContextMenu({x: e.x, y: e.y, latlng: e.latlng}, "Select loadout", options, (loadoutName: string) => {
+                this.hideContextMenu();
                 var loadout = getLoadoutsByName(unitType, loadoutName);
                 spawnAircraft(unitType, e.latlng, getActiveCoalition(), loadout.code, e.airbaseName);
             }, true);
@@ -356,13 +339,11 @@ export class Map extends L.Map {
     /* Show unit selection for ground units */
     #selectGroundUnit(e: any, group: string)
     {
-        this.hideSelectionWheel();
-        this.hideSelectionScroll();
+        this.hideContextMenu();
         var options = unitTypes.vehicles[group];
         options.sort();
-        this.showSelectionScroll(e, "Select ground unit", options, (unitType: string) => {
-            this.hideSelectionWheel();
-            this.hideSelectionScroll();
+        this.showContextMenu(e, "Select ground unit", options, (unitType: string) => {
+            this.hideContextMenu();
             spawnGroundUnit(unitType, e.latlng, getActiveCoalition());
         }, true);
     }

client/src/missiondata/missiondata.ts

@@ -79,7 +79,7 @@ export class MissionData
             options = ["Spawn unit", "Land here"];
         else 
             options = ["Spawn unit"];
-        getMap().showSelectionScroll(e.originalEvent, e.sourceTarget.getName(), options, (option: string) => this.#onAirbaseOptionSelection(e, option), false);
+        getMap().showContextMenu(e.originalEvent, e.sourceTarget.getName(), options, (option: string) => this.#onAirbaseOptionSelection(e, option), false);
         
     }
 
@@ -90,8 +90,7 @@ export class MissionData
         }
         else if (option === "Land here")
         {
-            getMap().hideSelectionWheel();
-            getMap().hideSelectionScroll();
+            getMap().hideContextMenu();
             getUnitsManager().selectedUnitsLandAt(e.latlng);
         }
     }

client/src/units/unit.ts

@@ -118,8 +118,7 @@ export class Unit {
         if ((this.alive || !selected) && this.#selectable && this.#selected != selected) {
             this.#selected = selected;
             this.#marker.setSelected(selected);
-            getUnitsManager().onUnitSelection();
-
+            document.dispatchEvent(new CustomEvent("unitSelection", {detail: this}));
         }
     }
 
@@ -207,11 +206,11 @@ export class Unit {
             'Follow'
         ]
 
-        getMap().showSelectionScroll(e.originalEvent, "Action: " + this.unitName, options, (action: string) => this.#executeAction(action));
+        getMap().showContextMenu(e.originalEvent, "Action: " + this.unitName, options, (action: string) => this.#executeAction(action));
     }
 
     #executeAction(action: string) {
-        getMap().hideSelectionScroll();
+        getMap().hideContextMenu();
         if (action === "Attack")
             getUnitsManager().selectedUnitsAttackUnit(this.ID);
     }

client/src/units/unitsmanager.ts

@@ -13,6 +13,7 @@ export class UnitsManager {
 
         document.addEventListener('copy', () => this.copyUnits());
         document.addEventListener('paste', () => this.pasteUnits());
+        document.addEventListener('unitSelection', () => this.onUnitSelection());
     }
 
     #updateUnitControlPanel() {
@@ -98,13 +99,12 @@ export class UnitsManager {
     onUnitSelection() {
         if (this.getSelectedUnits().length > 0) {
             getMap().setState("MOVE_UNIT");
-            //unitControlPanel.setEnabled(true);
+            document.dispatchEvent(new CustomEvent("unitsSelection", {detail: this.getSelectedUnits()}));
         }
         else {
             getMap().setState("IDLE");
-            //unitControlPanel.setEnabled(false);
+            document.dispatchEvent(new CustomEvent("clearSelection"));
         }
-
         this.#updateUnitControlPanel();
     }