Added client support for server URIs

client/src/missionhandler/airbase.ts

@@ -0,0 +1,59 @@
+import * as L from 'leaflet'
+
+export interface AirbaseOptions
+{
+    name: string,
+    position: L.LatLng,
+    src: string
+}
+
+export class Airbase extends L.Marker 
+{
+    #name: string = "";
+    #coalitionID: number = -1;
+
+    constructor(options: AirbaseOptions)
+    {
+        super(options.position, { riseOnHover: true });
+
+        this.#name = options.name;
+
+        var icon = new L.DivIcon({
+            html: `<table class="airbase-marker-container" id="container">
+                    <tr>
+                        <td>
+                            <img class="airbase-marker-image" id="icon" src="${options.src}">
+                            <div class="airbase-marker-name" id="name">${options.name}</div>
+                        </td>
+                    </tr>
+                </table>`, 
+            className: 'airbase-marker'});   // Set the marker, className must be set to avoid white square
+        this.setIcon(icon);
+    }
+
+    setCoalitionID(coalitionID: number)
+    {
+        this.#coalitionID = coalitionID;
+        var element = this.getElement();
+        if (element != null)
+        {
+            var img = element.querySelector("#icon");
+            if (img != null)
+            {
+                img.classList.toggle("blue", this.#coalitionID == 2);
+                img.classList.toggle("red", this.#coalitionID == 1);
+                img.classList.toggle("neutral", this.#coalitionID == 0);
+            }
+        }
+    }
+
+    getName()
+    {
+        return this.#name;
+    }
+
+    getCoalitionID()
+    {
+        return this.#coalitionID;
+    }
+}

client/src/missionhandler/missionhandler.ts

@@ -0,0 +1,103 @@
+import { Marker, LatLng, Icon } from "leaflet";
+import { getMap, getUnitsManager } from "..";
+import { SpawnEvent } from "../map/map";
+import { Airbase } from "./airbase";
+
+var bullseyeIcons = [
+    new Icon({ iconUrl: 'images/bullseye0.png', iconAnchor: [30, 30]}),
+    new Icon({ iconUrl: 'images/bullseye1.png', iconAnchor: [30, 30]}),
+    new Icon({ iconUrl: 'images/bullseye2.png', iconAnchor: [30, 30]})
+]
+
+export class MissionHandler
+{
+    #bullseyes      : any; //TODO declare interface
+    #bullseyeMarkers: any;
+    #airbases       : any; //TODO declare interface
+    #airbasesMarkers: {[name: string]: Airbase};
+
+    constructor()
+    {
+        this.#bullseyes = undefined;
+        this.#bullseyeMarkers = [
+            new Marker([0, 0], {icon: bullseyeIcons[0]}).addTo(getMap()),
+            new Marker([0, 0], {icon: bullseyeIcons[1]}).addTo(getMap()),
+            new Marker([0, 0], {icon: bullseyeIcons[2]}).addTo(getMap())
+        ]
+        this.#airbasesMarkers = {};
+    }
+
+    update(data: BullseyesData | AirbasesData)
+    {
+        if ("bullseyes" in data)
+        {
+            this.#bullseyes = data.bullseyes;
+            this.#drawBullseyes();
+        }
+
+        if ("airbases" in data)
+        {
+            this.#airbases = data.airbases;
+            this.#drawAirbases();
+        }
+    }
+
+    getBullseyes()
+    {
+        return this.#bullseyes;
+    }
+
+    #drawBullseyes()
+    {
+        for (let idx in this.#bullseyes)
+        {
+            var bullseye = this.#bullseyes[idx];
+            this.#bullseyeMarkers[idx].setLatLng(new LatLng(bullseye.lat, bullseye.lng)); 
+        }
+    }
+
+    #drawAirbases()
+    {
+        for (let idx in this.#airbases)
+        {
+            var airbase = this.#airbases[idx]
+            if (this.#airbasesMarkers[idx] === undefined)
+            {
+                this.#airbasesMarkers[idx] = new Airbase({
+                    position: new LatLng(airbase.lat, airbase.lng), 
+                    name: airbase.callsign,
+                    src: "images/airbase.png"}).addTo(getMap());
+                this.#airbasesMarkers[idx].on('contextmenu', (e) => this.#onAirbaseClick(e));
+            }
+            else
+            {
+                this.#airbasesMarkers[idx].setCoalitionID(airbase.coalition);
+            }
+        }
+    }
+
+    #onAirbaseClick(e: any)
+    {
+        var options = [];
+        if (getUnitsManager().getSelectedUnits().length > 0)
+            options = ["Spawn unit", "Land here"];
+        else 
+            options = ["Spawn unit"];
+
+        getMap().showContextMenu(e.originalEvent, e.sourceTarget.getName(),
+            options.map((option) => {return {tooltip: option, src: "", callback: (label: string) => {this.#onAirbaseOptionSelection(e, label)}}}, false)
+        )
+    }
+
+    #onAirbaseOptionSelection(e: any, option: string) {
+        if (option === "Spawn unit") {
+            var spawnEvent: SpawnEvent = {x: e.originalEvent.x, y: e.originalEvent.y, latlng: e.latlng, airbaseName: e.sourceTarget.getName(), coalitionID: e.sourceTarget.getCoalitionID()};
+            getMap().spawnFromAirbase(spawnEvent);
+        }
+        else if (option === "Land here")
+        {
+            getMap().hideContextMenu();
+            getUnitsManager().selectedUnitsLandAt(e.latlng);
+        }
+    }
+}