First commit for unit info panel.

client/public/stylesheets/unitinfopanel.css

@@ -10,13 +10,14 @@
 
 
 #unit-info-panel #unit-name {
-    line-height: 18px;
+	padding:0px 0;
-	margin-bottom:10px;
+	margin-bottom:4px;
 }
 
 #unit-info-panel #current-task {
 	border-radius: var( --border-radius-lg );
-	margin-top:15px;
+	margin-top:8px;
+	padding:6px 16px;
 }
 
 #unit-info-panel #current-task::after {
@@ -25,36 +26,97 @@
 }
 
 
-#unit-info-panel #loadout-data {
+#loadout-container {
-	max-width: 250px;
+	width:250px;
 }
 
-#unit-info-panel #loadout-data .ol-data-grid {
+#loadout {
-	margin: 6px 0;
+	display:flex;
 }
 
-#unit-info-panel #loadout-data .ol-data-grid dt:first-child {
+#loadout-silhouette {
-	text-indent: 5px;
+	align-items: center;
+	display:flex;
+	justify-content: center;
+	width:55%;
 }
 
-#unit-info-panel #loadout-data .ol-data-grid dt:first-child::before {
+#loadout-silhouette::before {
+	background-image: var( --loadout-background-image );
+	background-repeat: no-repeat;
+	background-size:75px 75px;
+	content:"";
+	display:block;
+	filter: invert( 100% );
+	height:75px;
+	translate:-10px 0;
+	width:75px;
+}
+
+#loadout-items {
+	align-self: center;
+	display:flex;
+	flex-flow: column nowrap;
+	row-gap: 8px;
+	text-align: center;
+	width:45%;
+}
+
+
+#loadout-items > * {
+	align-items: center;
+	column-gap: 8px;
+	display:flex;
+	white-space: nowrap;
+}
+
+#loadout-items > *::before {
+	align-items: center;
+	background-color: var( --secondary-light-grey );
+	border-radius: 50%;
+	content: attr( data-quantity );
+	display:flex;
+	justify-content: center;
+	height:20px;
+	width:20px;
+}
+
+#loadout-items > *::after {
+	content: attr( data-item );
+}
+
+
+
+#fuel-percentage {
+	align-items: center;
+	display:flex;
+}
+
+#fuel-percentage::before {
 	content: url( /images/icons/fuel.svg );
 	display:inline-block;
 	filter:invert(100%);
 	height:16px;
-	text-indent:5px;
+	margin-right:6px;
-	translate:-10px 5%;
 	width:16px;
 }
 
-#unit-info-panel #loadout-fuel-level::after {
+#fuel-percentage::after {
-	content: attr( data-fuel-level ) "%";
+	content: attr( data-percentage ) "%";
 }
 
-#unit-info-panel #loadout-container .loadout-item {
+
-	background-color: black;
+#fuel-display {
+	background-color: var( --background-grey );
+	border-radius: var( --border-radius-md );
+	height:6px;
+	margin-top:4px;
+	overflow: hidden;
+	width:90%;
 }
 
-#unit-info-panel #loadout-container .loadout-item::before {
+#fuel-display #fuel-bar {
-	content: attr( data-loadout-qty )'\d7  ' attr( data-loadout-item )  ;
+	border-radius: var( --border-radius-md );
+	height:100%;
 }
+

client/src/panels/unitinfopanel.ts

@@ -1,34 +1,43 @@
 import { ConvertDDToDMS, rad2deg } from "../other/utils";
