v 0.8.28b

index.html

@@ -336,7 +336,7 @@
           <option value="rivers">Rivers</option>
           <option value="routes">Routes</option>
           <option value="ruler">Rulers</option>
-          <option value="regions" selected>States</option>
+          <option value="statesBody" selected>States</option>
           <option value="temperature">Temperature</option>
           <option value="texture">Texture</option>
         </select>
@@ -349,7 +349,7 @@
             <tr data-tip="Select element group">
               <td>Group</td>
               <td>
-                <select id="styleGroupSelect"><option value="regions">regions</option></select>
+                <select id="styleGroupSelect"><option value="statesBody">statesBody</option></select>
               </td>
             </tr>
           </tbody>
@@ -358,12 +358,30 @@
             <tr data-tip="Set opacity. 0: transparent, 1: solid">
               <td>Opacity</td>
               <td>
-                <input id="styleOpacityInput" type="range" min="0" max="1" step="0.01" value=".4">
+                <input id="styleOpacityInput" type="range" min=0 max=1 step=0.01 value=.4>
                 <output id="styleOpacityOutput">0.4</output>
               </td>
             </tr>
           </tbody>
 
+          <tbody id="styleStates" style="display: block">
+            <tr data-tip="Set states halo effect width">
+              <td>Halo width</td>
+              <td>
+                <input id="styleStatesHaloWidth" type="range" min=0 max=30 step=.1 value=10>
+                <output id="styleStatesHaloWidthOutput">10</output>
+              </td>
+            </tr>
+
+            <tr data-tip="Set states halo effect opacity. 0: invisible, 1: solid">
+              <td>Halo opacity</td>
+              <td>
+                <input id="styleStatesHaloOpacity" type="range" min=0 max=1 step=0.01 value=.4>
+                <output id="styleStatesHaloOpacityOutput">0.4</output>
+              </td>
+            </tr>
+          </tbody>
+
           <tbody id="stylePopulation">
             <tr data-tip="Set bar color for rural population">
               <td>Rural color</td>
@@ -379,7 +397,7 @@
                 <input id="stylePopulationUrbanStrokeInput" type="color" value="#ff0000"/>
                 <output id="stylePopulationUrbanStrokeOutput">#ff0000</output>
               </td>
-            </tr>            
+            </tr>
           </tbody>
 
           <tbody id="styleTexture">
@@ -647,7 +665,7 @@
           </tbody>
 
           <tbody id="styleTemperature">
-            <tr data-tip="Define transparency of temparature leyer. Set to 0 to make it fully transparent">
+            <tr data-tip="Define transparency of temperature leyer. Set to 0 to make it fully transparent">
               <td>Fill opacity</td>
               <td>
                 <input id="styleTemperatureFillOpacityInput" type="range" min=0 max=1 step=.01 value=.3/>
@@ -834,6 +852,7 @@
                 <option value="Mediterranean">Mediterranean</option>
                 <option value="Peninsula">Peninsula</option>
                 <option value="Pangea">Pangea</option>
+                <option value="Isthmus">Isthmus</option>
               </select>
             </td>
             <td></td>
@@ -906,7 +925,7 @@
 
         </table>
 
-        <p data-tip="Interface settings that don't affect generation. Getting applied immediately on change">User Interface:</p>
+        <p data-tip="Interface settings that don't affect generation. They are applied immediately on change">User Interface:</p>
         <table>
           <tr data-tip="Set user interface size">
             <td></td>
@@ -941,7 +960,7 @@
             </td>
           </tr>
 
-          <tr data-tip="Define relative size of a saved png images. Consider saving big images is slow and may cause browser crash">
+          <tr data-tip="Define relative size of a saved png image. Saving big images is slow and may cause a browser crash">
             <td></td>
             <td>PNG resolution</td>
             <td>
@@ -991,7 +1010,7 @@
           <button id="regenerateStateLabels" data-tip="Click to update state labels placement based on current borders">State labels</button>
           <button id="regenerateReliefIcons" data-tip="Click to regenerate all relief icons based on current cell biome and elevation">Relief icons</button>
           <button id="regenerateRoutes" data-tip="Click to regenerate all routes">Routes</button>
