feat: burg groups - image icons

modules/ui/3d.js

@@ -298,10 +298,10 @@ window.ThreeD = (function () {
     raycaster.set(new THREE.Vector3(0, 1000, 0), new THREE.Vector3(0, -1, 0));
 
     const states = viewbox.select("#labels #states");
-    const cities = burgLabels.select("#cities");
-    const towns = burgLabels.select("#towns");
-    const city_icons = burgIcons.select("#cities");
-    const town_icons = burgIcons.select("#towns");
+    const city = burgLabels.select("#city");
+    const town = burgLabels.select("#town");
+    const city_icons = burgIcons.select("#city");
+    const town_icons = burgIcons.select("#town");
 
     const stateOptions = {
       font: states.attr("font-family"),
@@ -312,25 +312,25 @@ window.ThreeD = (function () {
     };
 
     const cityOptions = {
-      font: cities.attr("font-family"),
-      size: +cities.attr("data-size"),
-      color: cities.attr("fill"),
+      font: city.attr("font-family"),
+      size: +city.attr("data-size"),
+      color: city.attr("fill"),
       elevation: 10,
       quality: 20,
       iconSize: 1,
       iconColor: "#666",
-      line: 10 - cities.attr("data-size") / 2
+      line: 10 - city.attr("data-size") / 2
     };
 
     const townOptions = {
-      font: towns.attr("font-family"),
-      size: +towns.attr("data-size"),
-      color: towns.attr("fill"),
+      font: townttr("font-family"),
+      size: +town.attr("data-size"),
+      color: town.attr("fill"),
       elevation: 5,
       quality: 30,
       iconSize: 0.5,
       iconColor: "#666",
-      line: 5 - towns.attr("data-size") / 2
+      line: 5 - town.attr("data-size") / 2
     };
 
     const city_icon_material = new THREE.MeshPhongMaterial({color: cityOptions.iconColor});

modules/ui/burg-editor.js

@@ -387,7 +387,7 @@ function editBurg(id) {
   }
 }
 
-// in °C, array from -1 °C; source: https://en.wikipedia.org/wiki/List_of_cities_by_average_temperature
+// in °C, array from -1 °C; source: https://en.wikipedia.org/wiki/List_of_city_by_average_temperature
 const meanTempCityMap = {
   "-5": "Snag (Yukon)",
   "-4": "Yellowknife (Canada)",

modules/ui/editors.js

@@ -163,9 +163,9 @@ function moveAllBurgsToGroup(fromGroup, toGroup) {
 
 function addBurgsGroup(group) {
   if (document.querySelector(`#burgLabels > #${group}`)) return;
-  const labelCopy = document.querySelector("#burgLabels > #towns").cloneNode(false);
-  const iconCopy = document.querySelector("#burgIcons > #towns").cloneNode(false);
-  const anchorCopy = document.querySelector("#anchors > #towns").cloneNode(false);
+  const labelCopy = document.querySelector("#burgLabels > #town").cloneNode(false);
+  const iconCopy = document.querySelector("#burgIcons > #town").cloneNode(false);
+  const anchorCopy = document.querySelector("#anchors > #town").cloneNode(false);
 
   // FIXME: using the same id is against the spec!
   document.querySelector("#burgLabels").appendChild(labelCopy).id = group;
@@ -209,8 +209,8 @@ function toggleCapital(burgId) {
   burgs[burgId].capital = 1;
   burgs[prevCapitalId].capital = 0;
 
-  moveBurgToGroup(burgId, "cities");
-  moveBurgToGroup(prevCapitalId, "towns");
+  moveBurgToGroup(burgId, "city");
+  moveBurgToGroup(prevCapitalId, "town");
 }
 
 function togglePort(burg) {
@@ -227,7 +227,7 @@ function togglePort(burg) {
   if (!haven) tip("Port haven is not found, system won't be able to make a searoute", false, "warn");
   b.port = port;
 
-  const g = b.capital ? "cities" : "towns";
+  const g = b.capital ? "city" : "town";
   const group = anchors.select("g#" + g);
   const size = +group.attr("size");
   group

modules/ui/general.js

@@ -167,7 +167,7 @@ function showMapTooltip(point, e, i, g) {
     if (burgId) {
       const burg = pack.burgs[burgId];
       const population = si(burg.population * populationRate * urbanization);
-      tip(`${burg.name}. Population: ${population}. Group: ${burg.group}. Click to edit`);
+      tip(`${burg.name} ${burg.group}. Population: ${population}. Click to edit`);
       if (burgsOverview?.offsetParent) highlightEditorLine(burgsOverview, burgId, 5000);
       return;
     }

modules/ui/options.js

@@ -392,7 +392,7 @@ function changeEmblemShape(emblemShape) {
 
 function changeStatesNumber(value) {
   byId("statesNumber").style.color = +value ? null : "#b12117";
-  burgLabels.select("#capitals").attr("data-size", Math.max(rn(6 - value / 20), 3));
+  burgLabels.select("#capital").attr("data-size", Math.max(rn(6 - value / 20), 3));
   labels.select("#countries").attr("data-size", Math.max(rn(18 - value / 6), 4));
 }
 

modules/ui/provinces-editor.js

@@ -297,7 +297,7 @@ function editProvinces() {
 
     // turn province burg into a capital
     burgs[burgId].capital = 1;
-    moveBurgToGroup(burgId, "cities");
+    moveBurgToGroup(burgId, "city");
 
     // move all burgs to a new state
     province.burgs.forEach(b => (burgs[b].state = newStateId));

modules/ui/tools.js

@@ -211,12 +211,12 @@ function recreateStates() {
     return null;
   }
 
-  // turn all old capitals into towns, except for the capitals of locked states
+  // turn all old capitals into town, except for the capitals of locked states
   for (const burg of validBurgs) {
     if (!burg.capital) continue;
     if (lockedStatesCapitals.includes(burg.i)) continue;
 
-    moveBurgToGroup(burg.i, "towns");
+    moveBurgToGroup(burg.i, "town");
     burg.capital = 0;
   }
 
@@ -304,7 +304,7 @@ function recreateStates() {
         burg.capital = 1;
         capital = burg;
         capitalsTree.add([x, y]);
-        moveBurgToGroup(burg.i, "cities");
+        moveBurgToGroup(burg.i, "city");
         break;
       }
 
@@ -402,7 +402,7 @@ function regenerateBurgs() {
   const burgsCount =
     (manorsInput.value === "1000" ? rn(sorted.length / 5 / (grid.points.length / 10000) ** 0.8) : +manorsInput.value) +
     existingStatesCount;
-  const spacing = (graphWidth + graphHeight) / 150 / (burgsCount ** 0.7 / 66); // base min distance between towns
+  const spacing = (graphWidth + graphHeight) / 150 / (burgsCount ** 0.7 / 66); // base min distance between town
 
   for (let i = 0; i < sorted.length && newBurgs.length < burgsCount; i++) {
     const id = newBurgs.length;
@@ -438,7 +438,7 @@ function regenerateBurgs() {
       s.center = pack.burgs[burgId].cell;
       pack.burgs[burgId].capital = 1;
       pack.burgs[burgId].state = s.i;
-      moveBurgToGroup(burgId, "cities");
+      moveBurgToGroup(burgId, "city");
     });
 
   features.forEach(f => {