Completed aircraft spawn contextmenu

client/public/stylesheets/contextmenu.css

@@ -2,8 +2,17 @@
     position: absolute;
 }
 
+#contextmenu {
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+    width: 230px;
+    height: fit-content;
+    z-index: 1000;
+}
+
 #aircraft-spawn-menu {
-    height: 191px;
+    height: fit-content;
 }
 
 #active-coalition-label {
@@ -25,16 +34,7 @@
     margin-right: 10px;
 }
 
-.ol-contextmenu {
-    display: flex;
-    flex-direction: column;
-    row-gap: 5px;
-    width: fit-content;
-    height: fit-content;
-    z-index: 1000;
-}
-
-.ol-contextmenu>div:nth-child(2){
+#contextmenu>div:nth-child(2){
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -42,27 +42,27 @@
     padding-right: 0px;
 }
 
-.ol-contextmenu>ul{
+#contextmenu>ul{
     max-height: 200px;
     overflow-x: hidden;
     overflow-y: auto;
 }
 
-.ol-contextmenu .ol-panel {
+#contextmenu .ol-panel {
     width: 100%;
     border-radius: var(--border-radius-sm);
 }
 
-.ol-contextmenu ul {
+#contextmenu ul {
     margin: 0px;
 }
 
-.ol-contextmenu>div:nth-child(3)>button {
+#contextmenu>div:nth-child(3)>button {
     width: 100%;
     text-align: left;
 }
 
-.ol-contextmenu>div:nth-child(3){
+#contextmenu>div:nth-child(3){
     display: flex;
     flex-direction: column;
     
@@ -71,13 +71,13 @@
     row-gap: 5px;
 }
 
-.ol-contextmenu .ol-select-container{
+#contextmenu .ol-select-container{
     width: 100%;
     flex:0 0 auto;
     align-self: stretch;
 }
 
-#deploy-unit-button {
+#contextmenu>div:nth-child(3)>button:last-of-type {
     width: 100%;
     text-align: center;
 }
@@ -145,4 +145,27 @@
 }
 [data-active-coalition=red]#active-coalition-label::after {
     content: "Create red unit";
+}
+
+#loadout-preview {
+    display: flex;
+    flex-direction: row;
+    align-content: space-between;
+    align-items: center;
+    width: 100%;
+    column-gap: 20px;
+}
+
+#loadout-list {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    height: 100%;
+}
+
+#unit-image {
+    width: 100px;
+    filter: invert(100%);
+    margin-top: 10px;
+    margin-bottom: 10px;
 }

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

@@ -16,4 +16,5 @@ interface UnitBlueprint {
     label: string;
     shortLabel: string;
     loadouts: LoadoutBlueprint[];
+    filename: string;
 }

client/src/controls/contextmenu.ts

