From fcb02602a0ec0de23924c074279200524ef26b16 Mon Sep 17 00:00:00 2001 From: Pax1601 Date: Mon, 2 Oct 2023 10:12:24 +0200 Subject: [PATCH] Reformatted some files --- client/src/olympusapp.ts | 28 +++--- client/src/panels/unitlistpanel.ts | 148 ++++++++++------------------- 2 files changed, 64 insertions(+), 112 deletions(-) diff --git a/client/src/olympusapp.ts b/client/src/olympusapp.ts index a4d111fa..8d9120e0 100644 --- a/client/src/olympusapp.ts +++ b/client/src/olympusapp.ts @@ -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(); } }); diff --git a/client/src/panels/unitlistpanel.ts b/client/src/panels/unitlistpanel.ts index f03721b6..861f9723 100644 --- a/client/src/panels/unitlistpanel.ts +++ b/client/src/panels/unitlistpanel.ts @@ -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; - 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 += `
${unit.getUnitName()}
@@ -113,96 +85,76 @@ export class UnitListPanel extends Panel {
${unit.getCoalition()}
${unit.getHuman() ? "Human" : "AI"}
`; - }); - } 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(); - } }