Merge pull request #474 from Pax1601/460-sam-threat-rings-appear-when-they-shouldnt

460 sam threat rings appear when they shouldnt

client/plugins/databasemanager/src/utils.ts

@@ -264,24 +264,10 @@ export function addLoadoutsScroll(div: HTMLElement, loadouts: LoadoutBlueprint[]
  * @returns The string
  */
 export function arrayToString(array: string[]) {
-    var value = "[";
-    var firstRole = true;
-    array.forEach((role: string) => {
-        value += firstRole? "": ", ";
-        firstRole = false; 
-        value += role;
-    })
-    value += "]";
-    return value;
+    return "[" + array.join( ", " ) + "]";
 }
 
 
 export function stringToArray(input: string) {
-    input = input.replace("[", "").replace("]", "");
-    var values = input.split(",");
-    var result: string[] = [];
-    values.forEach((value: string) => {
-        result.push(value.trim());
-    })
-    return result;
+    return input.match( /(\w)+/g );
 }

client/public/stylesheets/panels/unitinfo.css

@@ -97,14 +97,13 @@
 }
 
 #loadout-items {
-	margin-right: 20px;
 	align-self: center;
-	display: flex;
-	flex-flow: column;
-	row-gap: 8px;
 	column-gap: 8px;
-	max-height: 90px;
-	flex-wrap: wrap;
+	display: flex;
+	flex-flow: column nowrap;
+	max-height: 108px;
+	padding-right:40px;
+	row-gap: 6px;
 }
 
 #loadout-items>* {
@@ -122,7 +121,7 @@
 	display: flex;
 	font-size: 11px;
 	font-weight: bold;
-	padding: 4px 6px;
+	padding: 3px 4px;
 }
 
 #loadout-items>*::after {
@@ -137,7 +136,7 @@
 #fuel-percentage {
 	align-items: center;
 	display: flex;
-	margin-top: auto;
+	margin-top: 8px;
 }
 
 #fuel-percentage::before {

client/src/contextmenus/mapcontextmenu.ts

@@ -18,6 +18,7 @@ export class MapContextMenu extends ContextMenu {
     #groundUnitSpawnMenu: GroundUnitSpawnMenu;
     #navyUnitSpawnMenu: NavyUnitSpawnMenu;
     #coalitionArea: CoalitionArea | null = null;
+    #selectedUnitCategory: string = "";
 
     /**
      * 
@@ -39,9 +40,10 @@ export class MapContextMenu extends ContextMenu {
 
         /* Event listeners */
         document.addEventListener("mapContextMenuShow", (e: any) => {
-            if (this.getVisibleSubMenu() !== e.detail.type)
+            if (this.getVisibleSubMenu() !== e.detail.type) {
                 this.#showSubMenu(e.detail.type);
-            else
+                this.#selectedUnitCategory = e.detail.type;
+            } else
                 this.#hideSubMenus(e.detail.type);
         });
 
@@ -65,9 +67,9 @@ export class MapContextMenu extends ContextMenu {
             }
         });
 
-        document.addEventListener("commandModeOptionsChanged", (e: any) => {
-            //this.#refreshOptions();
-        });
+        // document.addEventListener("commandModeOptionsChanged", (e: any) => {
+        //     //this.#refreshOptions();
+        // });
 
         this.#aircraftSpawnMenu.getContainer().addEventListener("resize", () => this.clip());
         this.#helicopterSpawnMenu.getContainer().addEventListener("resize", () => this.clip());

client/src/controls/unitspawnmenu.ts

@@ -50,6 +50,7 @@ export class UnitSpawnMenu {
     /* Range circle previews */
     #engagementCircle: Circle;
     #acquisitionCircle: Circle;
+    protected showRangeCircles: boolean = false;
 
     constructor(ID: string, unitDatabase: UnitDatabase, orderByRole: boolean) {
         this.#container = document.getElementById(ID) as HTMLElement;
@@ -244,6 +245,10 @@ export class UnitSpawnMenu {
         return this.#container;
     }
 
+    getVisible() {
+        return !this.getContainer().classList.contains( "hide" );
+    }
+
     reset() {
         this.#deployUnitButtonEl.disabled = true;
         this.#unitRoleTypeDropdown.reset();
@@ -286,9 +291,17 @@ export class UnitSpawnMenu {
 
     showCirclesPreviews() {
         this.clearCirclesPreviews();
+
+        if ( !this.showRangeCircles || this.spawnOptions.name === "" || !this.getVisible() ) {
+            return;
+        }
         
-        var acquisitionRange = this.#unitDatabase.getByName(this.spawnOptions.name)?.acquisitionRange ?? 0;
-        var engagementRange = this.#unitDatabase.getByName(this.spawnOptions.name)?.engagementRange ?? 0;
+        let acquisitionRange = this.#unitDatabase.getByName(this.spawnOptions.name)?.acquisitionRange ?? 0;
+        let engagementRange = this.#unitDatabase.getByName(this.spawnOptions.name)?.engagementRange ?? 0;
+
+        if ( acquisitionRange === 0 && engagementRange === 0 ) {
+            return;
+        }
 
         this.#acquisitionCircle.setRadius(acquisitionRange);
         this.#engagementCircle.setRadius(engagementRange);
@@ -569,6 +582,9 @@ export class HelicopterSpawnMenu extends UnitSpawnMenu {
 }
 
 export class GroundUnitSpawnMenu extends UnitSpawnMenu {
+
+    protected showRangeCircles: boolean = true;
+
     /**
      * 
      * @param ID - the ID of the HTML element which will contain the context menu

client/views/panels/unitinfo.ejs

@@ -13,7 +13,7 @@
                         
         <div id="loadout">
             <img id="loadout-silhouette"/>
-            <div id="loadout-items">
+            <div id="loadout-items" class="ol-scrollable">
             </div>
         </div>