feat: Added indicator for "operate as" units

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

@@ -131,8 +131,16 @@
   fill: var(--unit-background-neutral);
 }
 
+[data-coalition="neutral"][data-operate-as="blue"] .unit-icon svg > *:first-child {
+  stroke: var(--unit-background-blue);
+}
+
+[data-coalition="neutral"][data-operate-as="red"] .unit-icon svg > *:first-child {
+  stroke: var(--unit-background-red);
+}
+
 [data-is-selected] .unit-icon svg > *:first-child {
-  fill: white;
+  fill: white !important;
 }
 
 [data-is-highlighted] .unit-icon svg > *:first-child {

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

@@ -5,6 +5,8 @@
   --secondary-neutral-outline: #111111;
   --secondary-neutral-text: #111111;
   --unit-background-neutral: #cfd9e8;
+  --unit-background-operate-as-blue: #9dc1d6;
+  --unit-background-operate-as-red: rgb(226, 170, 170);
 
   /*** Coalition: blue  ***/
   --primary-blue: #247be2;

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

@@ -995,7 +995,9 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                           {/* ============== Shots intensity END ============== */}
                         </div>
                         {/* ============== Operate as toggle START ============== */}
-                        <div className="flex content-center justify-between">
+                        {selectedUnits.every((unit) => unit.getCoalition() === 'neutral') && <div className={`
+                          flex content-center justify-between
+                        `}>
                           <span
                             className={`
                               my-auto font-normal
@@ -1016,7 +1018,7 @@ export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
                               });
                             }}
                           />
-                        </div>
+                        </div>}
                         {/* ============== Operate as toggle END ============== */}
                       </div>
                       {/* ============== Follow roads toggle START ============== */}

frontend/react/src/unit/unit.ts

@@ -425,6 +425,7 @@ export abstract class Unit extends CustomMarker {
     var updateMarker = !getApp().getMap().hasLayer(this) && this.getAlive();
 
     var oldIsLeader = this.#isLeader;
+    var oldOperateAs = this.#operateAs;
     var datumIndex = 0;
     while (datumIndex != DataIndexes.endOfData) {
       datumIndex = dataExtractor.extractUInt8();
@@ -568,6 +569,7 @@ export abstract class Unit extends CustomMarker {
           break;
         case DataIndexes.operateAs:
           this.#operateAs = enumToCoalition(dataExtractor.extractUInt8());
+          updateMarker = true;
           break;
         case DataIndexes.shotsScatter:
           this.#shotsScatter = dataExtractor.extractUInt8();
@@ -589,7 +591,7 @@ export abstract class Unit extends CustomMarker {
     if (updateMarker) this.#updateMarker();
 
     /* Redraw the marker if isLeader has changed. TODO I don't love this approach, observables may be more elegant */
-    if (oldIsLeader !== this.#isLeader) {
+    if (oldIsLeader !== this.#isLeader || oldOperateAs !== this.#operateAs) {
       this.#redrawMarker();
 
       /* Reapply selection */
@@ -883,6 +885,7 @@ export abstract class Unit extends CustomMarker {
     el.classList.add("unit");
     el.setAttribute("data-object", `unit-${this.getMarkerCategory()}`);
     el.setAttribute("data-coalition", this.#coalition);
+    el.setAttribute("data-operate-as", this.#operateAs);
 
     var iconOptions = this.getIconOptions();