Replace icons for some TGOs.

Only covered about half of the types so far.

This also removes the clustering, since that doesn't really seem to be
needed with the newer icons.

resources/ui/map/map.js

@@ -19,77 +19,107 @@ const Colors = Object.freeze({
 
 const Categories = Object.freeze([
   "aa",
-  "allycamp",
   "ammo",
   "armor",
+  "ewr",
+  "factory",
+  "fob",
+  "oil",
+  "ship",
+  "ware",
+]);
+
+const LegacyCategories = Object.freeze([
+  "allycamp",
   "coastal",
   "comms",
   "derrick",
-  "factory",
   "farp",
-  "fob",
   "fuel",
-  "ewr",
   "missile",
-  "oil",
-  "ship",
   "power",
   "village",
-  "ware",
   "ww2bunker",
 ]);
 
-function makeTgoIcons(player) {
-  const icons = {};
-  const playerSuffix = player ? "_blue" : "";
-  Categories.forEach((category) => {
-    const iconName = `${category}${playerSuffix}`;
-    icons[category] = new L.Icon({
-      iconUrl: `../ground_assets/${iconName}.png`,
-    });
-    if (!icons[category]) {
-      console.log(`Failed to load icon for ${iconName}`);
+const UnitState = Object.freeze({
+  Alive: "alive",
+  Damaged: "damaged",
+  Destroyed: "destroyed",
+});
+
+class TgoIcons {
+  constructor() {
+    this.icons = {};
+    for (const category of Categories) {
+      this.icons[category] = {};
+      for (const player of [true, false]) {
+        this.icons[category][player] = {};
+        for (const state of Object.values(UnitState)) {
+          this.icons[category][player][state] = this.loadIcon(
+            category,
+            player,
+            state
+          );
+        }
+      }
     }
-  });
+    for (const category of LegacyCategories) {
+      this.icons[category] = {};
+      for (const player of [true, false]) {
+        this.icons[category][player] = {};
+        for (const state of Object.values(UnitState)) {
+          this.icons[category][player][state] = this.loadLegacyIcon(
+            category,
+            player
+          );
+        }
+      }
+    }
+  }
 
-  return Object.freeze(icons);
-}
+  icon(category, player, state) {
+    return this.icons[category][player][state];
+  }
 
-function makeIcons(player) {
-  const color = player ? "blue" : "red";
-  const playerSuffix = player ? "_blue" : "";
-  const icons = {
-    ControlPoint: new L.Icon({
-      iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-${color}.png`,
-      shadowUrl:
-        "https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png",
-      iconSize: [25, 41],
-      iconAnchor: [12, 41],
-      popupAnchor: [1, -34],
-      shadowSize: [41, 41],
-    }),
+  loadIcon(category, player, state) {
+    const color = player ? "blue" : "red";
+    return new L.Icon({
+      iconUrl: `../ground_assets/${category}_${color}_${state}.svg`,
+      iconSize: [32, 32],
+    });
+  }
 
-    Objectives: makeTgoIcons(player),
-
-    Destroyed: new L.Icon({
-      iconUrl: "../ground_assets/destroyed.png",
-    }),
-
-    NoThreat: new L.icon({
-      iconUrl: `../ground_assets/nothreat${playerSuffix}.png`,
-    }),
-  };
-
-  return Object.freeze(icons);
+  loadLegacyIcon(category, player) {
+    const playerSuffix = player ? "_blue" : "";
+    return new L.Icon({
+      iconUrl: `../ground_assets/${category}${playerSuffix}.png`,
+    });
+  }
 }
 
 const Icons = Object.freeze({
-  Friendly: makeIcons(true),
-  Enemy: makeIcons(false),
+  BlueControlPoint: new L.Icon({
+    iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png`,
+    shadowUrl:
+      "https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png",
+    iconSize: [25, 41],
+    iconAnchor: [12, 41],
+    popupAnchor: [1, -34],
+    shadowSize: [41, 41],
+  }),
 
-  for(player) {
-    return player ? this.Friendly : this.Enemy;
-  },
+  RedControlPoint: new L.Icon({
+    iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png`,
+    shadowUrl:
+      "https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png",
+    iconSize: [25, 41],
+    iconAnchor: [12, 41],
+    popupAnchor: [1, -34],
+    shadowSize: [41, 41],
+  }),
+
+  Objectives: new TgoIcons(),
 });
 
 function metersToNauticalMiles(meters) {
@@ -119,9 +149,7 @@ defaultBaseMap.addTo(map);
 
 // Enabled by default, so addTo(map).
 const controlPointsLayer = L.layerGroup().addTo(map);
-const groundObjectsLayer = L.markerClusterGroup({ maxClusterRadius: 40 }).addTo(
-  map
-);
+const groundObjectsLayer = L.layerGroup().addTo(map);
 const supplyRoutesLayer = L.layerGroup().addTo(map);
 const frontLinesLayer = L.layerGroup().addTo(map);
 const redSamThreatLayer = L.layerGroup().addTo(map);
@@ -201,7 +229,10 @@ class ControlPoint {
   }
 
   icon() {
-    return Icons.for(this.cp.blue).ControlPoint;
+    if (this.cp.blue) {
+      return Icons.BlueControlPoint;
+    }
+    return Icons.RedControlPoint;
   }
 
   hasDestination() {
@@ -391,14 +422,15 @@ class TheaterGroundObject {
   }
 
   icon() {
-    const iconSet = Icons.for(this.tgo.blue);
+    let state;
     if (this.tgo.category == "aa" && !this.samIsThreat()) {
-      return iconSet.NoThreat;
+      state = UnitState.Damaged;
     } else if (this.tgo.dead) {
-      return iconSet.Destroyed;
+      state = UnitState.Destroyed;
     } else {
-      return iconSet.Objectives[this.tgo.category];
+      state = UnitState.Alive;
     }
+    return Icons.Objectives.icon(this.tgo.category, this.tgo.blue, state);
   }
 
   drawSamThreats() {