Watabou cities integration change, new Urban Density setting (#672)

* Watabou cities integration change, new Urban Density setting

New setting does not yet save/load - I don't want to change the .map file format.

* new markers - monsters

* markers - fix bridges placement

* markers - fix number

* markers - sacred places

* markers - refactor functions

* markers - course generator for inns

* markers - course generator enhancement

* markers - bandits and pirates

* reset PRNG - make points generation deterministic

* use imperial measures for US only

* split save and export to different files

* remove unused js libs

* markers - statues

* markers - magic portals

* markers - magic portals fix

* markers - palm grove fix

* markers - round coords on zoom

* markers data rework - master data object

* markers rework - optional pin shapes

* markers rework - editor start, dragging

* markers rework - editor functions

* markers rework - editor UI

* editable theme color

* added self-hosted analytics

* collect statistics for a short period

* umami - we do'nt need html class events

* umami - don't collect if noTrack is set

* markers - add on click

* saveTiles clean up listeners on close

* markers - generate from config file

* config generate markers dialog

* config generate markers dialog fixes

* markers overview

* markers - export as geoJSON

* markers overview - export data to csv

* markers - auto-update on load

* markers overview - focus on marker

* burg editor - MFCG preview

* markers - generate tool + lock tooltip

* Watabou cities integration change, new Urban Density setting

New setting does not yet save/load - I don't want to change the .map file format.

* Trying to put the formula in the right place

Again, sorry for the mess

* whoops

* Getting the equation right

* Change default

Co-authored-by: Azgaar <maxganiev@yandex.ru>

index.html

@@ -3214,6 +3214,12 @@
           <input id="urbanizationOutput" data-stored="urbanization" type="range" min=.01 max=5 step=.01 value=1 >
           <input id="urbanizationInput" data-stored="urbanization" type="number" min=.01 max=5 step=.01 value=1 >
         </div>
+
+        <div data-tip="Set urban density: average population per building (note, individual cities will vary)">
+          <div>Urban density:</div>
+          <input id="urbanDensityOutput" data-stored="urbanDensity" type="range" min=2 max=20 step=.5 value=7 >
+          <input id="urbanDensityInput" data-stored="urbanDensity" type="number" min=2 max=20 step=.5 value=7 >
+        </div>
       </div>
 
       <div id="unitsBottom">

main.js

@@ -155,6 +155,7 @@ let options = {
 let mapCoordinates = {}; // map coordinates on globe
 let populationRate = +document.getElementById("populationRateInput").value;
 let urbanization = +document.getElementById("urbanizationInput").value;
+let urbanDensity = +document.getElementById("urbanDensityInput").value;
 
 applyStoredOptions();
 

modules/ui/burg-editor.js

@@ -408,7 +408,6 @@ function editBurg(id) {
     document.getElementById("mfcgPreview").setAttribute("src", mfcgURL);
     document.getElementById("mfcgLink").setAttribute("href", mfcgURL);
   }
-
   function getBurgSeed(burg) {
     return burg.MFCG || Number(`${seed}${String(burg.i).padStart(4, 0)}`);
   }
@@ -417,7 +416,7 @@ function editBurg(id) {
     const {cells} = pack;
     const {name, population, cell} = burg;
     const burgSeed = getBurgSeed(burg);
-    const size = minmax(rn(population), 6, 100);
+    const size = Math.max(Math.min(Math.ceil(2.13*Math.pow(population * populationRate/urbanDensity,0.385)), 100), 6);
     const people = rn(population * populationRate * urbanization);
 
     const hub = +cells.road[cell] > 50;

modules/ui/units-editor.js

@@ -31,6 +31,8 @@ function editUnits() {
   document.getElementById("populationRateInput").addEventListener("change", changePopulationRate);
   document.getElementById("urbanizationOutput").addEventListener("input", changeUrbanizationRate);
   document.getElementById("urbanizationInput").addEventListener("change", changeUrbanizationRate);
+  document.getElementById("urbanDensityOutput").addEventListener("input", changeUrbanDensity);
+  document.getElementById("urbanDensityInput").addEventListener("change", changeUrbanDensity);
 
   document.getElementById("addLinearRuler").addEventListener("click", addRuler);
   document.getElementById("addOpisometer").addEventListener("click", toggleOpisometerMode);
@@ -93,6 +95,10 @@ function editUnits() {
     urbanization = +this.value;
   }
 
+  function changeUrbanDensity() {
+    urbanDensity = +this.value;
+  }
+
   function restoreDefaultUnits() {
     // distanceScale
     document.getElementById("distanceScaleOutput").value = 3;
@@ -135,8 +141,10 @@ function editUnits() {
     // population
     populationRate = populationRateOutput.value = populationRateInput.value = 1000;
     urbanization = urbanizationOutput.value = urbanizationInput.value = 1;
+    urbanDensity = urbanDensityOutput.value = urbanDensityInput.value = 10;
     localStorage.removeItem("populationRate");
     localStorage.removeItem("urbanization");
+    localStorage.removeItem("urbanDensity")
   }
 
   function addRuler() {