From 124c7f344888696287bc3d19e5879bad51403370 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Tue, 2 Mar 2021 03:28:08 +0300
Subject: [PATCH] v1.5.87 - lakes editor rework

---
 index.css                      |  7 ++-
 index.html                     | 91 ++++++++++++++++++++++++----------
 main.js                        |  4 +-
 modules/save-and-load.js       | 18 ++++++-
 modules/ui/heightmap-editor.js |  6 ++-
 modules/ui/lakes-editor.js     | 25 +++++++++-
 modules/ui/rivers-editor.js    |  3 +-
 7 files changed, 118 insertions(+), 36 deletions(-)

diff --git a/index.css b/index.css
index 2bcda3b3..d9eacc3c 100644
--- a/index.css
+++ b/index.css
@@ -266,7 +266,6 @@ i.icon-lock {
 }
 
 #routeLength,
-#lakeArea,
 #coastlineArea {
 	background-color: #eeeeee;
 	border: 1px solid #a5a5a5;
@@ -1439,6 +1438,12 @@ div.states > .coaIcon > use {
   width: 6em;
 }
 
+#burgBody > div > div,
+#riverBody > div,
+#lakeBody > div {
+	padding: .1em;
+}
+
 #riverBody div.label,
 #riverBody input,
 #riverBody select,
diff --git a/index.html b/index.html
index 050c5c91..d1940da7 100644
--- a/index.html
+++ b/index.html
@@ -1566,7 +1566,7 @@
     <div id="riverEditor" class="dialog" style="display: none">
       <div id="riverBody" style="padding-bottom: .3em">
 
-        <div style="padding: .1em">
+        <div>
           <div class="label" style="width: 4.8em">Name:</div>
           <span id="riverNameCulture" data-tip="Generate culture-specific name for the river" class="icon-book pointer"></span>
           <span id="riverNameRandom" data-tip="Generate random name for the river" class="icon-globe pointer"></span>
@@ -1574,42 +1574,42 @@
           <span data-tip="Speak the name. You can change voice and language in options" class="speaker">🔊</span>
         </div>
 
-        <div style="padding: .1em" data-tip="Type to change river type (e.g. fork, creek, river, brook, stream)">
+        <div data-tip="Type to change river type (e.g. fork, creek, river, brook, stream)">
           <div class="label">Type:</div>
           <input id="riverType" autocorrect="off" spellcheck="false">
         </div>
 
-        <div style="padding: .1em" data-tip="Select parent river">
+        <div data-tip="Select parent river">
           <div class="label">Mainstem:</div>
           <select id="riverMainstem"></select>
         </div>
 
-        <div style="padding: .1em" data-tip="River drainage basin (watershed)">
+        <div data-tip="River drainage basin (watershed)">
           <div class="label">Basin:</div>
           <input id="riverBasin" disabled/>
         </div>
 
-        <div style="padding: .1em" data-tip="River discharge (flux power)">
+        <div data-tip="River discharge (flux power)">
           <div class="label">Discharge:</div>
           <input id="riverDischarge" disabled/>
         </div>
 
-        <div style="padding: .1em" data-tip="River length in selected units">
+        <div data-tip="River length in selected units">
           <div class="label">Length:</div>
           <input id="riverLength" disabled/>
         </div>
 
-        <div style="padding: .1em" data-tip="River mouth width in selected units">
+        <div data-tip="River mouth width in selected units">
           <div class="label">Mouse width:</div>
           <input id="riverWidth" disabled/>
         </div>
 
-        <div style="padding: .1em" data-tip="River source width in pixels">
+        <div data-tip="River source width in pixels">
           <div class="label">Source width:</div>
           <input id="riverSourceWidth" type="number" min=0 max=3 step=.1 />
         </div>
 
-        <div style="padding: .1em" data-tip="River width multiplier">
+        <div data-tip="River width multiplier">
           <div class="label">Width modifier:</div>
           <input id="riverWidthFactor" type="number" min=.1 max=4 step=.1 />
         </div>
@@ -1626,7 +1626,7 @@
 
     <div id="lakeEditor" class="dialog" style="display: none">
       <div id="lakeBody" style="padding-bottom: .3em">
-        <div style="padding: .1em">
+        <div>
           <div class="label" style="width: 4.8em">Name:</div>
           <span id="lakeNameCulture" data-tip="Generate culture-specific name for the lake" class="icon-book pointer"></span>
           <span id="lakeNameRandom" data-tip="Generate random name for the lake" class="icon-globe pointer"></span>
