Adding AWACS graphical mode

2025-10-29 16:56:34 +00:00 · 2024-11-27 11:28:30 +01:00
parent 7813f8335a
commit 8cd18eb921
124 changed files with 1863 additions and 72 deletions
--- a/frontend/react/src/map/map.ts
+++ b/frontend/react/src/map/map.ts
@@ -226,6 +226,7 @@ export class Map extends L.Map {
    });

    MapOptionsChangedEvent.on((options: MapOptions) => {
+      this.getContainer().toggleAttribute("data-awacs-mode", options.AWACSMode);
      this.getContainer().toggleAttribute("data-hide-labels", !options.showUnitLabels);
      this.getContainer().toggleAttribute("data-hide-bullseyes", !options.showUnitBullseyes);
      this.getContainer().toggleAttribute("data-hide-BRAA", !options.showUnitBRAA);
--- a/frontend/react/src/map/markers/stylesheets/airbase.css
+++ b/frontend/react/src/map/markers/stylesheets/airbase.css
@@ -28,3 +28,7 @@
 .airbase-icon[data-selected="true"] {
  filter: drop-shadow(0px 2px 0px white) drop-shadow(0px -2px 0px white) drop-shadow(2px 0px 0px white) drop-shadow(-2px 0px 0px white);
 }
+
+[data-awacs-mode] .airbase-icon svg * {
+  fill: transparent !important;
+}
--- a/frontend/react/src/map/markers/stylesheets/bullseye.css
+++ b/frontend/react/src/map/markers/stylesheets/bullseye.css
@@ -6,19 +6,21 @@
  position: relative;
  width: 100%;
  height: 100%;
+  fill: white;
 }

 .bullseye-icon[data-coalition="red"] svg * {
  stroke: var(--unit-background-red);
-  fill: var(--unit-background-red);
 }

 .bullseye-icon[data-coalition="blue"] svg * {
  stroke: var(--unit-background-blue);
-  fill: var(--unit-background-blue);
 }

 .bullseye-icon[data-coalition="neutral"] svg * {
  stroke: var(--unit-background-neutral);
-  fill: var(--unit-background-neutral);
+}
+
+[data-awacs-mode] .bullseye-icon svg * {
+  fill: transparent !important;
 }
--- a/frontend/react/src/map/markers/stylesheets/units.css
+++ b/frontend/react/src/map/markers/stylesheets/units.css
@@ -9,6 +9,14 @@
  width: 100%;
 }

+[data-awacs-mode] .unit-short-label {
+  color: transparent !important;
+}
+
+[data-awacs-mode] [data-object|="unit"] svg {
+  scale: 0.5;
+}
+
 .unit-vvi {
  align-self: center;
  background: var(--secondary-gunmetal-grey);
@@ -21,6 +29,22 @@
  width: var(--unit-vvi-width);
 }

+[data-awacs-mode] .unit-vvi {
+  width: var(--unit-vvi-width-awacs);
+}
+
+[data-awacs-mode] [data-coalition="blue"] .unit-vvi {
+  background: var(--unit-background-blue) !important;
+}
+
+[data-awacs-mode] [data-coalition="red"] .unit-vvi {
+  background: var(--unit-background-red) !important;
+}
+
+[data-awacs-mode] [data-coalition="neutral"] .unit-vvi {
+  background: var(--unit-background-neutral) !important;
+}
+
 .unit-hotgroup {
  align-content: center;
  background-color: var(--background-steel);
@@ -65,6 +89,21 @@
  z-index: -1;
 }

+[data-awacs-mode] [data-is-selected] .unit-icon::before {
+  display: none;
+}
+
+[data-awacs-mode] [data-is-selected] {
+  animation: blinker 0.5s linear infinite;
+}
+
+@keyframes blinker {
+  50% {
+    opacity: 30%;
+  }
+}
+
+
 /*** Basic colours ***/
 [data-coalition="blue"] .unit-icon svg > *:first-child {
  fill: var(--unit-background-blue);
@@ -86,6 +125,21 @@
  stroke: white;
 }

+[data-awacs-mode] [data-coalition="blue"] .unit-icon svg  {
+  fill: transparent !important;
+  stroke: var(--unit-background-blue) !important;
+}
+
+[data-awacs-mode] [data-coalition="red"] .unit-icon svg  {
+  fill: transparent !important;
+  stroke: var(--unit-background-red) !important;
+}
+
+[data-awacs-mode] [data-coalition="neutral"] .unit-icon svg  {
+  fill: transparent !important;
+  stroke: var(--unit-background-neutral) !important;
+}
+
 /*** Cursors ***/
 [data-is-dead],
 [data-object|="unit-missile"],
@@ -173,10 +227,26 @@
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
-  right: 100%;
+  right: 120%;
  width: fit-content;
 }

