Buttons now have cute icons ^_^

client/public/stylesheets/leaflet/leaflet.css

@@ -60,6 +60,11 @@
 	padding: 0;
 	}
 
+.leaflet-container img.leaflet-tile {
+	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
+	mix-blend-mode: plus-lighter;
+}
+
 .leaflet-container.leaflet-touch-zoom {
 	-ms-touch-action: pan-x pan-y;
 	touch-action: pan-x pan-y;
@@ -646,7 +651,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	}
 
 /* Printing */
-	
+
 @media print {
 	/* Prevent printers from removing background-images of controls. */
 	.leaflet-control {

client/public/stylesheets/other/contextmenus.css

@@ -237,29 +237,48 @@
 }
 
 #spawn-history-menu {
-    display:flex;
+    align-items: center;
     flex-direction: column;
     max-height: 300px;
     row-gap: 6px;
 }
 
 #spawn-history-menu button {
-    border-radius: 0;
+    align-items: center;
+    column-gap: 4px;
+    display:flex;
     height:32px;
     text-align: left;
     width:100%;
 }
 
-#spawn-history-menu button[data-spawned-coalition="blue"] {
-    border-left:4px solid var(--primary-blue);
+#spawn-history-menu button span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
-#spawn-history-menu button[data-spawned-coalition="red"] {
-    border-left:4px solid var(--primary-red);
+#spawn-history-menu button svg {
+    border-radius: var(--border-radius-sm);
+    height:24px;
+    padding:5px;
+    width:24px;
 }
 
-#spawn-history-menu button[data-spawned-coalition="neutral"] {
-    border-left:4px solid var(--primary-neutral);
+#spawn-history-menu button svg * {
+    fill:white;
+}
+
+#spawn-history-menu button[data-spawned-coalition="blue"] svg {
+    background-color: var(--primary-blue);
+}
+
+#spawn-history-menu button[data-spawned-coalition="red"] svg {
+    background-color: var(--primary-red);
+}
+
+#spawn-history-menu button[data-spawned-coalition="neutral"] svg {
+    background-color: var(--primary-neutral);
 }
 
 [data-coalition="blue"]#active-coalition-label,

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;
 }