fix: Commander mode not working if AWACS reference coalition different from commanded coalition

frontend/react/src/mission/missionmanager.ts

@@ -291,6 +291,17 @@ export class MissionManager {
     this.setSpentSpawnPoints(0);
     this.refreshSpawnPoints();
 
+    if (commandModeOptions.commandMode === BLUE_COMMANDER && getApp().getMap().getOptions().AWACSCoalition !== "blue") {
+      getApp()
+        .getMap()
+        .setOption("AWACSCoalition", "blue" as Coalition);
+    }
+    else if (commandModeOptions.commandMode === RED_COMMANDER && getApp().getMap().getOptions().AWACSCoalition !== "red") {
+      getApp()
+        .getMap()
+        .setOption("AWACSCoalition", "red" as Coalition);
+    }
+
     if (commandModeOptionsChanged) {
       CommandModeOptionsChangedEvent.dispatch(this.#commandModeOptions);
     }

frontend/react/src/ui/panels/header.tsx

@@ -272,12 +272,19 @@ export function Header() {
         {commandModeOptions.commandMode === GAME_MASTER && (
           <div
             className={`
-              flex h-full cursor-pointer rounded-md border-2 border-transparent
+              flex h-full rounded-md border-2 border-transparent bg-olympus-600
-              bg-olympus-600 px-4 text-gray-200
+              px-4 text-gray-200
-              hover:bg-olympus-400
+              ${
+                enabledCommandModes.length > 1
+                  ? `
+                    cursor-pointer
+                    hover:bg-olympus-400
+                  `
+                  : ""
+              }
             `}
             onClick={() => {
-              if (enabledCommandModes.length > 0) {
+              if (enabledCommandModes.length > 1) {
                 let blueCommandModeIndex = enabledCommandModes.indexOf(BLUE_COMMANDER);
                 let redCommandModeIndex = enabledCommandModes.indexOf(RED_COMMANDER);
                 if (blueCommandModeIndex >= 0) getApp().getServerManager().setActiveCommandMode(BLUE_COMMANDER);
@@ -287,14 +294,18 @@ export function Header() {
             }}
           >
             <span className="my-auto text-nowrap font-bold">Game Master</span>
-            {enabledCommandModes.length > 0 && (
+            {enabledCommandModes.length > 1 && (
               <>
                 {loadingNewCommandMode ? (
                   <FaSpinner
-                    className={`my-auto ml-2 animate-spin text-white`}
+                    className={`
+                  my-auto ml-2 animate-spin text-white
+                `}
                   />
                 ) : (
-                  <FaRedo className={`my-auto ml-2 text-gray-200`} />
+                  <FaRedo
+                    className={`my-auto ml-2 text-gray-200`}
+                  />
                 )}
               </>
             )}
@@ -303,12 +314,19 @@ export function Header() {
         {commandModeOptions.commandMode === BLUE_COMMANDER && (
           <div
             className={`
-              flex h-full cursor-pointer rounded-md border-2 border-transparent
+              ${
-              bg-blue-600 px-4 text-gray-200
+                enabledCommandModes.length > 1
-              hover:bg-blue-400
+                  ? `
+                    cursor-pointer
+                    hover:bg-blue-500
+                  `
+                  : ""
+              }
+              flex h-full rounded-md border-2 border-transparent bg-blue-600
+              px-4 text-gray-200
             `}
             onClick={() => {
-              if (enabledCommandModes.length > 0) {
+              if (enabledCommandModes.length > 1) {
                 let gameMasterCommandModeIndex = enabledCommandModes.indexOf(GAME_MASTER);
                 let redCommandModeIndex = enabledCommandModes.indexOf(RED_COMMANDER);
                 if (redCommandModeIndex >= 0) getApp().getServerManager().setActiveCommandMode(RED_COMMANDER);
@@ -318,12 +336,10 @@ export function Header() {
             }}
           >
             <span className="my-auto text-nowrap font-bold">BLUE Commander</span>
-            {enabledCommandModes.length > 0 && (
+            {enabledCommandModes.length > 1 && (
               <>
                 {loadingNewCommandMode ? (
-                  <FaSpinner
+                  <FaSpinner className={`my-auto ml-2 animate-spin text-gray-200`} />
-                    className={`my-auto ml-2 animate-spin text-gray-200`}
-                  />
                 ) : (
                   <FaRedo className={`my-auto ml-2 text-gray-200`} />
                 )}
@@ -334,12 +350,20 @@ export function Header() {
         {commandModeOptions.commandMode === RED_COMMANDER && (
           <div
             className={`
-              flex h-full cursor-pointer rounded-md border-2 border-transparent
+              flex h-full
-              bg-red-600 px-4 text-gray-200
+              ${
-              hover:bg-red-500
+                enabledCommandModes.length > 1
+                  ? `
+                    cursor-pointer
+                    hover:bg-red-500
+                  `
+                  : ""
+              }
+              rounded-md border-2 border-transparent bg-red-600 px-4
+              text-gray-200
             `}
             onClick={() => {
-              if (enabledCommandModes.length > 0) {
+              if (enabledCommandModes.length > 1) {
                 let gameMasterCommandModeIndex = enabledCommandModes.indexOf(GAME_MASTER);
                 let blueCommandModeIndex = enabledCommandModes.indexOf(BLUE_COMMANDER);
                 if (gameMasterCommandModeIndex >= 0) getApp().getServerManager().setActiveCommandMode(GAME_MASTER);
@@ -349,12 +373,10 @@ export function Header() {
             }}
           >
             <span className="my-auto text-nowrap font-bold">RED Commander</span>
-            {enabledCommandModes.length > 0 && (
+            {enabledCommandModes.length > 1 && (
               <>
                 {loadingNewCommandMode ? (
-                  <FaSpinner
+                  <FaSpinner className={`my-auto ml-2 animate-spin text-gray-200`} />
-                    className={`my-auto ml-2 animate-spin text-gray-200`}
-                  />
                 ) : (
                   <FaRedo className={`my-auto ml-2 text-gray-200`} />
                 )}
@@ -463,7 +485,11 @@ export function Header() {
                 onClick={(event) => unitTypeFilterClickHandler(event, entry[0])}
                 checked={!mapHiddenTypes[entry[0]]}
                 icon={entry[1]}
-                tooltip={"Hide/show " + entry[0] + " units. Tip: holding ctrl key while clicking will hide other unit categories. To show all units again, hold ctrl while clicking a displayed unit category."}
+                tooltip={
+                  "Hide/show " +
+                  entry[0] +
+                  " units. Tip: holding ctrl key while clicking will hide other unit categories. To show all units again, hold ctrl while clicking a displayed unit category."
+                }
               />
             );
           })}

frontend/react/src/ui/panels/optionsmenu.tsx

@@ -4,8 +4,8 @@ import { OlCheckbox } from "../components/olcheckbox";
 import { OlRangeSlider } from "../components/olrangeslider";
 import { OlNumberInput } from "../components/olnumberinput";
 import { getApp } from "../../olympusapp";
-import { MAP_OPTIONS_DEFAULTS, OlympusState, OptionsSubstate } from "../../constants/constants";
+import { COMMAND_MODE_OPTIONS_DEFAULTS, GAME_MASTER, MAP_OPTIONS_DEFAULTS, OlympusState, OptionsSubstate } from "../../constants/constants";
-import { BindShortcutRequestEvent, MapOptionsChangedEvent, ShortcutsChangedEvent } from "../../events";
+import { BindShortcutRequestEvent, CommandModeOptionsChangedEvent, MapOptionsChangedEvent, ShortcutsChangedEvent } from "../../events";
 import { OlAccordion } from "../components/olaccordion";
 import { Shortcut } from "../../shortcut/shortcut";
 import { OlSearchBar } from "../components/olsearchbar";
@@ -29,6 +29,7 @@ export function OptionsMenu(props: { open: boolean; onClose: () => void; childre
   const [filterString, setFilterString] = useState("");
   const [admin, setAdmin] = useState(false);
   const [password, setPassword] = useState("");
+  const [commandModeOptions, setCommandModeOptions] = useState(COMMAND_MODE_OPTIONS_DEFAULTS);
 
   const checkPassword = (password: string) => {
     var hash = sha256.create();
@@ -56,6 +57,10 @@ export function OptionsMenu(props: { open: boolean; onClose: () => void; childre
   useEffect(() => {
     MapOptionsChangedEvent.on((mapOptions) => setMapOptions({ ...mapOptions }));
     ShortcutsChangedEvent.on((shortcuts) => setShortcuts({ ...shortcuts }));
+
+    CommandModeOptionsChangedEvent.on((commandModeOptions) => {
+      setCommandModeOptions(commandModeOptions);
+    });
   }, []);
 
   return (
@@ -222,36 +227,40 @@ export function OptionsMenu(props: { open: boolean; onClose: () => void; childre
             <OlCheckbox checked={mapOptions.showRacetracks} onChange={() => {}}></OlCheckbox>
             <span className="my-auto">Show racetracks</span>
           </div>
-          <div
+          <>
-            className={`
+            {commandModeOptions.commandMode === GAME_MASTER && (
-              group flex cursor-pointer flex-row content-center justify-start
+              <div
-              gap-4 rounded-md p-2
+                className={`
-              dark:hover:bg-olympus-400
+                  group flex cursor-pointer flex-row content-center
-            `}
+                  justify-start gap-4 rounded-md p-2
-            onClick={() => {
+                  dark:hover:bg-olympus-400
-              mapOptions.AWACSCoalition === "blue" && getApp().getMap().setOption("AWACSCoalition", "neutral");
+                `}
-              mapOptions.AWACSCoalition === "neutral" && getApp().getMap().setOption("AWACSCoalition", "red");
+                onClick={() => {
-              mapOptions.AWACSCoalition === "red" && getApp().getMap().setOption("AWACSCoalition", "blue");
+                  mapOptions.AWACSCoalition === "blue" && getApp().getMap().setOption("AWACSCoalition", "neutral");
-            }}
+                  mapOptions.AWACSCoalition === "neutral" && getApp().getMap().setOption("AWACSCoalition", "red");
-          >
+                  mapOptions.AWACSCoalition === "red" && getApp().getMap().setOption("AWACSCoalition", "blue");
-            <div className="flex flex-col gap-2">
+                }}
-              <div className="flex content-center gap-4">
+              >
-                <OlCoalitionToggle
+                <div className="flex flex-col gap-2">
-                  onClick={() => {
+                  <div className="flex content-center gap-4">
-                    mapOptions.AWACSCoalition === "blue" && getApp().getMap().setOption("AWACSCoalition", "neutral");
+                    <OlCoalitionToggle
-                    mapOptions.AWACSCoalition === "neutral" && getApp().getMap().setOption("AWACSCoalition", "red");
+                      onClick={() => {
-                    mapOptions.AWACSCoalition === "red" && getApp().getMap().setOption("AWACSCoalition", "blue");
+                        mapOptions.AWACSCoalition === "blue" && getApp().getMap().setOption("AWACSCoalition", "neutral");
-                  }}
+                        mapOptions.AWACSCoalition === "neutral" && getApp().getMap().setOption("AWACSCoalition", "red");
-                  coalition={mapOptions.AWACSCoalition}
+                        mapOptions.AWACSCoalition === "red" && getApp().getMap().setOption("AWACSCoalition", "blue");
-                />
+                      }}
-                <span className="my-auto">Coalition of unit bullseye info</span>
+                      coalition={mapOptions.AWACSCoalition}
+                    />
+                    <span className="my-auto">Coalition of unit bullseye info</span>
+                  </div>
+                  <div className="flex gap-1 text-sm text-gray-400">
+                    <FaQuestionCircle className={`my-auto w-8`} />{" "}
+                    <div className={`my-auto ml-2`}>Change the coalition of the bullseye to use to provide bullseye information in the unit tooltip.</div>
+                  </div>
+                </div>
               </div>
-              <div className="flex gap-1 text-sm text-gray-400">
+            )}
-                <FaQuestionCircle className={`my-auto w-8`} />{" "}
+          </>
-                <div className={`my-auto ml-2`}>Change the coalition of the bullseye to use to provide bullseye information in the unit tooltip.</div>
-              </div>
-            </div>
-          </div>
         </OlAccordion>
 
         <OlAccordion

frontend/react/src/unit/unit.ts

@@ -60,6 +60,7 @@ import { ContextActionSet } from "./contextactionset";
 import * as turf from "@turf/turf";
 import { Carrier } from "../mission/carrier";
 import {
+  CommandModeOptionsChangedEvent,
   ContactsUpdatedEvent,
   CoordinatesFreezeEvent,
   HiddenTypesChangedEvent,
@@ -510,6 +511,10 @@ export abstract class Unit extends CustomMarker {
 
       if (this.getSelected()) this.drawLines();
     });
+
+    CommandModeOptionsChangedEvent.on((commandModeOptions) => {
+      this.#redrawMarker();
+    });
   }
 
   /********************** Abstract methods  *************************/
@@ -881,7 +886,7 @@ export abstract class Unit extends CustomMarker {
       targetingRange: this.#targetingRange,
       aimMethodRange: this.#aimMethodRange,
       acquisitionRange: this.#acquisitionRange,
-      airborne: this.#airborne
+      airborne: this.#airborne,
     };
   }
 
@@ -1782,7 +1787,8 @@ export abstract class Unit extends CustomMarker {
       element.querySelector(".unit-vvi")?.setAttribute("style", `height: ${15 + this.#speed / 5}px;`);
 
       /* Set the unit name or callsign */
-      if (element.querySelector(".unit-callsign")) (element.querySelector(".unit-callsign") as HTMLElement).innerText = getApp().getMap().getOptions().showUnitCallsigns? this.#callsign: this.#unitName;
+      if (element.querySelector(".unit-callsign"))
+        (element.querySelector(".unit-callsign") as HTMLElement).innerText = getApp().getMap().getOptions().showUnitCallsigns ? this.#callsign : this.#unitName;
 
       /* Set fuel data */
       element.querySelector(".unit-fuel-level")?.setAttribute("style", `width: ${this.#fuel}%`);