feat: Drawings added to sessiondata

frontend/react/public/images/cursors/clone.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   fill="none"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="clone.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
+   xml:space="preserve"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs10" /><sodipodi:namedview
+     id="namedview8"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="6.9333332"
+     inkscape:cx="2.0913462"
+     inkscape:cy="15.360577"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6"
+     inkscape:showpageshadow="0"
+     inkscape:deskcolor="#505050" /><path
+     d="M 2.4241111,3.9396717 V 21.494955 c 0,0.5776 0.468708,1.041576 1.0415756,1.041576 0.2982683,0 0.5870705,-0.127832 0.785916,-0.355083 l 3.9106436,-4.474042 2.7507057,5.506148 c 0.374022,0.748041 1.283033,1.051042 2.031074,0.677023 0.748041,-0.374022 1.051042,-1.283033 0.677024,-2.031073 l -2.684426,-5.38305 h 5.591368 c 0.577601,0 1.04631,-0.468711 1.04631,-1.046312 0,-0.298268 -0.127829,-0.582334 -0.35035,-0.781179 L 4.2516027,3.1206137 C 4.0480242,2.9407041 3.7923646,2.8412813 3.5225015,2.8412813 c -0.6060096,0 -1.0983904,0.4923807 -1.0983904,1.0983904 z"
+     id="path1"
+     style="fill:#ffffff;fill-opacity:1;stroke:#262626;stroke-width:3.89387;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" /><path
+     d="m 24.625095,26.89651 h -3.893886 v -3.893887 h 1.112538 v -1.112538 h -1.112538 c -0.613636,0 -1.112539,0.498905 -1.112539,1.112538 v 3.893887 c 0,0.613636 0.498903,1.112538 1.112539,1.112538 h 3.893886 c 0.613633,0 1.112538,-0.498902 1.112538,-1.112538 v -1.112539 h -1.112538 z m -1.112539,-1.668807 h 3.893884 c 0.613636,0 1.112538,-0.498905 1.112538,-1.112538 v -3.893887 c 0,-0.613636 -0.498902,-1.112538 -1.112538,-1.112538 h -3.893884 c -0.613636,0 -1.112538,0.498902 -1.112538,1.112538 v 3.893887 c 0,0.613633 0.498902,1.112538 1.112538,1.112538 z"
+     id="path1-6"
+     style="fill:#ffffff;fill-opacity:1;stroke-width:4;stroke:#262626;stroke-opacity:1;stroke-dasharray:none;paint-order:stroke fill markers" /></svg>

frontend/react/public/images/cursors/plus.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   fill="none"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="plus.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
+   xml:space="preserve"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs10" /><sodipodi:namedview
+     id="namedview8"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="1.7333333"
+     inkscape:cx="76.442309"
+     inkscape:cy="128.94231"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6"
+     inkscape:showpageshadow="0"
+     inkscape:deskcolor="#505050" /><path
+     d="M 2.4241111,3.9396717 V 21.494955 c 0,0.5776 0.468708,1.041576 1.0415756,1.041576 0.2982683,0 0.5870705,-0.127832 0.785916,-0.355083 l 3.9106436,-4.474042 2.7507057,5.506148 c 0.374022,0.748041 1.283033,1.051042 2.031074,0.677023 0.748041,-0.374022 1.051042,-1.283033 0.677024,-2.031073 l -2.684426,-5.38305 h 5.591368 c 0.577601,0 1.04631,-0.468711 1.04631,-1.046312 0,-0.298268 -0.127829,-0.582334 -0.35035,-0.781179 L 4.2516027,3.1206137 C 4.0480242,2.9407041 3.7923646,2.8412813 3.5225015,2.8412813 c -0.6060096,0 -1.0983904,0.4923807 -1.0983904,1.0983904 z"
+     id="path1"
+     style="fill:#ffffff;fill-opacity:1;stroke:#262626;stroke-width:3.89387;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" /><path
+     style="fill:#e58900;stroke:#262626;stroke-width:5.93691;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;paint-order:stroke fill markers"
+     d="m 24.049635,17.904581 v 9.129834"
+     id="path2" /><path
+     style="fill:#e58900;stroke:#262626;stroke-width:6.06694;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;paint-order:stroke fill markers"
+     d="m 19.503605,22.447434 h 8.869878"
+     id="path3" /><path
+     style="fill:#e58900;stroke:#ffffff;stroke-width:2.19356;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+     d="m 24.04071,17.909904 v 8.863023"
+     id="path2-4" /><path
+     style="fill:#e58900;stroke:#ffffff;stroke-width:2.25785;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+     d="m 19.7265,22.406915 h 8.735924"
+     id="path3-1" /></svg>

