Added hotgroups ui and basic functions

User interaction still TBD

client/src/index.ts

@@ -9,11 +9,12 @@ import { AIC } from "./aic/aic";
 import { ATC } from "./atc/atc";
 import { FeatureSwitches } from "./featureswitches";
 import { LogPanel } from "./panels/logpanel";
-import { getAirbases, getBullseye, getConfig, getFreezed, getMission, getUnits, setAddress, setCredentials, setFreezed, startUpdate, toggleDemoEnabled } from "./server/server";
+import { getConfig, getFreezed, setAddress, setCredentials, setFreezed, startUpdate, toggleDemoEnabled } from "./server/server";
 import { UnitDataTable } from "./units/unitdatatable";
 import { keyEventWasInInput } from "./other/utils";
 import { Popup } from "./popups/popup";
 import { Dropdown } from "./controls/dropdown";
+import { HotgroupPanel } from "./panels/hotgrouppanel";
 
 var map: Map;
 
@@ -28,6 +29,7 @@ var connectionStatusPanel: ConnectionStatusPanel;
 var unitControlPanel: UnitControlPanel;
 var mouseInfoPanel: MouseInfoPanel;
 var logPanel: LogPanel;
+var hotgroupPanel: HotgroupPanel;
 
 var infoPopup: Popup;
 
@@ -50,6 +52,7 @@ function setup() {
     unitControlPanel = new UnitControlPanel("unit-control-panel");
     connectionStatusPanel = new ConnectionStatusPanel("connection-status-panel");
     mouseInfoPanel = new MouseInfoPanel("mouse-info-panel");
+    hotgroupPanel = new HotgroupPanel("hotgroup-panel");
     //logPanel = new LogPanel("log-panel");
 
     /* Popups */
@@ -147,6 +150,20 @@ function setupEvents() {
             case "ArrowDown":
                 getMap().handleMapPanning(ev);
                 break;
+            case "Digit1":
+            case "Digit2":
+            case "Digit3":
+            case "Digit4":
+            case "Digit5":
+            case "Digit6":
+            case "Digit7":
+            case "Digit8":
+            case "Digit9":
+                if (ev.ctrlKey)
+                    getUnitsManager().selectedUnitsAddToHotgroup(parseInt(ev.key));
+                else
+                    getUnitsManager().selectUnitsByHotgroup(parseInt(ev.key));
+                break;
         }
     });
 
@@ -232,6 +249,10 @@ export function getConnectionStatusPanel() {
     return connectionStatusPanel;
 }
 
