Ctrl-click-deselect

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( "unitDeselected", ( ev:CustomEventInit ) => {
+            this.getElement().querySelector( `button[data-unit-id="${ev.detail.unit.ID}"]` )?.remove();
+        });
+
     }
 
     show() {
@@ -107,15 +113,26 @@ 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);
             }));

client/src/unit/unit.ts

@@ -708,9 +708,30 @@ 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());
+                }
+
+                const unitIsSelected = !this.getSelected();
+
+                this.setSelected( unitIsSelected );
+                                
+                
+                //  Tell everyone a unit (de-)selection has happened, usually a panel or something.
+
+                const detail = {
+                    "detail": {
+                        "unit": this
+                    }
+                };
+
+                if ( unitIsSelected ) {
+                    document.dispatchEvent( new CustomEvent( "unitSelected", detail ) );
+                } else {
+                    document.dispatchEvent( new CustomEvent( "unitDeselected", detail ) );
+                }
+
             }
         }
 

client/src/unit/unitsmanager.ts

@@ -196,6 +196,16 @@ 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))