Buttons now have cute icons ^_^

client/src/constants/constants.ts

@@ -204,16 +204,19 @@ export const MAP_MARKER_CONTROLS: MapMarkerVisibilityControl[] = [{
     "toggles": ["dcs"],
     "tooltip": "Toggle DCS-controlled units' visibility"
 }, {
+    "category": "Aircraft",
     "image": "visibility/aircraft.svg",
     "name": "Aircraft",
     "toggles": ["aircraft"],
     "tooltip": "Toggle aircraft's visibility"
 }, {
+    "category": "Helicopter",
     "image": "visibility/helicopter.svg",
     "name": "Helicopter",
     "toggles": ["helicopter"],
     "tooltip": "Toggle helicopters' visibility"
 }, {
+    "category": "AirDefence",
     "image": "visibility/groundunit-sam.svg",
     "name": "Air defence",
     "toggles": ["groundunit-sam"],
@@ -224,6 +227,7 @@ export const MAP_MARKER_CONTROLS: MapMarkerVisibilityControl[] = [{
     "toggles": ["groundunit"],
     "tooltip": "Toggle ground units' visibility"
 }, {
+    "category": "GroundUnit",
     "image": "visibility/navyunit.svg",
     "name": "Naval",
     "toggles": ["navyunit"],

client/src/contextmenus/mapcontextmenu.ts

@@ -5,10 +5,10 @@ import { Switch } from "../controls/switch";
 import { GAME_MASTER } from "../constants/constants";
 import { CoalitionArea } from "../map/coalitionarea/coalitionarea";
 import { AirDefenceUnitSpawnMenu, AircraftSpawnMenu, GroundUnitSpawnMenu, HelicopterSpawnMenu, NavyUnitSpawnMenu } from "../controls/unitspawnmenu";
-import { Airbase } from "../mission/airbase";
 import { SmokeMarker } from "../map/markers/smokemarker";
 import { UnitSpawnTable } from "../interfaces";
-import { getUnitDatabaseByCategory } from "../other/utils";
+import { getCategoryBlueprintIconSVG, getUnitDatabaseByCategory } from "../other/utils";
+import { SVGInjector } from "@tanem/svg-injector";
 
 /** The MapContextMenu is the main contextmenu shown to the user whenever it rightclicks on the map. It is the primary interaction method for the user.
  * It allows to spawn units, create explosions and smoke, and edit CoalitionAreas.
@@ -312,12 +312,13 @@ export class MapContextMenu extends ContextMenu {
             const detail:any = ev.detail;
             if (buttons.length === 0) history.innerHTML = "";  //  Take out any "no data" messages
             const button = document.createElement("button");
+            button.title = "Click to spawn";
             button.setAttribute("data-spawned-coalition", detail.coalition);
             button.setAttribute("data-unit-type", detail.unitSpawnTable[0].unitType);
             button.setAttribute("data-unit-qty", detail.unitSpawnTable.length);
 
             const db = getUnitDatabaseByCategory(detail.category);
-            button.innerHTML = `${db?.getByName(detail.unitSpawnTable[0].unitType)?.label} (${detail.unitSpawnTable.length})`;
+            button.innerHTML = `<img src="${getCategoryBlueprintIconSVG(detail.category, detail.unitSpawnTable[0].unitType)}" /><span>${db?.getByName(detail.unitSpawnTable[0].unitType)?.label} (${detail.unitSpawnTable.length})</span>`;
 
             //  Remove a previous instance to save clogging up the list
             const previous:any = [].slice.call(buttons).find( (button:Element) => (
@@ -339,6 +340,7 @@ export class MapContextMenu extends ContextMenu {
 
             /*  Insert into DOM */
             history.prepend(button);
+            SVGInjector(button.querySelectorAll("img"));
 
             /* Trim down to max number of entries */
             while (history.querySelectorAll("button").length > maxEntries) {

client/src/map/map.ts

@@ -38,6 +38,7 @@ require("../../public/javascripts/leaflet.nauticscale.js")
 require("../../public/javascripts/L.Path.Drag.js")
 
 export type MapMarkerVisibilityControl = {
+    "category"?: string;
     "image": string;
     "isProtected"?: boolean,
     "name": string,

client/src/other/utils.ts

@@ -5,7 +5,7 @@ import { aircraftDatabase } from "../unit/databases/aircraftdatabase";
 import { helicopterDatabase } from "../unit/databases/helicopterdatabase";
 import { groundUnitDatabase } from "../unit/databases/groundunitdatabase";
 import { Buffer } from "buffer";
-import { ROEs, emissionsCountermeasures, reactionsToThreat, states } from "../constants/constants";
+import { GROUND_UNIT_AIR_DEFENCE_REGEX, ROEs, emissionsCountermeasures, reactionsToThreat, states } from "../constants/constants";
 import { Dropdown } from "../controls/dropdown";
 import { navyUnitDatabase } from "../unit/databases/navyunitdatabase";
 import { DateAndTime, UnitBlueprint } from "../interfaces";
@@ -371,6 +371,20 @@ export function getUnitDatabaseByCategory(category: string) {
         return null;
 }
 
+export function getCategoryBlueprintIconSVG(category:string, unitName:string) {
+
+    const path = "/resources/theme/images/buttons/visibility/";
+
+    //  We can just send these back okay
+    if (["Aircraft", "Helicopter", "NavyUnit"].includes(category)) return `${path}${category.toLowerCase()}.svg`;
+
+    //  Return if not a ground units as it's therefore something we don't recognise
+    if (category !== "GroundUnit") return false;
+
+    /** We need to get the unit detail for ground units so we can work out if it's an air defence unit or not **/
+    return GROUND_UNIT_AIR_DEFENCE_REGEX.test(unitName) ? `${path}groundunit-sam.svg` : `${path}groundunit.svg`;
+}
+
 export function base64ToBytes(base64: string) {
     return Buffer.from(base64, 'base64').buffer;
 }