Merge branch 'v0.1.0' of https://github.com/Pax1601/DCSOlympus into v0.1.0

client/src/controls/airbasecontextmenu.ts

@@ -0,0 +1,9 @@
+import { ContextMenu } from "./contextmenu";
+
+export class AirbaseContextMenu extends ContextMenu {
+    constructor(id: string)
+    {
+        super(id);
+        
+    }
+}

client/src/controls/contextmenu.ts

@@ -1,74 +1,16 @@
 import { LatLng } from "leaflet";
-import { getActiveCoalition, setActiveCoalition } from "..";
-import { ContextMenuOption } from "../@types/dom";
-import { ClickEvent } from "../map/map";
-import { spawnAircraft, spawnGroundUnit } from "../server/server";
-import { aircraftDatabase } from "../units/aircraftdatabase";
-import { groundUnitsDatabase } from "../units/groundunitsdatabase";
-import { Dropdown } from "./dropdown";
-
-export interface SpawnOptions {
-    role: string;
-    type: string;
-    latlng: LatLng;
-    coalition: string;
-    loadout: string | null;
-    airbaseName: string | null;
-}
 
 export class ContextMenu {
     #container: HTMLElement | null;
     #latlng: LatLng = new LatLng(0, 0);
-    #aircraftRoleDropdown: Dropdown;
-    #aircraftTypeDropdown: Dropdown;
-    #aircraftLoadoutDropdown: Dropdown;
-    #groundUnitRoleDropdown: Dropdown;
-    #groundUnitTypeDropdown: Dropdown;
-    #spawnOptions: SpawnOptions = {role: "", type: "", latlng: this.#latlng, loadout: null, coalition: "blue", airbaseName: null};
 
-    constructor(id: string,) {
+    constructor(id: string) {
         this.#container = document.getElementById(id);
-        this.#container?.querySelector("#context-menu-switch")?.addEventListener('change', (e) => this.#onSwitch(e));
-
-        this.#aircraftRoleDropdown = new Dropdown("aircraft-role-options", (role: string) => this.#setAircraftRole(role));
-        this.#aircraftTypeDropdown = new Dropdown("aircraft-type-options", (type: string) => this.#setAircraftType(type));
-        this.#aircraftLoadoutDropdown = new Dropdown("loadout-options", (loadout: string) => this.#setAircraftLoadout(loadout));
-        this.#groundUnitRoleDropdown = new Dropdown("ground-unit-role-options", (role: string) => this.#setGroundUnitRole(role));
-        this.#groundUnitTypeDropdown = new Dropdown("ground-unit-type-options", (type: string) => this.#setGroundUnitType(type));
-
-        document.addEventListener("contextMenuShow", (e: any) => {
-            this.#container?.querySelector("#aircraft-spawn-menu")?.classList.toggle("hide", e.detail.type !== "aircraft");
-            this.#container?.querySelector("#aircraft-spawn-button")?.classList.toggle("is-open", e.detail.type === "aircraft");
-            this.#container?.querySelector("#ground-unit-spawn-menu")?.classList.toggle("hide", e.detail.type !== "ground-unit");
-            this.#container?.querySelector("#ground-unit-spawn-button")?.classList.toggle("is-open", e.detail.type === "ground-unit");
-            this.#container?.querySelector("#smoke-spawn-menu")?.classList.toggle("hide", e.detail.type !== "smoke");
-            this.#container?.querySelector("#smoke-spawn-button")?.classList.toggle("is-open", e.detail.type === "smoke");
-
-            this.#resetAircraftRole();
-            this.#resetAircraftType();
-            this.#resetGroundUnitRole();
-            this.#resetGroundUnitType();
-        })
-
-        document.addEventListener("contextMenuDeployAircraft", () => {
-            this.hide();
-            this.#spawnOptions.coalition = getActiveCoalition();
-            if (this.#spawnOptions)
-                spawnAircraft(this.#spawnOptions);
-        })
-
-        document.addEventListener("contextMenuDeployGroundUnit", () => {
-            this.hide();
-            this.#spawnOptions.coalition = getActiveCoalition();
-            if (this.#spawnOptions)
-                spawnGroundUnit(this.#spawnOptions);
-        })
-
         this.hide();
     }
 
     show(x: number, y: number, latlng: LatLng) {
-        this.#spawnOptions.latlng = latlng;
+        this.#latlng = latlng;
         this.#container?.classList.toggle("hide", false);
         if (this.#container != null) {
             if (x + this.#container.offsetWidth < window.innerWidth)
@@ -87,117 +29,13 @@ export class ContextMenu {
         this.#container?.classList.toggle("hide", true);
     }
 
-    #onSwitch(e: any) {
-        if (this.#container != null) {
-            if (e.srcElement.checked) 
-                setActiveCoalition("red");
-            else 
-                setActiveCoalition("blue");
-        }
-    }
-
-    /********* Aircraft spawn menu *********/
-    #setAircraftRole(role: string)
+    getContainer()
     {
-        if (this.#spawnOptions != null)
-        {
-            this.#spawnOptions.role = role;
-            this.#resetAircraftRole();
-            this.#aircraftTypeDropdown.setOptions(aircraftDatabase.getLabelsByRole(role));
-            this.#aircraftTypeDropdown.selectValue(0);
-        }
+        return this.#container;
     }
 
-    #resetAircraftRole() {
-        (<HTMLButtonElement>this.#container?.querySelector("#aircraft-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = true;
-        (<HTMLButtonElement>this.#container?.querySelector("#loadout-list")).replaceChildren();
-        this.#aircraftRoleDropdown.reset();
-        this.#aircraftTypeDropdown.reset();
-        this.#aircraftRoleDropdown.setOptions(aircraftDatabase.getRoles());
-    }
-
-    #setAircraftType(label: string)
+    getLatLng()
     {
-        if (this.#spawnOptions != null)
-        {
-            this.#resetAircraftType();
-            var type = aircraftDatabase.getNameByLabel(label);
-            if (type != null)
-            {
-                this.#spawnOptions.type = type;
-                this.#aircraftLoadoutDropdown.setOptions(aircraftDatabase.getLoadoutNamesByRole(type, this.#spawnOptions.role));
-                this.#aircraftLoadoutDropdown.selectValue(0);
-                var image = (<HTMLImageElement>this.#container?.querySelector("#unit-image"));
-                image.src = `images/units/${aircraftDatabase.getByLabel(label)?.filename}`;
-                image.classList.toggle("hide", false); 
-            }
-        }
-    }
-
-    #resetAircraftType() {
-        (<HTMLButtonElement>this.#container?.querySelector("#aircraft-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = true;
-        (<HTMLButtonElement>this.#container?.querySelector("#loadout-list")).replaceChildren();
-        this.#aircraftLoadoutDropdown.reset();
-        (<HTMLImageElement>this.#container?.querySelector("#unit-image")).classList.toggle("hide", true);
-    }
-
-    #setAircraftLoadout(loadoutName: string)
-    {
-        if (this.#spawnOptions != null)
-        {
-            var loadout = aircraftDatabase.getLoadoutsByName(this.#spawnOptions.type, loadoutName);
-            if (loadout)
-            {
-                this.#spawnOptions.loadout = loadout.code;
-                (<HTMLButtonElement>this.#container?.querySelector("#aircraft-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = false;
-                var items = loadout.items.map((item: any) => {return `${item.quantity}x ${item.name}`;});
-                items.length == 0? items.push("Empty loadout"): "";
-                (<HTMLButtonElement>this.#container?.querySelector("#loadout-list")).replaceChildren(
-                    ...items.map((item: any) => {
-                        var div = document.createElement('div');
-                        div.innerText = item;
-                        return div;
-                    })
-                )
-            }
-        }
-    }
-
-    /********* Ground unit spawn menu *********/
-    #setGroundUnitRole(role: string)
-    {
-        if (this.#spawnOptions != null)
-        {
-            this.#spawnOptions.role = role;
-            this.#resetGroundUnitRole();
-            this.#groundUnitTypeDropdown.setOptions(groundUnitsDatabase.getLabelsByRole(role));
-            this.#groundUnitTypeDropdown.selectValue(0);
-        }
-    }
-
-    #resetGroundUnitRole() {
-        (<HTMLButtonElement>this.#container?.querySelector("#ground-unit-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = true;
-        (<HTMLButtonElement>this.#container?.querySelector("#loadout-list")).replaceChildren();
-        this.#groundUnitRoleDropdown.reset();
-        this.#groundUnitTypeDropdown.reset();
-        this.#groundUnitRoleDropdown.setOptions(groundUnitsDatabase.getRoles());
-    }
-
-    #setGroundUnitType(label: string)
-    {
-        if (this.#spawnOptions != null)
-        {
-            this.#resetGroundUnitType();
-            var type = groundUnitsDatabase.getNameByLabel(label);
-            if (type != null)
-            {
-                this.#spawnOptions.type = type;
-                (<HTMLButtonElement>this.#container?.querySelector("#ground-unit-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = false;
-            }
-        }
-    }
-
-    #resetGroundUnitType() {
-        (<HTMLButtonElement>this.#container?.querySelector("#ground-unit-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = true;
+        return this.#latlng;
     }
 }

client/src/controls/mapcontextmenu.ts

@@ -0,0 +1,185 @@
+import { LatLng } from "leaflet";
+import { getActiveCoalition, setActiveCoalition } from "..";
+import { spawnAircraft, spawnGroundUnit } from "../server/server";
+import { aircraftDatabase } from "../units/aircraftdatabase";
+import { groundUnitsDatabase } from "../units/groundunitsdatabase";
+import { ContextMenu } from "./contextmenu";
+import { Dropdown } from "./dropdown";
+
+export interface SpawnOptions {
+    role: string;
+    type: string;
+    latlng: LatLng;
+    coalition: string;
+    loadout: string | null;
+    airbaseName: string | null;
+}
+
+export class MapContextMenu extends ContextMenu {
+    #aircraftRoleDropdown: Dropdown;
+    #aircraftTypeDropdown: Dropdown;
+    #aircraftLoadoutDropdown: Dropdown;
+    #groundUnitRoleDropdown: Dropdown;
+    #groundUnitTypeDropdown: Dropdown;
+    #spawnOptions: SpawnOptions = {role: "", type: "", latlng: new LatLng(0, 0), loadout: null, coalition: "blue", airbaseName: null};
+
+    constructor(id: string) {
+        super(id);
+        this.getContainer()?.querySelector("#context-menu-switch")?.addEventListener('change', (e) => this.#onSwitch(e));
+
+        this.#aircraftRoleDropdown = new Dropdown("aircraft-role-options", (role: string) => this.#setAircraftRole(role));
+        this.#aircraftTypeDropdown = new Dropdown("aircraft-type-options", (type: string) => this.#setAircraftType(type));
+        this.#aircraftLoadoutDropdown = new Dropdown("loadout-options", (loadout: string) => this.#setAircraftLoadout(loadout));
+        this.#groundUnitRoleDropdown = new Dropdown("ground-unit-role-options", (role: string) => this.#setGroundUnitRole(role));
+        this.#groundUnitTypeDropdown = new Dropdown("ground-unit-type-options", (type: string) => this.#setGroundUnitType(type));
+
+        document.addEventListener("contextMenuShow", (e: any) => {
+            this.getContainer()?.querySelector("#aircraft-spawn-menu")?.classList.toggle("hide", e.detail.type !== "aircraft");
+            this.getContainer()?.querySelector("#aircraft-spawn-button")?.classList.toggle("is-open", e.detail.type === "aircraft");
+            this.getContainer()?.querySelector("#ground-unit-spawn-menu")?.classList.toggle("hide", e.detail.type !== "ground-unit");
+            this.getContainer()?.querySelector("#ground-unit-spawn-button")?.classList.toggle("is-open", e.detail.type === "ground-unit");
+            this.getContainer()?.querySelector("#smoke-spawn-menu")?.classList.toggle("hide", e.detail.type !== "smoke");
+            this.getContainer()?.querySelector("#smoke-spawn-button")?.classList.toggle("is-open", e.detail.type === "smoke");
+
+            this.#resetAircraftRole();
+            this.#resetAircraftType();
+            this.#resetGroundUnitRole();
+            this.#resetGroundUnitType();
+        })
+
+        document.addEventListener("contextMenuDeployAircraft", () => {
+            this.hide();
+            this.#spawnOptions.coalition = getActiveCoalition();
+            if (this.#spawnOptions)
+                spawnAircraft(this.#spawnOptions);
+        })
+
+        document.addEventListener("contextMenuDeployGroundUnit", () => {
+            this.hide();
+            this.#spawnOptions.coalition = getActiveCoalition();
+            if (this.#spawnOptions)
+                spawnGroundUnit(this.#spawnOptions);
+        })
+
+        this.hide();
+    }
+
+    show(x: number, y: number, latlng: LatLng) {
+        super.show(x, y, latlng);
+        this.#spawnOptions.latlng = latlng;
+    }
+
+    #onSwitch(e: any) {
+        if (this.getContainer() != null) {
+            if (e.srcElement.checked) 
+                setActiveCoalition("red");
+            else 
+                setActiveCoalition("blue");
+        }
+    }
+
+    /********* Aircraft spawn menu *********/
+    #setAircraftRole(role: string)
+    {
+        if (this.#spawnOptions != null)
+        {
+            this.#spawnOptions.role = role;
+            this.#resetAircraftRole();
+            this.#aircraftTypeDropdown.setOptions(aircraftDatabase.getLabelsByRole(role));
+            this.#aircraftTypeDropdown.selectValue(0);
+        }
+    }
+
+    #resetAircraftRole() {
+        (<HTMLButtonElement>this.getContainer()?.querySelector("#aircraft-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = true;
+        (<HTMLButtonElement>this.getContainer()?.querySelector("#loadout-list")).replaceChildren();
+        this.#aircraftRoleDropdown.reset();
+        this.#aircraftTypeDropdown.reset();
+        this.#aircraftRoleDropdown.setOptions(aircraftDatabase.getRoles());
+    }
+
+    #setAircraftType(label: string)
+    {
+        if (this.#spawnOptions != null)
+        {
+            this.#resetAircraftType();
+            var type = aircraftDatabase.getNameByLabel(label);
+            if (type != null)
+            {
+                this.#spawnOptions.type = type;
+                this.#aircraftLoadoutDropdown.setOptions(aircraftDatabase.getLoadoutNamesByRole(type, this.#spawnOptions.role));
+                this.#aircraftLoadoutDropdown.selectValue(0);
+                var image = (<HTMLImageElement>this.getContainer()?.querySelector("#unit-image"));
+                image.src = `images/units/${aircraftDatabase.getByLabel(label)?.filename}`;
+                image.classList.toggle("hide", false); 
+            }
+        }
+    }
+
+    #resetAircraftType() {
+        (<HTMLButtonElement>this.getContainer()?.querySelector("#aircraft-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = true;
+        (<HTMLButtonElement>this.getContainer()?.querySelector("#loadout-list")).replaceChildren();
+        this.#aircraftLoadoutDropdown.reset();
+        (<HTMLImageElement>this.getContainer()?.querySelector("#unit-image")).classList.toggle("hide", true);
+    }
+
+    #setAircraftLoadout(loadoutName: string)
+    {
+        if (this.#spawnOptions != null)
+        {
+            var loadout = aircraftDatabase.getLoadoutsByName(this.#spawnOptions.type, loadoutName);
+            if (loadout)
+            {
+                this.#spawnOptions.loadout = loadout.code;
+                (<HTMLButtonElement>this.getContainer()?.querySelector("#aircraft-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = false;
+                var items = loadout.items.map((item: any) => {return `${item.quantity}x ${item.name}`;});
+                items.length == 0? items.push("Empty loadout"): "";
+                (<HTMLButtonElement>this.getContainer()?.querySelector("#loadout-list")).replaceChildren(
+                    ...items.map((item: any) => {
+                        var div = document.createElement('div');
+                        div.innerText = item;
+                        return div;
+                    })
+                )
+            }
+        }
+    }
+
+    /********* Ground unit spawn menu *********/
+    #setGroundUnitRole(role: string)
+    {
+        if (this.#spawnOptions != null)
+        {
+            this.#spawnOptions.role = role;
+            this.#resetGroundUnitRole();
+            this.#groundUnitTypeDropdown.setOptions(groundUnitsDatabase.getLabelsByRole(role));
+            this.#groundUnitTypeDropdown.selectValue(0);
+        }
+    }
+
+    #resetGroundUnitRole() {
+        (<HTMLButtonElement>this.getContainer()?.querySelector("#ground-unit-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = true;
+        (<HTMLButtonElement>this.getContainer()?.querySelector("#loadout-list")).replaceChildren();
+        this.#groundUnitRoleDropdown.reset();
+        this.#groundUnitTypeDropdown.reset();
+        this.#groundUnitRoleDropdown.setOptions(groundUnitsDatabase.getRoles());
+    }
+
+    #setGroundUnitType(label: string)
+    {
+        if (this.#spawnOptions != null)
+        {
+            this.#resetGroundUnitType();
+            var type = groundUnitsDatabase.getNameByLabel(label);
+            if (type != null)
+            {
+                this.#spawnOptions.type = type;
+                (<HTMLButtonElement>this.getContainer()?.querySelector("#ground-unit-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = false;
+            }
+        }
+    }
+
+    #resetGroundUnitType() {
+        (<HTMLButtonElement>this.getContainer()?.querySelector("#ground-unit-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = true;
+    }
+}

client/src/controls/unitcontextmenu.ts

@@ -0,0 +1,18 @@
+import { ContextMenu } from "./contextmenu";
+
+export class UnitContextMenu extends ContextMenu {
+    constructor(id: string) {
+        super(id);
+    }
+
+    setOptions(options: string[], callback: CallableFunction)
+    {
+        this.getContainer()?.replaceChildren(...options.map((option: string) =>
+        {
+            var button = document.createElement("button");
+            button.innerText = option;
+            button.addEventListener("click", () => callback(option));
+            return (button);
+        }));
+    }
+}

client/src/index.ts

@@ -1,7 +1,6 @@
 import { Map } from "./map/map"
 import { UnitsManager } from "./units/unitsmanager";
 import { UnitInfoPanel } from "./panels/unitinfopanel";
-import { ContextMenu } from "./controls/contextmenu";
 import { ConnectionStatusPanel } from "./panels/connectionstatuspanel";
 import { MissionHandler } from "./missionhandler/missionhandler";
 import { UnitControlPanel } from "./panels/unitcontrolpanel";
@@ -13,7 +12,6 @@ import { LogPanel } from "./panels/logpanel";
 import { getAirbases, getBulllseye as getBulllseyes, getUnits, toggleDemoEnabled } from "./server/server";
 
 var map: Map;
-var contextMenu: ContextMenu;
 
 var unitsManager: UnitsManager;
 var missionHandler: MissionHandler;
@@ -43,9 +41,6 @@ function setup() {
     unitsManager = new UnitsManager();
     missionHandler = new MissionHandler();
 
-    /* Context menus */
-    contextMenu = new ContextMenu("contextmenu");
-
     /* Panels */
     unitInfoPanel = new UnitInfoPanel("unit-info-panel");
     unitControlPanel = new UnitControlPanel("unit-control-panel");
@@ -204,10 +199,6 @@ export function getMissionData() {
     return missionHandler;
 }
 
-export function getContextMenu() {
-    return contextMenu;
-}
-
 export function getUnitsManager() {
     return unitsManager;
 }

client/src/map/map.ts

@@ -1,24 +1,15 @@
 import * as L from "leaflet"
-import { getContextMenu, getUnitsManager } from "..";
+import { getUnitsManager } from "..";
 import { BoxSelect } from "./boxselect";
-import { SpawnOptions } from "../controls/contextmenu";
+import { MapContextMenu, SpawnOptions } from "../controls/mapcontextmenu";
+import { UnitContextMenu } from "../controls/unitcontextmenu";
+import { AirbaseContextMenu } from "../controls/airbasecontextmenu";
 
 export const IDLE = "IDLE";
 export const MOVE_UNIT = "MOVE_UNIT";
 
 L.Map.addInitHook('addHandler', 'boxSelect', BoxSelect);
 
-export interface ClickEvent {
-    x: number;
-    y: number;
-    latlng: L.LatLng;
-}
-
-export interface SpawnEvent extends ClickEvent {
-    airbaseName: string | null;
-    coalitionID: number | null;
-}
-
 export class Map extends L.Map {
     #state: string;
     #layer: L.TileLayer | null = null;
@@ -26,6 +17,10 @@ export class Map extends L.Map {
     #leftClickTimer: number = 0;
     #lastMousePosition: L.Point = new L.Point(0, 0);
 
+    #mapContextMenu: MapContextMenu = new MapContextMenu("map-contextmenu");
+    #unitContextMenu: UnitContextMenu = new UnitContextMenu("unit-contextmenu");
+    #airbaseContextMenu: AirbaseContextMenu = new AirbaseContextMenu("airbase-contextmenu");
+
     constructor(ID: string) {
         /* Init the leaflet map */
         //@ts-ignore
@@ -36,7 +31,6 @@ export class Map extends L.Map {
 
         /* Init the state machine */
         this.#state = IDLE;
-       
 
         /* Register event handles */
         this.on("click", (e: any) => this.#onClick(e));
@@ -112,19 +106,62 @@ export class Map extends L.Map {
         return this.#state;
     }
 
-    /* Context Menu */
-    showContextMenu(e: any, spawnOptions: SpawnOptions | null = null) {
+    /* Context Menus */
+    hideAllContextMenus()
+    {
+        this.hideMapContextMenu();
+        this.hideUnitContextMenu();
+        this.hideAirbaseContextMenu();
+    }
+
+    showMapContextMenu(e: any) {
+        this.hideAllContextMenus();
         var x = e.originalEvent.x;
         var y = e.originalEvent.y;
-        getContextMenu()?.show(x, y, e.latlng);
+        this.#mapContextMenu.show(x, y, e.latlng);
         document.dispatchEvent(new CustomEvent("mapContextMenu"));
     }
 
-    hideContextMenu() {
-        getContextMenu()?.hide();
+    hideMapContextMenu() {
+        this.#mapContextMenu.hide();
         document.dispatchEvent(new CustomEvent("mapContextMenu"));
     }
 
+    getMapContextMenu(){
+        return this.#mapContextMenu;
+    }
+
+    showUnitContextMenu(e: any) {
+        this.hideAllContextMenus();
+        var x = e.originalEvent.x;
+        var y = e.originalEvent.y;
+        this.#unitContextMenu.show(x, y, e.latlng);
+    }
+
+    getUnitContextMenu(){
+        return this.#unitContextMenu;
+    }
+
+    hideUnitContextMenu() {
+        this.#unitContextMenu.hide();
+    }
+
+    showAirbaseContextMenu(e: any) {
+        this.hideAllContextMenus();
+        var x = e.originalEvent.x;
+        var y = e.originalEvent.y;
+        this.#airbaseContextMenu.show(x, y, e.latlng);
+    }
+
+    getAirbaseContextMenu(){
+        return this.#airbaseContextMenu;
+    }
+
+    hideAirbaseContextMenu() {
+        this.#airbaseContextMenu.hide();
+    }
+
+    /* Mouse coordinates */
     getMousePosition() {
         return this.#lastMousePosition;
     }
@@ -134,7 +171,7 @@ export class Map extends L.Map {
     }
 
     /* Spawn from air base */
-    spawnFromAirbase(e: SpawnEvent)
+    spawnFromAirbase(e: any)
     {
         //this.#aircraftSpawnMenu(e);
     }
@@ -142,14 +179,13 @@ export class Map extends L.Map {
     /* Event handlers */
     #onClick(e: any) {
         if (!this.#preventLeftClick) {
-            this.hideContextMenu();
+            this.hideAllContextMenus();
             if (this.#state === IDLE) {
                 
             }
             else if (this.#state === MOVE_UNIT) {
                 this.setState(IDLE);
                 getUnitsManager().deselectAllUnits();
-                this.hideContextMenu();
             }
         }
     }
@@ -159,10 +195,10 @@ export class Map extends L.Map {
     }
 
     #onContextMenu(e: any) {
-        this.hideContextMenu();
+        this.hideMapContextMenu();
         if (this.#state === IDLE) {
             if (this.#state == IDLE) {
-                this.showContextMenu(e);
+                this.showMapContextMenu(e);
             }
         }
         else if (this.#state === MOVE_UNIT) {

client/src/missionhandler/airbase.ts

@@ -10,41 +10,28 @@ export interface AirbaseOptions
 export class Airbase extends L.Marker 
 {
     #name: string = "";
-    #coalitionID: number = -1;
+    #coalition: string = "";
 
     constructor(options: AirbaseOptions)
     {
         super(options.position, { riseOnHover: true });
 
         this.#name = options.name;
-
         var icon = new L.DivIcon({
-            html: `<table class="airbase-marker-container" id="container">
-                    <tr>
-                        <td>
-                            <img class="airbase-marker-image" id="icon" src="${options.src}">
-                            <div class="airbase-marker-name" id="name">${options.name}</div>
-                        </td>
-                    </tr>
-                </table>`, 
-            className: 'airbase-marker'});   // Set the marker, className must be set to avoid white square
+            html: ` <div class="airbase" data-object="airbase" data-coalition="red">
+                        <div class="airbase-marker"> </div>
+                    </div>`, 
+            className: 'leaflet-airbase-marker',
+            iconSize: [63, 63]
+            });   // Set the marker, className must be set to avoid white square
         this.setIcon(icon);
+        
     }
 
-    setCoalitionID(coalitionID: number)
+    setCoalition(coalition: string)
     {
-        this.#coalitionID = coalitionID;
-        var element = this.getElement();
-        if (element != null)
-        {
-            var img = element.querySelector("#icon");
-            if (img != null)
-            {
-                img.classList.toggle("blue", this.#coalitionID == 2);
-                img.classList.toggle("red", this.#coalitionID == 1);
-                img.classList.toggle("neutral", this.#coalitionID == 0);
-            }
-        }
+        this.#coalition = coalition;
+        this.getElement()?.setAttribute("data-coalition", this.#coalition);
     }
 
     getName()
@@ -52,8 +39,8 @@ export class Airbase extends L.Marker
         return this.#name;
     }
 
-    getCoalitionID()
+    getCoalition()
     {
-        return this.#coalitionID;
+        return this.#coalition;
     }
 }

client/src/missionhandler/missionhandler.ts

@@ -1,6 +1,5 @@
 import { Marker, LatLng, Icon } from "leaflet";
 import { getMap, getUnitsManager } from "..";
-import { SpawnEvent } from "../map/map";
 import { Airbase } from "./airbase";
 
 var bullseyeIcons = [
@@ -71,7 +70,8 @@ export class MissionHandler
             }
             else
             {
-                this.#airbasesMarkers[idx].setCoalitionID(airbase.coalition);
+                this.#airbasesMarkers[idx].setLatLng(new LatLng(airbase.lat, airbase.lng));
+                this.#airbasesMarkers[idx].setCoalition(airbase.coalition);
             }
         }
     }
@@ -84,20 +84,21 @@ export class MissionHandler
         else 
             options = ["Spawn unit"];
 
+        getMap().showAirbaseContextMenu(e);
         //getMap().showContextMenu(e.originalEvent, e.sourceTarget.getName(),
         //    options.map((option) => {return {tooltip: option, src: "", callback: (label: string) => {this.#onAirbaseOptionSelection(e, label)}}}, false)
         //)
     }
 
     #onAirbaseOptionSelection(e: any, option: string) {
-        if (option === "Spawn unit") {
-            var spawnEvent: SpawnEvent = {x: e.originalEvent.x, y: e.originalEvent.y, latlng: e.latlng, airbaseName: e.sourceTarget.getName(), coalitionID: e.sourceTarget.getCoalitionID()};
-            getMap().spawnFromAirbase(spawnEvent);
-        }
-        else if (option === "Land here")
-        {
-            getMap().hideContextMenu();
-            getUnitsManager().selectedUnitsLandAt(e.latlng);
-        }
+        //if (option === "Spawn unit") {
+        //    var spawnEvent: SpawnEvent = {x: e.originalEvent.x, y: e.originalEvent.y, latlng: e.latlng, airbaseName: e.sourceTarget.getName(), coalitionID: e.sourceTarget.getCoalitionID()};
+        //    getMap().spawnFromAirbase(spawnEvent);
+        //}
+        //else if (option === "Land here")
+        //{
+        //    getMap().hideContextMenu();
+        //    getUnitsManager().selectedUnitsLandAt(e.latlng);
+        //}
     }
 }

client/src/server/server.ts

@@ -1,6 +1,6 @@
 import * as L from 'leaflet'
 import { setConnected } from '..';
-import { SpawnOptions } from '../controls/contextmenu';
+import { SpawnOptions } from '../controls/mapcontextmenu';
 
 /* Edit here to change server address */
 const REST_ADDRESS = "http://localhost:30000/olympus";

client/src/units/unit.ts

@@ -91,7 +91,7 @@ export class Unit extends Marker {
 
         var icon = new DivIcon({
             html: html,
-            className: 'ol-unit-marker',
+            className: 'leaflet-unit-marker',
             iconAnchor: [0, 0]
         });
         this.setIcon(icon);
@@ -338,14 +338,16 @@ export class Unit extends Marker {
 
     #onContextMenu(e: any) {
         var options = [
-            'Attack',
-            'Follow'
+            'Attack'
         ]
-        //getMap().showContextMenu(e.originalEvent, "Action: " + this.getData().unitName, options.map((option: string) => {return {tooltip: option, src: "", callback: (action: string) => this.#executeAction(action)}}));
+        getMap().showUnitContextMenu(e);
+        getMap().getUnitContextMenu().setOptions(options, (option: string) => {
+            getMap().hideUnitContextMenu();
+            this.#executeAction(option);
+        });
     }
 
     #executeAction(action: string) {
-        getMap().hideContextMenu();
         if (action === "Attack")
             getUnitsManager().selectedUnitsAttackUnit(this.ID);
     }