Merge pull request #362 from Pax1601/356-add-marker-for-deployed-smoke

Create colored smoke markers

client/src/controls/mapcontextmenu.ts

@@ -12,6 +12,7 @@ import { ftToM } from "../other/utils";
 import { GAME_MASTER } from "../constants/constants";
 import { navyUnitDatabase } from "../unit/navyunitdatabase";
 import { CoalitionArea } from "../map/coalitionarea";
+import { SmokeMarker } from "../map/smokemarker";
 
 export class MapContextMenu extends ContextMenu {
     #coalitionSwitch: Switch;
@@ -158,6 +159,8 @@ export class MapContextMenu extends ContextMenu {
         document.addEventListener("contextMenuDeploySmoke", (e: any) => {
             this.hide();
             spawnSmoke(e.detail.color, this.getLatLng());
+            var marker = new SmokeMarker(this.getLatLng(), e.detail.color);
+            marker.addTo(getMap());
         });
 
         document.addEventListener("contextMenuExplosion", (e: any) => {

client/src/map/smokemarker.ts

@@ -0,0 +1,31 @@
+import { DivIcon, LatLngExpression, MarkerOptions } from "leaflet";
+import { CustomMarker } from "./custommarker";
+import { SVGInjector } from "@tanem/svg-injector";
+import { getMap } from "..";
+
+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(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);
+    }
+}