Merge branch 'main' of https://github.com/Pax1601/DCSOlympus into unit-list

client/demo.js

@@ -19,7 +19,20 @@ const DEMO_UNIT_DATA = {
         missionData:  {
             fuel: 50,
             flags: {human: false},
-            ammo: [],
+            ammo: [
+                {
+                    count: 4,
+                    desc: {
+                        displayName: "AIM-120"
+                    }
+                },
+                {
+                    count: 2,
+                    desc: {
+                        displayName: "AIM-7"
+                    }
+                }
+            ],
             targets: [],
             hasTask: true,
             coalition: "blue"

client/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "DCSOlympus",
-  "version": "0.0.0",
+  "version": "0.1.0-alpha",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "DCSOlympus",
-      "version": "0.0.0",
+      "version": "0.1.0-alpha",
       "dependencies": {
         "@types/geojson": "^7946.0.10",
         "@types/leaflet": "^1.9.0",

client/package.json

@@ -2,7 +2,7 @@
   "name": "DCSOlympus",
   "node-main": "./bin/www",
   "main": "http://localhost:3000",
-  "version": "0.0.0",
+  "version": "0.1.0-alpha",
   "private": true,
   "scripts": {
     "copy": "copy .\\node_modules\\leaflet\\dist\\leaflet.css .\\public\\stylesheets\\leaflet.css",

client/public/stylesheets/airbase.css

@@ -1,6 +1,6 @@
 :root {
-    --airbase-marker-height: 63px;
-    --airbase-marker-width: 63px;
+    --airbase-marker-height: 40px;
+    --airbase-marker-width: 40px;
 }
 
 [data-object|="airbase"] {
@@ -31,6 +31,7 @@ Marker
 /*  Airbase  */
 [data-object|="airbase"] .airbase-marker {
     background-image: var(--airbase-marker-neutral-url);
+    background-size: contain;
     height: var(--airbase-marker-height);
     width: var(--airbase-marker-width);
 }

client/public/stylesheets/unitinfopanel.css

@@ -56,5 +56,5 @@
 }
 
 #unit-info-panel #loadout-container .loadout-item::before {
-	content: attr( data-loadout-item ) ' \d7  ' attr( data-loadout-qty );
+	content: attr( data-loadout-qty )'\d7  ' attr( data-loadout-item )  ;
 }

client/src/panels/unitinfopanel.ts

@@ -58,26 +58,18 @@ export class UnitInfoPanel extends Panel {
             this.#task.classList.toggle("neutral", unit.getMissionData().coalition === "neutral");
             
             /* Add the loadout elements */
-            var els = this.getElement().getElementsByClassName("js-loadout-element");
-            while (els.length > 0)
-                this.#loadoutContainer.removeChild(els[0]);
-  
-            for (let index in unit.getMissionData().ammo) 
-                this.#addLoadoutElement(unit, index);
+            this.#loadoutContainer.replaceChildren(...unit.getMissionData().ammo.map(
+                (ammo: any) => {
+                    var el = document.createElement("div");
+                    el.classList.add("pill", "loadout-item");
+                    el.dataset.loadoutQty = ammo.count;
+                    el.dataset.loadoutItem = ammo.desc.displayName;
+                    return el;
+                }
+            ))
         }
     }
 
-    #addLoadoutElement(unit: Unit, index: string)
-    {
-        var ammo = unit.getMissionData().ammo[index];
-        var displayName = ammo.desc.displayName;
-        var amount = ammo.count;
-        var el = document.createElement("div")
-        el.classList.add("js-loadout-element", "ol-rectangular-container-dark")
-        el.innerText = amount + "x" + displayName;
-        this.#loadoutContainer.appendChild(el);
-    }
-
     #onUnitsSelection(units: Unit[]){
         if (units.length == 1)
             this.show();

client/views/unitinfopanel.ejs

@@ -22,10 +22,7 @@
             </dl>
 
             <div id="loadout-container" class="ol-group wrap">
-                <div class="pill loadout-item" data-loadout-qty="4" data-loadout-item="AIM-120"></div>
-                <div class="pill loadout-item" data-loadout-qty="4" data-loadout-item="AIM-54"></div>
-                <div class="pill loadout-item" data-loadout-qty="2" data-loadout-item="AIM-9P"></div>
-                <div class="pill loadout-item" data-loadout-qty="895" data-loadout-item="bullets"></div>
+                <!-- Here the loadout elements will be shown -->
             </div>
 
         </div>