+[data-awacs-mode] [data-object|="unit"] .unit-summary {
+  top: -40px;
+}
+
+[data-awacs-mode] .unit-summary::before {
+  content: " ";
+  background-color: white;
+  width: 40px;
+  height: 1px;
+  transform: rotate(45deg);
+  left: 40px;
+  top: 50px;
+  position: relative;
+  z-index: -1;
+}
+
 [data-hide-labels] [data-object|="unit"] .unit-summary {
  display: none;
 }
@@ -414,10 +484,22 @@
  position: absolute;
  row-gap: 1px;
  
-  left: 100%;
+  right: 120%;
+  top: -7px;
  width: fit-content;
 }

+[data-object|="unit"] .unit-bullseyes {
+  display: flex;
+  line-height: 12px;
+  flex-wrap: wrap;
+  row-gap: 2px;
+}
+
+[data-hide-labels] [data-object|="unit"] .unit-tactical {
+  display: none;
+}
+
 [data-hide-bullseyes] [data-object|="unit"] .unit-bullseyes {
  display: none;
 }
@@ -426,20 +508,12 @@
  display: none;
 }

-[data-object|="unit"] .unit-blue-bullseye {
+[data-object|="unit"] .unit-bullseyes {
  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;
+  -1px -1px 0 #000,
+  1px -1px 0 #000,
+  -1px 1px 0 #000,
+  1px 1px 0 #000;
 }

 [data-object|="unit"] .unit-braa {
@@ -449,3 +523,14 @@
    -1px 1px 0 #000,
    1px 1px 0 #000;
 }
+
+[data-awacs-mode] [data-object|="unit"] .unit-selected-spotlight,
+[data-awacs-mode] [data-object|="unit"] .unit-short-label,
+[data-awacs-mode] [data-object|="unit"] .unit-state,
+[data-awacs-mode] [data-object|="unit"] .unit-fuel,
+[data-awacs-mode] [data-object|="unit"] .unit-health,
+[data-awacs-mode] [data-object|="unit"] .unit-ammo,
+[data-awacs-mode] [data-object|="unit"]:hover .unit-fuel,
+[data-awacs-mode] [data-object|="unit"]:hover .unit-ammo {
+  display: none;
+}
--- a/frontend/react/src/map/stylesheets/map.css
+++ b/frontend/react/src/map/stylesheets/map.css
@@ -91,6 +91,7 @@
  --unit-fuel-x: 0px;
  --unit-fuel-y: 22px;
  --unit-vvi-width: 4px;
+  --unit-vvi-width-awacs: 2px;
 }

 * {
--- a/frontend/react/src/types/types.ts
+++ b/frontend/react/src/types/types.ts
@@ -26,9 +26,9 @@ export type MapOptions = {
  cameraPluginEnabled: boolean;
  cameraPluginMode: string;
  tabletMode: boolean;
-  showUnitBullseyes: false;
-  showUnitBRAA: false;
-  AWACSMode: false;
+  showUnitBullseyes: boolean;
+  showUnitBRAA: boolean;
+  AWACSMode: boolean;
 };

 export type MapHiddenTypes = {
--- a/frontend/react/src/ui/panels/awacsmenu.tsx
+++ b/frontend/react/src/ui/panels/awacsmenu.tsx
@@ -69,6 +69,15 @@ export function AWACSMenu(props: { open: boolean; onClose: () => void; children?
            />
          </div>
          <div className="flex flex-col gap-2">
+          <div className="flex gap-2">
+              <OlToggle
+                onClick={() => {
+                  getApp().getMap().setOption("AWACSMode", !mapOptions.AWACSMode);
+                }}
+                toggled={mapOptions.AWACSMode}
+              />{" "}
+              Enable AWACS map mode
+            </div>
            <div className="flex gap-2">
              <OlToggle
                onClick={() => {
--- a/frontend/react/src/ui/panels/sidebar.tsx
+++ b/frontend/react/src/ui/panels/sidebar.tsx
@@ -72,7 +72,7 @@ export function SideBar() {
            checked={appState === OlympusState.JTAC}
            icon={faJ}
            tooltip="Hide/show JTAC menu"
-          ></OlStateButton>
+          ></OlStateButton>{*/}
          <OlStateButton
            onClick={() => {
              getApp().setState(appState !== OlympusState.AWACS ? OlympusState.AWACS : OlympusState.IDLE);
@@ -80,7 +80,7 @@ export function SideBar() {
            checked={appState === OlympusState.AWACS}
            icon={faA}
            tooltip="Hide/show AWACS menu"
-          ></OlStateButton>{*/}
+          ></OlStateButton>
          <OlStateButton
            onClick={() => {
              getApp().setState(appState !== OlympusState.GAME_MASTER ? OlympusState.GAME_MASTER : OlympusState.IDLE);
--- a/frontend/react/src/unit/unit.ts
+++ b/frontend/react/src/unit/unit.ts
@@ -15,6 +15,7 @@ import {
  coalitionToEnum,
  nmToM,
  zeroAppend,
+  computeBearingRangeString,
 } from "../other/utils";
 import { CustomMarker } from "../map/markers/custommarker";
 import { SVGInjector } from "@tanem/svg-injector";
@@ -368,7 +369,7 @@ export abstract class Unit extends CustomMarker {

    /* Update the marker when the options change */
    MapOptionsChangedEvent.on(() => {
-      this.#updateMarker();
+      this.#redrawMarker();

      /* Circles don't like to be updated when the map is zooming */
      if (!getApp().getMap().isZooming()) this.#drawRanges();
@@ -901,7 +902,7 @@ export abstract class Unit extends CustomMarker {
      if (this.belongsToCommandedCoalition() || this.getDetectionMethods().some((value) => [VISUAL, OPTIC].includes(value)))
        marker = this.getBlueprint()?.markerFile ?? this.getDefaultMarker();
      else marker = "aircraft";
-      img.src = `/vite/images/units/${marker}.svg`;
+      img.src = `/vite/images/units/map/${getApp().getMap().getOptions().AWACSMode? 'awacs': 'normal'}/${this.getCoalition()}/${marker}.svg`;
      img.onload = () => SVGInjector(img);
      unitIcon.appendChild(img);

@@ -988,7 +989,7 @@ export abstract class Unit extends CustomMarker {
      BRAA.classList.add("unit-braa");
      tactical.appendChild(BRAA);
    }
-    el.appendChild(tactical)
+    el.appendChild(tactical);

    this.getElement()?.appendChild(el);
  }
@@ -1514,18 +1515,20 @@ export abstract class Unit extends CustomMarker {

        /* Set bullseyes positions */
        const bullseyes = getApp().getMissionManager().getBullseyes();
-        const blueBullseye = `${bearing(bullseyes[2].getLatLng().lat, bullseyes[2].getLatLng().lng, this.getLatLng().lat, this.getLatLng().lng).toFixed()}/${(bullseyes[2].getLatLng().distanceTo(this.getLatLng()) / 1852).toFixed(0)}`
-        const redBullseye = `${bearing(bullseyes[1].getLatLng().lat, bullseyes[1].getLatLng().lng, this.getLatLng().lat, this.getLatLng().lng).toFixed()}/${(bullseyes[1].getLatLng().distanceTo(this.getLatLng()) / 1852).toFixed(0)}`
-        if (element.querySelector(".unit-blue-bullseye")) (<HTMLElement>element.querySelector(".unit-blue-bullseye")).innerText = `${blueBullseye}`;
-        if (element.querySelector(".unit-red-bullseye")) (<HTMLElement>element.querySelector(".unit-red-bullseye")).innerText = `${redBullseye}`;
+        if (Object.keys(bullseyes).length > 0) {
+          computeBearingRangeString
+          const blueBullseye = `${computeBearingRangeString(bullseyes[2].getLatLng(), this.getPosition())}`;
+          const redBullseye = `${computeBearingRangeString(bullseyes[1].getLatLng(), this.getPosition())}`;
+          if (element.querySelector(".unit-blue-bullseye")) (<HTMLElement>element.querySelector(".unit-blue-bullseye")).innerText = `${blueBullseye}`;
+          if (element.querySelector(".unit-red-bullseye")) (<HTMLElement>element.querySelector(".unit-red-bullseye")).innerText = `${redBullseye}`;
+        }

        /* Set BRAA */
        const reference = getApp().getUnitsManager().getAWACSReference();
        if (reference && reference !== this) {
-          const BRAA = `${bearing(reference.getLatLng().lat, reference.getLatLng().lng, this.getLatLng().lat, this.getLatLng().lng).toFixed()}/${(reference.getLatLng().distanceTo(this.getLatLng()) / 1852).toFixed(0)}`
+          const BRAA = `${computeBearingRangeString(reference.getPosition(), this.getPosition())}`;
          if (element.querySelector(".unit-braa")) (<HTMLElement>element.querySelector(".unit-braa")).innerText = `${BRAA}`;
-        }
-        else if (element.querySelector(".unit-braa")) (<HTMLElement>element.querySelector(".unit-braa")).innerText = ``;
+        } else if (element.querySelector(".unit-braa")) (<HTMLElement>element.querySelector(".unit-braa")).innerText = ``;
      }

      /* Set vertical offset for altitude stacking */
@@ -1821,7 +1824,7 @@ export abstract class AirUnit extends Unit {
    /* Context actions that require a target unit */
    contextActionSet.addContextAction(this, ContextActions.ATTACK);
    contextActionSet.addContextAction(this, ContextActions.FOLLOW);
-    contextActionSet.addContextAction(this, ContextActions.SET_AWACS_REFERENCE)
+    contextActionSet.addContextAction(this, ContextActions.SET_AWACS_REFERENCE);

    if (this.canTargetPoint()) {
      /* Context actions that require a target position */