-          <button id="regenerateRivers" data-tip="Click to regenerate all rivers">Rivers</button>
+          <button id="regenerateRivers" data-tip="Click to regenerate all rivers. Please note map heights can be changed by water flow">Rivers</button>
           <button id="regeneratePopulation" data-tip="Click to recalculate rural and urban population">Population</button>
         </div>
 
@@ -1044,9 +1063,9 @@
             <input id="renderOcean" class="checkbox" type="checkbox">
             <label for="renderOcean" class="checkbox-label">Render ocean cells</label>
           </div>
-          <div data-tip="Allow system to change custom heights on edit completion if reasonable">
+          <div data-tip="Allow water flow to change heights on heightmap edit completion">
             <input id="changeHeights" class="checkbox" type="checkbox" checked>
-            <label for="changeHeights" class="checkbox-label">Allow to change heights on completion</label>
+            <label for="changeHeights" class="checkbox-label">Allow water erosion</label>
           </div>
         </div>
 
@@ -1555,6 +1574,7 @@
           <option value="templateMediterranean">Mediterranean</option>
           <option value="templatePeninsula">Peninsula</option>
           <option value="templatePangea">Pangea</option>
+          <option value="templateIsthmus">Isthmus</option>
         </select>
       </div>
       <div id="templateTools">
@@ -1643,8 +1663,8 @@
 
       <div id="biomesBottom">
         <button id="biomesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
-        <button id="biomesPercentage" data-tip="Toggle percentage / absolut values views" class="icon-percent"></button>
+        <button id="biomesPercentage" data-tip="Toggle percentage / absolute values views" class="icon-percent"></button>
-        <button id="biomesRestore" data-tip="Restore the defaults and re-define biomes based on current moisture and temparature" class="icon-history"></button>
+        <button id="biomesRestore" data-tip="Restore the defaults and re-define biomes based on current moisture and temperature" class="icon-history"></button>
         <button id="biomesManually" data-tip="Manually re-assign biomes to not follow the default moisture/temperature pattern" class="icon-brush"></button>
         <div id="biomesManuallyButtons" style="display: none">
           <button id="biomesManuallyApply" data-tip="Apply current assignment" class="icon-check"></button>
@@ -1685,9 +1705,9 @@
 
       <div id="statesBottom">
         <button id="statesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
-        <button id="statesPercentage" data-tip="Toggle percentage / absolut values views" class="icon-percent"></button>
+        <button id="statesPercentage" data-tip="Toggle percentage / absolute values views" class="icon-percent"></button>
 
-        <button id="statesRegenerate" data-tip="Show the regeneratation menu" class="icon-cog-alt"></button>
+        <button id="statesRegenerate" data-tip="Show the regeneration menu" class="icon-cog-alt"></button>
         <div id="statesRegenerateButtons" style="display: none">
           <button id="statesRegenerateBack" data-tip="Hide the renegotiation menu" class="icon-cog-alt"></button>
           <button id="regenerateStateNames" data-tip="Regenerate state names based on assigned culture" class="icon-retweet"></button>
@@ -1749,7 +1769,7 @@
         <button id="addNewBurg" data-tip="Add a new burg. Hold Shift to add multiple" class="icon-plus"></button>
         <button id="burgsExport" data-tip="Save burgs-related data as a text file (.csv)" class="icon-download"></button>
         <button id="burgNamesImport" data-tip="Import burg names. Source file should be a plain list of names where each name is on a separate line" class="icon-upload"></button>
-        <button id="burgsRemoveAll" data-tip="Remove all burgs except of capitals. To remove a capital remove its state first" class="icon-trash"></button>
+        <button id="burgsRemoveAll" data-tip="Remove all burgs except for capitals. To remove a capital remove its state first" class="icon-trash"></button>
       </div>
     </div>
 
@@ -1774,7 +1794,7 @@
 
       <div id="culturesBottom">
         <button id="culturesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
