diff --git a/vue/public/index.html b/vue/public/index.html
index b2850f81..69709775 100644
--- a/vue/public/index.html
+++ b/vue/public/index.html
@@ -1298,11 +1298,14 @@
+
+
diff --git a/vue/public/refactor-four.js b/vue/public/refactor-four.js
index 6c86e8e9..bdbdb396 100644
--- a/vue/public/refactor-four.js
+++ b/vue/public/refactor-four.js
@@ -1,6830 +1,3 @@
-function restoreDefaultOptions() {
- // remove ALL saved data from LocalStorage
- localStorage.clear();
- // set defaut values
- mapWidthInput.value = window.innerWidth;
- mapHeightInput.value = window.innerHeight;
- changeMapSize();
- graphSize = sizeInput.value = sizeOutput.value = 1;
- $("#options i[class^='icon-lock']").each(function() {
- this.setAttribute("data-locked", 0);
- this.className = "icon-lock-open";
- if (this.id === "lockNeutralInput" || this.id === "lockSwampinessInput") {
- this.setAttribute("data-locked", 1);
- this.className = "icon-lock";
- }
- });
- neutralInput.value = neutralOutput.value = 200;
- swampinessInput.value = swampinessOutput.value = 10;
- outlineLayersInput.value = "-6,-3,-1";
- transparencyInput.value = transparencyOutput.value = 0;
- changeDialogsTransparency(0);
- pngResolutionInput.value = 5;
- pngResolutionOutput.value = "5x";
- randomizeOptions();
-}
-
-// Heighmap Template: Volcano
-function templateVolcano(mod) {
- addMountain();
- modifyHeights("all", 10, 1);
- addHill(5, 0.35);
- addRange(3);
- addRange(-4);
-}
-
-// Heighmap Template: High Island
- function templateHighIsland(mod) {
- addMountain();
- modifyHeights("all", 10, 1);
- addRange(6);
- addHill(12, 0.25);
- addRange(-3);
- modifyHeights("land", 0, 0.75);
- addPit(1);
- addHill(3, 0.15);
- }
-
-// Heighmap Template: Low Island
- function templateLowIsland(mod) {
- addMountain();
- modifyHeights("all", 10, 1);
- smoothHeights(2);
- addRange(2);
- addHill(4, 0.4);
- addHill(12, 0.2);
- addRange(-8);
- modifyHeights("land", 0, 0.35);
- }
-
- // Heighmap Template: Continents
- function templateContinents(mod) {
- addMountain();
- modifyHeights("all", 10, 1);
- addHill(30, 0.25);
- const count = Math.ceil(Math.random() * 4 + 4);
- addStrait(count);
- addPit(10);
- addRange(-10);
- modifyHeights("land", 0, 0.6);
- smoothHeights(2);
- addRange(3);
- }
-
- // Heighmap Template: Archipelago
- function templateArchipelago(mod) {
- addMountain();
- modifyHeights("all", 10, 1);
- addHill(12, 0.15);
- addRange(8);
- const count = Math.ceil(Math.random() * 2 + 2);
- addStrait(count);
- addRange(-15);
- addPit(10);
- modifyHeights("land", -5, 0.7);
- smoothHeights(3);
- }
-
- // Heighmap Template: Atoll
- function templateAtoll(mod) {
- addMountain();
- modifyHeights("all", 10, 1);
- addHill(2, 0.35);
- addRange(2);
- smoothHeights(1);
- modifyHeights("27-100", 0, 0.1);
- }
-
- // Heighmap Template: Mainland
- function templateMainland(mod) {
- addMountain();
- modifyHeights("all", 10, 1);
- addHill(30, 0.2);
- addRange(10);
- addPit(20);
- addHill(10, 0.15);
- addRange(-10);
- modifyHeights("land", 0, 0.4);
- addRange(10);
- smoothHeights(3);
- }
-
- // Heighmap Template: Peninsulas
- function templatePeninsulas(mod) {
- addMountain();
- modifyHeights("all", 15, 1);
- addHill(30, 0);
- addRange(5);
- addPit(15);
- const count = Math.ceil(Math.random() * 5 + 15);
- addStrait(count);
- }
-
- function addMountain() {
- const x = Math.floor(Math.random() * graphWidth / 3 + graphWidth / 3);
- const y = Math.floor(Math.random() * graphHeight * 0.2 + graphHeight * 0.4);
- const cell = diagram.find(x, y).index;
- const height = Math.random() * 10 + 90; // 90-99
- add(cell, "mountain", height);
- }
-
- // place with shift 0-0.5
- function addHill(count, shift) {
- for (let c = 0; c < count; c++) {
- let limit = 0, cell, height;
- do {
- height = Math.random() * 40 + 10; // 10-50
- const x = Math.floor(Math.random() * graphWidth * (1 - shift * 2) + graphWidth * shift);
- const y = Math.floor(Math.random() * graphHeight * (1 - shift * 2) + graphHeight * shift);
- cell = diagram.find(x, y).index;
- limit++;
- } while (heights[cell] + height > 90 && limit < 100);
- add(cell, "hill", height);
- }
- }
-
- function add(start, type, height) {
- const session = Math.ceil(Math.random() * 1e5);
- let radius;
- let hRadius;
- let mRadius;
- switch (+graphSize) {
- case 1: hRadius = 0.991; mRadius = 0.91; break;
- case 2: hRadius = 0.9967; mRadius = 0.951; break;
- case 3: hRadius = 0.999; mRadius = 0.975; break;
- case 4: hRadius = 0.9994; mRadius = 0.98; break;
- }
- radius = type === "mountain" ? mRadius : hRadius;
- const queue = [start];
- if (type === "mountain") heights[start] = height;
- for (let i=0; i < queue.length && height >= 1; i++) {
- if (type === "mountain") {height = heights[queue[i]] * radius - height / 100;}
- else {height *= radius;}
- cells[queue[i]].neighbors.forEach(function(e) {
- if (cells[e].used === session) return;
- const mod = Math.random() * 0.2 + 0.9; // 0.9-1.1 random factor
- heights[e] += height * mod;
- if (heights[e] > 100) heights[e] = 100;
- cells[e].used = session;
- queue.push(e);
- });
- }
- }
-
- function addRange(mod, height, from, to) {
- const session = Math.ceil(Math.random() * 100000);
- const count = Math.abs(mod);
- let range = [];
- for (let c = 0; c < count; c++) {
- range = [];
- let diff = 0, start = from, end = to;
- if (!start || !end) {
- do {
- const xf = Math.floor(Math.random() * (graphWidth * 0.7)) + graphWidth * 0.15;
- const yf = Math.floor(Math.random() * (graphHeight * 0.6)) + graphHeight * 0.2;
- start = diagram.find(xf, yf).index;
- const xt = Math.floor(Math.random() * (graphWidth * 0.7)) + graphWidth * 0.15;
- const yt = Math.floor(Math.random() * (graphHeight * 0.6)) + graphHeight * 0.2;
- end = diagram.find(xt, yt).index;
- diff = Math.hypot(xt - xf, yt - yf);
- } while (diff < 150 / graphSize || diff > 300 / graphSize)
- }
- if (start && end) {
- for (let l = 0; start != end && l < 10000; l++) {
- let min = 10000;
- cells[start].neighbors.forEach(function(e) {
- diff = Math.hypot(cells[end].data[0] - cells[e].data[0],cells[end].data[1] - cells[e].data[1]);
- if (Math.random() > 0.8) diff = diff / 2;
- if (diff < min) {min = diff, start = e;}
- });
- range.push(start);
- }
- }
- const change = height ? height : Math.random() * 10 + 10;
- range.map(function(r) {
- let rnd = Math.random() * 0.4 + 0.8;
- if (mod > 0) heights[r] += change * rnd;
- else if (heights[r] >= 10) {heights[r] -= change * rnd;}
- cells[r].neighbors.forEach(function(e) {
- if (cells[e].used === session) return;
- cells[e].used = session;
- rnd = Math.random() * 0.4 + 0.8;
- const ch = change / 2 * rnd;
- if (mod > 0) {heights[e] += ch;} else if (heights[e] >= 10) {heights[e] -= ch;}
- if (heights[e] > 100) heights[e] = mod > 0 ? 100 : 5;
- });
- if (heights[r] > 100) heights[r] = mod > 0 ? 100 : 5;
- });
- }
- return range;
- }
-
- function addStrait(width) {
- const session = Math.ceil(Math.random() * 100000);
- const top = Math.floor(Math.random() * graphWidth * 0.35 + graphWidth * 0.3);
- const bottom = Math.floor((graphWidth - top) - (graphWidth * 0.1) + (Math.random() * graphWidth * 0.2));
- let start = diagram.find(top, graphHeight * 0.1).index;
- const end = diagram.find(bottom, graphHeight * 0.9).index;
- let range = [];
- for (let l = 0; start !== end && l < 1000; l++) {
- let min = 10000; // dummy value
- cells[start].neighbors.forEach(function(e) {
- let diff = Math.hypot(cells[end].data[0] - cells[e].data[0], cells[end].data[1] - cells[e].data[1]);
- if (Math.random() > 0.8) {diff = diff / 2}
- if (diff < min) {min = diff; start = e;}
- });
- range.push(start);
- }
- const query = [];
- for (; width > 0; width--) {
- range.map(function(r) {
- cells[r].neighbors.forEach(function(e) {
- if (cells[e].used === session) {return;}
- cells[e].used = session;
- query.push(e);
- heights[e] *= 0.23;
- if (heights[e] > 100 || heights[e] < 5) heights[e] = 5;
- });
- range = query.slice();
- });
- }
- }
-
- function addPit(count, height, cell) {
- const session = Math.ceil(Math.random() * 1e5);
- for (let c = 0; c < count; c++) {
- let change = height ? height + 10 : Math.random() * 10 + 20;
- let start = cell;
- if (!start) {
- const lowlands = $.grep(cells, function(e) {return (heights[e.index] >= 20);});
- if (!lowlands.length) return;
- const rnd = Math.floor(Math.random() * lowlands.length);
- start = lowlands[rnd].index;
- }
- let query = [start],newQuery= [];
- // depress pit center
- heights[start] -= change;
- if (heights[start] < 5 || heights[start] > 100) heights[start] = 5;
- cells[start].used = session;
- for (let i = 1; i < 10000; i++) {
- const rnd = Math.random() * 0.4 + 0.8;
- change -= i / 0.6 * rnd;
- if (change < 1) break;
- query.map(function(p) {
- cells[p].neighbors.forEach(function(e) {
- if (cells[e].used === session) return;
- cells[e].used = session;
- if (Math.random() > 0.8) return;
- newQuery.push(e);
- heights[e] -= change;
- if (heights[e] < 5 || heights[e] > 100) heights[e] = 5;
- });
- });
- query = newQuery.slice();
- newQuery = [];
- }
- }
- }
-
- // Modify heights adding or multiplying by value
- function modifyHeights(range, add, mult) {
- function modify(v) {
- if (add) v += add;
- if (mult !== 1) {
- if (mult === "^2") mult = (v - 20) / 100;
- if (mult === "^3") mult = ((v - 20) * (v - 20)) / 100;
- if (range === "land") {v = 20 + (v - 20) * mult;}
- else {v *= mult;}
- }
- if (v < 0) v = 0;
- if (v > 100) v = 100;
- return v;
- }
- const limMin = range === "land" ? 20 : range === "all" ? 0 : +range.split("-")[0];
- const limMax = range === "land" || range === "all" ? 100 : +range.split("-")[1];
-
- for (let i=0; i < heights.length; i++) {
- if (heights[i] < limMin || heights[i] > limMax) continue;
- heights[i] = modify(heights[i]);
- }
- }
-
- // Smooth heights using mean of neighbors
- function smoothHeights(fraction) {
- const fr = fraction || 2;
- for (let i=0; i < heights.length; i++) {
- const nHeights = [heights[i]];
- cells[i].neighbors.forEach(function(e) {nHeights.push(heights[e]);});
- heights[i] = (heights[i] * (fr - 1) + d3.mean(nHeights)) / fr;
- }
- }
-
- // Randomize heights a bit
- function disruptHeights() {
- for (let i=0; i < heights.length; i++) {
- if (heights[i] < 18) continue;
- if (Math.random() < 0.5) continue;
- heights[i] += 2 - Math.random() * 4;
- }
- }
-
- // Mark features (ocean, lakes, islands)
- function markFeatures() {
- console.time("markFeatures");
- Math.seedrandom(seed); // reset seed to get the same result on heightmap edit
- for (let i=0, queue=[0]; queue.length > 0; i++) {
- const cell = cells[queue[0]];
- cell.fn = i; // feature number
- const land = heights[queue[0]] >= 20;
- let border = cell.type === "border";
- if (border && land) cell.ctype = 2;
-
- while (queue.length) {
- const q = queue.pop();
- if (cells[q].type === "border") {
- border = true;
- if (land) cells[q].ctype = 2;
- }
-
- cells[q].neighbors.forEach(function(e) {
- const eLand = heights[e] >= 20;
- if (land === eLand && cells[e].fn === undefined) {
- cells[e].fn = i;
- queue.push(e);
- }
- if (land && !eLand) {
- cells[q].ctype = 2;
- cells[e].ctype = -1;
- cells[q].harbor = cells[q].harbor ? cells[q].harbor + 1 : 1;
- }
- });
- }
- features.push({i, land, border});
-
- // find unmarked cell
- for (let c=0; c < cells.length; c++) {
- if (cells[c].fn === undefined) {
- queue[0] = c;
- break;
- }
- }
- }
- console.timeEnd("markFeatures");
- }
-
- // remove closed lakes near ocean
- function reduceClosedLakes() {
- console.time("reduceClosedLakes");
- const fs = JSON.parse(JSON.stringify(features));
- let lakesInit = lakesNow = features.reduce(function(s, f) {
- return !f.land && !f.border ? s + 1 : s;
- }, 0);
-
- for (let c=0; c < cells.length && lakesNow > 0; c++) {
- if (heights[c] < 20) continue; // not land
- if (cells[c].ctype !== 2) continue; // not near water
- let ocean = null, lake = null;
- // find land cells with lake and ocean nearby
- cells[c].neighbors.forEach(function(n) {
- if (heights[n] >= 20) return;
- const fn = cells[n].fn;
- if (features[fn].border !== false) ocean = fn;
- if (fs[fn].border === false) lake = fn;
- });
- // if found, make it water and turn lake to ocean
- if (ocean !== null && lake !== null) {
- //debug.append("circle").attr("cx", cells[c].data[0]).attr("cy", cells[c].data[1]).attr("r", 2).attr("fill", "red");
- lakesNow --;
- fs[lake].border = ocean;
- heights[c] = 19;
- cells[c].fn = ocean;
- cells[c].ctype = -1;
- cells[c].neighbors.forEach(function(e) {if (heights[e] >= 20) cells[e].ctype = 2;});
- }
- }
-
- if (lakesInit === lakesNow) return; // nothing was changed
- for (let i=0; i < cells.length; i++) {
- if (heights[i] >= 20) continue; // not water
- const fn = cells[i].fn;
- if (fs[fn].border !== features[fn].border) {
- cells[i].fn = fs[fn].border;
- //debug.append("circle").attr("cx", cells[i].data[0]).attr("cy", cells[i].data[1]).attr("r", 1).attr("fill", "blue");
- }
- }
- console.timeEnd("reduceClosedLakes");
- }
-
- function drawOcean() {
- console.time("drawOcean");
- let limits = [];
- let odd = 0.8; // initial odd for ocean layer is 80%
- // Define type of ocean cells based on cell distance form land
- let frontier = $.grep(cells, function(e) {return e.ctype === -1;});
- if (Math.random() < odd) {limits.push(-1); odd = 0.2;}
- for (let c = -2; frontier.length > 0 && c > -10; c--) {
- if (Math.random() < odd) {limits.unshift(c); odd = 0.2;} else {odd += 0.2;}
- frontier.map(function(i) {
- i.neighbors.forEach(function(e) {
- if (!cells[e].ctype) cells[e].ctype = c;
- });
- });
- frontier = $.grep(cells, function(e) {return e.ctype === c;});
- }
- if (outlineLayersInput.value === "none") return;
- if (outlineLayersInput.value !== "random") limits = outlineLayersInput.value.split(",");
- // Define area edges
- const opacity = rn(0.4 / limits.length, 2);
- for (let l=0; l < limits.length; l++) {
- const edges = [];
- const lim = +limits[l];
- for (let i = 0; i < cells.length; i++) {
- if (cells[i].ctype < lim || cells[i].ctype === undefined) continue;
- if (cells[i].ctype > lim && cells[i].type !== "border") continue;
- const cell = diagram.cells[i];
- cell.halfedges.forEach(function(e) {
- const edge = diagram.edges[e];
- const start = edge[0].join(" ");
- const end = edge[1].join(" ");
- if (edge.left && edge.right) {
- const ea = edge.left.index === i ? edge.right.index : edge.left.index;
- if (cells[ea].ctype < lim) edges.push({start, end});
- } else {
- edges.push({start, end});
- }
- });
- }
- lineGen.curve(d3.curveBasis);
- let relax = 0.8 - l / 10;
- if (relax < 0.2) relax = 0.2;
- const line = getContinuousLine(edges, 0, relax);
- oceanLayers.append("path").attr("d", line).attr("fill", "#ecf2f9").style("opacity", opacity);
- }
- console.timeEnd("drawOcean");
- }
-
- // recalculate Voronoi Graph to pack cells
- function reGraph() {
- console.time("reGraph");
- const tempCells = [], newPoints = []; // to store new data
- // get average precipitation based on graph size
- const avPrec = precInput.value / 5000;
- const smallLakesMax = 500;
- let smallLakes = 0;
- const evaporation = 2;
- cells.map(function(i, d) {
- let height = i.height || heights[d];
- if (height > 100) height = 100;
- const pit = i.pit;
- const ctype = i.ctype;
- if (ctype !== -1 && ctype !== -2 && height < 20) return; // exclude all deep ocean points
- const x = rn(i.data[0],1), y = rn(i.data[1],1);
- const fn = i.fn;
- const harbor = i.harbor;
- let lake = i.lake;
- // mark potential cells for small lakes to add additional point there
- if (smallLakes < smallLakesMax && !lake && pit > evaporation && ctype !== 2) {
- lake = 2;
- smallLakes++;
- }
- const region = i.region; // handle value for edit heightmap mode only
- const culture = i.culture; // handle value for edit heightmap mode only
- let copy = $.grep(newPoints, function(e) {return (e[0] == x && e[1] == y);});
- if (!copy.length) {
- newPoints.push([x, y]);
- tempCells.push({index:tempCells.length, data:[x, y],height, pit, ctype, fn, harbor, lake, region, culture});
- }
- // add additional points for cells along coast
- if (ctype === 2 || ctype === -1) {
- if (i.type === "border") return;
- if (!features[fn].land && !features[fn].border) return;
- i.neighbors.forEach(function(e) {
- if (cells[e].ctype === ctype) {
- let x1 = (x * 2 + cells[e].data[0]) / 3;
- let y1 = (y * 2 + cells[e].data[1]) / 3;
- x1 = rn(x1, 1), y1 = rn(y1, 1);
- copy = $.grep(newPoints, function(e) {return e[0] === x1 && e[1] === y1;});
- if (copy.length) return;
- newPoints.push([x1, y1]);
- tempCells.push({index:tempCells.length, data:[x1, y1],height, pit, ctype, fn, harbor, lake, region, culture});
- }
- });
- }
- if (lake === 2) { // add potential small lakes
- polygons[i.index].forEach(function(e) {
- if (Math.random() > 0.8) return;
- let rnd = Math.random() * 0.6 + 0.8;
- const x1 = rn((e[0] * rnd + i.data[0]) / (1 + rnd), 2);
- rnd = Math.random() * 0.6 + 0.8;
- const y1 = rn((e[1] * rnd + i.data[1]) / (1 + rnd), 2);
- copy = $.grep(newPoints, function(c) {return x1 === c[0] && y1 === c[1];});
- if (copy.length) return;
- newPoints.push([x1, y1]);
- tempCells.push({index:tempCells.length, data:[x1, y1],height, pit, ctype, fn, region, culture});
- });
- }
- });
- console.log( "small lakes candidates: " + smallLakes);
- cells = tempCells; // use tempCells as the only cells array
- calculateVoronoi(newPoints); // recalculate Voronoi diagram using new points
- let gridPath = ""; // store grid as huge single path string
- cells.map(function(i, d) {
- if (i.height >= 20) {
- // calc cell area
- i.area = rn(Math.abs(d3.polygonArea(polygons[d])), 2);
- const prec = rn(avPrec * i.area, 2);
- i.flux = i.lake ? prec * 10 : prec;
- }
- const neighbors = []; // re-detect neighbors
- diagram.cells[d].halfedges.forEach(function(e) {
- const edge = diagram.edges[e];
- if (edge.left === undefined || edge.right === undefined) {
- if (i.height >= 20) i.ctype = 99; // border cell
- return;
- }
- const ea = edge.left.index === d ? edge.right.index : edge.left.index;
- neighbors.push(ea);
- if (d < ea && i.height >= 20 && i.lake !== 1 && cells[ea].height >= 20 && cells[ea].lake !== 1) {
- gridPath += "M" + edge[0][0] + "," + edge[0][1] + "L" + edge[1][0] + "," + edge[1][1];
- }
- });
- i.neighbors = neighbors;
- if (i.region === undefined) delete i.region;
- if (i.culture === undefined) delete i.culture;
- });
- grid.append("path").attr("d", gridPath);
- console.timeEnd("reGraph");
- }
-
- // redraw all cells for Customization 1 mode
- function mockHeightmap() {
- let landCells = 0;
- $("#landmass").empty();
- const limit = renderOcean.checked ? 1 : 20;
- for (let i=0; i < heights.length; i++) {
- if (heights[i] < limit) continue;
- if (heights[i] > 100) heights[i] = 100;
- const clr = color(1 - heights[i] / 100);
- landmass.append("path").attr("id", "cell"+i)
- .attr("d", "M" + polygons[i].join("L") + "Z")
- .attr("fill", clr).attr("stroke", clr);
- }
- }
-
- $("#renderOcean").click(mockHeightmap);
-
- // draw or update all cells
- function updateHeightmap() {
- const limit = renderOcean.checked ? 1 : 20;
- for (let i=0; i < heights.length; i++) {
- if (heights[i] > 100) heights[i] = 100;
- let cell = landmass.select("#cell"+i);
- const clr = color(1 - heights[i] / 100);
- if (cell.size()) {
- if (heights[i] < limit) {cell.remove();}
- else {cell.attr("fill", clr).attr("stroke", clr);}
- } else if (heights[i] >= limit) {
- cell = landmass.append("path").attr("id", "cell"+i)
- .attr("d", "M" + polygons[i].join("L") + "Z")
- .attr("fill", clr).attr("stroke", clr);
- }
- }
- }
-
- // draw or update cells from the selection
- function updateHeightmapSelection(selection) {
- if (selection === undefined) return;
- const limit = renderOcean.checked ? 1 : 20;
- selection.map(function(s) {
- if (heights[s] > 100) heights[s] = 100;
- let cell = landmass.select("#cell"+s);
- const clr = color(1 - heights[s] / 100);
- if (cell.size()) {
- if (heights[s] < limit) {cell.remove();}
- else {cell.attr("fill", clr).attr("stroke", clr);}
- } else if (heights[s] >= limit) {
- cell = landmass.append("path").attr("id", "cell"+s)
- .attr("d", "M" + polygons[s].join("L") + "Z")
- .attr("fill", clr).attr("stroke", clr);
- }
- });
- }
-
- function updateHistory() {
- let landCells = 0; // count number of land cells
- if (renderOcean.checked) {
- landCells = heights.reduce(function(s, v) {if (v >= 20) {return s + 1;} else {return s;}}, 0);
- } else {
- landCells = landmass.selectAll("*").size();
- }
- history = history.slice(0, historyStage);
- history[historyStage] = heights.slice();
- historyStage++;
- undo.disabled = templateUndo.disabled = historyStage <= 1;
- redo.disabled = templateRedo.disabled = true;
- const landMean = Math.trunc(d3.mean(heights));
- const landRatio = rn(landCells / heights.length * 100);
- landmassCounter.innerHTML = landCells;
- landmassRatio.innerHTML = landRatio;
- landmassAverage.innerHTML = landMean;
- // if perspective view dialog is opened, update it
- if ($("#perspectivePanel").is(":visible")) drawPerspective();
- }
-
- // restoreHistory
- function restoreHistory(step) {
- historyStage = step;
- redo.disabled = templateRedo.disabled = historyStage >= history.length;
- undo.disabled = templateUndo.disabled = historyStage <= 1;
- if (history[historyStage - 1] === undefined) return;
- heights = history[historyStage - 1].slice();
- updateHeightmap();
- }
-
- // restart history from 1st step
- function restartHistory() {
- history = [];
- historyStage = 0;
- redo.disabled = templateRedo.disabled = true;
- undo.disabled = templateUndo.disabled = true;
- updateHistory();
- }
-
- // Detect and draw the coasline
- function drawCoastline() {
- console.time('drawCoastline');
- Math.seedrandom(seed); // reset seed to get the same result on heightmap edit
- const shape = defs.append("mask").attr("id", "shape").attr("fill", "black").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%");
- $("#landmass").empty();
- let minX = graphWidth, maxX = 0; // extreme points
- let minXedge, maxXedge; // extreme edges
- const oceanEdges = [],lakeEdges = [];
- for (let i=0; i < land.length; i++) {
- const id = land[i].index, cell = diagram.cells[id];
- const f = land[i].fn;
- land[i].height = Math.trunc(land[i].height);
- if (!oceanEdges[f]) {oceanEdges[f] = []; lakeEdges[f] = [];}
- cell.halfedges.forEach(function(e) {
- const edge = diagram.edges[e];
- const start = edge[0].join(" ");
- const end = edge[1].join(" ");
- if (edge.left && edge.right) {
- const ea = edge.left.index === id ? edge.right.index : edge.left.index;
- cells[ea].height = Math.trunc(cells[ea].height);
- if (cells[ea].height < 20) {
- cells[ea].ctype = -1;
- if (land[i].ctype !== 1) {
- land[i].ctype = 1; // mark coastal land cells
- // move cell point closer to coast
- const x = (land[i].data[0] + cells[ea].data[0]) / 2;
- const y = (land[i].data[1] + cells[ea].data[1]) / 2;
- land[i].haven = ea; // harbor haven (oposite water cell)
- land[i].coastX = rn(x + (land[i].data[0] - x) * 0.1, 1);
- land[i].coastY = rn(y + (land[i].data[1] - y) * 0.1, 1);
- land[i].data[0] = rn(x + (land[i].data[0] - x) * 0.5, 1);
- land[i].data[1] = rn(y + (land[i].data[1] - y) * 0.5, 1);
- }
- if (features[cells[ea].fn].border) {
- oceanEdges[f].push({start, end});
- // island extreme points
- if (edge[0][0] < minX) {minX = edge[0][0]; minXedge = edge[0]}
- if (edge[1][0] < minX) {minX = edge[1][0]; minXedge = edge[1]}
- if (edge[0][0] > maxX) {maxX = edge[0][0]; maxXedge = edge[0]}
- if (edge[1][0] > maxX) {maxX = edge[1][0]; maxXedge = edge[1]}
- } else {
- const l = cells[ea].fn;
- if (!lakeEdges[f][l]) lakeEdges[f][l] = [];
- lakeEdges[f][l].push({start, end});
- }
- }
- } else {
- oceanEdges[f].push({start, end});
- }
- });
- }
-
- for (let f = 0; f < features.length; f++) {
- if (!oceanEdges[f]) continue;
- if (!oceanEdges[f].length && lakeEdges[f].length) {
- const m = lakeEdges[f].indexOf(d3.max(lakeEdges[f]));
- oceanEdges[f] = lakeEdges[f][m];
- lakeEdges[f][m] = [];
- }
- lineGen.curve(d3.curveCatmullRomClosed.alpha(0.1));
- const oceanCoastline = getContinuousLine(oceanEdges[f],3, 0);
- if (oceanCoastline) {
- shape.append("path").attr("d", oceanCoastline).attr("fill", "white"); // draw the mask
- coastline.append("path").attr("d", oceanCoastline); // draw the coastline
- }
- lineGen.curve(d3.curveBasisClosed);
- lakeEdges[f].forEach(function(l) {
- const lakeCoastline = getContinuousLine(l, 3, 0);
- if (lakeCoastline) {
- shape.append("path").attr("d", lakeCoastline).attr("fill", "black"); // draw the mask
- lakes.append("path").attr("d", lakeCoastline); // draw the lakes
- }
- });
- }
- landmass.append("rect").attr("x", 0).attr("y", 0).attr("width", graphWidth).attr("height", graphHeight); // draw the landmass
- drawDefaultRuler(minXedge, maxXedge);
- console.timeEnd('drawCoastline');
- }
-
- // draw default scale bar
- function drawScaleBar() {
- if ($("#scaleBar").hasClass("hidden")) return; // no need to re-draw hidden element
- svg.select("#scaleBar").remove(); // fully redraw every time
- // get size
- const size = +barSize.value;
- const dScale = distanceScale.value;
- const unit = distanceUnit.value;
- const scaleBar = svg.append("g").attr("id", "scaleBar")
- .on("click", editScale)
- .on("mousemove", function () {
- tip("Click to open Scale Editor, drag to move");
- })
- .call(d3.drag().on("start", elementDrag));
- const init = 100; // actual length in pixels if scale, dScale and size = 1;
- let val = init * size * dScale / scale; // bar length in distance unit
- if (val > 900) {val = rn(val, -3);} // round to 1000
- else if (val > 90) {val = rn(val, -2);} // round to 100
- else if (val > 9) {val = rn(val, -1);} // round to 10
- else {val = rn(val)} // round to 1
- const l = val * scale / dScale; // actual length in pixels on this scale
- const x = 0, y = 0; // initial position
- scaleBar.append("line").attr("x1", x+0.5).attr("y1", y).attr("x2", x+l+size-0.5).attr("y2", y).attr("stroke-width", size).attr("stroke", "white");
- scaleBar.append("line").attr("x1", x).attr("y1", y + size).attr("x2", x+l+size).attr("y2", y + size).attr("stroke-width", size).attr("stroke", "#3d3d3d");
- const dash = size + " " + rn(l / 5 - size, 2);
- scaleBar.append("line").attr("x1", x).attr("y1", y).attr("x2", x+l+size).attr("y2", y)
- .attr("stroke-width", rn(size * 3, 2)).attr("stroke-dasharray", dash).attr("stroke", "#3d3d3d");
- // big scale
- for (let b = 0; b < 6; b++) {
- const value = rn(b * l / 5, 2);
- const label = rn(value * dScale / scale);
- if (b === 5) {
- scaleBar.append("text").attr("x", x + value).attr("y", y - 2 * size).attr("font-size", rn(5 * size, 1)).text(label + " " + unit);
- } else {
- scaleBar.append("text").attr("x", x + value).attr("y", y - 2 * size).attr("font-size", rn(5 * size, 1)).text(label);
- }
- }
- if (barLabel.value !== "") {
- scaleBar.append("text").attr("x", x + (l+1) / 2).attr("y", y + 2 * size)
- .attr("dominant-baseline", "text-before-edge")
- .attr("font-size", rn(5 * size, 1)).text(barLabel.value);
- }
- const bbox = scaleBar.node().getBBox();
- // append backbround rectangle
- scaleBar.insert("rect", ":first-child").attr("x", -10).attr("y", -20).attr("width", bbox.width + 10).attr("height", bbox.height + 15)
- .attr("stroke-width", size).attr("stroke", "none").attr("filter", "url(#blur5)")
- .attr("fill", barBackColor.value).attr("opacity", +barBackOpacity.value);
- fitScaleBar();
- }
-
- // draw default ruler measiring land x-axis edges
- function drawDefaultRuler(minXedge, maxXedge) {
- const rulerNew = ruler.append("g").attr("class", "linear").call(d3.drag().on("start", elementDrag));
- if (!minXedge) minXedge = [0, 0];
- if (!maxXedge) maxXedge = [svgWidth, svgHeight];
- const x1 = rn(minXedge[0],2), y1 = rn(minXedge[1],2), x2 = rn(maxXedge[0],2), y2 = rn(maxXedge[1],2);
- rulerNew.append("line").attr("x1", x1).attr("y1", y1).attr("x2", x2).attr("y2", y2).attr("class", "white");
- rulerNew.append("line").attr("x1", x1).attr("y1", y1).attr("x2", x2).attr("y2", y2).attr("class", "gray").attr("stroke-dasharray", 10);
- rulerNew.append("circle").attr("r", 2).attr("cx", x1).attr("cy", y1).attr("stroke-width", 0.5).attr("data-edge", "left").call(d3.drag().on("drag", rulerEdgeDrag));
- rulerNew.append("circle").attr("r", 2).attr("cx", x2).attr("cy", y2).attr("stroke-width", 0.5).attr("data-edge", "rigth").call(d3.drag().on("drag", rulerEdgeDrag));
- const x0 = rn((x1 + x2) / 2, 2), y0 = rn((y1 + y2) / 2, 2);
- rulerNew.append("circle").attr("r", 1.2).attr("cx", x0).attr("cy", y0).attr("stroke-width", 0.3).attr("class", "center").call(d3.drag().on("start", rulerCenterDrag));
- const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
- const tr = "rotate(" + angle + " " + x0 + " " + y0 +")";
- const dist = rn(Math.hypot(x1 - x2, y1 - y2));
- const label = rn(dist * distanceScale.value) + " " + distanceUnit.value;
- rulerNew.append("text").attr("x", x0).attr("y", y0).attr("dy", -1).attr("transform", tr).attr("data-dist", dist).text(label).on("click", removeParent).attr("font-size", 10);
- }
-
- // drag any element changing transform
- function elementDrag() {
- const el = d3.select(this);
- const tr = parseTransform(el.attr("transform"));
- const dx = +tr[0] - d3.event.x, dy = +tr[1] - d3.event.y;
-
- d3.event.on("drag", function() {
- const x = d3.event.x, y = d3.event.y;
- const transform = `translate(${(dx+x)},${(dy+y)}) rotate(${tr[2]} ${tr[3]} ${tr[4]})`;
- el.attr("transform", transform);
- const pp = this.parentNode.parentNode.id;
- if (pp === "burgIcons" || pp === "burgLabels") {
- tip('Use dragging for fine-tuning only, to move burg to a different cell use "Relocate" button');
- }
- if (pp === "labels") {
- // also transform curve control circle
- debug.select("circle").attr("transform", transform);
- }
- });
-
- d3.event.on("end", function() {
- // remember scaleBar bottom-right position
- if (el.attr("id") === "scaleBar") {
- const xEnd = d3.event.x, yEnd = d3.event.y;
- const diff = Math.abs(dx - xEnd) + Math.abs(dy - yEnd);
- if (diff > 5) {
- const bbox = el.node().getBoundingClientRect();
- sessionStorage.setItem("scaleBar", [bbox.right, bbox.bottom]);
- }
- }
- });
- }
-
- // draw ruler circles and update label
- function rulerEdgeDrag() {
- const group = d3.select(this.parentNode);
- const edge = d3.select(this).attr("data-edge");
- const x = d3.event.x, y = d3.event.y;
- let x0, y0;
- d3.select(this).attr("cx", x).attr("cy", y);
- const line = group.selectAll("line");
- if (edge === "left") {
- line.attr("x1", x).attr("y1", y);
- x0 = +line.attr("x2"), y0 = +line.attr("y2");
- } else {
- line.attr("x2", x).attr("y2", y);
- x0 = +line.attr("x1"), y0 = +line.attr("y1");
- }
- const xc = rn((x + x0) / 2, 2), yc = rn((y + y0) / 2, 2);
- group.select(".center").attr("cx", xc).attr("cy", yc);
- const dist = rn(Math.hypot(x0 - x, y0 - y));
- const label = rn(dist * distanceScale.value) + " " + distanceUnit.value;
- const atan = x0 > x ? Math.atan2(y0 - y, x0 - x) : Math.atan2(y - y0, x - x0);
- const angle = rn(atan * 180 / Math.PI, 3);
- const tr = "rotate(" + angle + " " + xc + " " + yc + ")";
- group.select("text").attr("x", xc).attr("y", yc).attr("transform", tr).attr("data-dist", dist).text(label);
- }
-
- // draw ruler center point to split ruler into 2 parts
- function rulerCenterDrag() {
- let xc1, yc1, xc2, yc2;
- const group = d3.select(this.parentNode); // current ruler group
- let x = d3.event.x, y = d3.event.y; // current coords
- const line = group.selectAll("line"); // current lines
- const x1 = +line.attr("x1"), y1 = +line.attr("y1"), x2 = +line.attr("x2"), y2 = +line.attr("y2"); // initial line edge points
- const rulerNew = ruler.insert("g", ":first-child");
- rulerNew.attr("transform", group.attr("transform")).call(d3.drag().on("start", elementDrag));
- const factor = rn(1 / Math.pow(scale, 0.3), 1);
- rulerNew.append("line").attr("class", "white").attr("stroke-width", factor);
- const dash = +group.select(".gray").attr("stroke-dasharray");
- rulerNew.append("line").attr("class", "gray").attr("stroke-dasharray", dash).attr("stroke-width", factor);
- rulerNew.append("text").attr("dy", -1).on("click", removeParent).attr("font-size", 10 * factor).attr("stroke-width", factor);
-
- d3.event.on("drag", function() {
- x = d3.event.x, y = d3.event.y;
- d3.select(this).attr("cx", x).attr("cy", y);
- // change first part
- line.attr("x1", x1).attr("y1", y1).attr("x2", x).attr("y2", y);
- let dist = rn(Math.hypot(x1 - x, y1 - y));
- let label = rn(dist * distanceScale.value) + " " + distanceUnit.value;
- let atan = x1 > x ? Math.atan2(y1 - y, x1 - x) : Math.atan2(y - y1, x - x1);
- xc1 = rn((x + x1) / 2, 2), yc1 = rn((y + y1) / 2, 2);
- let tr = "rotate(" + rn(atan * 180 / Math.PI, 3) + " " + xc1 + " " + yc1 + ")";
- group.select("text").attr("x", xc1).attr("y", yc1).attr("transform", tr).attr("data-dist", dist).text(label);
- // change second (new) part
- dist = rn(Math.hypot(x2 - x, y2 - y));
- label = rn(dist * distanceScale.value) + " " + distanceUnit.value;
- atan = x2 > x ? Math.atan2(y2 - y, x2 - x) : Math.atan2(y - y2, x - x2);
- xc2 = rn((x + x2) / 2, 2), yc2 = rn((y + y2) / 2, 2);
- tr = "rotate(" + rn(atan * 180 / Math.PI, 3) + " " + xc2 + " " + yc2 +")";
- rulerNew.selectAll("line").attr("x1", x).attr("y1", y).attr("x2", x2).attr("y2", y2);
- rulerNew.select("text").attr("x", xc2).attr("y", yc2).attr("transform", tr).attr("data-dist", dist).text(label);
- });
-
- d3.event.on("end", function() {
- // circles for 1st part
- group.selectAll("circle").remove();
- group.append("circle").attr("cx", x1).attr("cy", y1).attr("r", 2 * factor).attr("stroke-width", 0.5 * factor).attr("data-edge", "left").call(d3.drag().on("drag", rulerEdgeDrag));
- group.append("circle").attr("cx", x).attr("cy", y).attr("r", 2 * factor).attr("stroke-width", 0.5 * factor).attr("data-edge", "rigth").call(d3.drag().on("drag", rulerEdgeDrag));
- group.append("circle").attr("cx", xc1).attr("cy", yc1).attr("r", 1.2 * factor).attr("stroke-width", 0.3 * factor).attr("class", "center").call(d3.drag().on("start", rulerCenterDrag));
- // circles for 2nd part
- rulerNew.append("circle").attr("cx", x).attr("cy", y).attr("r", 2 * factor).attr("stroke-width", 0.5 * factor).attr("data-edge", "left").call(d3.drag().on("drag", rulerEdgeDrag));
- rulerNew.append("circle").attr("cx", x2).attr("cy", y2).attr("r", 2 * factor).attr("stroke-width", 0.5 * factor).attr("data-edge", "rigth").call(d3.drag().on("drag", rulerEdgeDrag));
- rulerNew.append("circle").attr("cx", xc2).attr("cy", yc2).attr("r", 1.2 * factor).attr("stroke-width", 0.3 * factor).attr("class", "center").call(d3.drag().on("start", rulerCenterDrag));
- });
- }
-
- function opisometerEdgeDrag() {
- const el = d3.select(this);
- const x0 = +el.attr("cx"), y0 = +el.attr("cy");
- const group = d3.select(this.parentNode);
- const curve = group.select(".white");
- const curveGray = group.select(".gray");
- const text = group.select("text");
- const points = JSON.parse(text.attr("data-points"));
- if (x0 === points[0].scX && y0 === points[0].scY) {points.reverse();}
-
- d3.event.on("drag", function() {
- const x = d3.event.x, y = d3.event.y;
- el.attr("cx", x).attr("cy", y);
- const l = points[points.length - 1];
- const diff = Math.hypot(l.scX - x, l.scY - y);
- if (diff > 5) {points.push({scX: x, scY: y});} else {return;}
- lineGen.curve(d3.curveBasis);
- const d = round(lineGen(points));
- curve.attr("d", d);
- curveGray.attr("d", d);
- const dist = rn(curve.node().getTotalLength());
- const label = rn(dist * distanceScale.value) + " " + distanceUnit.value;
- text.attr("x", x).attr("y", y).text(label);
- });
-
- d3.event.on("end", function() {
- const dist = rn(curve.node().getTotalLength());
- const c = curve.node().getPointAtLength(dist / 2);
- const p = curve.node().getPointAtLength((dist / 2) - 1);
- const label = rn(dist * distanceScale.value) + " " + distanceUnit.value;
- const atan = p.x > c.x ? Math.atan2(p.y - c.y, p.x - c.x) : Math.atan2(c.y - p.y, c.x - p.x);
- const angle = rn(atan * 180 / Math.PI, 3);
- const tr = "rotate(" + angle + " " + c.x + " " + c.y + ")";
- text.attr("data-points", JSON.stringify(points)).attr("data-dist", dist).attr("x", c.x).attr("y", c.y).attr("transform", tr).text(label);
- });
- }
-
- function getContinuousLine(edges, indention, relax) {
- let line = "";
- if (edges.length < 3) return "";
- while (edges.length > 2) {
- let edgesOrdered = []; // to store points in a correct order
- let start = edges[0].start;
- let end = edges[0].end;
- edges.shift();
- let spl = start.split(" ");
- edgesOrdered.push({scX: +spl[0],scY: +spl[1]});
- spl = end.split(" ");
- edgesOrdered.push({scX: +spl[0],scY: +spl[1]});
- let x0 = +spl[0],y0 = +spl[1];
- for (let i = 0; end !== start && i < 100000; i++) {
- let next = null, index = null;
- for (let e = 0; e < edges.length; e++) {
- const edge = edges[e];
- if (edge.start == end || edge.end == end) {
- next = edge;
- end = next.start == end ? next.end : next.start;
- index = e;
- break;
- }
- }
- if (!next) {
- console.error("Next edge is not found");
- return "";
- }
- spl = end.split(" ");
- if (indention || relax) {
- const dist = Math.hypot(+spl[0] - x0, +spl[1] - y0);
- if (dist >= indention && Math.random() > relax) {
- edgesOrdered.push({scX: +spl[0],scY: +spl[1]});
- x0 = +spl[0],y0 = +spl[1];
- }
- } else {
- edgesOrdered.push({scX: +spl[0],scY: +spl[1]});
- }
- edges.splice(index, 1);
- if (i === 100000-1) {
- console.error("Line not ended, limit reached");
- break;
- }
- }
- line += lineGen(edgesOrdered);
- }
- return round(line, 1);
- }
-
- // temporary elevate lakes to min neighbors heights to correctly flux the water
- function elevateLakes() {
- console.time('elevateLakes');
- const lakes = $.grep(cells, function(e, d) {return heights[d] < 20 && !features[e.fn].border;});
- lakes.sort(function(a, b) {return heights[b.index] - heights[a.index];});
- for (let i=0; i < lakes.length; i++) {
- const hs = [],id = lakes[i].index;
- cells[id].height = heights[id]; // use height on object level
- lakes[i].neighbors.forEach(function(n) {
- const nHeight = cells[n].height || heights[n];
- if (nHeight >= 20) hs.push(nHeight);
- });
- if (hs.length) cells[id].height = d3.min(hs) - 1;
- if (cells[id].height < 20) cells[id].height = 20;
- lakes[i].lake = 1;
- }
- console.timeEnd('elevateLakes');
- }
-
- // Depression filling algorithm (for a correct water flux modeling; phase1)
- function resolveDepressionsPrimary() {
- console.time('resolveDepressionsPrimary');
- land = $.grep(cells, function(e, d) {
- if (!e.height) e.height = heights[d]; // use height on object level
- return e.height >= 20;
- });
- land.sort(function(a, b) {return b.height - a.height;});
- const limit = 10;
- for (let l = 0, depression = 1; depression > 0 && l < limit; l++) {
- depression = 0;
- for (let i = 0; i < land.length; i++) {
- const id = land[i].index;
- if (land[i].type === "border") continue;
- const hs = land[i].neighbors.map(function(n) {return cells[n].height;});
- const minHigh = d3.min(hs);
- if (cells[id].height <= minHigh) {
- depression++;
- land[i].pit = land[i].pit ? land[i].pit + 1 : 1;
- cells[id].height = minHigh + 2;
- }
- }
- if (l === 0) console.log(" depressions init: " + depression);
- }
- console.timeEnd('resolveDepressionsPrimary');
- }
-
- // Depression filling algorithm (for a correct water flux modeling; phase2)
- function resolveDepressionsSecondary() {
- console.time('resolveDepressionsSecondary');
- land = $.grep(cells, function(e) {return e.height >= 20;});
- land.sort(function(a, b) {return b.height - a.height;});
- const limit = 100;
- for (let l = 0, depression = 1; depression > 0 && l < limit; l++) {
- depression = 0;
- for (let i = 0; i < land.length; i++) {
- if (land[i].ctype === 99) continue;
- const nHeights = land[i].neighbors.map(function(n) {return cells[n].height});
- const minHigh = d3.min(nHeights);
- if (land[i].height <= minHigh) {
- depression++;
- land[i].pit = land[i].pit ? land[i].pit + 1 : 1;
- land[i].height = Math.trunc(minHigh + 2);
- }
- }
- if (l === 0) console.log(" depressions reGraphed: " + depression);
- if (l === limit - 1) console.error("Error: resolveDepressions iteration limit");
- }
- console.timeEnd('resolveDepressionsSecondary');
- }
-
- // restore initial heights if user don't want system to change heightmap
- function restoreCustomHeights() {
- land.forEach(function(l) {
- if (!l.pit) return;
- l.height = Math.trunc(l.height - l.pit * 2);
- if (l.height < 20) l.height = 20;
- });
- }
-
- function flux() {
- console.time('flux');
- riversData = [];
- let riverNext = 0;
- land.sort(function(a, b) {return b.height - a.height;});
- for (let i = 0; i < land.length; i++) {
- const id = land[i].index;
- const sx = land[i].data[0];
- const sy = land[i].data[1];
- let fn = land[i].fn;
- if (land[i].ctype === 99) {
- if (land[i].river !== undefined) {
- let x, y;
- const min = Math.min(sy, graphHeight - sy, sx, graphWidth - sx);
- if (min === sy) {x = sx; y = 0;}
- if (min === graphHeight - sy) {x = sx; y = graphHeight;}
- if (min === sx) {x = 0; y = sy;}
- if (min === graphWidth - sx) {x = graphWidth; y = sy;}
- riversData.push({river: land[i].river, cell: id, x, y});
- }
- continue;
- }
- if (features[fn].river !== undefined) {
- if (land[i].river !== features[fn].river) {
- land[i].river = undefined;
- land[i].flux = 0;
- }
- }
- let minHeight = 1000, min;
- land[i].neighbors.forEach(function(e) {
- if (cells[e].height < minHeight) {
- minHeight = cells[e].height;
- min = e;
- }
- });
- // Define river number
- if (min !== undefined && land[i].flux > 1) {
- if (land[i].river === undefined) {
- // State new River
- land[i].river = riverNext;
- riversData.push({river: riverNext, cell: id, x: sx, y: sy});
- riverNext += 1;
- }
- // Assing existing River to the downhill cell
- if (cells[min].river == undefined) {
- cells[min].river = land[i].river;
- } else {
- const riverTo = cells[min].river;
- const iRiver = $.grep(riversData, function (e) {
- return (e.river == land[i].river);
- });
- const minRiver = $.grep(riversData, function (e) {
- return (e.river == riverTo);
- });
- let iRiverL = iRiver.length;
- let minRiverL = minRiver.length;
- // re-assing river nunber if new part is greater
- if (iRiverL >= minRiverL) {
- cells[min].river = land[i].river;
- iRiverL += 1;
- minRiverL -= 1;
- }
- // mark confluences
- if (cells[min].height >= 20 && iRiverL > 1 && minRiverL > 1) {
- if (!cells[min].confluence) {
- cells[min].confluence = minRiverL-1;
- } else {
- cells[min].confluence += minRiverL-1;
- }
- }
- }
- }
- if (cells[min].flux) cells[min].flux += land[i].flux;
- if (land[i].river !== undefined) {
- const px = cells[min].data[0];
- const py = cells[min].data[1];
- if (cells[min].height < 20) {
- // pour water to the sea
- const x = (px + sx) / 2 + (px - sx) / 10;
- const y = (py + sy) / 2 + (py - sy) / 10;
- riversData.push({river: land[i].river, cell: id, x, y});
- } else {
- if (cells[min].lake === 1) {
- fn = cells[min].fn;
- if (features[fn].river === undefined) features[fn].river = land[i].river;
- }
- // add next River segment
- riversData.push({river: land[i].river, cell: min, x: px, y: py});
- }
- }
- }
- console.timeEnd('flux');
- drawRiverLines(riverNext);
- }
-
- function drawRiverLines(riverNext) {
- console.time('drawRiverLines');
- for (let i = 0; i < riverNext; i++) {
- const dataRiver = $.grep(riversData, function (e) {
- return e.river === i;
- });
- if (dataRiver.length > 1) {
- const riverAmended = amendRiver(dataRiver, 1);
- const width = rn(0.8 + Math.random() * 0.4, 1);
- const increment = rn(0.8 + Math.random() * 0.4, 1);
- const d = drawRiver(riverAmended, width, increment);
- rivers.append("path").attr("d", d).attr("id", "river"+i).attr("data-width", width).attr("data-increment", increment);
- }
- }
- rivers.selectAll("path").on("click", editRiver);
- console.timeEnd('drawRiverLines');
- }
-
- // add more river points on 1/3 and 2/3 of length
- function amendRiver(dataRiver, rndFactor) {
- const riverAmended = [];
- let side = 1;
- for (let r = 0; r < dataRiver.length; r++) {
- const dX = dataRiver[r].x;
- const dY = dataRiver[r].y;
- const cell = dataRiver[r].cell;
- const c = cells[cell].confluence || 0;
- riverAmended.push([dX, dY, c]);
- if (r+1 < dataRiver.length) {
- const eX = dataRiver[r + 1].x;
- const eY = dataRiver[r + 1].y;
- const angle = Math.atan2(eY - dY, eX - dX);
- const serpentine = 1 / (r + 1);
- const meandr = serpentine + 0.3 + Math.random() * 0.3 * rndFactor;
- if (Math.random() > 0.5) {
- side *= -1
- }
- const dist = Math.hypot(eX - dX, eY - dY);
- // if dist is big or river is small add 2 extra points
- if (dist > 8 || (dist > 4 && dataRiver.length < 6)) {
- let stX = (dX * 2 + eX) / 3;
- let stY = (dY * 2 + eY) / 3;
- let enX = (dX + eX * 2) / 3;
- let enY = (dY + eY * 2) / 3;
- stX += -Math.sin(angle) * meandr * side;
- stY += Math.cos(angle) * meandr * side;
- if (Math.random() > 0.8) {
- side *= -1
- }
- enX += Math.sin(angle) * meandr * side;
- enY += -Math.cos(angle) * meandr * side;
- riverAmended.push([stX, stY],[enX, enY]);
- // if dist is medium or river is small add 1 extra point
- } else if (dist > 4 || dataRiver.length < 6) {
- let scX = (dX + eX) / 2;
- let scY = (dY + eY) / 2;
- scX += -Math.sin(angle) * meandr * side;
- scY += Math.cos(angle) * meandr * side;
- riverAmended.push([scX, scY]);
- }
- }
- }
- return riverAmended;
- }
-
- // draw river polygon using arrpoximation
- function drawRiver(points, width, increment) {
- lineGen.curve(d3.curveCatmullRom.alpha(0.1));
- let extraOffset = 0.03; // start offset to make river source visible
- width = width || 1; // river width modifier
- increment = increment || 1; // river bed widening modifier
- let riverLength = 0;
- points.map(function(p, i) {
- if (i === 0) {return 0;}
- riverLength += Math.hypot(p[0] - points[i-1][0],p[1] - points[i-1][1]);
- });
- const widening = rn((1000 + (riverLength * 30)) * increment);
- const riverPointsLeft = [], riverPointsRight = [];
- const last = points.length - 1;
- const factor = riverLength / points.length;
-
- // first point
- let x = points[0][0], y = points[0][1], c;
- let angle = Math.atan2(y - points[1][1], x - points[1][0]);
- let xLeft = x + -Math.sin(angle) * extraOffset, yLeft = y + Math.cos(angle) * extraOffset;
- riverPointsLeft.push({scX:xLeft, scY:yLeft});
- let xRight = x + Math.sin(angle) * extraOffset, yRight = y + -Math.cos(angle) * extraOffset;
- riverPointsRight.unshift({scX:xRight, scY:yRight});
-
- // middle points
- for (let p = 1; p < last; p ++) {
- x = points[p][0],y = points[p][1],c = points[p][2];
- if (c) {extraOffset += Math.atan(c * 10 / widening);} // confluence
- const xPrev = points[p - 1][0], yPrev = points[p - 1][1];
- const xNext = points[p + 1][0], yNext = points[p + 1][1];
- angle = Math.atan2(yPrev - yNext, xPrev - xNext);
- var offset = (Math.atan(Math.pow(p * factor, 2) / widening) / 2 * width) + extraOffset;
- xLeft = x + -Math.sin(angle) * offset, yLeft = y + Math.cos(angle) * offset;
- riverPointsLeft.push({scX:xLeft, scY:yLeft});
- xRight = x + Math.sin(angle) * offset, yRight = y + -Math.cos(angle) * offset;
- riverPointsRight.unshift({scX:xRight, scY:yRight});
- }
-
- // end point
- x = points[last][0],y = points[last][1],c = points[last][2];
- if (c) {extraOffset += Math.atan(c * 10 / widening);} // confluence
- angle = Math.atan2(points[last-1][1] - y, points[last-1][0] - x);
- xLeft = x + -Math.sin(angle) * offset, yLeft = y + Math.cos(angle) * offset;
- riverPointsLeft.push({scX:xLeft, scY:yLeft});
- xRight = x + Math.sin(angle) * offset, yRight = y + -Math.cos(angle) * offset;
- riverPointsRight.unshift({scX:xRight, scY:yRight});
-
- // generate path and return
- const right = lineGen(riverPointsRight);
- let left = lineGen(riverPointsLeft);
- left = left.substring(left.indexOf("C"));
- return round(right + left, 2);
- }
-
- // draw river polygon with best quality
- function drawRiverSlow(points, width, increment) {
- lineGen.curve(d3.curveCatmullRom.alpha(0.1));
- width = width || 1;
- const extraOffset = 0.02 * width;
- increment = increment || 1;
- const riverPoints = points.map(function (p) {
- return {scX: p[0], scY: p[1]};
- });
- const river = defs.append("path").attr("d", lineGen(riverPoints));
- const riverLength = river.node().getTotalLength();
- const widening = rn((1000 + (riverLength * 30)) * increment);
- const riverPointsLeft = [], riverPointsRight = [];
-
- for (let l = 0; l < riverLength; l++) {
- var point = river.node().getPointAtLength(l);
- var from = river.node().getPointAtLength(l - 0.1);
- const to = river.node().getPointAtLength(l + 0.1);
- var angle = Math.atan2(from.y - to.y, from.x - to.x);
- var offset = (Math.atan(Math.pow(l, 2) / widening) / 2 * width) + extraOffset;
- var xLeft = point.x + -Math.sin(angle) * offset;
- var yLeft = point.y + Math.cos(angle) * offset;
- riverPointsLeft.push({scX:xLeft, scY:yLeft});
- var xRight = point.x + Math.sin(angle) * offset;
- var yRight = point.y + -Math.cos(angle) * offset;
- riverPointsRight.unshift({scX:xRight, scY:yRight});
- }
-
- var point = river.node().getPointAtLength(riverLength);
- var from = river.node().getPointAtLength(riverLength - 0.1);
- var angle = Math.atan2(from.y - point.y, from.x - point.x);
- var offset = (Math.atan(Math.pow(riverLength, 2) / widening) / 2 * width) + extraOffset;
- var xLeft = point.x + -Math.sin(angle) * offset;
- var yLeft = point.y + Math.cos(angle) * offset;
- riverPointsLeft.push({scX:xLeft, scY:yLeft});
- var xRight = point.x + Math.sin(angle) * offset;
- var yRight = point.y + -Math.cos(angle) * offset;
- riverPointsRight.unshift({scX:xRight, scY:yRight});
-
- river.remove();
- // generate path and return
- const right = lineGen(riverPointsRight);
- let left = lineGen(riverPointsLeft);
- left = left.substring(left.indexOf("C"));
- return round(right + left, 2);
- }
-
- // add lakes on depressed points on river course
- function addLakes() {
- console.time('addLakes');
- let smallLakes = 0;
- for (let i=0; i < land.length; i++) {
- // elavate all big lakes
- if (land[i].lake === 1) {
- land[i].height = 19;
- land[i].ctype = -1;
- }
- // define eligible small lakes
- if (land[i].lake === 2 && smallLakes < 100) {
- if (land[i].river !== undefined) {
- land[i].height = 19;
- land[i].ctype = -1;
- land[i].fn = -1;
- smallLakes++;
- } else {
- land[i].lake = undefined;
- land[i].neighbors.forEach(function(n) {
- if (cells[n].lake !== 1 && cells[n].river !== undefined) {
- cells[n].lake = 2;
- cells[n].height = 19;
- cells[n].ctype = -1;
- cells[n].fn = -1;
- smallLakes++;
- } else if (cells[n].lake === 2) {
- cells[n].lake = undefined;
- }
- });
- }
- }
- }
- console.log( "small lakes: " + smallLakes);
-
- // mark small lakes
- let unmarked = $.grep(land, function(e) {return e.fn === -1});
- while (unmarked.length) {
- let fn = -1, queue = [unmarked[0].index],lakeCells = [];
- unmarked[0].session = "addLakes";
- while (queue.length) {
- const q = queue.pop();
- lakeCells.push(q);
- if (cells[q].fn !== -1) fn = cells[q].fn;
- cells[q].neighbors.forEach(function(e) {
- if (cells[e].lake && cells[e].session !== "addLakes") {
- cells[e].session = "addLakes";
- queue.push(e);
- }
- });
- }
- if (fn === -1) {
- fn = features.length;
- features.push({i: fn, land: false, border: false});
- }
- lakeCells.forEach(function(c) {cells[c].fn = fn;});
- unmarked = $.grep(land, function(e) {return e.fn === -1});
- }
-
- land = $.grep(cells, function(e) {return e.height >= 20;});
- console.timeEnd('addLakes');
- }
-
- function editLabel() {
- if (customization) return;
-
- unselect();
- closeDialogs("#labelEditor, .stable");
- elSelected = d3.select(this).call(d3.drag().on("start", elementDrag)).classed("draggable", true);
-
- // update group parameters
- let group = d3.select(this.parentNode);
- updateGroupOptions();
- labelGroupSelect.value = group.attr("id");
- labelFontSelect.value = fonts.indexOf(group.attr("data-font"));
- labelSize.value = group.attr("data-size");
- labelColor.value = toHEX(group.attr("fill"));
- labelOpacity.value = group.attr("opacity");
- labelText.value = elSelected.text();
- const tr = parseTransform(elSelected.attr("transform"));
- labelAngle.value = tr[2];
- labelAngleValue.innerHTML = Math.abs(+tr[2]) + "°";
-
- $("#labelEditor").dialog({
- title: "Edit Label: " + labelText.value,
- minHeight: 30, width: "auto", maxWidth: 275, resizable: false,
- position: {my: "center top+10", at: "bottom", of: this},
- close: unselect
- });
-
- if (modules.editLabel) return;
- modules.editLabel = true;
-
- loadDefaultFonts();
-
- function updateGroupOptions() {
- labelGroupSelect.innerHTML = "";
- labels.selectAll("g:not(#burgLabels)").each(function(d) {
- if (this.parentNode.id === "burgLabels") return;
- let id = d3.select(this).attr("id");
- let opt = document.createElement("option");
- opt.value = opt.innerHTML = id;
- labelGroupSelect.add(opt);
- });
- }
-
- $("#labelGroupButton").click(function() {
- $("#labelEditor > button").not(this).toggle();
- $("#labelGroupButtons").toggle();
- });
-
- // on group change
- document.getElementById("labelGroupSelect").addEventListener("change", function() {
- document.getElementById(this.value).appendChild(elSelected.remove().node());
- });
-
- // toggle inputs to declare a new group
- document.getElementById("labelGroupNew").addEventListener("click", function() {
- if ($("#labelGroupInput").css("display") === "none") {
- $("#labelGroupInput").css("display", "inline-block");
- $("#labelGroupSelect").css("display", "none");
- labelGroupInput.focus();
- } else {
- $("#labelGroupSelect").css("display", "inline-block");
- $("#labelGroupInput").css("display", "none");
- }
- });
-
- // toggle inputs to select a group
- document.getElementById("labelExternalFont").addEventListener("click", function() {
- if ($("#labelFontInput").css("display") === "none") {
- $("#labelFontInput").css("display", "inline-block");
- $("#labelFontSelect").css("display", "none");
- labelFontInput.focus();
- } else {
- $("#labelFontSelect").css("display", "inline-block");
- $("#labelFontInput").css("display", "none");
- }
- });
-
- // on new group creation
- document.getElementById("labelGroupInput").addEventListener("change", function() {
- if (!this.value) {
- tip("Please provide a valid group name");
- return;
- }
- let group = this.value.toLowerCase().replace(/ /g, "_").replace(/[^\w\s]/gi, "");
- if (Number.isFinite(+group.charAt(0))) group = "g" + group;
- // if el with this id exists, add size to id
- while (labels.selectAll("#"+group).size()) {group += "_new";}
- createNewLabelGroup(group);
- });
-
- function createNewLabelGroup(g) {
- let group = elSelected.node().parentNode.cloneNode(false);
- let groupNew = labels.append(f => group).attr("id", g);
- groupNew.append(f => elSelected.remove().node());
- updateGroupOptions();
- $("#labelGroupSelect, #labelGroupInput").toggle();
- labelGroupInput.value = "";
- labelGroupSelect.value = g;
- updateLabelGroups();
- }
-
- // remove label group on click
- document.getElementById("labelGroupRemove").addEventListener("click", function() {
- let group = d3.select(elSelected.node().parentNode);
- let id = group.attr("id");
- let count = group.selectAll("text").size();
- // remove group with < 2 label without ask
- if (count < 2) {
- removeAllLabelsInGroup(id);
- $("#labelEditor").dialog("close");
- return;
- }
- alertMessage.innerHTML = "Are you sure you want to remove all labels (" + count + ") of that group?";
- $("#alert").dialog({resizable: false, title: "Remove label group",
- buttons: {
- Remove: function() {
- $(this).dialog("close");
- removeAllLabelsInGroup(id);
- $("#labelEditor").dialog("close");
- },
- Cancel: function() {$(this).dialog("close");}
- }
- });
- });
-
- $("#labelTextButton").click(function() {
- $("#labelEditor > button").not(this).toggle();
- $("#labelTextButtons").toggle();
- });
-
- // on label text change
- document.getElementById("labelText").addEventListener("input", function() {
- if (!this.value) {
- tip("Name should not be blank, set opacity to 0 to hide label or click remove button to delete");
- return;
- }
- // change Label text
- if (elSelected.select("textPath").size()) elSelected.select("textPath").text(this.value);
- else elSelected.text(this.value);
- $("div[aria-describedby='labelEditor'] .ui-dialog-title").text("Edit Label: " + this.value);
- // check if label is a country name
- let id = elSelected.attr("id") || "";
- if (id.includes("regionLabel")) {
- let state = +elSelected.attr("id").slice(11);
- states[state].name = this.value;
- }
- });
-
- // generate a random country name
- document.getElementById("labelTextRandom").addEventListener("click", function() {
- let name = elSelected.text();
- let id = elSelected.attr("id") || "";
- if (id.includes("regionLabel")) {
- // label is a country name
- let state = +elSelected.attr("id").slice(11);
- name = generateStateName(state.i);
- states[state].name = name;
- } else {
- // label is not a country name, use random culture
- let c = elSelected.node().getBBox();
- let closest = cultureTree.find((c.x + c.width / 2), (c.y + c.height / 2));
- let culture = Math.floor(Math.random() * cultures.length);
- name = generateName(culture);
- }
- labelText.value = name;
- $("div[aria-describedby='labelEditor'] .ui-dialog-title").text("Edit Label: " + name);
- // change Label text
- if (elSelected.select("textPath").size()) elSelected.select("textPath").text(name);
- else elSelected.text(name);
- });
-
- $("#labelFontButton").click(function() {
- $("#labelEditor > button").not(this).toggle();
- $("#labelFontButtons").toggle();
- });
-
- // on label font change
- document.getElementById("labelFontSelect").addEventListener("change", function() {
- let group = elSelected.node().parentNode;
- let font = fonts[this.value].split(':')[0].replace(/\+/g, " ");
- group.setAttribute("font-family", font);
- group.setAttribute("data-font", fonts[this.value]);
- });
-
- // on adding custom font
- document.getElementById("labelFontInput").addEventListener("change", function() {
- fetchFonts(this.value).then(fetched => {
- if (!fetched) return;
- labelExternalFont.click();
- labelFontInput.value = "";
- if (fetched === 1) $("#labelFontSelect").val(fonts.length - 1).change();
- });
- });
-
- // on label size input
- document.getElementById("labelSize").addEventListener("input", function() {
- let group = elSelected.node().parentNode;
- let size = +this.value;
- group.setAttribute("data-size", size);
- group.setAttribute("font-size", rn((size + (size / scale)) / 2, 2))
- });
-
- $("#labelStyleButton").click(function() {
- $("#labelEditor > button").not(this).toggle();
- $("#labelStyleButtons").toggle();
- });
-
- // on label fill color input
- document.getElementById("labelColor").addEventListener("input", function() {
- let group = elSelected.node().parentNode;
- group.setAttribute("fill", this.value);
- });
-
- // on label opacity input
- document.getElementById("labelOpacity").addEventListener("input", function() {
- let group = elSelected.node().parentNode;
- group.setAttribute("opacity", this.value);
- });
-
- $("#labelAngleButton").click(function() {
- $("#labelEditor > button").not(this).toggle();
- $("#labelAngleButtons").toggle();
- });
-
- // on label angle input
- document.getElementById("labelAngle").addEventListener("input", function() {
- const tr = parseTransform(elSelected.attr("transform"));
- labelAngleValue.innerHTML = Math.abs(+this.value) + "°";
- const c = elSelected.node().getBBox();
- const angle = +this.value;
- const transform = `translate(${tr[0]},${tr[1]}) rotate(${angle} ${(c.x+c.width/2)} ${(c.y+c.height/2)})`;
- elSelected.attr("transform", transform);
- });
-
- // display control points to curve label (place on path)
- document.getElementById("labelCurve").addEventListener("click", function() {
- let c = elSelected.node().getBBox();
- let cx = c.x + c.width / 2, cy = c.y + c.height / 2;
-
- if (!elSelected.select("textPath").size()) {
- let id = elSelected.attr("id");
- let pathId = "#textPath_" + id;
- let path = `M${cx-c.width},${cy} q${c.width},0 ${c.width * 2},0`;
- let text = elSelected.text(), x = elSelected.attr("x"), y = elSelected.attr("y");
- elSelected.text(null).attr("data-x", x).attr("data-y", y).attr("x", null).attr("y", null);
- defs.append("path").attr("id", "textPath_" + id).attr("d", path);
- elSelected.append("textPath").attr("href", pathId).attr("startOffset", "50%").text(text);
- }
-
- if (!debug.select("circle").size()) {
- debug.append("circle").attr("id", "textPathControl").attr("r", 1.6)
- .attr("cx", cx).attr("cy", cy).attr("transform", elSelected.attr("transform") || null)
- .call(d3.drag().on("start", textPathControlDrag));
- }
- });
-
- // drag textPath controle point to curve the label
- function textPathControlDrag() {
- let textPath = defs.select("#textPath_" + elSelected.attr("id"));
- let path = textPath.attr("d").split(" ");
- let M = path[0].split(",");
- let q = path[1].split(","); // +q[1] to get qy - the only changeble value
- let y = d3.event.y;
-
- d3.event.on("drag", function() {
- let dy = d3.event.y - y;
- let total = +q[1] + dy * 8;
- d3.select(this).attr("cy", d3.event.y);
- textPath.attr("d", `${M[0]},${+M[1] - dy} ${q[0]},${total} ${path[2]}`);
- });
- }
-
- // cancel label curvature
- document.getElementById("labelCurveCancel").addEventListener("click", function() {
- if (!elSelected.select("textPath").size()) return;
- let text = elSelected.text(), x = elSelected.attr("data-x"), y = elSelected.attr("data-y");
- elSelected.text();
- elSelected.attr("x", x).attr("y", y).attr("data-x", null).attr("data-y", null).text(text);
- defs.select("#textPath_" + elSelected.attr("id")).remove();
- debug.select("circle").remove();
- });
-
- // open legendsEditor
- document.getElementById("labelLegend").addEventListener("click", function() {
- let id = elSelected.attr("id");
- let name = elSelected.text();
- editLegends(id, name);
- });
-
- // copy label on click
- document.getElementById("labelCopy").addEventListener("click", function() {
- let group = d3.select(elSelected.node().parentNode);
- copy = group.append(f => elSelected.node().cloneNode(true));
- let id = "label" + Date.now().toString().slice(7);
- copy.attr("id", id).attr("class", null).on("click", editLabel);
- let shift = +group.attr("font-size") + 1;
- if (copy.select("textPath").size()) {
- let path = defs.select("#textPath_" + elSelected.attr("id")).attr("d");
- let textPath = defs.append("path").attr("id", "textPath_" + id);
- copy.select("textPath").attr("href", "#textPath_" + id);
- let pathArray = path.split(" ");
- let x = +pathArray[0].split(",")[0].slice(1);
- let y = +pathArray[0].split(",")[1];
- textPath.attr("d", `M${x-shift},${y-shift} ${pathArray[1]} ${pathArray[2]}`);shift
- } else {
- let x = +elSelected.attr("x") - shift;
- let y = +elSelected.attr("y") - shift;
- while (group.selectAll("text[x='" + x + "']").size()) {x -= shift; y -= shift;}
- copy.attr("x", x).attr("y", y);
- }
- });
-
- // remove label on click
- document.getElementById("labelRemoveSingle").addEventListener("click", function() {
- alertMessage.innerHTML = "Are you sure you want to remove the label?";
- $("#alert").dialog({resizable: false, title: "Remove label",
- buttons: {
- Remove: function() {
- $(this).dialog("close");
- elSelected.remove();
- defs.select("#textPath_" + elSelected.attr("id")).remove();
- $("#labelEditor").dialog("close");
- },
- Cancel: function() {$(this).dialog("close");}
- }
- });
- });
- }
-
- function editRiver() {
- if (customization) return;
- if (elSelected) {
- const self = d3.select(this).attr("id") === elSelected.attr("id");
- const point = d3.mouse(this);
- if (elSelected.attr("data-river") === "new") {
- addRiverPoint([point[0],point[1]]);
- completeNewRiver();
- return;
- } else if (self) {
- riverAddControlPoint(point);
- return;
- }
- }
-
- unselect();
- closeDialogs("#riverEditor, .stable");
- elSelected = d3.select(this);
- elSelected.call(d3.drag().on("start", riverDrag));
-
- const tr = parseTransform(elSelected.attr("transform"));
- riverAngle.value = tr[2];
- riverAngleValue.innerHTML = Math.abs(+tr[2]) + "°";
- riverScale.value = tr[5];
- riverWidthInput.value = +elSelected.attr("data-width");
- riverIncrement.value = +elSelected.attr("data-increment");
-
- $("#riverEditor").dialog({
- title: "Edit River",
- minHeight: 30, width: "auto", resizable: false,
- position: {my: "center top+20", at: "top", of: d3.event},
- close: function() {
- if ($("#riverNew").hasClass('pressed')) completeNewRiver();
- unselect();
- }
- });
-
- if (!debug.select(".controlPoints").size()) debug.append("g").attr("class", "controlPoints");
- riverDrawPoints();
-
- if (modules.editRiver) {return;}
- modules.editRiver = true;
-
- function riverAddControlPoint(point) {
- let dists = [];
- debug.select(".controlPoints").selectAll("circle").each(function() {
- const x = +d3.select(this).attr("cx");
- const y = +d3.select(this).attr("cy");
- dists.push(Math.hypot(point[0] - x, point[1] - y));
- });
- let index = dists.length;
- if (dists.length > 1) {
- const sorted = dists.slice(0).sort(function(a, b) {return a-b;});
- const closest = dists.indexOf(sorted[0]);
- const next = dists.indexOf(sorted[1]);
- if (closest <= next) {index = closest+1;} else {index = next+1;}
- }
- const before = ":nth-child(" + (index + 1) + ")";
- debug.select(".controlPoints").insert("circle", before)
- .attr("cx", point[0]).attr("cy", point[1]).attr("r", 0.35)
- .call(d3.drag().on("drag", riverPointDrag))
- .on("click", function(d) {
- $(this).remove();
- redrawRiver();
- });
- redrawRiver();
- }
-
- function riverDrawPoints() {
- const node = elSelected.node();
- // river is a polygon, so divide length by 2 to get course length
- const l = node.getTotalLength() / 2;
- const parts = (l / 5) >> 0; // number of points
- let inc = l / parts; // increment
- if (inc === Infinity) {inc = l;} // 2 control points for short rivers
- // draw control points
- for (let i = l, c = l; i > 0; i -= inc, c += inc) {
- const p1 = node.getPointAtLength(i);
- const p2 = node.getPointAtLength(c);
- const p = [(p1.x + p2.x) / 2, (p1.y + p2.y) / 2];
- addRiverPoint(p);
- }
- // last point should be accurate
- const lp1 = node.getPointAtLength(0);
- const lp2 = node.getPointAtLength(l * 2);
- const p = [(lp1.x + lp2.x) / 2, (lp1.y + lp2.y) / 2];
- addRiverPoint(p);
- }
-
- function addRiverPoint(point) {
- debug.select(".controlPoints").append("circle")
- .attr("cx", point[0]).attr("cy", point[1]).attr("r", 0.35)
- .call(d3.drag().on("drag", riverPointDrag))
- .on("click", function(d) {
- $(this).remove();
- redrawRiver();
- });
- }
-
- function riverPointDrag() {
- d3.select(this).attr("cx", d3.event.x).attr("cy", d3.event.y);
- redrawRiver();
- }
-
- function riverDrag() {
- const x = d3.event.x, y = d3.event.y;
- const tr = parseTransform(elSelected.attr("transform"));
- d3.event.on("drag", function() {
- let xc = d3.event.x, yc = d3.event.y;
- let transform = `translate(${(+tr[0]+xc-x)},${(+tr[1]+yc-y)}) rotate(${tr[2]} ${tr[3]} ${tr[4]}) scale(${tr[5]})`;
- elSelected.attr("transform", transform);
- debug.select(".controlPoints").attr("transform", transform);
- });
- }
-
- function redrawRiver() {
- let points = [];
- debug.select(".controlPoints").selectAll("circle").each(function() {
- const el = d3.select(this);
- points.push([+el.attr("cx"), +el.attr("cy")]);
- });
- const width = +riverWidthInput.value;
- const increment = +riverIncrement.value;
- const d = drawRiverSlow(points, width, increment);
- elSelected.attr("d", d);
- }
-
- $("#riverWidthInput, #riverIncrement").change(function() {
- const width = +riverWidthInput.value;
- const increment = +riverIncrement.value;
- elSelected.attr("data-width", width).attr("data-increment", increment);
- redrawRiver();
- });
-
- $("#riverRegenerate").click(function() {
- let points = [],amended = [],x, y, p1, p2;
- const node = elSelected.node();
- const l = node.getTotalLength() / 2;
- const parts = (l / 8) >> 0; // number of points
- let inc = l / parts; // increment
- if (inc === Infinity) {inc = l;} // 2 control points for short rivers
- for (let i = l, e = l; i > 0; i -= inc, e += inc) {
- p1 = node.getPointAtLength(i);
- p2 = node.getPointAtLength(e);
- x = (p1.x + p2.x) / 2, y = (p1.y + p2.y) / 2;
- points.push([x, y]);
- }
- // last point should be accurate
- p1 = node.getPointAtLength(0);
- p2 = node.getPointAtLength(l * 2);
- x = (p1.x + p2.x) / 2, y = (p1.y + p2.y) / 2;
- points.push([x, y]);
- // amend points
- const rndFactor = 0.3 + Math.random() * 1.4; // random factor in range 0.2-1.8
- for (let i = 0; i < points.length; i++) {
- x = points[i][0],y = points[i][1];
- amended.push([x, y]);
- // add additional semi-random point
- if (i + 1 < points.length) {
- const x2 = points[i+1][0],y2 = points[i+1][1];
- let side = Math.random() > 0.5 ? 1 : -1;
- const angle = Math.atan2(y2 - y, x2 - x);
- const serpentine = 2 / (i+1);
- const meandr = serpentine + 0.3 + Math.random() * rndFactor;
- x = (x + x2) / 2, y = (y + y2) / 2;
- x += -Math.sin(angle) * meandr * side;
- y += Math.cos(angle) * meandr * side;
- amended.push([x, y]);
- }
- }
- const width = +riverWidthInput.value * 0.6 + Math.random();
- const increment = +riverIncrement.value * 0.9 + Math.random() * 0.2;
- riverWidthInput.value = width;
- riverIncrement.value = increment;
- elSelected.attr("data-width", width).attr("data-increment", increment);
- const d = drawRiverSlow(amended, width, increment);
- elSelected.attr("d", d).attr("data-width", width).attr("data-increment", increment);
- debug.select(".controlPoints").selectAll("*").remove();
- amended.map(function(p) {addRiverPoint(p);});
- });
-
- $("#riverAngle").on("input", function() {
- const tr = parseTransform(elSelected.attr("transform"));
- riverAngleValue.innerHTML = Math.abs(+this.value) + "°";
- const c = elSelected.node().getBBox();
- const angle = +this.value, scale = +tr[5];
- const transform = `translate(${tr[0]},${tr[1]}) rotate(${angle} ${(c.x+c.width/2)*scale} ${(c.y+c.height/2)*scale}) scale(${scale})`;
- elSelected.attr("transform", transform);
- debug.select(".controlPoints").attr("transform", transform);
- });
-
- $("#riverReset").click(function() {
- elSelected.attr("transform", "");
- debug.select(".controlPoints").attr("transform", "");
- riverAngle.value = 0;
- riverAngleValue.innerHTML = "0°";
- riverScale.value = 1;
- });
-
- $("#riverScale").change(function() {
- const tr = parseTransform(elSelected.attr("transform"));
- const scaleOld = +tr[5],scale = +this.value;
- const c = elSelected.node().getBBox();
- const cx = c.x + c.width / 2, cy = c.y + c.height / 2;
- const trX = +tr[0] + cx * (scaleOld - scale);
- const trY = +tr[1] + cy * (scaleOld - scale);
- const scX = +tr[3] * scale/scaleOld;
- const scY = +tr[4] * scale/scaleOld;
- const transform = `translate(${trX},${trY}) rotate(${tr[2]} ${scX} ${scY}) scale(${scale})`;
- elSelected.attr("transform", transform);
- debug.select(".controlPoints").attr("transform", transform);
- });
-
- $("#riverNew").click(function() {
- if ($(this).hasClass('pressed')) {
- completeNewRiver();
- } else {
- // enter creation mode
- $(".pressed").removeClass('pressed');
- $(this).addClass('pressed');
- if (elSelected) elSelected.call(d3.drag().on("drag", null));
- debug.select(".controlPoints").selectAll("*").remove();
- viewbox.style("cursor", "crosshair").on("click", newRiverAddPoint);
- }
- });
-
- function newRiverAddPoint() {
- const point = d3.mouse(this);
- addRiverPoint([point[0],point[1]]);
- if (!elSelected || elSelected.attr("data-river") !== "new") {
- const id = +$("#rivers > path").last().attr("id").slice(5) + 1;
- elSelected = rivers.append("path").attr("data-river", "new").attr("id", "river"+id)
- .attr("data-width", 2).attr("data-increment", 1).on("click", completeNewRiver);
- } else {
- redrawRiver();
- let cell = diagram.find(point[0],point[1]).index;
- let f = cells[cell].fn;
- let ocean = !features[f].land && features[f].border;
- if (ocean && debug.select(".controlPoints").selectAll("circle").size() > 5) completeNewRiver();
- }
- }
-
- function completeNewRiver() {
- $("#riverNew").removeClass('pressed');
- restoreDefaultEvents();
- if (!elSelected || elSelected.attr("data-river") !== "new") return;
- redrawRiver();
- elSelected.attr("data-river", "");
- elSelected.call(d3.drag().on("start", riverDrag)).on("click", editRiver);
- const r = +elSelected.attr("id").slice(5);
- debug.select(".controlPoints").selectAll("circle").each(function() {
- const x = +d3.select(this).attr("cx");
- const y = +d3.select(this).attr("cy");
- const cell = diagram.find(x, y, 3);
- if (!cell) return;
- if (cells[cell.index].river === undefined) cells[cell.index].river = r;
- });
- unselect();
- debug.append("g").attr("class", "controlPoints");
- }
-
- $("#riverCopy").click(function() {
- const tr = parseTransform(elSelected.attr("transform"));
- const d = elSelected.attr("d");
- let x = 2, y = 2;
- let transform = `translate(${tr[0]-x},${tr[1]-y}) rotate(${tr[2]} ${tr[3]} ${tr[4]}) scale(${tr[5]})`;
- while (rivers.selectAll("[transform='" + transform + "'][d='" + d + "']").size() > 0) {
- x += 2; y += 2;
- transform = `translate(${tr[0]-x},${tr[1]-y}) rotate(${tr[2]} ${tr[3]} ${tr[4]}) scale(${tr[5]})`;
- }
- const river = +$("#rivers > path").last().attr("id").slice(5) + 1;
- rivers.append("path").attr("d", d)
- .attr("transform", transform)
- .attr("id", "river"+river).on("click", editRiver)
- .attr("data-width", elSelected.attr("data-width"))
- .attr("data-increment", elSelected.attr("data-increment"));
- unselect();
- });
-
- // open legendsEditor
- document.getElementById("riverLegend").addEventListener("click", function() {
- let id = elSelected.attr("id");
- editLegends(id, id);
- });
-
- $("#riverRemove").click(function() {
- alertMessage.innerHTML = `Are you sure you want to remove the river?`;
- $("#alert").dialog({resizable: false, title: "Remove river",
- buttons: {
- Remove: function() {
- $(this).dialog("close");
- const river = +elSelected.attr("id").slice(5);
- const avPrec = rn(precInput.value / Math.sqrt(cells.length), 2);
- land.map(function(l) {
- if (l.river === river) {
- l.river = undefined;
- l.flux = avPrec;
- }
- });
- elSelected.remove();
- unselect();
- $("#riverEditor").dialog("close");
- },
- Cancel: function() {$(this).dialog("close");}
- }
- })
- });
-
- }
-
- function editRoute() {
- if (customization) {return;}
- if (elSelected) {
- const self = d3.select(this).attr("id") === elSelected.attr("id");
- const point = d3.mouse(this);
- if (elSelected.attr("data-route") === "new") {
- addRoutePoint({x:point[0],y:point[1]});
- completeNewRoute();
- return;
- } else if (self) {
- routeAddControlPoint(point);
- return;
- }
- }
-
- unselect();
- closeDialogs("#routeEditor, .stable");
-
- if (this && this !== window) {
- elSelected = d3.select(this);
- if (!debug.select(".controlPoints").size()) debug.append("g").attr("class", "controlPoints");
- routeDrawPoints();
- routeUpdateGroups();
- let routeType = d3.select(this.parentNode).attr("id");
- routeGroup.value = routeType;
-
- $("#routeEditor").dialog({
- title: "Edit Route",
- minHeight: 30, width: "auto", resizable: false,
- position: {my: "center top+20", at: "top", of: d3.event},
- close: function() {
- if ($("#addRoute").hasClass('pressed')) completeNewRoute();
- if ($("#routeSplit").hasClass('pressed')) $("#routeSplit").removeClass('pressed');
- unselect();
- }
- });
- } else {elSelected = null;}
-
- if (modules.editRoute) {return;}
- modules.editRoute = true;
-
- function routeAddControlPoint(point) {
- let dists = [];
- debug.select(".controlPoints").selectAll("circle").each(function() {
- const x = +d3.select(this).attr("cx");
- const y = +d3.select(this).attr("cy");
- dists.push(Math.hypot(point[0] - x, point[1] - y));
- });
- let index = dists.length;
- if (dists.length > 1) {
- const sorted = dists.slice(0).sort(function(a, b) {return a-b;});
- const closest = dists.indexOf(sorted[0]);
- const next = dists.indexOf(sorted[1]);
- if (closest <= next) {index = closest+1;} else {index = next+1;}
- }
- const before = ":nth-child(" + (index + 1) + ")";
- debug.select(".controlPoints").insert("circle", before)
- .attr("cx", point[0]).attr("cy", point[1]).attr("r", 0.35)
- .call(d3.drag().on("drag", routePointDrag))
- .on("click", function(d) {
- $(this).remove();
- routeRedraw();
- });
- routeRedraw();
- }
-
- function routeDrawPoints() {
- if (!elSelected.size()) return;
- const node = elSelected.node();
- const l = node.getTotalLength();
- const parts = (l / 5) >> 0; // number of points
- let inc = l / parts; // increment
- if (inc === Infinity) inc = l; // 2 control points for short routes
- // draw control points
- for (let i = 0; i <= l; i += inc) {
- const p = node.getPointAtLength(i);
- addRoutePoint(p);
- }
- // convert length to distance
- routeLength.innerHTML = rn(l * distanceScale.value) + " " + distanceUnit.value;
- }
-
- function addRoutePoint(point) {
- const controlPoints = debug.select(".controlPoints").size()
- ? debug.select(".controlPoints")
- : debug.append("g").attr("class", "controlPoints");
- controlPoints.append("circle")
- .attr("cx", point.x).attr("cy", point.y).attr("r", 0.35)
- .call(d3.drag().on("drag", routePointDrag))
- .on("click", function(d) {
- if ($("#routeSplit").hasClass('pressed')) {
- routeSplitInPoint(this);
- } else {
- $(this).remove();
- routeRedraw();
- }
- });
- }
-
- function routePointDrag() {
- d3.select(this).attr("cx", d3.event.x).attr("cy", d3.event.y);
- routeRedraw();
- }
-
- function routeRedraw() {
- let points = [];
- debug.select(".controlPoints").selectAll("circle").each(function() {
- const el = d3.select(this);
- points.push({scX: +el.attr("cx"), scY: +el.attr("cy")});
- });
- lineGen.curve(d3.curveCatmullRom.alpha(0.1));
- elSelected.attr("d", lineGen(points));
- // get route distance
- const l = elSelected.node().getTotalLength();
- routeLength.innerHTML = rn(l * distanceScale.value) + " " + distanceUnit.value;
- }
-
- function addNewRoute() {
- let routeType = elSelected && elSelected.node() ? elSelected.node().parentNode.id : "searoutes";
- const group = routes.select("#"+routeType);
- const id = routeType + "" + group.selectAll("*").size();
- elSelected = group.append("path").attr("data-route", "new").attr("id", id).on("click", editRoute);
- routeUpdateGroups();
- $("#routeEditor").dialog({
- title: "Edit Route", minHeight: 30, width: "auto", resizable: false,
- close: function() {
- if ($("#addRoute").hasClass('pressed')) completeNewRoute();
- if ($("#routeSplit").hasClass('pressed')) $("#routeSplit").removeClass('pressed');
- unselect();
- }
- });
- }
-
- function newRouteAddPoint() {
- const point = d3.mouse(this);
- const x = rn(point[0],2), y = rn(point[1],2);
- addRoutePoint({x, y});
- routeRedraw();
- }
-
- function completeNewRoute() {
- $("#routeNew, #addRoute").removeClass('pressed');
- restoreDefaultEvents();
- if (!elSelected.size()) return;
- if (elSelected.attr("data-route") === "new") {
- routeRedraw();
- elSelected.attr("data-route", "");
- const node = elSelected.node();
- const l = node.getTotalLength();
- let pathCells = [];
- for (let i = 0; i <= l; i ++) {
- const p = node.getPointAtLength(i);
- const cell = diagram.find(p.x, p.y);
- if (!cell) {return;}
- pathCells.push(cell.index);
- }
- const uniqueCells = [...new Set(pathCells)];
- uniqueCells.map(function(c) {
- if (cells[c].path !== undefined) {cells[c].path += 1;}
- else {cells[c].path = 1;}
- });
- }
- tip("", true);
- }
-
- function routeUpdateGroups() {
- routeGroup.innerHTML = "";
- routes.selectAll("g").each(function() {
- const opt = document.createElement("option");
- opt.value = opt.innerHTML = this.id;
- routeGroup.add(opt);
- });
- }
-
- function routeSplitInPoint(clicked) {
- const group = d3.select(elSelected.node().parentNode);
- $("#routeSplit").removeClass('pressed');
- const points1 = [],points2 = [];
- let points = points1;
- debug.select(".controlPoints").selectAll("circle").each(function() {
- const el = d3.select(this);
- points.push({scX: +el.attr("cx"), scY: +el.attr("cy")});
- if (this === clicked) {
- points = points2;
- points.push({scX: +el.attr("cx"), scY: +el.attr("cy")});
- }
- el.remove();
- });
- lineGen.curve(d3.curveCatmullRom.alpha(0.1));
- elSelected.attr("d", lineGen(points1));
- const id = routeGroup.value + "" + group.selectAll("*").size();
- group.append("path").attr("id", id).attr("d", lineGen(points2)).on("click", editRoute);
- routeDrawPoints();
- }
-
- $("#routeGroup").change(function() {
- $(elSelected.node()).detach().appendTo($("#"+this.value));
- });
-
- // open legendsEditor
- document.getElementById("routeLegend").addEventListener("click", function() {
- let id = elSelected.attr("id");
- editLegends(id, id);
- });
-
- $("#routeNew").click(function() {
- if ($(this).hasClass('pressed')) {
- completeNewRoute();
- } else {
- // enter creation mode
- $(".pressed").removeClass('pressed');
- $("#routeNew, #addRoute").addClass('pressed');
- debug.select(".controlPoints").selectAll("*").remove();
- addNewRoute();
- viewbox.style("cursor", "crosshair").on("click", newRouteAddPoint);
- tip("Click on map to add route point", true);
- }
- });
-
- $("#routeRemove").click(function() {
- alertMessage.innerHTML = `Are you sure you want to remove the route?`;
- $("#alert").dialog({resizable: false, title: "Remove route",
- buttons: {
- Remove: function() {
- $(this).dialog("close");
- elSelected.remove();
- $("#routeEditor").dialog("close");
- },
- Cancel: function() {$(this).dialog("close");}
- }
- })
- });
- }
-
- function editIcon() {
- if (customization) return;
- if (elSelected) if (this.isSameNode(elSelected.node())) return;
-
- unselect();
- closeDialogs("#iconEditor, .stable");
- elSelected = d3.select(this).call(d3.drag().on("start", elementDrag)).classed("draggable", true);
-
- // update group parameters
- const group = d3.select(this.parentNode);
- iconUpdateGroups();
- iconGroup.value = group.attr("id");
- iconFillColor.value = group.attr("fill");
- iconStrokeColor.value = group.attr("stroke");
- iconSize.value = group.attr("size");
- iconStrokeWidth.value = group.attr("stroke-width");
-
- $("#iconEditor").dialog({
- title: "Edit icon: " + group.attr("id"),
- minHeight: 30, width: "auto", resizable: false,
- position: {my: "center top+20", at: "top", of: d3.event},
- close: unselect
- });
-
- if (modules.editIcon) {return;}
- modules.editIcon = true;
-
- $("#iconGroups").click(function() {
- $("#iconEditor > button").not(this).toggle();
- $("#iconGroupsSelection").toggle();
- });
-
- function iconUpdateGroups() {
- iconGroup.innerHTML = "";
- const anchor = group.attr("id").includes("anchor");
- icons.selectAll("g").each(function(d) {
- const id = d3.select(this).attr("id");
- if (id === "burgs") return;
- if (!anchor && id.includes("anchor")) return;
- if (anchor && !id.includes("anchor")) return;
- const opt = document.createElement("option");
- opt.value = opt.innerHTML = id;
- iconGroup.add(opt);
- });
- }
-
- $("#iconGroup").change(function() {
- const newGroup = this.value;
- const to = $("#icons > #"+newGroup);
- $(elSelected.node()).detach().appendTo(to);
- });
-
- $("#iconCopy").click(function() {
- const group = d3.select(elSelected.node().parentNode);
- const copy = elSelected.node().cloneNode();
- copy.removeAttribute("data-id"); // remove assignment to burg if any
- const tr = parseTransform(copy.getAttribute("transform"));
- const shift = 10 / Math.sqrt(scale);
- let transform = "translate(" + rn(tr[0] - shift, 1) + "," + rn(tr[1] - shift, 1) + ")";
- for (let i=2; group.selectAll("[transform='" + transform + "']").size() > 0; i++) {
- transform = "translate(" + rn(tr[0] - shift * i, 1) + "," + rn(tr[1] - shift * i, 1) + ")";
- }
- copy.setAttribute("transform", transform);
- group.node().insertBefore(copy, null);
- copy.addEventListener("click", editIcon);
- });
-
- $("#iconRemoveGroup").click(function() {
- const group = d3.select(elSelected.node().parentNode);
- const count = group.selectAll("*").size();
- if (count < 2) {
- group.remove();
- $("#labelEditor").dialog("close");
- return;
- }
- const message = "Are you sure you want to remove all '" + iconGroup.value + "' icons (" + count + ")?";
- alertMessage.innerHTML = message;
- $("#alert").dialog({resizable: false, title: "Remove icon group",
- buttons: {
- Remove: function() {
- $(this).dialog("close");
- group.remove();
- $("#iconEditor").dialog("close");
- },
- Cancel: function() {$(this).dialog("close");}
- }
- });
- });
-
- $("#iconColors").click(function() {
- $("#iconEditor > button").not(this).toggle();
- $("#iconColorsSection").toggle();
- });
-
- $("#iconFillColor").change(function() {
- const group = d3.select(elSelected.node().parentNode);
- group.attr("fill", this.value);
- });
-
- $("#iconStrokeColor").change(function() {
- const group = d3.select(elSelected.node().parentNode);
- group.attr("stroke", this.value);
- });
-
- $("#iconSetSize").click(function() {
- $("#iconEditor > button").not(this).toggle();
- $("#iconSizeSection").toggle();
- });
-
- $("#iconSize").change(function() {
- const group = d3.select(elSelected.node().parentNode);
- const size = +this.value;
- group.attr("size", size);
- group.selectAll("*").each(function() {d3.select(this).attr("width", size).attr("height", size)});
- });
-
- $("#iconStrokeWidth").change(function() {
- const group = d3.select(elSelected.node().parentNode);
- group.attr("stroke-width", this.value);
- });
-
- $("#iconRemove").click(function() {
- alertMessage.innerHTML = `Are you sure you want to remove the icon?`;
- $("#alert").dialog({resizable: false, title: "Remove icon",
- buttons: {
- Remove: function() {
- $(this).dialog("close");
- elSelected.remove();
- $("#iconEditor").dialog("close");
- },
- Cancel: function() {$(this).dialog("close");}
- }
- })
- });
- }
-
- function editReliefIcon() {
- if (customization) return;
- if (elSelected) if (this.isSameNode(elSelected.node())) return;
-
- unselect();
- closeDialogs("#reliefEditor, .stable");
- elSelected = d3.select(this).raise().call(d3.drag().on("start", elementDrag)).classed("draggable", true);
- const group = elSelected.node().parentNode.id;
- reliefGroup.value = group;
-
- let bulkRemoveSection = document.getElementById("reliefBulkRemoveSection");
- if (bulkRemoveSection.style.display != "none") reliefBulkRemove.click();
-
- $("#reliefEditor").dialog({
- title: "Edit relief icon",
- minHeight: 30, width: "auto", resizable: false,
- position: {my: "center top+40", at: "top", of: d3.event},
- close: unselect
- });
-
- if (modules.editReliefIcon) {return;}
- modules.editReliefIcon = true;
-
- $("#reliefGroups").click(function() {
- $("#reliefEditor > button").not(this).toggle();
- $("#reliefGroupsSelection").toggle();
- });
-
- $("#reliefGroup").change(function() {
- const type = this.value;
- const bbox = elSelected.node().getBBox();
- const cx = bbox.x;
- const cy = bbox.y + bbox.height / 2;
- const cell = diagram.find(cx, cy).index;
- const height = cell !== undefined ? cells[cell].height : 50;
- elSelected.remove();
- elSelected = addReliefIcon(height / 100, type, cx, cy, cell);
- elSelected.call(d3.drag().on("start", elementDrag));
- });
-
- $("#reliefCopy").click(function() {
- const group = d3.select(elSelected.node().parentNode);
- const copy = elSelected.node().cloneNode(true);
- const tr = parseTransform(copy.getAttribute("transform"));
- const shift = 10 / Math.sqrt(scale);
- let transform = "translate(" + rn(tr[0] - shift, 1) + "," + rn(tr[1] - shift, 1) + ")";
- for (let i=2; group.selectAll("[transform='" + transform + "']").size() > 0; i++) {
- transform = "translate(" + rn(tr[0] - shift * i, 1) + "," + rn(tr[1] - shift * i, 1) + ")";
- }
- copy.setAttribute("transform", transform);
- group.node().insertBefore(copy, null);
- copy.addEventListener("click", editReliefIcon);
- });
-
- $("#reliefAddfromEditor").click(function() {
- clickToAdd(); // to load on click event function
- $("#addRelief").click();
- });
-
- $("#reliefRemoveGroup").click(function() {
- const group = d3.select(elSelected.node().parentNode);
- const count = group.selectAll("*").size();
- if (count < 2) {
- group.selectAll("*").remove();
- $("#labelEditor").dialog("close");
- return;
- }
- const message = "Are you sure you want to remove all '" + reliefGroup.value + "' icons (" + count + ")?";
- alertMessage.innerHTML = message;
- $("#alert").dialog({resizable: false, title: "Remove all icons within group",
- buttons: {
- Remove: function() {
- $(this).dialog("close");
- group.selectAll("*").remove();
- $("#reliefEditor").dialog("close");
- },
- Cancel: function() {$(this).dialog("close");}
- }
- });
- });
-
- $("#reliefBulkRemove").click(function() {
- $("#reliefEditor > button").not(this).toggle();
- let section = document.getElementById("reliefBulkRemoveSection");
- if (section.style.display === "none") {
- section.style.display = "inline-block";
- tip("Drag to remove relief icons in radius", true);
- viewbox.style("cursor", "crosshair").call(d3.drag().on("drag", dragToRemoveReliefIcons));
- customization = 5;
- } else {
- section.style.display = "none";
- restoreDefaultEvents();
- customization = 0;
- }
- });
-
- function dragToRemoveReliefIcons() {
- let point = d3.mouse(this);
- let cell = diagram.find(point[0], point[1]).index;
- let radius = +reliefBulkRemoveRadius.value;
- let r = rn(6 / graphSize * radius, 1);
- moveCircle(point[0], point[1], r);
- let selection = defineBrushSelection(cell, radius);
- if (selection) removeReliefIcons(selection);
- }
-
- function removeReliefIcons(selection) {
- if (selection.length === 0) return;
- selection.map(function(index) {
- const selected = terrain.selectAll("g").selectAll("g[data-cell='"+index+"']");
- selected.remove();
- });
- }
-
- $("#reliefRemove").click(function() {
- alertMessage.innerHTML = `Are you sure you want to remove the icon?`;
- $("#alert").dialog({resizable: false, title: "Remove relief icon",
- buttons: {
- Remove: function() {
- $(this).dialog("close");
- elSelected.remove();
- $("#reliefEditor").dialog("close");
- },
- Cancel: function() {$(this).dialog("close");}
- }
- })
- });
- }
-
- function editBurg() {
- if (customization) return;
- unselect();
- closeDialogs("#burgEditor, .stable");
- elSelected = d3.select(this);
- const id = +elSelected.attr("data-id");
- if (id === undefined) return;
- d3.selectAll("[data-id='" + id + "']").call(d3.drag().on("start", elementDrag)).classed("draggable", true);
-
- // update Burg details
- const type = elSelected.node().parentNode.id;
- const labelGroup = burgLabels.select("#"+type);
- const iconGroup = burgIcons.select("#"+type);
- burgNameInput.value = manors[id].name;
- updateBurgsGroupOptions();
- burgSelectGroup.value = labelGroup.attr("id");
- burgSelectDefaultFont.value = fonts.indexOf(labelGroup.attr("data-font"));
- burgSetLabelSize.value = labelGroup.attr("data-size");
- burgLabelColorInput.value = toHEX(labelGroup.attr("fill"));
- burgLabelOpacity.value = labelGroup.attr("opacity") === undefined ? 1 : +labelGroup.attr("opacity");
- const tr = parseTransform(elSelected.attr("transform"));
- burgLabelAngle.value = tr[2];
- burgLabelAngleOutput.innerHTML = Math.abs(+tr[2]) + "°";
- burgIconSize.value = iconGroup.attr("size");
- burgIconFillOpacity.value = iconGroup.attr("fill-opacity") === undefined ? 1 : +iconGroup.attr("fill-opacity");
- burgIconFillColor.value = iconGroup.attr("fill");
- burgIconStrokeWidth.value = iconGroup.attr("stroke-width");
- burgIconStrokeOpacity.value = iconGroup.attr("stroke-opacity") === undefined ? 1 : +iconGroup.attr("stroke-opacity");
- burgIconStrokeColor.value = iconGroup.attr("stroke");
- const cell = cells[manors[id].cell];
- if (cell.region !== "neutral" && cell.region !== undefined) {
- burgToggleCapital.disabled = false;
- const capital = states[manors[id].region] ? id === states[manors[id].region].capital ? 1 : 0 : 0;
- d3.select("#burgToggleCapital").classed("pressed", capital);
- } else {
- burgToggleCapital.disabled = true;
- d3.select("#burgToggleCapital").classed("pressed", false);
- }
- d3.select("#burgTogglePort").classed("pressed", cell.port !== undefined);
- burgPopulation.value = manors[id].population;
- burgPopulationFriendly.value = rn(manors[id].population * urbanization.value * populationRate.value * 1000);
-
- $("#burgEditor").dialog({
- title: "Edit Burg: " + manors[id].name,
- minHeight: 30, width: "auto", resizable: false,
- position: {my: "center top+40", at: "top", of: d3.event},
- close: function() {
- d3.selectAll("[data-id='" + id + "']").call(d3.drag().on("drag", null)).classed("draggable", false);
- elSelected = null;
- }
- });
-
- if (modules.editBurg) return;
- modules.editBurg = true;
-
- loadDefaultFonts();
-
- function updateBurgsGroupOptions() {
- burgSelectGroup.innerHTML = "";
- burgIcons.selectAll("g").each(function(d) {
- const opt = document.createElement("option");
- opt.value = opt.innerHTML = d3.select(this).attr("id");
- burgSelectGroup.add(opt);
- });
- }
-
- $("#burgEditor > button").not("#burgAddfromEditor").not("#burgRelocate").not("#burgRemove").click(function() {
- if ($(this).next().is(":visible")) {
- $("#burgEditor > button").show();
- $(this).next("div").hide();
- } else {
- $("#burgEditor > *").not(this).hide();
- $(this).next("div").show();
- }
- });
-
- $("#burgEditor > div > button").click(function() {
- if ($(this).next().is(":visible")) {
- $("#burgEditor > div > button").show();
- $(this).parent().prev().show();
- $(this).next("div").hide();
- } else {
- $("#burgEditor > div > button").not(this).hide();
- $(this).parent().prev().hide();
- $(this).next("div").show();
- }
- });
-
- $("#burgSelectGroup").change(function() {
- const id = +elSelected.attr("data-id");
- const g = this.value;
- moveBurgToGroup(id, g);
- });
-
- $("#burgInputGroup").change(function() {
- let newGroup = this.value.toLowerCase().replace(/ /g, "_").replace(/[^\w\s]/gi, "");
- if (Number.isFinite(+newGroup.charAt(0))) newGroup = "g" + newGroup;
- if (burgLabels.select("#"+newGroup).size()) {
- tip('The group "'+ newGroup + '" is already exists');
- return;
- }
- burgInputGroup.value = "";
- // clone old group assigning new id
- const id = elSelected.node().parentNode.id;
- const l = burgLabels.select("#"+id).node().cloneNode(false);
- l.id = newGroup;
- const i = burgIcons.select("#"+id).node().cloneNode(false);
- i.id = newGroup;
- burgLabels.node().insertBefore(l, null);
- burgIcons.node().insertBefore(i, null);
- // select new group
- const opt = document.createElement("option");
- opt.value = opt.innerHTML = newGroup;
- burgSelectGroup.add(opt);
- $("#burgSelectGroup").val(newGroup).change();
- $("#burgSelectGroup, #burgInputGroup").toggle();
- updateLabelGroups();
- });
-
- $("#burgAddGroup").click(function() {
- if ($("#burgInputGroup").css("display") === "none") {
- $("#burgInputGroup").css("display", "inline-block");
- $("#burgSelectGroup").css("display", "none");
- burgInputGroup.focus();
- } else {
- $("#burgSelectGroup").css("display", "inline-block");
- $("#burgInputGroup").css("display", "none");
- }
- });
-
- $("#burgRemoveGroup").click(function() {
- const group = d3.select(elSelected.node().parentNode);
- const type = group.attr("id");
- const id = +elSelected.attr("data-id");
- const count = group.selectAll("*").size();
- const message = "Are you sure you want to remove all Burgs (" + count + ") of that group?";
- alertMessage.innerHTML = message;
- $("#alert").dialog({resizable: false, title: "Remove Burgs",
- buttons: {
- Remove: function() {
- $(this).dialog("close");
- group.selectAll("*").each(function(d) {
- const id = +d3.select(this).attr("data-id");
- if (id === undefined) return;
- const cell = manors[id].cell;
- const state = manors[id].region;
- if (states[state]) {
- if (states[state].capital === id) states[state].capital = "select";
- states[state].burgs --;
- }
- manors[id].region = "removed";
- cells[cell].manor = undefined;
- });
- burgLabels.select("#"+type).selectAll("*").remove();
- burgIcons.select("#"+type).selectAll("*").remove();
- $("#icons g[id*='anchors'] [data-id=" + id + "]").parent().children().remove();
- closeDialogs(".stable");
- updateCountryEditors();
- $("#burgEditor").dialog("close");
- },
- Cancel: function() {$(this).dialog("close");}
- }
- });
-
- });
-
- $("#burgNameInput").on("input", function() {
- if (this.value === "") {
- tip("Name should not be blank, set opacity to 0 to hide label or remove button to delete");
- return;
- }
- const id = +elSelected.attr("data-id");
- burgLabels.selectAll("[data-id='" + id + "']").text(this.value);
- manors[id].name = this.value;
- $("div[aria-describedby='burgEditor'] .ui-dialog-title").text("Edit Burg: " + this.value);
- });
-
- $("#burgNameReCulture, #burgNameReRandom").click(function() {
- const id = +elSelected.attr("data-id");
- const culture = this.id === "burgNameReCulture" ? manors[id].culture : Math.floor(Math.random() * cultures.length);
- const name = generateName(culture);
- burgLabels.selectAll("[data-id='" + id + "']").text(name);
- manors[id].name = name;
- burgNameInput.value = name;
- $("div[aria-describedby='burgEditor'] .ui-dialog-title").text("Edit Burg: " + name);
- });
-
- $("#burgToggleExternalFont").click(function() {
- if ($("#burgInputExternalFont").css("display") === "none") {
- $("#burgInputExternalFont").css("display", "inline-block");
- $("#burgSelectDefaultFont").css("display", "none");
- burgInputExternalFont.focus();
- } else {
- $("#burgSelectDefaultFont").css("display", "inline-block");
- $("#burgInputExternalFont").css("display", "none");
- }
- });
-
- $("#burgSelectDefaultFont").change(function() {
- const type = elSelected.node().parentNode.id;
- const group = burgLabels.select("#"+type);
- if (burgSelectDefaultFont.value === "") return;
- const font = fonts[burgSelectDefaultFont.value].split(':')[0].replace(/\+/g, " ");
- group.attr("font-family", font).attr("data-font", fonts[burgSelectDefaultFont.value]);
- });
-
- $("#burgInputExternalFont").change(function() {
- fetchFonts(this.value).then(fetched => {
- if (!fetched) return;
- burgToggleExternalFont.click();
- burgInputExternalFont.value = "";
- if (fetched === 1) $("#burgSelectDefaultFont").val(fonts.length - 1).change();
- });
- });
-
- $("#burgSetLabelSize").on("input", function() {
- const type = elSelected.node().parentNode.id;
- const group = burgLabels.select("#"+type);
- group.attr("data-size", +this.value);
- invokeActiveZooming();
- });
-
- $("#burgLabelColorInput").on("input", function() {
- const type = elSelected.node().parentNode.id;
- const group = burgLabels.select("#"+type);
- group.attr("fill", this.value);
- });
-
- $("#burgLabelOpacity").on("input", function() {
- const type = elSelected.node().parentNode.id;
- const group = burgLabels.select("#"+type);
- group.attr("opacity", +this.value);
- });
-
- $("#burgLabelAngle").on("input", function() {
- const id = +elSelected.attr("data-id");
- const el = burgLabels.select("[data-id='"+ id +"']");
- const tr = parseTransform(el.attr("transform"));
- const c = el.node().getBBox();
- burgLabelAngleOutput.innerHTML = Math.abs(+this.value) + "°";
- const angle = +this.value;
- const transform = `translate(${tr[0]},${tr[1]}) rotate(${angle} ${(c.x+c.width/2)} ${(c.y+c.height/2)})`;
- el.attr("transform", transform);
- });
-
- $("#burgIconSize").on("input", function() {
- const type = elSelected.node().parentNode.id;
- const group = burgIcons.select("#"+type);
- const size = +this.value;
- group.attr("size", size);
- group.selectAll("*").each(function() {d3.select(this).attr("r", size)});
- });
-
- $("#burgIconFillOpacity").on("input", function() {
- const type = elSelected.node().parentNode.id;
- const group = burgIcons.select("#"+type);
- group.attr("fill-opacity", +this.value);
- });
-
- $("#burgIconFillColor").on("input", function() {
- const type = elSelected.node().parentNode.id;
- const group = burgIcons.select("#"+type);
- group.attr("fill", this.value);
- });
-
- $("#burgIconStrokeWidth").on("input", function() {
- const type = elSelected.node().parentNode.id;
- const group = burgIcons.select("#"+type);
- group.attr("stroke-width", +this.value);
- });
-
- $("#burgIconStrokeOpacity").on("input", function() {
- const type = elSelected.node().parentNode.id;
- const group = burgIcons.select("#"+type);
- group.attr("stroke-opacity", +this.value);
- });
-
- $("#burgIconStrokeColor").on("input", function() {
- const type = elSelected.node().parentNode.id;
- const group = burgIcons.select("#"+type);
- group.attr("stroke", this.value);
- });
-
- $("#burgToggleCapital").click(function() {
- const id = +elSelected.attr("data-id");
- const state = manors[id].region;
- if (states[state] === undefined) return;
- const capital = states[manors[id].region] ? id === states[manors[id].region].capital ? 0 : 1 : 1;
- if (capital && states[state].capital !== "select") {
- // move oldCapital to a town group
- const oldCapital = states[state].capital;
- moveBurgToGroup(oldCapital, "towns");
- }
- states[state].capital = capital ? id : "select";
- d3.select("#burgToggleCapital").classed("pressed", capital);
- const g = capital ? "capitals" : "towns";
- moveBurgToGroup(id, g);
- });
-
- $("#burgTogglePort").click(function() {
- const id = +elSelected.attr("data-id");
- const cell = cells[manors[id].cell];
- const markAsPort = cell.port === undefined ? true : undefined;
- cell.port = markAsPort;
- d3.select("#burgTogglePort").classed("pressed", markAsPort);
- if (markAsPort) {
- const type = elSelected.node().parentNode.id;
- const ag = type === "capitals" ? "#capital-anchors" : "#town-anchors";
- const group = icons.select(ag);
- const size = +group.attr("size");
- const x = rn(manors[id].x - size * 0.47, 2);
- const y = rn(manors[id].y - size * 0.47, 2);
- group.append("use").attr("xlink:href", "#icon-anchor").attr("data-id", id)
- .attr("x", x).attr("y", y).attr("width", size).attr("height", size)
- .on("click", editIcon);
- } else {
- $("#icons g[id*='anchors'] [data-id=" + id + "]").remove();
- }
- });
-
- $("#burgPopulation").on("input", function() {
- const id = +elSelected.attr("data-id");
- burgPopulationFriendly.value = rn(this.value * urbanization.value * populationRate.value * 1000);
- manors[id].population = +this.value;
- });
-
- $("#burgRelocate").click(function() {
- if ($(this).hasClass('pressed')) {
- $(".pressed").removeClass('pressed');
- restoreDefaultEvents();
- tip("", true);
- } else {
- $(".pressed").removeClass('pressed');
- const id = elSelected.attr("data-id");
- $(this).addClass('pressed').attr("data-id", id);
- viewbox.style("cursor", "crosshair").on("click", relocateBurgOnClick);
- tip("Click on map to relocate burg. Hold Shift for continuous move", true);
- }
- });
-
- // open legendsEditor
- document.getElementById("burglLegend").addEventListener("click", function() {
- let burg = +elSelected.attr("data-id");
- let id = "burg" + burg;
- let name = manors[burg].name;
- editLegends(id, name);
- });
-
- // move burg to a different cell
- function relocateBurgOnClick() {
- const point = d3.mouse(this);
- const index = getIndex(point);
- const i = +$("#burgRelocate").attr("data-id");
- if (isNaN(i) || !manors[i]) return;
-
- if (cells[index].height < 20) {
- tip("Cannot place burg in the water! Select a land cell", null, "error");
- return;
- }
-
- if (cells[index].manor !== undefined && cells[index].manor !== i) {
- tip("There is already a burg in this cell. Please select a free cell", null, "error");
- $('#grid').fadeIn();
- d3.select("#toggleGrid").classed("buttonoff", false);
- return;
- }
-
- let region = cells[index].region;
- const oldRegion = manors[i].region;
- // relocating capital to other country you "conquer" target cell
- if (states[oldRegion] && states[oldRegion].capital === i) {
- if (region !== oldRegion) {
- tip("Capital cannot be moved to another country!", null, "error");
- return;
- }
- }
-
- if (d3.event.shiftKey === false) {
- $("#burgRelocate").removeClass("pressed");
- restoreDefaultEvents();
- tip("", true);
- if (region !== oldRegion) {
- recalculateStateData(oldRegion);
- recalculateStateData(region);
- updateCountryEditors();
- }
- }
-
- const x = rn(point[0],2), y = rn(point[1],2);
- burgIcons.select("circle[data-id='"+i+"']").attr("transform", null).attr("cx", x).attr("cy", y);
- burgLabels.select("text[data-id='"+i+"']").attr("transform", null).attr("x", x).attr("y", y);
- const anchor = icons.select("use[data-id='"+i+"']");
- if (anchor.size()) {
- const size = anchor.attr("width");
- const xa = rn(x - size * 0.47, 2);
- const ya = rn(y - size * 0.47, 2);
- anchor.attr("transform", null).attr("x", xa).attr("y", ya);
- }
- cells[index].manor = i;
- cells[manors[i].cell].manor = undefined;
- manors[i].x = x, manors[i].y = y, manors[i].region = region, manors[i].cell = index;
- }
-
- // open in MFCG
- $("#burgSeeInMFCG").click(function() {
- const id = +elSelected.attr("data-id");
- const name = manors[id].name;
- const cell = manors[id].cell;
- const pop = rn(manors[id].population);
- const size = pop > 65 ? 65 : pop < 6 ? 6 : pop;
- const s = seed + "" + id;
- const hub = cells[cell].crossroad > 2 ? 1 : 0;
- const river = cells[cell].river ? 1 : 0;
- const coast = cells[cell].port !== undefined ? 1 : 0;
- const sec = pop > 40 ? 1 : Math.random() < pop / 100 ? 1 : 0;
- const thr = sec && Math.random() < 0.8 ? 1 : 0;
- const url = "http://fantasycities.watabou.ru/";
- let params = `?name=${name}&size=${size}&seed=${s}&hub=${hub}&random=0&continuous=0`;
- params += `&river=${river}&coast=${coast}&citadel=${id&1}&plaza=${sec}&temple=${thr}&walls=${sec}&shantytown=${sec}`;
- const win = window.open(url+params, '_blank');
- win.focus();
- });
-
- $("#burgAddfromEditor").click(function() {
- clickToAdd(); // to load on click event function
- $("#addBurg").click();
- });
-
- $("#burgRemove").click(function() {
- alertMessage.innerHTML = `Are you sure you want to remove the Burg?`;
- $("#alert").dialog({resizable: false, title: "Remove Burg",
- buttons: {
- Remove: function() {
- $(this).dialog("close");
- const id = +elSelected.attr("data-id");
- d3.selectAll("[data-id='" + id + "']").remove();
- const cell = manors[id].cell;
- const state = manors[id].region;
- if (states[state]) {
- if (states[state].capital === id) states[state].capital = "select";
- states[state].burgs --;
- }
- manors[id].region = "removed";
- cells[cell].manor = undefined;
- closeDialogs(".stable");
- updateCountryEditors();
- },
- Cancel: function() {$(this).dialog("close");}
- }
- })
- });
- }
-
- function editMarker() {
- if (customization) return;
-
- unselect();
- closeDialogs("#markerEditor, .stable");
- elSelected = d3.select(this).call(d3.drag().on("start", elementDrag)).classed("draggable", true);
-
- $("#markerEditor").dialog({
- title: "Edit Marker",
- minHeight: 30, width: "auto", maxWidth: 275, resizable: false,
- position: {my: "center top+30", at: "bottom", of: d3.event},
- close: unselect
- });
-
- // update inputs
- let id = elSelected.attr("href");
- let symbol = d3.select("#defs-markers").select(id);
- let icon = symbol.select("text");
- markerSelectGroup.value = id.slice(1);
- markerIconSize.value = parseFloat(icon.attr("font-size"));
- markerIconShiftX.value = parseFloat(icon.attr("x"));
- markerIconShiftY.value = parseFloat(icon.attr("y"));
- markerIconFill.value = icon.attr("fill");
- markerIconStrokeWidth.value = icon.attr("stroke-width");
- markerIconStroke.value = icon.attr("stroke");
- markerSize.value = elSelected.attr("data-size");
- markerBase.value = symbol.select("path").attr("fill");
- markerFill.value = symbol.select("circle").attr("fill");
- let opacity = symbol.select("circle").attr("opacity");
- markerToggleBubble.className = opacity === "0" ? "icon-info" : "icon-info-circled";
-
- let table = document.getElementById("markerIconTable");
- let selected = table.getElementsByClassName("selected");
- if (selected.length) selected[0].removeAttribute("class");
- selected = document.querySelectorAll("#markerIcon" + icon.text().codePointAt());
- if (selected.length) selected[0].className = "selected";
- markerIconCustom.value = selected.length ? "" : icon.text();
-
- if (modules.editMarker) return;
- modules.editMarker = true;
-
- $("#markerGroup").click(function() {
- $("#markerEditor > button").not(this).toggle();
- $("#markerGroupSection").toggle();
- updateMarkerGroupOptions();
- });
-
- function updateMarkerGroupOptions() {
- markerSelectGroup.innerHTML = "";
- d3.select("#defs-markers").selectAll("symbol").each(function() {
- let opt = document.createElement("option");
- opt.value = opt.innerHTML = this.id;
- markerSelectGroup.add(opt);
- });
- let id = elSelected.attr("href").slice(1);
- markerSelectGroup.value = id;
- }
-
- // on add marker type click
- document.getElementById("markerAddGroup").addEventListener("click", function() {
- if ($("#markerInputGroup").css("display") === "none") {
- $("#markerInputGroup").css("display", "inline-block");
- $("#markerSelectGroup").css("display", "none");
- markerInputGroup.focus();
- } else {
- $("#markerSelectGroup").css("display", "inline-block");
- $("#markerInputGroup").css("display", "none");
- }
- });
-
- // on marker type change
- document.getElementById("markerSelectGroup").addEventListener("change", function() {
- elSelected.attr("href", "#"+this.value);
- elSelected.attr("data-id", "#"+this.value);
- });
-
- // on new type input
- document.getElementById("markerInputGroup").addEventListener("change", function() {
- let newGroup = this.value.toLowerCase().replace(/ /g, "_").replace(/[^\w\s]/gi, "");
- if (Number.isFinite(+newGroup.charAt(0))) newGroup = "m" + newGroup;
- if (d3.select("#defs-markers").select("#"+newGroup).size()) {
- tip('The type "'+ newGroup + '" is already exists');
- return;
- }
- markerInputGroup.value = "";
- // clone old group assigning new id
- let id = elSelected.attr("href");
- let l = d3.select("#defs-markers").select(id).node().cloneNode(true);
- l.id = newGroup;
- elSelected.attr("href", "#"+newGroup);
- elSelected.attr("data-id", "#"+newGroup);
- document.getElementById("defs-markers").insertBefore(l, null);
-
- // select new group
- let opt = document.createElement("option");
- opt.value = opt.innerHTML = newGroup;
- markerSelectGroup.add(opt);
- $("#markerSelectGroup").val(newGroup).change();
- $("#markerSelectGroup, #markerInputGroup").toggle();
- updateMarkerGroupOptions();
- });
-
- $("#markerIconButton").click(function() {
- $("#markerEditor > button").not(this).toggle();
- $("#markerIconButtons").toggle();
- if (!$("#markerIconTable").text()) drawIconsList(icons);
- });
-
- $("#markerRemoveGroup").click(function() {
- let id = elSelected.attr("href");
- let used = document.querySelectorAll("use[data-id='"+id+"']");
- let count = used.length === 1 ? "1 element" : used.length + " elements";
- const message = "Are you sure you want to remove the marker (" + count + ")?";
- alertMessage.innerHTML = message;
- $("#alert").dialog({resizable: false, title: "Remove marker",
- buttons: {
- Remove: function() {
- $(this).dialog("close");
- if (id !== "#marker0") d3.select("#defs-markers").select(id).remove();
- used.forEach(function(e) {e.remove();});
- updateMarkerGroupOptions();
- $("#markerEditor").dialog("close");
- },
- Cancel: function() {$(this).dialog("close");}
- }
- });
- });
-
- function drawIconsList() {
- let icons = [
- // emoticons in FF:
- ["2693", "⚓", "Anchor"],
- ["26EA", "⛪", "Church"],
- ["1F3EF", "🏯", "Japanese Castle"],
- ["1F3F0", "🏰", "Castle"],
- ["1F5FC", "🗼", "Tower"],
- ["1F3E0", "🏠", "House"],
- ["1F3AA", "🎪", "Tent"],
- ["1F3E8", "🏨", "Hotel"],
- ["1F4B0", "💰", "Money bag"],
- ["1F4A8", "💨", "Dashing away"],
- ["1F334", "🌴", "Palm"],
- ["1F335", "🌵", "Cactus"],
- ["1F33E", "🌾", "Sheaf"],
- ["1F5FB", "🗻", "Mountain"],
- ["1F30B", "🌋", "Volcano"],
- ["1F40E", "🐎", "Horse"],
- ["1F434", "🐴", "Horse Face"],
- ["1F42E", "🐮", "Cow"],
- ["1F43A", "🐺", "Wolf Face"],
- ["1F435", "🐵", "Monkey face"],
- ["1F437", "🐷", "Pig face"],
- ["1F414", "🐔", "Chiken"],
- ["1F411", "🐑", "Eve"],
- ["1F42B", "🐫", "Camel"],
- ["1F418", "🐘", "Elephant"],
- ["1F422", "🐢", "Turtle"],
- ["1F40C", "🐌", "Snail"],
- ["1F40D", "🐍", "Snake"],
- ["1F433", "🐳", "Whale"],
- ["1F42C", "🐬", "Dolphin"],
- ["1F420", "🐟", "Fish"],
- ["1F432", "🐲", "Dragon Head"],
- ["1F479", "👹", "Ogre"],
- ["1F47B", "👻", "Ghost"],
- ["1F47E", "👾", "Alien"],
- ["1F480", "💀", "Skull"],
- ["1F374", "🍴", "Fork and knife"],
- ["1F372", "🍲", "Food"],
- ["1F35E", "🍞", "Bread"],
- ["1F357", "🍗", "Poultry leg"],
- ["1F347", "🍇", "Grapes"],
- ["1F34F", "🍏", "Apple"],
- ["1F352", "🍒", "Cherries"],
- ["1F36F", "🍯", "Honey pot"],
- ["1F37A", "🍺", "Beer"],
- ["1F377", "🍷", "Wine glass"],
- ["1F3BB", "🎻", "Violin"],
- ["1F3B8", "🎸", "Guitar"],
- ["26A1", "⚡", "Electricity"],
- ["1F320", "🌠", "Shooting star"],
- ["1F319", "🌙", "Crescent moon"],
- ["1F525", "🔥", "Fire"],
- ["1F4A7", "💧", "Droplet"],
- ["1F30A", "🌊", "Wave"],
- ["231B", "⌛", "Hourglass"],
- ["1F3C6", "🏆", "Goblet"],
- ["26F2", "⛲", "Fountain"],
- ["26F5", "⛵", "Sailboat"],
- ["26FA", "⛺", "Tend"],
- ["1F489", "💉", "Syringe"],
- ["1F4D6", "📚", "Books"],
- ["1F3AF", "🎯", "Archery"],
- ["1F52E", "🔮", "Magic ball"],
- ["1F3AD", "🎭", "Performing arts"],
- ["1F3A8", "🎨", "Artist palette"],
- ["1F457", "👗", "Dress"],
- ["1F451", "👑", "Crown"],
- ["1F48D", "💍", "Ring"],
- ["1F48E", "💎", "Gem"],
- ["1F514", "🔔", "Bell"],
- ["1F3B2", "🎲", "Die"],
- // black and white icons in FF:
- ["26A0", "⚠", "Alert"],
- ["2317", "⌗", "Hash"],
- ["2318", "⌘", "POI"],
- ["2307", "⌇", "Wavy"],
- ["21E6", "⇦", "Left arrow"],
- ["21E7", "⇧", "Top arrow"],
- ["21E8", "⇨", "Right arrow"],
- ["21E9", "⇩", "Left arrow"],
- ["21F6", "⇶", "Three arrows"],
- ["2699", "⚙", "Gear"],
- ["269B", "⚛", "Atom"],
- ["0024", "$", "Dollar"],
- ["2680", "⚀", "Die1"],
- ["2681", "⚁", "Die2"],
- ["2682", "⚂", "Die3"],
- ["2683", "⚃", "Die4"],
- ["2684", "⚄", "Die5"],
- ["2685", "⚅", "Die6"],
- ["26B4", "⚴", "Pallas"],
- ["26B5", "⚵", "Juno"],
- ["26B6", "⚶", "Vesta"],
- ["26B7", "⚷", "Chiron"],
- ["26B8", "⚸", "Lilith"],
- ["263F", "☿", "Mercury"],
- ["2640", "♀", "Venus"],
- ["2641", "♁", "Earth"],
- ["2642", "♂", "Mars"],
- ["2643", "♃", "Jupiter"],
- ["2644", "♄", "Saturn"],
- ["2645", "♅", "Uranus"],
- ["2646", "♆", "Neptune"],
- ["2647", "♇", "Pluto"],
- ["26B3", "⚳", "Ceres"],
- ["2654", "♔", "Chess king"],
- ["2655", "♕", "Chess queen"],
- ["2656", "♖", "Chess rook"],
- ["2657", "♗", "Chess bishop"],
- ["2658", "♘", "Chess knight"],
- ["2659", "♙", "Chess pawn"],
- ["2660", "♠", "Spade"],
- ["2663", "♣", "Club"],
- ["2665", "♥", "Heart"],
- ["2666", "♦", "Diamond"],
- ["2698", "⚘", "Flower"],
- ["2625", "☥", "Ankh"],
- ["2626", "☦", "Orthodox"],
- ["2627", "☧", "Chi Rho"],
- ["2628", "☨", "Lorraine"],
- ["2629", "☩", "Jerusalem"],
- ["2670", "♰", "Syriac cross"],
- ["2020", "†", "Dagger"],
- ["262A", "☪", "Muslim"],
- ["262D", "☭", "Soviet"],
- ["262E", "☮", "Peace"],
- ["262F", "☯", "Yin yang"],
- ["26A4", "⚤", "Heterosexuality"],
- ["26A2", "⚢", "Female homosexuality"],
- ["26A3", "⚣", "Male homosexuality"],
- ["26A5", "⚥", "Male and female"],
- ["26AD", "⚭", "Rings"],
- ["2690", "⚐", "White flag"],
- ["2691", "⚑", "Black flag"],
- ["263C", "☼", "Sun"],
- ["263E", "☾", "Moon"],
- ["2668", "♨", "Hot springs"],
- ["2600", "☀", "Black sun"],
- ["2601", "☁", "Cloud"],
- ["2602", "☂", "Umbrella"],
- ["2603", "☃", "Snowman"],
- ["2604", "☄", "Comet"],
- ["2605", "★", "Black star"],
- ["2606", "☆", "White star"],
- ["269D", "⚝", "Outlined star"],
- ["2618", "☘", "Shamrock"],
- ["21AF", "↯", "Lightning"],
- ["269C", "⚜", "FleurDeLis"],
- ["2622", "☢", "Radiation"],
- ["2623", "☣", "Biohazard"],
- ["2620", "☠", "Skull"],
- ["2638", "☸", "Dharma"],
- ["2624", "☤", "Caduceus"],
- ["2695", "⚕", "Aeculapius staff"],
- ["269A", "⚚", "Hermes staff"],
- ["2697", "⚗", "Alembic"],
- ["266B", "♫", "Music"],
- ["2702", "✂", "Scissors"],
- ["2696", "⚖", "Scales"],
- ["2692", "⚒", "Hammer and pick"],
- ["2694", "⚔", "Swords"]
- ];
-
- let table = document.getElementById("markerIconTable"), row = "";
- table.addEventListener("click", clickMarkerIconTable, false);
- table.addEventListener("mouseover", hoverMarkerIconTable, false);
-
- for (let i=0; i < icons.length; i++) {
- if (i%20 === 0) row = table.insertRow(0);
- let cell = row.insertCell(0);
- let icon = String.fromCodePoint(parseInt(icons[i][0],16));
- cell.innerHTML = icon;
- cell.id = "markerIcon" + icon.codePointAt();
- cell.setAttribute("data-desc", icons[i][2]);
- }
- }
-
- function clickMarkerIconTable(e) {
- if (e.target !== e.currentTarget) {
- let table = document.getElementById("markerIconTable");
- let selected = table.getElementsByClassName("selected");
- if (selected.length) selected[0].removeAttribute("class");
- e.target.className = "selected";
- let id = elSelected.attr("href");
- let icon = e.target.innerHTML;
- d3.select("#defs-markers").select(id).select("text").text(icon);
- }
- e.stopPropagation();
- }
-
- function hoverMarkerIconTable(e) {
- if (e.target !== e.currentTarget) {
- let desc = e.target.getAttribute("data-desc");
- tip(e.target.innerHTML + " " + desc);
- }
- e.stopPropagation();
- }
-
- // change marker icon size
- document.getElementById("markerIconSize").addEventListener("input", function() {
- let id = elSelected.attr("href");
- d3.select("#defs-markers").select(id).select("text").attr("font-size", this.value + "px");
- });
-
- // change marker icon x shift
- document.getElementById("markerIconShiftX").addEventListener("input", function() {
- let id = elSelected.attr("href");
- d3.select("#defs-markers").select(id).select("text").attr("x", this.value + "%");
- });
-
- // change marker icon y shift
- document.getElementById("markerIconShiftY").addEventListener("input", function() {
- let id = elSelected.attr("href");
- d3.select("#defs-markers").select(id).select("text").attr("y", this.value + "%");
- });
-
- // apply custom unicode icon on input
- document.getElementById("markerIconCustom").addEventListener("input", function() {
- if (!this.value) return;
- let id = elSelected.attr("href");
- d3.select("#defs-markers").select(id).select("text").text(this.value);
- });
-
- $("#markerStyleButton").click(function() {
- $("#markerEditor > button").not(this).toggle();
- $("#markerStyleButtons").toggle();
- });
-
- // change marker size
- document.getElementById("markerSize").addEventListener("input", function() {
- let id = elSelected.attr("data-id");
- let used = document.querySelectorAll("use[data-id='"+id+"']");
- let size = this.value;
- used.forEach(function(e) {e.setAttribute("data-size", size);});
- invokeActiveZooming();
- });
-
- // change marker base color
- document.getElementById("markerBase").addEventListener("input", function() {
- let id = elSelected.attr("href");
- d3.select(id).select("path").attr("fill", this.value);
- d3.select(id).select("circle").attr("stroke", this.value);
- });
-
- // change marker fill color
- document.getElementById("markerFill").addEventListener("input", function() {
- let id = elSelected.attr("href");
- d3.select(id).select("circle").attr("fill", this.value);
- });
-
- // change marker icon y shift
- document.getElementById("markerIconFill").addEventListener("input", function() {
- let id = elSelected.attr("href");
- d3.select("#defs-markers").select(id).select("text").attr("fill", this.value);
- });
-
- // change marker icon y shift
- document.getElementById("markerIconStrokeWidth").addEventListener("input", function() {
- let id = elSelected.attr("href");
- d3.select("#defs-markers").select(id).select("text").attr("stroke-width", this.value);
- });
-
- // change marker icon y shift
- document.getElementById("markerIconStroke").addEventListener("input", function() {
- let id = elSelected.attr("href");
- d3.select("#defs-markers").select(id).select("text").attr("stroke", this.value);
- });
-
- // toggle marker bubble display
- document.getElementById("markerToggleBubble").addEventListener("click", function() {
- let id = elSelected.attr("href");
- let show = 1;
- if (this.className === "icon-info-circled") {
- this.className = "icon-info";
- show = 0;
- } else {
- this.className = "icon-info-circled";;
- }
- d3.select(id).select("circle").attr("opacity", show);
- d3.select(id).select("path").attr("opacity", show);
- });
-
- // open legendsEditor
- document.getElementById("markerLegendButton").addEventListener("click", function() {
- let id = elSelected.attr("id");
- let symbol = elSelected.attr("href");
- let icon = d3.select("#defs-markers").select(symbol).select("text").text();
- let name = "Marker " + icon;
- editLegends(id, name);
- });
-
- // click on master button to add new markers on click
- document.getElementById("markerAdd").addEventListener("click", function() {
- document.getElementById("addMarker").click();
- });
-
- // remove marker on click
- document.getElementById("markerRemove").addEventListener("click", function() {
- alertMessage.innerHTML = "Are you sure you want to remove the marker?";
- $("#alert").dialog({resizable: false, title: "Remove marker",
- buttons: {
- Remove: function() {
- $(this).dialog("close");
- elSelected.remove();
- $("#markerEditor").dialog("close");
- },
- Cancel: function() {$(this).dialog("close");}
- }
- });
- });
- }
-
- // clear elSelected variable
- function unselect() {
- tip("", true);
- restoreDefaultEvents();
- if (customization === 5) customization = 0;
- if (!elSelected) return;
- elSelected.call(d3.drag().on("drag", null)).attr("class", null);
- debug.selectAll("*").remove();
- viewbox.style("cursor", "default");
- elSelected = null;
- }
-
- // transform string to array [translateX,translateY,rotateDeg,rotateX,rotateY,scale]
- function parseTransform(string) {
- if (!string) {return [0,0,0,0,0,1];}
- const a = string.replace(/[a-z()]/g, "").replace(/[ ]/g, ",").split(",");
- return [a[0] || 0, a[1] || 0, a[2] || 0, a[3] || 0, a[4] || 0, a[5] || 1];
- }
-
- // generic function to move any burg to any group
- function moveBurgToGroup(id, g) {
- $("#burgLabels [data-id=" + id + "]").detach().appendTo($("#burgLabels > #"+g));
- $("#burgIcons [data-id=" + id + "]").detach().appendTo($("#burgIcons > #"+g));
- const rSize = $("#burgIcons > #"+g).attr("size");
- $("#burgIcons [data-id=" + id + "]").attr("r", rSize);
- const el = $("#icons g[id*='anchors'] [data-id=" + id + "]");
- if (el.length) {
- const to = g === "towns" ? $("#town-anchors") : $("#capital-anchors");
- el.detach().appendTo(to);
- const useSize = to.attr("size");
- const x = rn(manors[id].x - useSize * 0.47, 2);
- const y = rn(manors[id].y - useSize * 0.47, 2);
- el.attr("x", x).attr("y", y).attr("width", useSize).attr("height", useSize);
- }
- updateCountryEditors();
- }
-
- // generate cultures for a new map based on options and namesbase
- function generateCultures() {
- const count = +culturesInput.value;
- cultures = d3.shuffle(defaultCultures).slice(0, count);
- const centers = d3.range(cultures.length).map(function(d, i) {
- const x = Math.floor(Math.random() * graphWidth * 0.8 + graphWidth * 0.1);
- const y = Math.floor(Math.random() * graphHeight * 0.8 + graphHeight * 0.1);
- const center = [x, y];
- cultures[i].center = center;
- return center;
- });
- cultureTree = d3.quadtree(centers);
- }
-
- function manorsAndRegions() {
- console.group('manorsAndRegions');
- calculateChains();
- rankPlacesGeography();
- locateCapitals();
- generateMainRoads();
- rankPlacesEconomy();
- locateTowns();
- getNames();
- shiftSettlements();
- checkAccessibility();
- defineRegions("withCultures");
- generatePortRoads();
- generateSmallRoads();
- generateOceanRoutes();
- calculatePopulation();
- drawManors();
- drawRegions();
- console.groupEnd('manorsAndRegions');
- }
-
- // Assess cells geographycal suitability for settlement
- function rankPlacesGeography() {
- console.time('rankPlacesGeography');
- land.map(function(c) {
- let score = 0;
- c.flux = rn(c.flux, 2);
- // get base score from height (will be biom)
- if (c.height <= 40) score = 2;
- else if (c.height <= 50) score = 1.8;
- else if (c.height <= 60) score = 1.6;
- else if (c.height <= 80) score = 1.4;
- score += (1 - c.height / 100) / 3;
- if (c.ctype && Math.random() < 0.8 && !c.river) {
- c.score = 0; // ignore 80% of extended cells
- } else {
- if (c.harbor) {
- if (c.harbor === 1) {score += 1;} else {score -= 0.3;} // good sea harbor is valued
- }
- if (c.river) score += 1; // coastline is valued
- if (c.river && c.ctype === 1) score += 1; // estuary is valued
- if (c.flux > 1) score += Math.pow(c.flux, 0.3); // riverbank is valued
- if (c.confluence) score += Math.pow(c.confluence, 0.7); // confluence is valued;
- const neighbEv = c.neighbors.map(function(n) {if (cells[n].height >= 20) return cells[n].height;});
- const difEv = c.height - d3.mean(neighbEv);
- // if (!isNaN(difEv)) score += difEv * 10 * (1 - c.height / 100); // local height maximums are valued
- }
- c.score = rn(Math.random() * score + score, 3); // add random factor
- });
- land.sort(function(a, b) {return b.score - a.score;});
- console.timeEnd('rankPlacesGeography');
- }
-
- // Assess the cells economical suitability for settlement
- function rankPlacesEconomy() {
- console.time('rankPlacesEconomy');
- land.map(function(c) {
- let score = c.score;
- let path = c.path || 0; // roads are valued
- if (path) {
- path = Math.pow(path, 0.2);
- const crossroad = c.crossroad || 0; // crossroads are valued
- score = score + path + crossroad;
- }
- c.score = rn(Math.random() * score + score, 2); // add random factor
- });
- land.sort(function(a, b) {return b.score - a.score;});
- console.timeEnd('rankPlacesEconomy');
- }
-
- // calculate population for manors, cells and states
- function calculatePopulation() {
- // neutral population factors < 1 as neutral lands are usually pretty wild
- const ruralFactor = 0.5, urbanFactor = 0.9;
-
- // calculate population for each burg (based on trade/people attractors)
- manors.map(function(m) {
- const cell = cells[m.cell];
- let score = cell.score;
- if (score <= 0) {score = rn(Math.random(), 2)}
- if (cell.crossroad) {score += cell.crossroad;} // crossroads
- if (cell.confluence) {score += Math.pow(cell.confluence, 0.3);} // confluences
- if (m.i !== m.region && cell.port) {score *= 1.5;} // ports (not capital)
- if (m.i === m.region && !cell.port) {score *= 2;} // land-capitals
- if (m.i === m.region && cell.port) {score *= 3;} // port-capitals
- if (m.region === "neutral") score *= urbanFactor;
- const rnd = 0.6 + Math.random() * 0.8; // random factor
- m.population = rn(score * rnd, 1);
- });
-
- // calculate rural population for each cell based on area + elevation (elevation to be changed to biome)
- const graphSizeAdj = 90 / Math.sqrt(cells.length, 2); // adjust to different graphSize
- land.map(function(l) {
- let population = 0;
- const elevationFactor = Math.pow(1 - l.height / 100, 3);
- population = elevationFactor * l.area * graphSizeAdj;
- if (l.region === "neutral") population *= ruralFactor;
- l.pop = rn(population, 1);
- });
-
- // calculate population for each region
- states.map(function(s, i) {
- // define region burgs count
- const burgs = $.grep(manors, function (e) {
- return e.region === i;
- });
- s.burgs = burgs.length;
- // define region total and burgs population
- let burgsPop = 0; // get summ of all burgs population
- burgs.map(function(b) {burgsPop += b.population;});
- s.urbanPopulation = rn(burgsPop, 2);
- const regionCells = $.grep(cells, function (e) {
- return e.region === i;
- });
- let cellsPop = 0;
- regionCells.map(function(c) {cellsPop += c.pop});
- s.cells = regionCells.length;
- s.ruralPopulation = rn(cellsPop, 1);
- });
-
- // collect data for neutrals
- const neutralCells = $.grep(cells, function(e) {return e.region === "neutral";});
- if (neutralCells.length) {
- let burgs = 0, urbanPopulation = 0, ruralPopulation = 0, area = 0;
- manors.forEach(function(m) {
- if (m.region !== "neutral") return;
- urbanPopulation += m.population;
- burgs++;
- });
- neutralCells.forEach(function(c) {
- ruralPopulation += c.pop;
- area += cells[c.index].area;
- });
- states.push({i: states.length, color: "neutral", name: "Neutrals", capital: "neutral",
- cells: neutralCells.length, burgs, urbanPopulation: rn(urbanPopulation, 2),
- ruralPopulation: rn(ruralPopulation, 2), area: rn(area)});
- }
- }
-
- function locateCapitals() {
- console.time('locateCapitals');
- // min distance detween capitals
- const count = +regionsInput.value;
- let spacing = (graphWidth + graphHeight) / 2 / count;
- console.log(" states: " + count);
-
- for (let l = 0; manors.length < count; l++) {
- const region = manors.length;
- const x = land[l].data[0],y = land[l].data[1];
- let minDist = 10000; // dummy value
- for (let c = 0; c < manors.length; c++) {
- const dist = Math.hypot(x - manors[c].x, y - manors[c].y);
- if (dist < minDist) minDist = dist;
- if (minDist < spacing) break;
- }
- if (minDist >= spacing) {
- const cell = land[l].index;
- const closest = cultureTree.find(x, y);
- const culture = getCultureId(closest);
- manors.push({i: region, cell, x, y, region, culture});
- }
- if (l === land.length - 1) {
- console.error("Cannot place capitals with current spacing. Trying again with reduced spacing");
- l = -1, manors = [], spacing /= 1.2;
- }
- }
-
- // For each capital create a country
- const scheme = count <= 8 ? colors8 : colors20;
- const mod = +powerInput.value;
- manors.forEach(function(m, i) {
- const power = rn(Math.random() * mod / 2 + 1, 1);
- const color = scheme(i / count);
- states.push({i, color, power, capital: i});
- const p = cells[m.cell];
- p.manor = i;
- p.region = i;
- p.culture = m.culture;
- });
- console.timeEnd('locateCapitals');
- }
-
- function locateTowns() {
- console.time('locateTowns');
- const count = +manorsInput.value;
- const neutral = +neutralInput.value;
- const manorTree = d3.quadtree();
- manors.forEach(function(m) {manorTree.add([m.x, m.y]);});
-
- for (let l = 0; manors.length < count && l < land.length; l++) {
- const x = land[l].data[0],y = land[l].data[1];
- const c = manorTree.find(x, y);
- const d = Math.hypot(x - c[0],y - c[1]);
- if (d < 6) continue;
- const cell = land[l].index;
- let region = "neutral", culture = -1, closest = neutral;
- for (let c = 0; c < states.length; c++) {
- let dist = Math.hypot(manors[c].x - x, manors[c].y - y) / states[c].power;
- const cap = manors[c].cell;
- if (cells[cell].fn !== cells[cap].fn) dist *= 3;
- if (dist < closest) {region = c; closest = dist;}
- }
- if (closest > neutral / 5 || region === "neutral") {
- const closestCulture = cultureTree.find(x, y);
- culture = getCultureId(closestCulture);
- } else {
- culture = manors[region].culture;
- }
- land[l].manor = manors.length;
- land[l].culture = culture;
- land[l].region = region;
- manors.push({i: manors.length, cell, x, y, region, culture});
- manorTree.add([x, y]);
- }
- if (manors.length < count) {
- const error = "Cannot place all burgs. Requested " + count + ", placed " + manors.length;
- console.error(error);
- }
- console.timeEnd('locateTowns');
- }
-
- // shift settlements from cell point
- function shiftSettlements() {
- for (let i=0; i < manors.length; i++) {
- const capital = i < regionsInput.value;
- const cell = cells[manors[i].cell];
- let x = manors[i].x, y = manors[i].y;
- if ((capital && cell.harbor) || cell.harbor === 1) {
- // port: capital with any harbor and towns with good harbors
- if (cell.haven === undefined) {
- cell.harbor = undefined;
- } else {
- cell.port = cells[cell.haven].fn;
- x = cell.coastX;
- y = cell.coastY;
- }
- }
- if (cell.river && cell.type !== 1) {
- let shift = 0.2 * cell.flux;
- if (shift < 0.2) shift = 0.2;
- if (shift > 1) shift = 1;
- shift = Math.random() > .5 ? shift : shift * -1;
- x = rn(x + shift, 2);
- shift = Math.random() > .5 ? shift : shift * -1;
- y = rn(y + shift, 2);
- }
- cell.data[0] = manors[i].x = x;
- cell.data[1] = manors[i].y = y;
- }
- }
-
- // Validate each island with manors has port
- function checkAccessibility() {
- console.time("checkAccessibility");
- for (let f = 0; f < features.length; f++) {
- if (!features[f].land) continue;
- const manorsOnIsland = $.grep(land, function (e) {
- return e.manor !== undefined && e.fn === f;
- });
- if (!manorsOnIsland.length) continue;
-
- // if lake port is the only port on lake, remove port
- const lakePorts = $.grep(manorsOnIsland, function (p) {
- return p.port && !features[p.port].border;
- });
- if (lakePorts.length) {
- const lakes = [];
- lakePorts.forEach(function(p) {lakes[p.port] = lakes[p.port] ? lakes[p.port] + 1 : 1;});
- lakePorts.forEach(function(p) {if (lakes[p.port] === 1) p.port = undefined;});
- }
-
- // check how many ocean ports are there on island
- const oceanPorts = $.grep(manorsOnIsland, function (p) {
- return p.port && features[p.port].border;
- });
- if (oceanPorts.length) continue;
- const portCandidates = $.grep(manorsOnIsland, function (c) {
- return c.harbor && features[cells[c.harbor].fn].border && c.ctype === 1;
- });
- if (portCandidates.length) {
- // No ports on island. Upgrading first burg to port
- const candidate = portCandidates[0];
- candidate.harbor = 1;
- candidate.port = cells[candidate.haven].fn;
- const manor = manors[portCandidates[0].manor];
- candidate.data[0] = manor.x = candidate.coastX;
- candidate.data[1] = manor.y = candidate.coastY;
- // add score for each burg on island (as it's the only port)
- candidate.score += Math.floor((portCandidates.length - 1) / 2);
- } else {
- // No ports on island. Reducing score for burgs
- manorsOnIsland.forEach(function(e) {e.score -= 2;});
- }
- }
- console.timeEnd("checkAccessibility");
- }
-
- function generateMainRoads() {
- console.time("generateMainRoads");
- lineGen.curve(d3.curveBasis);
- if (states.length < 2 || manors.length < 2) return;
- for (let f = 0; f < features.length; f++) {
- if (!features[f].land) continue;
- const manorsOnIsland = $.grep(land, function(e) {return e.manor !== undefined && e.fn === f;});
- if (manorsOnIsland.length > 1) {
- for (let d = 1; d < manorsOnIsland.length; d++) {
- for (let m = 0; m < d; m++) {
- const path = findLandPath(manorsOnIsland[d].index, manorsOnIsland[m].index, "main");
- restorePath(manorsOnIsland[m].index, manorsOnIsland[d].index, "main", path);
- }
- }
- }
- }
- console.timeEnd("generateMainRoads");
- }
-
- // add roads from port to capital if capital is not a port
- function generatePortRoads() {
- console.time("generatePortRoads");
- if (!states.length || manors.length < 2) return;
- const portless = [];
- for (let s=0; s < states.length; s++) {
- const cell = manors[s].cell;
- if (cells[cell].port === undefined) portless.push(s);
- }
- for (let l=0; l < portless.length; l++) {
- const ports = $.grep(land, function(l) {return l.port !== undefined && l.region === portless[l];});
- if (!ports.length) continue;
- let minDist = 1000, end = -1;
- ports.map(function(p) {
- const dist = Math.hypot(e.data[0] - p.data[0],e.data[1] - p.data[1]);
- if (dist < minDist && dist > 1) {minDist = dist; end = p.index;}
- });
- if (end !== -1) {
- const start = manors[portless[l]].cell;
- const path = findLandPath(start, end, "direct");
- restorePath(end, start, "main", path);
- }
- }
- console.timeEnd("generatePortRoads");
- }
-
- function generateSmallRoads() {
- console.time("generateSmallRoads");
- if (manors.length < 2) return;
- for (let f = 0; f < features.length; f++) {
- const manorsOnIsland = $.grep(land, function (e) {
- return e.manor !== undefined && e.fn === f;
- });
- const l = manorsOnIsland.length;
- if (l > 1) {
- const secondary = rn((l + 8) / 10);
- for (let s = 0; s < secondary; s++) {
- var start = manorsOnIsland[Math.floor(Math.random() * l)].index;
- var end = manorsOnIsland[Math.floor(Math.random() * l)].index;
- var dist = Math.hypot(cells[start].data[0] - cells[end].data[0],cells[start].data[1] - cells[end].data[1]);
- if (dist > 10) {
- var path = findLandPath(start, end, "direct");
- restorePath(end, start, "small", path);
- }
- }
- manorsOnIsland.map(function(e, d) {
- if (!e.path && d > 0) {
- const start = e.index;
- let end = -1;
- const road = $.grep(land, function (e) {
- return e.path && e.fn === f;
- });
- if (road.length > 0) {
- let minDist = 10000;
- road.map(function(i) {
- const dist = Math.hypot(e.data[0] - i.data[0], e.data[1] - i.data[1]);
- if (dist < minDist) {minDist = dist; end = i.index;}
- });
- } else {
- end = manorsOnIsland[0].index;
- }
- const path = findLandPath(start, end, "main");
- restorePath(end, start, "small", path);
- }
- });
- }
- }
- console.timeEnd("generateSmallRoads");
- }
-
- function generateOceanRoutes() {
- console.time("generateOceanRoutes");
- lineGen.curve(d3.curveBasis);
- const cAnchors = icons.selectAll("#capital-anchors");
- const tAnchors = icons.selectAll("#town-anchors");
- const cSize = cAnchors.attr("size") || 2;
- const tSize = tAnchors.attr("size") || 1;
-
- const ports = [];
- // groups all ports on water feature
- for (let m = 0; m < manors.length; m++) {
- const cell = manors[m].cell;
- const port = cells[cell].port;
- if (port === undefined) continue;
- if (ports[port] === undefined) ports[port] = [];
- ports[port].push(cell);
-
- // draw anchor icon
- const group = m < states.length ? cAnchors : tAnchors;
- const size = m < states.length ? cSize : tSize;
- const x = rn(cells[cell].data[0] - size * 0.47, 2);
- const y = rn(cells[cell].data[1] - size * 0.47, 2);
- group.append("use").attr("xlink:href", "#icon-anchor").attr("data-id", m)
- .attr("x", x).attr("y", y).attr("width", size).attr("height", size);
- icons.selectAll("use").on("click", editIcon);
- }
-
- for (let w = 0; w < ports.length; w++) {
- if (!ports[w]) continue;
- if (ports[w].length < 2) continue;
- const onIsland = [];
- for (let i = 0; i < ports[w].length; i++) {
- const cell = ports[w][i];
- const fn = cells[cell].fn;
- if (onIsland[fn] === undefined) onIsland[fn] = [];
- onIsland[fn].push(cell);
- }
-
- for (let fn = 0; fn < onIsland.length; fn++) {
- if (!onIsland[fn]) continue;
- if (onIsland[fn].length < 2) continue;
- const start = onIsland[fn][0];
- const paths = findOceanPaths(start, -1);
-
- for (let h=1; h < onIsland[fn].length; h++) {
- // routes from all ports on island to 1st port on island
- restorePath(onIsland[fn][h],start, "ocean", paths);
- }
-
- // inter-island routes
- for (let c=fn+1; c < onIsland.length; c++) {
- if (!onIsland[c]) continue;
- if (!onIsland[c].length) continue;
- if (onIsland[fn].length > 3) {
- const end = onIsland[c][0];
- restorePath(end, start, "ocean", paths);
- }
- }
-
- if (features[w].border && !features[fn].border && onIsland[fn].length > 5) {
- // encircle the island
- onIsland[fn].sort(function(a, b) {return cells[b].cost - cells[a].cost;});
- for (let a = 2; a < onIsland[fn].length && a < 10; a++) {
- const from = onIsland[fn][1],to = onIsland[fn][a];
- const dist = Math.hypot(cells[from].data[0] - cells[to].data[0],cells[from].data[1] - cells[to].data[1]);
- const distPath = getPathDist(from, to);
- if (distPath > dist * 4 + 10) {
- const totalCost = cells[from].cost + cells[to].cost;
- const pathsAdd = findOceanPaths(from, to);
- if (cells[to].cost < totalCost) {
- restorePath(to, from, "ocean", pathsAdd);
- break;
- }
- }
- }
- }
-
- }
-
- }
- console.timeEnd("generateOceanRoutes");
- }
-
- function findLandPath(start, end, type) {
- // A* algorithm
- const queue = new PriorityQueue({
- comparator: function (a, b) {
- return a.p - b.p
- }
- });
- const cameFrom = [];
- const costTotal = [];
- costTotal[start] = 0;
- queue.queue({e: start, p: 0});
- while (queue.length > 0) {
- const next = queue.dequeue().e;
- if (next === end) {break;}
- const pol = cells[next];
- pol.neighbors.forEach(function(e) {
- if (cells[e].height >= 20) {
- let cost = cells[e].height / 100 * 2;
- if (cells[e].path && type === "main") {
- cost = 0.15;
- } else {
- if (typeof e.manor === "undefined") {cost += 0.1;}
- if (typeof e.river !== "undefined") {cost -= 0.1;}
- if (cells[e].harbor) {cost *= 0.3;}
- if (cells[e].path) {cost *= 0.5;}
- cost += Math.hypot(cells[e].data[0] - pol.data[0],cells[e].data[1] - pol.data[1]) / 30;
- }
- const costNew = costTotal[next] + cost;
- if (!cameFrom[e] || costNew < costTotal[e]) { //
- costTotal[e] = costNew;
- cameFrom[e] = next;
- const dist = Math.hypot(cells[e].data[0] - cells[end].data[0], cells[e].data[1] - cells[end].data[1]) / 15;
- const priority = costNew + dist;
- queue.queue({e, p: priority});
- }
- }
- });
- }
- return cameFrom;
- }
-
- function findLandPaths(start, type) {
- // Dijkstra algorithm (not used now)
- const queue = new PriorityQueue({comparator: function(a, b) {return a.p - b.p}});
- const cameFrom = [],costTotal = [];
- cameFrom[start] = "no", costTotal[start] = 0;
- queue.queue({e: start, p: 0});
- while (queue.length > 0) {
- const next = queue.dequeue().e;
- const pol = cells[next];
- pol.neighbors.forEach(function(e) {
- if (cells[e].height < 20) return;
- let cost = cells[e].height / 100 * 2;
- if (e.river !== undefined) cost -= 0.2;
- if (pol.region !== cells[e].region) cost += 1;
- if (cells[e].region === "neutral") cost += 1;
- if (e.manor !== undefined) cost = 0.1;
- const costNew = costTotal[next] + cost;
- if (!cameFrom[e]) {
- costTotal[e] = costNew;
- cameFrom[e] = next;
- queue.queue({e, p: costNew});
- }
- });
- }
- return cameFrom;
- }
-
- function findOceanPaths(start, end) {
- const queue = new PriorityQueue({comparator: function(a, b) {return a.p - b.p}});
- let next;
- const cameFrom = [],costTotal = [];
- cameFrom[start] = "no", costTotal[start] = 0;
- queue.queue({e: start, p: 0});
- while (queue.length > 0 && next !== end) {
- next = queue.dequeue().e;
- const pol = cells[next];
- pol.neighbors.forEach(function(e) {
- if (cells[e].ctype < 0 || cells[e].haven === next) {
- let cost = 1;
- if (cells[e].ctype > 0) cost += 100;
- if (cells[e].ctype < -1) {
- const dist = Math.hypot(cells[e].data[0] - pol.data[0],cells[e].data[1] - pol.data[1]);
- cost += 50 + dist * 2;
- }
- if (cells[e].path && cells[e].ctype < 0) cost *= 0.8;
- const costNew = costTotal[next] + cost;
- if (!cameFrom[e]) {
- costTotal[e] = costNew;
- cells[e].cost = costNew;
- cameFrom[e] = next;
- queue.queue({e, p: costNew});
- }
- }
- });
- }
- return cameFrom;
- }
-
- function getPathDist(start, end) {
- const queue = new PriorityQueue({
- comparator: function (a, b) {
- return a.p - b.p
- }
- });
- let next, costNew;
- const cameFrom = [];
- const costTotal = [];
- cameFrom[start] = "no";
- costTotal[start] = 0;
- queue.queue({e: start, p: 0});
- while (queue.length > 0 && next !== end) {
- next = queue.dequeue().e;
- const pol = cells[next];
- pol.neighbors.forEach(function(e) {
- if (cells[e].path && (cells[e].ctype === -1 || cells[e].haven === next)) {
- const dist = Math.hypot(cells[e].data[0] - pol.data[0], cells[e].data[1] - pol.data[1]);
- costNew = costTotal[next] + dist;
- if (!cameFrom[e]) {
- costTotal[e] = costNew;
- cameFrom[e] = next;
- queue.queue({e, p: costNew});
- }
- }
- });
- }
- return costNew;
- }
-
- function restorePath(end, start, type, from) {
- let path = [], current = end;
- const limit = 1000;
- let prev = cells[end];
- if (type === "ocean" || !prev.path) {path.push({scX: prev.data[0],scY: prev.data[1],i: end});}
- if (!prev.path) {prev.path = 1;}
- for (let i = 0; i < limit; i++) {
- current = from[current];
- let cur = cells[current];
- if (!cur) {break;}
- if (cur.path) {
- cur.path += 1;
- path.push({scX: cur.data[0],scY: cur.data[1],i: current});
- prev = cur;
- drawPath();
- } else {
- cur.path = 1;
- if (prev) {path.push({scX: prev.data[0],scY: prev.data[1],i: prev.index});}
- prev = undefined;
- path.push({scX: cur.data[0],scY: cur.data[1],i: current});
- }
- if (current === start || !from[current]) {break;}
- }
- drawPath();
- function drawPath() {
- if (path.length > 1) {
- // mark crossroades
- if (type === "main" || type === "small") {
- const plus = type === "main" ? 4 : 2;
- const f = cells[path[0].i];
- if (f.path > 1) {
- if (!f.crossroad) {f.crossroad = 0;}
- f.crossroad += plus;
- }
- const t = cells[(path[path.length - 1].i)];
- if (t.path > 1) {
- if (!t.crossroad) {t.crossroad = 0;}
- t.crossroad += plus;
- }
- }
- // draw path segments
- let line = lineGen(path);
- line = round(line, 1);
- let id = 0; // to create unique route id
- if (type === "main") {
- id = roads.selectAll("path").size();
- roads.append("path").attr("d", line).attr("id", "road"+id).on("click", editRoute);
- } else if (type === "small") {
- id = trails.selectAll("path").size();
- trails.append("path").attr("d", line).attr("id", "trail"+id).on("click", editRoute);
- } else if (type === "ocean") {
- id = searoutes.selectAll("path").size();
- searoutes.append("path").attr("d", line).attr("id", "searoute"+id).on("click", editRoute);
- }
- }
- path = [];
- }
- }
-
- // Append burg elements
- function drawManors() {
- console.time('drawManors');
- const capitalIcons = burgIcons.select("#capitals");
- const capitalLabels = burgLabels.select("#capitals");
- const townIcons = burgIcons.select("#towns");
- const townLabels = burgLabels.select("#towns");
- const capitalSize = capitalIcons.attr("size") || 1;
- const townSize = townIcons.attr("size") || 0.5;
- capitalIcons.selectAll("*").remove();
- capitalLabels.selectAll("*").remove();
- townIcons.selectAll("*").remove();
- townLabels.selectAll("*").remove();
-
- for (let i = 0; i < manors.length; i++) {
- const x = manors[i].x, y = manors[i].y;
- const cell = manors[i].cell;
- const name = manors[i].name;
- const ic = i < states.length ? capitalIcons : townIcons;
- const lb = i < states.length ? capitalLabels : townLabels;
- const size = i < states.length ? capitalSize : townSize;
- ic.append("circle").attr("id", "burg"+i).attr("data-id", i).attr("cx", x).attr("cy", y).attr("r", size).on("click", editBurg);
- lb.append("text").attr("data-id", i).attr("x", x).attr("y", y).attr("dy", "-0.35em").text(name).on("click", editBurg);
- }
- console.timeEnd('drawManors');
- }
-
- // get settlement and country names based on option selected
- function getNames() {
- console.time('getNames');
- // if names source is an external resource
- if (namesInput.value === "1") {
- const request = new XMLHttpRequest();
- const url = "https://archivist.xalops.com/archivist-core/api/name/settlement?count=";
- request.open("GET", url+manors.length, true);
- request.onload = function() {
- const names = JSON.parse(request.responseText);
- for (let i=0; i < manors.length; i++) {
- manors[i].name = names[i];
- burgLabels.select("[data-id='" + i + "']").text(names[i]);
- if (i < states.length) {
- states[i].name = generateStateName(i);
- labels.select("#countries").select("#regionLabel"+i).text(states[i].name);
- }
- }
- console.log(names);
- };
- request.send(null);
- }
-
- if (namesInput.value !== "0") return;
- for (let i=0; i < manors.length; i++) {
- const culture = manors[i].culture;
- manors[i].name = generateName(culture);
- if (i < states.length) states[i].name = generateStateName(i);
- }
- console.timeEnd('getNames');
- }
-
- function calculateChains() {
- for (let c=0; c < nameBase.length; c++) {
- chain[c] = calculateChain(c);
- }
- }
-
- // calculate Markov's chain from namesbase data
- function calculateChain(c) {
- const chain = [];
- const d = nameBase[c].join(" ").toLowerCase();
- const method = nameBases[c].method;
-
- for (let i = -1, prev = " ", str = ""; i < d.length - 2; prev = str, i += str.length, str = "") {
- let vowel = 0, f = " ";
- if (method === "let-to-let") {str = d[i+1];} else {
- for (let c=i+1; str.length < 5; c++) {
- if (d[c] === undefined) break;
- str += d[c];
- if (str === " ") break;
- if (d[c] !== "o" && d[c] !== "e" && vowels.includes(d[c]) && d[c+1] === d[c]) break;
- if (d[c+2] === " ") {str += d[c+1]; break;}
- if (vowels.includes(d[c])) vowel++;
- if (vowel && vowels.includes(d[c+2])) break;
- }
- }
- if (i >= 0) {
- f = d[i];
- if (method === "syl-to-syl") f = prev;
- }
- if (chain[f] === undefined) chain[f] = [];
- chain[f].push(str);
- }
- return chain;
- }
-
- // generate random name using Markov's chain
- function generateName(culture, base) {
- if (base === undefined) {
- if (!cultures[culture]) {
- console.error("culture " + culture + " is not defined. Will load default cultures and set first culture");
- generateCultures();
- culture = 0;
- }
- base = cultures[culture].base;
- }
- if (!nameBases[base]) {
- console.error("nameBase " + base + " is not defined. Will load default names data and first base");
- if (!nameBases[0]) applyDefaultNamesData();
- base = 0;
- }
- const method = nameBases[base].method;
- const error = function(base) {
- tip("Names data for base " + nameBases[base].name + " is incorrect. Please fix in Namesbase Editor");
- editNamesbase();
- };
-
- if (method === "selection") {
- if (nameBase[base].length < 1) {error(base); return;}
- const rnd = rand(nameBase[base].length - 1);
- const name = nameBase[base][rnd];
- return name;
- }
-
- const data = chain[base];
- if (data === undefined || data[" "] === undefined) {error(base); return;}
- const max = nameBases[base].max;
- const min = nameBases[base].min;
- const d = nameBases[base].d;
- let word = "", variants = data[" "];
- if (variants === undefined) {
- error(base);
- return;
- }
- let cur = variants[rand(variants.length - 1)];
- for (let i=0; i < 21; i++) {
- if (cur === " " && Math.random() < 0.8) {
- // space means word end, but we don't want to end if word is too short
- if (word.length < min) {
- word = "";
- variants = data[" "];
- } else {break;}
- } else {
- const l = method === "let-to-syl" && cur.length > 1 ? cur[cur.length - 1] : cur;
- variants = data[l];
- // word is getting too long, restart
- word += cur; // add current el to word
- if (word.length > max) word = "";
- }
- if (variants === undefined) {
- error(base);
- return;
- }
- cur = variants[rand(variants.length - 1)];
- }
- // very rare case, let's just select a random name
- if (word.length < 2) word = nameBase[base][rand(nameBase[base].length - 1)];
-
- // do not allow multi-word name if word is foo short or not allowed for culture
- if (word.includes(" ")) {
- let words = word.split(" "), parsed;
- if (Math.random() > nameBases[base].m) {word = words.join("");}
- else {
- for (let i=0; i < words.length; i++) {
- if (words[i].length < 2) {
- if (!i) words[1] = words[0] + words[1];
- if (i) words[i-1] = words[i-1] + words[i];
- words.splice(i, 1);
- i--;
- }
- }
- word = words.join(" ");
- }
- }
-
- // parse word to get a final name
- const name = [...word].reduce(function(r, c, i, data) {
- if (c === " ") {
- if (!r.length) return "";
- if (i+1 === data.length) return r;
- }
- if (!r.length) return c.toUpperCase();
- if (r.slice(-1) === " ") return r + c.toUpperCase();
- if (c === data[i-1]) {
- if (!d.includes(c)) return r;
- if (c === data[i-2]) return r;
- }
- return r + c;
- }, "");
- return name;
- }
-
- // Define areas based on the closest manor to a polygon
- function defineRegions(withCultures) {
- console.time('defineRegions');
- const manorTree = d3.quadtree();
- manors.forEach(function(m) {if (m.region !== "removed") manorTree.add([m.x, m.y]);});
-
- const neutral = +neutralInput.value;
- land.forEach(function(i) {
- if (i.manor !== undefined && manors[i.manor].region !== "removed") {
- i.region = manors[i.manor].region;
- if (withCultures && manors[i.manor].culture !== undefined) i.culture = manors[i.manor].culture;
- return;
- }
- const x = i.data[0],y = i.data[1];
-
- let dist = 100000, manor = null;
- if (manors.length) {
- const c = manorTree.find(x, y);
- dist = Math.hypot(c[0] - x, c[1] - y);
- manor = getManorId(c);
- }
- if (dist > neutral / 2 || manor === null) {
- i.region = "neutral";
- if (withCultures) {
- const closestCulture = cultureTree.find(x, y);
- i.culture = getCultureId(closestCulture);
- }
- } else {
- const cell = manors[manor].cell;
- if (cells[cell].fn !== i.fn) {
- let minDist = dist * 3;
- land.forEach(function(l) {
- if (l.fn === i.fn && l.manor !== undefined) {
- if (manors[l.manor].region === "removed") return;
- const distN = Math.hypot(l.data[0] - x, l.data[1] - y);
- if (distN < minDist) {minDist = distN; manor = l.manor;}
- }
- });
- }
- i.region = manors[manor].region;
- if (withCultures) i.culture = manors[manor].culture;
- }
- });
- console.timeEnd('defineRegions');
- }
-
- // Define areas cells
- function drawRegions() {
- console.time('drawRegions');
- labels.select("#countries").selectAll("*").remove();
-
- // arrays to store edge data
- const edges = [],coastalEdges = [],borderEdges = [],neutralEdges = [];
- for (let a=0; a < states.length; a++) {
- edges[a] = [];
- coastalEdges[a] = [];
- }
- const e = diagram.edges;
- for (let i=0; i < e.length; i++) {
- if (e[i] === undefined) continue;
- const start = e[i][0].join(" ");
- const end = e[i][1].join(" ");
- const p = {start, end};
- if (e[i].left === undefined) {
- const r = e[i].right.index;
- const rr = cells[r].region;
- if (Number.isInteger(rr)) edges[rr].push(p);
- continue;
- }
- if (e[i].right === undefined) {
- const l = e[i].left.index;
- const lr = cells[l].region;
- if (Number.isInteger(lr)) edges[lr].push(p);
- continue;
- }
- const l = e[i].left.index;
- const r = e[i].right.index;
- const lr = cells[l].region;
- const rr = cells[r].region;
- if (lr === rr) continue;
- if (Number.isInteger(lr)) {
- edges[lr].push(p);
- if (rr === undefined) {coastalEdges[lr].push(p);}
- else if (rr === "neutral") {neutralEdges.push(p);}
- }
- if (Number.isInteger(rr)) {
- edges[rr].push(p);
- if (lr === undefined) {coastalEdges[rr].push(p);}
- else if (lr === "neutral") {neutralEdges.push(p);}
- else if (Number.isInteger(lr)) {borderEdges.push(p);}
- }
- }
- edges.map(function(e, i) {
- if (e.length) {
- drawRegion(e, i);
- drawRegionCoast(coastalEdges[i],i);
- }
- });
- drawBorders(borderEdges, "state");
- drawBorders(neutralEdges, "neutral");
- console.timeEnd('drawRegions');
- }
-
- function drawRegion(edges, region) {
- let path = "";
- const array = [];
- lineGen.curve(d3.curveLinear);
- while (edges.length > 2) {
- const edgesOrdered = []; // to store points in a correct order
- const start = edges[0].start;
- let end = edges[0].end;
- edges.shift();
- let spl = start.split(" ");
- edgesOrdered.push({scX: spl[0],scY: spl[1]});
- spl = end.split(" ");
- edgesOrdered.push({scX: spl[0],scY: spl[1]});
- for (let i = 0; end !== start && i < 2000; i++) {
- const next = $.grep(edges, function (e) {
- return (e.start == end || e.end == end);
- });
- if (next.length > 0) {
- if (next[0].start == end) {
- end = next[0].end;
- } else if (next[0].end == end) {
- end = next[0].start;
- }
- spl = end.split(" ");
- edgesOrdered.push({scX: spl[0],scY: spl[1]});
- }
- const rem = edges.indexOf(next[0]);
- edges.splice(rem, 1);
- }
- path += lineGen(edgesOrdered) + "Z ";
- array[array.length] = edgesOrdered.map(function(e) {return [+e.scX, +e.scY];});
- }
- const color = states[region].color;
- regions.append("path").attr("d", round(path, 1)).attr("fill", color).attr("class", "region"+region);
- array.sort(function(a, b){return b.length - a.length;});
- let capital = states[region].capital;
- // add capital cell as a hole
- if (!isNaN(capital)) {
- const capitalCell = manors[capital].cell;
- array.push(polygons[capitalCell]);
- }
- const name = states[region].name;
- const c = polylabel(array, 1.0); // pole of inaccessibility
- labels.select("#countries").append("text").attr("id", "regionLabel"+region).attr("x", rn(c[0])).attr("y", rn(c[1])).text(name).on("click", editLabel);
- states[region].area = rn(Math.abs(d3.polygonArea(array[0]))); // define region area
- }
-
- function drawRegionCoast(edges, region) {
- let path = "";
- while (edges.length > 0) {
- const edgesOrdered = []; // to store points in a correct order
- const start = edges[0].start;
- let end = edges[0].end;
- edges.shift();
- let spl = start.split(" ");
- edgesOrdered.push({scX: spl[0],scY: spl[1]});
- spl = end.split(" ");
- edgesOrdered.push({scX: spl[0],scY: spl[1]});
- let next = $.grep(edges, function (e) {
- return (e.start == end || e.end == end);
- });
- while (next.length > 0) {
- if (next[0].start == end) {
- end = next[0].end;
- } else if (next[0].end == end) {
- end = next[0].start;
- }
- spl = end.split(" ");
- edgesOrdered.push({scX: spl[0],scY: spl[1]});
- const rem = edges.indexOf(next[0]);
- edges.splice(rem, 1);
- next = $.grep(edges, function(e) {return (e.start == end || e.end == end);});
- }
- path += lineGen(edgesOrdered);
- }
- const color = states[region].color;
- regions.append("path").attr("d", round(path, 1)).attr("fill", "none").attr("stroke", color).attr("stroke-width", 5).attr("class", "region"+region);
- }
-
- function drawBorders(edges, type) {
- let path = "";
- if (edges.length < 1) {return;}
- while (edges.length > 0) {
- const edgesOrdered = []; // to store points in a correct order
- const start = edges[0].start;
- let end = edges[0].end;
- edges.shift();
- let spl = start.split(" ");
- edgesOrdered.push({scX: spl[0],scY: spl[1]});
- spl = end.split(" ");
- edgesOrdered.push({scX: spl[0],scY: spl[1]});
- let next = $.grep(edges, function (e) {
- return (e.start == end || e.end == end);
- });
- while (next.length > 0) {
- if (next[0].start == end) {
- end = next[0].end;
- } else if (next[0].end == end) {
- end = next[0].start;
- }
- spl = end.split(" ");
- edgesOrdered.push({scX: spl[0],scY: spl[1]});
- const rem = edges.indexOf(next[0]);
- edges.splice(rem, 1);
- next = $.grep(edges, function(e) {return (e.start == end || e.end == end);});
- }
- path += lineGen(edgesOrdered);
- }
- if (type === "state") {stateBorders.append("path").attr("d", round(path, 1));}
- if (type === "neutral") {neutralBorders.append("path").attr("d", round(path, 1));}
- }
-
- // generate region name
- function generateStateName(state) {
- let culture = null;
- if (states[state]) if(manors[states[state].capital]) culture = manors[states[state].capital].culture;
- let name = "NameIdontWant";
- if (Math.random() < 0.85 || culture === null) {
- // culture is random if capital is not yet defined
- if (culture === null) culture = rand(cultures.length - 1);
- // try to avoid too long words as a basename
- for (let i=0; i < 20 && name.length > 7; i++) {
- name = generateName(culture);
- }
- } else {
- name = manors[state].name;
- }
- const base = cultures[culture].base;
-
- let addSuffix = false;
- // handle special cases
- const e = name.slice(-2);
- if (base === 5 && (e === "sk" || e === "ev" || e === "ov")) {
- // remove -sk and -ev/-ov for Ruthenian
- name = name.slice(0,-2);
- addSuffix = true;
- } else if (name.length > 5 && base === 1 && name.slice(-3) === "ton") {
- // remove -ton ending for English
- name = name.slice(0,-3);
- addSuffix = true;
- } else if (name.length > 6 && name.slice(-4) === "berg") {
- // remove -berg ending for any
- name = name.slice(0,-4);
- addSuffix = true;
- } else if (base === 12) {
- // Japanese ends on vowels
- if (vowels.includes(name.slice(-1))) return name;
- return name + "u";
- } else if (base === 10) {
- // Korean has "guk" suffix
- if (name.slice(-3) === "guk") return name;
- if (name.slice(-1) === "g") name = name.slice(0,-1);
- if (Math.random() < 0.2 && name.length < 7) name = name + "guk"; // 20% for "guk"
- return name;
- } else if (base === 11) {
- // Chinese has "guo" suffix
- if (name.slice(-3) === "guo") return name;
- if (name.slice(-1) === "g") name = name.slice(0,-1);
- if (Math.random() < 0.3 && name.length < 7) name = name + " Guo"; // 30% for "guo"
- return name;
- }
-
- // define if suffix should be used
- let vowel = vowels.includes(name.slice(-1)); // last char is vowel
- if (vowel && name.length > 3) {
- if (Math.random() < 0.85) {
- if (vowels.includes(name.slice(-2,-1))) {
- name = name.slice(0,-2);
- addSuffix = true; // 85% for vv
- } else if (Math.random() < 0.7) {
- name = name.slice(0,-1);
- addSuffix = true; // ~60% for cv
- }
- }
- } else if (Math.random() < 0.6) {
- addSuffix = true; // 60% for cc and vc
- }
-
- if (addSuffix === false) return name;
- let suffix = "ia"; // common latin suffix
- const rnd = Math.random();
- if (rnd < 0.05 && base === 3) suffix = "terra"; // 5% "terra" for Italian
- else if (rnd < 0.05 && base === 4) suffix = "terra"; // 5% "terra" for Spanish
- else if (rnd < 0.05 && base == 2) suffix = "terre"; // 5% "terre" for French
- else if (rnd < 0.5 && base == 0) suffix = "land"; // 50% "land" for German
- else if (rnd < 0.4 && base == 1) suffix = "land"; // 40% "land" for English
- else if (rnd < 0.3 && base == 6) suffix = "land"; // 30% "land" for Nordic
- else if (rnd < 0.1 && base == 7) suffix = "eia"; // 10% "eia" for Greek ("ia" is also Greek)
- else if (rnd < 0.4 && base == 9) suffix = "maa"; // 40% "maa" for Finnic
- if (name.slice(-1 * suffix.length) === suffix) return name; // no suffix if name already ends with it
- if (name.slice(-1) === suffix.charAt(0)) name = name.slice(0, -1); // remove name last letter if it's a suffix first letter
- return name + suffix;
- }
-
- // re-calculate cultures
- function recalculateCultures(fullRedraw) {
- console.time("recalculateCultures");
- // For each capital find closest culture and assign it to capital
- states.forEach(function(s) {
- if (s.capital === "neutral" || s.capital === "select") return;
- const capital = manors[s.capital];
- const c = cultureTree.find(capital.x, capital.y);
- capital.culture = getCultureId(c);
- });
-
- // For each town if distance to its capital > neutral / 2,
- // assign closest culture to the town; else assign capital's culture
- const manorTree = d3.quadtree();
- const neutral = +neutralInput.value;
- manors.forEach(function(m) {
- if (m.region === "removed") return;
- manorTree.add([m.x, m.y]);
- if (m.region === "neutral") {
- const culture = cultureTree.find(m.x, m.y);
- m.culture = getCultureId(culture);
- return;
- }
- const c = states[m.region].capital;
- if (c !== "neutral" && c !== "select") {
- const dist = Math.hypot(m.x - manors[c].x, m.y - manors[c].y);
- if (dist <= neutral / 5) {
- m.culture = manors[c].culture;
- return;
- }
- }
- const culture = cultureTree.find(m.x, m.y);
- m.culture = getCultureId(culture);
- });
-
- // For each land cell if distance to closest manor > neutral / 2,
- // assign closest culture to the cell; else assign manors's culture
- const changed = [];
- land.forEach(function(i) {
- const x = i.data[0],y = i.data[1];
- const c = manorTree.find(x, y);
- const culture = i.culture;
- const dist = Math.hypot(c[0] - x, c[1] - y);
- let manor = getManorId(c);
- if (dist > neutral / 2 || manor === undefined) {
- const closestCulture = cultureTree.find(i.data[0],i.data[1]);
- i.culture = getCultureId(closestCulture);
- } else {
- const cell = manors[manor].cell;
- if (cells[cell].fn !== i.fn) {
- let minDist = dist * 3;
- land.forEach(function(l) {
- if (l.fn === i.fn && l.manor !== undefined) {
- if (manors[l.manor].region === "removed") return;
- const distN = Math.hypot(l.data[0] - x, l.data[1] - y);
- if (distN < minDist) {minDist = distN; manor = l.manor;}
- }
- });
- }
- i.culture = manors[manor].culture;
- }
- // re-color cells
- if (i.culture !== culture || fullRedraw) {
- const clr = cultures[i.culture].color;
- cults.select("#cult"+i.index).attr("fill", clr).attr("stroke", clr);
- }
- });
- console.timeEnd("recalculateCultures");
- }
-
- // get culture Id from center coordinates
- function getCultureId(c) {
- for (let i=0; i < cultures.length; i++) {
- if (cultures[i].center[0] === c[0]) if (cultures[i].center[1] === c[1]) return i;
- }
- }
-
- // get manor Id from center coordinates
- function getManorId(c) {
- for (let i=0; i < manors.length; i++) {
- if (manors[i].x === c[0]) if (manors[i].y === c[1]) return i;
- }
- }
-
- // focus on coorditanes, cell or burg provided in searchParams
- function focusOn() {
- if (params.get("from") === "MFCG") {
- // focus on burg from MFCG
- findBurgForMFCG();
- return;
- }
- let s = params.get("scale") || 8;
- let x = params.get("x");
- let y = params.get("y");
- let c = params.get("cell");
- if (c !== null) {
- x = cells[+c].data[0];
- y = cells[+c].data[1];
- }
- let b = params.get("burg");
- if (b !== null) {
- x = manors[+b].x;
- y = manors[+b].y;
- }
- if (x !== null && y !== null) zoomTo(x, y, s, 1600);
- }
-
- // find burg from MFCG and focus on it
- function findBurgForMFCG() {
- if (!manors.length) {console.error("No burgs generated. Cannot select a burg for MFCG"); return;}
- const size = +params.get("size");
- let coast = +params.get("coast");
- let port = +params.get("port");
- let river = +params.get("river");
- let selection = defineSelection(coast, port, river);
- if (!selection.length) selection = defineSelection(coast, !port, !river);
- if (!selection.length) selection = defineSelection(!coast, 0, !river);
- if (!selection.length) selection = manors[0]; // select first if nothing is found
- if (!selection.length) {console.error("Cannot find a burg for MFCG"); return;}
-
- function defineSelection(coast, port, river) {
- let selection = [];
- if (port && river) selection = $.grep(manors, function(e) {return cells[e.cell].port !== undefined && cells[e.cell].river !== undefined;});
- else if (!port && coast && river) selection = $.grep(manors, function(e) {return cells[e.cell].port === undefined && cells[e.cell].ctype === 1 && cells[e.cell].river !== undefined;});
- else if (!coast && !river) selection = $.grep(manors, function(e) {return cells[e.cell].ctype !== 1 && cells[e.cell].river === undefined;});
- else if (!coast && river) selection = $.grep(manors, function(e) {return cells[e.cell].ctype !== 1 && cells[e.cell].river !== undefined;});
- else if (coast && !river) selection = $.grep(manors, function(e) {return cells[e.cell].ctype === 1 && cells[e.cell].river === undefined;});
- return selection;
- }
-
- // select a burg with closes population from selection
- const selected = d3.scan(selection, function(a, b) {return Math.abs(a.population - size) - Math.abs(b.population - size);});
- const burg = selection[selected].i;
- if (size && burg !== undefined) {manors[burg].population = size;} else {return;}
-
- // focus on found burg
- const label = burgLabels.select("[data-id='" + burg + "']");
- if (!label.size()) {
- console.error("Cannot find a label for MFCG burg "+burg);
- return;
- }
- tip("Here stands the glorious city of "+manors[burg].name, true);
- label.classed("drag", true).on("mouseover", function() {
- d3.select(this).classed("drag", false);
- tip("", true);
- });
- const x = +label.attr("x"), y = +label.attr("y");
- zoomTo(x, y, 8, 1600);
- }
-
- // draw the Heightmap
- function toggleHeight() {
- const scheme = styleSchemeInput.value;
- let hColor = color;
- if (scheme === "light") hColor = d3.scaleSequential(d3.interpolateRdYlGn);
- if (scheme === "green") hColor = d3.scaleSequential(d3.interpolateGreens);
- if (scheme === "monochrome") hColor = d3.scaleSequential(d3.interpolateGreys);
- if (!terrs.selectAll("path").size()) {
- cells.map(function(i, d) {
- let height = i.height;
- if (height < 20 && !i.lake) return;
- if (i.lake) {
- const nHeights = i.neighbors.map(function(e) {if (cells[e].height >= 20) return cells[e].height;});
- const mean = d3.mean(nHeights);
- if (!mean) return;
- height = Math.trunc(mean);
- if (height < 20 || isNaN(height)) height = 20;
- }
- const clr = hColor((100 - height) / 100);
- terrs.append("path")
- .attr("d", "M" + polygons[d].join("L") + "Z")
- .attr("fill", clr).attr("stroke", clr);
- });
- } else {
- terrs.selectAll("path").remove();
- }
- }
-
- // draw Cultures
- function toggleCultures() {
- if (cults.selectAll("path").size() == 0) {
- land.map(function(i) {
- const color = cultures[i.culture].color;
- cults.append("path")
- .attr("d", "M" + polygons[i.index].join("L") + "Z")
- .attr("id", "cult" + i.index)
- .attr("fill", color)
- .attr("stroke", color);
- });
- } else {
- cults.selectAll("path").remove();
- }
- }
-
- // draw Overlay
- function toggleOverlay() {
- if (overlay.selectAll("*").size() === 0) {
- const type = styleOverlayType.value;
- const size = +styleOverlaySize.value;
- if (type === "pointyHex" || type === "flatHex") {
- let points = getHexGridPoints(size, type);
- let hex = "m" + getHex(size, type).slice(0, 4).join("l");
- let d = points.map(function(p) {return "M" + p + hex;}).join("");
- overlay.append("path").attr("d", d);
- } else if (type === "square") {
- const x = d3.range(size, svgWidth, size);
- const y = d3.range(size, svgHeight, size);
- overlay.append("g").selectAll("line").data(x).enter().append("line")
- .attr("x1", function(d) {return d;})
- .attr("x2", function(d) {return d;})
- .attr("y1", 0).attr("y2", svgHeight);
- overlay.append("g").selectAll("line").data(y).enter().append("line")
- .attr("y1", function(d) {return d;})
- .attr("y2", function(d) {return d;})
- .attr("x1", 0).attr("x2", svgWidth);
- } else {
- const tr = `translate(80 80) scale(${size / 20})`;
- d3.select("#rose").attr("transform", tr);
- overlay.append("use").attr("xlink:href","#rose");
- }
- overlay.call(d3.drag().on("start", elementDrag));
- calculateFriendlyOverlaySize();
- } else {
- overlay.selectAll("*").remove();
- }
- }
-
- function getHex(radius, type) {
- let x0 = 0, y0 = 0;
- let s = type === "pointyHex" ? 0 : Math.PI / -6;
- let thirdPi = Math.PI / 3;
- let angles = [s, s + thirdPi, s + 2 * thirdPi, s + 3 * thirdPi, s + 4 * thirdPi, s + 5 * thirdPi];
- return angles.map(function(angle) {
- const x1 = Math.sin(angle) * radius,
- y1 = -Math.cos(angle) * radius,
- dx = x1 - x0,
- dy = y1 - y0;
- x0 = x1, y0 = y1;
- return [dx, dy];
- });
- }
-
- function getHexGridPoints(size, type) {
- let points = [];
- const rt3 = Math.sqrt(3);
- const off = type === "pointyHex" ? rt3 * size / 2 : size * 3 / 2;
- const ySpace = type === "pointyHex" ? size * 3 / 2 : rt3 * size / 2;
- const xSpace = type === "pointyHex" ? rt3 * size : size * 3;
- for (let y = 0, l = 0; y < graphHeight; y += ySpace, l++) {
- for (let x = l % 2 ? 0 : off; x < graphWidth; x += xSpace) {
- points.push([x, y]);
- }
- }
- return points;
- }
-
- // clean data to get rid of redundand info
- function cleanData() {
- console.time("cleanData");
- cells.map(function(c) {
- delete c.cost;
- delete c.used;
- delete c.coastX;
- delete c.coastY;
- if (c.ctype === undefined) delete c.ctype;
- if (c.lake === undefined) delete c.lake;
- c.height = Math.trunc(c.height);
- if (c.height >= 20) c.flux = rn(c.flux, 2);
- });
- // restore layers if they was turned on
- if (!$("#toggleHeight").hasClass("buttonoff") && !terrs.selectAll("path").size()) toggleHeight();
- if (!$("#toggleCultures").hasClass("buttonoff") && !cults.selectAll("path").size()) toggleCultures();
- closeDialogs();
- invokeActiveZooming();
- console.timeEnd("cleanData");
- }
-
- // close all dialogs except stated
- function closeDialogs(except) {
- except = except || "#except";
- $(".dialog:visible").not(except).each(function(e) {
- $(this).dialog("close");
- });
- }
-
- // change transparency for modal windowa
- function changeDialogsTransparency(v) {
- localStorage.setItem("transparency", v);
- const alpha = (100 - +v) / 100;
- const optionsColor = "rgba(164, 139, 149, " + alpha + ")"; // purple-red
- const dialogsColor = "rgba(255, 255, 255, " + alpha + ")"; // white
- document.getElementById("options").style.backgroundColor = optionsColor;
- document.getElementById("dialogs").style.backgroundColor = dialogsColor;
- }
-
- // Draw the water flux system (for dubugging)
- function toggleFlux() {
- const colorFlux = d3.scaleSequential(d3.interpolateBlues);
- if (terrs.selectAll("path").size() == 0) {
- land.map(function(i) {
- terrs.append("path")
- .attr("d", "M" + polygons[i.index].join("L") + "Z")
- .attr("fill", colorFlux(0.1 + i.flux))
- .attr("stroke", colorFlux(0.1 + i.flux));
- });
- } else {
- terrs.selectAll("path").remove();
- }
- }
-
- // Draw the Relief (need to create more beautiness)
- function drawRelief() {
- console.time('drawRelief');
- let h, count, rnd, cx, cy, swampCount = 0;
- const hills = terrain.select("#hills");
- const mounts = terrain.select("#mounts");
- const swamps = terrain.select("#swamps");
- const forests = terrain.select("#forests");
- terrain.selectAll("g").selectAll("g").remove();
- // sort the land to Draw the top element first (reduce the elements overlapping)
- land.sort(compareY);
- for (let i = 0; i < land.length; i++) {
- if (land[i].river) continue; // no icons on rivers
- const cell = land[i].index;
- const p = d3.polygonCentroid(polygons[cell]); // polygon centroid point
- if (p === undefined) continue; // something is wrong with data
- const height = land[i].height;
- const area = land[i].area;
- if (height >= 70) {
- // mount icon
- h = (height - 55) * 0.12;
- for (let c = 0, a = area; Math.random() < a / 50; c++, a -= 50) {
- if (polygons[cell][c] === undefined) break;
- const g = mounts.append("g").attr("data-cell", cell);
- if (c < 2) {
- cx = p[0] - h / 100 * (1 - c / 10) - c * 2;
- cy = p[1] + h / 400 + c;
- } else {
- const p2 = polygons[cell][c];
- cx = (p[0] * 1.2 + p2[0] * 0.8) / 2;
- cy = (p[1] * 1.2 + p2[1] * 0.8) / 2;
- }
- rnd = Math.random() * 0.8 + 0.2;
- let mount = "M" + cx + "," + cy + " L" + (cx + h / 3 + rnd) + "," + (cy - h / 4 - rnd * 1.2) + " L" + (cx + h / 1.1) + "," + (cy - h) + " L" + (cx + h + rnd) + "," + (cy - h / 1.2 + rnd) + " L" + (cx + h * 2) + "," + cy;
- let shade = "M" + cx + "," + cy + " L" + (cx + h / 3 + rnd) + "," + (cy - h / 4 - rnd * 1.2) + " L" + (cx + h / 1.1) + "," + (cy - h) + " L" + (cx + h / 1.5) + "," + cy;
- let dash = "M" + (cx - 0.1) + "," + (cy + 0.3) + " L" + (cx + 2 * h + 0.1) + "," + (cy + 0.3);
- dash += "M" + (cx + 0.4) + "," + (cy + 0.6) + " L" + (cx + 2 * h - 0.3) + "," + (cy + 0.6);
- g.append("path").attr("d", round(mount, 1)).attr("stroke", "#5c5c70");
- g.append("path").attr("d", round(shade, 1)).attr("fill", "#999999");
- g.append("path").attr("d", round(dash, 1)).attr("class", "strokes");
- }
- } else if (height > 50) {
- // hill icon
- h = (height - 40) / 10;
- if (h > 1.7) h = 1.7;
- for (let c = 0, a = area; Math.random() < a / 30; c++, a -= 30) {
- if (land[i].ctype === 1 && c > 0) break;
- if (polygons[cell][c] === undefined) break;
- const g = hills.append("g").attr("data-cell", cell);
- if (c < 2) {
- cx = p[0] - h - c * 1.2;
- cy = p[1] + h / 4 + c / 1.6;
- } else {
- const p2 = polygons[cell][c];
- cx = (p[0] * 1.2 + p2[0] * 0.8) / 2;
- cy = (p[1] * 1.2 + p2[1] * 0.8) / 2;
- }
- let hill = "M" + cx + "," + cy + " Q" + (cx + h) + "," + (cy - h) + " " + (cx + 2 * h) + "," + cy;
- let shade = "M" + (cx + 0.6 * h) + "," + (cy + 0.1) + " Q" + (cx + h * 0.95) + "," + (cy - h * 0.91) + " " + (cx + 2 * h * 0.97) + "," + cy;
- let dash = "M" + (cx - 0.1) + "," + (cy + 0.2) + " L" + (cx + 2 * h + 0.1) + "," + (cy + 0.2);
- dash += "M" + (cx + 0.4) + "," + (cy + 0.4) + " L" + (cx + 2 * h - 0.3) + "," + (cy + 0.4);
- g.append("path").attr("d", round(hill, 1)).attr("stroke", "#5c5c70");
- g.append("path").attr("d", round(shade, 1)).attr("fill", "white");
- g.append("path").attr("d", round(dash, 1)).attr("class", "strokes");
- }
- }
-
- // swamp icons
- if (height >= 21 && height < 22 && swampCount < +swampinessInput.value && land[i].used != 1) {
- const g = swamps.append("g").attr("data-cell", cell);
- swampCount++;
- land[i].used = 1;
- let swamp = drawSwamp(p[0],p[1]);
- land[i].neighbors.forEach(function(e) {
- if (cells[e].height >= 20 && cells[e].height < 30 && !cells[e].river && cells[e].used != 1) {
- cells[e].used = 1;
- swamp += drawSwamp(cells[e].data[0], cells[e].data[1]);
- }
- });
- g.append("path").attr("d", round(swamp, 1));
- }
-
- // forest icons
- if (Math.random() < height / 100 && height >= 22 && height < 48) {
- for (let c = 0, a = area; Math.random() < a / 15; c++, a -= 15) {
- if (land[i].ctype === 1 && c > 0) break;
- if (polygons[cell][c] === undefined) break;
- const g = forests.append("g").attr("data-cell", cell);
- if (c === 0) {
- cx = rn(p[0] - 1 - Math.random(), 1);
- cy = p[1] - 2;
- } else {
- const p2 = polygons[cell][c];
- if (c > 1) {
- const dist = Math.hypot(p2[0] - polygons[cell][c-1][0],p2[1] - polygons[cell][c-1][1]);
- if (dist < 2) continue;
- }
- cx = (p[0] * 0.5 + p2[0] * 1.5) / 2;
- cy = (p[1] * 0.5 + p2[1] * 1.5) / 2 - 1;
- }
- const forest = "M" + cx + "," + cy + " q-1,0.8 -0.05,1.25 v0.75 h0.1 v-0.75 q0.95,-0.47 -0.05,-1.25 z ";
- const light = "M" + cx + "," + cy + " q-1,0.8 -0.05,1.25 h0.1 q0.95,-0.47 -0.05,-1.25 z ";
- const shade = "M" + cx + "," + cy + " q-1,0.8 -0.05,1.25 q-0.2,-0.55 0,-1.1 z ";
- g.append("path").attr("d", forest);
- g.append("path").attr("d", light).attr("fill", "white").attr("stroke", "none");
- g.append("path").attr("d", shade).attr("fill", "#999999").attr("stroke", "none");
- }
- }
- }
- terrain.selectAll("g").selectAll("g").on("click", editReliefIcon);
- console.timeEnd('drawRelief');
- }
-
- function addReliefIcon(height, type, cx, cy, cell) {
- const g = terrain.select("#" + type).append("g").attr("data-cell", cell);
- if (type === "mounts") {
- const h = height >= 0.7 ? (height - 0.55) * 12 : 1.8;
- const rnd = Math.random() * 0.8 + 0.2;
- let mount = "M" + cx + "," + cy + " L" + (cx + h / 3 + rnd) + "," + (cy - h / 4 - rnd * 1.2) + " L" + (cx + h / 1.1) + "," + (cy - h) + " L" + (cx + h + rnd) + "," + (cy - h / 1.2 + rnd) + " L" + (cx + h * 2) + "," + cy;
- let shade = "M" + cx + "," + cy + " L" + (cx + h / 3 + rnd) + "," + (cy - h / 4 - rnd * 1.2) + " L" + (cx + h / 1.1) + "," + (cy - h) + " L" + (cx + h / 1.5) + "," + cy;
- let dash = "M" + (cx - 0.1) + "," + (cy + 0.3) + " L" + (cx + 2 * h + 0.1) + "," + (cy + 0.3);
- dash += "M" + (cx + 0.4) + "," + (cy + 0.6) + " L" + (cx + 2 * h - 0.3) + "," + (cy + 0.6);
- g.append("path").attr("d", round(mount, 1)).attr("stroke", "#5c5c70");
- g.append("path").attr("d", round(shade, 1)).attr("fill", "#999999");
- g.append("path").attr("d", round(dash, 1)).attr("class", "strokes");
- }
- if (type === "hills") {
- let h = height > 0.5 ? (height - 0.4) * 10 : 1.2;
- if (h > 1.8) h = 1.8;
- let hill = "M" + cx + "," + cy + " Q" + (cx + h) + "," + (cy - h) + " " + (cx + 2 * h) + "," + cy;
- let shade = "M" + (cx + 0.6 * h) + "," + (cy + 0.1) + " Q" + (cx + h * 0.95) + "," + (cy - h * 0.91) + " " + (cx + 2 * h * 0.97) + "," + cy;
- let dash = "M" + (cx - 0.1) + "," + (cy + 0.2) + " L" + (cx + 2 * h + 0.1) + "," + (cy + 0.2);
- dash += "M" + (cx + 0.4) + "," + (cy + 0.4) + " L" + (cx + 2 * h - 0.3) + "," + (cy + 0.4);
- g.append("path").attr("d", round(hill, 1)).attr("stroke", "#5c5c70");
- g.append("path").attr("d", round(shade, 1)).attr("fill", "white");
- g.append("path").attr("d", round(dash, 1)).attr("class", "strokes");
- }
- if (type === "swamps") {
- const swamp = drawSwamp(cx, cy);
- g.append("path").attr("d", round(swamp, 1));
- }
- if (type === "forests") {
- const rnd = Math.random();
- const h = rnd * 0.4 + 0.6;
- const forest = "M" + cx + "," + cy + " q-1,0.8 -0.05,1.25 v0.75 h0.1 v-0.75 q0.95,-0.47 -0.05,-1.25 z ";
- const light = "M" + cx + "," + cy + " q-1,0.8 -0.05,1.25 h0.1 q0.95,-0.47 -0.05,-1.25 z ";
- const shade = "M" + cx + "," + cy + " q-1,0.8 -0.05,1.25 q-0.2,-0.55 0,-1.1 z ";
- g.append("path").attr("d", forest);
- g.append("path").attr("d", light).attr("fill", "white").attr("stroke", "none");
- g.append("path").attr("d", shade).attr("fill", "#999999").attr("stroke", "none");
- }
- g.on("click", editReliefIcon);
- return g;
- }
-
- function compareY(a, b) {
- if (a.data[1] > b.data[1]) return 1;
- if (a.data[1] < b.data[1]) return -1;
- return 0;
- }
-
- function drawSwamp(x, y) {
- const h = 0.6;
- let line = "";
- for (let c = 0; c < 3; c++) {
- let cx;
- let cy;
- if (c == 0) {
- cx = x;
- cy = y - 0.5 - Math.random();
- }
- if (c == 1) {
- cx = x + h + Math.random();
- cy = y + h + Math.random();
- }
- if (c == 2) {
- cx = x - h - Math.random();
- cy = y + 2 * h + Math.random();
- }
- line += "M" + cx + "," + cy + " H" + (cx - h / 6) + " M" + cx + "," + cy + " H" + (cx + h / 6) + " M" + cx + "," + cy + " L" + (cx - h / 3) + "," + (cy - h / 2) + " M" + cx + "," + cy + " V" + (cy - h / 1.5) + " M" + cx + "," + cy + " L" + (cx + h / 3) + "," + (cy - h / 2);
- line += "M" + (cx - h) + "," + cy + " H" + (cx - h / 2) + " M" + (cx + h / 2) + "," + cy + " H" + (cx + h);
- }
- return line;
- }
-
- function dragged(e) {
- const el = d3.select(this);
- const x = d3.event.x;
- const y = d3.event.y;
- el.raise().classed("drag", true);
- if (el.attr("x")) {
- el.attr("x", x).attr("y", y + 0.8);
- const matrix = el.attr("transform");
- if (matrix) {
- const angle = matrix.split('(')[1].split(')')[0].split(' ')[0];
- const bbox = el.node().getBBox();
- const rotate = "rotate(" + angle + " " + (bbox.x + bbox.width / 2) + " " + (bbox.y + bbox.height / 2) + ")";
- el.attr("transform", rotate);
- }
- } else {
- el.attr("cx", x).attr("cy", y);
- }
- }
-
- function dragended(d) {
- d3.select(this).classed("drag", false);
- }
-
- // Complete the map for the "customize" mode
- function getMap() {
- if (customization !== 1) {
- tip('Nothing to complete! Click on "Edit" or "Clear all" to enter a heightmap customization mode', null, "error");
- return;
- }
- if (+landmassCounter.innerHTML < 150) {
- tip("Insufficient land area! Please add more land cells to complete the map", null, "error");
- return;
- }
- exitCustomization();
- console.time("TOTAL");
- markFeatures();
- drawOcean();
- elevateLakes();
- resolveDepressionsPrimary();
- reGraph();
- resolveDepressionsSecondary();
- flux();
- addLakes();
- if (!changeHeights.checked) restoreCustomHeights();
- drawCoastline();
- drawRelief();
- const keepData = states.length && manors.length;
- if (keepData) {
- restoreRegions();
- } else {
- generateCultures();
- manorsAndRegions();
- }
- cleanData();
- console.timeEnd("TOTAL");
- }
-
- // Add support "click to add" button events
- $("#customizeTab").click(clickToAdd);
- function clickToAdd() {
- if (modules.clickToAdd) return;
- modules.clickToAdd = true;
-
- // add label on click
- $("#addLabel").click(function() {
- if ($(this).hasClass('pressed')) {
- $(".pressed").removeClass('pressed');
- restoreDefaultEvents();
- } else {
- $(".pressed").removeClass('pressed');
- $(this).addClass('pressed');
- closeDialogs(".stable");
- viewbox.style("cursor", "crosshair").on("click", addLabelOnClick);
- }
- });
-
- function addLabelOnClick() {
- const point = d3.mouse(this);
- const index = getIndex(point);
- const x = rn(point[0],2), y = rn(point[1],2);
-
- // get culture in clicked point to generate a name
- const closest = cultureTree.find(x, y);
- const culture = cultureTree.data().indexOf(closest) || 0;
- const name = generateName(culture);
-
- let group = labels.select("#addedLabels");
- if (!group.size()) {
- group = labels.append("g").attr("id", "addedLabels")
- .attr("fill", "#3e3e4b").attr("opacity", 1)
- .attr("font-family", "Almendra SC").attr("data-font", "Almendra+SC")
- .attr("font-size", 18).attr("data-size", 18);
- }
- let id = "label" + Date.now().toString().slice(7);
- group.append("text").attr("id", id).attr("x", x).attr("y", y).text(name).on("click", editLabel);
-
- if (d3.event.shiftKey === false) {
- $("#addLabel").removeClass("pressed");
- restoreDefaultEvents();
- }
- }
-
- // add burg on click
- $("#addBurg").click(function() {
- if ($(this).hasClass('pressed')) {
- $(".pressed").removeClass('pressed');
- restoreDefaultEvents();
- tip("", true);
- } else {
- $(".pressed").removeClass('pressed');
- $(this).attr("data-state", -1).addClass('pressed');
- $("#burgAdd, #burgAddfromEditor").addClass('pressed');
- viewbox.style("cursor", "crosshair").on("click", addBurgOnClick);
- tip("Click on map to place burg icon with a label. Hold Shift to place several", true);
- }
- });
-
- function addBurgOnClick() {
- const point = d3.mouse(this);
- const index = getIndex(point);
- const x = rn(point[0],2), y = rn(point[1],2);
-
- // get culture in clicked point to generate a name
- let culture = cells[index].culture;
- if (culture === undefined) culture = 0;
- const name = generateName(culture);
-
- if (cells[index].height < 20) {
- tip("Cannot place burg in the water! Select a land cell", null, "error");
- return;
- }
- if (cells[index].manor !== undefined) {
- tip("There is already a burg in this cell. Please select a free cell", null, "error");
- $('#grid').fadeIn();
- d3.select("#toggleGrid").classed("buttonoff", false);
- return;
- }
- const i = manors.length;
- const size = burgIcons.select("#towns").attr("size");
- burgIcons.select("#towns").append("circle").attr("id", "burg"+i).attr("data-id", i).attr("cx", x).attr("cy", y).attr("r", size).on("click", editBurg);
- burgLabels.select("#towns").append("text").attr("data-id", i).attr("x", x).attr("y", y).attr("dy", "-0.35em").text(name).on("click", editBurg);
- invokeActiveZooming();
-
- if (d3.event.shiftKey === false) {
- $("#addBurg, #burgAdd, #burgAddfromEditor").removeClass("pressed");
- restoreDefaultEvents();
- }
-
- let region, state = +$("#addBurg").attr("data-state");
- if (state !== -1) {
- region = states[state].capital === "neutral" ? "neutral" : state;
- const oldRegion = cells[index].region;
- if (region !== oldRegion) {
- cells[index].region = region;
- redrawRegions();
- }
- } else {
- region = cells[index].region;
- state = region === "neutral" ? states.length - 1 : region;
- }
- cells[index].manor = i;
- let score = cells[index].score;
- if (score <= 0) {score = rn(Math.random(), 2);}
- if (cells[index].crossroad) {score += cells[index].crossroad;} // crossroads
- if (cells[index].confluence) {score += Math.pow(cells[index].confluence, 0.3);} // confluences
- if (cells[index].port !== undefined) {score *= 3;} // port-capital
- const population = rn(score, 1);
- manors.push({i, cell:index, x, y, region, culture, name, population});
- recalculateStateData(state);
- updateCountryEditors();
- tip("", true);
- }
-
- // add river on click
- $("#addRiver").click(function() {
- if ($(this).hasClass('pressed')) {
- $(".pressed").removeClass('pressed');
- unselect();
- } else {
- $(".pressed").removeClass('pressed');
- unselect();
- $(this).addClass('pressed');
- closeDialogs(".stable");
- viewbox.style("cursor", "crosshair").on("click", addRiverOnClick);
- tip("Click on map to place new river or extend an existing one", true);
- }
- });
-
- function addRiverOnClick() {
- const point = d3.mouse(this);
- const index = diagram.find(point[0], point[1]).index;
- let cell = cells[index];
- if (cell.river || cell.height < 20) return;
- const dataRiver = []; // to store river points
- const last = $("#rivers > path").last();
- const river = last.length ? +last.attr("id").slice(5) + 1 : 0;
- cell.flux = 0.85;
- while (cell) {
- cell.river = river;
- const x = cell.data[0], y = cell.data[1];
- dataRiver.push({x, y, cell:index});
- const nHeights = [];
- cell.neighbors.forEach(function(e) {nHeights.push(cells[e].height);});
- const minId = nHeights.indexOf(d3.min(nHeights));
- const min = cell.neighbors[minId];
- const tx = cells[min].data[0], ty = cells[min].data[1];
- if (cells[min].height < 20) {
- const px = (x + tx) / 2;
- const py = (y + ty) / 2;
- dataRiver.push({x: px, y: py, cell:index});
- cell = undefined;
- } else {
- if (cells[min].river === undefined) {cells[min].flux += cell.flux; cell = cells[min];}
- else {
- const r = cells[min].river;
- const riverEl = $("#river"+r);
- const riverCells = $.grep(land, function(e) {return e.river === r;});
- riverCells.sort(function(a, b) {return b.height - a.height});
- const riverCellsUpper = $.grep(riverCells, function(e) {return e.height > cells[min].height;});
- if (dataRiver.length > riverCellsUpper.length) {
- // new river is more perspective
- const avPrec = rn(precInput.value / Math.sqrt(cells.length), 2);
- let dataRiverMin = [];
- riverCells.map(function(c) {
- if (c.height < cells[min].height) {
- cells[c.index].river = undefined;
- cells[c.index].flux = avPrec;
- } else {
- dataRiverMin.push({x:c.data[0],y:c.data[1],cell:c.index});
- }
- });
- cells[min].flux += cell.flux;
- if (cells[min].confluence) {cells[min].confluence += riverCellsUpper.length;}
- else {cells[min].confluence = riverCellsUpper.length;}
- cell = cells[min];
- // redraw old river's upper part or remove if small
- if (dataRiverMin.length > 1) {
- var riverAmended = amendRiver(dataRiverMin, 1);
- var d = drawRiver(riverAmended, 1.3, 1);
- riverEl.attr("d", d).attr("data-width", 1.3).attr("data-increment", 1);
- } else {
- riverEl.remove();
- dataRiverMin.map(function(c) {cells[c.cell].river = undefined;});
- }
- } else {
- if (cells[min].confluence) {cells[min].confluence += dataRiver.length;}
- else {cells[min].confluence = dataRiver.length;}
- cells[min].flux += cell.flux;
- dataRiver.push({x: tx, y: ty, cell:min});
- cell = undefined;
- }
- }
- }
- }
- const rndFactor = 0.2 + Math.random() * 1.6; // random factor in range 0.2-1.8
- var riverAmended = amendRiver(dataRiver, rndFactor);
- var d = drawRiver(riverAmended, 1.3, 1);
- rivers.append("path").attr("d", d).attr("id", "river"+river)
- .attr("data-width", 1.3).attr("data-increment", 1).on("click", editRiver);
- }
-
- // add relief icon on click
- $("#addRelief").click(function() {
- if ($(this).hasClass('pressed')) {
- $(".pressed").removeClass('pressed');
- restoreDefaultEvents();
- } else {
- $(".pressed").removeClass('pressed');
- $(this).addClass('pressed');
- closeDialogs(".stable");
- viewbox.style("cursor", "crosshair").on("click", addReliefOnClick);
- tip("Click on map to place relief icon. Hold Shift to place several", true);
- }
- });
-
- function addReliefOnClick() {
- const point = d3.mouse(this);
- const index = getIndex(point);
- const height = cells[index].height;
- if (height < 20) {
- tip("Cannot place icon in the water! Select a land cell");
- return;
- }
-
- const x = rn(point[0],2), y = rn(point[1],2);
- const type = reliefGroup.value;
- addReliefIcon(height / 100, type, x, y, index);
-
- if (d3.event.shiftKey === false) {
- $("#addRelief").removeClass("pressed");
- restoreDefaultEvents();
- }
- tip("", true);
- }
-
- // add route on click
- $("#addRoute").click(function() {
- if (!modules.editRoute) editRoute();
- $("#routeNew").click();
- });
-
- // add marker on click
- $("#addMarker").click(function() {
- if ($(this).hasClass('pressed')) {
- $(".pressed").removeClass('pressed');
- restoreDefaultEvents();
- } else {
- $(".pressed").removeClass('pressed');
- $(this).addClass('pressed');
- $("#markerAdd").addClass('pressed');
- viewbox.style("cursor", "crosshair").on("click", addMarkerOnClick);
- }
- });
-
- function addMarkerOnClick() {
- const point = d3.mouse(this);
- let x = rn(point[0],2), y = rn(point[1],2);
- let selected = markerSelectGroup.value;
- let valid = selected && d3.select("#defs-markers").select("#"+selected).size() === 1;
- let symbol = valid ? "#"+selected : "#marker0";
- let desired = valid ? markers.select("[data-id='" + symbol + "']").attr("data-size") : 1;
- if (isNaN(desired)) desired = 1;
- let id = "marker" + Date.now().toString().slice(7); // unique id
- let size = desired * 5 + 25 / scale;
-
- markers.append("use").attr("id", id).attr("xlink:href", symbol).attr("data-id", symbol)
- .attr("data-x", x).attr("data-y", y).attr("x", x - size / 2).attr("y", y - size)
- .attr("data-size", desired).attr("width", size).attr("height", size).on("click", editMarker);
-
- if (d3.event.shiftKey === false) {
- $("#addMarker, #markerAdd").removeClass("pressed");
- restoreDefaultEvents();
- }
- }
-
- }
-
- // return cell / polly Index or error
- function getIndex(point) {
- let c = diagram.find(point[0], point[1]);
- if (!c) {
- console.error("Cannot find closest cell for points" + point[0] + ", " + point[1]);
- return;
- }
- return c.index;
- }
-
- // re-calculate data for a particular state
- function recalculateStateData(state) {
- const s = states[state] || states[states.length - 1];
- if (s.capital === "neutral") state = "neutral";
- const burgs = $.grep(manors, function(e) {return e.region === state;});
- s.burgs = burgs.length;
- let burgsPop = 0; // get summ of all burgs population
- burgs.map(function(b) {burgsPop += b.population;});
- s.urbanPopulation = rn(burgsPop, 1);
- const regionCells = $.grep(cells, function(e) {return (e.region === state);});
- let cellsPop = 0, area = 0;
- regionCells.map(function(c) {
- cellsPop += c.pop;
- area += c.area;
- });
- s.cells = regionCells.length;
- s.area = rn(area);
- s.ruralPopulation = rn(cellsPop, 1);
- }
-
- function changeSelectedOnClick() {
- const point = d3.mouse(this);
- const index = diagram.find(point[0],point[1]).index;
- if (cells[index].height < 20) return;
- $(".selected").removeClass("selected");
- let color;
-
- // select state
- if (customization === 2) {
- const assigned = regions.select("#temp").select("path[data-cell='"+index+"']");
- let s = assigned.size() ? assigned.attr("data-state") : cells[index].region;
- if (s === "neutral") s = states.length - 1;
- color = states[s].color;
- if (color === "neutral") color = "white";
- $("#state"+s).addClass("selected");
- }
-
- // select culture
- if (customization === 4) {
- const assigned = cults.select("#cult"+index);
- const c = assigned.attr("data-culture") !== null
- ? +assigned.attr("data-culture")
- : cells[index].culture;
- color = cultures[c].color;
- $("#culture"+c).addClass("selected");
- }
-
- debug.selectAll(".circle").attr("stroke", color);
- }
-
- // fetch default fonts if not done before
- function loadDefaultFonts() {
- if (!$('link[href="fonts.css"]').length) {
- $("head").append('