+export function getHotgroupPanel() {
+    return hotgroupPanel;
+}
+
 export function setActiveCoalition(newActiveCoalition: string) {
     activeCoalition = newActiveCoalition;
     document.querySelectorAll('[data-active-coalition]').forEach((element: any) => { element.setAttribute("data-active-coalition", activeCoalition) });

client/src/panels/hotgrouppanel.ts

@@ -0,0 +1,25 @@
+import { getUnitsManager } from "..";
+import { Panel } from "./panel";
+
+export class HotgroupPanel extends Panel {
+    addHotgroup(hotgroup: number) {
+        this.removeHotgroup(hotgroup);
+        const hotgroupHtml =    `<div class="unit-hotgroup">
+                                    <div class="unit-hotgroup-id">${hotgroup}</div>
+                                </div>
+                                x${getUnitsManager().getUnitsByHotgroup(hotgroup).length}`
+        var el = document.createElement("div");
+        el.classList.add("hotgroup-selector");
+        el.innerHTML = hotgroupHtml;
+        el.toggleAttribute(`data-hotgroup-${hotgroup}`, true)
+        this.getElement().appendChild(el);
+        el.addEventListener("click", () => {
+            getUnitsManager().selectUnitsByHotgroup(hotgroup);
+        });
+    }
+
+    removeHotgroup(hotgroup: number) {
+        const el = this.getElement().querySelector(`[data-hotgroup-${hotgroup}]`) as HTMLElement;
+        if (el) el.remove();
+    }
+}

client/src/units/unit.ts

@@ -77,6 +77,8 @@ export class Unit extends Marker {
 
     #timer: number = 0;
 
+    #hotgroup: number | null = null;
+
     static getConstructor(type: string) {
         if (type === "GroundUnit") return GroundUnit;
         if (type === "Aircraft") return Aircraft;
@@ -265,6 +267,14 @@ export class Unit extends Marker {
         return this.#selectable;
     }
 
+    setHotgroup(hotgroup: number | null) {
+        this.#hotgroup = hotgroup;
+    }
+
+    getHotgroup() {
+        return this.#hotgroup;
+    }
+
     /********************** Visibility *************************/
     updateVisibility()
     {
@@ -556,7 +566,6 @@ export class Unit extends Marker {
                 });
 
                 /* Turn on ordnance indicators */
-
                 var hasFox1 = element.querySelector(".unit")?.hasAttribute("data-has-fox-1");
                 var hasFox2 = element.querySelector(".unit")?.hasAttribute("data-has-fox-2");
                 var hasFox3 = element.querySelector(".unit")?.hasAttribute("data-has-fox-3");
@@ -568,25 +577,30 @@ export class Unit extends Marker {
                 var newHasOtherAmmo = false;
                 Object.values(this.getMissionData().ammo).forEach((ammo: any) => {
                     if (ammo.desc.category == 1 && ammo.desc.missileCategory == 1) {
-                        if (ammo.desc.guidance == 4 || ammo.desc.guidance == 5) {
+                        if (ammo.desc.guidance == 4 || ammo.desc.guidance == 5) 
                             newHasFox1 = true;
-                        }
-                        else if (ammo.desc.guidance == 2) {
+                        else if (ammo.desc.guidance == 2) 
                             newHasFox2 = true;
-                        }
-                        else if (ammo.desc.guidance == 3) {
+                        else if (ammo.desc.guidance == 3) 
                             newHasFox3 = true;
-                        }
                     }
-                    else {
+                    else 
                         newHasOtherAmmo = true;
-                    }
                 });
 
                 if (hasFox1 != newHasFox1) element.querySelector(".unit")?.toggleAttribute("data-has-fox-1", newHasFox1);
                 if (hasFox2 != newHasFox2) element.querySelector(".unit")?.toggleAttribute("data-has-fox-2", newHasFox2);
                 if (hasFox3 != newHasFox3) element.querySelector(".unit")?.toggleAttribute("data-has-fox-3", newHasFox3);
                 if (hasOtherAmmo != newHasOtherAmmo) element.querySelector(".unit")?.toggleAttribute("data-has-other-ammo", newHasOtherAmmo);
+
+                /* Draw the hotgroup element */
+                if (this.#hotgroup) {
+                    element.querySelector(".unit")?.toggleAttribute("data-is-in-hotgroup", this.#hotgroup != null);
+                    const hotgroupEl = element.querySelector(".unit-hotgroup-id") as HTMLElement;
+                    if (hotgroupEl)
+                        hotgroupEl.innerText = String(this.#hotgroup);
+                }
+
             }
             
             /* Set vertical offset for altitude stacking */
@@ -732,6 +746,9 @@ export class GroundUnit extends Unit {
                     <div class="unit-selected-spotlight"></div>
                     <div class="unit-marker"></div>
                     <div class="unit-short-label">${role?.substring(0, 1)?.toUpperCase() || ""}</div>
+                    <div class="unit-hotgroup">
+                        <div class="unit-hotgroup-id"></div>
+                    </div>
                 </div>`
     }
 

client/src/units/unitsmanager.ts

@@ -1,5 +1,5 @@
 import { LatLng, LatLngBounds } from "leaflet";
-import { getInfoPopup, getMap, getUnitDataTable } from "..";
+import { getHotgroupPanel, getInfoPopup, getMap, getUnitDataTable } from "..";
 import { Unit } from "./unit";
 import { cloneUnit } from "../server/server";
 import { IDLE, MOVE_UNIT } from "../map/map";
@@ -45,6 +45,10 @@ export class UnitsManager {
             return null;
     }
 
+    getUnitsByHotgroup(hotgroup: number) {
+        return Object.values(this.#units).filter((unit: Unit) => {return unit.getHotgroup() == hotgroup});
+    }
+
     addUnit(ID: number, data: UnitData) {
         /* The name of the unit category is exactly the same as the constructor name */
         var constructor = Unit.getConstructor(data.baseData.category);
@@ -112,6 +116,10 @@ export class UnitsManager {
         }
     }
 
+    selectUnitsByHotgroup(hotgroup: number) {
+        this.getUnitsByHotgroup(hotgroup).forEach((unit: Unit) => unit.setSelected(true))
+    }
+
     getSelectedUnitsType() {
         if (this.getSelectedUnits().length == 0)
             return undefined;
@@ -259,7 +267,7 @@ export class UnitsManager {
     }
 
     selectedUnitsRefuel() {
-         var selectedUnits = this.getSelectedUnits({excludeHumans: true});
+        var selectedUnits = this.getSelectedUnits({excludeHumans: true});
         for (let idx in selectedUnits) {
             selectedUnits[idx].refuel();
         }
@@ -309,6 +317,16 @@ export class UnitsManager {
         this.#showActionMessage(selectedUnits, `following unit ${this.getUnitByID(ID)?.getBaseData().unitName}`);
     }
 
+    selectedUnitsAddToHotgroup(hotgroup: number)
+    {
+        var selectedUnits = this.getSelectedUnits();
+        for (let idx in selectedUnits) {
+            selectedUnits[idx].setHotgroup(hotgroup);
+        }
+        this.#showActionMessage(selectedUnits, `added to hotgroup ${hotgroup}`);
+        getHotgroupPanel().addHotgroup(hotgroup);
+    }
+
     /***********************************************/
     copyUnits() {
         this.#copiedUnits = this.getSelectedUnits(); /* Can be applied to humans too */