From 79d8ca260ab7f585706aae5e2ec48fdd2845443d Mon Sep 17 00:00:00 2001
From: dpassoni <davide.passoni@positech.it>
Date: Tue, 21 Mar 2023 10:32:11 +0100
Subject: [PATCH] ROE and reaction to threat buttons are now updated to reflect
 the state of the selected units

---
 client/demo.js                        | 10 ++++-----
 client/src/panels/unitcontrolpanel.ts | 32 +++++++++------------------
 2 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/client/demo.js b/client/demo.js
index f6e70fe0..283b7166 100644
--- a/client/demo.js
+++ b/client/demo.js
@@ -11,7 +11,7 @@ const DEMO_UNIT_DATA = {
         },
         flightData:  {
             latitude: 37.20,
-            longitude: -115.8,
+            longitude: -115.80,
             altitude: 2000,
             heading: 0.5,
             speed: 300
@@ -52,8 +52,8 @@ const DEMO_UNIT_DATA = {
             targetAltitude: 3000
         },
         optionsData: {
-            ROE: "None",
-            reactionToThreat: "None",
+            ROE: "Designated",
+            reactionToThreat: "Abort",
         }
     },
     ["2"]:{
@@ -95,8 +95,8 @@ const DEMO_UNIT_DATA = {
             targetAltitude: 3000
         },
         optionsData: {
-            ROE: "None",
-            reactionToThreat: "None",
+            ROE: "Designated",
+            reactionToThreat: "Abort",
         }
     },
     ["3"]:{
diff --git a/client/src/panels/unitcontrolpanel.ts b/client/src/panels/unitcontrolpanel.ts
index daa87e01..66dd70b5 100644
--- a/client/src/panels/unitcontrolpanel.ts
+++ b/client/src/panels/unitcontrolpanel.ts
@@ -3,6 +3,7 @@ import { Slider } from "../controls/slider";
 import { aircraftDatabase } from "../units/aircraftdatabase";
 import { groundUnitsDatabase } from "../units/groundunitsdatabase";
 import { Aircraft, GroundUnit, Unit } from "../units/unit";
+import { UnitsManager } from "../units/unitsmanager";
 import { Panel } from "./panel";
 
 const ROEs: string[] = ["Free", "Designated free", "Designated", "Return", "Hold"];
@@ -28,42 +29,31 @@ export class UnitControlPanel extends Panel {
         this.#optionButtons["ROE"] = ROEs.map((option: string, index:number) => {
             var button = document.createElement("button");
             button.title = option;
-            if ( index === 0 ) {
-                button.classList.add( "selected" );
-            }
-            button.addEventListener("click", () => {
-                this.getElement().querySelector("#roe-buttons-container button.selected")?.classList.remove( "selected" );
-                button.classList.add( "selected" );
-                getUnitsManager().selectedUnitsSetROE(button.title);
-            });
+            button.value = option;
+            button.addEventListener("click", () => {getUnitsManager().selectedUnitsSetROE(button.title);});
             return button;
         });
 
         this.#optionButtons["reactionToThreat"] = reactionsToThreat.map((option: string, index:number) => {
             var button = document.createElement("button");
             button.title = option;
-            if ( index === 0 ) {
-                button.classList.add( "selected" );
-            }
-            button.addEventListener("click", () => {
-                this.getElement().querySelector("#reaction-to-threat-buttons-container button.selected")?.classList.remove( "selected" );
-                button.classList.add( "selected" );
-
-                getUnitsManager().selectedUnitsSetROE(button.title);
-            });
+            button.value = option;
+            button.addEventListener("click", () => {getUnitsManager().selectedUnitsSetROE(button.title);});
             return button;
         });
 
         this.getElement().querySelector("#roe-buttons-container")?.append(...this.#optionButtons["ROE"]);
         this.getElement().querySelector("#reaction-to-threat-buttons-container")?.append(...this.#optionButtons["reactionToThreat"]);
 
-        document.addEventListener("unitsSelection", (e: CustomEvent<Unit[]>) => {this.show(); this.update(e.detail)});
+        document.addEventListener("unitUpdated", (e: CustomEvent<Unit>) => {if (e.detail.getSelected()) this.update()});
+        document.addEventListener("unitsSelection", (e: CustomEvent<Unit[]>) => {this.show(); this.update()});
         document.addEventListener("clearSelection", () => {this.hide()});        
 
         this.hide();
     }
 
-    update(units: Unit[]) {
+    update() {
+        var units = getUnitsManager().getSelectedUnits();
         if (this.getElement() != null && units.length > 0)
         {
             this.#showFlightControlSliders(units);
@@ -87,11 +77,11 @@ export class UnitControlPanel extends Panel {
             }));
 
             this.#optionButtons["ROE"].forEach((button: HTMLButtonElement) => {
-                button.classList.toggle("active", units.every((unit: Unit) => unit.getOptionsData().ROE === button.value))
+                button.classList.toggle("selected", units.every((unit: Unit) => unit.getOptionsData().ROE === button.value))
             });    
 
             this.#optionButtons["reactionToThreat"].forEach((button: HTMLButtonElement) => {
-                button.classList.toggle("active", units.every((unit: Unit) => unit.getOptionsData().reactionToThreat === button.value))
+                button.classList.toggle("selected", units.every((unit: Unit) => unit.getOptionsData().reactionToThreat === button.value))
             });     
         }
     }