diff --git a/client/public/stylesheets/panels/unitlist.css b/client/public/stylesheets/panels/unitlist.css index c87f0ef6..7f60bdda 100644 --- a/client/public/stylesheets/panels/unitlist.css +++ b/client/public/stylesheets/panels/unitlist.css @@ -18,38 +18,75 @@ row-gap: 4px; } -#unit-list-panel .unit-list-unit { - column-gap: 4px; - display:flex; - flex-flow: row nowrap; - padding:2px 0; -} - -#unit-list-panel .unit-list-unit.headers { +.unit-list-unit { + border-radius: var( --border-radius-sm ); 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 { - text-decoration: underline; +#unit-list-panel-content > * { + cursor:pointer; +} + +#unit-list-panel-content > .unit-list-unit:hover { + background-color: var( --background-grey ); } \ No newline at end of file diff --git a/client/src/panels/unitlistpanel.ts b/client/src/panels/unitlistpanel.ts index 861f9723..b35c6267 100644 --- a/client/src/panels/unitlistpanel.ts +++ b/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; 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); - getApp().getUnitsManager().selectUnit(id); + const el = t.closest( "[data-unit-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 += ` -
-
${unit.getUnitName()}
-
${unit.getName()}
+
+
${unit.getUnitName()}
+
${this.#unitNameCache[name]}
+
${unit.getCategory()}
${unit.getCoalition()}
${unit.getHuman() ? "Human" : "AI"}
`; @@ -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() { diff --git a/client/views/panels/unitlist.ejs b/client/views/panels/unitlist.ejs index aa459c4e..e91e8784 100644 --- a/client/views/panels/unitlist.ejs +++ b/client/views/panels/unitlist.ejs @@ -1,8 +1,9 @@ -
+

Unit List

Name
Vehicle
+
Category
Coalition
Human/AI