Completed adding events

frontend/react/src/constants/constants.ts

@@ -259,7 +259,11 @@ export const NO_SUBSTATE = "No substate";
 
 export enum UnitControlSubState {
   NO_SUBSTATE = "No substate",
-  FORMATION = "Formation"
+  FORMATION = "Formation",
+  PROTECTION = "Protection",
+  MAP_CONTEXT_MENU = "Map context menu",
+  UNIT_CONTEXT_MENU = "Unit context menu",
+  UNIT_EXPLOSION_MENU = "Unit explosion menu"
 }
 
 export enum DrawSubState {

frontend/react/src/events.ts

@@ -48,8 +48,8 @@ export class AppStateChangedEvent {
   static dispatch(state: OlympusState, subState: OlympusSubState) {
     const detail = { state, subState };
     document.dispatchEvent(new CustomEvent(this.name, { detail }));
-    console.log(`Event ${this.name} dispatched with detail:`);
-    console.log(detail);
+    console.log(`Event ${this.name} dispatched`);
+    console.log(`State: ${state} Substate: ${subState}`);
   }
 }
 
@@ -160,26 +160,26 @@ export class ContactsUpdatedEvent {
 }
 
 export class ContextActionSetChangedEvent {
-  static on(callback: (contextActionSet: ContextActionSet) => void) {
+  static on(callback: (contextActionSet: ContextActionSet | null) => void) {
     document.addEventListener(this.name, (ev: CustomEventInit) => {
       callback(ev.detail.contextActionSet);
     });
   }
 
-  static dispatch(contextActionSet: ContextActionSet) {
+  static dispatch(contextActionSet: ContextActionSet | null) {
     document.dispatchEvent(new CustomEvent(this.name, {detail: {contextActionSet}}));
     console.log(`Event ${this.name} dispatched`);
   }
 }
 
 export class ContextActionChangedEvent {
-  static on(callback: (contextAction: ContextAction) => void) {
+  static on(callback: (contextAction: ContextAction | null) => void) {
     document.addEventListener(this.name, (ev: CustomEventInit) => {
-      callback(ev.detail.contextActionSet);
+      callback(ev.detail.contextAction);
     });
   }
 
-  static dispatch(contextAction: ContextAction) {
+  static dispatch(contextAction: ContextAction | null) {
     document.dispatchEvent(new CustomEvent(this.name, {detail: {contextAction}}));
     console.log(`Event ${this.name} dispatched`);
   }

frontend/react/src/map/map.ts

@@ -19,6 +19,7 @@ import {
   SpawnSubState,
   DrawSubState,
   JTACSubState,
+  UnitControlSubState,
 } from "../constants/constants";
 import { CoalitionPolygon } from "./coalitionarea/coalitionpolygon";
 import { MapHiddenTypes, MapOptions } from "../types/types";
@@ -37,7 +38,16 @@ import { faDrawPolygon, faHandPointer, faJetFighter, faMap } from "@fortawesome/
 import { ExplosionMarker } from "./markers/explosionmarker";
 import { TextMarker } from "./markers/textmarker";
 import { TargetMarker } from "./markers/targetmarker";
-import { AppStateChangedEvent, CoalitionAreaSelectedEvent, ConfigLoadedEvent, HiddenTypesChangedEvent, MapOptionsChangedEvent, MapSourceChangedEvent } from "../events";
+import {
+  AppStateChangedEvent,
+  CoalitionAreaSelectedEvent,
+  ConfigLoadedEvent,
+  ContextActionChangedEvent,
+  ContextActionSetChangedEvent,
+  HiddenTypesChangedEvent,
+  MapOptionsChangedEvent,
+  MapSourceChangedEvent,
+} from "../events";
 import { ContextActionSet } from "../unit/contextactionset";
 
 /* Register the handler for the box selection */
@@ -349,10 +359,12 @@ export class Map extends L.Map {
 
   setContextActionSet(contextActionSet: ContextActionSet | null) {
     this.#contextActionSet = contextActionSet;
+    ContextActionSetChangedEvent.dispatch(contextActionSet);
   }
 
   setContextAction(contextAction: ContextAction | null) {
     this.#contextAction = contextAction;
+    ContextActionChangedEvent.dispatch(contextAction);
   }
 
   #onStateChanged(state: OlympusState, subState: OlympusSubState) {
@@ -614,8 +626,10 @@ export class Map extends L.Map {
   }
 
   deselectAllCoalitionAreas() {
-    CoalitionAreaSelectedEvent.dispatch(null);
-    this.#coalitionAreas.forEach((coalitionArea: CoalitionPolygon | CoalitionCircle) => coalitionArea.setSelected(false));
+    if (this.getSelectedCoalitionArea() !== null) {
+      CoalitionAreaSelectedEvent.dispatch(null);
+      this.#coalitionAreas.forEach((coalitionArea: CoalitionPolygon | CoalitionCircle) => coalitionArea.setSelected(false));
+    }
   }
 
   deleteCoalitionArea(coalitionArea: CoalitionPolygon | CoalitionCircle) {
@@ -916,9 +930,6 @@ export class Map extends L.Map {
 
     console.log(`Short press at ${pressLocation}`);
 
-    document.dispatchEvent(new CustomEvent("hideMapContextMenu"));
-    document.dispatchEvent(new CustomEvent("hideUnitContextMenu"));
-
     /* Execute the short click action */
     if (getApp().getState() === OlympusState.IDLE) {
       /* Do nothing */
@@ -1041,7 +1052,7 @@ export class Map extends L.Map {
         else document.dispatchEvent(new CustomEvent("mapForceBoxSelect", { detail: e.originalEvent }));
       } else if (getApp().getState() === OlympusState.UNIT_CONTROL) {
         if (e.originalEvent.button === 2) {
-          document.dispatchEvent(new CustomEvent("showMapContextMenu", { detail: e }));
+          getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.MAP_CONTEXT_MENU);
         } else {
           if (e.type === "touchstart") document.dispatchEvent(new CustomEvent("mapForceBoxSelect", { detail: e }));
           else document.dispatchEvent(new CustomEvent("mapForceBoxSelect", { detail: e.originalEvent }));

frontend/react/src/ui/contextmenus/mapcontextmenu.tsx

@@ -1,18 +1,18 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { Unit } from "../../unit/unit";
 import { ContextActionSet } from "../../unit/contextactionset";
 import { getApp } from "../../olympusapp";
 import { ContextAction } from "../../unit/contextaction";
-import { CONTEXT_ACTION_COLORS } from "../../constants/constants";
+import { CONTEXT_ACTION_COLORS, OlympusState, UnitControlSubState } from "../../constants/constants";
 import { OlDropdownItem } from "../components/oldropdown";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { LatLng } from "leaflet";
 import { SelectionClearedEvent } from "../../events";
+import { StateContext } from "../../statecontext";
 
 export function MapContextMenu(props: {}) {
-  const [open, setOpen] = useState(false);
-  const [contextActionsSet, setContextActionsSet] = useState(new ContextActionSet());
-  const [activeContextAction, setActiveContextAction] = useState(null as null | ContextAction);
+  const appState = useContext(StateContext);
+
   const [xPosition, setXPosition] = useState(0);
   const [yPosition, setYPosition] = useState(0);
   const [latLng, setLatLng] = useState(null as null | LatLng);
@@ -41,69 +41,18 @@ export function MapContextMenu(props: {}) {
     }
   });
 
-  useEffect(() => {
-    document.addEventListener("showMapContextMenu", (ev: CustomEventInit) => {
-      setOpen(true);
-
-      updateData();
-
-      setXPosition(ev.detail.originalEvent.clientX);
-      setYPosition(ev.detail.originalEvent.clientY);
-      setLatLng(ev.detail.latlng);
-      setUnit(null);
-    });
-
-    document.addEventListener("showUnitContextMenu", (ev: CustomEventInit) => {
-      setOpen(true);
-
-      updateData();
-
-      setXPosition(ev.detail.originalEvent.clientX);
-      setYPosition(ev.detail.originalEvent.clientY);
-      setLatLng(null);
-      setUnit(ev.detail.sourceTarget);
-    });
-
-    document.addEventListener("hideMapContextMenu", (ev: CustomEventInit) => {
-      setOpen(false);
-    });
-
-    document.addEventListener("hideUnitContextMenu", (ev: CustomEventInit) => {
-      setOpen(false);
-    });
-
-    SelectionClearedEvent.on(() => {
-      setOpen(false);
-    });
-  }, []);
-
-  /* Update the current values of the shown data */
-  function updateData() {
-    var newContextActionSet = new ContextActionSet();
-
-    getApp()
-      .getUnitsManager()
-      .getSelectedUnits()
-      .filter((unit) => !unit.getHuman())
-      .forEach((unit: Unit) => {
-        unit.appendContextActions(newContextActionSet);
-      });
-
-    setContextActionsSet(newContextActionSet);
-    return newContextActionSet;
-  }
-
   let reorderedActions: ContextAction[] = [];
   CONTEXT_ACTION_COLORS.forEach((color) => {
-    Object.values(contextActionsSet.getContextActions()).forEach((contextAction: ContextAction) => {
-      if (color === null && contextAction.getOptions().buttonColor === undefined) reorderedActions.push(contextAction);
-      else if (color === contextAction.getOptions().buttonColor) reorderedActions.push(contextAction);
-    });
+    if (appState.contextActionSet)
+      Object.values(appState.contextActionSet.getContextActions()).forEach((contextAction: ContextAction) => {
+        if (color === null && contextAction.getOptions().buttonColor === undefined) reorderedActions.push(contextAction);
+        else if (color === contextAction.getOptions().buttonColor) reorderedActions.push(contextAction);
+      });
   });
 
   return (
     <>
-      {open && (
+      {appState.appState === OlympusState.UNIT_CONTROL && appState.appSubState === UnitControlSubState.UNIT_CONTEXT_MENU && (
         <>
           <div
             ref={contentRef}
@@ -116,38 +65,38 @@ export function MapContextMenu(props: {}) {
                 flex w-full flex-col gap-2 overflow-x-auto no-scrollbar p-2
               `}
             >
-              {Object.values(contextActionsSet.getContextActions(latLng ? "position" : "unit")).map((contextAction) => {
-                const colorString = contextAction.getOptions().buttonColor
-                  ? `
+              {appState.contextActionSet &&
+                Object.values(appState.contextActionSet.getContextActions(latLng ? "position" : "unit")).map((contextAction) => {
+                  const colorString = contextAction.getOptions().buttonColor
+                    ? `
                   border-2
                   border-${contextAction.getOptions().buttonColor}-500
                 `
-                  : "";
-                return (
-                  <OlDropdownItem
-                    className={`
-                      flex w-full content-center gap-2 text-white
-                      ${colorString}
-                    `}
-                    onClick={() => {
-                      if (contextAction.getOptions().executeImmediately) {
-                        contextAction.executeCallback(null, null);
-                      } else {
-                        if (latLng !== null) {
-                          contextAction.executeCallback(null, latLng);
-                          setOpen(false);
-                        } else if (unit !== null) {
-                          contextAction.executeCallback(unit, null);
-                          setOpen(false);
+                    : "";
+                  return (
+                    <OlDropdownItem
+                      className={`
+                        flex w-full content-center gap-2 text-white
+                        ${colorString}
+                      `}
+                      onClick={() => {
+                        if (contextAction.getOptions().executeImmediately) {
+                          contextAction.executeCallback(null, null);
+                        } else {
+                          if (latLng !== null) {
+                            contextAction.executeCallback(null, latLng);
+  
+                          } else if (unit !== null) {
+                            contextAction.executeCallback(unit, null);
+                          }
                         }
-                      }
-                    }}
-                  >
-                    <FontAwesomeIcon className="my-auto" icon={contextAction.getIcon()} />
-                    <div>{contextAction.getLabel()}</div>
-                  </OlDropdownItem>
-                );
-              })}
+                      }}
+                    >
+                      <FontAwesomeIcon className="my-auto" icon={contextAction.getIcon()} />
+                      <div>{contextAction.getLabel()}</div>
+                    </OlDropdownItem>
+                  );
+                })}
             </div>
           </div>
         </>

frontend/react/src/ui/modals/protectionprompt.tsx

@@ -5,7 +5,7 @@ import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 import { Unit } from "../../unit/unit";
 import { FaLock } from "react-icons/fa6";
 
-export function ProtectionPrompt(props: {onContinue: (units: Unit[]) => void, onBack: () => void, units: Unit[] }) {
+export function ProtectionPrompt(props: {onContinue: () => void, onBack: () => void }) {
   return (
     <Modal
       className={`
@@ -56,7 +56,7 @@ export function ProtectionPrompt(props: {onContinue: (units: Unit[]) => void, on
         <div className="flex">
           <button
             type="button"
-            onClick={() => {props.onContinue(props.units);}}
+            onClick={() => {props.onContinue()}}
             className={`
               mb-2 me-2 ml-auto flex content-center items-center gap-2
               rounded-sm bg-blue-700 px-5 py-2.5 text-sm font-medium text-white

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

@@ -8,13 +8,11 @@ import { CONTEXT_ACTION_COLORS } from "../../constants/constants";
 import { FaInfoCircle } from "react-icons/fa";
 import { FaChevronLeft, FaChevronRight } from "react-icons/fa6";
 import { OlympusState } from "../../constants/constants";
-import { AppStateChangedEvent } from "../../events";
 import { StateContext } from "../../statecontext";
 
 export function UnitMouseControlBar(props: {}) {
   const appState = useContext(StateContext);
 
-  const [open, setOpen] = useState(false);
   const [scrolledLeft, setScrolledLeft] = useState(true);
   const [scrolledRight, setScrolledRight] = useState(false);
 
@@ -24,12 +22,6 @@ export function UnitMouseControlBar(props: {}) {
     if (scrollRef.current) onScroll(scrollRef.current);
   });
 
-  useEffect(() => {
-    AppStateChangedEvent.on((state, subState) => {
-      setOpen(state === OlympusState.UNIT_CONTROL);
-    });
-  }, []);
-
   function onScroll(el) {
     const sl = el.scrollLeft;
     const sr = el.scrollWidth - el.scrollLeft - el.clientWidth;
@@ -53,7 +45,7 @@ export function UnitMouseControlBar(props: {}) {
 
   return (
     <>
-      {open && appState.contextActionSet && Object.keys(appState.contextActionSet.getContextActions()).length > 0 && (
+      {appState.appState === OlympusState.UNIT_CONTROL && appState.contextActionSet && Object.keys(appState.contextActionSet.getContextActions()).length > 0 && (
         <>
           <div
             className={`

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

@@ -58,7 +58,7 @@ export function UnitSpawnMenu(props: { blueprint: UnitBlueprint; spawnAtLocation
         if (getApp().getState() === OlympusState.SPAWN) getApp().setState(OlympusState.IDLE);
       }
     }
-  });
+  }, [spawnAltitude, spawnAltitudeType, spawnLoadoutName, spawnCoalition]);
 
   function spawnAtAirbase() {
     getApp()

frontend/react/src/ui/ui.tsx

@@ -83,8 +83,8 @@ export function UI() {
   const [audioSinks, setAudioSinks] = useState([] as AudioSink[]);
   const [audioManagerState, setAudioManagerState] = useState(false);
   const [serverStatus, setServerStatus] = useState({} as ServerStatus);
-  const [contextActionSet, setContextActionsSet] = useState(null as ContextActionSet | null);
-  const [contextAction, setContextActions] = useState(null as ContextAction | null);
+  const [contextActionSet, setContextActionSet] = useState(null as ContextActionSet | null);
+  const [contextAction, setContextAction] = useState(null as ContextAction | null);
 
   const [checkingPassword, setCheckingPassword] = useState(false);
   const [loginError, setLoginError] = useState(false);
@@ -94,9 +94,6 @@ export function UI() {
 
   const [formationLeader, setFormationLeader] = useState(null as null | Unit);
   const [formationWingmen, setFormationWingmen] = useState(null as null | Unit[]);
-  const [protectionPromptVisible, setProtectionPromptVisible] = useState(false);
-  const [protectionCallback, setProtectionCallback] = useState(null as any);
-  const [protectionUnits, setProtectionUnits] = useState([] as Unit[]);
 
   const [unitExplosionUnits, setUnitExplosionUnits] = useState([] as Unit[]);
 
@@ -119,16 +116,8 @@ export function UI() {
     AudioSinksChangedEvent.on((sinks) => setAudioSinks(sinks));
     AudioManagerStateChangedEvent.on((state) => setAudioManagerState(state));
     ServerStatusUpdatedEvent.on((status) => setServerStatus(status));
-    ContextActionSetChangedEvent.on((contextActionSet) => setContextActionsSet(contextActionSet));
-    ContextActionChangedEvent.on((contextAction) => setContextActions(contextAction));
-
-    document.addEventListener("showProtectionPrompt", (ev: CustomEventInit) => {
-      setProtectionPromptVisible(true);
-      setProtectionCallback(() => {
-        return ev.detail.callback;
-      });
-      setProtectionUnits(ev.detail.units);
-    });
+    ContextActionSetChangedEvent.on((contextActionSet) => setContextActionSet(contextActionSet));
+    ContextActionChangedEvent.on((contextAction) => setContextAction(contextAction));
   }, []);
 
   function checkPassword(password: string) {
@@ -210,7 +199,7 @@ export function UI() {
               />
             </>
           )}
-          {protectionPromptVisible && (
+          {appState === OlympusState.UNIT_CONTROL && appSubState == UnitControlSubState.PROTECTION && (
             <>
               <div
                 className={`
@@ -218,14 +207,12 @@ export function UI() {
                 `}
               ></div>
               <ProtectionPrompt
-                onContinue={(units) => {
-                  protectionCallback(units);
-                  setProtectionPromptVisible(false);
+                onContinue={() => {
+                  getApp().getUnitsManager().executeProtectionCallback()
                 }}
                 onBack={() => {
-                  setProtectionPromptVisible(false);
+                  getApp().setState(OlympusState.UNIT_CONTROL)
                 }}
-                units={protectionUnits}
               />
             </>
           )}

frontend/react/src/unit/unit.ts

@@ -41,6 +41,7 @@ import {
   CONTEXT_ACTION_COLORS,
   OlympusState,
   JTACSubState,
+  UnitControlSubState,
 } from "../constants/constants";
 import { DataExtractor } from "../server/dataextractor";
 import { groundUnitDatabase } from "./databases/groundunitdatabase";
@@ -854,7 +855,7 @@ export abstract class Unit extends CustomMarker {
       faExplosion,
       null,
       (units: Unit[], _1, _2) => {
-        document.dispatchEvent(new CustomEvent("showUnitExplosionMenu", { detail: { units: units } }));
+        getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.UNIT_EXPLOSION_MENU)
       },
       {
         executeImmediately: true,
@@ -1378,7 +1379,7 @@ export abstract class Unit extends CustomMarker {
         this.setSelected(!this.getSelected());
       }
     } else if (getApp().getState() === OlympusState.JTAC && getApp().getSubState() === JTACSubState.SELECT_TARGET) {
-      document.dispatchEvent(new CustomEvent("selectJTACTarget", { detail: { unit: this } }));
+      // TODO document.dispatchEvent(new CustomEvent("selectJTACTarget", { detail: { unit: this } }));
       getApp().setState(OlympusState.IDLE);
     }
   }
@@ -1387,7 +1388,7 @@ export abstract class Unit extends CustomMarker {
     console.log(`Long press on ${this.getUnitName()}`);
 
     if (e.originalEvent.button === 2) {
-      document.dispatchEvent(new CustomEvent("showUnitContextMenu", { detail: e }));
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.UNIT_CONTEXT_MENU)
     }
   }
 

frontend/react/src/unit/unitsmanager.ts

@@ -19,7 +19,7 @@ import {
 } from "../other/utils";
 import { CoalitionPolygon } from "../map/coalitionarea/coalitionpolygon";
 import { groundUnitDatabase } from "./databases/groundunitdatabase";
-import { DELETE_CYCLE_TIME, DELETE_SLOW_THRESHOLD, DataIndexes, GAME_MASTER, IADSDensities, OlympusState } from "../constants/constants";
+import { DELETE_CYCLE_TIME, DELETE_SLOW_THRESHOLD, DataIndexes, GAME_MASTER, IADSDensities, OlympusState, UnitControlSubState } from "../constants/constants";
 import { DataExtractor } from "../server/dataextractor";
 import { citiesDatabase } from "./databases/citiesdatabase";
 import { aircraftDatabase } from "./databases/aircraftdatabase";
@@ -58,6 +58,7 @@ export class UnitsManager {
   #groups: { [groupName: string]: Group } = {};
   #unitDataExport!: UnitDataFileExport;
   #unitDataImport!: UnitDataFileImport;
+  #protectionCallback: (units: Unit[]) => void = (units) => {};
 
   constructor() {
     this.#copiedUnits = [];
@@ -69,8 +70,8 @@ export class UnitsManager {
     ContactsUpdatedEvent.on(() => {
       this.#requestDetectionUpdate = true;
     });
-    UnitSelectedEvent.on((unit) => this.#onUnitDeselection(unit));
-    UnitDeselectedEvent.on((unit) => this.#onUnitSelection(unit));
+    UnitSelectedEvent.on((unit) => this.#onUnitSelection(unit));
+    UnitDeselectedEvent.on((unit) => this.#onUnitDeselection(unit));
 
     document.addEventListener("copy", () => this.copy());
     document.addEventListener("keyup", (event) => this.#onKeyUp(event));
@@ -367,9 +368,10 @@ export class UnitsManager {
       this.#showActionMessage(units, " new destination added");
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
 
   /** Clear the destinations of all the selected units
@@ -392,9 +394,10 @@ export class UnitsManager {
       }
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
 
   /** Instruct all the selected units to land at a specific location
@@ -414,9 +417,10 @@ export class UnitsManager {
       this.#showActionMessage(units, " landing");
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
   /** Instruct all the selected units to change their speed
    *
@@ -433,9 +437,10 @@ export class UnitsManager {
       units.forEach((unit: Unit) => unit.changeSpeed(speedChange));
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
   /** Instruct all the selected units to change their altitude
    *
@@ -452,9 +457,10 @@ export class UnitsManager {
       units.forEach((unit: Unit) => unit.changeAltitude(altitudeChange));
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
   /** Set a specific speed to all the selected units
    *
@@ -472,9 +478,10 @@ export class UnitsManager {
       this.#showActionMessage(units, `setting speed to ${msToKnots(speed)} kts`);
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
   /** Set a specific speed type to all the selected units
    *
@@ -492,9 +499,10 @@ export class UnitsManager {
       this.#showActionMessage(units, `setting speed type to ${speedType}`);
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
   /** Set a specific altitude to all the selected units
    *
@@ -512,9 +520,10 @@ export class UnitsManager {
       this.#showActionMessage(units, `setting altitude to ${mToFt(altitude)} ft`);
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
   /** Set a specific altitude type to all the selected units
    *
@@ -532,9 +541,10 @@ export class UnitsManager {
       this.#showActionMessage(units, `setting altitude type to ${altitudeType}`);
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
   /** Set a specific ROE to all the selected units
    *
@@ -552,9 +562,10 @@ export class UnitsManager {
       this.#showActionMessage(units, `ROE set to ${ROE}`);
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
   /** Set a specific reaction to threat to all the selected units
    *
@@ -572,9 +583,10 @@ export class UnitsManager {
       this.#showActionMessage(units, `reaction to threat set to ${reactionToThreat}`);
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
   /** Set a specific emissions & countermeasures to all the selected units
    *
@@ -592,9 +604,10 @@ export class UnitsManager {
       this.#showActionMessage(units, `emissions & countermeasures set to ${emissionCountermeasure}`);
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
   /** Turn selected units on or off, only works on ground and navy units
    *
@@ -612,9 +625,10 @@ export class UnitsManager {
       this.#showActionMessage(units, `unit active set to ${onOff}`);
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
   /** Instruct the selected units to follow roads, only works on ground units
    *
@@ -632,9 +646,10 @@ export class UnitsManager {
       this.#showActionMessage(units, `follow roads set to ${followRoads}`);
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
   /** Instruct selected units to operate as a certain coalition
    *
@@ -653,9 +668,10 @@ export class UnitsManager {
       this.#showActionMessage(units, `operate as set to ${operateAs}`);
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
   /** Instruct units to attack a specific unit
    *
@@ -673,9 +689,10 @@ export class UnitsManager {
       this.#showActionMessage(units, `attacking unit ${this.getUnitByID(ID)?.getUnitName()}`);
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
   /** Instruct units to refuel at the nearest tanker, if possible. Else units will RTB
    * @param units (Optional) Array of units to apply the control to. If not provided, the operation will be completed on all selected units.
@@ -692,9 +709,10 @@ export class UnitsManager {
       this.#showActionMessage(units, `sent to nearest tanker`);
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
   /** Instruct the selected units to follow another unit in a formation. Only works for aircrafts and helicopters.
    *
@@ -740,9 +758,10 @@ export class UnitsManager {
         } else offset = undefined;
       }
 
-      if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-        document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-      else callback(units);
+      if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+        getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+        this.#protectionCallback = callback;
+      } else callback(units);
     };
     var count = 1;
     var xr = 0;
@@ -803,9 +822,10 @@ export class UnitsManager {
       this.#showActionMessage(units, `unit bombing point`);
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
   /** Instruct the selected units to perform carpet bombing of specific coordinates
    *
@@ -823,9 +843,10 @@ export class UnitsManager {
       this.#showActionMessage(units, `unit carpet bombing point`);
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
   /** Instruct the selected units to fire at specific coordinates
    *
@@ -843,9 +864,10 @@ export class UnitsManager {
       this.#showActionMessage(units, `unit firing at area`);
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
   /** Instruct the selected units to simulate a fire fight at specific coordinates
    *
@@ -888,9 +910,10 @@ export class UnitsManager {
       this.#showActionMessage(units, `unit set to perform scenic AAA`);
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
   /** Instruct units to enter into dynamic accuracy/miss on purpose mode. Units will aim to the nearest enemy unit but not precisely.
    * @param units (Optional) Array of units to apply the control to. If not provided, the operation will be completed on all selected units.
@@ -906,9 +929,10 @@ export class UnitsManager {
       this.#showActionMessage(units, `unit set to perform miss-on-purpose AAA`);
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
   /** Instruct units to land at specific point
    *
@@ -926,9 +950,10 @@ export class UnitsManager {
       this.#showActionMessage(units, `unit landing at point`);
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
   /** Set a specific shots scatter to all the selected units
    *
@@ -946,9 +971,10 @@ export class UnitsManager {
       this.#showActionMessage(units, `shots scatter set to ${shotsScatter}`);
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
   /** Set a specific shots intensity to all the selected units
    *
@@ -966,9 +992,10 @@ export class UnitsManager {
       this.#showActionMessage(units, `shots intensity set to ${shotsIntensity}`);
     };
 
-    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
   /*********************** Control operations on selected units ************************/
   /**  See getUnitsCategories for more info
@@ -1007,9 +1034,10 @@ export class UnitsManager {
         //(getApp().getPopupsManager().get("infoPopup") as Popup).setText(`Groups can only be created from units of the same category`);
       }
 
-      if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus()))
-        document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-      else callback(units);
+      if (getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) {
+        getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+        this.#protectionCallback = callback;
+      } else callback(units);
     };
   }
 
@@ -1050,9 +1078,10 @@ export class UnitsManager {
       this.#showActionMessage(units as Unit[], `deleted`);
     };
 
-    if ((getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) || units.find((unit) => unit.getHuman()))
-      document.dispatchEvent(new CustomEvent("showProtectionPrompt", { detail: { callback: callback, units: units } }));
-    else callback(units);
+    if ((getApp().getMap().getOptions().protectDCSUnits && !units.every((unit) => unit.isControlledByOlympus())) || units.find((unit) => unit.getHuman())) {
+      getApp().setState(OlympusState.UNIT_CONTROL, UnitControlSubState.PROTECTION);
+      this.#protectionCallback = callback;
+    } else callback(units);
   }
 
   /** Compute the destinations of every unit in the selected units. This function preserves the relative positions of the units, and rotates the whole formation by rotation.
@@ -1432,6 +1461,10 @@ export class UnitsManager {
     }
   }
 
+  executeProtectionCallback() {
+    this.#protectionCallback(this.getSelectedUnits());
+  }
+
   /***********************************************/
   #onKeyUp(event: KeyboardEvent) {
     if (!keyEventWasInInput(event)) {