v1.1

modules/save-and-load.js

@@ -636,8 +636,6 @@ function parseLoadedData(data) {
       ruler = viewbox.select("#ruler");
       fogging = viewbox.select("#fogging");
       debug = viewbox.select("#debug");
-      freshwater = lakes.select("#freshwater");
-      salt = lakes.select("#salt");
       burgLabels = labels.select("#burgLabels");
     }()
 
@@ -825,6 +823,28 @@ function parseLoadedData(data) {
             r.code = r.name.slice(0, 2);
           });
         }
+
+        // v 1.1 added new lake and coast groups
+        if (!document.getElementById("sinkhole")) {
+          lakes.append("g").attr("id", "sinkhole");
+          lakes.append("g").attr("id", "frozen");
+          lakes.append("g").attr("id", "lava");
+          lakes.select("#sinkhole").attr("opacity", 1).attr("fill", "#5bc9fd").attr("stroke", "#53a3b0").attr("stroke-width", .7).attr("filter", null);
+          lakes.select("#frozen").attr("opacity", .95).attr("fill", "#cdd4e7").attr("stroke", "#cfe0eb").attr("stroke-width", 0).attr("filter", null);
+          lakes.select("#lava").attr("opacity", .7).attr("fill", "#90270d").attr("stroke", "#f93e0c").attr("stroke-width", 2).attr("filter", "url(#crumpled)");
+
+          coastline.append("g").attr("id", "sea_island");
+          coastline.append("g").attr("id", "lake_island");
+          coastline.select("#sea_island").attr("opacity", .5).attr("stroke", "#1f3846").attr("stroke-width", .7).attr("filter", "url(#dropShadow)");
+          coastline.select("#lake_island").attr("opacity", 1).attr("stroke", "#7c8eaf").attr("stroke-width", .35).attr("filter", null);
+        }
+
+        // v 1.1 features stores more data
+        defs.select("#land").selectAll("path").remove();
+        defs.select("#water").selectAll("path").remove();
+        coastline.selectAll("path").remove();
+        lakes.selectAll("path").remove();
+        drawCoastline();
       }
     }()
 

modules/ui/burg-editor.js

