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

Merge pull request #254 from Pax1601/216-increase-ui-reactivity

Browse Source 
Removed 200ms delay and small UI fixes
This commit is contained in:
Pax1601
2023-05-04 17:34:08 +02:00
committed by GitHub
parent fcf1e2d94a e54a70ffa8
commit 987c8ee41c
7 changed files with 181 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
client/public/stylesheets/olympus.css
View File

@@ -77,7 +77,7 @@ form>div {
.ol-scrollable { .ol-scrollable {
overflow-y: scroll; overflow-y: scroll;
scrollbar-color: white var(--background-grey); scrollbar-color: white transparent;
scrollbar-width: thin; scrollbar-width: thin;
} }
@@ -86,12 +86,20 @@ form>div {
} }
.ol-scrollable::-webkit-scrollbar-track { .ol-scrollable::-webkit-scrollbar-track {
background-color: var(--background-grey); background-color: transparent;
border-top-right-radius: 10px; border-top-right-radius: 10px;
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
margin-top: 0px; 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 { .ol-scrollable::-webkit-scrollbar-thumb {
background-color: white; background-color: white;
border-radius: 100px; border-radius: 100px;

68
client/public/stylesheets/unitcontrolpanel.css
View File

@@ -1,5 +1,5 @@
body.feature-forceShowUnitControlPanel #unit-control-panel { 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 { #unit-control-panel h3 {
margin-bottom:8px; margin-bottom: 8px;
} }
#unit-control-panel #selected-units-container { #unit-control-panel #selected-units-container {
align-items: left; align-items: left;
border-radius: var( --border-radius-md ); border-radius: var(--border-radius-md);
display:flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: 136px; max-height: 136px;
overflow-y:auto; overflow-y: auto;
row-gap: 4px; row-gap: 4px;
} }
#unit-control-panel #selected-units-container button { #unit-control-panel #selected-units-container button {
align-items: center; align-items: center;
border-radius: var( --border-radius-lg ); border-radius: var(--border-radius-lg);
display:flex; display: flex;
font-size: 11px; font-size: 11px;
height:30px; height: 30px;
padding:8px 0; padding: 8px 0;
position: relative; position: relative;
width:90%; width: 100%;
} }
#unit-control-panel #selected-units-container button::before { #unit-control-panel #selected-units-container button::before {
background-color: var( --primary-grey ); background-color: var(--primary-grey);
border-radius: var( --border-radius-md ); border-radius: 999px;
content: attr( data-short-label ); content: attr(data-short-label);
margin:0 5px; margin: 0 5px;
padding:4px 6px; padding: 4px 6px;
white-space: nowrap; white-space: nowrap;
width:fit-content; width: 30px;
text-overflow: ellipsis;
overflow: hidden;
} }
#unit-control-panel #selected-units-container button[data-coalition="blue"]::before { #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 { #unit-control-panel #selected-units-container button[data-coalition="red"]::before {
background-color: var( --accent-light-red ); background-color: var(--accent-light-red);
color:var(--secondary-red-outline) color: var(--secondary-red-outline)
} }
#unit-control-panel #selected-units-container button::after { #unit-control-panel #selected-units-container button::after {
border-radius: var( --border-radius-sm ); border-radius: var(--border-radius-sm);
content: attr( data-callsign ); content: attr(data-callsign);
display: block; display: block;
overflow: hidden; overflow: hidden;
padding:4px; padding: 4px;
padding-left:0; padding-left: 0;
text-align: left; text-align: left;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
width:fit-content; width: fit-content;
} }
#unit-control-panel #selected-units-container button:hover::after { #unit-control-panel #selected-units-container button:hover::after {
overflow: visible; overflow: visible;
text-overflow:initial; text-overflow: initial;
} }
#unit-control-panel #selected-units-container button:hover::after { #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 { #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 { #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 { #unit-control-panel h4 {
margin-bottom:8px; margin-bottom: 8px;
} }
#unit-control-panel #threat, #unit-control-panel #threat,
#unit-control-panel #roe { #unit-control-panel #roe {
margin-top:12px; margin-top: 12px;
} }
#advanced-settings-dialog { #advanced-settings-dialog {
width: 400px; width: 400px;
} }
#advanced-settings-dialog > .ol-dialog-content { #advanced-settings-dialog>.ol-dialog-content {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
display: flex; display: flex;
@@ -111,6 +111,6 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
row-gap: 10px; row-gap: 10px;
} }
#advanced-settings-dialog > .ol-dialog-content > .ol-group { #advanced-settings-dialog>.ol-dialog-content>.ol-group {
justify-content: space-between; justify-content: space-between;
} }