@@ -1634,23 +1634,62 @@
           <span data-tip="Speak the name. You can change voice and language in options" class="speaker">🔊</span>
         </div>
 
-        <div style="padding: .1em" data-tip="Type to change lake type (group)">
-          <div class="label">Type:</div>
-
-          <select id="lakeGroup" data-tip="Select lake type (group)" style="width:9em"></select>
-          <input id="lakeGroupName" placeholder="new group name" data-tip="Provide a name for the new group" style="display:none; width:9em"/>
-          <span id="lakeGroupAdd" data-tip="Create new type (group) for the lake" class="icon-plus pointer"></span>
+        <div data-tip="Type to change lake type (group)">
+          <div class="label" style="width: 4.8em">Type:</div>
           <span id="lakeGroupRemove" data-tip="Remove the group" class="icon-trash-empty pointer"></span>
+          <span id="lakeGroupAdd" data-tip="Create new type (group) for the lake" class="icon-plus pointer"></span>
+          <select id="lakeGroup" data-tip="Select lake type (group)"></select>
+          <input id="lakeGroupName" placeholder="type name" data-tip="Provide a name for the new group" style="display:none"/>
+          <span id="lakeEditStyle" data-tip="Edit lake group style in Style Editor" class="icon-brush pointer"></span>
         </div>
 
-        <div style="padding: .1em" data-tip="Lake area in selected units">
+        <div data-tip="Lake area in selected units">
           <div class="label">Area:</div>
           <input id="lakeArea" disabled/>
         </div>
+
+        <div data-tip="Lake shore length in selected units">
+          <div class="label">Shore length:</div>
+          <input id="lakeShoreLength" disabled/>
+        </div>
+
+        <div data-tip="Lake elevation in selected units">
+          <div class="label">Elevation:</div>
+          <input id="lakeElevation" disabled/>
+        </div>
+
+        <div data-tip="Lake average depth in selected units">
+          <div class="label">Avarage depth:</div>
+          <input id="lakeAvarageDepth" disabled/>
+        </div>
+
+        <div data-tip="Lake maximum depth in selected units">
+          <div class="label">Max depth:</div>
+          <input id="lakeMaxDepth" disabled/>
+        </div>
+
+        <div data-tip="Lake water supply. If supply > evaporation and there is an outlet, the lake water is fresh. If supply is very low, the lake becomes dry">
+          <div class="label">Supply:</div>
+          <input id="lakeFlux" disabled/>
+        </div>
+
+        <div data-tip="Evaporation from lake surface. If evaporation > supply, the lake water is saline. If difference is high, the lake becomes dry">
+          <div class="label">Evaporation:</div>
+          <input id="lakeEvaporation" disabled/>
+        </div>
+
+        <div data-tip="Number of lake inlet rivers">
+          <div class="label">Inlets:</div>
+          <input id="lakeInlets" disabled/>
+        </div>
+
+        <div data-tip="Lake outlet river">
+          <div class="label">Outlet:</div>
+          <input id="lakeOutlet" disabled/>
+        </div>
       </div>
 
       <div id="lakeBottom">
-        <button id="lakeEditStyle" data-tip="Edit lake group style in Style Editor" class="icon-brush"></button>
         <button id="lakeLegend" data-tip="Edit free text notes (legend) for the lake" class="icon-edit"></button>
       </div>
     </div>
@@ -1854,16 +1893,16 @@
       <div id="burgBody" style="padding-bottom: .3em">
         <svg viewBox="0 0 200 200" width="14em" height="14em"><use id="burgEmblem"></use></svg>
         <div style="float: right">
-          <div id="burgProvinceAndState" style="padding: .1em; font-style: italic; max-width: 16em"></div>
+          <div id="burgProvinceAndState" style="font-style: italic; max-width: 16em"></div>
 
-          <div style="padding: .1em">
+          <div>
             <div class="label">Name:</div>
             <input id="burgName" data-tip="Type to rename the burg" autocorrect="off" spellcheck="false" style="width: 8em">
             <span data-tip="Speak the name. You can change voice and language in options" class="speaker">🔊</span>
             <span id="burgNameReRandom" data-tip="Generate random name for the burg" class="icon-globe pointer"></span>
           </div>
 
