From 9f54b1e3f0f7384f0e88265f658de00067f22da5 Mon Sep 17 00:00:00 2001
From: Evolvedexperiment <evolvedexperiment@gmail.com>
Date: Sat, 16 May 2020 09:12:25 +0000
Subject: [PATCH 01/12] Added colour, biomes, adjustable height, and changed
 graph code to use d3 more

---
 index.css                       |  10 ++
 index.html                      |  16 +++
 modules/ui/elevation-profile.js | 223 +++++++++++++++++++++-----------
 modules/ui/rivers-editor.js     |   4 +-
 modules/ui/routes-editor.js     |   4 +-
 5 files changed, 174 insertions(+), 83 deletions(-)

diff --git a/index.css b/index.css
index 1cd18ea7..ac5669c5 100644
--- a/index.css
+++ b/index.css
@@ -2101,6 +2101,16 @@ svg.button {
 	text-shadow: 0px 1px 4px #4c3a35;
 }
 
+.epgrid line {
+  stroke: lightgrey;
+  stroke-opacity: 0.7;
+  shape-rendering: crispEdges;
+}
+
+.epgrid path {
+  stroke-width: 0;
+}
+
 #debug {
 	font-size: 1px;
 	opacity: .8;
diff --git a/index.html b/index.html
index 7c0e1c5f..4a64ad88 100644
--- a/index.html
+++ b/index.html
@@ -2134,6 +2134,22 @@
     </div>
 
     <div id="elevationProfile" class="dialog" style="display: none" width="100%">
+      <div data-tip="Set height scale">
+        <div>Height scale:</div>
+        <div><input id="epScaleRange" type="range" min=1 max=100 value=50></div>
+
+        <div>Curve:</div>
+        <div>
+          <select id="epCurve">
+            <option>Linear</option>
+            <option selected>Basis spline</option>
+            <option>Bundle</option>
+            <option>Cubic Catmull-Rom</option>
+            <option>Monotone X</option>
+            <option>Natural</option>
+          </select>
+        </div>
+      </div>
       <div id="elevationGraph" data-tip="Elevation profile"></div>
     </div>
 
diff --git a/modules/ui/elevation-profile.js b/modules/ui/elevation-profile.js
index 073bf25a..1d05db06 100644
--- a/modules/ui/elevation-profile.js
+++ b/modules/ui/elevation-profile.js
@@ -1,4 +1,5 @@
 "use strict";