@@ -103,14 +103,18 @@ function editBurg() {
 
   function createNewGroup() {
     if (!this.value) {tip("Please provide a valid group name", false, "error"); return;}
-    let group = this.value.toLowerCase().replace(/ /g, "_").replace(/[^\w\s]/gi, "");
-    if (Number.isFinite(+group.charAt(0))) group = "g" + group;
+    const group = this.value.toLowerCase().replace(/ /g, "_").replace(/[^\w\s]/gi, "");
 
     if (document.getElementById(group)) {
       tip("Element with this id already exists. Please provide a unique name", false, "error");
       return;
     }
 
+    if (Number.isFinite(+group.charAt(0))) {
+      tip("Group name should start with a letter", false, "error");
+      return;
+    }
+
     const id = +elSelected.attr("data-id");
     const oldGroup = elSelected.node().parentNode.id;
 

modules/ui/coastline-editor.js

@@ -0,0 +1,186 @@
+"use strict";
+function editCoastline(node = d3.event.target) {
+  if (customization) return;
+  closeDialogs(".stable");
+  if (layerIsOn("toggleCells")) toggleCells();
+
+  $("#coastlineEditor").dialog({
+    title: "Edit Coastline", resizable: false,
+    position: {my: "center top+20", at: "top", of: d3.event, collision: "fit"},
+    close: closeCoastlineEditor
+  });
+
+  debug.append("g").attr("id", "vertices");
+  elSelected = d3.select(node);
+  selectCoastlineGroup(node);
+  drawCoastlineVertices();
+  viewbox.on("touchmove mousemove", null);
+
+  if (modules.editCoastline) return;
+  modules.editCoastline = true;
+
+  // add listeners
+  document.getElementById("coastlineGroupsShow").addEventListener("click", showGroupSection);
+  document.getElementById("coastlineGroup").addEventListener("change", changeCoastlineGroup);
+  document.getElementById("coastlineGroupAdd").addEventListener("click", toggleNewGroupInput);
+  document.getElementById("coastlineGroupName").addEventListener("change", createNewGroup);
+  document.getElementById("coastlineGroupRemove").addEventListener("click", removeCoastlineGroup);
+  document.getElementById("coastlineGroupsHide").addEventListener("click", hideGroupSection);
+  document.getElementById("coastlineEditStyle").addEventListener("click", editGroupStyle);
+
+  function drawCoastlineVertices() {
+    const f = +elSelected.attr("data-f"); // feature id
+    const v = pack.features[f].vertices; // coastline outer vertices
+
+    const c = [... new Set(v.map(v => pack.vertices.c[v]).flat())];
+    debug.select("#vertices").selectAll("polygon").data(c).enter().append("polygon")
+      .attr("points", d => getPackPolygon(d)).attr("data-c", d => d);
+
+    debug.select("#vertices").selectAll("circle").data(v).enter().append("circle")
+      .attr("cx", d => pack.vertices.p[d][0]).attr("cy", d => pack.vertices.p[d][1])
+      .attr("r", .4).attr("data-v", d => d).call(d3.drag().on("drag", dragVertex))
+      .on("mousemove", () => tip("Drag to move the vertex, please use for fine-tuning only. Edit heightmap to change actual cell heights"));
+
+    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
+    const area = pack.features[f].area;
+    coastlineArea.innerHTML = si(area * distanceScaleInput.value ** 2) + unit;
+  }
+
+  function dragVertex() {
+    const x = rn(d3.event.x, 2), y = rn(d3.event.y, 2);
+    this.setAttribute("cx", x);
+    this.setAttribute("cy", y);
+    const v = +this.dataset.v;
+    pack.vertices.p[v] = [x, y];
+    debug.select("#vertices").selectAll("polygon").attr("points", d => getPackPolygon(d));
+    redrawCoastline();
+  }
+
+  function redrawCoastline() {
+    lineGen.curve(d3.curveBasisClosed);
+    const f = +elSelected.attr("data-f");
+    const vertices = pack.features[f].vertices;
+    const points = vertices.map(v => pack.vertices.p[v]);
+    const d = round(lineGen(points));
+    elSelected.attr("d", d);
+    defs.select("mask#land > path#land_"+f).attr("d", d); // update land mask
+    defs.select("mask#water > path#water_"+f).attr("d", d); // update water mask
+
+    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
+    const area = Math.abs(d3.polygonArea(points));
+    coastlineArea.innerHTML = si(area * distanceScaleInput.value ** 2) + unit;
+  }
+
+  function showGroupSection() {
+    document.querySelectorAll("#coastlineEditor > button").forEach(el => el.style.display = "none");
+    document.getElementById("coastlineGroupsSelection").style.display = "inline-block";
+  }
+
+  function hideGroupSection() {
+    document.querySelectorAll("#coastlineEditor > button").forEach(el => el.style.display = "inline-block");
+    document.getElementById("coastlineGroupsSelection").style.display = "none";
+    document.getElementById("coastlineGroupName").style.display = "none";
+    document.getElementById("coastlineGroupName").value = "";
+    document.getElementById("coastlineGroup").style.display = "inline-block"; 
+  }
+
+  function selectCoastlineGroup(node) {
+    const group = node.parentNode.id;
+    const select = document.getElementById("coastlineGroup");
+    select.options.length = 0; // remove all options
+
+    coastline.selectAll("g").each(function() {
+      select.options.add(new Option(this.id, this.id, false, this.id === group));
+    });
+  }
+
+  function changeCoastlineGroup() {
+    document.getElementById(this.value).appendChild(elSelected.node());
+  }
+
+  function toggleNewGroupInput() {
+    if (coastlineGroupName.style.display === "none") {
+      coastlineGroupName.style.display = "inline-block";
+      coastlineGroupName.focus();
+      coastlineGroup.style.display = "none";
+    } else {
+      coastlineGroupName.style.display = "none";
+      coastlineGroup.style.display = "inline-block";
+    }   
+  }
+
+  function createNewGroup() {
+    if (!this.value) {tip("Please provide a valid group name"); return;}
+    const group = this.value.toLowerCase().replace(/ /g, "_").replace(/[^\w\s]/gi, "");
+
+    if (document.getElementById(group)) {
+      tip("Element with this id already exists. Please provide a unique name", false, "error");
+      return;
+    }
+
+    if (Number.isFinite(+group.charAt(0))) {
+      tip("Group name should start with a letter", false, "error");
+      return;
+    }
+
+    // just rename if only 1 element left
+    const oldGroup = elSelected.node().parentNode;
+    const basic = ["sea_island", "lake_island"].includes(oldGroup.id);
+    if (!basic && oldGroup.childElementCount === 1) {
+      document.getElementById("coastlineGroup").selectedOptions[0].remove();
+      document.getElementById("coastlineGroup").options.add(new Option(group, group, false, true));
+      oldGroup.id = group;
+      toggleNewGroupInput();
+      document.getElementById("coastlineGroupName").value = "";
+      return;
+    }
+
+    // create a new group
+    const newGroup = elSelected.node().parentNode.cloneNode(false);
+    document.getElementById("coastline").appendChild(newGroup);
+    newGroup.id = group;
+    document.getElementById("coastlineGroup").options.add(new Option(group, group, false, true));
+    document.getElementById(group).appendChild(elSelected.node());
+
+    toggleNewGroupInput();
+    document.getElementById("coastlineGroupName").value = "";
+  }
+  
+  function removeCoastlineGroup() {
+    const group = elSelected.node().parentNode.id;
+    if (["sea_island", "lake_island"].includes(group)) {
+      tip("This is one of the default groups, it cannot be removed", false, "error");
+      return;
+    }
+
+    const count = elSelected.node().parentNode.childElementCount;
+    alertMessage.innerHTML = `Are you sure you want to remove the group? 
+      All coastline elements of the group (${count}) will be moved under <i>sea_island</i> group`;
+    $("#alert").dialog({resizable: false, title: "Remove coastline group", width:"26em",
+      buttons: {
+        Remove: function() {
+          $(this).dialog("close");
+          const sea = document.getElementById("sea_island");
+          const groupEl = document.getElementById(group);
+          while (groupEl.childNodes.length) {
+            sea.appendChild(groupEl.childNodes[0]);
+          }
+          groupEl.remove();
+          document.getElementById("coastlineGroup").selectedOptions[0].remove();
+          document.getElementById("coastlineGroup").value = "sea_island";
+        },
+        Cancel: function() {$(this).dialog("close");}
+      }
+    });
+  }
+
+  function editGroupStyle() {
+    const g = elSelected.node().parentNode.id;
+    editStyle("coastline", g);
+  }
+
+  function closeCoastlineEditor() {
+    debug.select("#vertices").remove();
+    unselect();
+  }
+}

modules/ui/editors.js

@@ -15,9 +15,12 @@ function restoreDefaultEvents() {
 
 // on viewbox click event - run function based on target
 function clicked() {
-  const el = d3.event.target; 
+  const el = d3.event.target;
   if (!el || !el.parentElement || !el.parentElement.parentElement) return;
   const parent = el.parentElement, grand = parent.parentElement;
+  const p = d3.mouse(this);
+  const i = findCell(p[0], p[1]);
+
   if (parent.id === "rivers") editRiver();
   else if (grand.id === "routes") editRoute();
   else if (el.tagName === "tspan" && grand.parentNode.parentNode.id === "labels") editLabel();
@@ -25,7 +28,12 @@ function clicked() {
   else if (grand.id === "burgIcons") editBurg();
   else if (parent.id === "terrain") editReliefIcon();
   else if (parent.id === "markers") editMarker(); 
-  // else if (grand.id === "lakes") editLake();
+  else if (grand.id === "coastline") editCoastline();
+  else if (pack.cells.t[i] === 1) {
+    const node = document.getElementById("island_"+pack.cells.f[i]);
+    editCoastline(node);
+  }
+  else if (grand.id === "lakes") editLake();
 }
 
 // clear elSelected variable

modules/ui/general.js

@@ -45,7 +45,7 @@ function showDataTip(e) {
 
 function moved() {
   const point = d3.mouse(this);
-  const i = findCell(point[0], point[1]); // pack ell id
+  const i = findCell(point[0], point[1]); // pack cell id
   if (i === undefined) return;
   showNotes(d3.event, i);
   const g = findGridCell(point[0], point[1]); // grid cell id
@@ -80,6 +80,7 @@ function showMapTooltip(point, e, i, g) {
   const group = path[path.length - 7].id;
   const subgroup = path[path.length - 8].id;
   const land = pack.cells.h[i] >= 20;
+  //const type = pack.features[cells.f[i]].type;
 
   // specific elements
   if (group === "rivers") {tip("Click to edit the River"); return;}
@@ -96,8 +97,8 @@ function showMapTooltip(point, e, i, g) {
   }
   if (subgroup === "burgIcons") {tip("Click to edit the Burg"); return;}
   if (subgroup === "burgLabels") {tip("Click to edit the Burg"); return;}
-  if (subgroup === "freshwater" && !land) {tip("Freshwater lake"); return;}
-  if (subgroup === "salt" && !land) {tip("Salt lake"); return;}
+  if (group === "lakes" && !land) {tip(`${capitalize(subgroup)} lake. Click to edit`); return;}
+  if (group === "coastline") {tip("Click to edit the coastline"); return;}
   if (group === "zones") {tip(path[path.length-8].dataset.description); return;}
 
   // covering elements
@@ -118,6 +119,7 @@ function showMapTooltip(point, e, i, g) {
   } else
   if (layerIsOn("toggleCultures") && pack.cells.culture[i]) tip("Culture: " + pack.cultures[pack.cells.culture[i]].name); else
   if (layerIsOn("toggleHeight")) tip("Height: " + getFriendlyHeight(point));
+  //if (pack.cells.t[i] === 1 && !tooltip.textContent) tip("Click to edit the coastline");
 }
 
 // get cell info on mouse move

modules/ui/heightmap-editor.js

@@ -193,7 +193,6 @@ function getHeight(h) {
     terrs.attr("mask", "url(#land)");
 
     // assign pack data to grid cells
-    const change = changeHeights.checked;
     const l = grid.cells.i.length;
     const biome = new Uint8Array(l);
     const conf = new Uint8Array(l);
@@ -247,10 +246,9 @@ function getHeight(h) {
     reGraph();
     drawCoastline();
 
-    if (change) {
+    if (changeHeights.checked) {
       elevateLakes();
       Rivers.generate();
-      defineBiomes();
     }
 
     // assign saved pack data from grid back to pack
@@ -265,25 +263,21 @@ function getHeight(h) {
     pack.cells.culture = new Uint16Array(n);
     pack.cells.religion = new Uint16Array(n);
 
-    if (!change) {
-      pack.cells.r = new Uint16Array(n);
-      pack.cells.conf = new Uint8Array(n);
-      pack.cells.fl = new Uint16Array(n);
-      pack.cells.biome = new Uint8Array(n);
-    }
+    pack.cells.r = new Uint16Array(n);
+    pack.cells.conf = new Uint8Array(n);
+    pack.cells.fl = new Uint16Array(n);
+    pack.cells.biome = new Uint8Array(n);
 
     for (const i of pack.cells.i) {
       const g = pack.cells.g[i];
       const land = pack.cells.h[i] >= 20;
 
-      if (!change) {
-        pack.cells.r[i] = r[g];
-        pack.cells.conf[i] = conf[g];
-        pack.cells.fl[i] = fl[g];
-        if (land && !biome[g]) pack.cells.biome[i] = getBiomeId(grid.cells.prec[g], grid.cells.temp[g]); else 
-        if (!land && biome[g]) pack.cells.biome[i] = 0; else
-        pack.cells.biome[i] = biome[g];
-      }
+      pack.cells.r[i] = r[g];
+      pack.cells.conf[i] = conf[g];
+      pack.cells.fl[i] = fl[g];
+      if (land && !biome[g]) pack.cells.biome[i] = getBiomeId(grid.cells.prec[g], grid.cells.temp[g]);
+      else if (!land && biome[g]) pack.cells.biome[i] = 0;
+      else pack.cells.biome[i] = biome[g];
 
       if (!land) continue;
       pack.cells.culture[i] = culture[g];
@@ -939,8 +933,7 @@ function getHeight(h) {
     document.getElementById("imageToLoad").addEventListener("change", loadImage);
     document.getElementById("convertAutoLum").addEventListener("click", () => autoAssing("lum"));
     document.getElementById("convertAutoHue").addEventListener("click", () => autoAssing("hue"));
-    document.getElementById("convertColorsPlus").addEventListener("click", () => changeConvertColorsNumber(1));
-    document.getElementById("convertColorsMinus").addEventListener("click", () => changeConvertColorsNumber(-1));
+    document.getElementById("convertColorsButton").addEventListener("click", setConvertColorsNumber);
     document.getElementById("convertComplete").addEventListener("click", () => $("#imageConverter").dialog("close"));
     document.getElementById("convertOverlay").addEventListener("input", function() {setOverlayOpacity(this.value)});
     document.getElementById("convertOverlayNumber").addEventListener("input", function() {setOverlayOpacity(this.value)});
@@ -1003,6 +996,8 @@ function getHeight(h) {
       unassignedContainer.selectAll("div").data(unassigned).enter().append("div")
         .attr("data-color", i => i).style("background-color", i => i)
         .attr("class", "color-div").on("click", colorClicked);
+
+      convertColors.value = unassigned.length;
     }
 
     function mapClicked() {
@@ -1078,9 +1073,11 @@ function getHeight(h) {
       colorsAssigned.style.display = "block";
       colorsUnassigned.style.display = "none";
     }
-    
-    function changeConvertColorsNumber(change) {
-      const number = Math.max(Math.min(+convertColors.value + change, 255), 3);
+
+    function setConvertColorsNumber() {
+      const number = +prompt(`Please provide a desired number of colors. Min value is 3, max is 255. An actual number depends on color scheme and may vary from desired number`, 
+        convertColors.value);
+      if (Number.isNaN(number) || number < 3 || number > 255) {tip("The number should be an integer in 3-255 range", false, "error"); return;}
       convertColors.value = number;
       heightsFromImage(number);
     }

modules/ui/labels-editor.js

@@ -183,14 +183,18 @@ function editLabel() {
 
   function createNewGroup() {
     if (!this.value) {tip("Please provide a valid group name"); return;}
-    let group = this.value.toLowerCase().replace(/ /g, "_").replace(/[^\w\s]/gi, "");
-    if (Number.isFinite(+group.charAt(0))) group = "g" + group;
+    const group = this.value.toLowerCase().replace(/ /g, "_").replace(/[^\w\s]/gi, "");
 
     if (document.getElementById(group)) {
       tip("Element with this id already exists. Please provide a unique name", false, "error");
       return;
     }
 
+    if (Number.isFinite(+group.charAt(0))) {
+      tip("Group name should start with a letter", false, "error");
+      return;
+    }
+
     // just rename if only 1 element left
     const oldGroup = elSelected.node().parentNode;
     if (oldGroup !== "states" && oldGroup !== "addedLabels" && oldGroup.childElementCount === 1) {

modules/ui/lakes-editor.js

@@ -2,85 +2,192 @@
 function editLake() {
   if (customization) return;
   closeDialogs(".stable");
+  if (layerIsOn("toggleCells")) toggleCells();
 
-  $("#routeEditor").dialog({
-    title: "Edit Route", resizable: false,
+  $("#lakeEditor").dialog({
+    title: "Edit Lake", resizable: false,
     position: {my: "center top+20", at: "top", of: d3.event, collision: "fit"},
     close: closeLakesEditor
   });
 
   const node = d3.event.target;
-  debug.append("g").attr("id", "controlPoints");
-  elSelected = d3.select(node).on("click", addInterimControlPoint);
-  drawControlPoints(node);
-  //selectRouteGroup(elSelected.node());
+  debug.append("g").attr("id", "vertices");
+  elSelected = d3.select(node);
+  selectLakeGroup(node);
+  drawLakeVertices();
+  viewbox.on("touchmove mousemove", null);
 
   if (modules.editLake) return;
   modules.editLake = true;
 
   // add listeners
+  document.getElementById("lakeGroupsShow").addEventListener("click", showGroupSection);
+  document.getElementById("lakeGroup").addEventListener("change", changeLakeGroup);
+  document.getElementById("lakeGroupAdd").addEventListener("click", toggleNewGroupInput);
+  document.getElementById("lakeGroupName").addEventListener("change", createNewGroup);
+  document.getElementById("lakeGroupRemove").addEventListener("click", removeLakeGroup);
+  document.getElementById("lakeGroupsHide").addEventListener("click", hideGroupSection);
 
+  document.getElementById("lakeEditStyle").addEventListener("click", editGroupStyle);
+  document.getElementById("lakeLegend").addEventListener("click", editLakeLegend);
 
-  function drawControlPoints(node) {
-    const l = node.getTotalLength();
-    const increment = l / Math.ceil(l / 10);
-    for (let i=0; i <= l; i += increment) {addControlPoint(node.getPointAtLength(i));}
-  }
-  
-  function addControlPoint(point) {
-    debug.select("#controlPoints").append("circle")
-      .attr("cx", point.x).attr("cy", point.y).attr("r", .8)
-      .call(d3.drag().on("drag", dragControlPoint))
-      //.on("click", clickControlPoint);
+  function drawLakeVertices() {
+    const f = +elSelected.attr("data-f"); // feature id
+    const v = pack.features[f].vertices; // lake outer vertices
+
+    const c = [... new Set(v.map(v => pack.vertices.c[v]).flat())];
+    debug.select("#vertices").selectAll("polygon").data(c).enter().append("polygon")
+      .attr("points", d => getPackPolygon(d)).attr("data-c", d => d);
+
+    debug.select("#vertices").selectAll("circle").data(v).enter().append("circle")
+      .attr("cx", d => pack.vertices.p[d][0]).attr("cy", d => pack.vertices.p[d][1])
+      .attr("r", .4).attr("data-v", d => d).call(d3.drag().on("drag", dragVertex))
+      .on("mousemove", () => tip("Drag to move the vertex, please use for fine-tuning only. Edit heightmap to change actual cell heights"));
+
+    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
+    const area = pack.features[f].area;
+    lakeArea.innerHTML = si(area * distanceScaleInput.value ** 2) + unit;
   }
 
-  function addInterimControlPoint() {
-    const point = d3.mouse(this);
-
-    const dists = [];
-    debug.select("#controlPoints").selectAll("circle").each(function() {
-      const x = +this.getAttribute("cx");
-      const y = +this.getAttribute("cy");
-      dists.push((point[0] - x) ** 2 + (point[1] - y) ** 2);
-    });
-
-    let index = dists.length;
-    if (dists.length > 1) {
-      const sorted = dists.slice(0).sort((a, b) => a-b);
-      const closest = dists.indexOf(sorted[0]);
-      const next = dists.indexOf(sorted[1]);
-      if (closest <= next) index = closest+1; else index = next+1;
-    }
-
-    const before = ":nth-child(" + (index + 1) + ")";
-    debug.select("#controlPoints").insert("circle", before)
-      .attr("cx", point[0]).attr("cy", point[1]).attr("r", .8)
-      .call(d3.drag().on("drag", dragControlPoint))
-      .on("click", clickControlPoint);
-
-    redrawLake();
-  }
-  
-  function dragControlPoint() {
-    this.setAttribute("cx", d3.event.x);
-    this.setAttribute("cy", d3.event.y);
+  function dragVertex() {
+    const x = rn(d3.event.x, 2), y = rn(d3.event.y, 2);
+    this.setAttribute("cx", x);
+    this.setAttribute("cy", y);
+    const v = +this.dataset.v;
+    pack.vertices.p[v] = [x, y];
+    debug.select("#vertices").selectAll("polygon").attr("points", d => getPackPolygon(d));
     redrawLake();
   }
 
   function redrawLake() {
-    lineGen.curve(d3.curveCatmullRom.alpha(.1));
-    const points = [];
-    debug.select("#controlPoints").selectAll("circle").each(function() {
-      points.push([this.getAttribute("cx"), this.getAttribute("cy")]);
-    });
+    lineGen.curve(d3.curveBasisClosed);
+    const f = +elSelected.attr("data-f");
+    const vertices = pack.features[f].vertices;
+    const points = vertices.map(v => pack.vertices.p[v]);
+    const d = round(lineGen(points));
+    elSelected.attr("d", d);
+    defs.select("mask#land > path#land_"+f).attr("d", d); // update land mask
 
-    elSelected.attr("d", round(lineGen(points)));
+    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
+    const area = Math.abs(d3.polygonArea(points));
+    lakeArea.innerHTML = si(area * distanceScaleInput.value ** 2) + unit;
+  }
+
+  function showGroupSection() {
+    document.querySelectorAll("#lakeEditor > button").forEach(el => el.style.display = "none");
+    document.getElementById("lakeGroupsSelection").style.display = "inline-block";
+  }
+
+  function hideGroupSection() {
+    document.querySelectorAll("#lakeEditor > button").forEach(el => el.style.display = "inline-block");
+    document.getElementById("lakeGroupsSelection").style.display = "none";
+    document.getElementById("lakeGroupName").style.display = "none";
+    document.getElementById("lakeGroupName").value = "";
+    document.getElementById("lakeGroup").style.display = "inline-block"; 
+  }
+
+  function selectLakeGroup(node) {
+    const group = node.parentNode.id;
+    const select = document.getElementById("lakeGroup");
+    select.options.length = 0; // remove all options
+
+    lakes.selectAll("g").each(function() {
+      select.options.add(new Option(this.id, this.id, false, this.id === group));
+    });
+  }
+
+  function changeLakeGroup() {
+    document.getElementById(this.value).appendChild(elSelected.node());
+  }
+
+  function toggleNewGroupInput() {
+    if (lakeGroupName.style.display === "none") {
+      lakeGroupName.style.display = "inline-block";
+      lakeGroupName.focus();
+      lakeGroup.style.display = "none";
+    } else {
+      lakeGroupName.style.display = "none";
+      lakeGroup.style.display = "inline-block";
+    }   
+  }
+
+  function createNewGroup() {
+    if (!this.value) {tip("Please provide a valid group name"); return;}
+    const group = this.value.toLowerCase().replace(/ /g, "_").replace(/[^\w\s]/gi, "");
+
+    if (document.getElementById(group)) {
+      tip("Element with this id already exists. Please provide a unique name", false, "error");
+      return;
+    }
+
+    if (Number.isFinite(+group.charAt(0))) {
+      tip("Group name should start with a letter", false, "error");
+      return;
+    }
+
+    // just rename if only 1 element left
+    const oldGroup = elSelected.node().parentNode;
+    const basic = ["freshwater", "salt", "sinkhole", "frozen", "lava"].includes(oldGroup.id);
+    if (!basic && oldGroup.childElementCount === 1) {
+      document.getElementById("lakeGroup").selectedOptions[0].remove();
+      document.getElementById("lakeGroup").options.add(new Option(group, group, false, true));
+      oldGroup.id = group;
+      toggleNewGroupInput();
+      document.getElementById("lakeGroupName").value = "";
+      return;
+    }
+
+    // create a new group
+    const newGroup = elSelected.node().parentNode.cloneNode(false);
+    document.getElementById("lakes").appendChild(newGroup);
+    newGroup.id = group;
+    document.getElementById("lakeGroup").options.add(new Option(group, group, false, true));
+    document.getElementById(group).appendChild(elSelected.node());
+
+    toggleNewGroupInput();
+    document.getElementById("lakeGroupName").value = "";
+  }
+  
+  function removeLakeGroup() {
+    const group = elSelected.node().parentNode.id;
+    if (["freshwater", "salt", "sinkhole", "frozen", "lava"].includes(group)) {
+      tip("This is one of the default groups, it cannot be removed", false, "error");
+      return;
+    }
+
+    const count = elSelected.node().parentNode.childElementCount;
+    alertMessage.innerHTML = `Are you sure you want to remove the group? 
+      All lakes of the group (${count}) will be turned into Freshwater`;
+    $("#alert").dialog({resizable: false, title: "Remove lake group", width:"26em",
+      buttons: {
+        Remove: function() {
+          $(this).dialog("close");
+          const freshwater = document.getElementById("freshwater");
+          const groupEl = document.getElementById(group);
+          while (groupEl.childNodes.length) {
+            freshwater.appendChild(groupEl.childNodes[0]);
+          }
+          groupEl.remove();
+          document.getElementById("lakeGroup").selectedOptions[0].remove();
+          document.getElementById("lakeGroup").value = "freshwater";
+        },
+        Cancel: function() {$(this).dialog("close");}
+      }
+    });
+  }
+
+  function editGroupStyle() {
+    const g = elSelected.node().parentNode.id;
+    editStyle("lakes", g);
+  }
+
+  function editLakeLegend() {
+    const id = elSelected.attr("id");
+    editNotes(id, id);
   }
 
   function closeLakesEditor() {
-    elSelected.on("click", null);
-    clearMainTip();
-    debug.select("#controlPoints").remove();
+    debug.select("#vertices").remove();
     unselect();
   }
-}
+}

modules/ui/layers.js

@@ -523,12 +523,13 @@ function toggleReligions(event) {
   }
 }
 
-function drawReligions(event) {
+function drawReligions() {
   console.time("drawReligions");
 
   relig.selectAll("path").remove();
-  const cells = pack.cells, vertices = pack.vertices, religions = pack.religions, n = cells.i.length;
+  const cells = pack.cells, vertices = pack.vertices, religions = pack.religions, features = pack.features, n = cells.i.length;
   const used = new Uint8Array(cells.i.length);
+  const fUsed = []; // already added features like lakes
   const paths = new Array(religions.length).fill("");
 
   for (const i of cells.i) {
@@ -536,9 +537,17 @@ function drawReligions(event) {
     if (used[i]) continue;
     used[i] = 1;
     const r = cells.religion[i];
-    const onborder = cells.c[i].some(n => cells.religion[n] !== r);
-    if (!onborder) continue;
-    const vertex = cells.v[i].find(v => vertices.c[v].some(i => cells.religion[i] !== r));
+    const onborder = cells.c[i].filter(n => cells.religion[n] !== r);
+    if (!onborder.length) continue;
+    const f = cells.f[onborder[0]];
+    if (fUsed[f]) continue;
+    if (features[f].type === "lake") {
+      paths[r] += defs.select("mask#land > path#land_"+f).attr("d");
+      fUsed[f] = 1;
+      continue;
+    }
+
+    const vertex = cells.v[i].find(v => vertices.c[v].some(n => cells.religion[n] !== r));
     const chain = connectVertices(vertex, r);
     if (chain.length < 3) continue;
     const points = chain.map(v => vertices.p[v]);

modules/ui/options.js

@@ -114,7 +114,7 @@ function selectStyleElement() {
   // active group element
   const group = styleGroupSelect.value;
   if (sel == "ocean") el = oceanLayers.select("rect");
-  else if (sel == "routes" || sel == "labels" || sel == "lakes" || sel == "anchors" || sel == "burgIcons" || sel == "borders") {
+  else if (sel == "routes" || sel == "labels" || sel === "coastline" || sel == "lakes" || sel == "anchors" || sel == "burgIcons" || sel == "borders") {
     el = d3.select("#"+sel).select("g#"+group).size()
       ? d3.select("#"+sel).select("g#"+group)
       : d3.select("#"+sel).select("g");
@@ -185,7 +185,7 @@ function selectStyleElement() {
   if (sel === "gridOverlay") styleGrid.style.display = "block";
   if (sel === "terrain") styleRelief.style.display = "block";
   if (sel === "texture") styleTexture.style.display = "block";
-  if (sel === "routes" || sel === "labels" || sel == "anchors" || sel == "burgIcons" || sel === "lakes" || sel === "borders") styleGroup.style.display = "block";
+  if (sel === "routes" || sel === "labels" || sel == "anchors" || sel == "burgIcons" || sel === "coastline" || sel === "lakes" || sel === "borders") styleGroup.style.display = "block";
   if (sel === "markers") styleMarkers.style.display = "block";
 
   if (sel === "population") {
@@ -267,8 +267,10 @@ function selectStyleElement() {
   }
 
   if (sel === "coastline") {
-    styleCoastline.style.display = "block";
-    if (styleCoastlineAuto.checked) styleFilter.style.display = "none";
+    if (styleGroupSelect.value === "sea_island") {
+      styleCoastline.style.display = "block";
+      if (styleCoastlineAuto.checked) styleFilter.style.display = "none";
+    }
   }
 
   if (sel === "temperature") {
@@ -287,7 +289,7 @@ function selectStyleElement() {
 
   // update group options
   styleGroupSelect.options.length = 0; // remove all options
-  if (sel === "routes" || sel === "labels" || sel === "lakes" || sel === "anchors" || sel === "burgIcons" || sel === "borders") {
+  if (sel === "routes" || sel === "labels" || sel === "coastline" || sel === "lakes" || sel === "anchors" || sel === "burgIcons" || sel === "borders") {
     document.getElementById(sel).querySelectorAll("g").forEach(el => {
       if (el.id === "burgLabels") return;
       const count = el.childElementCount;

modules/ui/provinces-editor.js

@@ -123,7 +123,7 @@ function editProvinces() {
         <div data-tip="Province area" class="biomeArea hide">${si(area) + unit}</div>
         <span data-tip="${populationTip}" class="icon-male hide"></span>
         <div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
-        <span data-tip="Declare province independence" class="icon-flag-empty ${separable ? '' : 'placeholder'} hide"></span>
+        <span data-tip="Declare province independence (turn province into a new state)" class="icon-flag-empty ${separable ? '' : 'placeholder'} hide"></span>
         <span data-tip="Toggle province focus" class="icon-pin ${focused?'':' inactive'} hide"></span>
         <span data-tip="Remove the province" class="icon-trash-empty hide"></span>
       </div>`;

modules/ui/routes-editor.js

@@ -143,14 +143,17 @@ function editRoute(onClick) {
   
   function createNewGroup() {
     if (!this.value) {tip("Please provide a valid group name"); return;}
-    let group = this.value.toLowerCase().replace(/ /g, "_").replace(/[^\w\s]/gi, "");
-    if (Number.isFinite(+group.charAt(0))) group = "g" + group;
+    const group = this.value.toLowerCase().replace(/ /g, "_").replace(/[^\w\s]/gi, "");
 
     if (document.getElementById(group)) {
       tip("Element with this id already exists. Please provide a unique name", false, "error");
       return;
     }
-    
+
+    if (Number.isFinite(+group.charAt(0))) {
+      tip("Group name should start with a letter", false, "error");
+      return;
+    }
     // just rename if only 1 element left
     const oldGroup = elSelected.node().parentNode;
     const basic = ["roads", "trails", "searoutes"].includes(oldGroup.id);

modules/ui/tools.js

@@ -108,7 +108,7 @@ function regenerateBurgs() {
 
     const state = cells.state[cell];
     const capital = !states[state].capital; // if state doesn't have capital, make this burg a capital
-    if (capital) {states[state].capital = id; states[state].cell = cell;}
+    if (capital) {states[state].capital = id; states[state].center = cell;}
 
     const culture = cells.culture[cell];
     const name = Names.getCulture(culture);
@@ -121,6 +121,7 @@ function regenerateBurgs() {
   states.filter(s => s.i && !s.removed && !s.capital).forEach(s => {
     const burg = addBurg([cells.p[s.center][0], cells.p[s.center][1]]); // add new burg
     s.capital = burg;
+    s.center = pack.burgs[burg].cell;
     pack.burgs[burg].capital = true;
     pack.burgs[burg].state = s.i;
     moveBurgToGroup(burg, "cities");