weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Reformatted some files

Browse Source
This commit is contained in:
Pax1601
2023-10-02 10:12:24 +02:00
parent 5d4fdf1e76
commit fcb02602a0
2 changed files with 64 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
client/src/panels/unitlistpanel.ts
View File

@@ -1,111 +1,83 @@
import { OlympusApp } from "../olympusapp";
import { getApp } from "..";
import { ShortcutKeyboard } from "../shortcut/shortcut";
import { Unit } from "../unit/unit";
import { Panel } from "./panel";
export class UnitListPanel extends Panel {
#contentElement: HTMLElement;
#currentSortAlgorithm: string = "unitName";
#currentSortDirection: string = "ASC";
#olympusApp: OlympusApp;
#units: Unit[] = [];
#updatesInterval!: ReturnType<typeof setInterval>;
constructor( olympusApp:OlympusApp, panelElement:string, contentElement:string ) {
constructor(panelElement: string, contentElement: string) {
super(panelElement);
const getElement = document.getElementById(contentElement);
super( panelElement );
this.#olympusApp = olympusApp;
const getElement = document.getElementById( contentElement );
if ( getElement instanceof HTMLElement ) {
if (getElement instanceof HTMLElement)
this.#contentElement = getElement;
} else {
throw new Error( `UnitList: unable to find element "${contentElement}".` );
}
else
throw new Error(`UnitList: unable to find element "${contentElement}".`);
// Add the header click listener and sorting
[].slice.call( this.getElement().querySelectorAll( ".headers > *" ) ).forEach( ( header:HTMLElement ) => {
header.addEventListener( "click", ( ev:MouseEvent ) => {
[].slice.call(this.getElement().querySelectorAll(".headers > *")).forEach((header: HTMLElement) => {
header.addEventListener("click", (ev: MouseEvent) => {
const el = ev.target;
if (el instanceof HTMLElement) {
const newSort = el.getAttribute("data-sort-field") || "unitName";
if ( el instanceof HTMLElement ) {
const newSort = el.getAttribute( "data-sort-field" ) || "unitName";
if ( this.#currentSortAlgorithm === newSort ) {
this.#currentSortDirection = ( this.#currentSortDirection === "ASC" ) ? "DESC" : "ASC";
} else {
if (this.#currentSortAlgorithm === newSort)
this.#currentSortDirection = (this.#currentSortDirection === "ASC") ? "DESC" : "ASC";
else
this.#currentSortDirection = "ASC";
}
this.#currentSortAlgorithm = newSort;
this.doUpdate();
}
});
});
// Dynamically listen for clicks in order to do stuff with units
this.getElement().addEventListener( "click", ( ev:MouseEvent ) => {
this.getElement().addEventListener("click", (ev: MouseEvent) => {
const t = ev.target;
if ( t instanceof HTMLElement ) {
let id:number = Number( t.getAttribute( "data-unit-id" ) || 0 );
this.#olympusApp.getUnitsManager().selectUnit( id );
if (t instanceof HTMLElement) {
let id: number = Number(t.getAttribute("data-unit-id") || 0);
getApp().getUnitsManager().selectUnit(id);
}
});
new ShortcutKeyboard({
"callback": () => {
this.toggle()
},
"callback": () => { this.toggle() },
"code": "KeyU"
});
this.startUpdates();
}
doUpdate() {
if ( !this.getVisible() ) {
if (!this.getVisible())
return;
}
this.#contentElement.innerHTML = "";
this.#units = Object.values( this.#olympusApp.getUnitsManager().getUnits() );
this.#units = Object.values(getApp().getUnitsManager().getUnits());
if ( this.#currentSortAlgorithm === "coalition" ) {
if (this.#currentSortAlgorithm === "coalition")
this.#sortUnitsByCoalition();
}
if ( this.#currentSortAlgorithm === "name" ) {
if (this.#currentSortAlgorithm === "name")
this.#sortUnitsByName();
}
if ( this.#currentSortAlgorithm === "unitName" ) {
if (this.#currentSortAlgorithm === "unitName")
this.#sortUnitsByUnitName();
}
Object.values( this.#units ).forEach( ( unit:Unit ) => {
Object.values(this.#units).forEach((unit: Unit) => {
// Exclude dead units
if ( !unit.getAlive() ) {
if (!unit.getAlive()) {
return;
}
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 data-unit-id="${unit.ID}">${unit.getUnitName()}</div>
@@ -113,96 +85,76 @@ export class UnitListPanel extends Panel {
<div>${unit.getCoalition()}</div>
<div>${unit.getHuman() ? "Human" : "AI"}</div>
</div>`;
});
}
getContentElement() {
return this.#contentElement;
}
#sortStringsCompare( str1:string, str2:string ) {
if ( str1 > str2 ) {
return ( this.#currentSortDirection === "ASC" ) ? 1 : -1;
} else if ( str1 < str2 ) {
return ( this.#currentSortDirection === "ASC" ) ? -1 : 1;
#sortStringsCompare(str1: string, str2: string) {
if (str1 > str2) {
return (this.#currentSortDirection === "ASC") ? 1 : -1;
} else if (str1 < str2) {
return (this.#currentSortDirection === "ASC") ? -1 : 1;
}
return 0;
}
#sortUnitsByUnitName() {
this.#units.sort( ( unit1:Unit, unit2:Unit ) => {
this.#units.sort((unit1: Unit, unit2: Unit) => {
const str1 = unit1.getUnitName().toLowerCase();
const str2 = unit2.getUnitName().toLowerCase();
return this.#sortStringsCompare( str1, str2 );
});
return this.#sortStringsCompare(str1, str2);
});
}
#sortUnitsByCoalition() {
this.#units.sort( ( unit1:Unit, unit2:Unit ) => {
this.#units.sort((unit1: Unit, unit2: Unit) => {
let str1 = unit1.getCoalition();
let str2 = unit2.getCoalition();
let cmp = this.#sortStringsCompare( str1, str2 );
let cmp = this.#sortStringsCompare(str1, str2);
if ( cmp !== 0 ) {
if (cmp !== 0)
return cmp;
}
str1 = unit1.getUnitName().toLowerCase();
str2 = unit2.getUnitName().toLowerCase();
return this.#sortStringsCompare( str1, str2 );
return this.#sortStringsCompare(str1, str2);
});
}
#sortUnitsByName() {
this.#units.sort( ( unit1:Unit, unit2:Unit ) => {
this.#units.sort((unit1: Unit, unit2: Unit) => {
const str1 = unit1.getName().toLowerCase();
const str2 = unit2.getName().toLowerCase();
return this.#sortStringsCompare( str1, str2 );
return this.#sortStringsCompare(str1, str2);
});
}
startUpdates() {
this.doUpdate();
this.#updatesInterval = setInterval(() => {
this.doUpdate();
}, 2000 );
}, 2000);
}
stopUpdates() {
clearInterval( this.#updatesInterval );
clearInterval(this.#updatesInterval);
}
toggle() {
if ( this.getVisible() ) {
if (this.getVisible())
this.stopUpdates();
} else {
else
this.startUpdates();
}
super.toggle();
}
}