Started adding AWACS panel

frontend/react/src/map/map.ts

@@ -207,7 +207,7 @@ export class Map extends L.Map {
     /* Custom touch events for touchscreen support */
     L.DomEvent.on(this.getContainer(), "touchstart", this.#onMouseDown, this);
     L.DomEvent.on(this.getContainer(), "touchend", this.#onMouseUp, this);
-    L.DomEvent.on(this.getContainer(), 'wheel', this.#onMouseWheel, this);
+    L.DomEvent.on(this.getContainer(), "wheel", this.#onMouseWheel, this);
 
     /* Event listeners */
     AppStateChangedEvent.on((state, subState) => this.#onStateChanged(state, subState));
@@ -227,6 +227,8 @@ export class Map extends L.Map {
 
     MapOptionsChangedEvent.on((options: MapOptions) => {
       this.getContainer().toggleAttribute("data-hide-labels", !options.showUnitLabels);
+      this.getContainer().toggleAttribute("data-hide-bullseyes", !options.showUnitBullseyes);
+      this.getContainer().toggleAttribute("data-hide-BRAA", !options.showUnitBRAA);
       this.#cameraControlPort = options.cameraPluginPort;
       this.#cameraZoomRatio = 50 / (20 + options.cameraPluginRatio);
       this.#slaveDCSCamera = options.cameraPluginEnabled;
@@ -400,7 +402,7 @@ export class Map extends L.Map {
               const contextActionSet = this.getContextActionSet();
               if (this.getContextAction() === null || contextAction !== this.getContextAction()) {
                 if (getApp().getState() === OlympusState.UNIT_CONTROL && contextActionSet && contextAction.getId() in contextActionSet.getContextActions()) {
-                  if (contextAction.getOptions().executeImmediately) contextAction.executeCallback(null, null);
+                  if (contextAction.getTarget() === ContextActionTarget.NONE) contextAction.executeCallback(null, null);
                   else this.setContextAction(contextAction);
                 }
               } else {

frontend/react/src/map/markers/stylesheets/units.css

@@ -100,6 +100,7 @@
   font-weight: var(--unit-font-weight);
   line-height: normal;
   position: absolute;
+  font-size: 12px;
 }
 
 [data-object|="unit-groundunit"] .unit-short-label {
@@ -398,3 +399,53 @@
 .ol-temporary-marker {
   opacity: 0.5;
 }
+
+/*** Unit summary ***/
+[data-object|="unit"] .unit-tactical {
+  color: white;
+  column-gap: 6px;
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 11px;
+  font-weight: bold;
+  justify-content: left;
+  line-height: 12px;
+  pointer-events: none;
+  position: absolute;
+  row-gap: 1px;
+  
+  left: 100%;
+  width: fit-content;
+}
+
+[data-hide-bullseyes] [data-object|="unit"] .unit-bullseyes {
+  display: none;
+}
+
+[data-hide-BRAA] [data-object|="unit"] .unit-braa {
+  display: none;
+}
+
+[data-object|="unit"] .unit-blue-bullseye {
+  text-shadow:
+    -1px -1px 0 #00F,
+    1px -1px 0 #00F,
+    -1px 1px 0 #00F,
+    1px 1px 0 #00F;
+}
+
+[data-object|="unit"] .unit-red-bullseye {
+  text-shadow:
+    -1px -1px 0 #F00,
+    1px -1px 0 #F00,
+    -1px 1px 0 #F00,
+    1px 1px 0 #F00;
+}
+
+[data-object|="unit"] .unit-braa {
+  text-shadow:
+    -1px -1px 0 #000,
+    1px -1px 0 #000,
+    -1px 1px 0 #000,
+    1px 1px 0 #000;
+}

frontend/react/src/map/stylesheets/map.css

@@ -180,4 +180,4 @@
 
 path.leaflet-interactive:focus {
   outline: none;
-}
+}