latest changes for descriptors.

client/src/aic/AICFormation.ts

@@ -0,0 +1,54 @@
+import { AICFormationContextDataInterface, AICFormationDescriptor } from "./AICFormationDescriptor";
+import { AICFormationDescriptorPhrase } from "./AICFormationDescriptorPhrase";
+import { AICFormationDescriptorSection } from "./AICFormationDescriptorSection";
+
+export interface AICFormationInterface {
+    "icon"          : string,
+    "label"         : string,
+    "name"          : string,
+    "numGroups"     : number,
+    "summary"       : string,
+    "unitBreakdown" : string[]
+}
+
+
+
+export abstract class AICFormation {
+
+    "icon"          = "";
+    "label"         = "";
+    "name"          = "";
+    "numGroups"     = 1;
+    "summary"       = "";
+    "unitBreakdown":string[] = []
+
+
+    constructor() {
+
+        this.unitBreakdown = [];
+    }
+
+
+    addToDescriptorPhrase( section: AICFormationDescriptorSection, phrase: AICFormationDescriptorPhrase, contextData: AICFormationContextDataInterface ) {
+        return phrase;
+    }
+
+
+    getDescriptor( contextData: AICFormationContextDataInterface ) {
+
+        return new AICFormationDescriptor().generate( this, contextData );
+
+    }
+
+
+    hasUnitBreakdown() {
+        return this.unitBreakdown.length > 0;
+    }
+
+
+    showFormationNameInDescriptor() {
+        return true;
+    }
+
+
+}

client/src/aic/AICFormation/Azimuth.ts

@@ -0,0 +1,38 @@
+import { AICFormation, AICFormationInterface } from "../AICFormation";
+import { AICFormationContextDataInterface } from "../AICFormationDescriptor";
+import { AICFormationDescriptorSection } from "../AICFormationDescriptorSection";
+import { AICFormationDescriptorComponent } from "../AICFormationDescriptorComponent";
+import { AICFormationDescriptorPhrase } from "../AICFormationDescriptorPhrase";
+
+export class AICFormation_Azimuth extends AICFormation implements AICFormationInterface {
+
+    "icon"          = "azimuth.png";
+    "label"         = "Azimuth";
+    "name"          = "azimuth";
+    "numGroups"     = 2;
+    "summary"       = "Two contacts, side-by-side in a line perpedicular to the perspective.";
+    "unitBreakdown" = [ "<compass> group", "<compass> group" ];
+
+    constructor() {
+
+        super();
+        
+    }
+
+    addToDescriptorPhrase( section: AICFormationDescriptorSection, phrase: AICFormationDescriptorPhrase, contextData: AICFormationContextDataInterface ) {
+
+        switch ( section.name ) {
+
+            case "formation":
+
+                phrase.addComponent( new AICFormationDescriptorComponent( "<distance>" ) );
+                phrase.addComponent( new AICFormationDescriptorComponent( "track <compass>" ) );
+
+        }
+
+        return phrase;
+
+
+    }
+
+}

client/src/aic/AICFormation/Range.ts

@@ -0,0 +1,38 @@
+import { AICFormation, AICFormationInterface } from "../AICFormation";
+import { AICFormationContextDataInterface } from "../AICFormationDescriptor";
+import { AICFormationDescriptorSection } from "../AICFormationDescriptorSection";
+import { AICFormationDescriptorComponent } from "../AICFormationDescriptorComponent";
+import { AICFormationDescriptorPhrase } from "../AICFormationDescriptorPhrase";
+
+export class AICFormation_Range extends AICFormation implements AICFormationInterface {
+
+    "icon"          = "range.png";
+    "label"         = "Range";
+    "name"          = "range";
+    "numGroups"     = 2;
+    "summary"       = "Two contacts, one behind the other";
+    "unitBreakdown" = [ "Lead group", "Trail group" ];
+
+    constructor() {
+
+        super();
+        
+    }
+
+    addToDescriptorPhrase( section: AICFormationDescriptorSection, phrase: AICFormationDescriptorPhrase, contextData: AICFormationContextDataInterface ) {
+
+        switch ( section.name ) {
+
+            case "formation":
+
+                phrase.addComponent( new AICFormationDescriptorComponent( "<distance>" ) );
+                phrase.addComponent( new AICFormationDescriptorComponent( "track <compass>" ) );
+
+
+        }
+
+        return phrase;
+
+    }
+
+}

