Reformatted some files

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

View File

@ -182,7 +182,7 @@ export class OlympusApp {
.add("serverStatus", new ServerStatusPanel("server-status-panel"))
.add("unitControl", new UnitControlPanel("unit-control-panel"))
.add("unitInfo", new UnitInfoPanel("unit-info-panel"))
.add("unitList", new UnitListPanel( this, "unit-list-panel", "unit-list-panel-content" ) )
.add("unitList", new UnitListPanel("unit-list-panel", "unit-list-panel-content"))
// Popups
this.getPopupsManager().add("infoPopup", new Popup("info-popup"));
@ -198,8 +198,8 @@ export class OlympusApp {
if (config && config.address != undefined && config.port != undefined) {
const address = config.address;
const port = config.port;
if (typeof address === 'string' && typeof port == 'number') {
this.getServerManager().setAddress(address == "*" ? window.location.hostname : address, port);
if (typeof address === 'string' && typeof port == 'number') {
this.getServerManager().setAddress(address == "*" ? window.location.hostname : address, port);
}
}
else {
@ -250,16 +250,16 @@ export class OlympusApp {
},
"code": "Space",
"ctrlKey": false
}).addKeyboardShortcut( "deselectAll", {
"callback": ( ev:KeyboardEvent ) => {
}).addKeyboardShortcut("deselectAll", {
"callback": (ev: KeyboardEvent) => {
this.getUnitsManager().deselectAllUnits();
},
"code": "Escape"
}).addKeyboardShortcut( "toggleUnitLabels", {
}).addKeyboardShortcut("toggleUnitLabels", {
"altKey": false,
"callback": () => {
const chk = document.querySelector( `label[title="Show unit labels"] input[type="checkbox"]` );
if ( chk instanceof HTMLElement ) {
const chk = document.querySelector(`label[title="Show unit labels"] input[type="checkbox"]`);
if (chk instanceof HTMLElement) {
chk.click();
}
},
@ -288,14 +288,14 @@ export class OlympusApp {
});
const digits = ["Digit1", "Digit2", "Digit3", "Digit4", "Digit5", "Digit6", "Digit7", "Digit8", "Digit9"];
digits.forEach(code => {
shortcutManager.addKeyboardShortcut(`hotgroup${code}`, {
"altKey": false,
"callback": (ev: KeyboardEvent) => {
if (ev.ctrlKey && ev.shiftKey)
this.getUnitsManager().selectedUnitsAddToHotgroup(parseInt(ev.code.substring(5)));
else if (ev.ctrlKey && !ev.shiftKey)
else if (ev.ctrlKey && !ev.shiftKey)
this.getUnitsManager().selectedUnitsSetHotgroup(parseInt(ev.code.substring(5)));
else if (!ev.ctrlKey && ev.shiftKey)
this.getUnitsManager().selectUnitsByHotgroup(parseInt(ev.code.substring(5)), false);
@ -305,11 +305,11 @@ export class OlympusApp {
"code": code
});
});
// Stop hotgroup controls sending the browser to another tab
digits.forEach( code => {
document.addEventListener( "keydown", ( ev:KeyboardEvent ) => {
if ( ev.code === code && ev.ctrlKey === true && ev.altKey === false && ev.shiftKey === false ) {
digits.forEach(code => {
document.addEventListener("keydown", (ev: KeyboardEvent) => {
if (ev.code === code && ev.ctrlKey === true && ev.altKey === false && ev.shiftKey === false) {
ev.preventDefault();
}
});

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();
}
}