feat: added specific cursors for different context actions and spawns

frontend/react/src/map/map.ts

@@ -578,17 +578,20 @@ export class Map extends L.Map {
   }
 
   setContextAction(contextAction: ContextAction | null) {
-    //if (contextAction) {
-    //  this.getContainer().classList.add(`${contextAction.getId()}-cursor`);
-    //  Object.values(getApp().getUnitsManager().getUnits()).forEach((node) => {
-    //    if (node instanceof Unit) node.getElement()?.classList.add(`${contextAction.getId()}-cursor`);
-    //  });
-    //} else if (this.#contextAction) {
-    //  this.getContainer().classList.remove(`${this.#contextAction.getId()}-cursor`);
-    //  Object.values(getApp().getUnitsManager().getUnits()).forEach((node) => {
-    //    if (node instanceof Unit) node.getElement()?.classList.remove(`${this.#contextAction?.getId()}-cursor`);
-    //  });
-    //}
+    if (this.#contextAction) {
+      this.getContainer().classList.remove(`${this.#contextAction.getId()}-cursor`);
+      Object.values(getApp().getUnitsManager().getUnits()).forEach((unit) => {
+        unit.getElement()?.querySelector(`[data-object|="unit"]`)?.classList.remove(`${this.#contextAction?.getId()}-cursor`);
+      });
+    }
+
+    if (contextAction) {
+      this.getContainer().classList.add(`${contextAction.getId()}-cursor`);
+      Object.values(getApp().getUnitsManager().getUnits()).forEach((unit) => {
+        unit.getElement()?.querySelector(`[data-object|="unit"]`)?.classList.add(`${contextAction.getId()}-cursor`);
+      });
+    }
+
     this.#contextAction = contextAction;
     ContextActionChangedEvent.dispatch(this.#contextAction);
   }
@@ -802,8 +805,11 @@ export class Map extends L.Map {
     this.#currentSpawnMarker = null;
     this.#currentEffectMarker?.removeFrom(this);
     this.#currentEffectMarker = null;
+    this.setContextAction(null);
     if (state !== OlympusState.UNIT_CONTROL) getApp().getUnitsManager().deselectAllUnits();
     if (state !== OlympusState.DRAW || (state === OlympusState.DRAW && subState !== DrawSubState.EDIT)) this.deselectAllCoalitionAreas();
+    this.getContainer().classList.remove(`explosion-cursor`);
+    ["white", "blue", "red", "green", "orange"].forEach((color) => this.getContainer().classList.remove(`smoke-${color}-cursor`));
 
     /* Operations to perform when entering a state */
     if (state === OlympusState.IDLE) {
@@ -821,10 +827,11 @@ export class Map extends L.Map {
       } else if (subState === SpawnSubState.SPAWN_EFFECT) {
         console.log(`Effect request table:`);
         console.log(this.#effectRequestTable);
-        if (this.#effectRequestTable?.type === "explosion") this.#currentEffectMarker = new ExplosionMarker(new L.LatLng(0, 0));
-        else if (this.#effectRequestTable?.type === "smoke")
-          this.#currentEffectMarker = new SmokeMarker(new L.LatLng(0, 0), this.#effectRequestTable.smokeColor ?? "white");
-        this.#currentEffectMarker?.addTo(this);
+        if (this.#effectRequestTable?.type === "explosion") {
+          this.getContainer().classList.add(`explosion-cursor`);
+        } else if (this.#effectRequestTable?.type === "smoke") {
+          this.getContainer().classList.add(`smoke-${this.#effectRequestTable?.smokeColor?.toLowerCase()}-cursor`);
+        }
       }
     } else if (state === OlympusState.UNIT_CONTROL) {
       console.log(`Context action:`);

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

@@ -1,6 +1,6 @@
 .airbase-icon {
   align-items: center;
-  cursor: pointer;
+  cursor: url("./images/cursors/pointer.svg"), 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: pointer;
+  cursor: url("./images/cursors/pointer.svg"), 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: pointer;*/
+  cursor: url("./images/cursors/pointer.svg"), auto;
   display: flex;
   height: 100%;
   justify-content: center;
@@ -8,6 +8,32 @@
   width: 100%;
 }
 
+[data-object|="unit"].attack-cursor {
+  cursor: url("./images/cursors/attack.svg"), auto !important;
+}
+
+[data-object|="unit"].follow-cursor {
+  cursor: url("./images/cursors/follow.svg"), auto !important;
+}
+
+[data-object|="unit"].fire-at-area-cursor,
+[data-object|="unit"].bomb-cursor,
+[data-object|="unit"].carpet-bomb-cursor {
+  cursor: url("./images/cursors/fire-at-area.svg"), auto !important;
+}
+
+[data-object|="unit"].land-cursor {
+  cursor: url("./images/cursors/land.svg"), auto !important;
+}
+
+[data-object|="unit"].land-at-point-cursor {
+  cursor: url("./images/cursors/land-at-point.svg"), auto !important;
+}
+
+[data-object|="unit"].simulate-fire-fight-cursor {
+  cursor: url("./images/cursors/simulate-fire-fight.svg"), auto !important;
+}
+
 [data-awacs-mode] .unit-short-label {
   color: transparent !important;
 }
@@ -113,35 +139,35 @@
   stroke: white;
 }
 
-[data-awacs-mode] [data-coalition="blue"] .unit-icon svg  {
+[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  {
+[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  {
+[data-awacs-mode] [data-coalition="neutral"] .unit-icon svg {
   fill: transparent !important;
   stroke: var(--unit-background-neutral) !important;
 }
 
 [data-awacs-mode] [data-is-selected] .unit-icon svg {
-  stroke: #FF0 !important;
+  stroke: #ff0 !important;
 }
 
 [data-awacs-mode] [data-is-selected] .unit-vvi {
-  background-color: #FF0 !important;
+  background-color: #ff0 !important;
 }
 
 [data-awacs-mode] [data-is-selected] .unit-summary {
-  color: #FF0 !important;
+  color: #ff0 !important;
 }
 
 [data-awacs-mode] [data-is-selected] .unit-summary::after {
-  background-color: #FF0 !important;
+  background-color: #ff0 !important;
 }
 
 /*** Cursors ***/
@@ -236,7 +262,7 @@
   translate: 80px 10px;
 }
 
-[data-awacs-mode] [data-object|="unit"] .unit-summary.cluster-north { 
+[data-awacs-mode] [data-object|="unit"] .unit-summary.cluster-north {
   translate: 50px -45px;
 }
 
@@ -276,7 +302,7 @@
   position: absolute;
   z-index: -1;
   transform-origin: 0% 0%;
-  top: 30px
+  top: 30px;
 }
 
 [data-awacs-mode] [data-object|="unit"] .unit-summary.cluster-north::after {
@@ -367,25 +393,16 @@
   background-color: var(--secondary-gunmetal-grey);
 }
 
-[data-object|="unit"][data-coalition="blue"][data-is-selected]
-  .unit-short-label {
+[data-object|="unit"][data-coalition="blue"][data-is-selected] .unit-short-label {
   color: var(--secondary-blue-text);
 }
 
 [data-object|="unit"][data-coalition="blue"] .unit-fuel-level,
 [data-object|="unit"][data-coalition="blue"] .unit-health-level,
-[data-object|="unit"][data-coalition="blue"][data-has-fox-1]
-  .unit-ammo
-  > div:nth-child(1),
-[data-object|="unit"][data-coalition="blue"][data-has-fox-2]
-  .unit-ammo
-  > div:nth-child(2),
-[data-object|="unit"][data-coalition="blue"][data-has-fox-3]
-  .unit-ammo
-  > div:nth-child(3),
-[data-object|="unit"][data-coalition="blue"][data-has-other-ammo]
-  .unit-ammo
-  > div:nth-child(4) {
+[data-object|="unit"][data-coalition="blue"][data-has-fox-1] .unit-ammo > div:nth-child(1),
+[data-object|="unit"][data-coalition="blue"][data-has-fox-2] .unit-ammo > div:nth-child(2),
+[data-object|="unit"][data-coalition="blue"][data-has-fox-3] .unit-ammo > div:nth-child(3),
+[data-object|="unit"][data-coalition="blue"][data-has-other-ammo] .unit-ammo > div:nth-child(4) {
   background-color: var(--primary-blue);
 }
 
@@ -393,25 +410,16 @@
   background-color: var(--secondary-blue-outline);
 }
 
-[data-object|="unit"][data-coalition="red"][data-is-selected]
-  .unit-short-label {
+[data-object|="unit"][data-coalition="red"][data-is-selected] .unit-short-label {
   color: var(--secondary-red-text);
 }
 
 [data-object|="unit"][data-coalition="red"] .unit-fuel-level,
 [data-object|="unit"][data-coalition="red"] .unit-health-level,
-[data-object|="unit"][data-coalition="red"][data-has-fox-1]
-  .unit-ammo
-  > div:nth-child(1),
-[data-object|="unit"][data-coalition="red"][data-has-fox-2]
-  .unit-ammo
-  > div:nth-child(2),
-[data-object|="unit"][data-coalition="red"][data-has-fox-3]
-  .unit-ammo
-  > div:nth-child(3),
-[data-object|="unit"][data-coalition="red"][data-has-other-ammo]
-  .unit-ammo
-  > div:nth-child(4) {
+[data-object|="unit"][data-coalition="red"][data-has-fox-1] .unit-ammo > div:nth-child(1),
+[data-object|="unit"][data-coalition="red"][data-has-fox-2] .unit-ammo > div:nth-child(2),
+[data-object|="unit"][data-coalition="red"][data-has-fox-3] .unit-ammo > div:nth-child(3),
+[data-object|="unit"][data-coalition="red"][data-has-other-ammo] .unit-ammo > div:nth-child(4) {
   background-color: var(--primary-red);
 }
 
@@ -541,11 +549,12 @@
   opacity: 0.5;
 }
 
-.unit-bullseye, .unit-braa {
+.unit-bullseye,
+.unit-braa {
   display: none;
 }
 
-[data-awacs-mode] .unit-bullseye, 
+[data-awacs-mode] .unit-bullseye,
 [data-awacs-mode] .unit-braa {
   display: inline;
 }

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

@@ -184,5 +184,53 @@ path.leaflet-interactive:focus {
 }
 
 .attack-cursor {
-  cursor: url("./images/buttons/context/attack.svg"), auto !important;
+  cursor: url("./images/cursors/attack.svg"), auto !important;
+}
+
+.follow-cursor {
+  cursor: url("./images/cursors/follow.svg"), auto !important;
+}
+
+.fire-at-area-cursor, .bomb-cursor, .carpet-bomb-cursor {
+  cursor: url("./images/cursors/fire-at-area.svg"), auto !important;
+}
+
+.land-cursor {
+  cursor: url("./images/cursors/land.svg"), auto !important;
+}
+
+.land-at-point-cursor {
+  cursor: url("./images/cursors/land-at-point.svg"), auto !important;
+}
+
+.simulate-fire-fight-cursor {
+  cursor: url("./images/cursors/simulate-fire-fight.svg"), auto !important;
+}
+
+#map-container.leaflet-grab {
+  cursor: url("./images/cursors/grab.svg") 16 16, auto;
+}
+
+.explosion-cursor {
+  cursor: url("./images/cursors/explosion.svg"), auto !important;
+}
+
+.smoke-white-cursor {
+  cursor: url("./images/cursors/smoke-white.svg"), auto !important;
+}
+
+.smoke-blue-cursor {
+  cursor: url("./images/cursors/smoke-blue.svg"), auto !important;
+}
+
+.smoke-red-cursor {
+  cursor: url("./images/cursors/smoke-red.svg"), auto !important;
+}
+
+.smoke-green-cursor {
+  cursor: url("./images/cursors/smoke-green.svg"), auto !important;
+}
+
+.smoke-orange-cursor {
+  cursor: url("./images/cursors/smoke-orange.svg"), auto !important;
 }