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

28
client/src/olympusapp.ts
View File

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

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