+import { aircraftDatabase } from "../units/aircraftdatabase";
 import { Unit } from "../units/unit";
 import { Panel } from "./panel";
 
 export class UnitInfoPanel extends Panel {
-    #unitName: HTMLElement;
-    #groupName: HTMLElement;
-    #name: HTMLElement;
-    #heading: HTMLElement;
     #altitude: HTMLElement;
+    #currentTask: HTMLElement;
+    #fuelBar: HTMLElement;
+    #fuelPercentage: HTMLElement;
     #groundSpeed: HTMLElement;
-    #fuel: HTMLElement;
+    #groupName: HTMLElement;
+    #heading: HTMLElement;
+    #name: HTMLElement;
     #latitude: HTMLElement;
     #longitude: HTMLElement;
-    #currentTask: HTMLElement;
     #loadoutContainer: HTMLElement;
+    #silhouette: HTMLElement;
+    #unitControl: HTMLElement;
+    #unitLabel: HTMLElement;
+    #unitName: HTMLElement;
 
     constructor(ID: string) {
         super(ID);
 
-        this.#unitName = <HTMLElement>(this.getElement().querySelector("#unit-name"));
+        this.#altitude         = <HTMLElement>(this.getElement().querySelector("#altitude"));
-        this.#groupName=  <HTMLElement>(this.getElement().querySelector("#group-name"));
+        this.#currentTask      = <HTMLElement>(this.getElement().querySelector("#current-task"));
-        this.#name = <HTMLElement>(this.getElement().querySelector("#name"));
+        this.#groundSpeed      = <HTMLElement>(this.getElement().querySelector("#ground-speed"));
-        this.#heading = <HTMLElement>(this.getElement().querySelector("#heading"));
+        this.#fuelBar          = <HTMLElement>(this.getElement().querySelector("#fuel-bar"));
-        this.#altitude = <HTMLElement>(this.getElement().querySelector("#altitude"));
+        this.#fuelPercentage   = <HTMLElement>(this.getElement().querySelector("#fuel-percentage"));
-        this.#groundSpeed = <HTMLElement>(this.getElement().querySelector("#ground-speed"));
+        this.#groupName        = <HTMLElement>(this.getElement().querySelector("#group-name"));
-        this.#fuel = <HTMLElement>(this.getElement().querySelector("#fuel"));
+        this.#heading          = <HTMLElement>(this.getElement().querySelector("#heading"));
-        this.#latitude = <HTMLElement>(this.getElement().querySelector("#latitude"));
+        this.#name             = <HTMLElement>(this.getElement().querySelector("#name"));
-        this.#longitude = <HTMLElement>(this.getElement().querySelector("#longitude"));
+        this.#latitude         = <HTMLElement>(this.getElement().querySelector("#latitude"));
-        this.#currentTask = <HTMLElement>(this.getElement().querySelector("#current-task"));
         this.#loadoutContainer = <HTMLElement>(this.getElement().querySelector("#loadout-container"));
+        this.#longitude        = <HTMLElement>(this.getElement().querySelector("#longitude"));
+        this.#silhouette       = <HTMLElement>(this.getElement().querySelector("#loadout-silhouette"));
+        this.#unitControl      = <HTMLElement>(this.getElement().querySelector("#unit-control"));
+        this.#unitLabel        = <HTMLElement>(this.getElement().querySelector("#unit-label"));
+        this.#unitName         = <HTMLElement>(this.getElement().querySelector("#unit-name"));
 
         document.addEventListener("unitsSelection", (e: CustomEvent<Unit[]>) => this.#onUnitsSelection(e.detail));
         document.addEventListener("unitsDeselection", (e: CustomEvent<Unit[]>) => this.#onUnitsDeselection(e.detail));
@@ -40,29 +49,53 @@ export class UnitInfoPanel extends Panel {
     
     #onUnitUpdate(unit: Unit) {
         if (this.getElement() != null && this.getVisible() && unit.getSelected()) {
+
+            const baseData = unit.getBaseData();
+            //style=""
+            console.log(  );
             /* Set the unit info */
-            this.#unitName.innerText = unit.getBaseData().unitName;
+            this.#unitLabel.innerText   = aircraftDatabase.getLabelByName( baseData.name );
-            this.#groupName.innerText = unit.getBaseData().groupName;
+            this.#unitName.innerText    = baseData.unitName;
-            this.#name.innerText = unit.getBaseData().name;
+            this.#unitControl.innerText = ( ( baseData.AI ) ? "AI" : "Human" ) + " controlled";
+            // this.#groupName.innerText = baseData.groupName;
+            //this.#name.innerText = baseData.name;
             //this.#heading.innerText = String(Math.floor(rad2deg(unit.getFlightData().heading)) + " °");
             //this.#altitude.innerText = String(Math.floor(unit.getFlightData().altitude / 0.3048) + " ft");
             //this.#groundSpeed.innerText = String(Math.floor(unit.getFlightData().speed * 1.94384) + " kts");
-            //this.#fuel.innerText = String(unit.getMissionData().fuel + "%");
+            this.#fuelBar.style.width = String(unit.getMissionData().fuel + "%");
+            this.#fuelPercentage.dataset.percentage = "" + unit.getMissionData().fuel;
             //this.#latitude.innerText = ConvertDDToDMS(unit.getFlightData().latitude, false);
             //this.#longitude.innerText = ConvertDDToDMS(unit.getFlightData().longitude, true);
             this.#currentTask.dataset.currentTask = unit.getTaskData().currentTask !== ""? unit.getTaskData().currentTask: "No task";
             this.#currentTask.dataset.coalition = unit.getMissionData().coalition;
             
             /* Add the loadout elements */
-            this.#loadoutContainer.replaceChildren(...Object.values(unit.getMissionData().ammo).map(
+            const items = <HTMLElement>this.#loadoutContainer.querySelector( "#loadout-items" );
-                (ammo: any) => {
+
-                    var el = document.createElement("div");
+            this.#silhouette.setAttribute( "style", `--loadout-background-image:url('/images/units/${aircraftDatabase.getByName( baseData.name )?.filename}');` );;
-                    el.classList.add("pill", "loadout-item");
+
-                    el.dataset.loadoutQty = ammo.count;
+            if ( items ) {
-                    el.dataset.loadoutItem = ammo.desc.displayName;
+
-                    return el;
+                const ammo = Object.values(unit.getMissionData().ammo); 
+
+                if ( ammo.length > 0 ) {
+
+                    items.replaceChildren(...Object.values(unit.getMissionData().ammo).map(
+                        (ammo: any) => {
+                            var el = document.createElement("div");
+                            el.dataset.qty  = ammo.count;
+                            el.dataset.item = ammo.desc.displayName;
+                            return el;
+                        }
+                    ));
+
+                } else {
+
+                    items.innerText = "No loadout";
+                    
                 }
-            ))
+
+            }
         }
     }
 

client/views/uikit.ejs

@@ -1019,6 +1019,50 @@
                     </div>
                 </div>
 
+
+                <div class="content">
+                    <div class="content-header">Airfield menu</div>
+                    <div class="content-body">
+                        <div class="example">
+
+                            <div id="unit-info-panel" class="ol-panel" style="position:relative;">
+
+                                <div class="ol-panel-board">
+                            
+                                    <div id="general" class="panel-section">
+                                        <h3 class="unit-name">Olympus 1-1</h3>
+                                        <div class="ol-group">
+                                            <div class="unit-label">Name</div>
+                                            <div class="unit-control">AI Controlled</div>
+                                        </div>
+                                        <div id="current-task" class="pill highlight-coalition" data-coalition="blue" data-current-task="Awaiting tasking"></div>
+                                    </div>
+                            
+                                    <div id="loadout-container" class="panel-section">
+                            
+                                        <div id="loadout">
+                                            <div id="loadout-silhouette" style="--loadout-background-image:url('/images/units/f-15.png');"></div>
+                                            <div id="loadout-items" data-empty-message="Empty loadout">
+                                                Empty loadout
+                                            </div>
+                                        </div>
+                                        
+
+                                        <div id="fuel-percentage" data-percentage="45"></div>
+                                        <div id="fuel-display">
+                                            <div id="fuel-bar" class="highlight-coalition" data-coalition="blue" style="width:0%;"></div>
+                                        </div>
+                            
+                                    </div>
+                            
+                                </div>
+                            
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+
             </section>
 
             <section>

client/views/unitinfopanel.ejs

@@ -3,25 +3,25 @@
     <div class="ol-panel-board">
 
         <div id="general" class="panel-section">
-            <h3 id="unit-name">Olympus 1-1</h3>
+            <h3 id="unit-name"></h3>
             <div class="ol-group">
-                <div id="name" class="pill highlight-primary">Name</div>
+                <div id="unit-label"></div>
-                <div id="group-name" class="pill highlight-primary">Group</div>
+                <div id="unit-control"></div>
             </div>
             <div id="current-task" class="pill highlight-coalition" data-coalition="blue" data-current-task=""></div>
         </div>
 
-        <div id="loadout-data" class="panel-section">
+        <div id="loadout-container" class="panel-section">
                             
-            <h4 id="loadout-label">Loadout</h4>
+            <div id="loadout">
+                <div id="loadout-silhouette"></div>
+                <div id="loadout-items">
+                </div>
+            </div>
             
-            <dl class="ol-data-grid">
+            <div id="fuel-percentage" data-percentage=""></div>
-                <dt>Fuel</dt>
+            <div id="fuel-display">
-                <dd id="loadout-fuel-level" data-fuel-level="69"></dd>
+                <div id="fuel-bar" class="highlight-coalition" data-coalition="blue" style="width:30%;"></div>
-            </dl>
-
-            <div id="loadout-container" class="ol-group wrap">
-                <!-- Here the loadout elements will be shown -->
             </div>
 
         </div>