Adding AWACS graphical mode

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);

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;
+}

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;
 }

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;
+}

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;
 }
 
 * {