client/src/aic/AICFormation/Single.ts

@@ -0,0 +1,24 @@
+import { AICFormation, AICFormationInterface } from "../AICFormation";
+import { AICFormationContextDataInterface, AICFormationDescriptor } from "../AICFormationDescriptor";
+
+export class AICFormation_Single extends AICFormation implements AICFormationInterface {
+
+    "icon"          = "single.png";
+    "label"         = "Single";
+    "name"          = "single";
+    "numGroups"     = 1;
+    "summary"       = "One contact on its own";
+    "unitBreakdown" = [];
+
+    constructor() {
+
+        super();
+        
+    }
+
+
+    showFormationNameInDescriptor() {
+        return false;
+    }
+
+}

client/src/aic/AICFormationDescriptor.ts

@@ -0,0 +1,55 @@
+import { AICFormation } from "./AICFormation";
+import { AICFormationDescriptorSection } from "./AICFormationDescriptorSection";
+import { AICFormationDescriptorSection_Formation } from "./AICFormationDescriptorSection/Formation";
+import { AICFormationDescriptorSection_Unit } from "./AICFormationDescriptorSection/Unit";
+import { AICFormationDescriptorSection_NumGroups } from "./AICFormationDescriptorSection/NumGroups";
+import { AICFormationDescriptorSection_Who } from "./AICFormationDescriptorSection/Who";
+
+
+export interface AICFormationContextDataInterface {
+    "aicCallsign"  : string,
+    "bullseyeName" : string,
+    "control"      : "broadcast" | "tactical",
+    "numGroups"    : number
+}
+
+
+export class AICFormationDescriptor {
+
+    #sections:AICFormationDescriptorSection[] = [
+        new AICFormationDescriptorSection_Who(),
+        new AICFormationDescriptorSection_NumGroups(),
+        new AICFormationDescriptorSection_Formation(),
+        new AICFormationDescriptorSection_Unit()
+    ]
+
+    constructor() {
+    }
+
+
+    addSection( section:AICFormationDescriptorSection ) {
+        this.#sections.push( section );
+    }
+
+
+    getSections() {
+        return this.#sections;
+    }
+
+
+    generate( formation:AICFormation, contextData: AICFormationContextDataInterface ) {
+
+        let output:object[] = [];
+
+        for ( const section of this.#sections ) {
+            output.push(
+                section.generate( formation, contextData )
+            );
+        }
+
+        return output;
+
+    }
+
+
+}

client/src/aic/AICFormationDescriptorComponent.ts

@@ -0,0 +1,18 @@
+interface ComponentInterface {
+    "label"    : string;
+    "value"    : string;
+}
+
+export class AICFormationDescriptorComponent implements ComponentInterface {
+
+    label = "(not set)";
+    value = "(not set)";
+
+    constructor( value:any, label?:string ) {
+
+        this.label = label || "(not set)";
+        this.value = value;
+
+    }
+
+}

client/src/aic/AICFormationDescriptorComponent/Distance.ts

@@ -0,0 +1,9 @@
+import { AICFormationDescriptorComponent } from "../AICFormationDescriptorComponent";
+
+export abstract class AICFormactionDescriptorComponent_Distance extends AICFormationDescriptorComponent {
+
+    constructor( value:string, label?:string ) {
+        super( value, label );
+    }
+
+}

client/src/aic/AICFormationDescriptorComponent/Distance/Range.ts

@@ -0,0 +1,9 @@
+import { AICFormactionDescriptorComponent_Distance } from "../Distance";
+
+export class AICFormationDescriptorComponent_Distance_Range extends AICFormactionDescriptorComponent_Distance {
+
+    constructor( value:string, label?:string ) {
+        super( value, label );
+    }
+    
+}

client/src/aic/AICFormationDescriptorPhrase.ts

