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.

index.html

@@ -3173,6 +3173,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

@@ -153,6 +153,7 @@ options.winds = [225, 45, 225, 315, 135, 315]; // default wind directions
 
 let populationRate = +document.getElementById("populationRateInput").value;
 let urbanization = +document.getElementById("urbanizationInput").value;
+let urbanDensity = +document.getElementById("urbanDensityInput").value;
 
 applyStoredOptions();
 let graphWidth = +mapWidthInput.value,

modules/ui/burg-editor.js

@@ -426,7 +426,7 @@ function editBurg(id) {
       }
       const cells = pack.cells;
       const name = elSelected.text();
-      const size = Math.max(Math.min(rn(burg.population), 100), 6); // to be removed once change on MFDC is done
+      const size = Math.ceil(2.13*Math.pow(burg.population * populationRate / urbanDensity,0.385));//Math.max(Math.min(rn(burg.population), 100), 6); // to be removed once change on MFDC is done
       const population = rn(burg.population * populationRate * urbanization);
 
       const s = burg.MFCG || defSeed;

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 = 7;
     localStorage.removeItem("populationRate");
     localStorage.removeItem("urbanization");
+    localStorage.removeItem("urbanDensity")
   }
 
   function addRuler() {