Merge branch 'release-candidate' into features/redgreen-unit

frontend/react/src/map/map.ts

@@ -779,7 +779,7 @@ export class Map extends L.Map {
 
   setOption(key, value) {
     this.#options[key] = value;
-    MapOptionsChangedEvent.dispatch(this.#options);
+    MapOptionsChangedEvent.dispatch(this.#options, key);
   }
 
   setOptions(options) {

frontend/react/src/map/markers/clustermarker.ts

@@ -0,0 +1,33 @@
+import { DivIcon, LatLngExpression, MarkerOptions } from "leaflet";
+import { CustomMarker } from "./custommarker";
+import { Coalition } from "../../types/types";
+
+export class ClusterMarker extends CustomMarker {
+  #coalition: Coalition;
+  #numberOfUnits: number;
+
+  constructor(latlng: LatLngExpression, coalition: Coalition, numberOfUnits:number, options?: MarkerOptions) {
+    super(latlng, options);
+    this.setZIndexOffset(9999);
+    this.#coalition = coalition;
+    this.#numberOfUnits = numberOfUnits;
+  }
+
+  createIcon() {
+    this.setIcon(
+      new DivIcon({
+        iconSize: [52, 52],
+        iconAnchor: [26, 26],
+        className: "leaflet-cluster-marker",
+      })
+    );
+    var el = document.createElement("div");
+    el.classList.add("ol-cluster-icon");
+    el.classList.add(`${this.#coalition}`);
+    this.getElement()?.appendChild(el);
+    var span = document.createElement("span");
+    span.classList.add("ol-cluster-number");
+    span.textContent = `${this.#numberOfUnits}`;
+    el.appendChild(span);
+  }
+}

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

@@ -93,6 +93,42 @@
   translate: -1px 1px;
 }
 
+.unit-cluster {
+  border: 2px solid #272727;
+  border-radius: var(--border-radius-xs);
+  display: none;
+  height: 20px;
+  position: absolute;
+  translate: 70% -70%;
+  width: 30px;
+  
+}
+
+.unit-cluster.red {
+  background-color: var(--unit-background-red);
+}
+
+.unit-cluster.blue {
+  background-color: var(--unit-background-blue);
+}
+
+.unit-cluster.neutral {
+  background-color: var(--unit-background-neutral);
+}
+
+.unit-cluster-id {
+  background-color: transparent;
+  color: #272727;
+  font-size: 12px;
+  font-weight: bolder;
+  translate: -3px -1px;
+  border-left: 3px solid #272727;
+  height: 50px;
+  padding-left: 4px;
+  text-align: center;
+  width: 50px;
+}
+
 .unit-icon {
   height: var(--unit-height);
   position: absolute;
@@ -404,6 +440,7 @@
 }
 
 [data-object|="unit"][data-is-in-hotgroup] .unit-hotgroup,
+[data-object|="unit"][data-is-cluster-leader] .unit-cluster,
 [data-object|="unit"][data-is-selected] .unit-ammo,
 [data-object|="unit"][data-is-selected] .unit-fuel,
 [data-object|="unit"][data-is-selected] .unit-health,
@@ -443,7 +480,7 @@
   color: var(--secondary-red-text);
 }
 
-[data-object|="unit"][data-coalition="red"][data-is-selected] path {
+[data-object|="unit"][data-coalition="red"][data-is-selected] path:nth-child(1) {
   fill: var(--secondary-red-text);
 }
 
@@ -561,6 +598,8 @@
 [data-object|="unit"][data-is-dead] .unit-vvi,
 [data-object|="unit"][data-is-dead] .unit-hotgroup,
 [data-object|="unit"][data-is-dead] .unit-hotgroup-id,
+[data-object|="unit"][data-is-dead] .unit-cluster,
+[data-object|="unit"][data-is-dead] .unit-cluster-id,
 [data-object|="unit"][data-is-dead] .unit-state,
 [data-object|="unit"][data-is-dead] .unit-fuel,
 [data-object|="unit"][data-is-dead] .unit-health,

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

@@ -277,3 +277,34 @@ path.leaflet-interactive:focus {
 .ol-arrow-icon svg path {
   fill: #ffffff;
 }
+
+.ol-cluster-icon {
+  height: 100%;
+  width: 100%;
+
+  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.2));
+}
+
+.ol-cluster-icon.neutral {
+  background-image: url("/images/markers/cluster-neutral.svg");;
+}
+
+.ol-cluster-icon.blue {
+  background-image: url("/images/markers/cluster-blue.svg");;
+}
+
+.ol-cluster-icon.red {
+   background-image: url("/images/markers/cluster-red.svg");;
+}
+
+.ol-cluster-number {
+  width: 100%;
+  height: 100%;
+  font-size: 14px;
+  font-weight: 700;
+  color: #272727;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}