Merge pull request #93 from Pax1601/81-demo-loadout-data-still-present

Fixed issue

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/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,24 +58,16 @@ 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");
+            this.#loadoutContainer.replaceChildren(...unit.getMissionData().ammo.map(
-            while (els.length > 0)
+                (ammo: any) => {
-                this.#loadoutContainer.removeChild(els[0]);
+                    var el = document.createElement("div");
-  
+                    el.classList.add("pill", "loadout-item");
-            for (let index in unit.getMissionData().ammo) 
+                    el.dataset.loadoutQty = ammo.count;
-                this.#addLoadoutElement(unit, index);
+                    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[]){

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>
+                <!-- Here the loadout elements will be shown -->
-                <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>
             </div>
 
         </div>