Started readding old core frontend code

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

@@ -0,0 +1,25 @@
+import { DivIcon, Map, Marker } from "leaflet";
+import { MarkerOptions } from "leaflet";
+import { LatLngExpression } from "leaflet";
+
+export class CustomMarker extends Marker {
+    constructor(latlng: LatLngExpression, options?: MarkerOptions) {
+        super(latlng, options);
+    }
+
+    onAdd(map: Map): this {
+        this.setIcon(new DivIcon()); // Default empty icon
+        super.onAdd(map);
+        this.createIcon();
+        return this;
+    }
+
+    onRemove(map: Map): this {
+        super.onRemove(map);
+        return this;
+    }
+
+    createIcon() {
+        /* Overloaded by child classes */
+    }
+}

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

@@ -0,0 +1,19 @@
+import { DivIcon, LatLng } from "leaflet";
+import { CustomMarker } from "../markers/custommarker";
+
+export class DestinationPreviewHandle extends CustomMarker {
+    constructor(latlng: LatLng) {
+        super(latlng, {interactive: true, draggable: true});
+    }
+
+    createIcon() {
+        this.setIcon(new DivIcon({
+            iconSize: [18, 18],
+            iconAnchor: [9, 9],
+            className: "leaflet-destination-preview-handle-marker",
+        }));
+        var el = document.createElement("div");
+        el.classList.add("ol-destination-preview-handle-icon");
+        this.getElement()?.appendChild(el);
+    }
+}

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

@@ -0,0 +1,20 @@
+import { DivIcon, LatLngExpression, MarkerOptions } from "leaflet";
+import { CustomMarker } from "./custommarker";
+
+export class DestinationPreviewMarker extends CustomMarker {
+    constructor(latlng: LatLngExpression, options?: MarkerOptions) {
+        super(latlng, options);
+        this.setZIndexOffset(9999);
+    }
+
+    createIcon() {
+        this.setIcon(new DivIcon({
+            iconSize: [52, 52],
+            iconAnchor: [26, 26],
+            className: "leaflet-destination-preview",
+        }));
+        var el = document.createElement("div");
+        el.classList.add("ol-destination-preview-icon");
+        this.getElement()?.appendChild(el);
+    }
+}

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

@@ -0,0 +1,31 @@
+import { DivIcon, LatLngExpression, MarkerOptions } from "leaflet";
+import { CustomMarker } from "./custommarker";
+import { SVGInjector } from "@tanem/svg-injector";
+import { getApp } from "../../olympusapp";
+
+export class SmokeMarker extends CustomMarker {
+    #color: string;
+
+    constructor(latlng: LatLngExpression, color: string, options?: MarkerOptions) {
+        super(latlng, options);
+        this.setZIndexOffset(9999);
+        this.#color = color;
+        window.setTimeout(() => { this.removeFrom(getApp().getMap()); }, 300000) /* Remove the smoke after 5 minutes */
+    }
+
+    createIcon() {
+        this.setIcon(new DivIcon({
+            iconSize: [52, 52],
+            iconAnchor: [26, 52],
+            className: "leaflet-smoke-marker",
+        }));
+        var el = document.createElement("div");
+        el.classList.add("ol-smoke-icon");
+        el.setAttribute("data-color", this.#color);
+        var img = document.createElement("img");
+        img.src = "/resources/theme/images/markers/smoke.svg";
+        img.onload = () => SVGInjector(img);
+        el.appendChild(img);
+        this.getElement()?.appendChild(el);
+    }
+}

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

@@ -0,0 +1,20 @@
+import { DivIcon, LatLngExpression, MarkerOptions } from "leaflet";
+import { CustomMarker } from "./custommarker";
+
+export class TargetMarker extends CustomMarker {
+    constructor(latlng: LatLngExpression, options?: MarkerOptions) {
+        super(latlng, options);
+        this.setZIndexOffset(9999);
+    }
+
+    createIcon() {
+        this.setIcon(new DivIcon({
+            iconSize: [52, 52],
+            iconAnchor: [26, 26],
+            className: "leaflet-target-marker",
+        }));
+        var el = document.createElement("div");
+        el.classList.add("ol-target-icon");
+        this.getElement()?.appendChild(el);
+    }
+}

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

@@ -0,0 +1,76 @@
+import { CustomMarker } from "./custommarker";
+import { DivIcon, LatLng } from "leaflet";
+import { SVGInjector } from "@tanem/svg-injector";
+import { getMarkerCategoryByName, getUnitDatabaseByCategory } from "../../other/utils";
+import { getApp } from "../../olympusapp";
+
+export class TemporaryUnitMarker extends CustomMarker {
+    #name: string;
+    #coalition: string;
+    #commandHash: string|undefined = undefined;
+    #timer: number = 0;
+
+    constructor(latlng: LatLng, name: string, coalition: string, commandHash?: string) {
+        super(latlng, {interactive: false});
+        this.#name = name;
+        this.#coalition = coalition;
+        this.#commandHash = commandHash;
+
+        if (commandHash !== undefined) 
+            this.setCommandHash(commandHash)
+    }
+
+    setCommandHash(commandHash: string) {
+        this.#commandHash = commandHash;
+        this.#timer = window.setInterval(() => { 
+            if (this.#commandHash !== undefined)  {
+                getApp().getServerManager().isCommandExecuted((res: any) => {
+                    if (res.commandExecuted) {
+                        this.removeFrom(getApp().getMap());
+                        window.clearInterval(this.#timer);
+                    }
+                }, this.#commandHash)
+            }
+        }, 1000);
+    }
+
+    createIcon() {
+        const category = getMarkerCategoryByName(this.#name);
+        const databaseEntry = getUnitDatabaseByCategory(category)?.getByName(this.#name);
+
+        /* Set the icon */
+        var icon = new DivIcon({
+            className: 'leaflet-unit-icon',
+            iconAnchor: [25, 25],
+            iconSize: [50, 50],
+        });
+        this.setIcon(icon);
+
+        var el = document.createElement("div");
+        el.classList.add("unit");
+        el.setAttribute("data-object", `unit-${category}`);
+        el.setAttribute("data-coalition", this.#coalition);
+
+        // Main icon
+        var unitIcon = document.createElement("div");
+        unitIcon.classList.add("unit-icon");
+        var img = document.createElement("img");
+
+        img.src = `/resources/theme/images/units/${databaseEntry?.markerFile ?? category}.svg`;
+        img.onload = () => SVGInjector(img);
+        unitIcon.appendChild(img);
+        unitIcon.toggleAttribute("data-rotate-to-heading", false);
+        el.append(unitIcon);
+        
+        // Short label
+        if (category == "aircraft" || category == "helicopter") {
+            var shortLabel = document.createElement("div");
+            shortLabel.classList.add("unit-short-label");
+            shortLabel.innerText = databaseEntry?.shortLabel || ""; 
+            el.append(shortLabel);
+        }
+
+        this.getElement()?.appendChild(el);
+        this.getElement()?.classList.add("ol-temporary-marker");
+    }
+}