First commit of crude functionality.

client/public/stylesheets/layout.css

@@ -1,8 +1,9 @@
 
 /* Page style */
 body {
-	padding: 0;
+	display: flex;
 	margin: 0;
+	padding: 0;
 }
 
 html,
@@ -41,20 +42,82 @@ body {
 	width: 200px;
 }
 
-#visibility-control-panel {
+
+/**************************************/
+
+.control-panel {
 	position: absolute;
-	left: 430px;
-	height: 30px;
-	width: 110;
-	top: 10px;
 	z-index: 1000;
 	display: flex;
-	justify-content: space-between;
 	align-items: center;
+}
+
+.control-panel-top {
+	height: 30px;
+	justify-content: space-between;
+	top: 10px;
 	padding-left: 10px;
 	padding-right: 10px;
 }
 
+#visibility-control-panel {
+	left: 430px;
+	width: 110;
+}
+
+
+/*****  AIC  *****/
+
+#aic-control-panel {
+	color:white;
+	left: 550px;
+}
+
+.aic-enabled #aic-control-panel .olympus-button {
+	filter:invert(100%);
+}
+
+
+#aic-formation-panel {
+	align-self: center;
+	background:#eaeaea;
+	border-bottom-right-radius: 10px;
+	border-top-right-radius: 10px;
+	display:none;
+	justify-self: left;
+	padding:10px;
+	position:absolute;
+}
+
+.aic-enabled #aic-formation-panel {
+	display:flex;
+	flex-direction: column;
+}
+
+#aic-formation-list {
+	display:flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+#aic-formation-list > div {
+	align-items: center;
+	display:flex;
+	flex-direction: column;
+	justify-content: center;
+	margin-top:1em;
+}
+
+#aic-formation-list .aic-formation-image img {
+	border: 1px solid #ccc;
+	border-radius: 10px;
+	max-width: 75px;
+}
+
+
+/**************************************/
+
+
 #unit-control-buttons {
 	position: fixed;
 	top: 10px;

client/src/aic/aic.ts

@@ -0,0 +1,70 @@
+interface AICFormation {
+    "descriptor" : string,
+    "icon"       : string,
+    "label"      : string,
+    "name"       : string
+}
+
+
+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"
+    }];
+
+
+    constructor() {
+        
+        this.#onStatusUpdate();
+
+    }
+
+
+    getFormations() {
+        return this.#formations;
+    }
+
+
+    getStatus() {
+        return this.#status;
+    }
+
+
+    #onStatusUpdate() {
+
+        const status:boolean = this.getStatus();
+
+        //  Update the DOM
+        document.body.classList.toggle( "aic-enabled", status );
+
+    }
+
+
+    toggleStatus(force?:boolean) {
+
+        if ( force ) {
+            this.#status = force;
+        } else {
+            this.#status = !this.#status;
+        }
+
+        this.#onStatusUpdate();
+
+    }
+
+}

client/src/index.ts

@@ -12,6 +12,8 @@ import { UnitControlPanel } from "./panels/unitcontrolpanel";
 import { MouseInfoPanel } from "./panels/mouseInfoPanel";
 import { Slider } from "./controls/slider";
 
+import { AIC } from "./aic/aic";
+
 /* TODO: should this be a class? */
 var map: Map;
 var selectionWheel: SelectionWheel;
@@ -37,6 +39,9 @@ var aiVisibilityButton: Button;
 var weaponVisibilityButton: Button;
 var deadVisibilityButton: Button;
 
+var aic: AIC;
+var aicToggleButton: Button;
+
 var altitudeSlider: Slider;
 var airspeedSlider: Slider;
 
@@ -77,6 +82,15 @@ function setup() {
     weaponVisibilityButton.setState(1);
     deadVisibilityButton.setState(1);
 
+    /* AIC */
+    aic = new AIC();
+
+   setupAICFormations( aic );
+    
+    aicToggleButton = new Button( "toggle-aic-button", ["images/buttons/ai-full.svg"], () => {
+        aic.toggleStatus();
+    });
+
     /* Default values */
     activeCoalition = "blue";
     connected = false;
@@ -211,4 +225,56 @@ export function getUnitControlSliders() {
     return {altitude: altitudeSlider, airspeed: airspeedSlider}
 }
 
+
+function setupAICFormations( aic:AIC ) {
+    let $aicFormationList = document.getElementById( "aic-formation-list" );
+
+    if ( $aicFormationList ) {
+
+        /* //  Example display
+        <div>
+            <div class="aic-formation-image">
+                <img src="images/formations/azimuth.png" />
+            </div>
+            <div class="aic-formation-name">Azimuth</div>
+            <div class="aic-formation-descriptor">(instructions)</div>
+        </div>
+        //*/
+
+        aic.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;
+            
+            //  Descriptor
+            let descriptorDiv = document.createElement( "div" );
+            descriptorDiv.classList.add( "aic-formation-descriptor" );
+            descriptorDiv.innerText = formation.descriptor;
+
+            // Wrapper
+            let wrapperDiv = document.createElement( "div" );
+            wrapperDiv.dataset.formationName = formation.name;
+            wrapperDiv.appendChild( imageDiv )
+            wrapperDiv.appendChild( nameDiv );
+            wrapperDiv.appendChild( descriptorDiv );
+
+            //  Add to DOM
+            $aicFormationList?.appendChild( wrapperDiv );
+
+        });
+
+    }
+}
+
 window.onload = setup;

client/views/aiccontrolpanel.ejs

@@ -0,0 +1,3 @@
+<div class="olympus-panel control-panel control-panel-top" id="aic-control-panel">
+    <div class="olympus-button" id="toggle-aic-button"></div>
+</div>

client/views/aicformationpanel.ejs

@@ -0,0 +1,7 @@
+<div id="aic-formation-panel" class="control-panel">
+    
+    <div>Formations</div>
+
+    <div id="aic-formation-list"></div>
+
+</div>

client/views/index.ejs

@@ -26,6 +26,8 @@
   <%- include('selectionscroll.ejs') %>
   <div class="olympus-dropdown" id="map-source-dropdown"></div>
   <div class="olympus-dropdown" id="scenario-dropdown"></div>
+  <%- include('aiccontrolpanel.ejs') %>
+  <%- include('aicformationpanel.ejs') %>
   <%- include('unitinfopanel.ejs') %>
   <%- include('unitcontrolpanel.ejs') %>
   <%- include('visibilitycontrolpanel.ejs') %>

client/views/visibilitycontrolpanel.ejs

@@ -1,4 +1,4 @@
-<div class="olympus-panel" id="visibility-control-panel">
+<div class="olympus-panel control-panel control-panel-top" id="visibility-control-panel">
     <div class="olympus-button" id="user-visibility-button"></div>
     <div class="olympus-button" id="ai-visibility-button"></div>
     <div class="olympus-button" id="weapon-visibility-button"></div>