Merge pull request #430 from Pax1601/423-some-improvements-on-units-list

Improved visuals and truncated unit names

client/public/stylesheets/panels/unitlist.css

@@ -18,38 +18,75 @@
     row-gap: 4px;
 }
 
-#unit-list-panel .unit-list-unit {
+.unit-list-unit {
-    column-gap: 4px;
+    border-radius: var( --border-radius-sm );
-    display:flex;
-    flex-flow: row nowrap;
-    padding:2px 0;
-}
-
-#unit-list-panel .unit-list-unit.headers {
     column-gap: 2px;
     display:flex;
-    flex-direction: row;
+    flex-flow: row nowrap;
+    justify-content: space-between;
 }
 
-#unit-list-panel .unit-list-unit.headers [data-sort-field] {
+
+.unit-list-unit:nth-of-type(even) {
+    background:#ffffff10;
+    overflow:visible;
+}
+
+.unit-list-unit.headers {
+    margin-bottom:3px;
+    margin-right:10px;
+    overflow: hidden;
+}
+
+.unit-list-unit.headers [data-sort-field] {
     cursor:pointer;
 }
 
-#unit-list-panel .unit-list-unit.headers > * {
+.unit-list-unit.headers > * {
     background-color: var( --background-grey );
-    margin-bottom: 2px;
     text-align: center;
 }
 
-#unit-list-panel .unit-list-unit > * {
+.unit-list-unit > * {
+    font-size:13px;
     overflow: hidden;
-    width:100px;
+    padding:2px;
+    width:80px;
 }
 
-#unit-list-panel .unit-list-unit > [data-unit-id] {
+.unit-list-unit :first-child {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width:150px;
+}
+
+.unit-list-unit :first-child:hover {
+    overflow:visible;
+}
+
+.unit-list-unit :first-child:hover span {
+    position:relative;
+    z-index:9999;
+}
+
+.unit-list-unit :first-child:hover span:hover {
+    background-color: white;
+    color: var( --background-steel );
+}
+
+.unit-list-unit :nth-child(2) {
+    width:120px;
+}
+
+.unit-list-unit > [data-unit-id] {
     cursor:pointer;
 }
 
-#unit-list-panel .unit-list-unit > [data-unit-id]:hover {
+#unit-list-panel-content > * {
-    text-decoration: underline;
+    cursor:pointer;
+}
+
+#unit-list-panel-content > .unit-list-unit:hover {
+    background-color: var( --background-grey );
 }

client/src/panels/unitlistpanel.ts

@@ -8,6 +8,7 @@ export class UnitListPanel extends Panel {
     #currentSortAlgorithm: string = "unitName";
     #currentSortDirection: string = "ASC";
     #units: Unit[] = [];
+    #unitNameCache: {[key:string]: string} = {};
     #updatesInterval!: ReturnType<typeof setInterval>;
 
     constructor(panelElement: string, contentElement: string) {
@@ -42,9 +43,14 @@ export class UnitListPanel extends Panel {
         //  Dynamically listen for clicks in order to do stuff with units
         this.getElement().addEventListener("click", (ev: MouseEvent) => {
             const t = ev.target;
+
             if (t instanceof HTMLElement) {
-                let id: number = Number(t.getAttribute("data-unit-id") || 0);
+                const el = t.closest( "[data-unit-id]");
-                getApp().getUnitsManager().selectUnit(id);
+
+                if (el instanceof HTMLElement) {
+                    let id: number = Number(el.getAttribute("data-unit-id") || 0);
+                    getApp().getUnitsManager().selectUnit(id);
+                }
             }
         });
 
@@ -78,10 +84,18 @@ export class UnitListPanel extends Panel {
             if (!unit.getAlive()) {
                 return;
             }
+
+            const name = unit.getName();
+
+            if ( this.#unitNameCache.hasOwnProperty( name ) === false ) {
+                this.#unitNameCache[name] = unit.getDatabase()?.getByName(unit.getName())?.label || unit.getName();
+            }
+
             this.#contentElement.innerHTML += `
-                <div class="unit-list-unit" data-value-unitName="${unit.getUnitName()}" data-value-name="${unit.getName()}" data-value-coalition="${unit.getCoalition()}" data-value-human="${unit.getHuman() ? "Human" : "AI"}">
+                <div class="unit-list-unit" data-unit-id="${unit.ID}" data-value-unitName="${unit.getUnitName()}" data-value-name="${unit.getName()}" data-value-coalition="${unit.getCoalition()}" data-value-human="${unit.getHuman() ? "Human" : "AI"}">
-                    <div data-unit-id="${unit.ID}">${unit.getUnitName()}</div>
+                    <div><span>${unit.getUnitName()}</span></div>
-                    <div>${unit.getName()}</div>
+                    <div>${this.#unitNameCache[name]}</div>
+                    <div>${unit.getCategory()}</div>
                     <div>${unit.getCoalition()}</div>
                     <div>${unit.getHuman() ? "Human" : "AI"}</div>
                 </div>`;
@@ -112,6 +126,23 @@ export class UnitListPanel extends Panel {
         });
     }
 
+    #sortUnitsByCategory() {
+        this.#units.sort((unit1: Unit, unit2: Unit) => {
+            let str1 = unit1.getCategory();
+            let str2 = unit2.getCategory();
+
+            let cmp = this.#sortStringsCompare(str1, str2);
+
+            if (cmp !== 0) 
+                return cmp;
+            
+            str1 = unit1.getUnitName().toLowerCase();
+            str2 = unit2.getUnitName().toLowerCase();
+
+            return this.#sortStringsCompare(str1, str2);
+        });
+    }
+
     #sortUnitsByCoalition() {
         this.#units.sort((unit1: Unit, unit2: Unit) => {
             let str1 = unit1.getCoalition();
@@ -142,7 +173,7 @@ export class UnitListPanel extends Panel {
 
         this.#updatesInterval = setInterval(() => {
             this.doUpdate();
-        }, 2000);
+        }, 4000);
     }
 
     stopUpdates() {

client/views/panels/unitlist.ejs

@@ -1,8 +1,9 @@
-<div id="unit-list-panel" class="ol-panel hide">
+<div id="unit-list-panel" class="ol-panel">
     <h3>Unit List</h3>
     <div class="unit-list-unit headers">
         <div data-sort-field="unitName">Name</div>
         <div data-sort-field="name">Vehicle</div>
+        <div data-sort-field="category">Category</div>
         <div data-sort-field="coalition">Coalition</div>
         <div>Human/AI</div>
     </div>