Added tags to unit spawn menu

client/public/stylesheets/other/contextmenus.css

@@ -124,6 +124,28 @@
     max-height: 300px;
 }
 
+.ol-tag {
+    background-color: #FFFFFF11;
+    color: #FFFFFFDD;
+    border: 1px solid #FFFFFF55;
+    font-weight: normal;
+    padding: 2px 5px;
+}
+
+/*
+.ol-tag-CA {
+    background-color: #FF000022;
+}
+
+.ol-tag-Radar {
+    background-color: #00FF0022;
+}
+
+.ol-tag-IR {
+    background-color: #0000FF22;
+} 
+*/
+
 .unit-loadout-list {
     min-width: 0;
 }
@@ -225,13 +247,14 @@
     column-gap: 5px;
 }
 
-.unit-label-count-container>div:nth-child(1) {
-    width: 100%;
-    min-width: 0;
+.unit-label-count-container button {
+    display: flex !important;
+    flex-direction: row;
+    align-items: center;
 }
 
-.unit-label-count-container>div:nth-child(2) {
-    font-size: large;
+.unit-label-count-container button>*:nth-child(1) {
+    margin-left: auto;
 }
 
 .unit-loadout-preview {

client/public/themes/olympus/theme.css

@@ -87,4 +87,4 @@
     --unit-fuel-x: 0px;
     --unit-fuel-y: 22px;
     --unit-vvi-width: 4px;
-}
+}

client/src/controls/dropdown.ts

@@ -36,18 +36,37 @@ export class Dropdown {
         return this.#container;
     }
 
-    setOptions(optionsList: string[], sort:""|"string"|"number" = "string") {
-        
-        if ( sort === "number" ) {
-            this.#optionsList = optionsList.sort( (optionA:string, optionB:string) => {
-                const a = parseInt( optionA );
-                const b = parseInt( optionB );
-                if ( a > b )
+    setOptions(optionsList: string[], sort: "" | "string" | "number" | "string+number" = "string") {
+        if (sort === "number") {
+            this.#optionsList = optionsList.sort((optionA: string, optionB: string) => {
+                const a = parseInt(optionA);
+                const b = parseInt(optionB);
+                if (a > b)
                     return 1;
                 else
-                    return ( b > a ) ? -1 : 0;
+                    return (b > a) ? -1 : 0;
             });
-        } else if ( sort === "string" ) {
+        } else if (sort === "string+number") {
+            this.#optionsList = optionsList.sort((optionA: string, optionB: string) => {
+                var regex = /\d+/g;
+                var matchesA = optionA.match(regex);
+                var matchesB = optionB.match(regex);
+                if ((matchesA != null && matchesA?.length > 0) && (matchesB != null && matchesB?.length > 0) && optionA[0] == optionB[0]) {
+                    const a = parseInt(matchesA[0] ?? 0);
+                    const b = parseInt(matchesB[0] ?? 0);
+                    if (a > b)
+                        return 1;
+                    else
+                        return (b > a) ? -1 : 0;
+                } else {
+                    if (optionA > optionB)
+                        return 1;
+                    else
+                        return (optionB > optionA) ? -1 : 0;
+                }
+
+            });
+        } else if (sort === "string") {
             this.#optionsList = optionsList.sort();
         }
 
@@ -169,17 +188,17 @@ export class Dropdown {
     }
 
     #toggle() {
-        this.#container.classList.contains("is-open")? this.close(): this.open();
+        this.#container.classList.contains("is-open") ? this.close() : this.open();
     }
 
     #createElement(defaultText: string | undefined) {
         var div = document.createElement("div");
         div.classList.add("ol-select");
-        
+
         var value = document.createElement("div");
         value.classList.add("ol-select-value");
-        value.innerText = defaultText? defaultText: "";
-        
+        value.innerText = defaultText ? defaultText : "";
+
         var options = document.createElement("div");
         options.classList.add("ol-select-options");
 

client/src/controls/unitspawnmenu.ts

@@ -154,9 +154,28 @@ export class UnitSpawnMenu {
             this.#unitLiveryDropdown.reset();
 
             if (this.#orderByRole)
-                this.#unitLabelDropdown.setOptions(this.#unitDatabase.getByRole(this.spawnOptions.roleType).map((blueprint) => { return blueprint.label }));
+                this.#unitLabelDropdown.setOptions(this.#unitDatabase.getByRole(this.spawnOptions.roleType).map((blueprint) => { return blueprint.label }), "string+number");
             else
-                this.#unitLabelDropdown.setOptions(this.#unitDatabase.getByType(this.spawnOptions.roleType).map((blueprint) => { return blueprint.label }));
+                this.#unitLabelDropdown.setOptions(this.#unitDatabase.getByType(this.spawnOptions.roleType).map((blueprint) => { return blueprint.label }), "string+number");
+
+            /* Add the tags to the options */
+            var elements: HTMLElement[] = [];
+            for (let idx = 0; idx < this.#unitLabelDropdown.getOptionElements().length; idx++) {
+                let element = this.#unitLabelDropdown.getOptionElements()[idx] as HTMLElement;
+                let entry = this.#unitDatabase.getByLabel(element.textContent ?? "");
+                if (entry) {
+                    element.querySelectorAll("button")[0]?.append(...(entry.tags?.split(",").map((tag: string) => {
+                        tag = tag.trim();
+                        let el = document.createElement("div");
+                        el.classList.add("pill", `ol-tag`, `ol-tag-${tag.replace(/[\W_]+/g,"-")}`);
+                        el.textContent = tag;
+                        element.appendChild(el);
+                        return el;
+                    }) ?? []));
+                    elements.push(element);
+                }
+            }
+
             this.#container.dispatchEvent(new Event("resize"));
 
             this.spawnOptions.name = "";

client/src/interfaces.ts

@@ -220,6 +220,7 @@ export interface UnitBlueprint {
     shotsBaseScatter?: number;
     description?: string;
     abilities?: string;
+    tags?: string;
     acquisitionRange?: number;
     engagementRange?: number;
     targetingRange?: number;