frontend/react/src/events.ts

@@ -150,7 +150,7 @@ export class ModalEvent {
   }
 }
 
-export class SessionDataLoadedEvent {
+export class SessionDataChangedEvent {
   static on(callback: (sessionData: SessionData) => void) {
     document.addEventListener(this.name, (ev: CustomEventInit) => {
       callback(ev.detail.sessionData);
@@ -163,6 +163,9 @@ export class SessionDataLoadedEvent {
   }
 }
 
+export class SessionDataSavedEvent extends SessionDataChangedEvent {}
+export class SessionDataLoadedEvent extends SessionDataChangedEvent {}
+
 /************** Map events ***************/
 export class MouseMovedEvent {
   static on(callback: (latlng: LatLng, elevation: number) => void) {
@@ -229,6 +232,8 @@ export class CoalitionAreaSelectedEvent {
   }
 }
 
+export class CoalitionAreaChangedEvent extends CoalitionAreaSelectedEvent {}
+
 export class CoalitionAreasChangedEvent {
   static on(callback: (coalitionAreas: (CoalitionCircle | CoalitionPolygon)[]) => void) {
     document.addEventListener(this.name, (ev: CustomEventInit) => {

frontend/react/src/interfaces.ts

@@ -5,10 +5,10 @@ export interface OlympusConfig {
   frontend: {
     port: number;
     customAuthHeaders: {
-      enabled: boolean,
-      username: string,
-      group: string
-    }
+      enabled: boolean;
+      username: string;
+      group: string;
+    };
     elevationProvider: {
       provider: string;
       username: string | null;
@@ -32,23 +32,25 @@ export interface OlympusConfig {
     WSPort?: number;
     WSEndpoint?: string;
   };
-  controllers: [
-    {type: string, coalition: Coalition, frequency: number, modulation: number, callsign: string},
-  ];
+  controllers: [{ type: string; coalition: Coalition; frequency: number; modulation: number; callsign: string }];
   local: boolean;
-  profiles?: {[key: string]: ProfileOptions};
+  profiles?: { [key: string]: ProfileOptions };
   authentication?: {
-    gameMasterPassword: string,
-    blueCommanderPasword: string,
-    redCommanderPassword: string
-  }
+    gameMasterPassword: string;
+    blueCommanderPasword: string;
+    redCommanderPassword: string;
+  };
 }
 
 export interface SessionData {
   radios?: { frequency: number; modulation: number; pan: number }[];
   fileSources?: { filename: string; volume: number }[];
-  unitSinks?: {ID: number}[];
+  unitSinks?: { ID: number }[];
   connections?: any[];
+  coalitionAreas?: (
+    | { type: 'circle', label: string; latlng: { lat: number; lng: number }; radius: number; coalition: Coalition }
+    | { type: 'polygon', label: string; latlngs: { lat: number; lng: number }[]; coalition: Coalition }
+  )[];
 }
 
 export interface ProfileOptions {

frontend/react/src/map/coalitionarea/coalitionareamanager.ts

@@ -1,10 +1,11 @@
 import { LatLng, LeafletMouseEvent } from "leaflet";
 import { DrawSubState, OlympusState } from "../../constants/constants";
-import { AppStateChangedEvent, CoalitionAreasChangedEvent, CoalitionAreaSelectedEvent } from "../../events";
+import { AppStateChangedEvent, CoalitionAreaChangedEvent, CoalitionAreasChangedEvent, CoalitionAreaSelectedEvent, SessionDataLoadedEvent } from "../../events";
 import { getApp } from "../../olympusapp";
 import { areaContains } from "../../other/utils";
 import { CoalitionCircle } from "./coalitioncircle";
 import { CoalitionPolygon } from "./coalitionpolygon";
+import { SessionData } from "../../interfaces";
 
 export class CoalitionAreasManager {
   /* Coalition areas drawing */
@@ -37,6 +38,34 @@ export class CoalitionAreasManager {
         }
       }, 200);
     });
+
+    CoalitionAreaChangedEvent.on((area) => {
+      CoalitionAreasChangedEvent.dispatch(this.#areas);
+    });
+
+    SessionDataLoadedEvent.on((sessionData: SessionData) => {
+      /* Make a local copy */
+      const localSessionData = JSON.parse(JSON.stringify(sessionData)) as SessionData;
+      this.#areas.forEach((area) => this.deleteCoalitionArea(area));
+      localSessionData.coalitionAreas?.forEach((options) => {
+        if (options.type === 'circle') {
+          let newCircle = new CoalitionCircle(new LatLng(options.latlng.lat, options.latlng.lng), { radius: options.radius }, false);
+          newCircle.setCoalition(options.coalition);
+          newCircle.setLabelText(options.label);
+          newCircle.setSelected(false);
+          this.#areas.push(newCircle);
+        } else if (options.type === 'polygon') {
+          if (options.latlngs.length >= 3) {
+            let newPolygon = new CoalitionPolygon(options.latlngs.map((latlng) => new LatLng(latlng.lat, latlng.lng)), {}, false);
+            newPolygon.setCoalition(options.coalition);
+            newPolygon.setLabelText(options.label);
+            newPolygon.setSelected(false);
+            this.#areas.push(newPolygon);
+          }
+        }
+      });
+      CoalitionAreasChangedEvent.dispatch(this.#areas);
+    });
   }
 
   setSelectedArea(area: CoalitionCircle | CoalitionPolygon | null) {
@@ -118,4 +147,8 @@ export class CoalitionAreasManager {
       getApp().setState(OlympusState.DRAW, DrawSubState.EDIT);
     else getApp().setState(OlympusState.DRAW);
   }
+
+  getAreas() {
+    return this.#areas;
+  }
 }

frontend/react/src/map/coalitionarea/coalitioncircle.ts

@@ -4,19 +4,20 @@ import { CoalitionAreaHandle } from "./coalitionareahandle";
 import { BLUE_COMMANDER, RED_COMMANDER } from "../../constants/constants";
 import { Coalition } from "../../types/types";
 import * as turf from "@turf/turf";
-import { CoalitionAreaSelectedEvent } from "../../events";
+import { CoalitionAreaChangedEvent, CoalitionAreaSelectedEvent } from "../../events";
 
 let totalCircles = 0;
 
 export class CoalitionCircle extends Circle {
   #coalition: Coalition = "blue";
   #selected: boolean = true;
-  #creating: boolean = true;
+  #creating: boolean = false;
   #radiusHandle: CoalitionAreaHandle;
   #labelText: string;
   #label: Marker;
+  #updateTimeout: number | null = null;
 
-  constructor(latlng: LatLngExpression, options: CircleOptions) {
+  constructor(latlng: LatLngExpression, options: CircleOptions, creating = true) {
     if (options === undefined) options = { radius: 0 };
 
     totalCircles++;
@@ -30,6 +31,7 @@ export class CoalitionCircle extends Circle {
     this.#setColors();
 
     this.#labelText = `Circle ${totalCircles}`;
+    this.#creating = creating;
 
     if ([BLUE_COMMANDER, RED_COMMANDER].includes(getApp().getMissionManager().getCommandModeOptions().commandMode))
       this.setCoalition(getApp().getMissionManager().getCommandedCoalition());
@@ -37,6 +39,12 @@ export class CoalitionCircle extends Circle {
     this.on("drag", () => {
       this.#setRadiusHandle();
       this.#drawLabel();
+
+      if (this.#updateTimeout) window.clearTimeout(this.#updateTimeout);
+      this.#updateTimeout = window.setTimeout(() => {
+        CoalitionAreaChangedEvent.dispatch(this);
+        this.#updateTimeout = null;
+      }, 500);
     });
 
     getApp().getMap().addLayer(this);
@@ -45,6 +53,7 @@ export class CoalitionCircle extends Circle {
   setCoalition(coalition: Coalition) {
     this.#coalition = coalition;
     this.#setColors();
+    CoalitionAreaChangedEvent.dispatch(this);
   }
 
   getCoalition() {
@@ -91,18 +100,20 @@ export class CoalitionCircle extends Circle {
   setLabelText(labelText: string) {
     this.#labelText = labelText;
     this.#drawLabel();
+    CoalitionAreaChangedEvent.dispatch(this);
   }
 
   onAdd(map: Map): this {
     super.onAdd(map);
     this.#drawLabel();
+
     return this;
   }
 
   onRemove(map: Map): this {
     super.onRemove(map);
     this.#label?.removeFrom(map);
-    this.#radiusHandle.removeFrom(map);
+    this.#radiusHandle?.removeFrom(map);
     return this;
   }
 

frontend/react/src/map/coalitionarea/coalitionpolygon.ts

@@ -5,21 +5,22 @@ import { CoalitionAreaMiddleHandle } from "./coalitionareamiddlehandle";
 import { BLUE_COMMANDER, RED_COMMANDER } from "../../constants/constants";
 import { Coalition } from "../../types/types";
 import { polyCenter } from "../../other/utils";
-import { CoalitionAreaSelectedEvent } from "../../events";
+import { CoalitionAreaChangedEvent, CoalitionAreaSelectedEvent } from "../../events";
 
 let totalPolygons = 0;
 
 export class CoalitionPolygon extends Polygon {
   #coalition: Coalition = "blue";
   #selected: boolean = true;
-  #creating: boolean = true;
+  #creating: boolean = false;
   #handles: CoalitionAreaHandle[] = [];
   #middleHandles: CoalitionAreaMiddleHandle[] = [];
   #activeIndex: number = 0;
   #labelText: string;
   #label: Marker;
+  #updateTimeout: number | null = null;
 
-  constructor(latlngs: LatLngExpression[] | LatLngExpression[][] | LatLngExpression[][][], options?: PolylineOptions) {
+  constructor(latlngs: LatLngExpression[] | LatLngExpression[][] | LatLngExpression[][][], options?: PolylineOptions, creating = true) {
     if (options === undefined) options = {};
 
     totalPolygons++;
@@ -33,6 +34,7 @@ export class CoalitionPolygon extends Polygon {
     this.#setColors();
 
     this.#labelText = `Polygon ${totalPolygons}`;
+    this.#creating = creating;
 
     if ([BLUE_COMMANDER, RED_COMMANDER].includes(getApp().getMissionManager().getCommandModeOptions().commandMode))
       this.setCoalition(getApp().getMissionManager().getCommandedCoalition());
@@ -41,6 +43,12 @@ export class CoalitionPolygon extends Polygon {
       this.#setHandles();
       this.#setMiddleHandles();
       this.#drawLabel();
+
+      if (this.#updateTimeout) window.clearTimeout(this.#updateTimeout);
+      this.#updateTimeout = window.setTimeout(() => {
+        CoalitionAreaChangedEvent.dispatch(this);
+        this.#updateTimeout = null;
+      }, 500);
     });
 
     getApp().getMap().addLayer(this);
@@ -49,6 +57,7 @@ export class CoalitionPolygon extends Polygon {
   setCoalition(coalition: Coalition) {
     this.#coalition = coalition;
     this.#setColors();
+    CoalitionAreaChangedEvent.dispatch(this);
   }
 
   getCoalition() {
@@ -111,6 +120,7 @@ export class CoalitionPolygon extends Polygon {
   setLabelText(labelText: string) {
     this.#labelText = labelText;
     this.#drawLabel();
+    CoalitionAreaChangedEvent.dispatch(this);
   }
 
   onAdd(map: Map): this {
@@ -129,6 +139,13 @@ export class CoalitionPolygon extends Polygon {
   setLatLngs(latlngs: LatLngExpression[] | LatLngExpression[][] | LatLngExpression[][][]) {
     super.setLatLngs(latlngs);
     this.#drawLabel();
+
+    if (this.#updateTimeout) window.clearTimeout(this.#updateTimeout);
+    this.#updateTimeout = window.setTimeout(() => {
+      CoalitionAreaChangedEvent.dispatch(this);
+      this.#updateTimeout = null;
+    }, 500);
+
     return this;
   }
 

frontend/react/src/map/map.ts

@@ -24,6 +24,7 @@ import {
   ContextActions,
   SHORT_PRESS_MILLISECONDS,
   DEBOUNCE_MILLISECONDS,
+  DrawSubState,
 } from "../constants/constants";
 import { MapHiddenTypes, MapOptions } from "../types/types";
 import { EffectRequestTable, OlympusConfig, SpawnRequestTable } from "../interfaces";
@@ -806,6 +807,7 @@ export class Map extends L.Map {
     }
     this.getContainer().classList.remove(`explosion-cursor`);
     ["white", "blue", "red", "green", "orange"].forEach((color) => this.getContainer().classList.remove(`smoke-${color}-cursor`));
+    this.getContainer().classList.remove(`plus-cursor`);
 
     /* Operations to perform when entering a state */
     if (state === OlympusState.IDLE) {
@@ -832,7 +834,9 @@ export class Map extends L.Map {
     } else if (state === OlympusState.UNIT_CONTROL) {
       console.log(`Context action:`);
       console.log(this.#contextAction);
-    } 
+    } else if (state === OlympusState.DRAW) {
+      if (subState === DrawSubState.DRAW_CIRCLE || subState === DrawSubState.DRAW_POLYGON) this.getContainer().classList.add(`plus-cursor`);
+    }
   }
 
   #onDragStart(e: any) {
@@ -1064,6 +1068,15 @@ export class Map extends L.Map {
       this.#destinationRotation -= e.originalEvent.movementX;
     }
 
+    if (getApp().getState() === OlympusState.DRAW && (getApp().getSubState() === DrawSubState.NO_SUBSTATE || getApp().getSubState() === DrawSubState.EDIT)) {
+      getApp()
+        .getCoalitionAreasManager()
+        .getAreas()
+        .find((area) => areaContains(e.latlng, area))
+        ? this.getContainer()?.classList.add("pointer-cursor")
+        : this.getContainer()?.classList.remove("pointer-cursor");
+    }
+
     this.#moveDestinationPreviewMarkers();
   }
 

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

@@ -1,6 +1,6 @@
 .airbase-icon {
   align-items: center;
-  cursor: url("/images/cursors/pointer.svg"), auto;
+  cursor: url("/images/cursors/pointer.svg") 13 5, auto;
   display: flex;
   justify-content: center;
   position: relative;

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

@@ -1,6 +1,6 @@
 .bullseye-icon {
   align-items: center;
-  cursor: url("/images/cursors/pointer.svg"), auto;
+  cursor: url("/images/cursors/pointer.svg") 13 5, auto;
   display: flex;
   justify-content: center;
   position: relative;

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

@@ -1,6 +1,6 @@
 /*** Unit marker elements ***/
 [data-object|="unit"] {
-  cursor: url("/images/cursors/pointer.svg"), auto;
+  cursor: url("/images/cursors/pointer.svg") 13 5, auto;
   display: flex;
   height: 100%;
   justify-content: center;

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

@@ -99,6 +99,7 @@
 }
 
 .ol-coalitionarea-handle-icon {
+  cursor: url("/images/cursors/pointer.svg") 13 5, auto;
   background-color: #FFFFFFAA;
   width: 100%;
   height: 100%;
@@ -106,6 +107,7 @@
 }
 
 .ol-coalitionarea-middle-handle-icon {
+  cursor: url("/images/cursors/pointer.svg") 13 5, auto;
   background-color: #FFFFFFAA;
   width: 100%;
   height: 100%;
@@ -207,6 +209,14 @@ path.leaflet-interactive:focus {
   cursor: url("/images/cursors/simulate-fire-fight.svg"), auto !important;
 }
 
+.clone-cursor {
+  cursor: url("/images/cursors/clone.svg"), auto !important;
+}
+
+.plus-cursor {
+  cursor: url("/images/cursors/plus.svg"), auto !important;
+}
+
 #map-container.leaflet-grab {
   cursor: url("/images/cursors/grab.svg") 16 16, auto;
 }
@@ -237,4 +247,8 @@ path.leaflet-interactive:focus {
 
 #map-container .disable-pointer-events {
   pointer-events: none;
+}
+
+.pointer-cursor {
+  cursor: url("/images/cursors/pointer.svg") 13 5, auto !important;
 }

frontend/react/src/sessiondata.ts

@@ -1,10 +1,13 @@
+import { LatLng } from "leaflet";
 import { AudioSink } from "./audio/audiosink";
 import { FileSource } from "./audio/filesource";
 import { RadioSink } from "./audio/radiosink";
 import { UnitSink } from "./audio/unitsink";
 import { OlympusState } from "./constants/constants";
-import { AudioSinksChangedEvent, AudioSourcesChangedEvent, SessionDataLoadedEvent as SessionDataChangedEvent } from "./events";
+import { AudioSinksChangedEvent, AudioSourcesChangedEvent, CoalitionAreasChangedEvent, SessionDataChangedEvent, SessionDataLoadedEvent, SessionDataSavedEvent } from "./events";
 import { SessionData } from "./interfaces";
+import { CoalitionCircle } from "./map/coalitionarea/coalitioncircle";
+import { CoalitionPolygon } from "./map/coalitionarea/coalitionpolygon";
 import { getApp } from "./olympusapp";
 
 export class SessionDataManager {
@@ -74,6 +77,34 @@ export class SessionDataManager {
         this.#saveSessionData();
       }
     });
+
+    CoalitionAreasChangedEvent.on(() => {
+      this.#sessionData.coalitionAreas = []
+      getApp().getCoalitionAreasManager().getAreas().forEach((area) => {
+        if (area instanceof CoalitionCircle) {
+          this.#sessionData.coalitionAreas?.push(
+            {
+              type: 'circle',
+              latlng: {lat: area.getLatLng().lat, lng: area.getLatLng().lng},
+              coalition: area.getCoalition(),
+              label: area.getLabelText(),
+              radius: area.getRadius()
+            }
+          )
+        } else if (area instanceof CoalitionPolygon) {
+          this.#sessionData.coalitionAreas?.push(
+            {
+              type: 'polygon',
+              latlngs: (area.getLatLngs()[0] as LatLng[]).map((latlng) => {return {lat: latlng.lat, lng: latlng.lng}}),
+              coalition: area.getCoalition(),
+              label: area.getLabelText()
+            }
+          )
+        }
+      })
+
+      this.#saveSessionData();
+    })
   }
 
   loadSessionData(sessionHash?: string) {
@@ -103,8 +134,8 @@ export class SessionDataManager {
       }) // Parse the response as JSON
       .then((sessionData) => {
         this.#sessionData = sessionData;
-        this.#applySessionData();
-        SessionDataChangedEvent.dispatch(this.#sessionData);
+        console.log(this.#sessionData);
+        SessionDataLoadedEvent.dispatch(this.#sessionData);
       })
       .catch((error) => console.error(error)); // Handle errors
   }
@@ -116,6 +147,8 @@ export class SessionDataManager {
   #saveSessionData() {
     if (getApp().getState() === OlympusState.SERVER) return;
     
+    SessionDataChangedEvent.dispatch(this.#sessionData);
+
     if (this.#saveSessionDataTimeout) window.clearTimeout(this.#saveSessionDataTimeout);
     this.#saveSessionDataTimeout = window.setTimeout(() => {
       const requestOptions = {
@@ -129,7 +162,7 @@ export class SessionDataManager {
           if (response.status === 200) {
             console.log(`Session data for profile ${getApp().getServerManager().getUsername()} and session hash ${this.#sessionHash} saved correctly`);
             console.log(this.#sessionData);
-            SessionDataChangedEvent.dispatch(this.#sessionData);
+            SessionDataSavedEvent.dispatch(this.#sessionData);
           } else {
             getApp().addInfoMessage("Error loading session data");
             throw new Error("Error loading session data");
@@ -139,8 +172,4 @@ export class SessionDataManager {
       this.#saveSessionDataTimeout = null;
     }, 1000);
   }
-
-  #applySessionData() {
-    let asd = 1;
-  }
 }

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

@@ -15,10 +15,11 @@ import {
   olButtonsVisibilityNavyunit,
   olButtonsVisibilityOlympus,
 } from "../components/olicons";
-import { FaChevronLeft, FaChevronRight, FaComputer, FaTabletScreenButton } from "react-icons/fa6";
-import { CommandModeOptionsChangedEvent, ConfigLoadedEvent, HiddenTypesChangedEvent, MapOptionsChangedEvent, MapSourceChangedEvent } from "../../events";
+import { FaChevronLeft, FaChevronRight, FaComputer, FaFloppyDisk, FaTabletScreenButton } from "react-icons/fa6";
+import { CommandModeOptionsChangedEvent, ConfigLoadedEvent, HiddenTypesChangedEvent, MapOptionsChangedEvent, MapSourceChangedEvent, SessionDataChangedEvent, SessionDataSavedEvent } from "../../events";
 import { BLUE_COMMANDER, COMMAND_MODE_OPTIONS_DEFAULTS, MAP_HIDDEN_TYPES_DEFAULTS, MAP_OPTIONS_DEFAULTS } from "../../constants/constants";
 import { OlympusConfig } from "../../interfaces";
+import { FaCheck, FaSpinner } from "react-icons/fa";
 
 export function Header() {
   const [mapHiddenTypes, setMapHiddenTypes] = useState(MAP_HIDDEN_TYPES_DEFAULTS);
@@ -29,6 +30,7 @@ export function Header() {
   const [scrolledRight, setScrolledRight] = useState(false);
   const [audioEnabled, setAudioEnabled] = useState(false);
   const [commandModeOptions, setCommandModeOptions] = useState(COMMAND_MODE_OPTIONS_DEFAULTS);
+  const [savingSessionData, setSavingSessionData] = useState(false);
 
   useEffect(() => {
     HiddenTypesChangedEvent.on((hiddenTypes) => setMapHiddenTypes({ ...hiddenTypes }));
@@ -44,6 +46,8 @@ export function Header() {
     CommandModeOptionsChangedEvent.on((commandModeOptions) => {
       setCommandModeOptions(commandModeOptions);
     });
+    SessionDataChangedEvent.on(() => setSavingSessionData(true));
+    SessionDataSavedEvent.on(() => setSavingSessionData(false));
   }, []);
 
   /* Initialize the "scroll" position of the element */
@@ -112,7 +116,15 @@ export function Header() {
               {IP}
             </div>
           </div>
+          {savingSessionData ? <div className="text-white"><FaSpinner className={`
+            animate-spin text-2xl
+          `}/></div> : <div className={`relative text-white`}><FaFloppyDisk className={`
+            absolute -top-3 text-2xl
+          `}/><FaCheck className={`
+            absolute left-[9px] top-[-6px] text-2xl text-olympus-900
+          `}/><FaCheck className={`absolute left-3 top-0 text-green-500`}/></div>}
         </div>
+
         {commandModeOptions.commandMode === BLUE_COMMANDER && (
           <div className={`flex h-full rounded-md bg-blue-600 px-4 text-white`}>
             <span className="my-auto font-bold">BLUE Commander ({commandModeOptions.spawnPoints.blue} points)</span>