@@ -28,7 +28,7 @@ export class ContextMenu {
         this.#container = document.getElementById(id);
         this.#container?.querySelector("#context-menu-switch")?.addEventListener('change', (e) => this.#onSwitch(e));
 
-        this.#aircraftRoleDropdown = new Dropdown("role-options", (role: string) => this.#setAircraftRole(role), aircraftDatabase.getRoles());
+        this.#aircraftRoleDropdown = new Dropdown("role-options", (role: string) => this.#setAircraftRole(role));
         this.#aircraftTypeDropdown = new Dropdown("aircraft-options", (type: string) => this.#setAircraftType(type));
         this.#aircraftLoadoutDropdown = new Dropdown("loadout-options", (loadout: string) => this.#setAircraftLoadout(loadout));
         //this.#unitsNumberDropdown = new Dropdown("#units-options", this.#setAircraftType, [""]);
@@ -36,6 +36,9 @@ export class ContextMenu {
         document.addEventListener("contextMenuShow", (e: any) => {
             this.#container?.querySelector("#aircraft-spawn-menu")?.classList.toggle("hide", e.detail.type !== "aircraft");
             this.#container?.querySelector("#unit-spawn-aircraft")?.classList.toggle("is-open", e.detail.type === "aircraft");
+
+            this.#resetAircraftRole();
+            this.#resetAircraftType();
         })
 
         document.addEventListener("contextMenuDeployAircraft", () => {
@@ -77,24 +80,50 @@ export class ContextMenu {
         }
     }
 
+    /********* 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);
         }
     }
 
-    #setAircraftType(type: string)
+    #resetAircraftRole() {
+        (<HTMLButtonElement>this.#container?.querySelector("#deploy-unit-button")).disabled = true;
+        (<HTMLButtonElement>this.#container?.querySelector("#loadout-list")).replaceChildren();
+        this.#aircraftTypeDropdown.reset();
+        this.#aircraftRoleDropdown.setOptions(aircraftDatabase.getRoles());
+    }
+
+    #setAircraftType(label: string)
     {
         if (this.#spawnOptions != null)
         {
-            this.#spawnOptions.type = type;
-            this.#aircraftLoadoutDropdown.setOptions(aircraftDatabase.getLoadoutNamesByRole(type, this.#spawnOptions.role));
+            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("#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)
@@ -104,12 +133,16 @@ export class ContextMenu {
             {
                 this.#spawnOptions.loadout = loadout.code;
                 (<HTMLButtonElement>this.#container?.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;
+                    })
+                )
             }
         }
     }
-
-    #setUnitsNumber(unitsNumber: string)
-    {
-
-    }
 }

client/src/controls/dropdown.ts

@@ -3,21 +3,24 @@ export class Dropdown {
     #options: HTMLElement;
     #value: HTMLElement;
     #callback: CallableFunction;
+    #defaultValue: string;
+    #optionsList: string[] = [];
     
     constructor(ID: string, callback: CallableFunction, options: string[] | null = null)
     {
         this.#element = <HTMLElement>document.getElementById(ID);
-        var element = this.#element;
         this.#options = <HTMLElement>this.#element.querySelector(".ol-select-options");
         this.#value = <HTMLElement>this.#element.querySelector(".ol-select-value");
+        this.#defaultValue = this.#value.innerText;
         this.#callback = callback;
         if (options != null)
             this.setOptions(options);
     }
 
-    setOptions(options: string[])
+    setOptions(optionsList: string[])
     {
-        this.#options.replaceChildren(...options.map((option: string) => {
+        this.#optionsList = optionsList;
+        this.#options.replaceChildren(...optionsList.map((option: string) => {
             var div = document.createElement("div");
             var button = document.createElement("button");
             button.textContent = option;
@@ -29,4 +32,19 @@ export class Dropdown {
             return div;
         }));
     }
+
+    selectValue(idx: number)
+    {
+        if (idx < this.#optionsList.length)
+        {
+            var option = this.#optionsList[idx];
+            this.#value.innerText = option;
+            this.#callback(option);
+        }
+    }
+
+    reset() {
+        this.#options.replaceChildren();
+        this.#value.innerText = this.#defaultValue;
+    }
 }

client/src/other/utils.ts

@@ -54,12 +54,12 @@ export function rad2deg(rad: number) {
 }
 
 
-export function reciprocalHeading( heading:number ): number {
-    
-    if ( heading > 180 ) {
+export function reciprocalHeading(heading: number): number {
+
+    if (heading > 180) {
         return heading - 180;
     }
-    
+
     return heading + 180;
 
 }
@@ -80,4 +80,46 @@ export const zeroPad = function (num: number, places: number) {
         string += "0";
     }
     return string;
+}
+
+
+export function similarity(s1: string, s2: string) {
+    var longer = s1;
+    var shorter = s2;
+    if (s1.length < s2.length) {
+        longer = s2;
+        shorter = s1;
+    }
+    var longerLength = longer.length;
+    if (longerLength == 0) {
+        return 1.0;
+    }
+    return (longerLength - editDistance(longer, shorter)) / longerLength;
+}
+
+export function editDistance(s1: string, s2: string) {
+    s1 = s1.toLowerCase();
+    s2 = s2.toLowerCase();
+
+    var costs = new Array();
+    for (var i = 0; i <= s1.length; i++) {
+        var lastValue = i;
+        for (var j = 0; j <= s2.length; j++) {
+            if (i == 0)
+                costs[j] = j;
+            else {
+                if (j > 0) {
+                    var newValue = costs[j - 1];
+                    if (s1.charAt(i - 1) != s2.charAt(j - 1))
+                        newValue = Math.min(Math.min(newValue, lastValue),
+                            costs[j]) + 1;
+                    costs[j - 1] = lastValue;
+                    lastValue = newValue;
+                }
+            }
+        }
+        if (i > 0)
+            costs[s2.length] = lastValue;
+    }
+    return costs[s2.length];
 }