+
 function showEPForRoute(node) {
   const points = [];
   debug.select("#controlPoints").selectAll("circle").each(function() {
@@ -21,19 +22,23 @@ function showEPForRiver(node) {
   showElevationProfile(points, riverLen, true);
 }
 
-function resizeElevationProfile() {
+function closeElevationProfile() {
+  modules.elevation = false;
 }
 
 function showElevationProfile(data, routeLen, isRiver) {
-  // data is an array of cell indexes, routeLen is the distance, isRiver should be true for rivers, false otherwise
-  document.getElementById("elevationGraph").innerHTML = "";
+  // data is an array of cell indexes, routeLen is the distance (in actual metres/feet), isRiver should be true for rivers, false otherwise
+
+  document.getElementById("epScaleRange").addEventListener("change", draw);
+  document.getElementById("epCurve").addEventListener("change", draw);
 
   $("#elevationProfile").dialog({
     title: "Elevation profile", resizable: false, width: window.width,
-    position: {my: "left top", at: "left+20 bottom-240", of: window, collision: "fit"}
+    close: closeElevationProfile,
+    position: {my: "left top", at: "left+20 bottom-500", of: window, collision: "fit"}
   });
 
-  // prevent river graphs from showing rivers as flowing uphill
+  // prevent river graphs from showing rivers as flowing uphill - remember the general slope
   var slope = 0;
   if (isRiver) {
     if (pack.cells.h[data[0]] < pack.cells.h[data[data.length-1]]) {
@@ -43,12 +48,19 @@ function showElevationProfile(data, routeLen, isRiver) {
     }
   }
 
-  const points = [];
-  var prevB=0, prevH=-1, i=0, j=0, cell=0, b=0, ma=0, mi=100, h=0;
-  for (var i=0; i<data.length; i++) {
-    cell = data[i];
+  const chartWidth = window.innerWidth-280;
+  const chartHeight = 200; // height of our land/sea profile, excluding the biomes data below
 
-    h = pack.cells.h[cell];
+  const xOffset = 160;
+  const yOffset = 140;  // this is our drawing starting point from top-left (y = 0) of SVG
+
+  const biomesHeight = 40;
+
+  let chartData = {biome:[], burg:[], cell:[], height:[], mi:1000000, ma:0, points:[] }
+  for (let i=0, prevB=0, prevH=-1; i<data.length; i++) {
+    let cell = data[i];
+
+    let h = pack.cells.h[cell];
     if (h < 20) h = 20;
 
     // check for river up-hill
@@ -62,83 +74,136 @@ function showElevationProfile(data, routeLen, isRiver) {
     prevH = h;
     // river up-hill checks stop here
 
-    mi = Math.min(mi, h);
-    ma = Math.max(ma, h);
-
-    b = pack.cells.burg[cell];
+    let b = pack.cells.burg[cell];
     if (b == prevB) b = 0;
     else prevB = b;
-    points.push({x:j, y:h, b:b});
-    j++;
+
+    chartData.biome[i] = pack.cells.biome[cell];
+    chartData.burg[i] = b;
+    chartData.cell[i] = cell;
+    let sh = getHeight(h);
+    chartData.height[i] = parseInt(sh.substr(0, sh.indexOf(' ')));
+    chartData.mi = Math.min(chartData.mi, chartData.height[i]);
+    chartData.ma = Math.max(chartData.ma, chartData.height[i]);
   }
+  draw();
 
-  const w = window.innerWidth-280;
-  h = 100;
+  function draw() {
+    chartData.points = []; 
+    let heightScale = 100 / parseInt(epScaleRange.value);
 
-  const xOffset = 100;
-  const yOffset = 80;
+    heightScale *= 0.90; // curves cause the heights to go slightly higher, adjust here
 
-  var chart = d3.select("#elevationGraph").append("svg").attr("width", w+200).attr("height", h+yOffset).attr("id", "elevationGraph");
-  // arrow-head definition
-  chart.append("defs").append("marker").attr("id", "arrowhead").attr("orient", "auto").attr("markerWidth", "2").attr("markerHeight", "4").attr("refX", "0.1").attr("refY", "2").append("path").attr("d", "M0,0 V4 L2,2 Z");
-
-  // main graph line
-  var lineFunc = d3.line().x(d => d.x * w / points.length + xOffset).y(d => h-d.y + yOffset);
-  chart.append("path").attr("d", lineFunc(points)).attr("stroke", "purple").attr("fill", "none").attr("id", "elevationLine");
-
-  // y-axis labels for starting and ending heights
-  chart.append("text").attr("id", "epy0").attr("x", xOffset-10).attr("y", h-points[0].y + yOffset).attr("text-anchor", "end");
-  document.getElementById("epy0").innerHTML = getHeight(points[0].y);
-  chart.append("text").attr("id", "epy1").attr("x", w+100).attr("y", h-points[points.length-1].y + yOffset).attr("text-anchor", "start");
-  document.getElementById("epy1").innerHTML = getHeight(points[points.length-1].y);
-
-  // y-axis labels for minimum and maximum heights (if not too close to start/end heights)
-  if (Math.abs(ma - points[0].y) > 3 && Math.abs(ma - points[points.length-1].y) > 3) {
-    chart.append("text").attr("id", "epy2").attr("x", xOffset-10).attr("y", h-ma + yOffset).attr("text-anchor", "end");
-    document.getElementById("epy2").innerHTML = getHeight(ma);
-  }
-  if (Math.abs(mi - points[0].y) > 3 && Math.abs(mi - points[points.length-1].y) > 3) {
-    chart.append("text").attr("id", "epy3").attr("x", xOffset-10).attr("y", h-mi + yOffset).attr("text-anchor", "end");
-    document.getElementById("epy3").innerHTML = getHeight(mi);
-  }
+    const xscale = d3.scaleLinear().domain([0, data.length]).range([0, chartWidth]);
+    const yscale = d3.scaleLinear().domain([0, (chartData.ma-chartData.mi) * heightScale]).range([chartHeight, 0]);
   
-  // x-axis label for start, quarter, halfway and three-quarter, and end
-  chart.append("text").attr("id", "epx1").attr("x", xOffset).attr("y", h+yOffset).attr("text-anchor", "middle");
-  chart.append("text").attr("id", "epx2").attr("x", w / 4 + xOffset).attr("y", h+yOffset).attr("text-anchor", "middle");
-  chart.append("text").attr("id", "epx3").attr("x", w / 2 + xOffset).attr("y", h+yOffset).attr("text-anchor", "middle");
-  chart.append("text").attr("id", "epx4").attr("x", w / 4*3 + xOffset).attr("y", h+yOffset).attr("text-anchor", "middle");
-  chart.append("text").attr("id", "epx5").attr("x", w + xOffset).attr("y", h+yOffset).attr("text-anchor", "middle");
-  document.getElementById("epx1").innerHTML = "0 " + distanceUnitInput.value;
-  document.getElementById("epx2").innerHTML = rn(routeLen / 4) + " " + distanceUnitInput.value;
-  document.getElementById("epx3").innerHTML = rn(routeLen / 2) + " " + distanceUnitInput.value;
-  document.getElementById("epx4").innerHTML = rn(routeLen / 4*3) + " " + distanceUnitInput.value;
-  document.getElementById("epx5").innerHTML = rn(routeLen) + " " + distanceUnitInput.value;
-
-  chart.append("path").attr("id", "epx11").attr("d", "M" + (xOffset).toString() + ",0L" + (xOffset).toString() +"," + (h+yOffset-15).toString()).attr("stroke", "lightgray").attr("stroke-width", "1");
-  chart.append("path").attr("id", "epx12").attr("d", "M" + (w / 4 + xOffset).toString() + "," + (h+yOffset-15).toString() + "L" + (w / 4 + xOffset).toString() + ",0").attr("stroke", "lightgray").attr("stroke-width", "1");
-  chart.append("path").attr("id", "epx13").attr("d", "M" + (w / 2 + xOffset).toString() + "," + (h+yOffset-15).toString() + "L" + (w / 2 + xOffset).toString() + ",0").attr("stroke", "lightgray").attr("stroke-width", "1");
-  chart.append("path").attr("id", "epx14").attr("d", "M" + (w / 4*3 + xOffset).toString() + "," + (h+yOffset-15).toString() + "L" + (w / 4*3 + xOffset).toString() + ",0").attr("stroke", "lightgray").attr("stroke-width", "1");
-  chart.append("path").attr("id", "epx15").attr("d", "M" + (w + xOffset).toString() + ",0L" + (w + xOffset).toString() +"," + (h+yOffset-15).toString()).attr("stroke", "lightgray").attr("stroke-width", "1");
-
-  // draw city labels - try to avoid putting labels over one another
-  var y1 = 0;
-  var add = 15;
-  points.forEach(function(p) {
-    if (p.b > 0) {
-      var x1 = p.x * w / points.length + xOffset;
-      y1+=add;
-      if (y1 >= yOffset) { y1 = add; }
-      var d1 = 0;
-
-      // burg name
-      chart.append("text").attr("id", "ep" + p.b).attr("x", x1).attr("y", y1).attr("text-anchor", "middle");
-      document.getElementById("ep" + p.b).innerHTML = pack.burgs[p.b].name;
-
-      // arrow from burg name to graph line
-      chart.append("path").attr("id", "eparrow" + p.b).attr("d", "M" + x1.toString() + "," + (y1).toString() + "L" + x1.toString() + "," + parseInt(h-p.y-3+yOffset).toString()).attr("stroke", "black").attr("stroke-width", "1").attr("marker-end", "url(#arrowhead)");
+    for (let i=0; i<data.length; i++) {
+      chartData.points.push([xscale(i) + xOffset, yscale(chartData.height[i]) + yOffset]);
     }
-  });
-
+  
+    document.getElementById("elevationGraph").innerHTML = "";
 
+    const chart = d3.select("#elevationGraph").append("svg").attr("width", chartWidth+200).attr("height", chartHeight+yOffset+biomesHeight).attr("id", "elevationSVG").attr("class", "epbackground");
+    // arrow-head definition
+    chart.append("defs").append("marker").attr("id", "arrowhead").attr("orient", "auto").attr("markerWidth", "2").attr("markerHeight", "4").attr("refX", "0.1").attr("refY", "2").append("path").attr("d", "M0,0 V4 L2,2 Z").attr("fill", "darkgray");
+  
+    var landdef = chart.select("defs").append("linearGradient").attr("id", "landdef").attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%");
+    landdef.append("stop").attr("offset", "0%").attr("style", "stop-color:rgb(64,255,128);stop-opacity:1");
+    landdef.append("stop").attr("offset", "100%").attr("style", "stop-color:rgb(0,192,64);stop-opacity:1");
+  
+    // land
+    let curve = d3.line().curve(d3.curveBasis); // see https://github.com/d3/d3-shape#curves
+    let epCurveIndex = parseInt(epCurve.selectedIndex);
+    switch(epCurveIndex) {
+      case 0 : curve = d3.line().curve(d3.curveLinear); break;
+      case 1 : curve = d3.line().curve(d3.curveBasis); break;
+      case 2 : curve = d3.line().curve(d3.curveBundle.beta(1)); break;
+      case 3 : curve = d3.line().curve(d3.curveCatmullRom.alpha(0.5)); break;
+      case 4 : curve = d3.line().curve(d3.curveMonotoneX); break;
+      case 5 : curve = d3.line().curve(d3.curveNatural); break;
+    }
+  
+    // copy the points so that we can add extra straight pieces, else we get curves at the ends of the chart
+    let extra = chartData.points.slice();
+    var path = curve(extra);
+    // this completes the right-hand side and bottom of our land "polygon"
+    path += " L" + parseInt(xscale(extra.length) + +xOffset) +  "," + parseInt(extra[extra.length-1][1]);
+    path += " L" + parseInt(xscale(extra.length) + +xOffset) +  "," + parseInt(yscale(0) + +yOffset);
+    path += " L" + parseInt(xscale(0) + +xOffset) +"," + parseInt(yscale(0) + +yOffset);
+    path +=  "Z";
+    chart.append("g").attr("id", "epland").append("path").attr("d", path).attr("stroke", "purple").attr("stroke-width", "0").attr("fill", "url(#landdef)");  
+  
+    // biome / heights
+    let g = chart.append("g").attr("id", "epbiomes");
+    const hu = heightUnit.value;
+    for(var k=0; k<chartData.points.length; k++) {
+      const x = chartData.points[k][0];
+      const y = yOffset + chartHeight;
+      const c = biomesData.color[chartData.biome[k]];
+      const dataTip = biomesData.name[chartData.biome[k]]+" (" + chartData.height[k] + " " + hu + ")";
+  
+      g.append("rect").attr("stroke", c).attr("fill", c).attr("x", x).attr("y", y).attr("width", xscale(1)).attr("height", 15).attr("data-tip", dataTip);
+    }
+  
+    const xAxis = d3.axisBottom(xscale).ticks(10).tickFormat(function(d){ return (rn(d / chartData.points.length * routeLen) + " " + distanceUnitInput.value);});
+    const yAxis = d3.axisLeft(yscale).ticks(5).tickFormat(function(d) { return d + " " + hu; });
+  
+    const xGrid = d3.axisBottom(xscale).ticks(10).tickSize(-chartHeight).tickFormat("");
+    const yGrid = d3.axisLeft(yscale).ticks(5).tickSize(-chartWidth).tickFormat("");
+  
+    chart.append("g")
+      .attr("id", "epxaxis")
+      .attr("transform", "translate(" + xOffset + "," + parseInt(chartHeight + +yOffset + 20) + ")")
+      .call(xAxis)
+      .selectAll("text")
+      .style("text-anchor", "center")
+      .attr("transform", function(d) {
+          return "rotate(0)" // used to rotate labels, - anti-clockwise, + clockwise
+      });
+  
+    chart.append("g")
+      .attr("id", "epyaxis")
+      .attr("transform", "translate(" + parseInt(+xOffset-10) + "," + parseInt(+yOffset) + ")")
+      .call(yAxis);
+  
+    // add the X gridlines
+    chart.append("g")
+      .attr("id", "epxgrid")
+      .attr("class", "epgrid")
+      .attr("stroke-dasharray", "4 1")
+      .attr("transform", "translate(" + xOffset + "," + parseInt(chartHeight + +yOffset) + ")")
+      .call(xGrid);
+  
+    // add the Y gridlines
+    chart.append("g")			
+      .attr("id", "epygrid")
+      .attr("class", "epgrid")
+      .attr("stroke-dasharray", "4 1")
+      .attr("transform", "translate(" + xOffset + "," + yOffset + ")")
+      .call(yGrid);
+  
+   // draw city labels - try to avoid putting labels over one another
+    g = chart.append("g").attr("id", "epburglabels");
+    var y1 = 0;
+    var add = 15;
+    for (let k=0; k<chartData.points.length; k++)
+    {
+      if (chartData.burg[k] > 0) {
+        let b = chartData.burg[k];
+  
+        var x1 = chartData.points[k][0];
+        y1+=add;
+        if (y1 >= yOffset) { y1 = add; }
+        var d1 = 0;
+  
+        // burg name
+        g.append("text").attr("id", "ep" + b).attr("class", "epburglabel").attr("x", x1).attr("y", y1).attr("text-anchor", "middle");
+        document.getElementById("ep" + b).innerHTML = pack.burgs[b].name;
+  
+        // arrow from burg name to graph line
+        g.append("path").attr("id", "eparrow" + b).attr("d", "M" + x1.toString() + "," + (y1+3).toString() + "L" + x1.toString() + "," + parseInt(chartData.points[k][1]-3).toString()).attr("stroke", "darkgray").attr("fill", "lightgray").attr("stroke-width", "1").attr("marker-end", "url(#arrowhead)");
+      }
+    }
+  }
 }
 
diff --git a/modules/ui/rivers-editor.js b/modules/ui/rivers-editor.js
index 85551976..cf25f04f 100644
--- a/modules/ui/rivers-editor.js
+++ b/modules/ui/rivers-editor.js
@@ -55,7 +55,7 @@ function editRiver(id) {
 
   function drawControlPoints(node) {
     const l = node.getTotalLength() / 2;
-    const segments = Math.ceil(l / 8);
+    const segments = Math.ceil(l / 4);
     const increment = rn(l / segments * 1e5);
     for (let i=increment*segments, c=i; i >= 0; i -= increment, c += increment) {
       const p1 = node.getPointAtLength(i / 1e5);
@@ -183,7 +183,7 @@ function editRiver(id) {
 
   function showElevationProfile() {
     modules.elevation = true;
-    showEPForRiver(node);
+    showEPForRiver(elSelected.node());
   }
 
   function showRiverWidth() {
diff --git a/modules/ui/routes-editor.js b/modules/ui/routes-editor.js
index 98974f29..b34732e2 100644
--- a/modules/ui/routes-editor.js
+++ b/modules/ui/routes-editor.js
@@ -47,7 +47,7 @@ function editRoute(onClick) {
 
   function drawControlPoints(node) {
     const l = node.getTotalLength();
-    const increment = l / Math.ceil(l / 8);
+    const increment = l / Math.ceil(l / 4);
     for (let i=0; i <= l; i += increment) {addControlPoint(node.getPointAtLength(i));}
     routeLength.innerHTML = rn(l * distanceScaleInput.value) + " " + distanceUnitInput.value;
   }
@@ -110,7 +110,7 @@ function editRoute(onClick) {
 
   function showElevationProfile() {
     modules.elevation = true;
-    showEPForRoute(node);
+    showEPForRoute(elSelected.node());
   }
 
   function showGroupSection() {

From bb0e57158772c0a4856fcbf544aa5029f69d2be4 Mon Sep 17 00:00:00 2001
From: Evolvedexperiment <evolvedexperiment@gmail.com>
Date: Sat, 16 May 2020 12:12:15 +0000
Subject: [PATCH 02/12] Changed elevation profile to use heightmap colours

---
 modules/ui/elevation-profile.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/modules/ui/elevation-profile.js b/modules/ui/elevation-profile.js
index 1d05db06..9e090a76 100644
--- a/modules/ui/elevation-profile.js
+++ b/modules/ui/elevation-profile.js
@@ -49,14 +49,14 @@ function showElevationProfile(data, routeLen, isRiver) {
   }
 
   const chartWidth = window.innerWidth-280;
-  const chartHeight = 200; // height of our land/sea profile, excluding the biomes data below
+  const chartHeight = 300; // height of our land/sea profile, excluding the biomes data below
 
   const xOffset = 160;
-  const yOffset = 140;  // this is our drawing starting point from top-left (y = 0) of SVG
+  const yOffset = 70;  // this is our drawing starting point from top-left (y = 0) of SVG
 
   const biomesHeight = 40;
 
-  let chartData = {biome:[], burg:[], cell:[], height:[], mi:1000000, ma:0, points:[] }
+  let chartData = {biome:[], burg:[], cell:[], height:[], mi:1000000, ma:0, mih: 100, mah: 0, points:[] }
   for (let i=0, prevB=0, prevH=-1; i<data.length; i++) {
     let cell = data[i];
 
@@ -83,6 +83,8 @@ function showElevationProfile(data, routeLen, isRiver) {
     chartData.cell[i] = cell;
     let sh = getHeight(h);
     chartData.height[i] = parseInt(sh.substr(0, sh.indexOf(' ')));
+    chartData.mih = Math.min(chartData.mih, h);
+    chartData.mah = Math.max(chartData.mah, h);
     chartData.mi = Math.min(chartData.mi, chartData.height[i]);
     chartData.ma = Math.max(chartData.ma, chartData.height[i]);
   }
@@ -107,9 +109,12 @@ function showElevationProfile(data, routeLen, isRiver) {
     // arrow-head definition
     chart.append("defs").append("marker").attr("id", "arrowhead").attr("orient", "auto").attr("markerWidth", "2").attr("markerHeight", "4").attr("refX", "0.1").attr("refY", "2").append("path").attr("d", "M0,0 V4 L2,2 Z").attr("fill", "darkgray");
   
+    let colors = getColorScheme();
     var landdef = chart.select("defs").append("linearGradient").attr("id", "landdef").attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%");
-    landdef.append("stop").attr("offset", "0%").attr("style", "stop-color:rgb(64,255,128);stop-opacity:1");
-    landdef.append("stop").attr("offset", "100%").attr("style", "stop-color:rgb(0,192,64);stop-opacity:1");
+    for (let k=chartData.mah; k >= chartData.mih; k--) {
+      let perc = 1 - (k - chartData.mih)  / (chartData.mah - chartData.mih);
+      landdef.append("stop").attr("offset", perc*100 + "%").attr("style", "stop-color:" + getColor(k, colors) + ";stop-opacity:1");
+    }
   
     // land
     let curve = d3.line().curve(d3.curveBasis); // see https://github.com/d3/d3-shape#curves

From bdf5c048a8bdffc60d6b920a23274e4241619f3c Mon Sep 17 00:00:00 2001
From: Evolvedexperiment <evolvedexperiment@gmail.com>
Date: Sat, 16 May 2020 16:52:28 +0000
Subject: [PATCH 03/12] Fix for FMG/MFCG sea direction integration

---
 modules/ui/burg-editor.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/modules/ui/burg-editor.js b/modules/ui/burg-editor.js
index f58dee11..da68ad20 100644
--- a/modules/ui/burg-editor.js
+++ b/modules/ui/burg-editor.js
@@ -318,7 +318,17 @@ function editBurg(id) {
         if (deg < 0) deg += 360;
         let norm = rn(normalize(deg, 0, 360) * 8) / 4;
         if (norm === 2) norm = 0;
-        return "sea="+norm;
+        switch(norm) {
+          case 0 : return "&southSea=1";
+          case 0.25 : return "&southSea=1&westSea=1";
+          case 0.50 : return "&westSea=1";
+          case 0.75 : return "&westSea=1&northSea=1";
+          case 1 : return "&northSea=1";
+          case 1.25 : return "&northSea=1&eastSea=1";
+          case 1.5 : return "&eastSea=1";
+          case 1.75 : return "&eastSea=1&southSea=1";
+        }
+        return "&sea="+norm;
         // debug.selectAll("*").remove();
         // pack.burgs.filter(b => b.port).forEach(b => {
         //   var p1 = pack.cells.p[b.cell];
@@ -450,4 +460,4 @@ function editBurg(id) {
     unselect();
   }
 
-}
\ No newline at end of file
+}

From 63b5744dccdeed82f97e7d45ebf056fff47d3160 Mon Sep 17 00:00:00 2001
From: Evolvedexperiment <evolvedexperiment@gmail.com>
Date: Sun, 17 May 2020 15:35:17 +0000
Subject: [PATCH 04/12] Fixes for elevation profile and CSV download

---
 index.css                       |   4 ++
 index.html                      |  30 +++++-----
 modules/ui/elevation-profile.js | 101 +++++++++++++++++++++++++++-----
 3 files changed, 106 insertions(+), 29 deletions(-)

diff --git a/index.css b/index.css
index ac5669c5..781728c7 100644
--- a/index.css
+++ b/index.css
@@ -2111,6 +2111,10 @@ svg.button {
   stroke-width: 0;
 }
 
+.centered {
+	text-align: center;
+}
+
 #debug {
 	font-size: 1px;
 	opacity: .8;
diff --git a/index.html b/index.html
index 4a64ad88..abfdb0d8 100644
--- a/index.html
+++ b/index.html
@@ -2134,23 +2134,23 @@
     </div>
 
     <div id="elevationProfile" class="dialog" style="display: none" width="100%">
-      <div data-tip="Set height scale">
-        <div>Height scale:</div>
-        <div><input id="epScaleRange" type="range" min=1 max=100 value=50></div>
-
-        <div>Curve:</div>
-        <div>
-          <select id="epCurve">
-            <option>Linear</option>
-            <option selected>Basis spline</option>
-            <option>Bundle</option>
-            <option>Cubic Catmull-Rom</option>
-            <option>Monotone X</option>
-            <option>Natural</option>
-          </select>
+      <div id="elevationGraph" data-tip="Elevation profile"></div>
+      <div class="centered">
+        <div id="epControls">
+          <span data-tip="Set height scale">Height scale: <input id="epScaleRange" type="range" min=1 max=100 value=50></span>
+          <span data-tip="Set curve profile">Curve:
+            <select id="epCurve">
+              <option>Linear</option>
+                <option selected>Basis spline</option>
+              <option>Bundle</option>
+              <option>Cubic Catmull-Rom</option>
+              <option>Monotone X</option>
+              <option>Natural</option>
+            </select>
+          </span>
+          <span><button id="epSave" data-tip="Download the chart data as a CSV file" class="icon-download"></button></span>
         </div>
       </div>
-      <div id="elevationGraph" data-tip="Elevation profile"></div>
     </div>
 
     <div id="routeEditor" class="dialog" style="display: none">
diff --git a/modules/ui/elevation-profile.js b/modules/ui/elevation-profile.js
index 9e090a76..209b6ba8 100644
--- a/modules/ui/elevation-profile.js
+++ b/modules/ui/elevation-profile.js
@@ -22,15 +22,12 @@ function showEPForRiver(node) {
   showElevationProfile(points, riverLen, true);
 }
 
-function closeElevationProfile() {
-  modules.elevation = false;
-}
-
 function showElevationProfile(data, routeLen, isRiver) {
   // data is an array of cell indexes, routeLen is the distance (in actual metres/feet), isRiver should be true for rivers, false otherwise
 
   document.getElementById("epScaleRange").addEventListener("change", draw);
   document.getElementById("epCurve").addEventListener("change", draw);
+  document.getElementById("epSave").addEventListener("click", downloadCSV);
 
   $("#elevationProfile").dialog({
     title: "Elevation profile", resizable: false, width: window.width,
@@ -48,14 +45,17 @@ function showElevationProfile(data, routeLen, isRiver) {
     }
   }
 
-  const chartWidth = window.innerWidth-280;
+  const chartWidth = window.innerWidth-180;
   const chartHeight = 300; // height of our land/sea profile, excluding the biomes data below
 
-  const xOffset = 160;
-  const yOffset = 70;  // this is our drawing starting point from top-left (y = 0) of SVG
+  const xOffset = 80;
+  const yOffset = 20;  // this is our drawing starting point from top-left (y = 0) of SVG
 
   const biomesHeight = 40;
 
+  let lastBurgIndex = 0;
+  let lastBurgCell = 0;
+  let burgCount = 0;
   let chartData = {biome:[], burg:[], cell:[], height:[], mi:1000000, ma:0, mih: 100, mah: 0, points:[] }
   for (let i=0, prevB=0, prevH=-1; i<data.length; i++) {
     let cell = data[i];
@@ -77,6 +77,7 @@ function showElevationProfile(data, routeLen, isRiver) {
     let b = pack.cells.burg[cell];
     if (b == prevB) b = 0;
     else prevB = b;
+    if (b) { burgCount++; lastBurgIndex = i; lastBurgCell = cell; }
 
     chartData.biome[i] = pack.cells.biome[cell];
     chartData.burg[i] = b;
@@ -88,8 +89,59 @@ function showElevationProfile(data, routeLen, isRiver) {
     chartData.mi = Math.min(chartData.mi, chartData.height[i]);
     chartData.ma = Math.max(chartData.ma, chartData.height[i]);
   }
+
+  if (lastBurgIndex != 0 && lastBurgCell == chartData.cell[data.length-1] && lastBurgIndex < data.length) {
+    chartData.burg[data.length-1] = chartData.burg[lastBurgIndex];
+    chartData.burg[lastBurgIndex] = 0;
+  }
+
   draw();
 
+  function downloadCSV() {
+    let data = "Point,X,Y,Cell,Height,Height value,Population,Burg,Burg population,Biome,Biome color,Culture,Culture color,Religion,Religion color,Province,Province color,State,State color\n"; // headers
+
+    for (let k=0; k<chartData.points.length; k++) {
+      let cell = chartData.cell[k];
+      let burg = pack.cells.burg[cell];
+      let biome = pack.cells.biome[cell];
+      let culture = pack.cells.culture[cell];
+      let religion = pack.cells.religion[cell];
+      let province = pack.cells.province[cell];
+      let state = pack.cells.state[cell];
+      let pop = pack.cells.pop[cell];
+      let h = pack.cells.h[cell];
+
+      data += k+1 + ",";
+      data += chartData.points[k][0] + ",";
+      data += chartData.points[k][1] + ",";
+      data += cell + ",";
+      data += getHeight(h) + ",";
+      data += h + ",";
+      data += rn(pop * populationRate.value) + ",";
+      if (burg) {
+        data += pack.burgs[burg].name + ",";
+        data += (pack.burgs[burg].population * populationRate.value * urbanization.value) + ",";
+      } else {
+        data += ",0,";
+      }
+      data += biomesData.name[biome] + ",";
+      data += biomesData.color[biome] + ",";
+      data += pack.cultures[culture].name + ",";
+      data += pack.cultures[culture].color + ",";
+      data += pack.religions[religion].name + ",";
+      data += pack.religions[religion].color + ",";
+      data += pack.provinces[province].name + ",";
+      data += pack.provinces[province].color + ",";
+      data += pack.states[state].name + ",";
+      data += pack.states[state].color + ",";
+
+      data = data + "\n";
+    }
+
+    const name = getFileName("elevation profile") + ".csv";
+    downloadFile(data, name);
+  }
+
   function draw() {
     chartData.points = []; 
     let heightScale = 100 / parseInt(epScaleRange.value);
@@ -97,7 +149,7 @@ function showElevationProfile(data, routeLen, isRiver) {
     heightScale *= 0.90; // curves cause the heights to go slightly higher, adjust here
 
     const xscale = d3.scaleLinear().domain([0, data.length]).range([0, chartWidth]);
-    const yscale = d3.scaleLinear().domain([0, (chartData.ma-chartData.mi) * heightScale]).range([chartHeight, 0]);
+    const yscale = d3.scaleLinear().domain([0, chartData.ma * heightScale]).range([chartHeight, 0]);
   
     for (let i=0; i<data.length; i++) {
       chartData.points.push([xscale(i) + xOffset, yscale(chartData.height[i]) + yOffset]);
@@ -105,15 +157,21 @@ function showElevationProfile(data, routeLen, isRiver) {
   
     document.getElementById("elevationGraph").innerHTML = "";
 
-    const chart = d3.select("#elevationGraph").append("svg").attr("width", chartWidth+200).attr("height", chartHeight+yOffset+biomesHeight).attr("id", "elevationSVG").attr("class", "epbackground");
+    const chart = d3.select("#elevationGraph").append("svg").attr("width", chartWidth+120).attr("height", chartHeight+yOffset+biomesHeight).attr("id", "elevationSVG").attr("class", "epbackground");
     // arrow-head definition
     chart.append("defs").append("marker").attr("id", "arrowhead").attr("orient", "auto").attr("markerWidth", "2").attr("markerHeight", "4").attr("refX", "0.1").attr("refY", "2").append("path").attr("d", "M0,0 V4 L2,2 Z").attr("fill", "darkgray");
   
     let colors = getColorScheme();
     var landdef = chart.select("defs").append("linearGradient").attr("id", "landdef").attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%");
-    for (let k=chartData.mah; k >= chartData.mih; k--) {
-      let perc = 1 - (k - chartData.mih)  / (chartData.mah - chartData.mih);
-      landdef.append("stop").attr("offset", perc*100 + "%").attr("style", "stop-color:" + getColor(k, colors) + ";stop-opacity:1");
+
+    if (chartData.mah == chartData.mih) {
+      landdef.append("stop").attr("offset", "0%").attr("style", "stop-color:" + getColor(chartData.mih, colors) + ";stop-opacity:1");
+      landdef.append("stop").attr("offset", "100%").attr("style", "stop-color:" + getColor(chartData.mah, colors) + ";stop-opacity:1");
+    } else {
+      for (let k=chartData.mah; k >= chartData.mih; k--) {
+        let perc = 1 - (k - chartData.mih)  / (chartData.mah - chartData.mih);
+        landdef.append("stop").attr("offset", perc*100 + "%").attr("style", "stop-color:" + getColor(k, colors) + ";stop-opacity:1");
+      }
     }
   
     // land
@@ -145,7 +203,7 @@ function showElevationProfile(data, routeLen, isRiver) {
       const x = chartData.points[k][0];
       const y = yOffset + chartHeight;
       const c = biomesData.color[chartData.biome[k]];
-      const dataTip = biomesData.name[chartData.biome[k]]+" (" + chartData.height[k] + " " + hu + ")";
+      const dataTip = biomesData.name[chartData.biome[k]]+" (" + chartData.height[k] + " " + hu + ", cell " + chartData.cell[k] + ")";
   
       g.append("rect").attr("stroke", c).attr("fill", c).attr("x", x).attr("y", y).attr("width", xscale(1)).attr("height", 15).attr("data-tip", dataTip);
     }
@@ -191,12 +249,17 @@ function showElevationProfile(data, routeLen, isRiver) {
     g = chart.append("g").attr("id", "epburglabels");
     var y1 = 0;
     var add = 15;
+
+    let xwidth = chartData.points[1][0] - chartData.points[0][0];
     for (let k=0; k<chartData.points.length; k++)
     {
       if (chartData.burg[k] > 0) {
         let b = chartData.burg[k];
   
-        var x1 = chartData.points[k][0];
+        let x1 = chartData.points[k][0]; // left side of graph by default
+        if (k > 0) x1 += xwidth/2; // center it if not first
+        if (k == chartData.points.length-1) 
+          x1 = chartWidth + xOffset;  // right part of graph
         y1+=add;
         if (y1 >= yOffset) { y1 = add; }
         var d1 = 0;
@@ -210,5 +273,15 @@ function showElevationProfile(data, routeLen, isRiver) {
       }
     }
   }
+
+  function closeElevationProfile() {
+    document.getElementById("epScaleRange").removeEventListener("change", draw);
+    document.getElementById("epCurve").removeEventListener("change", draw);
+    document.getElementById("epSave").removeEventListener("click", downloadCSV);
+
+    document.getElementById("elevationGraph").innerHTML = "";
+
+    modules.elevation = false;
+  }
 }
 

From 7410c9e0b48621efd4841a51a59e2e59b020798b Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Sun, 17 May 2020 23:59:08 +0300
Subject: [PATCH 05/12] v1.4.16

---
 index.css                      |   4 +-
 index.html                     |  21 ++---
 modules/ui/heightmap-editor.js | 150 ++++++++++++++++++++-------------
 modules/ui/routes-editor.js    |   8 +-
 4 files changed, 106 insertions(+), 77 deletions(-)

diff --git a/index.css b/index.css
index ac5669c5..b49a0558 100644
--- a/index.css
+++ b/index.css
@@ -1028,10 +1028,10 @@ div#regimentSelectorBody > div > div {
 }
 
 .color-div {
-	width: 2.5em;
+	width: 3em;
 	height: 1em;
 	display: inline-block;
-	margin: .1em .2em;
+	margin: 0 .16em;
 	border: 1px #c5c5c5 groove;
 	cursor: pointer;
 }
diff --git a/index.html b/index.html
index 4a64ad88..ad3f4e32 100644
--- a/index.html
+++ b/index.html
@@ -1883,8 +1883,8 @@
           <button data-tip="Display brushes panel" id="paintBrushes">Paint Brushes</button>
           <button data-tip="Open template editor" id="applyTemplate" style="display: none">Template Editor</button>
           <button data-tip="Open Image Converter" id="convertImage" style="display: none">Image Converter</button>
-          <button data-tip="Render heightmap data as a small monochrome image" id="heightmapPreview">Heightmap Preview</button>
-          <button data-tip="Preview heightmap in 3D scene" id="heightmap3DView">3D</button>
+          <button data-tip="Render heightmap data as a small monochrome image" id="heightmapPreview">Preview</button>
+          <button data-tip="Preview heightmap in 3D scene" id="heightmap3DView">3D scene</button>
         </div>
 
         <div id="customizeOptions">
@@ -2674,17 +2674,18 @@
 
       <div id="convertImageButtons">
         <button id="convertImageLoad" data-tip="Load image to convert" class="icon-upload"></button>
-        <button id="convertAutoLum" data-tip="Auto-assign colors based on liminosity (good to monochrome images)" class="icon-adjust"></button>
-        <button id="convertAutoHue" data-tip="Auto-assign colors based on hue (good to colored images)" class="icon-brush"></button>
+        <button id="convertAutoLum" data-tip="Auto-assign colors based on liminosity (good for monochrome images)" class="icon-adjust"></button>
+        <button id="convertAutoHue" data-tip="Auto-assign colors based on hue (good for colored images)" class="icon-paint-roller"></button>
+        <button id="convertAutoFMG" data-tip="Auto-assign colors using generator scheme (for exported colored heightmaps)" class="icon-layer-group"></button>
         <button id="convertColorsButton" data-tip="Set maximum number of colors" class="icon-signal"></button>
-        <input id="convertColors" value="128" style="display: none"/>
+        <input id="convertColors" value="100" style="display: none"/>
         <button id="convertComplete" data-tip="Complete the conversion. All unassigned colors will be considered as ocean" class="icon-check"></button>
         <button id="convertCancel" data-tip="Cancel the conversion. Previous heightmap will be restored" class="icon-cancel"></button>
       </div>
 
-      <div data-tip="Set opacity of the loaded image" style="padding-top: 4px"><i>Overlay opacity:</i><br>
-        <input id="convertOverlay" type="range" min=0 max=1 step=.01 value=0 style="width: 11.5em">
-        <input id="convertOverlayNumber" type="number" min=0 max=1 step=.01 value=0 style="width: 3.5em">
+      <div data-tip="Set opacity of the loaded image" style="padding-top: .4em"><i>Overlay opacity:</i><br>
+        <input id="convertOverlay" type="range" min=0 max=1 step=.01 value=0 style="width: 12.6em">
+        <input id="convertOverlayNumber" type="number" min=0 max=1 step=.01 value=0 style="width: 4.2em">
       </div>
 
       <div data-tip="Select a color below and assign a height value for it" id="colorsSelect" style="display: none">
@@ -2695,11 +2696,11 @@
       </div>
 
       <div data-tip="Select a color to re-assign the height value" id="colorsAssigned" style="display: none">
-        <i>Assigned colors: </i><br>
+        <i>Assigned colors (<span id="colorsAssignedNumber"></span>):</i><br>
       </div>
 
       <div data-tip="Select a color to assign a height value" id="colorsUnassigned" style="display: none">
-        <i>Unassigned colors: </i><br>
+        <i>Unassigned colors (<span id="colorsUnassignedNumber"></span>):</i><br>
       </div>
 
     </div>
diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js
index 87278555..f574f84e 100644
--- a/modules/ui/heightmap-editor.js
+++ b/modules/ui/heightmap-editor.js
@@ -3,13 +3,13 @@
 
 function editHeightmap() {
   void function selectEditMode() {
-    alertMessage.innerHTML = `<span>Heightmap is a core element on which all other data (rivers, burgs, states etc) is based.
-      So the best edit approach is to <i>erase</i> the secondary data and let the system automatically regenerate it on edit completion.</span> 
-      <p>You can also <i>keep</i> all the data, 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 data will be restored as much as possible, but the coastline change can cause unexpected fluctuations and errors.</p>
-      <p>Check out ${link("https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Heightmap-customization", "wiki")} for guidance.</p>
-      <p>Please <span class="pseudoLink" onclick=saveMap(); editHeightmap();>save the map</span> before editing the heightmap!</p>`;
+    alertMessage.innerHTML = `Heightmap is a core element on which all other data (rivers, burgs, states etc) is based.
+      So the best edit approach is to <i>erase</i> the secondary data and let the system automatically regenerate it on edit completion.
+      <p><i>Erase</i> mode also allows you Convert an Image into a heightmap or use Template Editor.</p>
+      <p>You can <i>keep</i> the data, but you won't be able to change the coastline.</p>
+      <p>Try <i>risk</i> mode to change the coastline and keep the data. The data will be restored as much as possible, but it can cause unpredictable errors.</p>
+      <p>Please <span class="pseudoLink" onclick=saveMap(); editHeightmap();>save the map</span> before editing the heightmap!</p>
+      <p>Check out ${link("https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Heightmap-customization", "wiki")} for guidance.</p>`;
 
     $("#alert").dialog({resizable: false, title: "Edit Heightmap", width: "28em",
       buttons: {
@@ -61,9 +61,9 @@ function editHeightmap() {
       changeOnlyLand.checked = false;
     }
 
-    // hide convert and template buttons for the Keep mode
-    applyTemplate.style.display = type === "keep" ? "none" : "inline-block";
-    convertImage.style.display = type === "keep" ? "none" : "inline-block";
+    // show convert and template buttons for Erase mode only
+    applyTemplate.style.display = type === "erase" ? "inline-block" : "none";
+    convertImage.style.display = type === "erase" ? "inline-block" : "none";
 
     // hide erosion checkbox if mode is Keep
     changeHeightsBox.style.display = type === "keep" ? "none" : "inline-block";
@@ -963,10 +963,11 @@ function editHeightmap() {
 
   function openImageConverter() {
     if ($("#imageConverter").is(":visible")) return;
+    imageToLoad.click();
     closeDialogs("#imageConverter");
 
     $("#imageConverter").dialog({
-      title: "Image Converter", maxHeight: svgHeight*.75, minHeight: "auto", width: "19.5em", resizable: false,
+      title: "Image Converter", maxHeight: svgHeight*.8, minHeight: "auto", width: "20em",
       position: {my: "right top", at: "right-10 top+10", of: "svg"},
       beforeClose: closeImageConverter
     });
@@ -978,15 +979,9 @@ function editHeightmap() {
     canvas.height = graphHeight;
     document.body.insertBefore(canvas, optionsContainer);
 
-    const img = new Image;
-    img.id = "image";
-    img.style.display = "none";
-    document.body.appendChild(img);
-
     setOverlayOpacity(0);
-
-    document.getElementById("convertImageLoad").classList.add("glow"); // add glow effect
-    tip('Image Converter is opened. Upload the image and assign height value for each of the colors', true, "warn"); // main tip
+    clearMainTip();
+    tip('Image Converter is opened. Upload image and assign height value for each color', false, "warn"); // main tip
 
     // remove all heights
     grid.cells.h = new Uint8Array(grid.cells.i.length);
@@ -1001,7 +996,7 @@ function editHeightmap() {
       d3.select("#imageConverterPalette").selectAll("div").data(d3.range(101))
         .enter().append("div").attr("data-color", i => i)
         .style("background-color", i => color(1-(i < 20 ? i-5 : i) / 100))
-        .style("width", i => i < 20 || i > 70 ? ".2em" : ".1em")
+        .style("width", i => i < 40 || i > 68 ? ".2em" : ".1em")
         .on("touchmove mousemove", showPalleteHeight).on("click", assignHeight);
     }()
 
@@ -1010,6 +1005,7 @@ function editHeightmap() {
     document.getElementById("imageToLoad").addEventListener("change", loadImage);
     document.getElementById("convertAutoLum").addEventListener("click", () => autoAssing("lum"));
     document.getElementById("convertAutoHue").addEventListener("click", () => autoAssing("hue"));
+    document.getElementById("convertAutoFMG").addEventListener("click", () => autoAssing("scheme"));
     document.getElementById("convertColorsButton").addEventListener("click", setConvertColorsNumber);
     document.getElementById("convertComplete").addEventListener("click", applyConversion);
     document.getElementById("convertCancel").addEventListener("click", cancelConversion);
@@ -1030,12 +1026,12 @@ function editHeightmap() {
       this.value = ""; // reset input value to get triggered if the file is re-uploaded
       const reader = new FileReader();
 
+      const img = new Image;
       img.onload = function() {
         const ctx = document.getElementById("canvas").getContext("2d");
         ctx.drawImage(img, 0, 0, graphWidth, graphHeight);
         heightsFromImage(+convertColors.value);
         resetZoom();
-        convertImageLoad.classList.remove("glow");
       };
 
       reader.onloadend = () => img.src = reader.result;
@@ -1043,37 +1039,35 @@ function editHeightmap() {
     }
 
     function heightsFromImage(count) {
-      const ctx = document.getElementById("canvas").getContext("2d");
+      const sourceImage = document.getElementById("canvas");
+      const sampleCanvas = document.createElement("canvas");
+      sampleCanvas.width = grid.cellsX;
+      sampleCanvas.height = grid.cellsY;
+      sampleCanvas.getContext('2d').drawImage(sourceImage, 0, 0, grid.cellsX, grid.cellsY);
+
       const q = new RgbQuant({colors:count});
-      q.sample(ctx);
-      const data = q.reduce(ctx);
+      q.sample(sampleCanvas);
+      const data = q.reduce(sampleCanvas);
+      const pallete = q.palette(true);
 
       viewbox.select("#heights").selectAll("*").remove();
       d3.select("#imageConverter").selectAll("div.color-div").remove();
       colorsSelect.style.display = "block";
       colorsUnassigned.style.display = "block";
       colorsAssigned.style.display = "none";
-
-      let usedColors = new Set();
-      let gridColors = grid.points.map(p => {
-        const x = Math.floor(p[0]-.01), y = Math.floor(p[1]-.01);
-        const i = (x + y * graphWidth) * 4;
-        const r = data[i], g = data[i+1], b = data[i+2];
-        usedColors.add(`rgb(${r},${g},${b})`);
-        return [r, g, b];
-      });
+      sampleCanvas.remove(); // no need to keep
 
       viewbox.select("#heights").selectAll("polygon").data(grid.cells.i).join("polygon")
-        .attr("points", d => getGridPolygon(d))
-        .attr("id", d => "cell"+d).attr("fill", d => `rgb(${gridColors[d].join(",")})`)
+        .attr("points", d => getGridPolygon(d)).attr("id", d => "cell"+d)
+        .attr("fill", d => `rgb(${data[d*4]}, ${data[d*4+1]}, ${data[d*4+2]})`)
         .on("click", mapClicked);
 
-      const unassigned = [...usedColors].sort((a, b) => d3.lab(a).l - d3.lab(b).l);
-      d3.select("#colorsUnassigned").selectAll("div").data(unassigned).enter().append("div")
+      const colors = pallete.map(p => `rgb(${p[0]}, ${p[1]}, ${p[2]})`);
+      d3.select("#colorsUnassigned").selectAll("div").data(colors).enter().append("div")
         .attr("data-color", i => i).style("background-color", i => i)
         .attr("class", "color-div").on("click", colorClicked);
 
-      convertColors.value = unassigned.length;
+      document.getElementById("colorsUnassignedNumber").innerHTML = colors.length;
     }
 
     function mapClicked() {
@@ -1123,34 +1117,60 @@ function editHeightmap() {
       if (selectedColor.parentNode.id === "colorsUnassigned") {
         colorsAssigned.appendChild(selectedColor);
         colorsAssigned.style.display = "block";
+
+        document.getElementById("colorsUnassignedNumber").innerHTML = colorsUnassigned.childElementCount - 2;
+        document.getElementById("colorsAssignedNumber").innerHTML = colorsAssigned.childElementCount - 2;
       }
 
     }
 
     // auto assign color based on luminosity or hue
     function autoAssing(type) {
-      const unassigned = colorsUnassigned.querySelectorAll("div");
-      if (!unassigned.length) {tip("No unassigned colors. Please load an image and click the button again", false, "error"); return;}
+      let unassigned = colorsUnassigned.querySelectorAll("div");
+      if (!unassigned.length) {
+        heightsFromImage(+convertColors.value);
+        unassigned = colorsUnassigned.querySelectorAll("div");
+        if (!unassigned.length) {
+          tip("No unassigned colors. Please load an image and click the button again", false, "error"); 
+          return;
+        }
+      }
 
-      const assinged = []; // assigned heights
+      const getHeightByHue = function(color) {
+        let hue = d3.hsl(color).h;
+        if (hue > 300) hue -= 360;
+        if (hue > 170) return Math.abs(hue-250) / 3 |0; // water
+        return Math.abs(hue-250+20) / 3 |0; // land
+      }
+
+      const getHeightByLum = function(color) {
+        let lum = d3.lab(color).l;
+        if (lum < 13) return lum / 13 * 20 |0; // water
+        return lum|0; // land
+      }
+
+      const scheme = d3.range(101).map(i => getColor(i, color()));
+      const hues = scheme.map(rgb => d3.hsl(rgb).h|0);
+      const getHeightByScheme = function(color) {
+        let height = scheme.indexOf(color);
+        if (height !== -1) return height; // exact match
+        const hue = d3.hsl(color).h;
+        const closest = hues.reduce((prev, curr) => (Math.abs(curr - hue) < Math.abs(prev - hue) ? curr : prev));
+        return hues.indexOf(closest);
+      }
+
+      const assinged = []; // store assigned heights
       unassigned.forEach(el => {
-        const colorFrom = el.dataset.color;
-        const lab = d3.lab(colorFrom);
-        const normalized = type === "hue" ? rn(normalize(lab.b + lab.a / 2, -50, 200), 2) : rn(normalize(lab.l, -15, 100), 2);
-        let heightTo = rn(normalized * 100);
-        if (assinged[heightTo] && heightTo < 100) heightTo += 1; // if height is already added, try increased one
-        if (assinged[heightTo] && heightTo < 100) heightTo += 1; // if height is already added, try increased one
-        if (assinged[heightTo] && heightTo > 3) heightTo -= 3; // if increased one is also added, try decreased one
-        if (assinged[heightTo] && heightTo > 1) heightTo -= 1; // if increased one is also added, try decreased one
+        const clr = el.dataset.color;
+        const height = type === "hue" ? getHeightByHue(clr) : type === "lum" ? getHeightByLum(clr) : getHeightByScheme(clr);
+        const colorTo = color(1 - (height < 20 ? (height-5) / 100 : height / 100));
+        viewbox.select("#heights").selectAll("polygon[fill='" + clr + "']").attr("fill", colorTo).attr("data-height", height);
 
-        const colorTo = color(1 - (heightTo < 20 ? (heightTo-5)/100 : heightTo/100));
-        viewbox.select("#heights").selectAll("polygon[fill='" + colorFrom + "']").attr("fill", colorTo).attr("data-height", heightTo);
-
-        if (assinged[heightTo]) {el.remove(); return;} // if color is already added, remove it
+        if (assinged[height]) {el.remove(); return;} // if color is already added, remove it
         el.style.backgroundColor = el.dataset.color = colorTo;
-        el.dataset.height = heightTo;
+        el.dataset.height = height;
         colorsAssigned.appendChild(el);
-        assinged[heightTo] = true;
+        assinged[height] = true;
       });
 
       // sort assigned colors by height
@@ -1160,10 +1180,11 @@ function editHeightmap() {
 
       colorsAssigned.style.display = "block";
       colorsUnassigned.style.display = "none";
+      document.getElementById("colorsAssignedNumber").innerHTML = colorsAssigned.childElementCount - 2;
     }
 
     function setConvertColorsNumber() {
-      prompt(`Please set maximum number of colors. <br>An actual number is lower and depends on color scheme`,
+      prompt(`Please set maximum number of colors. <br>An actual number is usually lower and depends on color scheme`,
       {default:+convertColors.value, step:1, min:3, max:255}, number => {
         convertColors.value = number;
         heightsFromImage(number);
@@ -1176,6 +1197,11 @@ function editHeightmap() {
     }
 
     function applyConversion() {
+      if (colorsAssigned.childElementCount < 3) {
+        tip("Please do the assignment first", false, "error");
+        return;
+      }
+
       viewbox.select("#heights").selectAll("polygon").each(function() {
         const height = +this.dataset.height || 0;
         const i = +this.id.slice(4);
@@ -1195,9 +1221,7 @@ function editHeightmap() {
 
     function restoreImageConverterState() {
       const canvas = document.getElementById("canvas");
-      if (canvas) canvas.remove(); else return;
-      const img = document.getElementById("image");
-      if (img) img.remove(); else return;
+      if (canvas) canvas.remove();
 
       d3.select("#imageConverter").selectAll("div.color-div").remove();
       colorsAssigned.style.display = "none";
@@ -1206,12 +1230,18 @@ function editHeightmap() {
       viewbox.style("cursor", "default").on(".drag", null);
       tip('Heightmap edit mode is active. Click on "Exit Customization" to finalize the heightmap', true);
       $("#imageConverter").dialog("destroy");
+      openBrushesPanel();
     }
 
     function closeImageConverter(event) {
       event.preventDefault();
       event.stopPropagation();
-      alertMessage.innerHTML = 'Are you sure you want to close the Image Converter? Click "Cancel" to geck back to convertion. Click "Complete" to apply the conversion. Click "Close" to exit conversion mode and restore previous heightmap';
+      alertMessage.innerHTML = `
+        Are you sure you want to close the Image Converter? 
+        Click "Cancel" to geck back to convertion. 
+        Click "Complete" to apply the conversion. 
+        Click "Close" to exit conversion mode and restore previous heightmap`;
+
       $("#alert").dialog({resizable: false, title: "Close Image Converter",
         buttons: {
           Cancel: function() {
diff --git a/modules/ui/routes-editor.js b/modules/ui/routes-editor.js
index b34732e2..78c84f8d 100644
--- a/modules/ui/routes-editor.js
+++ b/modules/ui/routes-editor.js
@@ -101,11 +101,9 @@ function editRoute(onClick) {
 
     elSelected.attr("d", round(lineGen(points)));
     const l = elSelected.node().getTotalLength();
-    routeLength.innerHTML = rn(l * distanceScaleInput.value) + " " + distanceUnitInput.value;    
- 
-    if (modules.elevation) {
-      showEPForRoute(elSelected.node());
-    }
+    routeLength.innerHTML = rn(l * distanceScaleInput.value) + " " + distanceUnitInput.value;
+
+    if (modules.elevation) showEPForRoute(elSelected.node());
   }
 
   function showElevationProfile() {

From 22b4c49e8acd5a8ec625ed24b7227ef1b69a2470 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Mon, 18 May 2020 00:04:01 +0300
Subject: [PATCH 06/12] v1.4.17

---
 index.css  | 6 +-----
 index.html | 2 +-
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/index.css b/index.css
index 30cc3d9e..0fce363c 100644
--- a/index.css
+++ b/index.css
@@ -2103,7 +2103,7 @@ svg.button {
 
 .epgrid line {
   stroke: lightgrey;
-  stroke-opacity: 0.7;
+  stroke-opacity: .7;
   shape-rendering: crispEdges;
 }
 
@@ -2111,10 +2111,6 @@ svg.button {
   stroke-width: 0;
 }
 
-.centered {
-	text-align: center;
-}
-
 #debug {
 	font-size: 1px;
 	opacity: .8;
diff --git a/index.html b/index.html
index 4b698981..02f547f0 100644
--- a/index.html
+++ b/index.html
@@ -2135,7 +2135,7 @@
 
     <div id="elevationProfile" class="dialog" style="display: none" width="100%">
       <div id="elevationGraph" data-tip="Elevation profile"></div>
-      <div class="centered">
+      <div style="text-align: center">
         <div id="epControls">
           <span data-tip="Set height scale">Height scale: <input id="epScaleRange" type="range" min=1 max=100 value=50></span>
           <span data-tip="Set curve profile">Curve:

From b3f83bbabdec5c9957080b87cf657cac37d815ca Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Mon, 18 May 2020 00:50:57 +0300
Subject: [PATCH 07/12] v1.4.18

---
 index.css                   | 2 +-
 index.html                  | 2 +-
 main.js                     | 3 ++-
 modules/ui/states-editor.js | 6 +++---
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/index.css b/index.css
index 0fce363c..5308deed 100644
--- a/index.css
+++ b/index.css
@@ -114,7 +114,7 @@ button, select, a, .pointer {
 	fill-rule: evenodd;
 }
 
-#oceanLayers {
+#oceanLayers, #terrs {
 	fill-rule: evenodd;
 }
 
diff --git a/index.html b/index.html
index 02f547f0..c3efcd13 100644
--- a/index.html
+++ b/index.html
@@ -2870,7 +2870,7 @@
           <option data-form="Union" value="United States">United States</option>
           <option data-form="Wild" value="United Tribes">United Tribes</option>
         </select>
-        <input id="stateNameEditorCustomForm" placeholder="type form name" data-tip="Create custom state form name" style="display: none; width: 11em;">
+        <input id="stateNameEditorCustomForm" placeholder="type form name" data-tip="Enter custom form name" style="display: none; width: 11em;">
         <span id="stateNameEditorAddForm" data-tip="Click to add custom state form name to the list" class="icon-plus pointer"></span>
       </div>
 
diff --git a/main.js b/main.js
index a2b40674..1e44a558 100644
--- a/main.js
+++ b/main.js
@@ -343,7 +343,8 @@ function showWelcomeMessage() {
     <ul>${post}
       <li>Battle simulation</li>
       <li>Ice layer and Ice editor</li>
-      <li>Route Elevation profile</li>
+      <li>Route and River Elevation profile</li>
+      <li>Image Converter enhancement</li>
       <li>Name generator improvement</li>
       <li>Fogging style change</li>
     </ul>
diff --git a/modules/ui/states-editor.js b/modules/ui/states-editor.js
index 2f1d5800..de0da9e9 100644
--- a/modules/ui/states-editor.js
+++ b/modules/ui/states-editor.js
@@ -215,8 +215,7 @@ function editStates() {
   }
 
   function editStateName(state) {
-
-    //Reset input value and close add mode
+    // reset input value and close add mode
     stateNameEditorCustomForm.value = "";
     const addModeActive = stateNameEditorCustomForm.style.display === "inline-block";
     if (addModeActive) {
@@ -244,6 +243,7 @@ function editStates() {
     document.getElementById("stateNameEditorShortCulture").addEventListener("click", regenerateShortNameCuture);
     document.getElementById("stateNameEditorShortRandom").addEventListener("click", regenerateShortNameRandom);
     document.getElementById("stateNameEditorAddForm").addEventListener("click", addCustomForm);
+    document.getElementById("stateNameEditorCustomForm").addEventListener("change", addCustomForm);
     document.getElementById("stateNameEditorFullRegenerate").addEventListener("click", regenerateFullName);
 
     function regenerateShortNameCuture() {
@@ -264,7 +264,7 @@ function editStates() {
       const addModeActive = stateNameEditorCustomForm.style.display === "inline-block";
       stateNameEditorCustomForm.style.display = addModeActive ? "none" : "inline-block";
       stateNameEditorSelectForm.style.display = addModeActive ? "inline-block" : "none";
-      if (addModeActive) applyOption(stateNameEditorSelectForm, value);
+      if (value && addModeActive) applyOption(stateNameEditorSelectForm, value);
       stateNameEditorCustomForm.value = "";
     }
 

From cfe92dc60e33c5f3ccbadfaace761376a9ae52ac Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Mon, 18 May 2020 01:09:37 +0300
Subject: [PATCH 08/12] v1.4.19

---
 modules/ui/tools.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/modules/ui/tools.js b/modules/ui/tools.js
index 20b64977..357163b3 100644
--- a/modules/ui/tools.js
+++ b/modules/ui/tools.js
@@ -158,8 +158,8 @@ function regenerateStates() {
     tip(`Not enought burgs to generate ${regionsInput.value} states. Will generate only ${burgs.length} states`, false, "warn");
   }
 
-  // burg ids sorted by a bit randomized population:
-  const sorted = burgs.map(b => [b.i, b.population * Math.random()]).sort((a, b) => b[1] - a[1]).map(b => b[0]);
+  // burg local ids sorted by a bit randomized population:
+  const sorted = burgs.map((b, i) => [i, b.population * Math.random()]).sort((a, b) => b[1] - a[1]).map(b => b[0]);
   const capitalsTree = d3.quadtree();
 
   // turn all old capitals into towns
@@ -194,8 +194,8 @@ function regenerateStates() {
     if (!i) return {i, name: neutral};
 
     let capital = null, x = 0, y = 0;
-    for (let i=0; i < sorted.length; i++) {
-      capital = burgs[sorted[i]];
+    for (const i of sorted) {
+      capital = burgs[i];
       x = capital.x, y = capital.y;
       if (capitalsTree.find(x, y, spacing) === undefined) break;
       spacing = Math.max(spacing - 1, 1);

From 408578455be032970985ac548777ce4abfcf9a88 Mon Sep 17 00:00:00 2001
From: Evolvedexperiment <evolvedexperiment@gmail.com>
Date: Mon, 18 May 2020 09:21:42 +0000
Subject: [PATCH 09/12] Fix for elevation profile labels

---
 modules/ui/elevation-profile.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/ui/elevation-profile.js b/modules/ui/elevation-profile.js
index 209b6ba8..f816ce07 100644
--- a/modules/ui/elevation-profile.js
+++ b/modules/ui/elevation-profile.js
@@ -49,7 +49,7 @@ function showElevationProfile(data, routeLen, isRiver) {
   const chartHeight = 300; // height of our land/sea profile, excluding the biomes data below
 
   const xOffset = 80;
-  const yOffset = 20;  // this is our drawing starting point from top-left (y = 0) of SVG
+  const yOffset = 80;  // this is our drawing starting point from top-left (y = 0) of SVG
 
   const biomesHeight = 40;
 

From 8618449a2162a9a23cbb979749ed24ab34ea671a Mon Sep 17 00:00:00 2001
From: Daniel Mecke <daniel.mecke@cunningsoft.de>
Date: Tue, 19 May 2020 19:17:34 +0200
Subject: [PATCH 10/12] Added neighboring cells in json export

---
 modules/save-and-load.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/modules/save-and-load.js b/modules/save-and-load.js
index 607e1d7e..57333319 100644
--- a/modules/save-and-load.js
+++ b/modules/save-and-load.js
@@ -351,7 +351,8 @@ function saveGeoJSON_Cells() {
     data += "      \"state\": \""+cells.state[i]+"\",\n";
     data += "      \"province\": \""+cells.province[i]+"\",\n";
     data += "      \"culture\": \""+cells.culture[i]+"\",\n";
-    data += "      \"religion\": \""+cells.religion[i]+"\"\n";
+    data += "      \"religion\": \""+cells.religion[i]+"\",\n";
+    data += "      \"neighbors\": "+cells.c[i]+"\n";
     data +="   }\n},\n";
   });
 

From 94b40ad97afb0e21ac112ea8f2293bebc450551b Mon Sep 17 00:00:00 2001
From: Daniel Mecke <daniel.mecke@cunningsoft.de>
Date: Wed, 20 May 2020 21:28:24 +0200
Subject: [PATCH 11/12] added missing square brackets in json export

---
 modules/save-and-load.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/save-and-load.js b/modules/save-and-load.js
index 57333319..77da271f 100644
--- a/modules/save-and-load.js
+++ b/modules/save-and-load.js
@@ -352,7 +352,7 @@ function saveGeoJSON_Cells() {
     data += "      \"province\": \""+cells.province[i]+"\",\n";
     data += "      \"culture\": \""+cells.culture[i]+"\",\n";
     data += "      \"religion\": \""+cells.religion[i]+"\",\n";
-    data += "      \"neighbors\": "+cells.c[i]+"\n";
+    data += "      \"neighbors\": ["+cells.c[i]+"]\n";
     data +="   }\n},\n";
   });
 

From 5642004a53e6b3e7073318bf7034df2ad0a49d17 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Tue, 26 May 2020 01:33:44 +0300
Subject: [PATCH 12/12] v1.4.20

---
 index.html                    |  4 +-
 modules/military-generator.js |  2 +-
 modules/ui/battle-screen.js   | 81 ++++++++++++++++++++++++++++++++---
 3 files changed, 78 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index c3efcd13..9be8fea0 100644
--- a/index.html
+++ b/index.html
@@ -2508,8 +2508,8 @@
         <button id="battleAddRegiment" data-tip="Add regiment to the battle" class="icon-user-plus"></button>
         <button id="battleRoll" data-tip="Roll dice to update random factor" class="icon-die"></button>
         <button id="battleRun" data-tip="Iterate battle" class="icon-play"></button>
-        <button id="battleApply" data-tip="Apply battle results and close the screen" class="icon-check"></button>
-        <button id="battleCancel" data-tip="Cancel battle results and close the screen" class="icon-cancel"></button>
+        <button id="battleApply" data-tip="End battle: apply current results and close the screen" class="icon-check"></button>
+        <button id="battleCancel" data-tip="Cancel battle: roll back results and close the screen" class="icon-cancel"></button>
       </div>
     </div>
 
diff --git a/modules/military-generator.js b/modules/military-generator.js
index 009b4b0d..f0821400 100644
--- a/modules/military-generator.js
+++ b/modules/military-generator.js
@@ -304,7 +304,7 @@
     const station = base ? `${r.name} is ${r.n ? "based" : "stationed"} in ${base}. ` : "";
 
     const composition = r.a ? Object.keys(r.u).map(t => `— ${t}: ${r.u[t]}`).join("\r\n") : null;
-    const troops = composition ? `\r\n\r\nRegiment composition:\r\n${composition}.` : "";
+    const troops = composition ? `\r\n\r\nRegiment composition in ${options.year} ${options.eraShort}:\r\n${composition}.` : "";
 
     const campaign = s.campaigns ? ra(s.campaigns) : null;
     const year = campaign ? rand(campaign.start, campaign.end) : gauss(options.year-100, 150, 1, options.year-6);
diff --git a/modules/ui/battle-screen.js b/modules/ui/battle-screen.js
index de9882f2..70375f3e 100644
--- a/modules/ui/battle-screen.js
+++ b/modules/ui/battle-screen.js
@@ -11,8 +11,8 @@ class Battle {
     this.y = defender.y;
     this.name = this.getBattleName();
     this.iteration = 0;
-    this.attackers = {regiments:[], distances:[], morale:100};
-    this.defenders = {regiments:[], distances:[], morale:100};
+    this.attackers = {regiments:[], distances:[], morale:100, casualties:0};
+    this.defenders = {regiments:[], distances:[], morale:100, casualties:0};
 
     this.addHeaders();
     this.addRegiment("attackers", attacker);
@@ -260,6 +260,8 @@ class Battle {
 
     this.calculateCasualties("attackers", casualtiesA);
     this.calculateCasualties("defenders", casualtiesD);
+    this.attackers.casualties += casualtiesA;
+    this.defenders.casualties += casualtiesD;
 
     // change morale
     this.attackers.morale = Math.max(this.attackers.morale - casualtiesA * 100, 0);
@@ -326,12 +328,79 @@ class Battle {
   }
 
   applyResults() {
-    this.attackers.regiments.concat(this.defenders.regiments).forEach(r => {
+    const battleName = this.name;
+    const maxCasualties = Math.max(this.attackers.casualties, this.attackers.casualties);
+    const relativeCasualties = this.defenders.casualties / (this.attackers.casualties + this.attackers.casualties);
+    const battleStatus = getBattleStatus(relativeCasualties, maxCasualties);
+    function getBattleStatus(relative, max) {
+      if (isNaN(relative)) return ["standoff", "standoff"]; // if no casualties at all
+      if (max < .05) return ["minor skirmishes", "minor skirmishes"];
+      if (relative > 95) return ["attackers flawless victory", "disorderly retreat of defenders"];
+      if (relative > .7) return ["attackers decisive victory", "defenders disastrous defeat"];
+      if (relative > .6) return ["attackers victory", "defenders defeat"];
+      if (relative > .4) return ["stalemate", "stalemate"];
+      if (relative > .3) return ["attackers defeat", "defenders victory"];
+      if (relative > 0.5) return ["attackers disastrous defeat", "decisive victory of defenders"];
+      if (relative >= 0) return ["attackers disorderly retreat", "flawless victory of defenders"];
+      return ["stalemate", "stalemate"]; // exception
+    }
+
+    this.attackers.regiments.forEach(r => applyResultForSide(r, "attackers"));
+    this.defenders.regiments.forEach(r => applyResultForSide(r, "defenders"));
+
+    function applyResultForSide(r, side) {
+      const id = "regiment" + r.state + "-" + r.i;
+
+      // add result to regiment note
+      const note = notes.find(n => n.id === id);
+      if (note) {
+        const status = side === "attackers" ? battleStatus[0] : battleStatus[1];
+        const losses = r.a ? Math.abs(d3.sum(Object.values(r.casualties))) / r.a : 1;
+        const regStatus =
+          losses === 1 ? "is destroyed" :
+          losses > .8 ? "is almost completely destroyed" :
+          losses > .5 ? "suffered terrible losses" :
+          losses > .3 ? "suffered severe losses" :
+          losses > .2 ? "suffered heavy losses" :
+          losses > .05 ? "suffered significant losses" :
+          losses > 0 ? "suffered unsignificant losses" :
+          "left the battle without loss";
+        const casualties = Object.keys(r.casualties).map(t => r.casualties[t] ? `${Math.abs(r.casualties[t])} ${t}` : null).filter(c => c).join(", ");
+        const casualtiesText = casualties ? " Casualties: " + casualties : "";
+        const legend = `\r\n\r\n${battleName} (${options.year} ${options.eraShort}): ${status}. The regiment ${regStatus}.${casualtiesText}`;
+        note.legend += legend;
+      }
+
       r.u = Object.assign({}, r.survivors);
       r.a = d3.sum(Object.values(r.u)); // reg total
-      armies.select(`g#regiment${r.state}-${r.i} > text`).text(Military.getTotal(r)); // update reg box
-      Military.moveRegiment(r, r.x + rand(30) - 15, r.y + rand(30) - 15);
-    });
+      armies.select(`g#${id} > text`).text(Military.getTotal(r)); // update reg box
+      Military.moveRegiment(r, r.x + rand(20) - 10, r.y + rand(20) - 10);
+    }
+
+    // append battlefield marker
+    void function addMarkerSymbol() {
+      if (svg.select("#defs-markers").select("#marker_battlefield").size()) return;
+      const symbol = svg.select("#defs-markers").append("symbol").attr("id", "marker_battlefield").attr("viewBox", "0 0 30 30");
+      symbol.append("path").attr("d", "M6,19 l9,10 L24,19").attr("fill", "#000000").attr("stroke", "none");
+      symbol.append("circle").attr("cx", 15).attr("cy", 15).attr("r", 10).attr("fill", "#ffffff").attr("stroke", "#000000").attr("stroke-width", 1);
+      symbol.append("text").attr("x", "50%").attr("y", "52%").attr("fill", "#000000").attr("stroke", "#3200ff").attr("stroke-width", 0)
+        .attr("font-size", "12px").attr("dominant-baseline", "central").text("⚔️");
+    }()
+
+    const getSide = (regs, n) => regs.length > 1 ? 
+      `${n ? "regiments" : "forces"} of ${[... new Set(regs.map(r => pack.states[r.state].name))].join(", ")}` :
+      getAdjective(pack.states[regs[0].state].name) + " " + regs[0].name;
+    const getLosses = casualties => Math.min(rn(casualties * 100), 100);
+
+    const legend = `${this.name} took place in ${options.year} ${options.eraShort}. It was fought between ${getSide(this.attackers.regiments, 1)} and ${getSide(this.defenders.regiments, 0)}. The battle ended in ${battleStatus[+P(.7)]}.
+      \r\nAttackers losses: ${getLosses(this.attackers.casualties)}%, defenders losses: ${getLosses(this.defenders.casualties)}%`;
+    const id = getNextId("markerElement");
+    notes.push({id, name:this.name, legend});
+
+    markers.append("use").attr("id", id)
+      .attr("xlink:href", "#marker_battlefield").attr("data-id", "#marker_battlefield")
+      .attr("data-x", this.x).attr("data-y", this.y).attr("x", this.x - 15).attr("y", this.y - 30)
+      .attr("data-size", 1).attr("width", 30).attr("height", 30);
 
     $("#battleScreen").dialog("destroy");
     this.cleanData();