@@ -0,0 +1,40 @@
+import { AICFormation } from "./AICFormation";
+import { AICFormationContextDataInterface } from "./AICFormationDescriptor";
+import { AICFormationDescriptorComponent } from "./AICFormationDescriptorComponent";
+
+export interface AICFormationDescriptorPhraseInterface {
+    "generate"      : CallableFunction,
+    "label"         : string,
+    "name"          : string
+}
+
+export class AICFormationDescriptorPhrase {
+
+    #components : AICFormationDescriptorComponent[] = [];
+    label       = "";
+    name        = "";
+
+    constructor() {
+    }
+
+
+    addComponent( component:AICFormationDescriptorComponent ) {
+        this.#components.push( component );
+        return this;
+    }
+
+
+
+    getComponents() {
+        return this.#components;
+    }
+
+
+    generate( formation:AICFormation, contextData: AICFormationContextDataInterface ) {
+
+        return this;
+
+    }
+
+
+}

client/src/aic/AICFormationDescriptorSection.ts

@@ -0,0 +1,40 @@
+import { AICFormation } from "./AICFormation";
+import { AICFormationContextDataInterface } from "./AICFormationDescriptor";
+import { AICFormationDescriptorPhrase } from "./AICFormationDescriptorPhrase";
+
+export interface AICFormationDescriptorSectionInterface {
+    "generate"      : CallableFunction,
+    "label"         : string,
+    "name"          : string,
+    "omitSection"   : boolean
+}
+
+export abstract class AICFormationDescriptorSection {
+
+    #phrases : AICFormationDescriptorPhrase[] = [];
+    label       = "";
+    name        = "";
+    omitSection = false;
+
+    constructor() {
+    }
+
+
+    addPhrase( phrase:AICFormationDescriptorPhrase ) {
+        this.#phrases.push( phrase );
+    }
+
+
+    generate( formation:AICFormation, contextData: AICFormationContextDataInterface ) {
+
+        return this;
+
+    }
+
+
+    getPhrases() {
+        return this.#phrases;
+    }
+
+
+}

client/src/aic/AICFormationDescriptorSection/Formation.ts

@@ -0,0 +1,39 @@
+import { AICFormation } from "../AICFormation";
+import { AICFormationContextDataInterface } from "../AICFormationDescriptor";
+import { AICFormationDescriptorSection } from "../AICFormationDescriptorSection";
+import { AICFormationDescriptorComponent } from "../AICFormationDescriptorComponent";
+import { AICFormationDescriptorPhrase } from "../AICFormationDescriptorPhrase";
+
+export class AICFormationDescriptorSection_Formation extends AICFormationDescriptorSection {
+
+    label = "Formation";
+    name  = "formation";
+
+    constructor() {
+        
+        super();
+
+    }
+
+
+    generate( formation:AICFormation, contextData: AICFormationContextDataInterface ) {
+
+        if ( !formation.showFormationNameInDescriptor() ) {
+            this.omitSection = true;
+            return this;
+        }
+
+        let phrase = new AICFormationDescriptorPhrase();
+
+        phrase.addComponent( new AICFormationDescriptorComponent( formation.label, "Formation" ) );
+
+        phrase = formation.addToDescriptorPhrase( this, phrase, contextData );
+
+        this.addPhrase( phrase );
+
+
+        return this;
+
+    }
+
+}

client/src/aic/AICFormationDescriptorSection/NumGroups.ts

@@ -0,0 +1,35 @@
+import { AICFormation } from "../AICFormation";
+import { AICFormationContextDataInterface } from "../AICFormationDescriptor";
+import { AICFormationDescriptorSection } from "../AICFormationDescriptorSection";
+import { AICFormationDescriptorComponent } from "../AICFormationDescriptorComponent";
+import { AICFormationDescriptorPhrase } from "../AICFormationDescriptorPhrase";
+
+export class AICFormationDescriptorSection_NumGroups extends AICFormationDescriptorSection {
+
+    label = "Groups";
+    name  = "numgroups";
+
+    constructor() {
+        
+        super();
+
+    }
+
+
+    generate( formation:AICFormation, contextData: AICFormationContextDataInterface ) {
+
+        let value = "Single group";
+
+        if ( contextData.numGroups > 1 ) {
+            value = contextData.numGroups + " groups";
+        }
+
+        let phrase = new AICFormationDescriptorPhrase();
+        phrase.addComponent( new AICFormationDescriptorComponent( value, "Number of groups" ) );
+        this.addPhrase( phrase );
+
+        return this;
+
+    }
+
+}

