diff --git a/client/demo.js b/client/demo.js index 2a3360b0..d4c68aff 100644 --- a/client/demo.js +++ b/client/demo.js @@ -80,7 +80,23 @@ const DEMO_UNIT_DATA = { contacts: [], activePath: [ ], isLeader: false - } + }, + ["6"]:{ category: "Aircraft", alive: true, human: false, controlled: false, coalition: 1, country: 0, name: "FA-18C_hornet", unitName: "Bad boi 1-2", groupName: "Bad group 1", state: 1, task: "Being bad", + hasTask: false, position: { lat: 36.8, lng: -116, alt: 1000 }, speed: 200, heading: 315 * Math.PI / 180, isTanker: false, isAWACS: false, onOff: true, followRoads: false, fuel: 50, + desiredSpeed: 300, desiredSpeedType: 1, desiredAltitude: 1000, desiredAltitudeType: 1, leaderID: 0, + formationOffset: { x: 0, y: 0, z: 0 }, + targetID: 0, + targetPosition: { lat: 0, lng: 0, alt: 0 }, + ROE: 1, + reactionToThreat: 1, + emissionsCountermeasures: 1, + TACAN: { isOn: false, XY: 'Y', callsign: 'TKR', channel: 40 }, + radio: { frequency: 124000000, callsign: 1, callsignNumber: 1 }, + generalSettings: { prohibitAA: false, prohibitAfterburner: false, prohibitAG: false, prohibitAirWpn: false, prohibitJettison: false }, + ammo: [{ quantity: 2, name: "A cool missile", guidance: 0, category: 0, missileCategory: 0 } ], + contacts: [{ID: 1, detectionMethod: 16}], + activePath: [ ] + }, } const DEMO_WEAPONS_DATA = { diff --git a/client/src/panels/unitcontrolpanel.ts b/client/src/panels/unitcontrolpanel.ts index a26be730..0f276367 100644 --- a/client/src/panels/unitcontrolpanel.ts +++ b/client/src/panels/unitcontrolpanel.ts @@ -85,6 +85,12 @@ export class UnitControlPanel extends Panel { }); this.hide(); + + // This is for when a ctrl-click happens on the map for deselection and we need to remove the selected unit from the panel + document.addEventListener( "unitDeselection", ( ev:CustomEventInit ) => { + this.getElement().querySelector( `button[data-unit-id="${ev.detail.ID}"]` )?.remove(); + }); + } show() { @@ -107,15 +113,23 @@ export class UnitControlPanel extends Panel { var callsign = unit.getUnitName() || ""; var label = unit.getDatabase()?.getByName(unit.getName())?.label || unit.getName(); + button.setAttribute("data-unit-id", "" + unit.ID ); button.setAttribute("data-label", label); button.setAttribute("data-callsign", callsign); button.setAttribute("data-coalition", unit.getCoalition()); button.classList.add("pill", "highlight-coalition") - button.addEventListener("click", () => { - getUnitsManager().deselectAllUnits(); - getUnitsManager().selectUnit(unit.ID, true); + button.addEventListener("click", ( ev:MouseEventInit ) => { + // Ctrl-click deselection + if ( ev.ctrlKey === true && ev.shiftKey === false && ev.altKey === false ) { + getUnitsManager().deselectUnit( unit.ID ); + button.remove(); + // Deselect all + } else { + getUnitsManager().deselectAllUnits(); + getUnitsManager().selectUnit(unit.ID, true); + } }); return (button); })); diff --git a/client/src/unit/unit.ts b/client/src/unit/unit.ts index 12440ddd..409a4a14 100644 --- a/client/src/unit/unit.ts +++ b/client/src/unit/unit.ts @@ -708,9 +708,15 @@ export class Unit extends CustomMarker { #onClick(e: any) { if (!this.#preventClick) { if (getMap().getState() === IDLE || getMap().getState() === MOVE_UNIT || e.originalEvent.ctrlKey) { - if (!e.originalEvent.ctrlKey) + if (!e.originalEvent.ctrlKey) getUnitsManager().deselectAllUnits(); - this.setSelected(!this.getSelected()); + + this.setSelected( !this.getSelected() ); + if ( this.getSelected() ) { + document.dispatchEvent( new CustomEvent( "unitSelection", { "detail": this })); + } else { + document.dispatchEvent( new CustomEvent( "unitDeselection", { "detail": this })); + } } } diff --git a/client/src/unit/unitsmanager.ts b/client/src/unit/unitsmanager.ts index bfec1c53..7cf35804 100644 --- a/client/src/unit/unitsmanager.ts +++ b/client/src/unit/unitsmanager.ts @@ -196,6 +196,14 @@ export class UnitsManager { } } + deselectUnit( ID:number ) { + if ( this.#units.hasOwnProperty( ID ) ) { + this.#units[ID].setSelected(false); + } else { + console.error( `deselectUnit(): no unit found with ID "${ID}".` ); + } + } + selectUnitsByHotgroup(hotgroup: number) { this.deselectAllUnits(); this.getUnitsByHotgroup(hotgroup).forEach((unit: Unit) => unit.setSelected(true))