feat: Added unit spawn heading selection

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

@@ -421,7 +421,7 @@
   color: var(--secondary-blue-text);
 }
 
-[data-object|="unit"][data-coalition="blue"][data-is-selected] path {
+[data-object|="unit"][data-coalition="blue"][data-is-selected] path:nth-child(1) {
   fill: var(--secondary-blue-text);
 }
 
@@ -577,10 +577,41 @@
   display: block;
 }
 
-.ol-temporary-marker {
+.ol-temporary-marker .unit-icon {
   opacity: 0.5;
 }
 
+.ol-temporary-marker .unit-short-label {
+  opacity: 0.5;
+}
+
+.ol-temporary-marker .heading-handle {
+  width: 30px;
+  height: 30px;
+  position: absolute;
+  top: -40px;
+  left: 50%;
+  transform: translateX(-50%);
+  cursor: move;
+  pointer-events: all;
+}
+
+.ol-temporary-marker .heading-handle svg {
+  position: absolute;
+  width: 100%;
+}
+
+.ol-temporary-marker [data-coalition="blue"] .heading-handle svg {
+  fill: var(--unit-background-blue);
+}
+
+.ol-temporary-marker [data-coalition="red"] .heading-handle svg {
+  fill: var(--unit-background-red);
+}
+
+.ol-temporary-marker [data-coalition="neutral"] .heading-handle svg {
+  fill: var(--unit-background-neutral);
+}
 .unit-bullseye,
 .unit-braa {
   width: 50%;

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

@@ -3,6 +3,8 @@ import { DivIcon, LatLng } from "leaflet";
 import { SVGInjector } from "@tanem/svg-injector";
 import { getApp } from "../../olympusapp";
 import { UnitBlueprint } from "../../interfaces";
+import { deg2rad, normalizeAngle, rad2deg } from "../../other/utils";
+import { SpawnHeadingChangedEvent } from "../../events";
 
 export class TemporaryUnitMarker extends CustomMarker {
   #name: string;
@@ -72,6 +74,50 @@ export class TemporaryUnitMarker extends CustomMarker {
         el.append(shortLabel);
       }
 
+      // Heading handle
+      if (this.#headingHandle) {
+        var handle = document.createElement("div");
+        var handleImg = document.createElement("img");
+        handleImg.src = "/images/others/arrow.svg";
+        handleImg.onload = () => SVGInjector(handleImg);
+        handle.classList.add("heading-handle");
+        el.append(handle);
+
+        handle.append(handleImg);
+
+        const rotateHandle = (heading) => {
+          el.style.transform = `rotate(${heading}deg)`;
+          unitIcon.style.transform = `rotate(-${heading}deg)`;
+          shortLabel.style.transform = `rotate(-${heading}deg)`;
+        };
+
+        SpawnHeadingChangedEvent.on((heading) => rotateHandle(heading));
+        rotateHandle(getApp().getMap().getSpawnHeading());
+
+        // Add drag and rotate functionality
+        handle.addEventListener("mousedown", (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+
+          const onMouseMove = (e) => {
+            const rect = el.getBoundingClientRect();
+            const centerX = rect.left + rect.width / 2;
+            const centerY = rect.top + rect.height / 2;
+            let angle = rad2deg(Math.atan2(e.clientY - centerY, e.clientX - centerX)) + 90;
+            angle = normalizeAngle(angle);
+            getApp().getMap().setSpawnHeading(angle);
+          };
+
+          const onMouseUp = () => {
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("mouseup", onMouseUp);
+          };
+
+          document.addEventListener("mousemove", onMouseMove);
+          document.addEventListener("mouseup", onMouseUp);
+        });
+      }
+
       this.getElement()?.appendChild(el);
       this.getElement()?.classList.add("ol-temporary-marker");
     }