-          <div style="padding: .1em" data-tip="Select burg type. Type slightly affects emblem generation">
+          <div data-tip="Select burg type. Type slightly affects emblem generation">
             <div class="label">Type:</div>
             <select id="burgType" style="width: 8em">
               <option value="Generic">Generic</option>
@@ -1876,18 +1915,18 @@
             </select>
           </div>
 
-          <div style="padding: .1em" data-tip="Select dominant culture">
+          <div data-tip="Select dominant culture">
             <div class="label">Culture:</div>
             <select id="burgCulture" style="width: 8em"></select>
             <span id="burgNameReCulture" data-tip="Generate culture-specific name for the burg" class="icon-book pointer"></span>
           </div>
 
-          <div style="padding: .1em" data-tip="Set burg population">
+          <div data-tip="Set burg population">
             <div class="label">Population:</div>
             <input id="burgPopulation" type="number" min=0 step=1 style="width: 8em">
           </div>
 
-          <div style="padding: .1em">
+          <div>
             <div class="label">Features:</div>
             <span id="burgCapital" data-tip="Shows whether the burg is a state capital. Click to toggle" data-feature="capital" class="burgFeature icon-star"></span>
             <span id="burgPort" data-tip="Shows whether the burg is a port. Click to toggle" data-feature="port" class="burgFeature icon-anchor"></span>
@@ -1898,13 +1937,13 @@
             <span id="burgShanty" data-tip="Shows whether the burg has a shanty town. Click to toggle" data-feature="shanty" class="burgFeature icon-campground" style="font-size: 1em"></span>
           </div>
 
-          <div style="padding: .1em" data-tip="Burg mean annual temperature and real-world city for comparison">
+          <div data-tip="Burg mean annual temperature and real-world city for comparison">
             <div class="label">Temperature:</div>
             <span id="burgTemperature"></span>, like in 
             <span id="burgTemperatureLikeIn"></span>
           </div>
 
-          <div style="padding: .1em" data-tip="Burg height above mean sea level">
+          <div data-tip="Burg height above mean sea level">
             <div class="label">Elevation:</div>
             <span id="burgElevation"></span> above sea level
           </div>
diff --git a/main.js b/main.js
index eb086ba8..c63c13ab 100644
--- a/main.js
+++ b/main.js
@@ -2,7 +2,7 @@
 // https://github.com/Azgaar/Fantasy-Map-Generator
 
 "use strict";
-const version = "1.59"; // generator version
+const version = "1.6"; // generator version
 document.title += " v" + version;
 
 // Switches to disable/enable logging features
@@ -338,7 +338,7 @@ function applyDefaultBiomesSystem() {
 }
 
 function showWelcomeMessage() {
-  const post = "Main changes:" //link("https://www.reddit.com/r/FantasyMapGenerator/comments/ft5b41/update_v15/", "Main changes:");
+  const post = "Main changes:" //link("https://www.reddit.com/r/FantasyMapGenerator/comments/ft5b41/update_v16/", "Main changes:");
   const changelog = link("https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Changelog", "previous version");
   const reddit = link("https://www.reddit.com/r/FantasyMapGenerator", "Reddit community");
   const discord = link("https://discordapp.com/invite/X7E84HU", "Discord server");
diff --git a/modules/save-and-load.js b/modules/save-and-load.js
index 9a620604..3a75b9e4 100644
--- a/modules/save-and-load.js
+++ b/modules/save-and-load.js
@@ -1100,7 +1100,7 @@ function parseLoadedData(data) {
         });
       }
 
