v1.0.2

index.css

@@ -692,7 +692,7 @@ fieldset {
 }
 
 #styleElements .whiteButton {
-	padding: 0 9px;
+	padding: 0 .8em;
 	border: 0;
 	background-color: #ffffff !important;
 }
@@ -1249,6 +1249,7 @@ div.states>.cultureName {
 
 div.states>.culturePopulation {
 	width: 4em;
+	cursor: pointer;
 }
 
 div.states > .cultureBase,

index.html

@@ -2671,7 +2671,7 @@
 
     <div id="burgsEditor" class="dialog stable" style="display: none">
       <div id="burgsHeader" class="header">
-        <div style="left:1.4em" data-tip="Click to sort by burg name" class="sortable alphabetically" data-sortby="name">Burg&nbsp;</div>
+        <div style="left:1.4em" data-tip="Click to sort by burg name" class="sortable alphabetically icon-sort-name-up" data-sortby="name">Burg&nbsp;</div>
         <div style="left:7.6em" data-tip="Click to sort by province name" class="sortable alphabetically" data-sortby="province">Province&nbsp;</div>
         <div style="left:14em" data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="state">State&nbsp;</div>
         <div style="left:20.1em" data-tip="Click to sort by culture name" class="sortable alphabetically" data-sortby="culture">Culture&nbsp;</div>

modules/save-and-load.js

@@ -824,6 +824,16 @@ function parseLoadedData(data) {
           });
         }
 
+        if (!document.getElementById("freshwater")) {
+          lakes.append("g").attr("id", "freshwater");
+          lakes.select("#freshwater").attr("opacity", .5).attr("fill", "#a6c1fd").attr("stroke", "#5f799d").attr("stroke-width", .7).attr("filter", null);
+        }
+
+        if (!document.getElementById("salt")) {
+          lakes.append("g").attr("id", "salt");
+          lakes.select("#salt").attr("opacity", .5).attr("fill", "#409b8a").attr("stroke", "#388985").attr("stroke-width", .7).attr("filter", null);
+        }
+
         // v 1.1 added new lake and coast groups
         if (!document.getElementById("sinkhole")) {
           lakes.append("g").attr("id", "sinkhole");

modules/ui/states-editor.js

@@ -43,6 +43,7 @@ function editStates() {
     if (cl.contains("zoneFill")) stateChangeFill(el); else
     if (cl.contains("icon-fleur")) stateOpenCOA(state); else
     if (cl.contains("icon-star-empty")) stateCapitalZoomIn(state); else
+    if (cl.contains("culturePopulation")) changePopulation(state); else
     if (cl.contains("icon-pin")) focusOnState(state, cl); else
     if (cl.contains("icon-trash-empty")) stateRemove(state); else
     if (cl.contains("hoverButton") && cl.contains("stateName")) regenerateName(state, line); else
@@ -76,7 +77,7 @@ function editStates() {
       const rural = s.rural * populationRate.value;
       const urban = s.urban * populationRate.value * urbanization.value;
       const population = rn(rural + urban);
-      const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}`;
+      const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}. Click to change`;
       totalArea += area;
       totalPopulation += population;
       totalBurgs += s.burgs;
@@ -290,6 +291,65 @@ function editStates() {
     window.open(url, '_blank');
   }
 
+  function changePopulation(state) {
+    const s = pack.states[state];
+    if (!s.cells) {tip("State does not have any cells, cannot change population", false, "error"); return;}
+    const rural = rn(s.rural * populationRate.value);
+    const urban = rn(s.urban * populationRate.value * urbanization.value);
+    const total = rural + urban;
+
+    alertMessage.innerHTML = `
+    Rural: <input type="number" min=0 step=1 id="ruralPop" value=${rural} style="width:6em" ${s.cells?'':"disabled"}>
+    Urban: <input type="number" min=0 step=1 id="urbanPop" value=${urban} style="width:6em" ${s.burgs?'':"disabled"}>
+    <p>Total population: ${total} ⇒ <span id="totalPop">${total}</span> (<span id="totalPopPerc">100</span>%)</p>`;
+
+    const update = function() {
+      const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
+      if (isNaN(totalNew)) return;
+      totalPop.innerHTML = totalNew;
+      totalPopPerc.innerHTML = rn(totalNew / total * 100);
+    }
+
+    ruralPop.oninput = () => update();
+    urbanPop.oninput = () => update();
+
+    $("#alert").dialog({
+      resizable: false, title: "Change state population", width: "23em", buttons: {
+        Apply: function() {applyPopulationChange(); $(this).dialog("close");},
+        Cancel: function() {$(this).dialog("close");}
+      }, position: {my: "center", at: "center", of: "svg"}
+    });
+
+    function applyPopulationChange() {
+      const ruralChange = rn(ruralPop.value / rural, 4);
+      if (isFinite(ruralChange) && ruralChange !== 1) {
+        const cells = pack.cells.i.filter(i => pack.cells.state[i] === state);
+        cells.forEach(i => pack.cells.pop[i] *= ruralChange);
+      }
+      if (!isFinite(ruralChange) && +ruralPop.value > 0) {
+        const points = ruralPop.value / populationRate.value;
+        const cells = pack.cells.i.filter(i => pack.cells.state[i] === state);
+        const pop = rn(points / cells.length);
+        cells.forEach(i => pack.cells.pop[i] = pop);
+      }
+
+      const urbanChange = rn(urbanPop.value / urban, 4);
+      if (isFinite(urbanChange) && urbanChange !== 1) {
+        const burgs = pack.burgs.filter(b => !b.removed && b.state === state);
+        burgs.forEach(b => b.population *= urbanChange);
+      }
+      if (!isFinite(urbanChange) && +urbanPop.value > 0) {
+        const points = urbanPop.value / populationRate.value / urbanization.value;
+        const burgs = pack.burgs.filter(b => !b.removed && b.state === state);
+        const population = rn(points / burgs.length);
+        burgs.forEach(b => b.population = population);
+      }
+
+      refreshStatesEditor();
+    }
+
+  }
+
   function stateCapitalZoomIn(state) {
     const capital = pack.states[state].capital;
     const l = burgLabels.select("[data-id='" + capital + "']");