client/src/aic/AICFormationDescriptorSection/Unit.ts

@@ -0,0 +1,83 @@
+import { AICFormation } from "../AICFormation";
+import { AICFormationContextDataInterface } from "../AICFormationDescriptor";
+import { AICFormationDescriptorSection } from "../AICFormationDescriptorSection";
+import { AICFormationDescriptorComponent } from "../AICFormationDescriptorComponent";
+import { AICFormationDescriptorPhrase } from "../AICFormationDescriptorPhrase";
+
+interface addUnitInformationInterface {
+    omitTrack?: boolean
+}
+
+export class AICFormationDescriptorSection_Unit extends AICFormationDescriptorSection {
+
+    label = "Unit";
+    name  = "unit";
+
+    constructor() {
+        
+        super();
+
+    }
+
+
+    addUnitInformation( formation:AICFormation, contextData: AICFormationContextDataInterface, phrase: AICFormationDescriptorPhrase, options?:addUnitInformationInterface ) {
+
+        options = options || {};
+
+        const originPoint = ( contextData.control === "broadcast" ) ? contextData.bullseyeName : "BRAA";
+
+        phrase.addComponent( new AICFormationDescriptorComponent( originPoint, "Bearing origin point" ) );
+        phrase.addComponent( new AICFormationDescriptorComponent( "<bearing>", "Bearing" ) );
+        phrase.addComponent( new AICFormationDescriptorComponent( "<range>", "Range" ) );
+        phrase.addComponent( new AICFormationDescriptorComponent( "<altitude>", "Altitude" ) );
+
+        if ( contextData.control === "broadcast" ) {
+            if ( !options.hasOwnProperty( "omitTrack" ) || options.omitTrack !== true ) {
+                phrase.addComponent( new AICFormationDescriptorComponent( "track <compass>", "Tracking" ) );
+            }
+        } else {
+            phrase.addComponent( new AICFormationDescriptorComponent( "[hot|flanking [left|right]|beam <compass>|cold]", "Azimuth" ) );
+        }
+
+        return phrase;
+
+    }
+
+
+    generate( formation:AICFormation, contextData: AICFormationContextDataInterface ) {
+
+        if ( formation.hasUnitBreakdown() ) {
+
+            for ( const [ i, unitRef ] of formation.unitBreakdown.entries() ) {
+
+                let phrase = new AICFormationDescriptorPhrase();
+
+                phrase.addComponent( new AICFormationDescriptorComponent( unitRef, "Unit reference" ) );
+
+                if ( i === 0 ) {
+                    this.addUnitInformation( formation, contextData, phrase, { "omitTrack": true } );
+                } else {
+                    phrase.addComponent( new AICFormationDescriptorComponent( "<altitude>" ) );
+                }
+
+                phrase.addComponent( new AICFormationDescriptorComponent( "hostile" ) );
+
+                this.addPhrase( phrase );
+                
+
+            }
+
+        } else {
+
+            this.addPhrase(
+                this.addUnitInformation( formation, contextData, new AICFormationDescriptorPhrase() )
+            );
+
+        }
+
+        return this;
+
+    }
+
+
+}

client/src/aic/AICFormationDescriptorSection/Who.ts

@@ -0,0 +1,35 @@
+import { AICFormation } from "../AICFormation";
+import { AICFormationContextDataInterface } from "../AICFormationDescriptor";
+import { AICFormationDescriptorSection } from "../AICFormationDescriptorSection";
+import { AICFormationDescriptorComponent } from "../AICFormationDescriptorComponent";
+import { AICFormationDescriptorPhrase } from "../AICFormationDescriptorPhrase";
+
+export class AICFormationDescriptorSection_Who extends AICFormationDescriptorSection {
+
+    label = "Who";
+    name  = "who";
+
+    constructor() {
+        
+        super();
+
+    }
+
+
+    generate( formation:AICFormation, contextData: AICFormationContextDataInterface ) {
+
+        let phrase = new AICFormationDescriptorPhrase();
+
+        if ( contextData.control === "tactical" ) {
+            phrase.addComponent( new AICFormationDescriptorComponent( "<their callsign>", "Their callsign" ) );
+        }
+
+        phrase.addComponent( new AICFormationDescriptorComponent( contextData.aicCallsign, "Your callsign" ) );
+
+        this.addPhrase( phrase );
+
+        return this;
+
+    }
+
+}

