From e54a70ffa8fcce278b04c6c64a843a3c5d3a0bcc Mon Sep 17 00:00:00 2001 From: Pax1601 Date: Thu, 4 May 2023 17:32:55 +0200 Subject: [PATCH] Removed 200ms delay and small UI fixes --- client/public/stylesheets/olympus.css | 12 +- .../public/stylesheets/unitcontrolpanel.css | 68 +++--- client/public/stylesheets/units.css | 2 +- client/src/panels/panel.ts | 4 - client/src/panels/unitcontrolpanel.ts | 90 ++++---- client/src/units/unit.ts | 15 +- client/src/units/unitsmanager.ts | 202 +++++++----------- 7 files changed, 181 insertions(+), 212 deletions(-) diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css index af55c114..f139cd75 100644 --- a/client/public/stylesheets/olympus.css +++ b/client/public/stylesheets/olympus.css @@ -77,7 +77,7 @@ form>div { .ol-scrollable { overflow-y: scroll; - scrollbar-color: white var(--background-grey); + scrollbar-color: white transparent; scrollbar-width: thin; } @@ -86,12 +86,20 @@ form>div { } .ol-scrollable::-webkit-scrollbar-track { - background-color: var(--background-grey); + background-color: transparent; border-top-right-radius: 10px; border-bottom-right-radius: 10px; margin-top: 0px; } +.ol-select .ol-scrollable { + scrollbar-color: white var(--background-grey); +} + +.ol-select .ol-scrollable::-webkit-scrollbar-track { + background-color: var(--background-grey); +} + .ol-scrollable::-webkit-scrollbar-thumb { background-color: white; border-radius: 100px; diff --git a/client/public/stylesheets/unitcontrolpanel.css b/client/public/stylesheets/unitcontrolpanel.css index ba50dc42..65ef9439 100644 --- a/client/public/stylesheets/unitcontrolpanel.css +++ b/client/public/stylesheets/unitcontrolpanel.css @@ -1,5 +1,5 @@ body.feature-forceShowUnitControlPanel #unit-control-panel { - display:block !important; + display: block !important; } @@ -13,96 +13,96 @@ body.feature-forceShowUnitControlPanel #unit-control-panel { } #unit-control-panel h3 { - margin-bottom:8px; + margin-bottom: 8px; } #unit-control-panel #selected-units-container { align-items: left; - border-radius: var( --border-radius-md ); - display:flex; + border-radius: var(--border-radius-md); + display: flex; flex-direction: column; max-height: 136px; - overflow-y:auto; + overflow-y: auto; row-gap: 4px; } #unit-control-panel #selected-units-container button { align-items: center; - border-radius: var( --border-radius-lg ); - display:flex; + border-radius: var(--border-radius-lg); + display: flex; font-size: 11px; - height:30px; - padding:8px 0; + height: 30px; + padding: 8px 0; position: relative; - width:90%; + width: 100%; } #unit-control-panel #selected-units-container button::before { - background-color: var( --primary-grey ); - border-radius: var( --border-radius-md ); - content: attr( data-short-label ); - margin:0 5px; - padding:4px 6px; + background-color: var(--primary-grey); + border-radius: 999px; + content: attr(data-short-label); + margin: 0 5px; + padding: 4px 6px; white-space: nowrap; - width:fit-content; + width: 30px; + text-overflow: ellipsis; + overflow: hidden; } - - #unit-control-panel #selected-units-container button[data-coalition="blue"]::before { - background-color: var( --accent-light-blue ); + background-color: var(--accent-light-blue); } #unit-control-panel #selected-units-container button[data-coalition="red"]::before { - background-color: var( --accent-light-red ); - color:var(--secondary-red-outline) + background-color: var(--accent-light-red); + color: var(--secondary-red-outline) } #unit-control-panel #selected-units-container button::after { - border-radius: var( --border-radius-sm ); - content: attr( data-callsign ); + border-radius: var(--border-radius-sm); + content: attr(data-callsign); display: block; overflow: hidden; - padding:4px; - padding-left:0; + padding: 4px; + padding-left: 0; text-align: left; text-overflow: ellipsis; white-space: nowrap; - width:fit-content; + width: fit-content; } #unit-control-panel #selected-units-container button:hover::after { overflow: visible; - text-overflow:initial; + text-overflow: initial; } #unit-control-panel #selected-units-container button:hover::after { - background-color: var( --background-grey ); + background-color: var(--background-grey); } #unit-control-panel #selected-units-container button[data-coalition="blue"]:hover::after { - background-color: var( --primary-blue ); + background-color: var(--primary-blue); } #unit-control-panel #selected-units-container button[data-coalition="red"]:hover::after { - background-color: var( --primary-red ); + background-color: var(--primary-red); } #unit-control-panel h4 { - margin-bottom:8px; + margin-bottom: 8px; } #unit-control-panel #threat, #unit-control-panel #roe { - margin-top:12px; + margin-top: 12px; } #advanced-settings-dialog { width: 400px; } -#advanced-settings-dialog > .ol-dialog-content { +#advanced-settings-dialog>.ol-dialog-content { margin-top: 10px; margin-bottom: 10px; display: flex; @@ -111,6 +111,6 @@ body.feature-forceShowUnitControlPanel #unit-control-panel { row-gap: 10px; } -#advanced-settings-dialog > .ol-dialog-content > .ol-group { +#advanced-settings-dialog>.ol-dialog-content>.ol-group { justify-content: space-between; } \ No newline at end of file diff --git a/client/public/stylesheets/units.css b/client/public/stylesheets/units.css index 1822effd..0142c055 100644 --- a/client/public/stylesheets/units.css +++ b/client/public/stylesheets/units.css @@ -352,7 +352,7 @@ } [data-object|="unit-sam"] .unit-short-label { - translate: 0 50%; + translate: 0 25%; } [data-object|="unit-navyunit"] .unit-short-label { diff --git a/client/src/panels/panel.ts b/client/src/panels/panel.ts index fd439abe..df0a2f48 100644 --- a/client/src/panels/panel.ts +++ b/client/src/panels/panel.ts @@ -11,13 +11,9 @@ export class Panel { this.#visible = true; } - protected onHide() {} - hide() { this.#element.classList.toggle("hide", true); this.#visible = false; - - this.onHide(); } toggle() { diff --git a/client/src/panels/unitcontrolpanel.ts b/client/src/panels/unitcontrolpanel.ts index b8dadaeb..4723d1ba 100644 --- a/client/src/panels/unitcontrolpanel.ts +++ b/client/src/panels/unitcontrolpanel.ts @@ -73,7 +73,7 @@ export class UnitControlPanel extends Panel { this.#advancedSettingsDialog = document.querySelector("#advanced-settings-dialog"); document.addEventListener("unitUpdated", (e: CustomEvent) => { if (e.detail.getSelected()) this.update() }); - document.addEventListener("unitsSelection", (e: CustomEvent) => { this.show(); this.update() }); + document.addEventListener("unitsSelection", (e: CustomEvent) => { this.show(); this.addButtons(); this.update()}); document.addEventListener("clearSelection", () => { this.hide() }); document.addEventListener("applyAdvancedSettings", () => {this.#applyAdvancedSettings();}) document.addEventListener("showAdvancedSettings", () => { @@ -84,13 +84,57 @@ export class UnitControlPanel extends Panel { this.hide(); } - // Do this after panel is hidden (make sure there's a reset) - protected onHide() { + hide() { + super.hide(); + this.#expectedAltitude = -1; this.#expectedSpeed = -1; } + addButtons() { + var units = getUnitsManager().getSelectedUnits(); + this.getElement().querySelector("#selected-units-container")?.replaceChildren(...units.map((unit: Unit, index: number) => { + let database: UnitDatabase | null; + if (unit instanceof Aircraft) + database = aircraftDatabase; + else if (unit instanceof GroundUnit) + database = groundUnitsDatabase; + else + database = null; // TODO add databases for other unit types + + var button = document.createElement("button"); + var callsign = unit.getBaseData().unitName || ""; + + button.setAttribute("data-short-label", database?.getByName(unit.getBaseData().name)?.shortLabel || ""); + button.setAttribute("data-callsign", callsign); + + button.setAttribute("data-coalition", unit.getMissionData().coalition); + button.classList.add("pill", "highlight-coalition") + + button.addEventListener("click", () => { + getUnitsManager().deselectAllUnits(); + getUnitsManager().selectUnit(unit.ID, true); + }); + return (button); + })); + } + + update() { + var units = getUnitsManager().getSelectedUnits(); + this.getElement().querySelector("#advanced-settings-div")?.classList.toggle("hide", units.length != 1); + if (this.getElement() != null && units.length > 0) { + this.#showFlightControlSliders(units); + + this.#optionButtons["ROE"].forEach((button: HTMLButtonElement) => { + button.classList.toggle("selected", units.every((unit: Unit) => unit.getOptionsData().ROE === button.value)) + }); + + this.#optionButtons["reactionToThreat"].forEach((button: HTMLButtonElement) => { + button.classList.toggle("selected", units.every((unit: Unit) => unit.getOptionsData().reactionToThreat === button.value)) + }); + } + } // Update function will only be allowed to update the sliders once it's matched the expected value for the first time (due to lag of Ajax request) #updateCanSetAltitudeSlider(altitude: number) { @@ -109,46 +153,6 @@ export class UnitControlPanel extends Panel { return false; } - update() { - var units = getUnitsManager().getSelectedUnits(); - - this.getElement().querySelector("#advanced-settings-div")?.classList.toggle("hide", units.length != 1); - - if (this.getElement() != null && units.length > 0) { - this.#showFlightControlSliders(units); - - this.getElement().querySelector("#selected-units-container")?.replaceChildren(...units.map((unit: Unit, index: number) => { - let database: UnitDatabase | null; - if (unit instanceof Aircraft) - database = aircraftDatabase; - else if (unit instanceof GroundUnit) - database = groundUnitsDatabase; - else - database = null; // TODO add databases for other unit types - - var button = document.createElement("button"); - var callsign = unit.getBaseData().unitName || ""; - - button.setAttribute("data-short-label", database?.getByName(unit.getBaseData().name)?.shortLabel || ""); - button.setAttribute("data-callsign", callsign); - - button.setAttribute("data-coalition", unit.getMissionData().coalition); - button.classList.add("pill", "highlight-coalition") - - button.addEventListener("click", () => getUnitsManager().selectUnit(unit.ID, true)); - return (button); - })); - - this.#optionButtons["ROE"].forEach((button: HTMLButtonElement) => { - button.classList.toggle("selected", units.every((unit: Unit) => unit.getOptionsData().ROE === button.value)) - }); - - this.#optionButtons["reactionToThreat"].forEach((button: HTMLButtonElement) => { - button.classList.toggle("selected", units.every((unit: Unit) => unit.getOptionsData().reactionToThreat === button.value)) - }); - } - } - #showFlightControlSliders(units: Unit[]) { if (getUnitsManager().getSelectedUnitsType() !== undefined) this.#airspeedSlider.show() diff --git a/client/src/units/unit.ts b/client/src/units/unit.ts index 946a0d47..74971df6 100644 --- a/client/src/units/unit.ts +++ b/client/src/units/unit.ts @@ -370,15 +370,16 @@ export class Unit extends Marker { } #onClick(e: any) { - this.#timer = window.setTimeout(() => { - if (!this.#preventClick) { - if (getMap().getState() === 'IDLE' || getMap().getState() === 'MOVE_UNIT' || e.originalEvent.ctrlKey) { - if (!e.originalEvent.ctrlKey) { - getUnitsManager().deselectAllUnits(); - } - this.setSelected(!this.getSelected()); + if (!this.#preventClick) { + if (getMap().getState() === 'IDLE' || getMap().getState() === 'MOVE_UNIT' || e.originalEvent.ctrlKey) { + if (!e.originalEvent.ctrlKey) { + getUnitsManager().deselectAllUnits(); } + this.setSelected(!this.getSelected()); } + } + + this.#timer = window.setTimeout(() => { this.#preventClick = false; }, 200); } diff --git a/client/src/units/unitsmanager.ts b/client/src/units/unitsmanager.ts index 20782f91..dbc024de 100644 --- a/client/src/units/unitsmanager.ts +++ b/client/src/units/unitsmanager.ts @@ -20,25 +20,18 @@ export class UnitsManager { document.addEventListener('unitSelection', (e: CustomEvent) => this.#onUnitSelection(e.detail)); document.addEventListener('unitDeselection', (e: CustomEvent) => this.#onUnitDeselection(e.detail)); document.addEventListener('keydown', (event) => this.#onKeyDown(event)); - document.addEventListener('deleteSelectedUnits', () => this.selectedUnitsDelete() ) + document.addEventListener('deleteSelectedUnits', () => this.selectedUnitsDelete()) } getSelectableAircraft() { - const units = this.getUnits(); - - return Object.keys( units ).reduce( ( acc:{[key:number]: Unit}, unitId:any ) => { - - const baseData = units[ unitId ].getBaseData(); - - if ( baseData.category === "Aircraft" && baseData.alive === true ) { - acc[ unitId ] = units[ unitId ]; + return Object.keys(units).reduce((acc: { [key: number]: Unit }, unitId: any) => { + const baseData = units[unitId].getBaseData(); + if (baseData.category === "Aircraft" && baseData.alive === true) { + acc[unitId] = units[unitId]; } - return acc; - }, {}); - } getUnits() { @@ -59,45 +52,40 @@ export class UnitsManager { this.#units[ID] = new constructor(ID, data); } } - + removeUnit(ID: number) { } update(data: UnitsData) { Object.keys(data.units) - .filter((ID: string) => !(ID in this.#units)) - .reduce((timeout: number, ID: string) => { - window.setTimeout(() => { - if (!(ID in this.#units)) - this.addUnit(parseInt(ID), data.units[ID]); - this.#units[parseInt(ID)]?.setData(data.units[ID]); - }, timeout); - return timeout + 10; - }, 10); - + .filter((ID: string) => !(ID in this.#units)) + .reduce((timeout: number, ID: string) => { + window.setTimeout(() => { + if (!(ID in this.#units)) + this.addUnit(parseInt(ID), data.units[ID]); + this.#units[parseInt(ID)]?.setData(data.units[ID]); + }, timeout); + return timeout + 10; + }, 10); + Object.keys(data.units) - .filter((ID: string) => ID in this.#units) - .forEach((ID: string) => this.#units[parseInt(ID)]?.setData(data.units[ID])); + .filter((ID: string) => ID in this.#units) + .forEach((ID: string) => this.#units[parseInt(ID)]?.setData(data.units[ID])); } - selectUnit(ID: number, deselectAllUnits: boolean = true) - { - if (deselectAllUnits) - this.getSelectedUnits().filter((unit: Unit) => unit.ID !== ID ).forEach((unit: Unit) => unit.setSelected(false)); + selectUnit(ID: number, deselectAllUnits: boolean = true) { + if (deselectAllUnits) + this.getSelectedUnits().filter((unit: Unit) => unit.ID !== ID).forEach((unit: Unit) => unit.setSelected(false)); this.#units[ID]?.setSelected(true); } - selectFromBounds(bounds: LatLngBounds) - { + selectFromBounds(bounds: LatLngBounds) { this.deselectAllUnits(); - for (let ID in this.#units) - { - if (this.#units[ID].getHidden() == false) - { + for (let ID in this.#units) { + if (this.#units[ID].getHidden() == false) { var latlng = new LatLng(this.#units[ID].getFlightData().latitude, this.#units[ID].getFlightData().longitude); - if (bounds.contains(latlng)) - { + if (bounds.contains(latlng)) { this.#units[ID].setSelected(true); } } @@ -119,44 +107,44 @@ export class UnitsManager { this.#units[ID].setSelected(false); } } - - getSelectedUnitsType () { + + getSelectedUnitsType() { if (this.getSelectedUnits().length == 0) return undefined; return this.getSelectedUnits().map((unit: Unit) => { return unit.constructor.name })?.reduce((a: any, b: any) => { - return a == b? a: undefined + return a == b ? a : undefined }); }; - getSelectedUnitsTargetSpeed () { + getSelectedUnitsTargetSpeed() { if (this.getSelectedUnits().length == 0) return undefined; return this.getSelectedUnits().map((unit: Unit) => { return unit.getTaskData().targetSpeed })?.reduce((a: any, b: any) => { - return a == b? a: undefined + return a == b ? a : undefined }); }; - getSelectedUnitsTargetAltitude () { + getSelectedUnitsTargetAltitude() { if (this.getSelectedUnits().length == 0) return undefined; return this.getSelectedUnits().map((unit: Unit) => { return unit.getTaskData().targetAltitude })?.reduce((a: any, b: any) => { - return a == b? a: undefined + return a == b ? a : undefined }); }; - getSelectedUnitsCoalition () { + getSelectedUnitsCoalition() { if (this.getSelectedUnits().length == 0) return undefined; return this.getSelectedUnits().map((unit: Unit) => { return unit.getMissionData().coalition })?.reduce((a: any, b: any) => { - return a == b? a: undefined + return a == b ? a : undefined }); }; @@ -164,15 +152,14 @@ export class UnitsManager { var selectedUnits = this.getSelectedUnits(); for (let idx in selectedUnits) { const unit = selectedUnits[idx]; - if (unit.getTaskData().currentState === "Follow") - { + if (unit.getTaskData().currentState === "Follow") { const leader = this.getUnitByID(unit.getFormationData().leaderID) if (leader && leader.getSelected()) leader.addDestination(latlng); else unit.addDestination(latlng); } - else + else unit.addDestination(latlng); } this.#showActionMessage(selectedUnits, " new destination added"); @@ -182,83 +169,68 @@ export class UnitsManager { var selectedUnits = this.getSelectedUnits(); for (let idx in selectedUnits) { const unit = selectedUnits[idx]; - if (unit.getTaskData().currentState === "Follow") - { + if (unit.getTaskData().currentState === "Follow") { const leader = this.getUnitByID(unit.getFormationData().leaderID) if (leader && leader.getSelected()) leader.clearDestinations(); else unit.clearDestinations(); } - else + else unit.clearDestinations(); } } - selectedUnitsLandAt(latlng: LatLng) - { + selectedUnitsLandAt(latlng: LatLng) { var selectedUnits = this.getSelectedUnits(); - for (let idx in selectedUnits) - { + for (let idx in selectedUnits) { selectedUnits[idx].landAt(latlng); } this.#showActionMessage(selectedUnits, " landing"); } - selectedUnitsChangeSpeed(speedChange: string) - { + selectedUnitsChangeSpeed(speedChange: string) { var selectedUnits = this.getSelectedUnits(); - for (let idx in selectedUnits) - { + for (let idx in selectedUnits) { selectedUnits[idx].changeSpeed(speedChange); } } - selectedUnitsChangeAltitude(altitudeChange: string) - { + selectedUnitsChangeAltitude(altitudeChange: string) { var selectedUnits = this.getSelectedUnits(); - for (let idx in selectedUnits) - { + for (let idx in selectedUnits) { selectedUnits[idx].changeAltitude(altitudeChange); } } - selectedUnitsSetSpeed(speed: number) - { + selectedUnitsSetSpeed(speed: number) { var selectedUnits = this.getSelectedUnits(); - for (let idx in selectedUnits) - { + for (let idx in selectedUnits) { selectedUnits[idx].setSpeed(speed); } - + this.#showActionMessage(selectedUnits, `setting speed to ${speed * 1.94384} kts`); } - selectedUnitsSetAltitude(altitude: number) - { + selectedUnitsSetAltitude(altitude: number) { var selectedUnits = this.getSelectedUnits(); - for (let idx in selectedUnits) - { + for (let idx in selectedUnits) { selectedUnits[idx].setAltitude(altitude); } this.#showActionMessage(selectedUnits, `setting altitude to ${altitude / 0.3048} ft`); } - selectedUnitsSetROE(ROE: string) - { + selectedUnitsSetROE(ROE: string) { var selectedUnits = this.getSelectedUnits(); - for (let idx in selectedUnits) - { + for (let idx in selectedUnits) { selectedUnits[idx].setROE(ROE); } this.#showActionMessage(selectedUnits, `ROE set to ${ROE}`); } - selectedUnitsSetReactionToThreat(reactionToThreat: string) - { + selectedUnitsSetReactionToThreat(reactionToThreat: string) { var selectedUnits = this.getSelectedUnits(); - for (let idx in selectedUnits) - { + for (let idx in selectedUnits) { selectedUnits[idx].setReactionToThreat(reactionToThreat); } this.#showActionMessage(selectedUnits, `reaction to threat set to ${reactionToThreat}`); @@ -272,38 +244,34 @@ export class UnitsManager { this.#showActionMessage(selectedUnits, `attacking unit ${this.getUnitByID(ID)?.getBaseData().unitName}`); } - selectedUnitsDelete() - { + selectedUnitsDelete() { var selectedUnits = this.getSelectedUnits(); - for (let idx in selectedUnits) - { + for (let idx in selectedUnits) { selectedUnits[idx].delete(); } this.#showActionMessage(selectedUnits, `deleted`); } - selectedUnitsRefuel() - { + selectedUnitsRefuel() { var selectedUnits = this.getSelectedUnits(); - for (let idx in selectedUnits) - { + for (let idx in selectedUnits) { selectedUnits[idx].refuel(); } this.#showActionMessage(selectedUnits, `sent to nearest tanker`); } - selectedUnitsFollowUnit(ID: number, offset?: {"x": number, "y": number, "z": number}, formation?: string) { - if (offset == undefined){ + selectedUnitsFollowUnit(ID: number, offset?: { "x": number, "y": number, "z": number }, formation?: string) { + if (offset == undefined) { // X: front-rear, positive front // Y: top-bottom, positive top // Z: left-right, positive right - offset = {"x": 0, "y": 0, "z": 0}; - if (formation === "Trail") { offset.x = -50; offset.y = -30; offset.z = 0; } - else if (formation === "Echelon (LH)") { offset.x = -50; offset.y = -10; offset.z = -50; } - else if (formation === "Echelon (RH)") { offset.x = -50; offset.y = -10; offset.z = 50; } + offset = { "x": 0, "y": 0, "z": 0 }; + if (formation === "Trail") { offset.x = -50; offset.y = -30; offset.z = 0; } + else if (formation === "Echelon (LH)") { offset.x = -50; offset.y = -10; offset.z = -50; } + else if (formation === "Echelon (RH)") { offset.x = -50; offset.y = -10; offset.z = 50; } else if (formation === "Line abreast (RH)") { offset.x = 0; offset.y = 0; offset.z = 50; } else if (formation === "Line abreast (LH)") { offset.x = 0; offset.y = 0; offset.z = -50; } - else if (formation === "Front") { offset.x = 100; offset.y = 0; offset.z = 0; } + else if (formation === "Front") { offset.x = 100; offset.y = 0; offset.z = 0; } else offset = undefined; } var selectedUnits = this.getSelectedUnits(); @@ -313,18 +281,17 @@ export class UnitsManager { for (let idx in selectedUnits) { var commandedUnit = selectedUnits[idx]; if (offset != undefined) - commandedUnit.followUnit(ID, {"x": offset.x * count, "y": offset.y * count, "z": offset.z * count} ); + commandedUnit.followUnit(ID, { "x": offset.x * count, "y": offset.y * count, "z": offset.z * count }); else { - if (formation === "Diamond") - { + if (formation === "Diamond") { var xl = xr * Math.cos(Math.PI / 4) - yr * Math.sin(Math.PI / 4); var yl = xr * Math.sin(Math.PI / 4) + yr * Math.cos(Math.PI / 4); - commandedUnit.followUnit(ID, {"x": -yl * 50, "y": zr * 10, "z": xl * 50} ); + commandedUnit.followUnit(ID, { "x": -yl * 50, "y": zr * 10, "z": xl * 50 }); if (yr == 0) { layer++; xr = 0; yr = layer; zr = -layer; } else { - if (xr < layer){ xr++; zr--; } - else { yr--; zr++; } + if (xr < layer) { xr++; zr--; } + else { yr--; zr++; } } } } @@ -333,32 +300,26 @@ export class UnitsManager { this.#showActionMessage(selectedUnits, `following unit ${this.getUnitByID(ID)?.getBaseData().unitName}`); } - copyUnits() - { + copyUnits() { this.#copiedUnits = this.getSelectedUnits(); this.#showActionMessage(this.#copiedUnits, `copied`); } - pasteUnits() - { - if (!this.#pasteDisabled) - { - for (let idx in this.#copiedUnits) - { + pasteUnits() { + if (!this.#pasteDisabled) { + for (let idx in this.#copiedUnits) { var unit = this.#copiedUnits[idx]; getMap().addTemporaryMarker(getMap().getMouseCoordinates()); cloneUnit(unit.ID, getMap().getMouseCoordinates()); - this.#showActionMessage(this.#copiedUnits, `pasted`); + this.#showActionMessage(this.#copiedUnits, `pasted`); } this.#pasteDisabled = true; window.setTimeout(() => this.#pasteDisabled = false, 250); } } - #onKeyDown(event: KeyboardEvent) - { - if ( !keyEventWasInInput( event ) && event.key === "Delete") - { + #onKeyDown(event: KeyboardEvent) { + if (!keyEventWasInInput(event) && event.key === "Delete") { this.selectedUnitsDelete(); } } @@ -367,10 +328,9 @@ export class UnitsManager { if (this.getSelectedUnits().length > 0) { getMap().setState(MOVE_UNIT); /* Disable the firing of the selection event for a certain amount of time. This avoids firing many events if many units are selected */ - if (!this.#selectionEventDisabled) - { + if (!this.#selectionEventDisabled) { window.setTimeout(() => { - document.dispatchEvent(new CustomEvent("unitsSelection", {detail: this.getSelectedUnits()})); + document.dispatchEvent(new CustomEvent("unitsSelection", { detail: this.getSelectedUnits() })); this.#selectionEventDisabled = false; }, 100); this.#selectionEventDisabled = true; @@ -387,14 +347,14 @@ export class UnitsManager { getMap().setState(IDLE); document.dispatchEvent(new CustomEvent("clearSelection")); } - else - document.dispatchEvent(new CustomEvent("unitsDeselection", {detail: this.getSelectedUnits()})); + else + document.dispatchEvent(new CustomEvent("unitsDeselection", { detail: this.getSelectedUnits() })); } #showActionMessage(units: Unit[], message: string) { if (units.length == 1) getInfoPopup().setText(`${units[0].getBaseData().unitName} ${message}`); - else + else getInfoPopup().setText(`${units[0].getBaseData().unitName} and ${units.length - 1} other units ${message}`); } } \ No newline at end of file