-      if (version < 1.59) {
+      if (version < 1.6) {
         // v 1.6 changed rivers data
         for (const river of pack.rivers) {
           const el = document.getElementById("river"+river.i);
@@ -1115,8 +1115,22 @@ function parseLoadedData(data) {
             Rivers.remove(river.i);
           }
         }
-      }
 
+        // v 1.6 changed lakes data
+        for (const f of pack.features) {
+          if (f.type !== "lake") continue;
+          if (f.evaporation) continue;
+
+          f.flux = f.flux || f.cells * 3;
+          f.temp = grid.cells.temp[pack.cells.g[f.firstCell]];
+          f.height = f.height || d3.min(pack.cells.c[f.firstCell].map(c => pack.cells.h[c]).filter(h => h >= 20));
+          const height = (f.height - 18) ** heightExponentInput.value;
+          const evaporation = (700 * (f.temp + .006 * height) / 50 + 75) / (80 - f.temp);
+          f.evaporation = rn(evaporation * f.cells);
+          f.name = f.name || Lakes.getName(f);
+          delete f.river;
+        }
+      }
     }()
 
     void function checkDataIntegrity() {
diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js
index db83a8b4..f599dd64 100644
--- a/modules/ui/heightmap-editor.js
+++ b/modules/ui/heightmap-editor.js
@@ -351,7 +351,6 @@ function editHeightmap() {
       if (!b.i || b.removed) continue;
       b.cell = findBurgCell(b.x, b.y);
       b.feature = pack.cells.f[b.cell];
-      //if (b.port) b.port = pack.cells.f[pack.cells.haven[b.cell]]; // water body id
 
       pack.cells.burg[b.cell] = b.i;
       if (!b.capital && pack.cells.h[b.cell] < 20) removeBurg(b.i);
@@ -383,7 +382,10 @@ function editHeightmap() {
     drawStates();
     drawBorders();
 
-    if (changeHeights.checked) Rivers.specify();
+    if (changeHeights.checked) {
+      Rivers.specify();
+      Lakes.generateName();
+    }
 
     // restore zones from grid
     zones.selectAll("g").each(function() {
diff --git a/modules/ui/lakes-editor.js b/modules/ui/lakes-editor.js
index 4b5c6701..3f1e4d60 100644
--- a/modules/ui/lakes-editor.js
+++ b/modules/ui/lakes-editor.js
@@ -40,12 +40,32 @@ function editLake() {
   }
 
   function updateLakeValues() {
+    const cells = pack.cells;
+
     const l = getLake();
     document.getElementById("lakeName").value = l.name;
-    document.getElementById("lakeGroup").value = l.type;
 
     const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
     document.getElementById("lakeArea").value = si(l.area * distanceScaleInput.value ** 2) + unit;
+
+    const length = d3.polygonLength(l.vertices.map(v => pack.vertices.p[v]));
+    document.getElementById("lakeShoreLength").value = si(length * distanceScaleInput.value) + " " + distanceUnitInput.value;
+
+    const lakeCells = Array.from(cells.i.filter(i => cells.f[i] === l.i));
+    const heights = lakeCells.map(i => cells.h[i]);
+
+    document.getElementById("lakeElevation").value = getHeight(l.height);
+    document.getElementById("lakeAvarageDepth").value = getHeight(d3.mean(heights), "abs");
+    document.getElementById("lakeMaxDepth").value = getHeight(d3.min(heights), "abs");
+
+    document.getElementById("lakeFlux").value = l.flux;
+    document.getElementById("lakeEvaporation").value = l.evaporation;
+
+    const inlets = l.inlets && l.inlets.map(inlet => pack.rivers.find(river => river.i === inlet)?.name);
+    const outlet = l.outlet ? pack.rivers.find(river => river.i === l.outlet)?.name : "no";
+    document.getElementById("lakeInlets").value = inlets ? inlets.length : "no";
+    document.getElementById("lakeInlets").title = inlets ? inlets.join(", ") : "";
+    document.getElementById("lakeOutlet").value = outlet;
   }
 
   function drawLakeVertices() {
@@ -110,6 +130,7 @@ function editLake() {
 
   function changeLakeGroup() {
     document.getElementById(this.value).appendChild(elSelected.node());
+    getLake().group = this.value;
   }
 
   function toggleNewGroupInput() {
@@ -195,7 +216,7 @@ function editLake() {
 
   function editLakeLegend() {
     const id = elSelected.attr("id");
-    editNotes(id, id);
+    editNotes(id, getLake().name + " " + lakeGroup.value + " lake");
   }
 
   function closeLakesEditor() {
diff --git a/modules/ui/rivers-editor.js b/modules/ui/rivers-editor.js
index b4e4c98f..1a033eec 100644
--- a/modules/ui/rivers-editor.js
+++ b/modules/ui/rivers-editor.js
@@ -204,7 +204,8 @@ function editRiver(id) {
 
   function editRiverLegend() {
     const id = elSelected.attr("id");
-    editNotes(id, id);
+    const river = getRiver();
+    editNotes(id, river.name + " " + river.type);
   }
 
   function toggleRiverCreationMode() {