-        <button id="culturesPercentage" data-tip="Toggle percentage / absolut values display mode" class="icon-percent"></button>
+        <button id="culturesPercentage" data-tip="Toggle percentage / absolute values display mode" class="icon-percent"></button>
         <button id="culturesRecalculate" data-tip="Re-calculate cultures based on centers placement, expansion and type" class="icon-resize-full-alt"></button>
         <button id="culturesManually" data-tip="Manually re-assign cultures" class="icon-brush"></button>
         <div id="culturesManuallyButtons" style="display: none">
@@ -1805,8 +1825,8 @@
           <span>Name: </span>
           <input id="namesbaseName" data-tip="Type to change a base name" placeholder="Base name" autocorrect="off" spellcheck="false" style="width:12em"/>
           <span>Length: </span>
-          <input id="namesbaseMin" data-tip="Recommended minimal name length" type="number" min=2 max=100>
+          <input id="namesbaseMin" data-tip="Recommended minimum name length" type="number" min=2 max=100>
-          <input id="namesbaseMax" data-tip="Recommended maximal name length" type="number" min=2 value=10>
+          <input id="namesbaseMax" data-tip="Recommended maximum name length" type="number" min=2 value=10>
           <span>Double: </span>
           <input id="namesbaseDouble" data-tip="Populate with letters that can used twice in a row" autocorrect="off" spellcheck="false" style="width:5em">
           <span>Multi: </span>
@@ -1899,7 +1919,7 @@
 
         <div class="unitsHeader" data-tip="Select Temperature scale">
           <span class="icon-asterisk"></span>
-          <div>Temparature:</div>
+          <div>Temperature:</div>
         </div>
 
         <div>

main.js