client/src/index.ts

@@ -36,6 +36,7 @@ var climbButton: Button;
 var descendButton: Button;
 var userVisibilityButton: Button;
 var aiVisibilityButton: Button;
+var uncontrolledVisibilityButton: Button;
 var weaponVisibilityButton: Button;
 var deadVisibilityButton: Button;
 
@@ -74,12 +75,14 @@ function setup() {
     airspeedSlider = new Slider("airspeed-slider", 0, 100, "kts", (value: number) => getUnitsManager().selectedUnitsSetSpeed(value / 1.94384));
 
     /* Visibility buttons */
-    userVisibilityButton = new Button("user-visibility-button", ["images/buttons/user-full.svg", "images/buttons/user-partial.svg", "images/buttons/user-none.svg", "images/buttons/user-hidden.svg"], () => { });
-    aiVisibilityButton = new Button("ai-visibility-button", ["images/buttons/ai-full.svg", "images/buttons/ai-partial.svg", "images/buttons/ai-none.svg", "images/buttons/ai-hidden.svg"], () => { });
-    weaponVisibilityButton = new Button("weapon-visibility-button", ["images/buttons/weapon-partial.svg", "images/buttons/weapon-none.svg", "images/buttons/weapon-hidden.svg"], () => { });
-    deadVisibilityButton = new Button("dead-visibility-button", ["images/buttons/dead.svg", "images/buttons/dead-hidden.svg"], () => { });
+    userVisibilityButton = new Button("user-visibility-button", ["images/buttons/user-full.svg", "images/buttons/user-partial.svg", "images/buttons/user-none.svg", "images/buttons/user-hidden.svg"], () => { getUnitsManager().forceUpdate() });
+    aiVisibilityButton = new Button("ai-visibility-button", ["images/buttons/ai-full.svg", "images/buttons/ai-partial.svg", "images/buttons/ai-none.svg", "images/buttons/ai-hidden.svg"], () => { getUnitsManager().forceUpdate() });
+    uncontrolledVisibilityButton = new Button("uncontrolled-visibility-button", ["images/buttons/ai-full.svg", "images/buttons/ai-partial.svg", "images/buttons/ai-none.svg", "images/buttons/ai-hidden.svg"], () => { getUnitsManager().forceUpdate() });
+    weaponVisibilityButton = new Button("weapon-visibility-button", ["images/buttons/weapon-partial.svg", "images/buttons/weapon-none.svg", "images/buttons/weapon-hidden.svg"], () => { getUnitsManager().forceUpdate() });
+    deadVisibilityButton = new Button("dead-visibility-button", ["images/buttons/dead.svg", "images/buttons/dead-hidden.svg"], () => { getUnitsManager().forceUpdate() });
 
     aiVisibilityButton.setState(1);
+    uncontrolledVisibilityButton.setState(3);
     weaponVisibilityButton.setState(1);
     deadVisibilityButton.setState(1);
 
@@ -194,6 +197,7 @@ export function getVisibilitySettings() {
     var visibility = {
         user: "",
         ai: "",
+        uncontrolled: "",
         weapon: "",
         dead: ""
     };
@@ -220,6 +224,17 @@ export function getVisibilitySettings() {
             visibility.ai = "hidden"; break;
     }
 
+    switch (uncontrolledVisibilityButton.getState()) {
+        case 0:
+            visibility.uncontrolled = "full"; break;
+        case 1:
+            visibility.uncontrolled = "partial"; break;
+        case 2:
+            visibility.uncontrolled = "none"; break;
+        case 3:
+            visibility.uncontrolled = "hidden"; break;
+    }
+
     switch (weaponVisibilityButton.getState()) {
         case 0:
             visibility.weapon = "partial"; break;

client/src/map/map.ts

@@ -2,7 +2,7 @@ import * as L from "leaflet"
 import { getSelectionWheel, getSelectionScroll, getUnitsManager, getActiveCoalition, getMouseInfoPanel } from "..";
 import { spawnAircraft, spawnGroundUnit, spawnSmoke } from "../dcs/dcs";
 import { bearing, distance, zeroAppend } from "../other/utils";
-import { payloadNames } from "../units/payloadNames";
+import { aircraftDatabase, getAircraftLabelsByRole, getLoadoutsByName, getLoadoutNamesByRole } from "../units/aircraftDatabase";
 import { unitTypes } from "../units/unitTypes";
 import { BoxSelect } from "./boxselect";
 
@@ -278,6 +278,23 @@ export class Map extends L.Map {
     }
 
     /* Spawning menus */
+    #aircraftSpawnMenu(e: SpawnEvent) {
+        var options = [
+            { 'coalition': true, 'tooltip': 'CAP', 'src': 'spawnCAP.png', 'callback': () => this.#selectAircraft(e, "cap") },
+            { 'coalition': true, 'tooltip': 'CAS', 'src': 'spawnCAS.png', 'callback': () => this.#selectAircraft(e, "cas") },
+            { 'coalition': true, 'tooltip': 'Strike', 'src': 'spawnStrike.png', 'callback': () => this.#selectAircraft(e, "strike") },
+            { 'coalition': true, 'tooltip': 'Recce', 'src': 'spawnStrike.png', 'callback': () => this.#selectAircraft(e, "reconnaissance") },
+            { 'coalition': true, 'tooltip': 'Tanker', 'src': 'spawnTanker.png', 'callback': () => this.#selectAircraft(e, "tanker") },
+            { 'coalition': true, 'tooltip': 'AWACS', 'src': 'spawnAWACS.png', 'callback': () => this.#selectAircraft(e, "awacs") },
+            { 'coalition': true, 'tooltip': 'Drone', 'src': 'spawnDrone.png', 'callback': () => this.#selectAircraft(e, "drone") },
+            { 'coalition': true, 'tooltip': 'Transport', 'src': 'spawnTransport.png', 'callback': () => this.#selectAircraft(e, "transport") },
+        ]
+        if (e.airbaseName != null)
+            this.showSelectionScroll(e, "Spawn at " + e.airbaseName, options, () => {}, true);
+        else
+            this.showSelectionScroll(e, "Spawn air unit", options, () => {}, true);
+    }
+
     #groundUnitSpawnMenu(e: SpawnEvent) {
         var options = [
             {'coalition': true, 'tooltip': 'Howitzer',   'src': 'spawnHowitzer.png', 'callback': () => this.#selectGroundUnit(e, "Howitzers")},
@@ -308,50 +325,31 @@ export class Map extends L.Map {
 
     }
 
-    #aircraftSpawnMenu(e: SpawnEvent) {
-        var options = [
-            { 'coalition': true, 'tooltip': 'CAP', 'src': 'spawnCAP.png', 'callback': () => this.#selectAircraft(e, "CAP") },
-            { 'coalition': true, 'tooltip': 'CAS', 'src': 'spawnCAS.png', 'callback': () => this.#selectAircraft(e, "CAS") },
-            { 'coalition': true, 'tooltip': 'Tanker', 'src': 'spawnTanker.png', 'callback': () => this.#selectAircraft(e, "tanker") },
-            { 'coalition': true, 'tooltip': 'AWACS', 'src': 'spawnAWACS.png', 'callback': () => this.#selectAircraft(e, "awacs") },
-            { 'coalition': true, 'tooltip': 'Strike', 'src': 'spawnStrike.png', 'callback': () => this.#selectAircraft(e, "strike") },
-            { 'coalition': true, 'tooltip': 'Drone', 'src': 'spawnDrone.png', 'callback': () => this.#selectAircraft(e, "drone") },
-            { 'coalition': true, 'tooltip': 'Transport', 'src': 'spawnTransport.png', 'callback': () => this.#selectAircraft(e, "transport") },
-        ]
-        if (e.airbaseName != null)
-            this.showSelectionScroll(e, "Spawn at " + e.airbaseName, options, () => {}, true);
-        else
-            this.showSelectionScroll(e, "Spawn air unit", options, () => {}, true);
-    }
-
     /* Show unit selection for air units */
-    #selectAircraft(e: SpawnEvent, group: string) {
+    #selectAircraft(e: SpawnEvent, role: string) {
         this.hideSelectionWheel();
         this.hideSelectionScroll();
-        var options = unitTypes.air[group];
-        if (options != undefined)
-            options.sort();
-        else
-            options = [];
+        var options = getAircraftLabelsByRole(role);
         this.showSelectionScroll(e, "Select aircraft", options, (unitType: string) => {
             this.hideSelectionWheel();
             this.hideSelectionScroll();
-            this.#unitSelectPayload(e, unitType);
+            this.#unitSelectPayload(e, unitType, role);
         }, true);
     }
 
     /* Show weapon selection for air units */
-    #unitSelectPayload(e: SpawnEvent, unitType: string) {
+    #unitSelectPayload(e: SpawnEvent, unitType: string, role: string) {
         this.hideSelectionWheel();
         this.hideSelectionScroll();
-        var options = [];
-        options = payloadNames[unitType]
+        var options = getLoadoutNamesByRole(unitType, role);
+        //options = payloadNames[unitType]
         if (options != undefined && options.length > 0) {
             options.sort();
-            this.showSelectionScroll({x: e.x, y: e.y, latlng: e.latlng}, "Select loadout", options, (payloadName: string) => {
+            this.showSelectionScroll({x: e.x, y: e.y, latlng: e.latlng}, "Select loadout", options, (loadoutName: string) => {
                 this.hideSelectionWheel();
                 this.hideSelectionScroll();
-                spawnAircraft(unitType, e.latlng, getActiveCoalition(), payloadName, e.airbaseName);
+                var loadout = getLoadoutsByName(unitType, loadoutName);
+                spawnAircraft(unitType, e.latlng, getActiveCoalition(), loadout.code, e.airbaseName);
             }, true);
         }
         else {

client/src/units/unit.ts

@@ -12,6 +12,7 @@ var pathIcon = new Icon({
 
 export class Unit {
     ID: number = -1;
+    AI: boolean = false;
     formation: string = "";
     name: string = "";
     unitName: string = "";
@@ -49,6 +50,7 @@ export class Unit {
     #targetsPolylines: Polyline[];
     #marker: UnitMarker;
     #timer: number = 0;
+    #forceUpdate: boolean = false;
 
     static getConstructor(name: string) {
         if (name === "GroundUnit") return GroundUnit;
@@ -76,6 +78,10 @@ export class Unit {
     }
 
     update(response: any) {
+        var updateMarker = false;
+        if (this.latitude != response['latitude'] || this.longitude != response['longitude'] || this.alive != response['alive'] || this.#forceUpdate)
+            updateMarker = true;
+
         for (let entry in response) {
             // @ts-ignore TODO handle better
             this[entry] = response[entry];
@@ -88,7 +94,8 @@ export class Unit {
         /* Dead units can't be selected */
         this.setSelected(this.getSelected() && this.alive)
 
-        this.#updateMarker();
+        if (updateMarker)
+            this.#updateMarker();
 
         this.#clearTargets();
         if (this.getSelected() && this.activePath != null)
@@ -164,6 +171,11 @@ export class Unit {
         return wingmen;
     }
 
+    forceUpdate()
+    {
+        this.#forceUpdate = true;
+    }
+
     #onClick(e: any) {
         this.#timer = setTimeout(() => {
             if (!this.#preventClick) {
@@ -218,6 +230,8 @@ export class Unit {
                 alive: this.alive
             });
         }
+
+        this.#forceUpdate = false;
     }
 
     #drawPath() {
@@ -374,6 +388,9 @@ export class Unit {
 
 export class AirUnit extends Unit {
     getHidden() {
+        if (this.AI == false && getVisibilitySettings().uncontrolled === "hidden")
+            return true
+
         if (this.alive)
         {
             if (this.flags.user && getVisibilitySettings().user === "hidden")
@@ -408,6 +425,9 @@ export class GroundUnit extends Unit {
     }
 
     getHidden() {
+        if (this.AI == false && getVisibilitySettings().uncontrolled === "hidden")
+            return true
+
         if (this.alive)
         {
             if (this.flags.user && getVisibilitySettings().user === "hidden")
@@ -428,6 +448,9 @@ export class NavyUnit extends Unit {
     }
 
     getHidden() {
+        if (this.AI == false && getVisibilitySettings().uncontrolled === "hidden")
+            return true
+            
         if (this.alive)
         {
             if (this.flags.user && getVisibilitySettings().user === "hidden")

client/src/units/unitmarker.ts

@@ -8,6 +8,7 @@ export interface MarkerOptions {
     human: boolean
     coalitionID: number
     type: any
+    AI: boolean
 }
 
 export interface MarkerData {
@@ -21,6 +22,7 @@ export class UnitMarker extends L.Marker {
     #unitName: string
     #name: string
     #human: boolean
+    #AI: boolean
     #alive: boolean = true
     #selected: boolean = false
 
@@ -29,6 +31,7 @@ export class UnitMarker extends L.Marker {
         this.#unitName = options.unitName;
         this.#name = options.name;
         this.#human = options.human;
+        this.#AI = options.AI;
 
         var symbol = new Symbol(this.#computeMarkerCode(options), { size: 25 });
         var img = symbol.asCanvas().toDataURL('image/png');
@@ -91,7 +94,7 @@ export class UnitMarker extends L.Marker {
                 altitudeDiv.style.display = 'none';
                 speedDiv.style.display = 'none';
             }
-            if (this.getVisibility() === "none")
+            if (this.getVisibility() === "none" && nameDiv.style.display != 'none')
                 nameDiv.style.display = 'none';
 
             nameDiv.style.left = (-(nameDiv.offsetWidth - container.offsetWidth) / 2) + "px";
@@ -127,6 +130,10 @@ export class UnitMarker extends L.Marker {
         return this.#human;
     }
 
+    getAI() {
+        return this.#AI;
+    }
+
     getAlive() {
         return this.#alive;
     }
@@ -226,7 +233,7 @@ export class AirUnitMarker extends UnitMarker {
         else if (!this.getAlive())
             return "none";
         else
-            return getVisibilitySettings().ai;
+            return this.getAI()? getVisibilitySettings().ai: getVisibilitySettings().uncontrolled;
     }
 }
 
@@ -247,7 +254,7 @@ export class GroundUnitMarker extends UnitMarker {
         else if (!this.getAlive())
             return "none";
         else
-            return getVisibilitySettings().ai;
+            return this.getAI()? getVisibilitySettings().ai: getVisibilitySettings().uncontrolled;
     }
 }
 
@@ -259,7 +266,7 @@ export class NavyUnitMarker extends UnitMarker {
         if (!this.getAlive())
             return "none";
         else
-            return getVisibilitySettings().ai;
+            return this.getAI()? getVisibilitySettings().ai: getVisibilitySettings().uncontrolled;
     }
 }
 

client/src/units/unitsmanager.ts

@@ -39,7 +39,8 @@ export class UnitsManager {
                 name: data.name,
                 human: data.human,
                 coalitionID: data.coalitionID,
-                type: data.type
+                type: data.type,
+                AI: data.AI
             }
             this.#units[ID] = new constructor(ID, options);
         }
@@ -88,6 +89,12 @@ export class UnitsManager {
         }
     }
 
+    forceUpdate() {
+        for (let ID in this.#units) {
+            this.#units[ID].forceUpdate();
+        }
+    }
+
     onUnitSelection() {
         if (this.getSelectedUnits().length > 0) {
             getMap().setState("MOVE_UNIT");
@@ -106,10 +113,13 @@ export class UnitsManager {
         this.deselectAllUnits();
         for (let ID in this.#units)
         {
-            var latlng = new LatLng(this.#units[ID].latitude, this.#units[ID].longitude);
-            if (bounds.contains(latlng))
+            if (this.#units[ID].getHidden() == false)
             {
-                this.#units[ID].setSelected(true);
+                var latlng = new LatLng(this.#units[ID].latitude, this.#units[ID].longitude);
+                if (bounds.contains(latlng))
+                {
+                    this.#units[ID].setSelected(true);
+                }
             }
         }
     }