Completed airbase element (first panel, spawn panel still to add)

client/src/controls/airbasecontextmenu.ts

@@ -1,16 +1,26 @@
+import { getUnitsManager } from "..";
+import { Airbase } from "../missionhandler/airbase";
 import { ContextMenu } from "./contextmenu";
 
 export class AirbaseContextMenu extends ContextMenu {
-    #airbaseName: string | null = null;
+    #airbase: Airbase | null = null;
 
     constructor(id: string)
     {
         super(id);
     }
 
+    setAirbase(airbase: Airbase)
+    {
+        this.#airbase = airbase;
+        this.setAirbaseName(airbase.getName());
+        this.setAirbaseProperties(airbase.getProperties());
+        this.setAirbaseParkings(airbase.getParkings());
+        this.enableLandButton(getUnitsManager().getSelectedUnitsType() === "Aircraft" && (getUnitsManager().getSelectedUnitsCoalition() === airbase.getCoalition() || airbase.getCoalition() === "neutral"))
+    }
+
     setAirbaseName(airbaseName: string)
     {
-        this.#airbaseName = airbaseName;
         var nameDiv = <HTMLElement>this.getContainer()?.querySelector("#airbase-name");
         if (nameDiv != null)
             nameDiv.innerText = airbaseName; 

client/src/controls/contextmenu.ts

@@ -3,6 +3,8 @@ import { LatLng } from "leaflet";
 export class ContextMenu {
     #container: HTMLElement | null;
     #latlng: LatLng = new LatLng(0, 0);
+    #x: number = 0;
+    #y: number = 0;
 
     constructor(id: string) {
         this.#container = document.getElementById(id);
@@ -12,17 +14,9 @@ export class ContextMenu {
     show(x: number, y: number, latlng: LatLng) {
         this.#latlng = latlng;
         this.#container?.classList.toggle("hide", false);
-        if (this.#container != null) {
-            if (x + this.#container.offsetWidth < window.innerWidth)
-                this.#container.style.left = x + "px";
-            else
-                this.#container.style.left = window.innerWidth - this.#container.offsetWidth + "px";
-
-            if (y + this.#container.offsetHeight < window.innerHeight)
-                this.#container.style.top = y + "px";
-            else
-                this.#container.style.top = window.innerHeight - this.#container.offsetHeight + "px";
-        }
+        this.#x = x;
+        this.#y = y;
+        this.clip();
     }
 
     hide() {
@@ -38,4 +32,19 @@ export class ContextMenu {
     {
         return this.#latlng;
     }
+
+    clip()
+    {
+        if (this.#container != null) {
+            if (this.#x + this.#container.offsetWidth < window.innerWidth)
+                this.#container.style.left = this.#x + "px";
+            else
+                this.#container.style.left = window.innerWidth - this.#container.offsetWidth + "px";
+
+            if (this.#y + this.#container.offsetHeight < window.innerHeight)
+                this.#container.style.top = this.#y + "px";
+            else
+                this.#container.style.top = window.innerHeight - this.#container.offsetHeight + "px";
+        }
+    }
 }

client/src/controls/mapcontextmenu.ts

@@ -45,6 +45,7 @@ export class MapContextMenu extends ContextMenu {
             this.#resetAircraftType();
             this.#resetGroundUnitRole();
             this.#resetGroundUnitType();
+            this.clip();
         })
 
         document.addEventListener("contextMenuDeployAircraft", () => {
@@ -88,6 +89,7 @@ export class MapContextMenu extends ContextMenu {
             this.#aircraftTypeDropdown.setOptions(aircraftDatabase.getLabelsByRole(role));
             this.#aircraftTypeDropdown.selectValue(0);
         }
+        this.clip();
     }
 
     #resetAircraftRole() {
@@ -96,6 +98,7 @@ export class MapContextMenu extends ContextMenu {
         this.#aircraftRoleDropdown.reset();
         this.#aircraftTypeDropdown.reset();
         this.#aircraftRoleDropdown.setOptions(aircraftDatabase.getRoles());
+        this.clip();
     }
 
     #setAircraftType(label: string)
@@ -114,6 +117,7 @@ export class MapContextMenu extends ContextMenu {
                 image.classList.toggle("hide", false); 
             }
         }
+        this.clip();
     }
 
     #resetAircraftType() {
@@ -121,6 +125,7 @@ export class MapContextMenu extends ContextMenu {
         (<HTMLButtonElement>this.getContainer()?.querySelector("#loadout-list")).replaceChildren();
         this.#aircraftLoadoutDropdown.reset();
         (<HTMLImageElement>this.getContainer()?.querySelector("#unit-image")).classList.toggle("hide", true);
+        this.clip();
     }
 
     #setAircraftLoadout(loadoutName: string)
@@ -143,6 +148,7 @@ export class MapContextMenu extends ContextMenu {
                 )
             }
         }
+        this.clip();
     }
 
     /********* Ground unit spawn menu *********/
@@ -155,6 +161,7 @@ export class MapContextMenu extends ContextMenu {
             this.#groundUnitTypeDropdown.setOptions(groundUnitsDatabase.getLabelsByRole(role));
             this.#groundUnitTypeDropdown.selectValue(0);
         }
+        this.clip();
     }
 
     #resetGroundUnitRole() {
@@ -163,6 +170,7 @@ export class MapContextMenu extends ContextMenu {
         this.#groundUnitRoleDropdown.reset();
         this.#groundUnitTypeDropdown.reset();
         this.#groundUnitRoleDropdown.setOptions(groundUnitsDatabase.getRoles());
+        this.clip();
     }
 
     #setGroundUnitType(label: string)
@@ -177,9 +185,11 @@ export class MapContextMenu extends ContextMenu {
                 (<HTMLButtonElement>this.getContainer()?.querySelector("#ground-unit-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = false;
             }
         }
+        this.clip();
     }
 
     #resetGroundUnitType() {
         (<HTMLButtonElement>this.getContainer()?.querySelector("#ground-unit-spawn-menu")?.querySelector(".deploy-unit-button")).disabled = true;
+        this.clip();
     }
 }