v 1.21

index.css

@@ -593,7 +593,7 @@ button.active {
 
 #viewMode > button {
 	padding: .35em;
-	margin: .2em .3em;
+	margin: .2em .3em .6em .3em;
 	float: left;
 	width: 30.7%;
 }
@@ -1287,6 +1287,10 @@ div.states span.inactive:hover {
 	color: #abaaaa;
 }
 
+div.states>input.riverType {
+	width: 5em;
+}
+
 #diplomacyBodySection > div {
 	cursor: pointer;
 }
@@ -1976,6 +1980,13 @@ svg.button {
 	border: 1px solid #916e7f;
 }
 
+.announcement {
+	background-color: #a18888;
+	color: white;
+	padding: .4em .5em;
+	border: dashed 1px #5d4651;
+}
+
 #debug {
 	font-size: 1px;
 	opacity: .8;

main.js

@@ -7,11 +7,11 @@
 // See also https://github.com/Azgaar/Fantasy-Map-Generator/issues/153
 
 "use strict";
-const version = "1.2"; // generator version
+const version = "1.21"; // generator version
 document.title += " v" + version;
 
 // if map version is not stored, clear localStorage and show a message
-if (rn(localStorage.getItem("version"),1) !== rn(version,1)) {
+if (rn(localStorage.getItem("version"), 2) !== rn(version, 2)) {
   localStorage.clear();
   setTimeout(showWelcomeMessage, 8000);
 }
@@ -325,10 +325,18 @@ function showWelcomeMessage() {
     This version is compatible with ${changelog}, loaded <i>.map</i> files will be auto-updated.
 
     <ul>${post}
-      <li>3d scene</li>
-      <li>Globe view</li>
+      <li>3d scene and Globe view</li>
+      <li>Ability to save map as JPEG image</li>
+      <li>Diplomacy Editor enhancements</li>
+      <li>Rivers Overview screen [v 1.21] <b>*</b></li>
     </ul>
 
+    <p style="color:#990000; font-style: italic"><b>*</b> It's recommended to regenerate rivers to get clean data for Rivers Overview.<p>
+
+    <p class="announcement">We are happy to invite you to participate in our first map making contest! 
+    Valuable prizes for winners and our respect for all participants. 
+    See ${link("https://www.reddit.com/r/FantasyMapGenerator/comments/dn2sqv/azgaars_fantasy_map_generator_mapmaking_contest/", "Reddit post")} for the details.</p>
+
     <p>Join our ${reddit} and ${discord} to ask questions, share maps, discuss the Generator, report bugs and propose new features.</p>
     <p>Thanks for all supporters on ${patreon}!</i></p>`;
 
@@ -513,6 +521,8 @@ function generate() {
     drawStates();
     drawBorders();
     BurgsAndStates.drawStateLabels();
+
+    Rivers.specify();
     addMarkers();
     addZones();
     Names.getMapName();
@@ -1222,9 +1232,9 @@ function addMarkers(number = 1) {
         .attr("data-size", 1).attr("width", 30).attr("height", 30);
 
       const burg = pack.burgs[cells.burg[cell]];
-      const river = Names.getCulture(cells.culture[cell]); // river name
-      const name = Math.random() < .2 ? river : burg.name;
-      notes.push({id, name:`${name} Bridge`, legend:`A stone bridge over the ${river} River near ${burg.name}`});
+      const river = pack.rivers.find(r => r.i === pack.cells.r[cell]);
+      const name = Math.random() < .2 ? river.name : burg.name;
+      notes.push({id, name:`${name} Bridge`, legend:`A stone bridge over the ${river.name} ${river.type} near ${burg.name}`});
       count--;
     }
   }()

modules/river-generator.js

@@ -73,12 +73,16 @@
           riversData.push({river: riverNext, cell: i, x, y});
           riverNext++;
         }
-    
+
         if (cells.r[min]) { // downhill cell already has river assigned
           if (cells.fl[min] < cells.fl[i]) {
-            cells.conf[min] = cells.fl[min];  // confluence
+            cells.conf[min] = cells.fl[min]; // mark confluence
+            if (h[min] >= 20) riversData.find(r => r.river === cells.r[min]).parent = cells.r[i]; // min river is a tributary of current river
             cells.r[min] = cells.r[i]; // re-assign river if downhill part has less flux
-          } else cells.conf[min] += cells.fl[i]; // confluence
+          } else {
+            cells.conf[min] += cells.fl[i]; // mark confluence
+            if (h[min] >= 20) riversData.find(r => r.river === cells.r[i]).parent = cells.r[min]; // current river is a tributary of min river
+          }
         } else cells.r[min] = cells.r[i]; // assign the river to the downhill cell
 
         const nx = p[min][0], ny = p[min][1];
@@ -99,25 +103,29 @@
 
       });
     }()
-
-    void function drawRivers() {
-      const riverPaths = []; // to store data for all rivers
+
+    void function defineRivers() {
+      pack.rivers = []; // rivers data
+      const riverPaths = []; // temporary data for all rivers
 
       for (let r = 1; r <= riverNext; r++) {
         const riverSegments = riversData.filter(d => d.river === r);
-    
+
         if (riverSegments.length > 2) {
           const riverEnhanced = addMeandring(riverSegments);
-          const width = rn(0.8 + Math.random() * 0.4, 1); // river width modifier
-          const increment = rn(0.8 + Math.random() * 0.6, 1); // river bed widening modifier
-          const path = getPath(riverEnhanced, width, increment);
+          const width = rn(.8 + Math.random() * .4, 1); // river width modifier
+          const increment = rn(.8 + Math.random() * .6, 1); // river bed widening modifier
+          const [path, length] = getPath(riverEnhanced, width, increment);
           riverPaths.push([r, path, width, increment]);
+          const parent = riverSegments[0].parent || 0;
+          pack.rivers.push({i:r, parent, length, source:riverSegments[0].cell, mouth:last(riverSegments).cell});
         } else {
           // remove too short rivers
           riverSegments.filter(s => cells.r[s.cell] === r).forEach(s => cells.r[s.cell] = 0);
         }
       }
 
+      // drawRivers
       rivers.selectAll("path").remove();
       rivers.selectAll("path").data(riverPaths).enter()
         .append("path").attr("d", d => d[1]).attr("id", d => "river"+d[0])
@@ -129,12 +137,10 @@
 
   // depression filling algorithm (for a correct water flux modeling)
   const resolveDepressions = function(h) {
-    console.time('resolveDepressions');
     const cells = pack.cells;
     const land = cells.i.filter(i => h[i] >= 20 && h[i] < 100 && !cells.b[i]); // exclude near-border cells
     land.sort((a,b) => h[b] - h[a]); // highest cells go first
     let depressed = false;
-    const depressions = [];
 
     for (let l = 0, depression = Infinity; depression && l < 100; l++) {
       depression = 0;
@@ -147,12 +153,8 @@
           depressed = true;
         }
       }
-      depressions.push(depression);
     }
 
-    console.log(depressions);
-
-    console.timeEnd('resolveDepressions');
     return depressed;
   }
 
@@ -242,9 +244,56 @@
     const right = lineGen(riverPointsRight);
     let left = lineGen(riverPointsLeft);
     left = left.substring(left.indexOf("C"));
-    return round(right + left, 2);
+    return [round(right + left, 2), rn(riverLength, 2)];
+  }
+
+  const specify = function() {
+    if (!pack.rivers.length) return;
+    const smallLength = pack.rivers.map(r => r.length||0).sort((a,b) => a-b)[Math.ceil(pack.rivers.length * .15)];
+    const smallType = {"Creek":9, "River":3, "Brook":3, "Stream":1}; // weighted small river types
+
+    for (const r of pack.rivers) {
+      r.basin = getBasin(r.i, r.parent);
+      r.name = getName(r.mouth);
+      const small = r.length < smallLength;
+      r.type = r.parent && !(r.i%6) ? small ? "Branch" : "Fork" : small ? rw(smallType) : "River";
+    }
+
+    return;
+    const basins = [...(new Set(pack.rivers.map(r=>r.basin)))];
+    const colors = getColors(basins.length);
+    basins.forEach((b,i) => {
+      pack.rivers.filter(r => r.basin === b).forEach(r => {
+        rivers.select("#river"+r.i).attr("fill", colors[i]);
+      });
+    });
+
+  }
+
+  const getName = function(cell) {
+    return Names.getCulture(pack.cells.culture[cell]);
+  }
+
+  // remove river and all its tributaries
+  const remove = function(id) {
+    const riversToRemove = pack.rivers.filter(r => r.i === id || getBasin(r.i, r.parent, id) === id).map(r => r.i);
+    riversToRemove.forEach(r => rivers.select("#river"+r).remove());
+    pack.cells.r.forEach((r, i) => {
+      if (r && riversToRemove.includes(r)) pack.cells.r[i] = 0;
+    });
+    pack.rivers = pack.rivers.filter(r => !riversToRemove.includes(r.i));
+  }
+
+  const getBasin = function(r, p, e) {
+    while (p) {
+      const parent = pack.rivers.find(r => r.i === p);
+      if (parent) r = parent.i;
+      p = parent ? parent.parent : 0;
+      if (r === e) return r;
+    }
+    return r;
   }
 
-  return {generate, resolveDepressions, addMeandring, getPath};
+  return {generate, resolveDepressions, addMeandring, getPath, specify, getName, getBasin, remove};
 
 })));

modules/save-and-load.js

@@ -250,6 +250,7 @@ function getMapData() {
     const burgs = JSON.stringify(pack.burgs);
     const religions = JSON.stringify(pack.religions);
     const provinces = JSON.stringify(pack.provinces);
+    const rivers = JSON.stringify(pack.rivers);
 
     // store name array only if it is not the same as default
     const defaultNB = Names.getNameBases();
@@ -268,7 +269,7 @@ function getMapData() {
       pack.cells.biome, pack.cells.burg, pack.cells.conf, pack.cells.culture, pack.cells.fl,
       pop, pack.cells.r, pack.cells.road, pack.cells.s, pack.cells.state,
       pack.cells.religion, pack.cells.province, pack.cells.crossroad, religions, provinces,
-      namesData].join("\r\n");
+      namesData, rivers].join("\r\n");
     const blob = new Blob([data], {type: "text/plain"});
 
     console.timeEnd("createMapDataBlob");
@@ -293,23 +294,6 @@ async function saveMap() {
   window.setTimeout(() => window.URL.revokeObjectURL(URL), 5000);
 }
 
-// download map data as GeoJSON
-function saveGeoJSON() {
-  alertMessage.innerHTML = `You can export map data in GeoJSON format used in GIS tools such as QGIS.
-  Check out ${link("https://github.com/Azgaar/Fantasy-Map-Generator/wiki/GIS-data-export", "wiki-page")} for guidance`;
-
-  $("#alert").dialog({title: "GIS data export", resizable: false, width: "32em", position: {my: "center", at: "center", of: "svg"},
-    buttons: {
-      Cells: saveGeoJSON_Cells,
-      Routes: saveGeoJSON_Roads,
-      Rivers: saveGeoJSON_Rivers,
-      Markers: saveGeoJSON_Markers,
-      Close: function() {$(this).dialog("close");}
-    }
-  });
-}
-
-
 function saveGeoJSON_Cells() {
   let data = "{ \"type\": \"FeatureCollection\", \"features\": [\n";
   const cells = pack.cells, v = pack.vertices;
@@ -686,6 +670,7 @@ function parseLoadedData(data) {
       pack.burgs = JSON.parse(data[15]);
       pack.religions = data[29] ? JSON.parse(data[29]) : [{i: 0, name: "No religion"}];
       pack.provinces = data[30] ? JSON.parse(data[30]) : [0];
+      pack.rivers = data[32] ? JSON.stringify(data[32]) : [];
 
       const cells = pack.cells;
       cells.biome = Uint8Array.from(data[16].split(","));
@@ -899,21 +884,37 @@ function parseLoadedData(data) {
           });
         }
 
+        // v 1.11 had an issue with fogging being displayed on load
+        unfog();
+
+        // v 1.2 added new terrain attributes
+        if (!terrain.attr("set")) terrain.attr("set", "simple");
+        if (!terrain.attr("size")) terrain.attr("size", 1);
+        if (!terrain.attr("density")) terrain.attr("density", .4);
+      }
+
+      if (version < 1.21) {
         // v 1.11 replaced "display" attribute by "display" style
         viewbox.selectAll("g").each(function() {
           if (this.hasAttribute("display")) {
-            this.removeAttribute("display"); 
+            this.removeAttribute("display");
             this.style.display = "none";
           }
         });
 
-        // v 1.11 had an issue with fogging being displayed on load
-        unfog();
+        // v 1.21 added rivers data to pack
+
+        pack.rivers = []; // rivers data
+        rivers.selectAll("path").each(function() {
+          const i = +this.id.slice(5);
+          const length = this.getTotalLength() / 2;
+          const s = this.getPointAtLength(length), e = this.getPointAtLength(0);
+          const source = findCell(s.x, s.y), mouth = findCell(e.x, e.y);
+          const name = Rivers.getName(mouth);
+          const type = length < 25 ? rw({"Creek":9, "River":3, "Brook":3, "Stream":1}) : "River";
+          pack.rivers.push({i, parent:0, length, source, mouth, basin:i, name, type});
+        });
 
-        // v 1.2 added new terrain attributes
-        if (!terrain.attr("set")) terrain.attr("set", "simple");
-        if (!terrain.attr("size")) terrain.attr("size", 1);
-        if (!terrain.attr("density")) terrain.attr("density", .4);
       }
 
     }()

modules/ui/burg-editor.js

@@ -30,7 +30,7 @@ function editBurg(id) {
   document.getElementById("burgAddGroup").addEventListener("click", toggleNewGroupInput);
   document.getElementById("burgRemoveGroup").addEventListener("click", removeBurgsGroup);
 
-  document.getElementById("burgName").addEventListener("input", changeName); 
+  document.getElementById("burgName").addEventListener("input", changeName);
   document.getElementById("burgNameReCulture").addEventListener("click", generateNameCulture);
   document.getElementById("burgNameReRandom").addEventListener("click", generateNameRandom);
   document.getElementById("burgPopulation").addEventListener("change", changePopulation);