More AIC work so I don't lose it. (Best commit message ever.)

client/src/aic/aic.ts

@@ -1,37 +1,79 @@
-interface AICFormation {
-    "descriptor" : string,
-    "icon"       : string,
-    "label"      : string,
-    "name"       : string
-}
+import { AICFormation } from "./AICFormation";
+import { AICFormation_Azimuth } from "./AICFormation/Azimuth";
+import { AICFormation_Range } from "./AICFormation/Range";
+import { AICFormation_Single } from "./AICFormation/Single";
+import { AICFormationDescriptorSection } from "./AICFormationDescriptorSection";
+//  import { AICFormationDescriptor } from "./aicformationdescriptor"
 
 
 export class AIC {
 
     #status:boolean = true;
 
-    #formations:AICFormation[] = [{
-        "descriptor" : "group, single, Bullseye, <bearing>, <range>, <altitude>, tracks <N|NE|E|SE|S|SW|W|NW>, <bogey|hostile>",
-        "icon"       : "single.png",
-        "label"      : "Single",
-        "name"       : "single"
-    }, {
-        "descriptor" : "",
-        "icon"       : "azimuth.png",
-        "label"      : "Azimuth",
-        "name"       : "azimuth"
-    }, {
-        "descriptor" : "",
-        "icon"       : "range.png",
-        "label"      : "Range",
-        "name"       : "range"
-    }];
+    #formations = [
+
+        new AICFormation_Single(),
+        new AICFormation_Range(),
+        new AICFormation_Azimuth()
+
+    ];
 
 
     constructor() {
         
         this.#onStatusUpdate();
 
+        //  This feels kind of dirty
+        let $aicFormationList = document.getElementById( "aic-formation-list" );
+
+        if ( $aicFormationList ) {
+
+            this.getFormations().forEach( formation => {
+
+                //  Image
+                let $imageDiv = document.createElement( "div" );
+                $imageDiv.classList.add( "aic-formation-image" );
+
+                let $img = document.createElement( "img" );
+                $img.src = "images/formations/" + formation.icon;
+
+                $imageDiv.appendChild( $img );
+                
+                //  Name
+                let $nameDiv = document.createElement( "div" );
+                $nameDiv.classList.add( "aic-formation-name" );
+                $nameDiv.innerText = formation.label;
+                
+                // Wrapper
+                let $wrapperDiv = document.createElement( "div" );
+                $wrapperDiv.dataset.formationName = formation.name;
+                $wrapperDiv.appendChild( $imageDiv )
+                $wrapperDiv.appendChild( $nameDiv );
+                $wrapperDiv.addEventListener( "click", ( ev ) => {
+
+                    const controlTypeInput = document.querySelector( "input[type='radio'][name='control-type']:checked" );
+
+                    let controlTypeValue:any = ( controlTypeInput instanceof HTMLInputElement && [ "broadcast", "tactical" ].indexOf( controlTypeInput.value ) > -1 ) ? controlTypeInput.value : "broadcast";
+
+                    //  TODO: make this not an "any"
+                    const output:any = formation.getDescriptor({
+                        "aicCallsign"  : "Magic",
+                        "bullseyeName" : "Bullseye",
+                        "control"      : controlTypeValue,
+                        "numGroups"    : formation.numGroups
+                    });
+
+                    this.updateTeleprompt( output );
+
+                });
+
+                //  Add to DOM
+                $aicFormationList?.appendChild( $wrapperDiv );
+
+            });
+
+        }
+
     }
 
 
@@ -67,4 +109,80 @@ export class AIC {
 
     }
 
+
+    toggleHelp() {
+        document.getElementById( "aic-help" )?.classList.toggle( "hide" );
+    }
+
+//*
+    updateTeleprompt<T extends AICFormationDescriptorSection>( descriptor:T[] ) {
+
+        let $teleprompt = document.getElementById( "aic-teleprompt" );
+
+        if ( $teleprompt instanceof HTMLElement ) {
+
+            //  Clean slate
+            while ( $teleprompt.childNodes.length > 0 ) {
+                $teleprompt.childNodes[0].remove();
+            }
+
+            function newDiv() {
+                return document.createElement( "div" );
+            }
+
+            //  Wrapper
+            let $descriptor = newDiv();
+            $descriptor.id = "aic-descriptor";
+
+            for ( const section of descriptor ) {
+
+                if ( section.omitSection ) {
+                    continue;
+                }
+
+                let $section = newDiv();
+                $section.classList.add( "aic-descriptor-section" );
+
+                let $sectionLabel = newDiv();
+                $sectionLabel.classList.add( "aic-descriptor-section-label" );
+                $sectionLabel.innerText = section.label;
+                $section.appendChild( $sectionLabel );
+
+                
+                let $components = newDiv();
+                $components.classList.add( "aic-descriptor-components" );
+
+                for ( const component of section.getComponents() ) {
+
+                    let $component = newDiv();
+                    $component.classList.add( "aic-descriptor-component" );
+
+                    let $componentLabel = newDiv();
+                    $componentLabel.classList.add( "aic-descriptor-component-label" );
+                    $componentLabel.innerText = component.label;
+
+                    let $componentValue = newDiv();
+                    $componentValue.classList.add( "aic-descriptor-component-value" );
+                    $componentValue.innerText = component.value;
+
+                    $component.appendChild( $componentLabel );
+                    $component.appendChild( $componentValue );
+
+                    $components.appendChild( $component );
+
+                }
+
+                $section.appendChild( $components );
+                $descriptor.appendChild( $section );
+
+            }
+
+            $teleprompt.appendChild( $descriptor );
+
+        }
+
+
+    }
+//*/
+
 }