@@ -287,7 +287,9 @@ function applyDefaultStyle() {
   ruler.attr("opacity", null).attr("filter", null);
   searoutes.attr("opacity", .8).attr("stroke", "#ffffff").attr("stroke-width", .45).attr("stroke-dasharray", "1 2").attr("stroke-linecap", "round").attr("filter", null);
   
-  regions.attr("opacity", .4).attr("filter", null);
+  statesBody.attr("opacity", .4).attr("filter", null);
+  statesHalo.attr("stroke-width", 10).attr("opacity", .4);
+
   temperature.attr("opacity", null).attr("fill", "#000000").attr("stroke-width", 1.8).attr("fill-opacity", .3).attr("font-size", "8px").attr("stroke-dasharray", null).attr("filter", null).attr("mask", null);
   texture.attr("opacity", null).attr("filter", null).attr("mask", "url(#land)");
   texture.select("image").attr("x", 0).attr("y", 0);
@@ -477,7 +479,7 @@ function invokeActiveZooming() {
 
   // change states halo width
   if (!customization) {
-    const haloSize = rn(10 / scale, 1);
+    const haloSize = rn(styleStatesHaloWidth.value / scale, 1);
     statesHalo.attr("stroke-width", haloSize).style("display", haloSize > 3 ? "block" : "none");
   }
 
@@ -559,7 +561,6 @@ function generate() {
   drawCoastline();
 
   elevateLakes();
-  resolveDepressions();
   Rivers.generate();
   defineBiomes();
 
@@ -1053,27 +1054,6 @@ function elevateLakes() {
   console.timeEnd('elevateLakes');
 }
 
-// depression filling algorithm (for a correct water flux modeling)
-function resolveDepressions() {
-  console.time('resolveDepressions');
-  const cells = pack.cells;
-  const land = cells.i.filter(i => cells.h[i] >= 20 && cells.h[i] < 95 && !cells.b[i]); // exclude near-border cells
-  land.sort(highest); // highest cells go first
-
-  for (let l = 0, depression = Infinity; depression > 1 && l < 100; l++) {
-    depression = 0;
-    for (const i of land) {
-      const minHeight = d3.min(cells.c[i].map(c => cells.h[c]));
-      if (minHeight === 100) continue; // already max height
-      if (cells.h[i] <= minHeight) {cells.h[i] = minHeight + 1; depression++;}
-    }
-  }
-
-  console.timeEnd('resolveDepressions');
-  //const depressed = cells.i.filter(i => cells.h[i] >= 20  && cells.h[i] < 95 && !cells.b[i] && cells.h[i] <= d3.min(cells.c[i].map(c => cells.h[c])));
-  //debug.selectAll(".deps").data(depressed).enter().append("circle").attr("r", 0.8).attr("cx", d => cells.p[d][0]).attr("cy", d => cells.p[d][1]);
-}
-
 // assign biome id for each cell
 function defineBiomes() {
   console.time("defineBiomes");

modules/heightmap-generator.js

@@ -22,7 +22,8 @@
       if (rnd < .85) input.value = "Archipelago"; else // 30%
       if (rnd < .90) input.value = "Mediterranean"; else // 5%
       if (rnd < .95) input.value = "Peninsula"; else // 5%
-      if (rnd < .99) input.value = "Pangea"; else // 4%
+      if (rnd < .97) input.value = "Pangea"; else // 2%
+      if (rnd < .99) input.value = "Isthmus"; else // 2%
       input.value = "Atoll"; // 1%
     }
 
@@ -36,6 +37,7 @@
       case "Mediterranean": templateMediterranean(); break;
       case "Peninsula": templatePeninsula(); break;
       case "Pangea": templatePangea(); break;
+      case "Isthmus": templateIsthmus(); break;
     }
 
     console.timeEnd('generateHeightmap');
@@ -175,6 +177,21 @@
     addStep("Range", "5-6", "30-40", "10-90", "35-65");
   }
 
+  // Heighmap Template: Isthmus
+  function templateIsthmus() {
+    addStep("Hill", "5-10", "15-30", "0-30", "0-20");
+    addStep("Hill", "5-10", "15-30", "10-50", "20-40");
+    addStep("Hill", "5-10", "15-30", "30-70", "40-60");
+    addStep("Hill", "5-10", "15-30", "50-90", "60-80");
+    addStep("Hill", "5-10", "15-30", "70-100", "80-100");
+    addStep("Smooth", 2);
+    addStep("Trough", "4-8", "15-30", "0-30", "0-20");
+    addStep("Trough", "4-8", "15-30", "10-50", "20-40");
+    addStep("Trough", "4-8", "15-30", "30-70", "40-60");
+    addStep("Trough", "4-8", "15-30", "50-90", "60-80");
+    addStep("Trough", "4-8", "15-30", "70-100", "80-100");
+  }
+
   function getBlobPower() {
     switch (+densityInput.value) {
       case 1: return .98;

modules/ui/cultures-editor.js

@@ -121,7 +121,7 @@ function editCultures() {
     body.querySelectorAll("div > input.cultureName").forEach(el => el.addEventListener("input", cultureChangeName));
     body.querySelectorAll("div > input.statePower").forEach(el => el.addEventListener("input", cultureChangeExpansionism));
     body.querySelectorAll("div > select.cultureType").forEach(el => el.addEventListener("change", cultureChangeType));
-    body.querySelectorAll("div > select.cultureBase").forEach(el => el.addEventListener("click", updateBaseOptions));
+    body.querySelectorAll("div > select.cultureBase").forEach(el => el.addEventListener("change", cultureChangeBase));
     body.querySelectorAll("div > span.icon-arrows-cw").forEach(el => el.addEventListener("click", cultureRegenerateBurgs));
     body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.addEventListener("click", cultureRemove));
 
@@ -185,12 +185,10 @@ function editCultures() {
     recalculateCultures();
   }
 
-  function updateBaseOptions() {
+  function cultureChangeBase() {
     const culture = +this.parentNode.dataset.id;
     const v = +this.value;
-    this.parentNode.dataset.base = pack.cultures[culture].base = v;    
+    this.parentNode.dataset.base = pack.cultures[culture].base = v;
-    this.options.length = 0;
-    nameBases.forEach((b, i) => this.options.add(new Option(b.name, i, false, i === v)));
   }
 
   function cultureRegenerateBurgs() {

modules/ui/heightmap-editor.js

@@ -9,7 +9,7 @@ function editHeightmap() {
     <p>You can also <i>keep</i> all the data as is, but you won't be able to change the coastline.</p>
 
     <p>If you need to change the coastline and keep the data, you may try the <i>risk</i> edit option. 
-    The secondary data will be kept with burgs placed on water being be removed, 
+    The secondary data will be kept with burgs placed on water being removed, 
     but the landmass change can cause unexpected data fluctuation and errors.</p>`;
 
     $("#alert").dialog({resizable: false, title: "Edit Heightmap", width: 300,
@@ -697,7 +697,21 @@ function editHeightmap() {
         addStep("Trough", "3-4", "25-35", "5-95", "80-90");
         addStep("Range", "5-6", "30-40", "10-90", "35-65");
       }
-      
+
+      else if (template === "templateIsthmus") {
+        addStep("Hill", "5-10", "15-30", "0-30", "0-20");
+        addStep("Hill", "5-10", "15-30", "10-50", "20-40");
+        addStep("Hill", "5-10", "15-30", "30-70", "40-60");
+        addStep("Hill", "5-10", "15-30", "50-90", "60-80");
+        addStep("Hill", "5-10", "15-30", "70-100", "80-100");
+        addStep("Smooth", 2);
+        addStep("Trough", "4-8", "15-30", "0-30", "0-20");
+        addStep("Trough", "4-8", "15-30", "10-50", "20-40");
+        addStep("Trough", "4-8", "15-30", "30-70", "40-60");
+        addStep("Trough", "4-8", "15-30", "50-90", "60-80");
+        addStep("Trough", "4-8", "15-30", "70-100", "80-100");
+      }
+
     }
 
     function executeTemplate() {

modules/ui/layers.js

@@ -678,7 +678,7 @@ function toggleTexture() {
     // append default texture image selected by default. Don't append on load to not harm performance
     if (!texture.selectAll("*").size()) {
       const link = getAbsolutePath(styleTextureInput.value);
-      texture.append("image").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%")
+      texture.append("image").attr("x", 0).attr("y", 0).attr("width", graphWidth).attr("height", graphHeight)
         .attr('xlink:href', link).attr('preserveAspectRatio', "xMidYMid slice");
     }
     $('#texture').fadeIn();

modules/ui/options.js

@@ -175,9 +175,15 @@ function selectStyleElement() {
     stylePopulationRuralStrokeInput.value = stylePopulationRuralStrokeOutput.value = population.select("#rural").attr("stroke");
     stylePopulationUrbanStrokeInput.value = stylePopulationUrbanStrokeOutput.value = population.select("#urban").attr("stroke");
     styleStrokeWidth.style.display = "block";
-    styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";      
+    styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
   }
-  
+
+  if (sel === "statesBody") {
+    styleStates.style.display = "block";
+    styleStatesHaloWidth.value = styleStatesHaloWidthOutput.value = statesHalo.attr("stroke-width");
+    styleStatesHaloOpacity.value = styleStatesHaloOpacityOutput.value = statesHalo.attr("opacity");
+  }
+
   if (sel === "labels") {
     styleFill.style.display = "block";
     styleStroke.style.display = "block";
@@ -306,11 +312,11 @@ styleTextureInput.addEventListener("change", function() {
 });
 
 styleTextureShiftX.addEventListener("input", function() {
-  texture.select("image").attr("x", this.value).attr("width", svgWidth - this.valueAsNumber);
+  texture.select("image").attr("x", this.value).attr("width", graphWidth - this.valueAsNumber);
 });
 
 styleTextureShiftY.addEventListener("input", function() {
-  texture.select("image").attr("y", this.value).attr("height", svgHeight - this.valueAsNumber);
+  texture.select("image").attr("y", this.value).attr("height", graphHeight - this.valueAsNumber);
 });
 
 styleClippingInput.addEventListener("change", function() {
@@ -522,6 +528,16 @@ function changeIconSize(size, group) {
   styleIconSizeInput.value = size;
 }
 
+styleStatesHaloWidth.addEventListener("input", function() {
+  styleStatesHaloWidthOutput.value = this.value;
+  statesHalo.attr("stroke-width", +this.value);
+});
+
+styleStatesHaloOpacity.addEventListener("input", function() {
+  styleStatesHaloOpacityOutput.value = this.value;
+  statesHalo.attr("opacity", +this.value);
+});
+
 // request to restore default style on button click
 function askToRestoreDefaultStyle() {
   alertMessage.innerHTML = "Are you sure you want to restore default style for all elements?";