Added ai-formation feature swtich and UI kit stuff.

client/public/stylesheets/olympus.css

@@ -3,7 +3,11 @@
 	--active-coalition-color: var(--blue-coalition-color);
 	--background-color-dark: #202831;
 	--background-color-light: #AAA;
+    --border-radius-sm:5px;
+    --border-radius-md:10px;
+    --border-radius-lg:15px;
 	--blue-coalition-color: #247be2;
+    --font-weight-bolder:600;
 	--highlight-color: #FFF5;
 	--neutral-coalition-color: whitesmoke;
 	--neutral-coalition-text: #202831;
@@ -25,6 +29,29 @@ html {
 }
 
 
+button {
+    background-color:var(--background-color-dark);
+    border:1px solid var( --background-color-dark );
+    border-radius: var( --border-radius-sm );
+    color:whitesmoke;
+    cursor:pointer;
+    font-weight: var( --font-weight-bolder );
+    padding:8px;
+}
+
+button[disabled="disabled"] {
+    color: var( --highlight-color );
+    cursor:not-allowed;
+}
+
+
+.pill {
+    border-radius: var( --border-radius-sm );
+    display:inline-block;
+    padding:6px;
+}
+
+
 
 .ol-panel {
     background-color: var(--background-color-dark);
@@ -39,17 +66,17 @@ html {
 
 
 .ol-panel-list {
+    border-radius: var( --border-radius-sm );
     display: flex;
     flex-direction: column;
 	height: fit-content;
     row-gap: 5px;
 	text-align: center;
 	width: fit-content;
-    border-radius: 5px;
 }
 
 .ol-panel-list .list-item {
-    border-radius: 10px;
+    border-radius: var( --border-radius-md );
     display:flex;
     justify-content: space-between;
 	padding: 6px 10px;
@@ -72,21 +99,33 @@ html {
 }
 
 
-.ol-panel-info {
+.ol-panel-board {
     display:flex;
     flex-direction: row;
     justify-content: space-evenly;
 }
 
-.ol-panel-info > .panel-section {
+.ol-panel-board > .panel-section {
     border-right: 1px solid #555;
     padding:10px;
 }
 
-.ol-panel-info > .panel-section:last-of-type {
+.ol-panel-board > .panel-section:last-of-type {
     border-right-width: 0;
 }
 
+.ol-panel-board h1, .ol-panel-board h2 {
+    font-size:18px;
+    font-weight: var( --font-weight-bolder );
+    margin: 0;
+    padding:0 0 5px 0;
+}
+
+.ol-panel-board h2 {
+    font-size:14px;
+}
+
+
 
 .highlight-primary {
 	background-color: var(--highlight-color);

client/public/uikit.html

@@ -55,6 +55,30 @@
 
             </section>
 
+
+            
+            <div class="section-header">Buttons</div>
+            <section>
+
+                <div class="content">
+
+                    <div class="content-header">Buttons</div>
+                    <div class="content-body">
+
+                        <div class="example">
+                            <button>Button enabled</button>
+                        </div>
+
+                        <div class="example">
+                            <button disabled="disabled">Button disabled</button>
+                        </div>
+
+                    </div>
+        
+                </div>
+
+            </section>
+
             <div class="section-header">.ol-panel</div>
             <section>
                 
@@ -144,22 +168,24 @@
             
                 <div class="content">
     
-                    <div class="content-header">.ol-panel > .ol-panel-info</div>
+                    <div class="content-header">Panel board</div>
     
                     <div class="content-body">
 
                         <div class="example">
 
                             <div class="ol-panel">
-                                <div class="ol-panel-info">
+                                <div class="ol-panel-board">
                                     <div class="panel-section">
-                                        Info panel number 1
+                                        <h1>Unit Callsign</h1>
+                                        <div class="pill highlight-primary">Airframe</div>
+                                        <div class="pill highlight-neutral">Group</div>
                                     </div>
                                     <div class="panel-section">
-                                        Info panel number 2
+                                        <h2>Flight data</h2>
                                     </div>
                                     <div class="panel-section">
-                                        Info panel number 3
+                                        <h2>Loadout</h2>
                                     </div>
                                 </div>
                             </div>
@@ -172,6 +198,7 @@
                 </div>
 
             </section>
+            
 
             
 

client/src/FeatureSwitches.ts

@@ -1,6 +1,7 @@
 export interface FeatureSwitchInterface {
-    "enabled": boolean,
+    "defaultEnabled": boolean,  //  default on/off state (if allowed by masterSwitch)
     "label": string,
+    "masterSwitch": boolean,    //  on/off regardless of user preference
     "name": string,
     "options"?: object,
     "removeArtifactsIfDisabled"?: boolean
@@ -8,22 +9,46 @@ export interface FeatureSwitchInterface {
 
 
 class FeatureSwitch {
-    enabled;
+
+    //  From config param
+    defaultEnabled;
     label;
+    masterSwitch;
     name;
     removeArtifactsIfDisabled = true;
 
+    //  Self-set
+    userPreference;
+
+
     constructor( config:FeatureSwitchInterface ) {
 
-        this.enabled = config.enabled;
+        this.defaultEnabled = config.defaultEnabled;
-        this.label   = config.label;
+        this.label          = config.label;
-        this.name    = config.name;
+        this.masterSwitch   = config.masterSwitch;
+        this.name           = config.name;
+
+        this.userPreference = this.getUserPreference();
+
+    }
+
+
+    getUserPreference() {
+
+        let preferences = JSON.parse( localStorage.getItem( "featureSwitches" ) || "{}" );
+
+        return ( preferences.hasOwnProperty( this.name ) ) ? preferences[ this.name ] : this.defaultEnabled;        
 
     }
 
 
     isEnabled() {
-        return this.enabled;
+
+        if ( !this.masterSwitch ) {
+            return false;
+        }
+
+        return this.userPreference;
     }
 
 }
@@ -33,18 +58,25 @@ export class FeatureSwitches {
     #featureSwitches:FeatureSwitch[] = [
 
         new FeatureSwitch({
-            "enabled": false,
+            "defaultEnabled": false,
             "label": "AIC",
+            "masterSwitch": true,
             "name": "aic"
         }),
         
         new FeatureSwitch({
-            "enabled": false,
+            "defaultEnabled": false,
+            "label": "AI Formations",
+            "masterSwitch": true,
+            "name": "ai-formations",
+            "removeArtifactsIfDisabled": false
+        }),
+        
+        new FeatureSwitch({
+            "defaultEnabled": false,
             "label": "ATC",
-            "name": "atc",
+            "masterSwitch": true,
-            "options": {
+            "name": "atc"
-                "key": "value"
-            }
         })
 
     ];
@@ -54,6 +86,8 @@ export class FeatureSwitches {
 
         this.#removeArtifacts();
 
+        this.savePreferences();
+
     }
 
 
@@ -67,11 +101,34 @@ export class FeatureSwitches {
     #removeArtifacts() {
         
         for ( const featureSwitch of this.#featureSwitches ) {
-            if ( !featureSwitch.isEnabled() && featureSwitch.removeArtifactsIfDisabled !== false ) {
+            if ( !featureSwitch.isEnabled() ) {
-                document.querySelectorAll( "[data-feature-switch='" + featureSwitch.name + "']" ).forEach( el => el.remove() );
+                
+                document.querySelectorAll( "[data-feature-switch='" + featureSwitch.name + "']" ).forEach( el => {
+
+                    if ( featureSwitch.removeArtifactsIfDisabled === false ) {
+                        el.remove();
+                    } else {
+                        el.classList.add( "hide" );
+                    }
+
+                });
+
             }
         }
 
     }
 
+
+    savePreferences() {
+
+        let preferences:any = {};
+
+        for ( const featureSwitch of this.#featureSwitches ) {
+            preferences[ featureSwitch.name ] = featureSwitch.isEnabled();
+        }
+
+        localStorage.setItem( "featureSwitches", JSON.stringify( preferences ) );
+
+    }
+
 }

client/src/index.ts

@@ -146,14 +146,6 @@ function requestUpdate() {
     /* Main update rate = 250ms is minimum time, equal to server update time. */
     setTimeout(() => requestUpdate(), getConnected() ? 250 : 1000);
 
-    setInterval( () => {
-        /*
-        gtag( "event", "heartbeat", {
-
-        });
-        //*/
-    }, 60000);
-
     connectionStatusPanel.update(getConnected());
 }
 

client/views/unitcontrolpanel.ejs

@@ -12,7 +12,7 @@
         <!-- This is where all the unit selection buttons will be shown-->
     </div>
 
-    <div id="formation-creation-container">
+    <div id="formation-creation-container" data-feature-switch="ai-formations">
         <div class="rectangular-button white" id="create-formation"><img src="images\buttons\create.svg">Create formation</div>
         <div class="rectangular-button white" id="undo-formation"><img src="images\buttons\erase.svg">Undo formation</div>
     </div>
@@ -32,8 +32,8 @@
         </div>
     </div>
 
-    <div id="section-label">Formation</div>
+    <div id="section-label" data-feature-switch="ai-formations">Formation</div>
-    <div id="formation-buttons-container">
+    <div id="formation-buttons-container" data-feature-switch="ai-formations">
         <div class="rectangular-button">Echelon</div>
         <div class="rectangular-button">Fingertip</div>
         <div class="rectangular-button">Trail</div>