2
client/public/stylesheets/units.css
View File

@@ -352,7 +352,7 @@
} }
[data-object|="unit-sam"] .unit-short-label { [data-object|="unit-sam"] .unit-short-label {
translate: 0 50%; translate: 0 25%;
} }
[data-object|="unit-navyunit"] .unit-short-label { [data-object|="unit-navyunit"] .unit-short-label {

4
client/src/panels/panel.ts
View File

@@ -11,13 +11,9 @@ export class Panel {
this.#visible = true; this.#visible = true;
} }
protected onHide() {}
hide() { hide() {
this.#element.classList.toggle("hide", true); this.#element.classList.toggle("hide", true);
this.#visible = false; this.#visible = false;
this.onHide();
} }
toggle() { toggle() {

90
client/src/panels/unitcontrolpanel.ts
View File

@@ -73,7 +73,7 @@ export class UnitControlPanel extends Panel {
this.#advancedSettingsDialog = <HTMLElement> document.querySelector("#advanced-settings-dialog"); this.#advancedSettingsDialog = <HTMLElement> document.querySelector("#advanced-settings-dialog");
document.addEventListener("unitUpdated", (e: CustomEvent<Unit>) => { if (e.detail.getSelected()) this.update() }); document.addEventListener("unitUpdated", (e: CustomEvent<Unit>) => { if (e.detail.getSelected()) this.update() });
document.addEventListener("unitsSelection", (e: CustomEvent<Unit[]>) => { this.show(); this.update() }); document.addEventListener("unitsSelection", (e: CustomEvent<Unit[]>) => { this.show(); this.addButtons(); this.update()});
document.addEventListener("clearSelection", () => { this.hide() }); document.addEventListener("clearSelection", () => { this.hide() });
document.addEventListener("applyAdvancedSettings", () => {this.#applyAdvancedSettings();}) document.addEventListener("applyAdvancedSettings", () => {this.#applyAdvancedSettings();})
document.addEventListener("showAdvancedSettings", () => { document.addEventListener("showAdvancedSettings", () => {
@@ -84,13 +84,57 @@ export class UnitControlPanel extends Panel {
this.hide(); this.hide();
} }
// Do this after panel is hidden (make sure there's a reset) // Do this after panel is hidden (make sure there's a reset)
protected onHide() { hide() {
super.hide();
this.#expectedAltitude = -1; this.#expectedAltitude = -1;
this.#expectedSpeed = -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) // 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) { #updateCanSetAltitudeSlider(altitude: number) {
@@ -109,46 +153,6 @@ export class UnitControlPanel extends Panel {
return false; 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[]) { #showFlightControlSliders(units: Unit[]) {
if (getUnitsManager().getSelectedUnitsType() !== undefined) if (getUnitsManager().getSelectedUnitsType() !== undefined)
this.#airspeedSlider.show() this.#airspeedSlider.show()

15
client/src/units/unit.ts
View File

@@ -370,15 +370,16 @@ export class Unit extends Marker {
} }
#onClick(e: any) { #onClick(e: any) {
this.#timer = window.setTimeout(() => { if (!this.#preventClick) {
if (!this.#preventClick) { if (getMap().getState() === 'IDLE' || getMap().getState() === 'MOVE_UNIT' || e.originalEvent.ctrlKey) {
if (getMap().getState() === 'IDLE' || getMap().getState() === 'MOVE_UNIT' || e.originalEvent.ctrlKey) { if (!e.originalEvent.ctrlKey) {
if (!e.originalEvent.ctrlKey) { getUnitsManager().deselectAllUnits();
getUnitsManager().deselectAllUnits();
}
this.setSelected(!this.getSelected());
} }
this.setSelected(!this.getSelected());
} }
}
this.#timer = window.setTimeout(() => {
this.#preventClick = false; this.#preventClick = false;
}, 200); }, 200);
} }

202
client/src/units/unitsmanager.ts
View File

@@ -20,25 +20,18 @@ export class UnitsManager {
document.addEventListener('unitSelection', (e: CustomEvent) => this.#onUnitSelection(e.detail)); document.addEventListener('unitSelection', (e: CustomEvent) => this.#onUnitSelection(e.detail));
document.addEventListener('unitDeselection', (e: CustomEvent) => this.#onUnitDeselection(e.detail)); document.addEventListener('unitDeselection', (e: CustomEvent) => this.#onUnitDeselection(e.detail));
document.addEventListener('keydown', (event) => this.#onKeyDown(event)); document.addEventListener('keydown', (event) => this.#onKeyDown(event));
document.addEventListener('deleteSelectedUnits', () => this.selectedUnitsDelete() ) document.addEventListener('deleteSelectedUnits', () => this.selectedUnitsDelete())
} }
getSelectableAircraft() { getSelectableAircraft() {
const units = this.getUnits(); const units = this.getUnits();
return Object.keys(units).reduce((acc: { [key: number]: Unit }, unitId: any) => {
return Object.keys( units ).reduce( ( acc:{[key:number]: Unit}, unitId:any ) => { const baseData = units[unitId].getBaseData();
if (baseData.category === "Aircraft" && baseData.alive === true) {
const baseData = units[ unitId ].getBaseData(); acc[unitId] = units[unitId];
if ( baseData.category === "Aircraft" && baseData.alive === true ) {
acc[ unitId ] = units[ unitId ];
} }
return acc; return acc;
}, {}); }, {});
} }
getUnits() { getUnits() {
@@ -59,45 +52,40 @@ export class UnitsManager {
this.#units[ID] = new constructor(ID, data); this.#units[ID] = new constructor(ID, data);
} }
} }
removeUnit(ID: number) { removeUnit(ID: number) {
} }
update(data: UnitsData) { update(data: UnitsData) {
Object.keys(data.units) Object.keys(data.units)
.filter((ID: string) => !(ID in this.#units)) .filter((ID: string) => !(ID in this.#units))
.reduce((timeout: number, ID: string) => { .reduce((timeout: number, ID: string) => {
window.setTimeout(() => { window.setTimeout(() => {
if (!(ID in this.#units)) if (!(ID in this.#units))
this.addUnit(parseInt(ID), data.units[ID]); this.addUnit(parseInt(ID), data.units[ID]);
this.#units[parseInt(ID)]?.setData(data.units[ID]); this.#units[parseInt(ID)]?.setData(data.units[ID]);
}, timeout); }, timeout);
return timeout + 10; return timeout + 10;
}, 10); }, 10);
Object.keys(data.units) Object.keys(data.units)
.filter((ID: string) => ID in this.#units) .filter((ID: string) => ID in this.#units)
.forEach((ID: string) => this.#units[parseInt(ID)]?.setData(data.units[ID])); .forEach((ID: string) => this.#units[parseInt(ID)]?.setData(data.units[ID]));
} }
selectUnit(ID: number, deselectAllUnits: boolean = true) selectUnit(ID: number, deselectAllUnits: boolean = true) {
{ if (deselectAllUnits)
if (deselectAllUnits) this.getSelectedUnits().filter((unit: Unit) => unit.ID !== ID).forEach((unit: Unit) => unit.setSelected(false));
this.getSelectedUnits().filter((unit: Unit) => unit.ID !== ID ).forEach((unit: Unit) => unit.setSelected(false));
this.#units[ID]?.setSelected(true); this.#units[ID]?.setSelected(true);
} }
selectFromBounds(bounds: LatLngBounds) selectFromBounds(bounds: LatLngBounds) {
{
this.deselectAllUnits(); this.deselectAllUnits();
for (let ID in this.#units) for (let ID in this.#units) {
{ if (this.#units[ID].getHidden() == false) {
if (this.#units[ID].getHidden() == false)
{
var latlng = new LatLng(this.#units[ID].getFlightData().latitude, this.#units[ID].getFlightData().longitude); 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); this.#units[ID].setSelected(true);
} }
} }
@@ -119,44 +107,44 @@ export class UnitsManager {
this.#units[ID].setSelected(false); this.#units[ID].setSelected(false);
} }
} }
getSelectedUnitsType () { getSelectedUnitsType() {
if (this.getSelectedUnits().length == 0) if (this.getSelectedUnits().length == 0)
return undefined; return undefined;
return this.getSelectedUnits().map((unit: Unit) => { return this.getSelectedUnits().map((unit: Unit) => {
return unit.constructor.name return unit.constructor.name
})?.reduce((a: any, b: any) => { })?.reduce((a: any, b: any) => {
return a == b? a: undefined return a == b ? a : undefined
}); });
}; };
getSelectedUnitsTargetSpeed () { getSelectedUnitsTargetSpeed() {
if (this.getSelectedUnits().length == 0) if (this.getSelectedUnits().length == 0)
return undefined; return undefined;
return this.getSelectedUnits().map((unit: Unit) => { return this.getSelectedUnits().map((unit: Unit) => {
return unit.getTaskData().targetSpeed return unit.getTaskData().targetSpeed
})?.reduce((a: any, b: any) => { })?.reduce((a: any, b: any) => {
return a == b? a: undefined return a == b ? a : undefined
}); });
}; };
getSelectedUnitsTargetAltitude () { getSelectedUnitsTargetAltitude() {
if (this.getSelectedUnits().length == 0) if (this.getSelectedUnits().length == 0)
return undefined; return undefined;
return this.getSelectedUnits().map((unit: Unit) => { return this.getSelectedUnits().map((unit: Unit) => {
return unit.getTaskData().targetAltitude return unit.getTaskData().targetAltitude
})?.reduce((a: any, b: any) => { })?.reduce((a: any, b: any) => {
return a == b? a: undefined return a == b ? a : undefined
}); });
}; };
getSelectedUnitsCoalition () { getSelectedUnitsCoalition() {
if (this.getSelectedUnits().length == 0) if (this.getSelectedUnits().length == 0)
return undefined; return undefined;
return this.getSelectedUnits().map((unit: Unit) => { return this.getSelectedUnits().map((unit: Unit) => {
return unit.getMissionData().coalition return unit.getMissionData().coalition
})?.reduce((a: any, b: any) => { })?.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(); var selectedUnits = this.getSelectedUnits();
for (let idx in selectedUnits) { for (let idx in selectedUnits) {
const unit = selectedUnits[idx]; const unit = selectedUnits[idx];
if (unit.getTaskData().currentState === "Follow") if (unit.getTaskData().currentState === "Follow") {
{
const leader = this.getUnitByID(unit.getFormationData().leaderID) const leader = this.getUnitByID(unit.getFormationData().leaderID)
if (leader && leader.getSelected()) if (leader && leader.getSelected())
leader.addDestination(latlng); leader.addDestination(latlng);
else else
unit.addDestination(latlng); unit.addDestination(latlng);
} }
else else
unit.addDestination(latlng); unit.addDestination(latlng);
} }
this.#showActionMessage(selectedUnits, " new destination added"); this.#showActionMessage(selectedUnits, " new destination added");
@@ -182,83 +169,68 @@ export class UnitsManager {
var selectedUnits = this.getSelectedUnits(); var selectedUnits = this.getSelectedUnits();
for (let idx in selectedUnits) { for (let idx in selectedUnits) {
const unit = selectedUnits[idx]; const unit = selectedUnits[idx];
if (unit.getTaskData().currentState === "Follow") if (unit.getTaskData().currentState === "Follow") {
{
const leader = this.getUnitByID(unit.getFormationData().leaderID) const leader = this.getUnitByID(unit.getFormationData().leaderID)
if (leader && leader.getSelected()) if (leader && leader.getSelected())
leader.clearDestinations(); leader.clearDestinations();
else else
unit.clearDestinations(); unit.clearDestinations();
} }
else else
unit.clearDestinations(); unit.clearDestinations();
} }
} }
selectedUnitsLandAt(latlng: LatLng) selectedUnitsLandAt(latlng: LatLng) {
{
var selectedUnits = this.getSelectedUnits(); var selectedUnits = this.getSelectedUnits();
for (let idx in selectedUnits) for (let idx in selectedUnits) {
{
selectedUnits[idx].landAt(latlng); selectedUnits[idx].landAt(latlng);
} }
this.#showActionMessage(selectedUnits, " landing"); this.#showActionMessage(selectedUnits, " landing");
} }
selectedUnitsChangeSpeed(speedChange: string) selectedUnitsChangeSpeed(speedChange: string) {
{
var selectedUnits = this.getSelectedUnits(); var selectedUnits = this.getSelectedUnits();
for (let idx in selectedUnits) for (let idx in selectedUnits) {
{
selectedUnits[idx].changeSpeed(speedChange); selectedUnits[idx].changeSpeed(speedChange);
} }
} }
selectedUnitsChangeAltitude(altitudeChange: string) selectedUnitsChangeAltitude(altitudeChange: string) {
{
var selectedUnits = this.getSelectedUnits(); var selectedUnits = this.getSelectedUnits();
for (let idx in selectedUnits) for (let idx in selectedUnits) {
{
selectedUnits[idx].changeAltitude(altitudeChange); selectedUnits[idx].changeAltitude(altitudeChange);
} }
} }
selectedUnitsSetSpeed(speed: number) selectedUnitsSetSpeed(speed: number) {
{
var selectedUnits = this.getSelectedUnits(); var selectedUnits = this.getSelectedUnits();
for (let idx in selectedUnits) for (let idx in selectedUnits) {
{
selectedUnits[idx].setSpeed(speed); selectedUnits[idx].setSpeed(speed);
} }
this.#showActionMessage(selectedUnits, `setting speed to ${speed * 1.94384} kts`); this.#showActionMessage(selectedUnits, `setting speed to ${speed * 1.94384} kts`);
} }
selectedUnitsSetAltitude(altitude: number) selectedUnitsSetAltitude(altitude: number) {
{
var selectedUnits = this.getSelectedUnits(); var selectedUnits = this.getSelectedUnits();
for (let idx in selectedUnits) for (let idx in selectedUnits) {
{
selectedUnits[idx].setAltitude(altitude); selectedUnits[idx].setAltitude(altitude);
} }
this.#showActionMessage(selectedUnits, `setting altitude to ${altitude / 0.3048} ft`); this.#showActionMessage(selectedUnits, `setting altitude to ${altitude / 0.3048} ft`);
} }
selectedUnitsSetROE(ROE: string) selectedUnitsSetROE(ROE: string) {
{
var selectedUnits = this.getSelectedUnits(); var selectedUnits = this.getSelectedUnits();
for (let idx in selectedUnits) for (let idx in selectedUnits) {
{
selectedUnits[idx].setROE(ROE); selectedUnits[idx].setROE(ROE);
} }
this.#showActionMessage(selectedUnits, `ROE set to ${ROE}`); this.#showActionMessage(selectedUnits, `ROE set to ${ROE}`);
} }
selectedUnitsSetReactionToThreat(reactionToThreat: string) selectedUnitsSetReactionToThreat(reactionToThreat: string) {
{
var selectedUnits = this.getSelectedUnits(); var selectedUnits = this.getSelectedUnits();
for (let idx in selectedUnits) for (let idx in selectedUnits) {
{
selectedUnits[idx].setReactionToThreat(reactionToThreat); selectedUnits[idx].setReactionToThreat(reactionToThreat);
} }
this.#showActionMessage(selectedUnits, `reaction to threat set to ${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}`); this.#showActionMessage(selectedUnits, `attacking unit ${this.getUnitByID(ID)?.getBaseData().unitName}`);
} }
selectedUnitsDelete() selectedUnitsDelete() {
{
var selectedUnits = this.getSelectedUnits(); var selectedUnits = this.getSelectedUnits();
for (let idx in selectedUnits) for (let idx in selectedUnits) {
{
selectedUnits[idx].delete(); selectedUnits[idx].delete();
} }
this.#showActionMessage(selectedUnits, `deleted`); this.#showActionMessage(selectedUnits, `deleted`);
} }
selectedUnitsRefuel() selectedUnitsRefuel() {
{
var selectedUnits = this.getSelectedUnits(); var selectedUnits = this.getSelectedUnits();
for (let idx in selectedUnits) for (let idx in selectedUnits) {
{
selectedUnits[idx].refuel(); selectedUnits[idx].refuel();
} }
this.#showActionMessage(selectedUnits, `sent to nearest tanker`); this.#showActionMessage(selectedUnits, `sent to nearest tanker`);
} }
selectedUnitsFollowUnit(ID: number, offset?: {"x": number, "y": number, "z": number}, formation?: string) { selectedUnitsFollowUnit(ID: number, offset?: { "x": number, "y": number, "z": number }, formation?: string) {
if (offset == undefined){ if (offset == undefined) {
// X: front-rear, positive front // X: front-rear, positive front
// Y: top-bottom, positive top // Y: top-bottom, positive top
// Z: left-right, positive right // Z: left-right, positive right
offset = {"x": 0, "y": 0, "z": 0}; offset = { "x": 0, "y": 0, "z": 0 };
if (formation === "Trail") { offset.x = -50; offset.y = -30; offset.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 (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 === "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 (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 === "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; else offset = undefined;
} }
var selectedUnits = this.getSelectedUnits(); var selectedUnits = this.getSelectedUnits();
@@ -313,18 +281,17 @@ export class UnitsManager {
for (let idx in selectedUnits) { for (let idx in selectedUnits) {
var commandedUnit = selectedUnits[idx]; var commandedUnit = selectedUnits[idx];
if (offset != undefined) 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 { else {
if (formation === "Diamond") if (formation === "Diamond") {
{
var xl = xr * Math.cos(Math.PI / 4) - yr * Math.sin(Math.PI / 4); 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); 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; } if (yr == 0) { layer++; xr = 0; yr = layer; zr = -layer; }
else { else {
if (xr < layer){ xr++; zr--; } if (xr < layer) { xr++; zr--; }
else { yr--; zr++; } else { yr--; zr++; }
} }
} }
} }
@@ -333,32 +300,26 @@ export class UnitsManager {
this.#showActionMessage(selectedUnits, `following unit ${this.getUnitByID(ID)?.getBaseData().unitName}`); this.#showActionMessage(selectedUnits, `following unit ${this.getUnitByID(ID)?.getBaseData().unitName}`);
} }
copyUnits() copyUnits() {
{
this.#copiedUnits = this.getSelectedUnits(); this.#copiedUnits = this.getSelectedUnits();
this.#showActionMessage(this.#copiedUnits, `copied`); this.#showActionMessage(this.#copiedUnits, `copied`);
} }
pasteUnits() pasteUnits() {
{ if (!this.#pasteDisabled) {
if (!this.#pasteDisabled) for (let idx in this.#copiedUnits) {
{
for (let idx in this.#copiedUnits)
{
var unit = this.#copiedUnits[idx]; var unit = this.#copiedUnits[idx];
getMap().addTemporaryMarker(getMap().getMouseCoordinates()); getMap().addTemporaryMarker(getMap().getMouseCoordinates());
cloneUnit(unit.ID, getMap().getMouseCoordinates()); cloneUnit(unit.ID, getMap().getMouseCoordinates());
this.#showActionMessage(this.#copiedUnits, `pasted`); this.#showActionMessage(this.#copiedUnits, `pasted`);
} }
this.#pasteDisabled = true; this.#pasteDisabled = true;
window.setTimeout(() => this.#pasteDisabled = false, 250); window.setTimeout(() => this.#pasteDisabled = false, 250);
} }
} }
#onKeyDown(event: KeyboardEvent) #onKeyDown(event: KeyboardEvent) {
{ if (!keyEventWasInInput(event) && event.key === "Delete") {
if ( !keyEventWasInInput( event ) && event.key === "Delete")
{
this.selectedUnitsDelete(); this.selectedUnitsDelete();
} }
} }
@@ -367,10 +328,9 @@ export class UnitsManager {
if (this.getSelectedUnits().length > 0) { if (this.getSelectedUnits().length > 0) {
getMap().setState(MOVE_UNIT); 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 */ /* 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(() => { window.setTimeout(() => {
document.dispatchEvent(new CustomEvent("unitsSelection", {detail: this.getSelectedUnits()})); document.dispatchEvent(new CustomEvent("unitsSelection", { detail: this.getSelectedUnits() }));
this.#selectionEventDisabled = false; this.#selectionEventDisabled = false;
}, 100); }, 100);
this.#selectionEventDisabled = true; this.#selectionEventDisabled = true;
@@ -387,14 +347,14 @@ export class UnitsManager {
getMap().setState(IDLE); getMap().setState(IDLE);
document.dispatchEvent(new CustomEvent("clearSelection")); document.dispatchEvent(new CustomEvent("clearSelection"));
} }
else else
document.dispatchEvent(new CustomEvent("unitsDeselection", {detail: this.getSelectedUnits()})); document.dispatchEvent(new CustomEvent("unitsDeselection", { detail: this.getSelectedUnits() }));
} }
#showActionMessage(units: Unit[], message: string) { #showActionMessage(units: Unit[], message: string) {
if (units.length == 1) if (units.length == 1)
getInfoPopup().setText(`${units[0].getBaseData().unitName} ${message}`); getInfoPopup().setText(`${units[0].getBaseData().unitName} ${message}`);
else else
getInfoPopup().setText(`${units[0].getBaseData().unitName} and ${units.length - 1} other units ${message}`); getInfoPopup().setText(`${units[0].getBaseData().unitName} and ${units.length - 1} other units ${message}`);
} }
} }