// Fantasy Map Generator main script
"use strict;"
fantasyMap();
function fantasyMap() {
// Version control
var version = "0.56b";
document.title += " v. " + version;
// Declare variables
var svg = d3.select("svg"),
defs = svg.select("#deftemp"),
viewbox = svg.append("g").attr("id", "viewbox"),
ocean = viewbox.append("g").attr("id", "ocean"),
oceanLayers = ocean.append("g").attr("id", "oceanLayers"),
oceanPattern = ocean.append("g").attr("id", "oceanPattern"),
landmass = viewbox.append("g").attr("id", "landmass"),
terrs = viewbox.append("g").attr("id", "terrs"),
grid = viewbox.append("g").attr("id", "grid"),
overlay = viewbox.append("g").attr("id", "overlay"),
cults = viewbox.append("g").attr("id", "cults"),
routes = viewbox.append("g").attr("id", "routes"),
roads = routes.append("g").attr("id", "roads").attr("data-type", "land"),
trails = routes.append("g").attr("id", "trails").attr("data-type", "land"),
rivers = viewbox.append("g").attr("id", "rivers"),
terrain = viewbox.append("g").attr("id", "terrain"),
regions = viewbox.append("g").attr("id", "regions"),
borders = viewbox.append("g").attr("id", "borders"),
stateBorders = borders.append("g").attr("id", "stateBorders"),
neutralBorders = borders.append("g").attr("id", "neutralBorders"),
coastline = viewbox.append("g").attr("id", "coastline"),
lakes = viewbox.append("g").attr("id", "lakes"),
searoutes = routes.append("g").attr("id", "searoutes").attr("data-type", "sea"),
labels = viewbox.append("g").attr("id", "labels"),
icons = viewbox.append("g").attr("id", "icons"),
burgs = icons.append("g").attr("id", "burgs"),
ruler = viewbox.append("g").attr("id", "ruler"),
debug = viewbox.append("g").attr("id", "debug"),
capitals = labels.append("g").attr("id", "capitals"),
towns = labels.append("g").attr("id", "towns"),
countries = labels.append("g").attr("id", "countries");
// main data variables
var voronoi, diagram, polygons, points = [], sample;
// Common variables
var graphWidth, graphHeight, // voronoi graph extention, should be stable for each map
svgWidth, svgHeight, // svg canvas resolution, can vary for each map
allowResize = true,
modules = {}, customization, history = [], historyStage = 0, elSelected,
cells = [], land = [], riversData = [], manors = [], states = [],
queue = [], chain = {}, fonts = [],
island = 0, cultureTree, manorTree;
// canvas
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
// Color schemes;
var color = d3.scaleSequential(d3.interpolateSpectral),
colors8 = d3.scaleOrdinal(d3.schemeSet2),
colors20 = d3.scaleOrdinal(d3.schemeCategory20);
// D3 drag and zoom behavior
var scale = 1, viewX = 0, viewY = 0, initView = [1, 0, 0];
var zoom = d3.zoom().scaleExtent([1, 20]).on("zoom", zoomed);
svg.call(zoom);
// randomize options
var graphSize = +sizeInput.value,
manorsCount = manorsOutput.innerHTML = +manorsInput.value,
capitalsCount = regionsOutput.innerHTML = +regionsInput.value,
neutral = countriesNeutral.value = +neutralInput.value,
swampiness = +swampinessInput.value,
sharpness = +sharpnessInput.value,
precipitation = +precInput.value;
// Get screen size
mapWidthInput.value = window.innerWidth;
mapHeightInput.value = window.innerHeight;
svgWidth = graphWidth = +mapWidthInput.value;
svgHeight = graphHeight = +mapHeightInput.value;
svg.attr("width", svgWidth).attr("height", svgHeight);
// D3 Line generator variables
var lineGen = d3.line().x(function(d) {return d.scX;}).y(function(d) {return d.scY;});
// append ocean pattern
oceanPattern.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%").attr("fill", "url(#oceanic)").attr("stroke", "none");
oceanLayers.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%").attr("id", "oceanBase");
applyDefaultStyle();
// toggle off loading screen and on menus
$("#loading, #initial").remove();
svg.style("background-color", "#000000");
$("#optionsContainer").show();
fitStatusBar();
$("#optionsContainer").draggable({handle: ".drag-trigger", snap: "svg", snapMode: "both"});
$("#mapLayers").sortable({items: "li:not(.solid)", cancel: ".solid", update: moveLayer});
$("#templateBody").sortable({items: "div:not(div[data-type='Mountain'])"});
$("#mapLayers, #templateBody").disableSelection();
var drag = d3.drag()
.container(function() {return this;})
.subject(function() {var p=[d3.event.x, d3.event.y]; return [p, p];})
.on("start", dragstarted);
function zoomed() {
var scaleDiff = Math.abs(scale - d3.event.transform.k);
scale = d3.event.transform.k;
viewX = d3.event.transform.x;
viewY = d3.event.transform.y;
viewbox.attr("transform", d3.event.transform);
// rescale only if zoom is significally changed
if (scaleDiff > 0.0001) {
invokeActiveZooming();
drawScaleBar();
}
}
// Active zooming
function invokeActiveZooming() {
// toggle shade/blur filter on zoom
var filter = scale > 2.6 ? "url(#blurFilter)" : "url(#dropShadow)";
if (scale > 1.5 && scale <= 2.6) {filter = null;}
coastline.attr("filter", filter);
// rescale lables on zoom (active zooming)
labels.selectAll("g").each(function(d) {
var el = d3.select(this);
var desired = +el.attr("data-size");
var relative = rn((desired + (desired / scale)) / 2, 2);
if (relative < 2) {relative = 2;}
el.attr("font-size", relative);
el.classed("hidden", hideLabels.checked && relative * scale < 6);
});
if (ruler.size()) {
if (ruler.style("display") !== "none") {
if (ruler.selectAll("g").size() < 1) {return;}
var factor = rn(1 / Math.pow(scale, 0.3), 1);
ruler.selectAll("circle:not(.center)").attr("r", 2 * factor).attr("stroke-width", 0.5 * factor);
ruler.selectAll("circle.center").attr("r", 1.2 * factor).attr("stroke-width", 0.3 * factor);
ruler.selectAll("text").attr("font-size", 10 * factor);
ruler.selectAll("line, path").attr("stroke-width", factor);
}
}
}
// Manually update viewbox
function zoomUpdate(duration) {
var duration = duration || 0;
var transform = d3.zoomIdentity.translate(viewX, viewY).scale(scale);
svg.transition().duration(duration).call(zoom.transform, transform);
}
// Zoom to specific point (x,y - coods, z - scale, d - duration)
function zoomTo(x, y, z, d) {
var transform = d3.zoomIdentity.translate(x * -z + graphWidth / 2, y * -z + graphHeight / 2).scale(z);
svg.transition().duration(d).call(zoom.transform, transform);
}
// Reset zoom to initial
function resetZoom(duration) {
zoom.scaleTo(svg, initView[0]);
}
addDragToUpload();
// Changelog dialog window
var storedVersion = localStorage.getItem("version"); // show message on load
if (storedVersion != version) {
alertMessage.innerHTML = `2018-05-06:
The Fantasy Map Generator Demo is updated up to version ${version}.
Main changes:
Performance improvement
Route editor
Countries and River editors fixes
Map saving and loading fixes
New loading screen
See changelog for older versions.
Please report bugs here`;
$("#alert").dialog(
{resizable: false, title: "Fantasy Map Generator v. " + version, width: 280,
buttons: {
"Don't show again": function() {
localStorage.setItem("version", version);
$(this).dialog("close");
},
Close: function() {$(this).dialog("close");}
},
position: {my: "center", at: "center", of: "svg"}
});
}
generate(); // genarate map on load
invokeActiveZooming(); // to hide what need to be hidden
function generate() {
console.group("Random map");
console.time("TOTAL");
applyMapSize();
randomizeOptions();
placePoints();
calculateVoronoi(points);
detectNeighbors();
drawScaleBar();
defineHeightmap();
markFeatures();
drawOcean();
reGraph();
resolveDepressions();
flux();
drawRelief();
drawCoastline();
manorsAndRegions();
cleanData();
console.timeEnd("TOTAL");
console.groupEnd("Random map");
}
// randomize options if randomization is allowed in option
function randomizeOptions() {
if (randomizeInput.value !== "1") {return;}
regionsInput.value = 7 + Math.floor(Math.random() * 10);
manorsInput.value = regionsInput.value * 27 + Math.floor(Math.random() * 300);
manorsCount = manorsOutput.innerHTML = manorsInput.value;
capitalsCount = regionsOutput.innerHTML = regionsInput.value;
precInput.value = 10 + Math.floor(Math.random() * 15);
precipitation = precOutput.value = +precInput.value;
}
// Locate points to calculate Voronoi diagram
function placePoints() {
console.time("placePoints");
points = [];
var radius = 5.9 / graphSize; // 5.9 is a radius to get 8k cells
var sampler = poissonDiscSampler(graphWidth, graphHeight, radius);
while (sample = sampler()) {
var x = rn(sample[0], 2);
var y = rn(sample[1], 2);
points.push([x, y]);
}
console.timeEnd("placePoints");
}
// Calculate Voronoi Diagram
function calculateVoronoi(points) {
console.time("calculateVoronoi");
diagram = voronoi(points),
polygons = diagram.polygons();
console.log(" cells: " + points.length);
console.timeEnd("calculateVoronoi");
}
// Get cell info on mouse move (useful for debugging)
function moved() {
var point = d3.mouse(this);
var i = diagram.find(point[0], point[1]).index;
if (i) {
var p = cells[i]; // get cell
$("#lx").text(rn(point[0]));
$("#ly").text(rn(point[1]));
$("#cell").text(i);
$("#height").text(ifDefined(p.height, 2));
$("#feature").text(ifDefined(p.feature) + "" + ifDefined(p.featureNumber)); // to support v. >0.54b
$("#feature").text(ifDefined(p.f) + "" + ifDefined(p.fn));
}
// draw line for Customization range placing
icons.selectAll(".line").remove();
if (customization === 1 && icons.selectAll(".tag").size() === 1) {
var x = +icons.select(".tag").attr("cx");
var y = +icons.select(".tag").attr("cy");
icons.insert("line", ":first-child").attr("class", "line")
.attr("x1", x).attr("y1", y).attr("x2", point[0]).attr("y2", point[1]);
}
// draw circle to show brush radius for Customization
var circle = icons.selectAll(".circle");
if (customization === 1 || customization === 2) {
var brush = $("#brushesButtons > .pressed");
if (customization === 1 && (brush.length === 0 || brush.hasClass("feature"))) {circle.remove(); return;}
if (customization === 2 && $("div.selected").length === 0) {circle.remove(); return;}
var radius = customization === 1 ? brushRadius.value : countriesManuallyBrush.value;
var r = rn(6 / graphSize * radius, 1);
let clr = "#666666;"
if (customization === 2) {
const state = +$("div.selected").attr("id").slice(5);
clr = states[state].color === "neutral" ? "white" :states[state].color;
}
if (circle.size() > 0) {
circle.attr("r", r).attr("cx", point[0]).attr("cy", point[1]).attr("stroke", clr);
} else {
icons.insert("circle", ":first-child").attr("class", "circle")
.attr("r", r).attr("stroke", color)
.attr("cx", point[0]).attr("cy", point[1]);
}
} else {circle.remove();}
}
// return value (e) if defined with specified number of decimals (f)
function ifDefined(e, f) {
if (e == undefined) {return "no";}
if (f) {return e.toFixed(f);}
return e;
}
// Drag actions
function dragstarted() {
var x0 = d3.event.x, y0 = d3.event.y,
c0 = diagram.find(x0, y0).index, c1 = c0;
var x1, y1;
var opisometer = $("#addOpisometer").hasClass("pressed");
var planimeter = $("#addPlanimeter").hasClass("pressed");
var factor = rn(1 / Math.pow(scale, 0.3), 1);
if (opisometer || planimeter) {
$("#ruler").show();
var type = opisometer ? "opisometer" : "planimeter";
var rulerNew = ruler.append("g").attr("class", type).call(d3.drag().on("start", elementDrag));
var points = [{scX: rn(x0, 2), scY: rn(y0, 2)}];
if (opisometer) {
var title =
`Opisometer is an instrument for measuring the lengths of arbitrary curved lines.
One dash shows 30 km (18.6 mi), approximate distance of a daily loaded march.
Click on the label to remove the ruler from the map`;
rulerNew.append("title").text(title);
var curve = rulerNew.append("path").attr("class", "opisometer white").attr("stroke-width", factor);
var dash = rn(30 / distanceScale.value, 2);
var curveGray = rulerNew.append("path").attr("class", "opisometer gray").attr("stroke-dasharray", dash).attr("stroke-width", factor);
} else {
var title =
`Planimeter is an instrument to determine the area of a two-dimensional shape.
Click on the label to remove the ruler from the map`;
rulerNew.append("title").text(title);
var curve = rulerNew.append("path").attr("class", "planimeter").attr("stroke-width", factor);
}
var text = rulerNew.append("text").attr("dy", -1).attr("font-size", 10 * factor);
}
d3.event.on("drag", function() {
x1 = d3.event.x, y1 = d3.event.y;
var c2 = diagram.find(x1, y1).index;
const circle = icons.selectAll(".circle");
// Heightmap customization
if (customization === 1) {
if (c2 === c1 && x1 !== x0 && y1 !== y0) {return;}
c1 = c2;
const brush = $("#brushesButtons > .pressed");
const id = brush.attr("id");
const power = +brushPower.value;
if (id === "brushHill") {add(c2, "hill", power); updateHeightmap();}
if (id === "brushPit") {addPit(1, power, c2); updateHeightmap();}
if (!brush.hasClass("feature")) {
// move a circle to show approximate change radius
const radius = +brushRadius.value;
const r = rn(6 / graphSize * radius, 1);
if (circle.size() > 0) {circle.attr("r", r).attr("cx", x1).attr("cy", y1);}
else {icons.insert("circle", ":first-child").attr("class", "circle").attr("r", r).attr("cx", x1).attr("cy", y1);}
updateCellsInRadius(c2, c0);
}
}
// Countries customization
if (customization === 2 && $("div.selected").length) {
// move a circle to show actual change radius
const radius = +countriesManuallyBrush.value;
const r = rn(6 / graphSize * radius, 1);
if (circle.size() > 0) {circle.attr("r", r).attr("cx", x1).attr("cy", y1);}
else {icons.insert("circle", ":first-child").attr("class", "circle").attr("r", r).attr("cx", x1).attr("cy", y1);}
if (c2 === c1 && x1 !== x0 && y1 !== y0) {return;}
c1 = c2;
selection = defineStateBrushSelection(c2);
changeStateForSelection(selection);
}
if (opisometer || planimeter) {
var l = points[points.length - 1];
var diff = Math.hypot(l.scX - x1, l.scY - y1);
if (diff > 5) {points.push({scX: x1, scY: y1});}
if (opisometer) {
lineGen.curve(d3.curveBasis);
var d = round(lineGen(points));
curve.attr("d", d);
curveGray.attr("d", d);
var dist = rn(curve.node().getTotalLength());
var label = rn(dist * distanceScale.value) + " " + distanceUnit.value;
text.attr("x", x1).attr("y", y1 - 10).text(label);
} else {
lineGen.curve(d3.curveBasisClosed);
var d = round(lineGen(points));
curve.attr("d", d);
}
}
});
d3.event.on("end", function() {
if (customization === 1) {updateHistory();}
if (opisometer || planimeter) {
$("#addOpisometer, #addPlanimeter").removeClass("pressed");
restoreDefaultEvents();
if (opisometer) {
var dist = rn(curve.node().getTotalLength());
var c = curve.node().getPointAtLength(dist / 2);
var p = curve.node().getPointAtLength((dist / 2) - 1);
var label = rn(dist * distanceScale.value) + " " + distanceUnit.value;
var 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);
var angle = rn(atan * 180 / Math.PI, 3);
var 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).on("click", removeParent);
rulerNew.append("circle").attr("cx", points[0].scX).attr("cy", points[0].scY).attr("r", 2 * factor).attr("stroke-width", 0.5 * factor)
.attr("data-edge", "start").call(d3.drag().on("start", opisometerEdgeDrag));
rulerNew.append("circle").attr("cx", points[points.length - 1].scX).attr("cy", points[points.length - 1].scY).attr("r", 2 * factor).attr("stroke-width", 0.5 * factor)
.attr("data-edge", "end").call(d3.drag().on("start", opisometerEdgeDrag));
} else {
var vertices = points.map(function(p) {return [p.scX, p.scY]});
var area = rn(Math.abs(d3.polygonArea(vertices))); // initial area as positive integer
var areaConv = area * Math.pow(distanceScale.value, 2); // convert area to distanceScale
areaConv = si(areaConv);
if (areaUnit.value === "square") {areaConv += " " + distanceUnit.value + "²"} else {areaConv += " " + areaUnit.value;}
var c = polylabel([vertices], 1.0); // pole of inaccessibility
text.attr("x", rn(c[0], 2)).attr("y", rn(c[1], 2)).attr("data-area", area).text(areaConv).on("click", removeParent);
}
}
});
}
// restore default drag (map panning) and cursor
function restoreDefaultEvents() {
viewbox.style("cursor", "default").on(".drag", null).on("click", null);
}
// remove parent element (usually if child is clicked)
function removeParent() {
$(this.parentNode).remove();
}
// define selection based on radius
function defineStateBrushSelection(center) {
let radius = +countriesManuallyBrush.value;
let selection = [center];
if (radius > 1) {selection = selection.concat(cells[center].neighbors);}
if (radius === 2) {return selection;}
let frontier = cells[center].neighbors;
while (radius > 2) {
let cycle = frontier.slice();
frontier = [];
cycle.map(function(s) {
cells[s].neighbors.forEach(function(e) {
if (selection.indexOf(e) !== -1) {return;}
selection.push(e);
frontier.push(e);
});
});
radius--;
}
return $.grep(selection, function(e) {return (cells[e].height >= 0.2);});
}
// change region within selection
function changeStateForSelection(selection) {
let stateNew, exists, stateOld, color;
const temp = regions.select("#temp");
selection.map(function(index) {
// keep stateOld and stateNew as integers!
stateNew = +$("div.selected").attr("id").slice(5);
exists = temp.select("path[data-cell='"+index+"']");
let region = cells[index].region === "neutral" ? states.length - 1 : cells[index].region
stateOld = exists.size() ? +exists.attr("data-state") : region;
if (stateNew !== stateOld) {
// not allowed to re-draw calitals
if (states[stateOld].capital === cells[index].manor) {return;}
// define color
color = states[stateNew].color === "neutral" ? "white" : states[stateNew].color;
// change of append new element
if (exists.size()) {
exists.attr("data-cell", index).attr("data-state", stateNew)
.attr("d", "M" + polygons[index].join("L") + "Z")
.attr("fill", color).attr("stroke", color);
} else {
temp.append("path").attr("data-cell", index).attr("data-state", stateNew)
.attr("d", "M" + polygons[index].join("L") + "Z")
.attr("fill", color).attr("stroke", color);
}
}
});
}
// update cells in radius if non-feature brush selected
function updateCellsInRadius(cell, source) {
const power = +brushPower.value;
let radius = +brushRadius.value;
const brush = $("#brushesButtons > .pressed").attr("id");
if ($("#brushesButtons > .pressed").hasClass("feature")) {return;}
// define selection besed on radius
let selection = [cell];
if (radius > 1) {selection = selection.concat(cells[cell].neighbors);}
if (radius > 2) {
let frontier = cells[cell].neighbors;
while (radius > 2) {
let cycle = frontier.slice();
frontier = [];
cycle.map(function(s) {
cells[s].neighbors.forEach(function(e) {
if (selection.indexOf(e) !== -1) {return;}
selection.push(e);
frontier.push(e);
});
});
radius--;
}
}
// change each cell in the selection
const sourceHeight = cells[source].height;
selection.map(function(s) {
// calculate changes
if (brush === "brushElevate") {
if (cells[s].height < 0.2) {cells[s].height = 0.2}
else {cells[s].height += power;}
}
if (brush === "brushDepress") {cells[s].height -= power;}
if (brush === "brushAlign") {cells[s].height = sourceHeight;}
if (brush === "brushSmooth") {
let heights = [cells[s].height];
cells[s].neighbors.forEach(function(e) {heights.push(cells[e].height);});
cells[s].height = (cells[s].height + d3.mean(heights)) / 2;
}
});
updateHeightmapSelection(selection);
}
// Mouseclick events
function placeLinearFeature() {
const point = d3.mouse(this);
const index = getIndex(point);
let tag = icons.selectAll(".tag");
if (tag.size() === 0) {
tag = icons.append("circle").attr("data-cell", index).attr("class", "tag")
.attr("r", 3).attr("cx", point[0]).attr("cy", point[1]);
} else {
const from = +tag.attr("data-cell");
icons.selectAll(".tag, .line").remove();
const power = +brushPower.value;
const mod = $("#brushesButtons > .pressed").attr("id") === "brushRange" ? 1 : -1;
const selection = addRange(mod, power, from, index);
updateHeightmapSelection(selection);
}
}
// turn D3 polygons array into cell array, define neighbors for each cell
function detectNeighbors(withGrid) {
console.time("detectNeighbors");
var gridPath = ""; // store grid as huge single path string
cells = [];
polygons.map(function(i, d) {
var neighbors = [];
var ctype; // define cell type, -99 for map borders
if (withGrid) {gridPath += "M" + i.join("L") + "Z";} // grid path
diagram.cells[d].halfedges.forEach(function(e) {
var edge = diagram.edges[e], ea;
if (edge.left && edge.right) {
ea = edge.left.index;
if (ea === d) {ea = edge.right.index;}
neighbors.push(ea);
} else {
if (edge.left) {ea = edge.left.index;} else {ea = edge.right.index;}
ctype = -99; // polygon is on border if it has edge without opposite side polygon
}
})
cells.push({index: d, data: i.data, height: 0, ctype, neighbors});
});
if (withGrid) {grid.append("path").attr("d", round(gridPath, 1));}
console.timeEnd("detectNeighbors");
}
// Generate Heigtmap routine
function defineHeightmap() {
console.time('defineHeightmap');
var mapTemplate = templateInput.value;
if (mapTemplate === "Random") {
var rnd = Math.random();
if (rnd > 0.9) {mapTemplate = "Volcano";}
if (rnd > 0.7 && rnd <= 0.9) {mapTemplate = "High Island";}
if (rnd > 0.5 && rnd <= 0.7) {mapTemplate = "Low Island";}
if (rnd > 0.35 && rnd <= 0.5) {mapTemplate = "Continents";}
if (rnd > 0.01 && rnd <= 0.35) {mapTemplate = "Archipelago";}
if (rnd <= 0.01) {mapTemplate = "Atoll";}
}
addMountain();
var mod = rn((graphWidth + graphHeight) / 1500, 2); // add mod for big screens
if (mapTemplate === "Volcano") {templateVolcano(mod);}
if (mapTemplate === "High Island") {templateHighIsland(mod);}
if (mapTemplate === "Low Island") {templateLowIsland(mod);}
if (mapTemplate === "Continents") {templateContinents(mod);}
if (mapTemplate === "Archipelago") {templateArchipelago(mod);}
if (mapTemplate === "Atoll") {templateAtoll(mod);}
console.log(mapTemplate + " template is applied");
console.timeEnd('defineHeightmap');
}
// Heighmap Template: Volcano
function templateVolcano(mod) {
modifyHeights("all", 0.05, 1.1);
addHill(rn(4 * mod), 0.4);
addHill(rn(4 * mod), 0.15);
addRange(rn(4 * mod));
addRange(rn(-10 * mod));
}
// Heighmap Template: High Island
function templateHighIsland(mod) {
modifyHeights("all", 0.05, 0.9);
addRange(rn(4 * mod));
addHill(rn(12 * mod), 0.25);
addRange(rn(-8 * mod));
modifyHeights("land", 0, 0.75);
addHill(rn(3 * mod), 0.15);
}
// Heighmap Template: Low Island
function templateLowIsland(mod) {
smoothHeights(2);
addRange(rn(5 * mod));
addHill(rn(6 * mod), 0.4);
addHill(rn(14 * mod), 0.2);
addRange(rn(-10 * mod));
modifyHeights("land", 0, 0.35);
}
// Heighmap Template: Continents
function templateContinents(mod) {
addHill(rn(24 * mod), 0.25);
addRange(rn(4 * mod));
addHill(rn(3 * mod), 0.18);
modifyHeights("land", 0, 0.7);
var count = Math.ceil(Math.random() * 6 + 2);
addStrait(count);
smoothHeights(3);
addPit(rn(18 * mod));
addRange(rn(-14 * mod));
modifyHeights("land", 0, 0.8);
modifyHeights("all", 0.02, 1);
}
// Heighmap Template: Archipelago
function templateArchipelago(mod) {
modifyHeights("land", -0.2, 1);
addHill(rn(16 * mod), 0.17);
addRange(rn(8 * mod));
var count = Math.ceil(Math.random() * 2 + 2);
addStrait(count);
addRange(rn(-18 * mod));
addPit(rn(10 * mod));
modifyHeights("land", -0.05, 0.7);
smoothHeights(4);
}
// Heighmap Template: Atoll
function templateAtoll(mod) {
addHill(rn(2 * mod), 0.35);
addRange(rn(2 * mod));
modifyHeights("all", 0.07, 1);
smoothHeights(1);
modifyHeights("0.27-10", 0, 0.1);
}
function addMountain() {
var x = Math.floor(Math.random() * graphWidth / 3 + graphWidth / 3);
var y = Math.floor(Math.random() * graphHeight * 0.2 + graphHeight * 0.4);
var rnd = diagram.find(x, y).index;
var height = Math.random() * 0.1 + 0.9;
add(rnd, "mountain", height);
}
function addHill(count, shift) {
// shift from 0 to 0.5
for (c = 0; c < count; c++) {
var limit = 0;
do {
var height = Math.random() * 0.4 + 0.1;
var x = Math.floor(Math.random() * graphWidth * (1-shift*2) + graphWidth * shift);
var y = Math.floor(Math.random() * graphHeight * (1-shift*2) + graphHeight * shift);
var rnd = diagram.find(x, y).index;
limit ++;
} while (cells[rnd].height + height > 0.9 && limit < 100)
add(rnd, "hill", height);
}
}
function add(start, type, height) {
var session = Math.ceil(Math.random() * 1e5);
var sharpness = 0.2;
var radius, hRadius, 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;
var queue = [start];
if (type === "mountain") {cells[start].height = height;}
for (i = 0; i < queue.length && height >= 0.01; i++) {
if (type == "mountain") {
height = +cells[queue[i]].height * radius - height / 100;
} else {
height *= radius;
}
cells[queue[i]].neighbors.forEach(function(e) {
if (cells[e].used === session) {return;}
var mod = Math.random() * sharpness + 1.1 - sharpness;
if (sharpness == 0) {mod = 1;}
cells[e].height += height * mod;
if (cells[e].height > 1) {cells[e].height = 1;}
cells[e].used = session;
queue.push(e);
});
}
}
function addRange(mod, height, from, to) {
var session = Math.ceil(Math.random() * 100000);
var count = Math.abs(mod);
let range = [];
for (c = 0; c < count; c++) {
range = [];
var diff = 0, start = from, end = to;
if (!start || !end) {
do {
var xf = Math.floor(Math.random() * (graphWidth*0.7)) + graphWidth*0.15;
var yf = Math.floor(Math.random() * (graphHeight*0.6)) + graphHeight*0.2;
start = diagram.find(xf, yf).index;
var xt = Math.floor(Math.random() * (graphWidth*0.7)) + graphWidth*0.15;
var 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 (var l = 0; start != end && l < 10000; l++) {
var 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);
}
}
var change = height ? height : Math.random() * 0.1 + 0.1;
range.map(function(r) {
var rnd = Math.random() * 0.4 + 0.8;
if (mod > 0) {cells[r].height += change * rnd;}
else if (cells[r].height >= 0.1) {cells[r].height -= 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;
if (mod > 0) {
cells[e].height += change / 2 * rnd;
} else if (cells[e].height >= 0.1) {
cells[e].height -= change / 2 * rnd;
}
});
});
}
return range;
}
function addStrait(width) {
var session = Math.ceil(Math.random() * 100000);
var top = Math.floor(Math.random() * graphWidth * 0.35 + graphWidth * 0.3);
var bottom = Math.floor((svgWidth - top) - (graphWidth * 0.1) + (Math.random() * graphWidth * 0.2));
var start = diagram.find(top, graphHeight * 0.2).index;
var end = diagram.find(bottom, graphHeight * 0.8).index;
var range = [];
for (var l = 0; start !== end && l < 1000; l++) {
var min = 10000; // dummy value
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);
}
var 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);
var height = cells[e].height * 0.23;
cells[e].height = rn(height, 2);
});
range = query.slice();
});
}
}
function addPit(count, height, cell) {
var session = Math.ceil(Math.random() * 100000);
for (c = 0; c < count; c++) {
var change = height ? height + 0.1 : Math.random() * 0.1 + 0.2;
var start = cell;
if (!start) {
var lowlands = $.grep(cells, function(e) {return (e.height >= 0.2);});
if (lowlands.length == 0) {return;}
var rnd = Math.floor(Math.random() * lowlands.length);
start = lowlands[rnd].index;
}
var query = [start], newQuery= [];
// depress pit center
cells[start].height -= change;
if (cells[start].height < 0.05) {cells[start].height = 0.05;}
cells[start].used = session;
for (var i = 1; i < 10000; i++) {
var rnd = Math.random() * 0.4 + 0.8;
change -= i / 60 * rnd;
if (change < 0.01) {return;}
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);
cells[e].height -= change;
if (cells[e].height < 0.05) {cells[e].height = 0.05;}
});
});
query = newQuery.slice();
newQuery = [];
}
}
}
// Modify heights multiplying/adding by value
function modifyHeights(type, add, mult) {
cells.map(function(i) {
if (type === "land") {
if (i.height >= 0.2) {
i.height += add;
var dif = i.height - 0.2;
var factor = mult;
if (mult == "^2") {factor = dif}
if (mult == "^3") {factor = dif * dif;}
i.height = 0.2 + dif * factor;
}
} else if (type === "all") {
if (i.height > 0) {
i.height += add;
i.height *= mult;
}
} else {
var interval = type.split("-");
if (i.height >= +interval[0] && i.height <= +interval[1]) {
i.height += add;
if ($.isNumeric(mult)) {i.height *= mult; return;}
if (mult.slice(0,1) === "^") {
pow = mult.slice(1);
i.height = Math.pow(i.height, pow);
}
}
}
});
}
// Smooth heights using mean of neighbors
function smoothHeights(fraction) {
var fraction = fraction || 2;
cells.map(function(i) {
var heights = [i.height];
i.neighbors.forEach(function(e) {heights.push(cells[e].height);});
i.height = (i.height * (fraction - 1) + d3.mean(heights)) / fraction;
});
}
// Randomize heights a bit
function disruptHeights() {
cells.map(function(i) {
if (i.height < 0.18) {return;}
if (Math.random() > 0.5) {return;}
var rnd = rn(2 - Math.random() * 4) / 100;
i.height = rn(i.height + rnd, 2);
});
}
// Mark features (ocean, lakes, islands)
function markFeatures() {
console.time("markFeatures");
island = 0;
var queue = [], lake = 0, number = 0, type, greater = 0, less = 0;
// ensure all border cells are ocean
cells.map(function(l) {
if (l.ctype === -99) {l.height = 0;}
else {l.height = rn(l.height, 2);}
});
// start with top left corner to define Ocean first
var start = diagram.find(0, 0).index;
var unmarked = [cells[start]];
while (unmarked.length > 0) {
if (unmarked[0].height >= 0.2) {
type = "Island";
number = island;
island += 1;
greater = 0.2;
less = 100; // just to omit exclusion
} else {
type = "Lake";
number = lake;
lake += 1;
greater = -100; // just to omit exclusion
less = 0.2;
}
if (type === "Lake" && number === 0) {type = "Ocean";}
start = unmarked[0].index;
queue.push(start);
cells[start].f = type;
cells[start].fn = number;
while (queue.length > 0) {
var i = queue[0];
queue.shift();
cells[i].neighbors.forEach(function(e) {
if (!cells[e].f && cells[e].height >= greater && cells[e].height < less) {
cells[e].f = type;
cells[e].fn = number;
queue.push(e);
}
if (type === "Island" && cells[e].height < 0.2) {
cells[i].ctype = 2;
cells[e].ctype = -1;
if (cells[e].f === "Ocean") {
// check if ocean coast is good harbor
if (cells[i].harbor) {
cells[i].harbor += 1;
} else {
cells[i].harbor = 1;
}
}
}
});
}
unmarked = $.grep(cells, function(e) {return (!e.f);});
}
console.log(" islands: " + island);
console.timeEnd("markFeatures");
}
function drawOcean() {
console.time("drawOcean");
var limits = [], odd = 0.8; // initial odd for ocean layer is 80%
// Define type of ocean cells based on cell distance form land
var frontier = $.grep(cells, function(e) {return (e.ctype === -1 && e.f === "Ocean");});
if (Math.random() < odd) {limits.push(-1); odd = 0.3;}
for (var c = -2; frontier.length > 0 && c > -10; c--) {
if (Math.random() < odd) {limits.unshift(c); odd = 0.3;} 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 (outlineLayers.value !== "random") {limits = outlineLayers.value.split(",");}
// Define area edges
for (var c = 0; c < limits.length; c++) {
var edges = [];
for (var i = 0; i < cells.length; i++) {
if (cells[i].f === "Ocean" && cells[i].ctype >= limits[c]) {
var cell = diagram.cells[i];
cell.halfedges.forEach(function(e) {
var edge = diagram.edges[e];
if (edge.left && edge.right) {
var ea = edge.left.index;
if (ea === i) {ea = edge.right.index;}
var ctype = cells[ea].ctype;
if (ctype < limits[c] || ctype == undefined) {
var start = edge[0].join(" ");
var end = edge[1].join(" ");
edges.push({start, end});
}
} else {
var start = edge[0].join(" ");
var end = edge[1].join(" ");
edges.push({start, end});
}
})
}
}
lineGen.curve(d3.curveBasisClosed);
var relax = 0.8 - c / 10;
if (relax < 0.2) {relax = 0.2};
var line = getContinuousLine(edges, 0, relax);
oceanLayers.append("path").attr("d", line).attr("fill", "#ecf2f9").style("opacity", 0.4 / limits.length);
}
console.timeEnd("drawOcean");
}
// recalculate Voronoi Graph to pack cells
function reGraph() {
console.time("reGraph");
var tempCells = [], newPoints = []; // to store new data
land = [], polygons= []; // clear old data
// get average precipitation based on graph size
var avPrec = rn(precipitation / Math.sqrt(cells.length), 2);
cells.map(function(i) {
var height = Math.trunc(i.height * 100) / 100;
var ctype = i.ctype;
if (ctype !== -1 && ctype !== -2 && height < 0.2) {return;}
var x = rn(i.data[0], 1);
var y = rn(i.data[1], 1);
var f = i.f;
var fn = i.fn;
var harbor = i.harbor;
var region = i.region; // handle value for edit hrightmap mode only
var culture = i.culture; // handle value for edit hrightmap mode only
var 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, ctype, f, fn, harbor, region, culture});
}
// add additional points for cells along coast
if (ctype === 2 || ctype === -1) {
i.neighbors.forEach(function(e) {
if (cells[e].ctype === ctype) {
var x1 = (x * 2 + cells[e].data[0]) / 3;
var 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) {
newPoints.push([x1, y1]);
tempCells.push({index:tempCells.length, data:[x1, y1], height, ctype, f, fn, harbor, region, culture});
}
};
});
}
});
cells = tempCells; // use tempCells as the only cells array
calculateVoronoi(newPoints); // recalculate Voronoi diagram using new points
var gridPath = ""; // store grid as huge single path string
cells.map(function(i, d) {
if (i.height >= 0.2) {gridPath += round("M" + polygons[d].join("L") + "Z", 1);}
var neighbors = []; // re-detect neighbors
diagram.cells[d].halfedges.forEach(function(e) {
var edge = diagram.edges[e], ea;
if (!edge.left || !edge.right) {return;}
ea = edge.left.index;
if (ea === d) {ea = edge.right.index;}
neighbors.push(ea);
if (i.height >= 0.2 && cells[ea].height < 0.2) {
if (i.ctype === 1) {return;} // coastal point already defined
i.ctype = 1; // mark coastal land cells
// move cell point closer to coast
var x = (i.data[0] + cells[ea].data[0]) / 2;
var y = (i.data[1] + cells[ea].data[1]) / 2;
if (cells[ea].f === "Lake") {
i.data[0] = rn(x + (i.data[0] - x) * 0.22, 1);
i.data[1] = rn(y + (i.data[1] - y) * 0.22, 1);
} else {
i.haven = ea; // harbor haven (oposite ocean cell)
i.coastX = rn(x + (i.data[0] - x) * 0.12, 1);
i.coastY = rn(y + (i.data[1] - y) * 0.12, 1);
i.data[0] = rn(x + (i.data[0] - x) * 0.4, 1);
i.data[1] = rn(y + (i.data[1] - y) * 0.4, 1);
}
}
})
i.neighbors = neighbors;
if (i.haven === undefined) {delete i.harbor;}
if (i.region === undefined) {delete i.region;}
if (i.culture === undefined) {delete i.culture;}
i.flux = avPrec;
});
grid.append("path").attr("d", gridPath);
land = $.grep(cells, function(e) {return (e.height >= 0.2);});
land.sort(function(a, b) {return b.height - a.height;});
console.timeEnd("reGraph");
}
// redraw all cells for Customization 1 mode
function mockHeightmap() {
let heights = [];
let landCells = 0;
$("#landmass").empty();
cells.map(function(i) {
if (i.height < 0.2) {return;}
const clr = color(1 - i.height);
landmass.append("path").attr("id", "cell"+i.index)
.attr("d", "M" + polygons[i.index].join("L") + "Z")
.attr("fill", clr).attr("stroke", clr);
});
}
// draw or update all cells
function updateHeightmap() {
cells.map(function(c) {
let height = c.height;
if (height > 1) {height = 1;}
if (height < 0) {height = 0;}
c.height = height;
let cell = landmass.select("#cell"+c.index);
const clr = color(1 - height);
if (cell.size()) {
if (height < 0.2) {cell.remove();}
else {cell.attr("fill", clr).attr("stroke", clr);}
} else if (height >= 0.2) {
cell = landmass.append("path").attr("id", "cell"+c.index)
.attr("d", "M" + polygons[c.index].join("L") + "Z")
.attr("fill", clr).attr("stroke", clr);
}
});
}
// draw or update cells from the selection
function updateHeightmapSelection(selection) {
if (selection === undefined) {selection = cells;}
selection.map(function(s) {
let height = cells[s].height;
if (height > 1) {height = 1;}
if (height < 0) {height = 0;}
cells[s].height = height;
let cell = landmass.select("#cell"+s);
const clr = color(1 - height);
if (cell.size()) {
if (height < 0.2) {cell.remove();}
else {cell.attr("fill", clr).attr("stroke", clr);}
} else if (height >= 0.2) {
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 heights = [];
let landCells = 0;
cells.map(function(c) {
heights.push(c.height);
if (c.height >= 0.2) {landCells++;}
});
history = history.slice(0, historyStage);
history[historyStage] = heights;
historyStage++;
undo.disabled = templateUndo.disabled = historyStage > 1 ? false : true;
redo.disabled = templateRedo.disabled = true;
var elevationAverage = rn(d3.mean(heights), 2);
var landRatio = rn(landCells / cells.length * 100);
landmassCounter.innerHTML = landCells + " (" + landRatio + "%); Average Elevation: " + elevationAverage;
if (landCells > 100) {$("#getMap").attr("disabled", false).removeClass("buttonoff");}
else {$("#getMap").attr("disabled", true).addClass("buttonoff");}
// if perspective is displayed, update it
if ($("#perspectivePanel").is(":visible")) {drawPerspective();}
}
// restoreHistory
function restoreHistory(step) {
historyStage = step;
redo.disabled = templateRedo.disabled = historyStage < history.length ? false : true;
undo.disabled = templateUndo.disabled = historyStage > 1 ? false : true;
let heights = history[historyStage - 1];
if (heights === undefined) {return;}
cells.map(function(i, d) {i.height = heights[d];});
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');
getCurveType();
var oceanCoastline = "", lakeCoastline = "";
$("#landmass").empty();
var minX = graphWidth, maxX = 0; // extreme points
var minXedge, maxXedge; // extreme edges
for (var isle = 0; isle < island; isle++) {
var coastal = $.grep(land, function(e) {return (e.ctype === 1 && e.fn === isle);});
if (!coastal.length) {continue;}
var oceanEdges = [], lakeEdges = [];
for (var i = 0; i < coastal.length; i++) {
var id = coastal[i].index, cell = diagram.cells[id];
cell.halfedges.forEach(function(e) {
var edge = diagram.edges[e];
if (edge.left && edge.right) {
var ea = edge.left.index;
if (ea === id) {ea = edge.right.index;}
if (cells[ea].height < 0.2) {
var start = edge[0].join(" ");
var end = edge[1].join(" ");
if (cells[ea].f === "Lake") {
lakeEdges.push({start, end});
} else {
// 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]}
oceanEdges.push({start, end});
}
}
}
})
}
oceanCoastline += getContinuousLine(oceanEdges, 1.5, 0);
if (lakeEdges.length > 0) {lakeCoastline += getContinuousLine(lakeEdges, 1.5, 0);}
}
d3.select("#shape").append("path").attr("d", oceanCoastline).attr("fill", "white"); // draw the clippath
landmass.append("path").attr("d", oceanCoastline); // draw the landmass
coastline.append("path").attr("d", oceanCoastline); // draw the coastline
lakes.append("path").attr("d", lakeCoastline); // draw the lakes
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
var title =
`Map scale defines ratio between distance on a map and the corresponding distance on the ground.
Click to edit the map scale, drag to move the bar`;
// get size
var size = +barSize.value;
var dScale = distanceScale.value;
var unit = distanceUnit.value;
var scaleBar = svg.append("g").attr("id", "scaleBar").on("click", editScale).call(d3.drag().on("start", elementDrag));
scaleBar.append("title").text(title);
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
var 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");
var stepB = size + " " + rn(l / 5 - size, 2) + " ", stepS = size + " " + rn(l / 25 - size, 2) + " ";
var dash = stepS + stepS + stepS + stepS + stepS + stepB + stepB + stepB + stepB;
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");;
// small scale
for (var s = 1; s < 5; s++) {
var value = rn(s * l / 25, 2);
var label = rn(value * dScale / scale);
if (label < s) {continue;}
if (s > 1 && (l * dScale / 25) >= 100) {continue;}
if (s > 2 && label >= 100) {continue;}
if (s === 4 && label >= l / 10) {continue;}
scaleBar.append("text").attr("x", x + value).attr("y", y - 2 * size).attr("font-size", rn(2.6 * size, 1)).text(label);
}
// big scale
for (var b = 0; b < 6; b++) {
var value = rn(b * l / 5, 2);
var 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(7 * size, 1)).text(barLabel.value);
}
// move scaleBar to desired bottom-right point
var tr, bbox = scaleBar.node().getBBox();
if (sessionStorage.getItem("scaleBar")) {
var scalePos = sessionStorage.getItem("scaleBar").split(",");
tr = [+scalePos[0] - bbox.width, +scalePos[1] - bbox.height];
} else {
tr = [svgWidth - 10 - bbox.width, svgHeight - 5 - bbox.height];
}
scaleBar.attr("transform", "translate(" + rn(tr[0]) + "," + rn(tr[1]) + ")");
}
// draw default ruler measiring land x-axis edges
function drawDefaultRuler(minXedge, maxXedge) {
var title =
`Ruler is an instrument for measuring the linear lengths.
One dash shows 10 pixels (10 mi on default scale, approximate daily march distance).
Drag edge circles to move the ruler, center circle to split the ruler into 2 parts.
Click on the ruler label to remove the ruler from the map`;
var rulerNew = ruler.append("g").attr("class", "linear").call(d3.drag().on("start", elementDrag));
rulerNew.append("title").text(title);
var 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));
var 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));
var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
var tr = "rotate(" + angle + " " + x0 + " " + y0 +")";
var dist = rn(Math.hypot(x1 - x2, y1 - y2));
var 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() {
var el = d3.select(this);
var tr = parseTransform(el.attr("transform"));
var dx = +tr[0] - d3.event.x, dy = +tr[1] - d3.event.y;
d3.event.on("drag", function() {
var x = d3.event.x, y = d3.event.y;
var transform = `translate(${(dx+x)},${(dy+y)})`;
el.attr("transform", transform);
});
d3.event.on("end", function() {
// remember scaleBar bottom-right position
if (el.attr("id") === "scaleBar") {
var bbox = el.node().getBoundingClientRect();
sessionStorage.setItem("scaleBar", [bbox.right, bbox.bottom])
}
});
}
// draw ruler circles and update label
function rulerEdgeDrag() {
var group = d3.select(this.parentNode);
var edge = d3.select(this).attr("data-edge");
var x = d3.event.x, y = d3.event.y, x0, y0;
d3.select(this).attr("cx", x).attr("cy", y);
var 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");
}
var xc = rn((x + x0) / 2, 2), yc = rn((y + y0) / 2, 2);
group.select(".center").attr("cx", xc).attr("cy", yc);
var dist = rn(Math.hypot(x0 - x, y0 - y));
var label = rn(dist * distanceScale.value) + " " + distanceUnit.value;
var atan = x0 > x ? Math.atan2(y0 - y, x0 - x) : Math.atan2(y - y0, x - x0);
var angle = rn(atan * 180 / Math.PI, 3);
var 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() {
var xc1, yc1, xc2, yc2;
var group = d3.select(this.parentNode); // current ruler group
var x = d3.event.x, y = d3.event.y; // current coords
var line = group.selectAll("line"); // current lines
var x1 = +line.attr("x1"), y1 = +line.attr("y1"), x2 = +line.attr("x2"), y2 = +line.attr("y2"); // initial line edge points
var rulerNew = ruler.insert("g", ":first-child");
rulerNew.call(d3.drag().on("start", elementDrag));
var title =
`Ruler is an instrument for measuring thelinear lengths.
One dash shows 30 km (18.6 mi), approximate distance of a daily loaded march.
Drag edge circles to move the ruler, center circle to split the ruler into 2 parts.
Click on the ruler label to remove the ruler from the map`;
var factor = rn(1 / Math.pow(scale, 0.3), 1);
rulerNew.append("title").text(title);
rulerNew.append("line").attr("class", "white").attr("stroke-width", factor);
var 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);
var dist = rn(Math.hypot(x1 - x, y1 - y));
var label = rn(dist * distanceScale.value) + " " + distanceUnit.value;
var 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);
var 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() {
var el = d3.select(this);
var x0 = +el.attr("cx"), y0 = +el.attr("cy");
var group = d3.select(this.parentNode);
var curve = group.select(".white");
var curveGray = group.select(".gray");
var text = group.select("text");
var points = JSON.parse(text.attr("data-points"));
if (x0 === points[0].scX && y0 === points[0].scY) {points.reverse();}
d3.event.on("drag", function() {
var x = d3.event.x, y = d3.event.y;
el.attr("cx", x).attr("cy", y);
var l = points[points.length - 1];
var diff = Math.hypot(l.scX - x, l.scY - y);
if (diff > 5) {points.push({scX: x, scY: y});} else {return;}
lineGen.curve(d3.curveBasis);
var d = round(lineGen(points));
curve.attr("d", d);
curveGray.attr("d", d);
var dist = rn(curve.node().getTotalLength());
var label = rn(dist * distanceScale.value) + " " + distanceUnit.value;
text.attr("x", x).attr("y", y).text(label);
});
d3.event.on("end", function() {
var dist = rn(curve.node().getTotalLength());
var c = curve.node().getPointAtLength(dist / 2);
var p = curve.node().getPointAtLength((dist / 2) - 1);
var label = rn(dist * distanceScale.value) + " " + distanceUnit.value;
var 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);
var angle = rn(atan * 180 / Math.PI, 3);
var 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) {
var edgesOr = edges.slice();
var line = "";
while (edges.length > 2) {
var edgesOrdered = []; // to store points in a correct order
var start = edges[0].start;
var end = edges[0].end;
edges.shift();
var spl = start.split(" ");
edgesOrdered.push({scX: +spl[0], scY: +spl[1]});
spl = end.split(" ");
edgesOrdered.push({scX: +spl[0], scY: +spl[1]});
var x0 = +spl[0], y0 = +spl[1];
for (var i = 0; end !== start && i < 100000; i++) {
var next = null, index = null;
for (var e = 0; e < edges.length; e++) {
var edge = edges[e];
if (edge.start == end || edge.end == end) {
next = edge;
if (next.start == end) {end = next.end;} else {end = next.start;}
index = e;
break;
}
}
if (!next) {
console.error("Next edge is not found");
return "";
}
spl = end.split(" ");
if (indention || relax) {
var 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) + "Z";
}
return round(line, 1);
}
// Resolve Heightmap Depressions (for a correct water flux modeling)
function resolveDepressions() {
console.time('resolveDepressions');
var depression = 1, limit = 100, minCell, minHigh;
for (var l = 0; depression > 0 && l < limit; l++) {
depression = 0;
for (var i = 0; i < land.length; i++) {
var heights = [];
land[i].neighbors.forEach(function(e) {heights.push(+cells[e].height);});
var minHigh = d3.min(heights);
if (land[i].height <= minHigh) {
depression += 1;
land[i].height = minHigh + 0.01;
}
}
if (l === limit - 1) {console.error("Error: resolveDepressions iteration limit");}
}
console.timeEnd('resolveDepressions');
}
function flux() {
console.time('flux');
riversData = [];
var riversOrder = [], riverNext = 0;
land.sort(function(a, b) {return b.height - a.height;});
for (var i = 0; i < land.length; i++) {
var id = land[i].index;
var heights = [];
land[i].neighbors.forEach(function(e) {heights.push(cells[e].height);});
var minId = heights.indexOf(d3.min(heights));
var min = land[i].neighbors[minId];
// Define river number
if (land[i].flux > 0.85) {
if (land[i].river == undefined) {
// State new River
land[i].river = riverNext;
riversData.push({river: riverNext, cell: id, x: land[i].data[0], y: land[i].data[1]});
riverNext += 1;
}
// Assing existing River to the downhill cell
if (cells[min].river == undefined) {
cells[min].river = land[i].river;
} else {
var riverTo = cells[min].river;
var iRiver = $.grep(riversData, function(e) {return (e.river == land[i].river);});
var minRiver = $.grep(riversData, function(e) {return (e.river == riverTo);});
var iRiverL = iRiver.length;
var 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 >= 0.2 && iRiverL > 1 && minRiverL > 1) {
if (!cells[min].confluence) {
cells[min].confluence = minRiverL-1;
} else {
cells[min].confluence += minRiverL-1;
}
}
}
}
cells[min].flux += land[i].flux;
if (land[i].river != undefined) {
var px = cells[min].data[0];
var py = cells[min].data[1];
if (cells[min].height < 0.2) {
// pour water to the Ocean
var sx = land[i].data[0];
var sy = land[i].data[1];
var x = (px + sx) / 2 + (px - sx) / 20;
var y = (py + sy) / 2 + (py - sy) / 20;
riversData.push({river: land[i].river, cell: id, x, y});
}
else {
// 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 (var i = 0; i < riverNext; i++) {
var dataRiver = $.grep(riversData, function(e) {return e.river === i;});
if (dataRiver.length > 1) {
var riverAmended = amendRiver(dataRiver, 1);
var width = rn(0.8 + Math.random() * 0.4, 1);
var increment = rn(0.8 + Math.random() * 0.4, 1);
var 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) {
var riverAmended = [], side = 1;
for (var r = 0; r < dataRiver.length; r++) {
var dX = dataRiver[r].x;
var dY = dataRiver[r].y;
var cell = dataRiver[r].cell;
var c = cells[cell].confluence || 0;
riverAmended.push([dX, dY, c]);
if (r+1 < dataRiver.length) {
var eX = dataRiver[r+1].x;
var eY = dataRiver[r+1].y;
var angle = Math.atan2(eY - dY, eX - dX);
var serpentine = 1 / (r+1);
var meandr = serpentine + 0.3 + Math.random() * 0.3 * rndFactor;
if (Math.random() > 0.5) {side *= -1};
var 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)) {
var stX = (dX * 2 + eX) / 3;
var stY = (dY * 2 + eY) / 3;
var enX = (dX + eX * 2) / 3;
var 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) {
var scX = (dX + eX) / 2;
var 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));
var extraOffset = 0.02; // start offset to make river source visible
width = width || 1; // river width modifier
increment = increment || 1; // river bed widening modifier
var 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]);
});
var widening = rn((1000 + (riverLength * 30)) * increment);
var riverPointsLeft = [], riverPointsRight = [];
var last = points.length - 1;
var factor = riverLength / points.length;
// first point
var x = points[0][0], y = points[0][1], c;
var angle = Math.atan2(y - points[1][1], x - points[1][0]);
var xLeft = x + -Math.sin(angle) * extraOffset, yLeft = y + Math.cos(angle) * extraOffset;
riverPointsLeft.push({scX:xLeft, scY:yLeft});
var xRight = x + Math.sin(angle) * extraOffset, yRight = y + -Math.cos(angle) * extraOffset;
riverPointsRight.unshift({scX:xRight, scY:yRight});
// middle points
for (var 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
var xPrev = points[p-1][0], yPrev = points[p-1][1];
var 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
var right = lineGen(riverPointsRight);
var 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;
var extraOffset = 0.02 * width;
increment = increment || 1;
var riverPoints = points.map(function(p) {return {scX: p[0], scY: p[1]};});
var river = defs.append("path").attr("d", lineGen(riverPoints));
var riverLength = river.node().getTotalLength();
var widening = rn((1000 + (riverLength * 30)) * increment);
var riverPointsLeft = [], riverPointsRight = [];
for (let l = 0; l < riverLength; l++) {
var point = river.node().getPointAtLength(l);
var from = river.node().getPointAtLength(l - 0.1);
var 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
var right = lineGen(riverPointsRight);
var left = lineGen(riverPointsLeft);
left = left.substring(left.indexOf("C"));
return round(right + left, 2);
}
function editRiver() {
if (customization) {return;}
if (elSelected) {
const self = d3.select(this).attr("id") === elSelected.attr("id") ? true : false;
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();
}
});
const controlPoints = icons.append("g").attr("class", "controlPoints")
.attr("transform", elSelected.attr("transform"));
riverDrawPoints();
if (modules.editRiver) {return;}
modules.editRiver = true;
function riverAddControlPoint(point) {
let dists = [];
icons.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) + ")";
icons.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 (var 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) {
icons.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);
icons.select(".controlPoints").attr("transform", transform);
});
}
function redrawRiver() {
let points = [];
icons.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 (var 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 (var 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() * 1;
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);
icons.select(".controlPoints").selectAll("*").remove();
amended.map(function(p) {addRiverPoint(p);});
});
$("#riverAngle").change(function() {
const tr = parseTransform(elSelected.attr("transform"));
riverAngleValue.innerHTML = Math.abs(+this.value) + "°";
var 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);
icons.select(".controlPoints").attr("transform", transform);
});
$("#riverReset").click(function() {
elSelected.attr("transform", "");
icons.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;
var 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);
icons.select(".controlPoints").attr("transform", transform);
});
$("#riverNew").click(function() {
if ($(this).hasClass('pressed')) {
completeNewRiver();
} else {
// enter creation mode
$(".pressed").removeClass('pressed');
$(this).addClass('pressed');
elSelected.call(d3.drag().on("drag", null));
icons.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.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();
}
}
function completeNewRiver() {
$("#riverNew").removeClass('pressed');
restoreDefaultEvents();
if (elSelected.attr("data-river") === "new") {
redrawRiver();
elSelected.attr("data-river", "");
elSelected.call(d3.drag().on("start", riverDrag)).on("click", editRiver);
const river = +elSelected.attr("id").slice(5);
icons.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;}
});
}
}
$("#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();
});
$("#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(precipitation / Math.sqrt(cells.length), 2);
land.map(function(l) {
if (l.river === river) {
l.river = undefined;
i.flux = avPrec;
}
});
elSelected.remove();
unselect();
$("#riverEditor").dialog("close");
},
Cancel: function() {$(this).dialog("close");}
}
})
});
}
function unselect() {
if (elSelected) {
elSelected.call(d3.drag().on("drag", null)).classed("draggable", false);
icons.select(".controlPoints").remove();
viewbox.style("cursor", "default");
elSelected = null;
}
}
function parseTransform(string) {
// [translateX,translateY,rotateDeg,rotateX,rotateY,scale]
if (!string) {return [0,0,0,0,0,1];}
var 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];
}
function editRoute() {
if (customization) {return;}
if (elSelected) {
const self = d3.select(this).attr("id") === elSelected.attr("id") ? true : false;
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");
elSelected = d3.select(this);
const controlPoints = icons.append("g").attr("class", "controlPoints");
routeDrawPoints();
// get route type
const group = d3.select(this.parentNode);
routeUpdateGroups();
const routeType = group.attr("id");
routeType.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 ($("#routeNew").hasClass('pressed')) {completeNewRoute();}
if ($("#routeSplit").hasClass('pressed')) {$("#routeSplit").removeClass('pressed');}
unselect();
}
});
if (modules.editRoute) {return;}
modules.editRoute = true;
function routeAddControlPoint(point) {
let dists = [];
icons.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) + ")";
icons.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() {
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 (var i = 0; i <= l; i += inc) {
const p = node.getPointAtLength(i);
addRoutePoint(p);
}
}
function addRoutePoint(point) {
icons.select(".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 = [];
icons.select(".controlPoints").selectAll("circle").each(function() {
var 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));
}
function newRouteAddPoint() {
const point = d3.mouse(this);
addRoutePoint({x:point[0], y:point[1]});
if (elSelected.attr("data-route") !== "new") {
const id = routeType + "" + group.selectAll("*").size();
elSelected = group.append("path").attr("data-route", "new").attr("id", id).on("click", completeNewRoute);
} else {
routeRedraw();
}
}
function completeNewRoute() {
$("#routeNew").removeClass('pressed');
restoreDefaultEvents();
if (elSelected.attr("data-route") === "new") {
routeRedraw();
elSelected.attr("data-route", "").on("click", editRoute);
const node = elSelected.node();
const l = node.getTotalLength();
let pathCells = [];
for (var 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;}
});
}
}
function routeUpdateGroups() {
const type = group.attr("data-type");
routeGroup.innerHTML = "";
routes.selectAll("g").each(function(d) {
const el = d3.select(this);
if (el.attr("data-type") !== type) {return;}
const opt = document.createElement("option");
opt.value = opt.innerHTML = el.attr("id");
routeGroup.add(opt);
});
}
function routeSplitInPoint(clicked) {
$("#routeSplit").removeClass('pressed');
let points1 = [], points2 = [];
let points = points1;
icons.select(".controlPoints").selectAll("circle").each(function() {
var 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 = routeType + "" + group.selectAll("*").size();
group.append("path").attr("id", id).attr("d", lineGen(points2)).on("click", editRoute);
routeDrawPoints();
}
$("#routeGroup").change(function() {
const newGroup = this.value;
if (routeType === newGroup) {return;}
$(elSelected.node()).detach().appendTo($("#"+newGroup));
routeType = newGroup;
});
$("#routeNew").click(function() {
if ($(this).hasClass('pressed')) {
completeNewRoute();
} else {
// enter creation mode
$(".pressed").removeClass('pressed');
$(this).addClass('pressed');
icons.select(".controlPoints").selectAll("*").remove();
viewbox.style("cursor", "crosshair").on("click", newRouteAddPoint);
}
});
$("#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 manorsAndRegions() {
console.group('manorsAndRegions');
calculateChains();
rankPlacesGeography();
getCurveType();
locateCultures();
locateCapitals();
generateMainRoads();
rankPlacesEconomy();
locateTowns();
checkAccessibility();
drawManors();
defineRegions();
drawRegions();
generatePortRoads();
generateSmallRoads();
generateOceanRoutes();
calculatePopulation();
console.groupEnd('manorsAndRegions');
}
// Assess cells geographycal suitability for settlement
function rankPlacesGeography() {
console.time('rankPlacesGeography');
land.map(function(c) {
var score = 0;
// truncate decimals to keep dta clear
c.height = rn(c.height, 2);
c.flux = rn(c.flux, 2);
// base score from height (will be biom)
if (c.height <= 0.8) {score = 1.4;}
if (c.height <= 0.6) {score = 1.6;}
if (c.height <= 0.5) {score = 1.8;}
if (c.height <= 0.4) {score = 2;}
score += (1 - c.height) / 2;
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 += 2;} else {score -= 0.2;} // good sea harbor is valued
if (c.river && c.ctype === 1) {score += 2;} // sea estuaries are valued
}
if (c.river && c.ctype === 1) {score += 2;} // all estuaries are valued
if (c.flux > 1) {score += Math.pow(c.flux, 0.3);} // riverbank is valued
if (c.confluence) {score += Math.pow(c.confluence, 0.3);} // confluence is valued;
}
c.score = rn(score, 2);
});
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) {
var score = c.score;
var path = c.path || 0; // roads are valued
if (path) {
path = Math.pow(path, 0.2);
var crossroad = c.crossroad || 0; // crossroads are valued
score = score + path + crossroad;
}
c.score = rn(Math.random() * score + score, 2); // 0.5 random factor
});
land.sort(function(a, b) {return b.score - a.score;});
console.timeEnd('rankPlacesEconomy');
}
// get population for manors and states
function calculatePopulation() {
// rank all burgs to get final scores (population); what attracts trade/people
manors.map(function(m) {
var cell = cells[m.cell];
var 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
m.population = rn(score, 1);
});
// calculate population for each region
states.map(function(s, i) {
// define region burgs count
var burgs = $.grep(manors, function(e) {return (e.region === i);});
s.burgs = burgs.length;
// define region total and burgs population
var burgsPop = 0; // get summ of all burgs population
burgs.map(function(b) {burgsPop += b.population;});
s.urbanPopulation = rn(burgsPop, 2);
var regionCells = $.grep(cells, function(e) {return (e.region === i);});
var cellsScore = 0; // cells score based on elevation (but should be biome)
regionCells.map(function(c) {cellsScore += Math.pow((1 - c.height), 3) * 10;});
s.cells = regionCells.length;
var graphSizeAdj = 90 / Math.sqrt(cells.length, 2); // adjust to different graphSize
s.ruralPopulation = rn(cellsScore * graphSizeAdj, 2);
});
// collect data for neutrals
var burgs = $.grep(manors, function(e) {return (e.region === "neutral");});
if (burgs.length > 0) {
// decrease neutral land population as neutral lands usually are pretty wild
var ruralFactor = 0.5, urbanFactor = 0.9;
var burgsPop = 0;
burgs.map(function(b) {
manors[b.i].population = rn(manors[b.i].population * urbanFactor, 1);
burgsPop += b.population;
});
var urbanPopulation = rn(burgsPop, 2);
var regionCells = $.grep(cells, function(e) {return (e.region === "neutral");});
var cellsScore = 0, area = 0;
regionCells.map(function(c) {
cellsScore += Math.pow((1 - c.height), 3) * 10;
area += rn(Math.abs(d3.polygonArea(polygons[c.index])));
});
var graphSizeAdj = 90 / Math.sqrt(cells.length, 2);
ruralPopulation = rn(cellsScore * graphSizeAdj * ruralFactor, 2);
states.push({i: states.length, color: "neutral", name: "Neutrals", capital: "neutral", cells: regionCells.length, burgs: burgs.length, urbanPopulation, ruralPopulation, area});
}
}
// Locate cultures
function locateCultures() {
var cultureCenters = d3.range(7).map(function(d) {return [Math.random() * graphWidth, Math.random() * graphHeight];});
cultureTree = d3.quadtree().extent([[0, 0], [graphWidth, graphHeight]]).addAll(cultureCenters);;
}
function locateCapitals() {
console.time('locateCapitals');
var spacing = graphWidth / capitalsCount;
manorTree = d3.quadtree().extent([[0, 0], [graphWidth, graphHeight]]);
console.log(" countries: " + capitalsCount);
for (var l = 0; l < land.length && manors.length < capitalsCount; l++) {
var m = manors.length;
var dist = 10000; // dummy value
if (l > 0) {
var closest = manorTree.find(land[l].data[0], land[l].data[1]);
dist = Math.hypot(land[l].data[0] - closest[0], land[l].data[1] - closest[1]);
}
if (dist >= spacing) {
var cell = land[l].index;
shiftSettlement(land[l], "capital");
queue.push(cell);
queue.push(...land[l].neighbors);
var closest = cultureTree.find(land[l].data[0], land[l].data[1]);
var culture = cultureTree.data().indexOf(closest);
var name = generateName(culture);
manors.push({i: m, cell, x: land[l].data[0], y: land[l].data[1], region: m, culture, name});
manorTree.add([land[l].data[0], land[l].data[1]]);
}
if (l === land.length - 1) {
console.error("Cannot place capitals with current spacing. Trying again with reduced spacing");
l = -1, manors = [], queue = [];
manorTree = d3.quadtree().extent([[0, 0], [graphWidth, graphHeight]]);
spacing /= 1.2;
}
}
// define color scheme for resions
var scheme = capitalsCount <= 8 ? colors8 : colors20;
manors.map(function(e, i) {
var mod = +powerInput.value;
var power = rn(Math.random() * mod / 2 + 1, 1);
var color = scheme(i / capitalsCount);
states.push({i, color, power, capital: i});
states[i].name = generateStateName(i);
var p = cells[e.cell];
p.manor = i;
p.region = i;
p.culture = e.culture;
});
console.timeEnd('locateCapitals');
}
function locateTowns() {
console.time('locateTowns');
for (var l = 0; l < land.length && manors.length < manorsCount; l++) {
if (queue.indexOf(land[l].index) == -1) {
queue.push(land[l].index);
if (land[l].ctype || Math.random() > 0.6) {queue.push(...land[l].neighbors);}
shiftSettlement(land[l], "town");
var x = land[l].data[0];
var y = land[l].data[1];
var cell = land[l].index;
var region = "neutral", culture = -1, closest = neutral;
for (c = 0; c < capitalsCount; c++) {
var dist = Math.hypot(manors[c].x - x, manors[c].y - y) / states[c].power;
var 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") {
var closestCulture = cultureTree.find(x, y);
culture = cultureTree.data().indexOf(closestCulture);
} else {
culture = manors[region].culture;
}
var name = generateName(culture);
land[l].manor = manors.length;
land[l].culture = culture;
land[l].region = region;
manors.push({i: manors.length, cell, x, y, region, culture, name});
}
if (l === land.length - 1) {
console.error("Cannot place all towns. Towns requested: " + manorsCount + ". Towns placed: " + manors.length);
}
}
console.timeEnd('locateTowns');
}
function shiftSettlement(cell, type) {
if ((type === "capital" && cell.harbor) || (type === "town" && cell.harbor === 1)) {
cell.port = true;
cell.data[0] = cell.coastX;
cell.data[1] = cell.coastY;
}
if (cell.river) {
var shift = 0.2 * cell.flux;
if (shift < 0.2) {shift = 0.2;}
if (shift > 1) {shift = 1;}
shift = Math.random() > .5 ? shift : shift * -1;
cell.data[0] += shift;
shift = Math.random() > .5 ? shift : shift * -1;
cell.data[1] += shift;
cell.data[0] = rn(cell.data[0], 2);
cell.data[1] = rn(cell.data[1], 2);
}
}
// Validate each island with manors has at least one port (so Island is accessible)
function checkAccessibility() {
console.time("checkAccessibility");
for (var i = 0; i < island; i++) {
var manorsOnIsland = $.grep(land, function(e) {return (typeof e.manor !== "undefined" && e.fn === i);});
if (manorsOnIsland.length > 0) {
var ports = $.grep(manorsOnIsland, function(p) {return (p.port);});
if (ports.length === 0) {
var portCandidates = $.grep(manorsOnIsland, function(c) {return (c.harbor && c.ctype === 1);});
if (portCandidates.length > 0) {
// No ports on island. Upgrading first burg to port
portCandidates[0].harbor = 1;
portCandidates[0].port = true;
portCandidates[0].data[0] = portCandidates[0].coastX;
portCandidates[0].data[1] = portCandidates[0].coastY;
var manor = manors[portCandidates[0].manor];
manor.x = portCandidates[0].coastX;
manor.y = portCandidates[0].coastY;
// add 1 score point for every other burg on island (as it's the only port)
portCandidates[0].score += Math.floor((portCandidates.length - 1) / 2);
} else {
// No ports on island. Reducing score for burgs
manorsOnIsland.map(function(e) {e.score -= 2;});
}
}
}
}
console.timeEnd("checkAccessibility");
}
function generateMainRoads() {
console.time("generateMainRoads");
for (var i = 0; i < island; i++) {
var manorsOnIsland = $.grep(land, function(e) {return (typeof e.manor !== "undefined" && e.fn === i);});
if (manorsOnIsland.length > 1) {
for (var d = 1; d < manorsOnIsland.length; d++) {
for (var m = 0; m < d; m++) {
var path = findLandPath(manorsOnIsland[d].index, manorsOnIsland[m].index, "main");
restorePath(manorsOnIsland[m].index, manorsOnIsland[d].index, "main", path);
}
}
}
}
console.timeEnd("generateMainRoads");
}
function generatePortRoads() {
console.time("generatePortRoads");
var landCapitals = $.grep(land, function(e) {return (e.manor < capitalsCount && !e.port);});
landCapitals.map(function(e) {
var ports = $.grep(land, function(l) {return (l.port && l.region === e.manor);});
var minDist = 1000, end = -1;
ports.map(function(p) {
var dist = Math.hypot(e.data[0] - p.data[0], e.data[1] - p.data[1]);
if (dist < minDist) {minDist = dist; end = p.index;}
});
if (end !== -1) {
var start = e.index;
var path = findLandPath(start, end, "direct");
restorePath(end, start, "main", path);
}
});
console.timeEnd("generatePortRoads");
}
function generateSmallRoads() {
console.time("generateSmallRoads");
lineGen.curve(d3.curveBasis);
for (var i = 0; i < island; i++) {
var manorsOnIsland = $.grep(land, function(e) {return (typeof e.manor !== "undefined" && e.fn === i);});
var l = manorsOnIsland.length;
if (l > 1) {
var secondary = rn((l + 8) / 10);
for (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) {
var start = e.index, end = -1;
var road = $.grep(land, function(e) {return (e.path && e.fn === i);});
if (road.length > 0) {
var minDist = 10000;
road.map(function(i) {
var 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;
}
var path = findLandPath(start, end, "main");
restorePath(end, start, "small", path);
}
});
}
}
console.timeEnd("generateSmallRoads");
}
function generateOceanRoutes() {
console.time("generateOceanRoutes");
lineGen.curve(d3.curveBasis);
var ports = [];
for (var i = 0; i < island; i++) {
var portsOnIsland = $.grep(land, function(e) {return (e.fn === i && e.port);});
if (portsOnIsland.length) {ports.push(portsOnIsland);}
}
ports.sort(function(a, b) {return b.length - a.length;});
const anchors = burgs.append("g").attr("id", "anchors");
for (var i = 0; i < ports.length; i++) {
var start = ports[i][0].index;
var paths = findOceanPaths(start, -1);
// draw anchor icons
for (var p = 0; p < ports[i].length; p++) {
var x = ports[i][p].data[0];
var y = ports[i][p].data[1];
anchors.append("use").attr("xlink:href", "#icon-anchor")
.attr("x", x - 0.5).attr("y", y - 0.44).attr("width", 1).attr("height", 1)
.call(d3.drag().on("start", elementDrag));
}
var length = ports[i].length; // ports on island
// routes from all ports on island to 1st port on island
for (var h = 1; h < length; h++) {
var end = ports[i][h].index;
restorePath(end, start, "ocean", paths);
}
// inter-island routes
for (var c = i + 1; c < ports.length; c++) {
if (i === 0 || (ports[c].length > 2 && length > 3)) {
var end = ports[c][0].index;
restorePath(end, start, "ocean", paths);
}
}
if (length > 5) {
ports[i].sort(function(a, b) {return b.cost - a.cost;});
for (var a = 2; a < length && a < 10; a++) {
var dist = Math.hypot(ports[i][1].data[0] - ports[i][a].data[0], ports[i][1].data[1] - ports[i][a].data[1]);
var distPath = getPathDist(ports[i][1].index, ports[i][a].index);
if (distPath > dist * 4 + 10) {
var totalCost = ports[i][1].cost + ports[i][a].cost;
var paths = findOceanPaths(ports[i][1].index, ports[i][a].index);
if (ports[i][a].cost < totalCost) {
restorePath(ports[i][a].index, ports[i][1].index, "ocean", paths);
break;
}
}
}
}
}
console.timeEnd("generateOceanRoutes");
}
function findLandPath(start, end, type) {
// A* algorithm
var queue = new PriorityQueue({comparator: function(a, b) {return a.p - b.p}});
var cameFrom = [];
var costTotal = [];
costTotal[start] = 0;
queue.queue({e: start, p: 0});
while (queue.length > 0) {
var next = queue.dequeue().e;
if (next === end) {break;}
var pol = cells[next];
pol.neighbors.forEach(function(e) {
if (cells[e].height >= 0.2) {
var cost = cells[e].height * 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;
}
var costNew = costTotal[next] + cost;
if (!cameFrom[e] || costNew < costTotal[e]) { //
costTotal[e] = costNew;
cameFrom[e] = next;
var dist = Math.hypot(cells[e].data[0] - cells[end].data[0], cells[e].data[1] - cells[end].data[1]) / 15;
var priority = costNew + dist;
queue.queue({e, p: priority});
}
}
});
}
return cameFrom;
}
function findLandPaths(start, type) {
// Dijkstra algorithm (not used now)
var queue = new PriorityQueue({comparator: function(a, b) {return a.p - b.p}});
var cameFrom = [];
var costTotal = [];
cameFrom[start] = "no";
costTotal[start] = 0;
queue.queue({e: start, p: 0});
while (queue.length > 0) {
var next = queue.dequeue().e;
var pol = cells[next];
pol.neighbors.forEach(function(e) {
var cost = cells[e].height;
if (cost >= 0.2) {
cost *= 2;
if (typeof e.river !== "undefined") {cost -= 0.2;}
if (pol.region !== cells[e].region) {cost += 1;}
if (cells[e].region === "neutral") {cost += 1;}
if (typeof e.manor !== "undefined") {cost = 0.1;}
var costNew = costTotal[next] + cost;
if (!cameFrom[e]) {
costTotal[e] = costNew;
cameFrom[e] = next;
queue.queue({e, p: costNew});
}
}
});
}
return cameFrom;
}
function findOceanPaths(start, end) {
var queue = new PriorityQueue({comparator: function(a, b) {return a.p - b.p}});
var next, cameFrom = [], costTotal = [];
cameFrom[start] = "no", costTotal[start] = 0;
queue.queue({e: start, p: 0});
while (queue.length > 0 && next !== end) {
next = queue.dequeue().e;
var pol = cells[next];
pol.neighbors.forEach(function(e) {
if (cells[e].ctype < 0 || cells[e].haven === next) {
var cost = 1;
if (cells[e].ctype > 0) {cost += 100;}
if (cells[e].ctype < -1) {
var 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;}
var 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) {
var queue = new PriorityQueue({comparator: function(a, b) {return a.p - b.p}});
var next, costNew;
var cameFrom = [];
var costTotal = [];
cameFrom[start] = "no";
costTotal[start] = 0;
queue.queue({e: start, p: 0});
while (queue.length > 0 && next !== end) {
next = queue.dequeue().e;
var pol = cells[next];
pol.neighbors.forEach(function(e) {
if (cells[e].path && (cells[e].ctype === -1 || cells[e].haven === next)) {
var 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) {
var path = [], current = end, limit = 1000;
var 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 (var i = 0; i < limit; i++) {
current = from[current];
var 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") {
var plus = type === "main" ? 4 : 2;
var f = cells[path[0].i];
if (f.path > 1) {
if (!f.crossroad) {f.crossroad = 0;}
f.crossroad += plus;
}
var t = cells[(path[path.length - 1].i)];
if (t.path > 1) {
if (!t.crossroad) {t.crossroad = 0;}
t.crossroad += plus;
}
}
// draw path segments
var 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 manors with random / generated names
// For each non-capital manor detect the closes capital (used for areas)
function drawManors() {
console.time('drawManors');
for (var i = 0; i < manors.length; i++) {
var x = manors[i].x;
var y = manors[i].y;
var cell = manors[i].cell;
var name = manors[i].name;
if (i < capitalsCount) {
burgs.append("circle").attr("id", "manorIcon"+i).attr("r", 1).attr("stroke-width", .24).attr("cx", x).attr("cy", y);
capitals.append("text").attr("id", "manorLabel"+i).attr("x", x).attr("y", y).attr("dy", -1.3).text(name);
} else {
burgs.append("circle").attr("id", "manorIcon"+i).attr("r", .5).attr("stroke-width", .12).attr("cx", x).attr("cy", y);
towns.append("text").attr("id", "manorLabel"+i).attr("x", x).attr("y", y).attr("dy", -.7).text(name);
}
}
labels.selectAll("text").on("click", editLabel);
burgs.selectAll("circle").call(d3.drag().on("start", elementDrag));
console.timeEnd('drawManors');
}
// calculate Markov's chain from real data
function calculateChains() {
var vowels = "aeiouy";
for (var l = 0; l < cultures.length; l++) {
var probs = []; // Coleshill -> co les hil l-com
var inline = manorNames[l].join(" ").toLowerCase();
var syl = "";
for (var i = -1; i < inline.length - 2;) {
if (i < 0) {var f = " ";} else {var f = inline[i];}
var str = "", vowel = 0;
for (var c = i+1; str.length < 5; c++) {
if (inline[c] === undefined) {break;}
str += inline[c];
if (str === " ") {break;}
if (inline[c] !== "o" && inline[c] !== "e" && vowels.includes(inline[c]) && inline[c+1] === inline[c]) {break;}
if (inline[c+2] === " ") {str += inline[c+1]; break;}
if (vowels.includes(inline[c])) {vowel++;}
if (vowel && vowels.includes(inline[c+2])) {break;}
}
i += str.length;
probs[f] = probs[f] || [];
probs[f].push(str);
}
chain[l] = probs;
}
}
// generate random name using Markov's chain
function generateName(culture) {
var data = chain[culture], res = "", next = data[" "];
var cur = next[Math.floor(Math.random() * next.length)];
while (res.length < 7) {
var l = cur.charAt(cur.length - 1);
if (cur !== " ") {
res += cur;
next = data[l];
cur = next[Math.floor(Math.random() * next.length)];
} else if (res.length > 2 + Math.floor(Math.random() * 5)) {
break;
} else {
next = data[" "];
cur = next[Math.floor(Math.random() * next.length)];
}
}
var name = res.charAt(0).toUpperCase() + res.slice(1);
return name;
}
// Define areas based on the closest manor to a polygon
function defineRegions() {
console.time('defineRegions');
manorTree = d3.quadtree().extent([[0, 0], [graphWidth, graphHeight]]);
manors.map(function(m) {
if (m.region === "removed") {return;}
manorTree.add([m.x, m.y]);
});
land.map(function(i) {
var x = i.data[0], y = i.data[1];
var closest = manorTree.find(x, y);
var dist = Math.hypot(closest[0] - x, closest[1] - y);
if (dist > neutral / 2) {
i.region = "neutral";
var closestCulture = cultureTree.find(i.data[0], i.data[1]);
i.culture = cultureTree.data().indexOf(closestCulture);
} else {
var manor = $.grep(manors, function(e) {return (e.x === closest[0] && e.y === closest[1]);});
var cell = manor[0].cell;
if (cells[cell].fn !== i.fn) {
var minDist = dist * 3;
land.map(function(l) {
if (l.fn === i.fn && l.manor !== undefined) {
var distN = Math.hypot(l.data[0] - i.data[0], l.data[1] - i.data[1]);
if (distN < minDist) {minDist = distN; cell = l.index;}
}
});
}
i.region = cells[cell].region;
i.culture = cells[cell].culture;
}
});
console.timeEnd('defineRegions');
}
// Define areas cells
function drawRegions() {
console.time('drawRegions');
// arrays to store edge data
var 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;}
if (e[i].left === undefined || e[i].right === undefined) {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;}
const start = e[i][0].join(" ");
const end = e[i][1].join(" ");
const p = {start, end};
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) {
var path = "", array = [];
lineGen.curve(d3.curveLinear);
while (edges.length > 2) {
var edgesOrdered = []; // to store points in a correct order
var start = edges[0].start;
var end = edges[0].end;
edges.shift();
var spl = start.split(" ");
edgesOrdered.push({scX: spl[0], scY: spl[1]});
spl = end.split(" ");
edgesOrdered.push({scX: spl[0], scY: spl[1]});
for (var i = 0; end !== start && i < 2000; i++) {
var 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]});
}
var rem = edges.indexOf(next[0]);
edges.splice(rem, 1);
}
path += lineGen(edgesOrdered) + "Z ";
var edgesFormatted = [];
edgesOrdered.map(function(e) {edgesFormatted.push([+e.scX, +e.scY])});
array[array.length] = edgesFormatted;
}
var color = states[region].color;
regions.append("path").attr("d", round(path, 1)).attr("fill", color).attr("stroke", "none").attr("class", "region"+region);
array.sort(function(a, b){return b.length - a.length;});
var name = states[region].name;
var c = polylabel(array, 1.0); // pole of inaccessibility
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) {
var path = "";
while (edges.length > 0) {
var edgesOrdered = []; // to store points in a correct order
var start = edges[0].start;
var end = edges[0].end;
edges.shift();
var spl = start.split(" ");
edgesOrdered.push({scX: spl[0], scY: spl[1]});
spl = end.split(" ");
edgesOrdered.push({scX: spl[0], scY: spl[1]});
var 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]});
var rem = edges.indexOf(next[0]);
edges.splice(rem, 1);
next = $.grep(edges, function(e) {return (e.start == end || e.end == end);});
}
path += lineGen(edgesOrdered);
}
var color = states[region].color;
regions.append("path").attr("d", round(path, 1)).attr("fill", "none").attr("stroke", color).attr("stroke-width", 1.5).attr("class", "region"+region);
}
function drawBorders(edges, type) {
var path = "";
if (edges.length < 1) {return;}
while (edges.length > 0) {
var edgesOrdered = []; // to store points in a correct order
var start = edges[0].start;
var end = edges[0].end;
edges.shift();
var spl = start.split(" ");
edgesOrdered.push({scX: spl[0], scY: spl[1]});
spl = end.split(" ");
edgesOrdered.push({scX: spl[0], scY: spl[1]});
var 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]});
var 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) {
var culture = state;
if (states[state]) if(manors[states[state].capital]) {culture = manors[states[state].capital].culture;}
var name = Math.random() < 0.8 ? generateName(culture) : manors[state].name;
var suffix = "ia"; // common latin suffix
var vowels = "aeiouy";
if (Math.random() < 0.05 && (culture == 3 || culture == 4)) {suffix = "terra";} // 5% "terra" for Italian and Spanish
if (Math.random() < 0.05 && culture == 2) {suffix = "terre";} // 5% "terre" for French
if (Math.random() < 0.5 && culture == 0) {suffix = "land";} // 50% "land" for German
if (Math.random() < 0.33 && (culture == 1 || culture == 6)) {suffix = "land";} // 33% "land" for English and Scandinavian
if (culture == 5 && name.slice(-2) === "sk") {name.slice(0,-2);} // exclude -sk suffix for Slavic
if (name.indexOf(suffix) !== -1) {suffix = "";} // null suffix if name already contains it
var ending = name.slice(-1);
if (vowels.includes(ending) && name.length > 3) {
if (Math.random() > 0.2) {
ending = name.slice(-2,-1);
if (vowels.includes(ending)) {
name = name.slice(0,-2) + suffix; // 80% for vv
} else if (Math.random() > 0.2) {
name = name.slice(0,-1) + suffix; // 64% for cv
}
}
} else if (Math.random() > 0.5) {
name += suffix // 50% for cc
}
if (name.slice(-4) === "berg") {name += suffix;} // special case for -berg
return name;
}
// draw the Heightmap
function toggleHeight() {
var scheme = styleSchemeInput.value;
var 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() == 0) {
land.map(function(i) {
terrs.append("path")
.attr("d", "M" + polygons[i.index].join("L") + "Z")
.attr("fill", hColor(1 - i.height))
.attr("stroke", hColor(1 - i.height));
});
} else {
terrs.selectAll("path").remove();
}
}
// draw Cultures
function toggleCultures() {
if (cults.selectAll("path").size() == 0) {
land.map(function(i) {
cults.append("path")
.attr("d", "M" + polygons[i.index].join("L") + "Z")
.attr("fill", colors8(i.culture / cultures.length))
.attr("stroke", colors8(i.culture / cultures.length));
});
} else {
cults.selectAll("path").remove();
}
}
// draw Overlay
function toggleOverlay() {
if (overlay.selectAll("*").size() === 0) {
var type = styleOverlayType.value;
var size = +styleOverlaySize.value;
if (type === "hex") {
var hexbin = d3.hexbin().radius(size).size([svgWidth, svgHeight]);
overlay.append("path").attr("d", round(hexbin.mesh(), 0));
} else if (type === "square") {
var x = d3.range(size, svgWidth, size);
var 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 {
var 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));
} else {
overlay.selectAll("*").remove();
}
}
// 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;}
c.height = rn(c.height, 2);
c.flux = rn(c.flux, 2);
});
// restore heightmap layer if it was turned on
if (!$("#toggleHeight").hasClass("buttonoff") && !terrs.selectAll("path").size()) {toggleHeight();}
closeDialogs();
// svg.selectAll("path, circle, line, text").attr("vector-effect", "non-scaling-stroke"); // non-scaling-stroke
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");
});
}
// Draw the water flux system (for dubugging)
function toggleFlux() {
var 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');
var ea, edge, id, cell, x, y, height, path, dash = "", rnd, count;
var hill = [], hShade = [], swamp = "", swampCount = 0, forest = "", fShade = "", fLight = "", swamp = "";
hill[0] = "", hill[1] = "", hShade[0] = "", hShade[1] = "";
var strokes = terrain.append("g").attr("id", "strokes"),
hills = terrain.append("g").attr("id", "hills"),
mounts = terrain.append("g").attr("id", "mounts"),
swamps = terrain.append("g").attr("id", "swamps"),
forests = terrain.append("g").attr("id", "forests");
// sort the land to Draw the top element first (reduce the elements overlapping)
land.sort(compareY);
for (i = 0; i < land.length; i++) {
x = land[i].data[0];
y = land[i].data[1];
height = land[i].height;
if (height >= 0.7 && !land[i].river) {
h = (height - 0.55) * 12;
if (height < 0.8) {
count = 2;
} else {
count = 1;
}
rnd = Math.random() * 0.8 + 0.2;
for (c = 0; c < count; c++) {
cx = x - h * 0.9 - c;
cy = y + h / 4 + c / 2;
path = "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;
mounts.append("path").attr("d", path).attr("stroke", "#5c5c70");
path = "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;
mounts.append("path").attr("d", path).attr("fill", "#999999");
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);
} else if (height > 0.5 && !land[i].river) {
h = (height - 0.4) * 10;
count = Math.floor(4 - h);
if (h > 1.8) {
h = 1.8
}
for (c = 0; c < count; c++) {
cx = x - h - c;
cy = y + h / 4 + c / 2;
hill[c] += "M" + cx + "," + cy + " Q" + (cx + h) + "," + (cy - h) + " " + (cx + 2 * h) + "," + cy;
hShade[c] += "M" + (cx + 0.6 * h) + "," + (cy + 0.1) + " Q" + (cx + h * 0.95) + "," + (cy - h * 0.91) + " " + (cx + 2 * h * 0.97) + "," + cy;
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);
}
if (height >= 0.21 && height < 0.22 && !land[i].river && swampCount < swampiness && land[i].used != 1) {
swampCount++;
land[i].used = 1;
swamp += drawSwamp(x, y);
id = land[i].index;
cell = diagram.cells[id];
cell.halfedges.forEach(function(e) {
edge = diagram.edges[e];
ea = edge.left.index;
if (ea === id || !ea) {
ea = edge.right.index;
}
if (cells[ea].height >= 0.2 && cells[ea].height < 0.3 && !cells[ea].river && cells[ea].used != 1) {
cells[ea].used = 1;
swamp += drawSwamp(cells[ea].data[0], cells[ea].data[1]);
}
})
}
if (Math.random() < height && height >= 0.22 && height < 0.48 && !land[i].river) {
for (c = 0; c < Math.floor(height * 8); c++) {
h = 0.6;
if (c == 0) {
cx = x - h - Math.random();
cy = y - h - 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();
}
forest += "M " + cx + " " + cy + " q -1 0.8 -0.05 1.25 v 0.75 h 0.1 v -0.75 q 0.95 -0.47 -0.05 -1.25 z";
fLight += "M " + cx + " " + cy + " q -1 0.8 -0.05 1.25 h 0.1 q 0.95 -0.47 -0.05 -1.25 z";
fShade += "M " + cx + " " + cy + " q -1 0.8 -0.05 1.25 q -0.2 -0.55 0 -1.1 z";
}
}
}
// draw all these stuff
strokes.append("path").attr("d", round(dash, 1));
hills.append("path").attr("d", round(hill[0], 1)).attr("stroke", "#5c5c70");
hills.append("path").attr("d", round(hShade[0], 1)).attr("fill", "white");
hills.append("path").attr("d", round(hill[1], 1)).attr("stroke", "#5c5c70");
hills.append("path").attr("d", round(hShade[1], 1)).attr("fill", "white").attr("stroke", "white");
swamps.append("path").attr("d", round(swamp, 1));
forests.append("path").attr("d", forest);
forests.append("path").attr("d", fLight).attr("fill", "white").attr("stroke", "none");
forests.append("path").attr("d", fShade).attr("fill", "#999999").attr("stroke", "none");
console.timeEnd('drawRelief');
}
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) {
var h = 0.6, line = "";
for (c = 0; c < 3; c++) {
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) {
var el = d3.select(this);
var x = d3.event.x;
var y = d3.event.y;
el.raise().classed("drag", true);
if (el.attr("x")) {
el.attr("x", x).attr("y", y + 0.8);
var matrix = el.attr("transform");
if (matrix) {
var angle = matrix.split('(')[1].split(')')[0].split(' ')[0];
var bbox = el.node().getBBox();
var 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(keepData) {
exitCustomization();
console.time("TOTAL");
applyMapSize();
randomizeOptions();
markFeatures();
drawOcean();
reGraph();
resolveDepressions();
flux();
drawRelief();
drawCoastline();
if (!keepData) {manorsAndRegions();} else {restoreRegions();}
cleanData();
console.timeEnd("TOTAL");
}
// Add support "click to add" button events
$("#customizeTab").click(function() {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);
}
group.append("text").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();
} else {
$(".pressed").removeClass('pressed');
$(this).attr("data-state", -1).addClass('pressed');
$("#burgAdd").addClass('pressed');
closeDialogs(".stable");
viewbox.style("cursor", "crosshair").on("click", addBurgOnClick);
}
});
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
const closest = cultureTree.find(x, y);
const culture = cultureTree.data().indexOf(closest) || 0;
const name = generateName(culture);
if (cells[index].height < 0.2) {
console.error("Cannot place burg in the water! Select a land cell");
return;
}
if (cells[index].manor !== undefined) {
console.error("There is already a burg in this cell. You have to select a free cell");
return;
}
var i = manors.length;
burgs.append("circle").attr("id", "manorIcon"+i).attr("r", .5).attr("stroke-width", .12)
.attr("cx", x).attr("cy", y).call(d3.drag().on("start", elementDrag));
var group = labels.select("#addedBurgs");
if (!group.size()) {
group = labels.append("g").attr("id", "addedBurgs")
.attr("fill", "#3e3e4b").attr("opacity", 1)
.attr("font-family", "Almendra SC").attr("data-font", "Almendra+SC")
.attr("font-size", 4).attr("data-size", 4);
}
group.append("text").attr("id", "manorLabel"+i).attr("x", x).attr("y", y).attr("dy", -0.7).text(name).on("click", editLabel);
invokeActiveZooming();
if (d3.event.shiftKey === false) {
$("#addBurg, #burgAdd").removeClass("pressed");
restoreDefaultEvents();
}
var region, state = +$("#addBurg").attr("data-state");
if (state !== -1) {
region = states[state].capital === "neutral" ? "neutral" : state;
var 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) {score *= 3;} // port-capital
var population = rn(score, 1);
manors.push({i, cell:index, x, y, region, culture, name, population});
recalculateStateData(state);
updateCountryEditors();
}
// add river on click
$("#addRiver").click(function() {
if ($(this).hasClass('pressed')) {
$(".pressed").removeClass('pressed');
unselect();
restoreDefaultEvents();
} else {
$(".pressed").removeClass('pressed');
unselect();
$(this).addClass('pressed');
closeDialogs(".stable");
viewbox.style("cursor", "crosshair").on("click", addRiverOnClick);
}
});
function addRiverOnClick() {
var point = d3.mouse(this);
var index = diagram.find(point[0], point[1]).index;
var cell = cells[index];
if (cell.river || cell.height < 0.2) {return;}
var 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;
var x = cell.data[0], y = cell.data[1];
dataRiver.push({x, y, cell:index});
var heights = [];
cell.neighbors.forEach(function(e) {heights.push(cells[e].height);});
var minId = heights.indexOf(d3.min(heights));
var min = cell.neighbors[minId];
var tx = cells[min].data[0], ty = cells[min].data[1];
if (cells[min].height < 0.2) {
var px = (x + tx) / 2;
var 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(precipitation / 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;
}
}
}
}
var 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);
}
}
// return cell / polly Index or error
function getIndex(point) {
const c = diagram.find(point[0], point[1]);
if (!c) {
console.error("Cannot find closest cell for points" + point[0] + ", " + point[1]);
return;
}
return index = c.index;
}
// re-calculate data for a particular state
function recalculateStateData(state) {
var s = states[state];
if (s.capital === "neutral") {state = "neutral";}
var ruralFactor = state === "neutral" ? 0.5 : 1;
var burgs = $.grep(manors, function(e) {return (e.region === state);});
s.burgs = burgs.length;
var burgsPop = 0; // get summ of all burgs population
burgs.map(function(b) {burgsPop += b.population;});
s.urbanPopulation = rn(burgsPop, 2);
var regionCells = $.grep(cells, function(e) {return (e.region === state);});
var cellsScore = 0, area = 0;
regionCells.map(function(c) {
cellsScore += Math.pow((1 - c.height), 3) * 10;
area += rn(Math.abs(d3.polygonArea(polygons[c.index])));
});
regionCells.map(function(c) {cellsScore += Math.pow((1 - c.height), 3) * 10;});
s.cells = regionCells.length;
s.area = area;
var graphSizeAdj = 90 / Math.sqrt(cells.length, 2);
s.ruralPopulation = rn(cellsScore * graphSizeAdj * ruralFactor, 2);
}
function editLabel() {
if (customization) {return;}
closeDialogs("#labelEditor, .stable");
elSelected = d3.select(this);
elSelected.call(d3.drag().on("drag", dragged).on("end", dragended)).classed("draggable", true);
var group = d3.select(this.parentNode);
updateGroupOptions();
editGroupSelect.value = group.attr("id");
editFontSelect.value = fonts.indexOf(group.attr("data-font"));
editSize.value = group.attr("data-size");
editColor.value = toHEX(group.attr("fill"));
editOpacity.value = group.attr("opacity");
editText.value = elSelected.text();
var matrix = elSelected.attr("transform");
var rotation = matrix ? matrix.split('(')[1].split(')')[0].split(' ')[0] : 0;
editAngle.value = rotation;
editAngleValue.innerHTML = rotation + "°";
$("#labelEditor").dialog({
title: "Edit Label: " + editText.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;
$("#editFontButton").click(fetchAdditionalFonts);
}
function changeSelectedStateOnClick() {
var point = d3.mouse(this);
var index = diagram.find(point[0], point[1]).index;
var assigned = regions.select("#temp").select("path[data-cell='"+index+"']");
if (assigned.size()) {var s = assigned.attr("data-state");} else {var s = cells[index].region;}
if (s === "neutral") {s = states.length - 1;}
let color = states[s].color;
if (color === "neutral") {color = "white"}
$(".selected").removeClass("selected");
$("#state"+s).addClass("selected");
icons.selectAll(".circle").attr("stroke", states[s].color);
}
// fetch default fonts if not done before
function fetchAdditionalFonts() {
if (fonts.length < 10) {
$("head").append('');
const artistic = ["Almendra+SC", "Amatic+SC:700", "IM+Fell+English", "Great+Vibes", "MedievalSharp", "Metamorphous",
"Nova+Script", "Uncial+Antiqua", "Underdog", "Caesar+Dressing", "Bitter", "Yellowtail", "Montez",
"Shadows+Into+Light", "Fredericka+the+Great", "Orbitron", "Dancing+Script:700",
"Architects+Daughter", "Kaushan+Script", "Gloria+Hallelujah", "Satisfy", "Comfortaa:700", "Cinzel"];
const webSafe = ["Georgia", "Times+New+Roman", "Comic+Sans+MS", "Lucida+Sans+Unicode", "Courier+New"];
fonts = artistic.concat(webSafe);
updateFontOptions();
}
}
$("#labelEditor .editButton, #labelEditor .editButtonS").click(function() {
var group = d3.select(elSelected.node().parentNode);
if (this.id == "editRemoveSingle") {
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();
$("#labelEditor").dialog("close");
},
Cancel: function() {$(this).dialog("close");}
}
})
return;
}
if (this.id == "editGroupRemove") {
var count = group.selectAll("text").size()
if (count < 2) {
group.remove();
$("#labelEditor").dialog("close");
return;
}
var message = "Are you sure you want to remove all labels (" + count + ") of that group?";
alertMessage.innerHTML = message;
$("#alert").dialog({resizable: false, title: "Remove labels",
buttons: {
Remove: function() {
$(this).dialog("close");
group.remove();
$("#labelEditor").dialog("close");
},
Cancel: function() {$(this).dialog("close");}
}
})
return;
}
if (this.id == "editCopy") {
var shift = +group.attr("font-size") + 1;
var xn = +elSelected.attr("x") - shift;
var yn = +elSelected.attr("y") - shift;
while (group.selectAll("text[x='" + xn + "']").size() > 0) {xn -= shift; yn -= shift;}
group.append("text").attr("x", xn).attr("y", yn).text(elSelected.text())
.attr("transform", elSelected.attr("transform")).on("click", editLabel);
return;
}
if (this.id == "editGroupNew") {
if ($("#editGroupInput").css("display") === "none") {
$("#editGroupInput").css("display", "inline-block");
$("#editGroupSelect").css("display", "none");
editGroupInput.focus();
} else {
$("#editGroupSelect").css("display", "inline-block");
$("#editGroupInput").css("display", "none");
}
return;
}
if (this.id == "editExternalFont") {
if ($("#editFontInput").css("display") === "none") {
$("#editFontInput").css("display", "inline-block");
$("#editFontSelect").css("display", "none");
editFontInput.focus();
} else {
$("#editFontSelect").css("display", "inline-block");
$("#editFontInput").css("display", "none");
}
return;
}
if (this.id == "editTextRandom") {
var name;
// check if label is country name
if (group.attr("id") === "countries") {
var state = $.grep(states, function(e) {return (e.name === editText.value);})[0];
name = generateStateName(state.i);
state.name = name;
} else {
// check if label is manor name
var manor = $.grep(manors, function(e) {return (e.name === editText.value);})[0];
if (manor) {
var culture = manor.culture;
name = generateName(culture);
manor.name = name;
} else {
// if not, get culture closest to BBox centre
var c = elSelected.node().getBBox();
var closest = cultureTree.find((c.x + c.width / 2), (c.y + c.height / 2));
var culture = cultureTree.data().indexOf(closest) || 0;
name = generateName(culture);
}
}
editText.value = name;
elSelected.text(name);
$("div[aria-describedby='labelEditor'] .ui-dialog-title").text("Edit Label: " + name);
return;
}
$("#labelEditor .editButton").toggle();
if (this.id == "editGroupButton") {
if ($("#editGroupInput").css("display") !== "none") {$("#editGroupSelect").css("display", "inline-block");}
if ($("#editGroupRemove").css("display") === "none") {
$("#editGroupRemove, #editGroupNew").css("display", "inline-block");
} else {
$("#editGroupInput, #editGroupRemove, #editGroupNew").css("display", "none");
}
}
if (this.id == "editFontButton") {$("#editSizeIcon, #editFontSelect, #editSize").toggle();}
if (this.id == "editStyleButton") {$("#editOpacityIcon, #editOpacity, #editShadowIcon, #editShadow").toggle();}
if (this.id == "editAngleButton") {$("#editAngleValue").toggle();}
if (this.id == "editTextButton") {$("#editTextRandom").toggle();}
$(this).show().next().toggle();
});
function updateGroupOptions() {
editGroupSelect.innerHTML = "";
labels.selectAll("g").each(function(d) {
var opt = document.createElement("option");
opt.value = opt.innerHTML = d3.select(this).attr("id");
editGroupSelect.add(opt);
});
}
// on editAngle change
$("#editAngle").change(function() {
var c = elSelected.node().getBBox();
var rotate = `rotate(${this.value} ${(c.x+c.width/2)} ${(c.y+c.height/2)})`;
elSelected.attr("transform", rotate);
});
// on editFontInput change. Use a direct link to any @font-face declaration or just font name to fetch from Google Fonts
$("#editFontInput").change(function() {
if (editFontInput.value !== "") {
var url = editFontInput.value;
if (url.indexOf("http") === -1) {
url = url.replace(url.charAt(0), url.charAt(0).toUpperCase()).split(" ").join("+");
url = "https://fonts.googleapis.com/css?family=" + url;
}
addFonts(url, "autoselect");
editFontInput.value = "";
editExternalFont.click();
}
});
function addFonts(url, autoselect) {
$('head').append('');
return fetch(url)
.then(resp => resp.text())
.then(text => {
let s = document.createElement('style');
s.innerHTML = text;
document.head.appendChild(s);
let styleSheet = Array.prototype.filter.call(
document.styleSheets,
sS => sS.ownerNode === s)[0];
let FontRule = rule => {
let family = rule.style.getPropertyValue('font-family');
let weight = rule.style.getPropertyValue('font-weight');
let font = family.replace(/['"]+/g, '').replace(/ /g, "+") + ":" + weight;
if (fonts.indexOf(font) == -1) {fonts.push(font);}
};
for (var r of styleSheet.cssRules) {FontRule(r);}
document.head.removeChild(s);
updateFontOptions();
// apply the last of added fonts
if (autoselect) {
const num = $("#editFontSelect option").length - 1;
$("#editFontSelect").prop("selectedIndex", num);
const group = d3.select(elSelected.node().parentNode);
const font = fonts[editFontSelect.value].split(':')[0].replace(/\+/g, " ");
group.attr("font-family", font).attr("data-font", fonts[editFontSelect.value]);
}
})
}
// on any Editor input change
$("#labelEditor .editTrigger").change(function() {
if (!elSelected) {return;}
$(this).attr("title", $(this).val());
elSelected.text(editText.value); // change Label text
// check if Group was changed
var group = d3.select(elSelected.node().parentNode);
var groupOld = group.attr("id");
var groupNew = editGroupSelect.value;
var id = elSelected.attr("id") || "";
// check if label is a country name
if (id.includes("regionLabel")) {
var state = +elSelected.attr("id").slice(11);
states[state].name = editText.value;
}
// check if label is a manor name
if (id.includes("manorLabel")) {
var manor = +elSelected.attr("id").slice(10);
manors[manor].name = editText.value;
}
if (editGroupInput.value !== "") {
groupNew = editGroupInput.value.toLowerCase().replace(/ /g, "_").replace(/[^\w\s]/gi, "");
if (Number.isFinite(+groupNew.charAt(0))) {groupNew = "g" + groupNew;}
}
if (groupOld !== groupNew) {
var removed = elSelected.remove();
if (labels.select("#"+groupNew).size() > 0) {
group = labels.select("#"+groupNew);
editFontSelect.value = fonts.indexOf(group.attr("data-font"));
editSize.value = group.attr("data-size");
editColor.value = toHEX(group.attr("fill"));
editOpacity.value = group.attr("opacity");
} else {
if (group.selectAll("text").size() === 0) {group.remove();}
group = labels.append("g").attr("id", groupNew);
updateGroupOptions();
$("#editGroupSelect, #editGroupInput").toggle();
editGroupInput.value = "";
}
group.append(function() {return removed.node();});
editGroupSelect.value = group.attr("id");
}
// update Group attributes
var size = +editSize.value;
var font = fonts[editFontSelect.value].split(':')[0].replace(/\+/g, " ");
group.attr("data-size", size)
.attr("font-size", rn((size + (size / scale)) / 2, 2))
.attr("font-family", font)
.attr("data-font", fonts[editFontSelect.value])
.attr("fill", editColor.title)
.attr("opacity", editOpacity.value);
});
// Update font list for Label Editor
function updateFontOptions() {
editFontSelect.innerHTML = "";
for (var i=0; i < fonts.length; i++) {
var opt = document.createElement('option');
opt.value = i;
var font = fonts[i].split(':')[0].replace(/\+/g, " ");
opt.style.fontFamily = opt.innerHTML = font;
editFontSelect.add(opt);
}
}
// convert RGB color string to HEX without #
function toHEX(rgb){
if (rgb.charAt(0) === "#") {return rgb;}
rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
return (rgb && rgb.length === 4) ? "#" +
("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
}
// get Curve Type
function getCurveType() {
type = curveType.value;
if (type === "Catmull–Rom") {lineGen.curve(d3.curveCatmullRom);}
if (type === "Linear") {lineGen.curve(d3.curveLinear);}
if (type === "Basis") {lineGen.curve(d3.curveBasisClosed);}
if (type === "Cardinal") {lineGen.curve(d3.curveCardinal);}
if (type === "Step") {lineGen.curve(d3.curveStep);}
}
// round value to d decimals
function rn(v, d) {
var d = d || 0;
var m = Math.pow(10, d);
return Math.round(v * m) / m;
}
// round string to d decimals
function round(s, d) {
var d = d || 1;
return s.replace(/[\d\.-][\d\.e-]*/g, function(n) {return rn(n, d);})
}
// corvent number to short string with SI postfix
function si(n) {
if (n >= 1e9) {return rn(n / 1e9, 1) + "B";}
if (n >= 1e8) {return rn(n / 1e6) + "M";}
if (n >= 1e6) {return rn(n / 1e6, 1) + "M";}
if (n >= 1e4) {return rn(n / 1e3) + "K";}
if (n >= 1e3) {return rn(n / 1e3, 1) + "K";}
return rn(n);
}
// getInteger number from user input data
function getInteger(value) {
var metric = value.slice(-1);
if (metric === "K") {return parseInt(value.slice(0, -1) * 1e3);}
if (metric === "M") {return parseInt(value.slice(0, -1) * 1e6);}
if (metric === "B") {return parseInt(value.slice(0, -1) * 1e9);}
return parseInt(value);
}
// downalod map as SVG or PNG file
function saveAsImage(type) {
console.time("saveAsImage");
// get all used fonts
var fontsInUse = []; // to store fonts currently in use
labels.selectAll("g").each(function(d) {
var font = d3.select(this).attr("data-font");
if (fontsInUse.indexOf(font) === -1) {fontsInUse.push(font);}
});
var fontsToLoad = "https://fonts.googleapis.com/css?family=" + fontsInUse.join("|");
// clone svg
var cloneEl = document.getElementsByTagName("svg")[0].cloneNode(true);
cloneEl.id = "clone";
document.getElementsByTagName("body")[0].appendChild(cloneEl);
var clone = d3.select("#clone");
if (type === "svg") {clone.select("#viewbox").attr("transform", null);}
// for each g element get inline style
var emptyG = clone.append("g").node();
var defaultStyles = window.getComputedStyle(emptyG);
clone.select("#labels").selectAll(".hidden").each(function(e) {
// show hidden labels but in reduced size
var size = d3.select(this).attr("font-size");
d3.select(this).classed("hidden", false).attr("font-size", rn(size * 0.4, 2));
});
clone.selectAll("g, #ruler > g > *, #scaleBar > text").each(function(d) {
var compStyle = window.getComputedStyle(this);
var style = "";
for (var i=0; i < compStyle.length; i++) {
var key = compStyle[i];
var value = compStyle.getPropertyValue(key);
// Firefox mask hack
if (key === "mask-image" && value !== defaultStyles.getPropertyValue(key)) {
style += "mask-image: url('#shape');";
continue;
}
if (key === "cursor") {continue;} // cursor should be default
if (value === defaultStyles.getPropertyValue(key)) {continue;}
style += key + ':' + value + ';';
}
if (style != "") {this.setAttribute('style', style);}
});
emptyG.remove();
// load fonts as dataURI so they will be available in downloaded svg/png
GFontToDataURI(fontsToLoad).then(cssRules => {
clone.select("defs").append("style").text(cssRules.join('\n'));
var svg_xml = (new XMLSerializer()).serializeToString(clone.node());
clone.remove();
var blob = new Blob([svg_xml], {type:'image/svg+xml;charset=utf-8'});
var url = window.URL.createObjectURL(blob);
var link = document.createElement("a");
link.target = "_blank";
if (type === "png") {
var ratio = svgHeight / svgWidth;
canvas.width = 3840; // ultraHD
canvas.height = rn(3840 * ratio);
var img = new Image();
img.src = url;
img.onload = function(){
window.URL.revokeObjectURL(url);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
link.download = "fantasy_map_" + Date.now() + ".png";
canvas.toBlob(function(blob) {
link.href = window.URL.createObjectURL(blob);
document.body.appendChild(link);
link.click();
window.setTimeout(function() {window.URL.revokeObjectURL(link.href);}, 5000);
});
canvas.style.opacity = 0;
canvas.width = svgWidth;
canvas.height = svgHeight;
}
} else {
link.download = "fantasy_map_" + Date.now() + ".svg";
link.href = url;
document.body.appendChild(link);
link.click();
}
console.timeEnd("saveAsImage");
window.setTimeout(function() {window.URL.revokeObjectURL(url);}, 5000);
});
}
// Code from Kaiido's answer:
// https://stackoverflow.com/questions/42402584/how-to-use-google-fonts-in-canvas-when-drawing-dom-objects-in-svg
function GFontToDataURI(url) {
"use strict;"
return fetch(url) // first fecth the embed stylesheet page
.then(resp => resp.text()) // we only need the text of it
.then(text => {
let s = document.createElement('style');
s.innerHTML = text;
document.head.appendChild(s);
let styleSheet = Array.prototype.filter.call(
document.styleSheets,
sS => sS.ownerNode === s)[0];
let FontRule = rule => {
let src = rule.style.getPropertyValue('src');
let family = rule.style.getPropertyValue('font-family');
let url = src.split('url(')[1].split(')')[0];
return {
rule: rule,
src: src,
url: url.substring(url.length - 1, 1)
};
};
let fontRules = [], fontProms = [];
for (var r of styleSheet.cssRules) {
let fR = FontRule(r)
fontRules.push(fR);
fontProms.push(
fetch(fR.url) // fetch the actual font-file (.woff)
.then(resp => resp.blob())
.then(blob => {
return new Promise(resolve => {
let f = new FileReader();
f.onload = e => resolve(f.result);
f.readAsDataURL(blob);
})
})
.then(dataURL => {
return fR.rule.cssText.replace(fR.url, dataURL);
})
)
}
document.head.removeChild(s); // clean up
return Promise.all(fontProms); // wait for all this has been done
});
}
// Save in .map format, based on FileSystem API
function saveMap() {
console.time("saveMap");
// data convention: 0 - version; 1 - all points; 2 - cells; 3 - manors; 4 - states; 5 - svg; 6 - options;
// size stats: points = 6%, cells = 36%, manors and states = 2%, svg = 56%;
svg.attr("width", graphWidth).attr("height", graphHeight);
const transform = viewbox.attr("transform");
viewbox.attr("transform", "");
const oceanBack = ocean.select("rect");
const oceanShift = [oceanBack.attr("x"), oceanBack.attr("y"), oceanBack.attr("width"), oceanBack.attr("height")];
oceanBack.attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%");
var svg_xml = (new XMLSerializer()).serializeToString(svg.node());
var line = "\r\n";
var data = version + line + JSON.stringify(points) + line + JSON.stringify(cells) + line;
data += JSON.stringify(manors) + line + JSON.stringify(states) + line + svg_xml + line + customization;
var dataBlob = new Blob([data], {type:"text/plain"});
var dataURL = window.URL.createObjectURL(dataBlob);
var link = document.createElement("a");
link.download = "fantasy_map_" + Date.now() + ".map";
link.href = dataURL;
document.body.appendChild(link);
allowResize = false;
link.click();
// restore initial values
svg.attr("width", svgWidth).attr("height", svgHeight);
viewbox.attr("transform", transform);
oceanBack.attr("x", oceanShift[0]).attr("y", oceanShift[1]).attr("width", oceanShift[2]).attr("height", oceanShift[3]);
console.timeEnd("saveMap");
window.setTimeout(function() {window.URL.revokeObjectURL(dataURL);}, 4000);
}
// Map Loader based on FileSystem API
$("#mapToLoad").change(function() {
console.time("loadMap");
closeDialogs();
var fileToLoad = this.files[0];
this.value = "";
uploadFile(fileToLoad);
});
function uploadFile(file, callback) {
console.time("loadMap");
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var dataLoaded = fileLoadedEvent.target.result;
var data = dataLoaded.split("\r\n");
// data convention: 0 - version; 1 - all points; 2 - cells; 3 - manors; 4 - states; 5 - svg; 6 - options;
var mapVersion = data[0];
if (mapVersion !== version) {
var message = `The Map version `;
// mapVersion reference was not added to downloaded map before v. 0.52b, so I cannot support really old files
if (mapVersion.length <= 10) {
message += `(${mapVersion})
does not match the Generator version (${version}). The map will be auto-updated.
In case of critical issues you may send the .map file
to me
or just keep using
an appropriate version
of the Generator`;
} else {
message += `you are trying to load is too old and cannot be updated.
Please re-create the map or just keep using
an archived version
of the Generator. Please note the Gennerator is still on demo and a lot of crusial changes are made every month`;
}
alertMessage.innerHTML = message;
$("#alert").dialog({title: "Map version conflict", buttons: {OK: function() {
$(this).dialog("close");
loadDataFromMap(data);
}}});
} else {loadDataFromMap(data);}
if (mapVersion.length > 10) {console.error("Cannot load map"); return;}
}
fileReader.readAsText(file, "UTF-8");
if (callback) {callback();}
}
function loadDataFromMap(data) {
// replace old svg
svg.remove();
if (data[0] === "0.52b" || data[0] === "0.53b") {
states = []; // no states data
document.body.insertAdjacentHTML("afterbegin", data[4]);
customization = 0;
} else {
states = JSON.parse(data[4]);
document.body.insertAdjacentHTML("afterbegin", data[5]);
customization = +data[6] || 0;
}
svg = d3.select("svg");
// check map size
const nWidth = +svg.attr("width"), nHeight = +svg.attr("height");
// temporary fit svg element to current canvas size
svg.attr("width", svgWidth).attr("height", svgHeight);
if (nWidth !== svgWidth || nHeight !== svgHeight) {
alertMessage.innerHTML = `The loaded map has size ${nWidth} x ${nHeight} pixels,
while the current canvas size is ${svgWidth} x ${svgHeight} pixels.
You may either fit the loaded map to the current window
or resize the canvas to ${nWidth} x ${nHeight} pixels`;
$("#alert").dialog({title: "Map size conflict",
buttons: {
"Fit": function() {
voronoi = d3.voronoi().extent([[0, 0], [nWidth, nHeight]]);
graphWidth = nWidth;
graphHeight = nHeight;
applyLoadedData(data);
// rescale loaded map
const xRatio = svgWidth / nWidth;
const yRatio = svgHeight / nHeight;
const scaleTo = rn(Math.min(xRatio, yRatio), 2);
// calculate frames to scretch ocean background
const extent = (100 / scaleTo) + "%";
const xShift = (nWidth * scaleTo - svgWidth) / 2 / scaleTo;
const yShift = (nHeight * scaleTo - svgHeight) / 2 / scaleTo;
ocean.selectAll("rect").attr("x", xShift).attr("y", yShift).attr("width", extent).attr("height", extent);
initView = [scaleTo, 0, 0];
zoom.translateExtent([[0, 0], [nWidth, nHeight]]).scaleExtent([scaleTo, 20]).scaleTo(svg, scaleTo);
$(this).dialog("close");
},
"Resize": function() {
mapWidthInput.value = graphWidth = nWidth;
mapHeightInput.value = graphHeight = nHeight;
changeMapSize();
applyLoadedData(data);
$(this).dialog("close");
}
}
});
} else {
applyLoadedData(data);
}
}
function applyLoadedData(data) {
// redefine variables
defs = svg.select("#deftemp");
viewbox = svg.select("#viewbox");
ocean = viewbox.select("#ocean");
oceanLayers = ocean.select("#oceanLayers");
oceanPattern = ocean.select("#oceanPattern");
landmass = viewbox.select("#landmass");
grid = viewbox.select("#grid");
overlay = viewbox.select("#overlay");
terrs = viewbox.select("#terrs");
cults = viewbox.select("#cults");
routes = viewbox.select("#routes");
roads = routes.select("#roads");
trails = routes.select("#trails");
rivers = viewbox.select("#rivers");
terrain = viewbox.select("#terrain");
regions = viewbox.select("#regions");
borders = viewbox.select("#borders");
stateBorders = borders.select("#stateBorders");
neutralBorders = borders.select("#neutralBorders");
coastline = viewbox.select("#coastline");
lakes = viewbox.select("#lakes");
searoutes = routes.select("#searoutes");
labels = viewbox.select("#labels");
icons = viewbox.select("#icons");
burgs = icons.select("#burgs");
debug = viewbox.select("#debug");
capitals = labels.select("#capitals");
towns = labels.select("#towns");
countries = labels.select("#countries");
ruler = viewbox.select("#ruler");
// restore events
svg.call(zoom);
restoreDefaultEvents();
viewbox.on("touchmove mousemove", moved);
overlay.selectAll("*").call(d3.drag().on("start", elementDrag));
labels.selectAll("text").on("click", editLabel);
burgs.selectAll("circle").call(d3.drag().on("start", elementDrag));
rivers.selectAll("path").on("click", editRiver);
routes.selectAll("path").on("click", editRoute);
svg.select("#scaleBar").call(d3.drag().on("start", elementDrag)).on("click", editScale);
ruler.selectAll("g").call(d3.drag().on("start", elementDrag));
ruler.selectAll("g").selectAll("text").on("click", removeParent);
ruler.selectAll(".opisometer").selectAll("circle").call(d3.drag().on("start", opisometerEdgeDrag));
ruler.selectAll(".linear").selectAll("circle:not(.center)").call(d3.drag().on("drag", rulerEdgeDrag));
ruler.selectAll(".linear").selectAll("circle.center").call(d3.drag().on("drag", rulerCenterDrag));
// update data
newPoints = [], riversData = [], queue = [], elSelected = "";
points = JSON.parse(data[1]);
cells = JSON.parse(data[2]);
land = $.grep(cells, function(e) {return (e.height >= 0.2);});
manors = JSON.parse(data[3]);
cells.map(function(e) {newPoints.push(e.data);});
calculateVoronoi(newPoints);
if (!customization) {
capitalsCount = +$("#regions > path:last").attr("class").slice(6) + 1;
regionsOutput.innerHTML = regionsInput.value = capitalsCount;
}
// restore layers state
if (cults.selectAll("path").size() == 0) {$("#toggleCultures").addClass("buttonoff");} else {$("#toggleCultures").removeClass("buttonoff");}
if (terrs.selectAll("path").size() == 0) {$("#toggleHeight").addClass("buttonoff");} else {$("#toggleHeight").removeClass("buttonoff");}
if (regions.attr("display") === "none") {$("#toggleCountries").addClass("buttonoff");} else {$("#toggleCountries").removeClass("buttonoff");}
if (rivers.attr("display") === "none") {$("#toggleRivers").addClass("buttonoff");} else {$("#toggleRivers").removeClass("buttonoff");}
if (oceanPattern.attr("display") === "none") {$("#toggleOcean").addClass("buttonoff");} else {$("#toggleOcean").removeClass("buttonoff");}
if (landmass.attr("display") === "none") {$("#landmass").addClass("buttonoff");} else {$("#landmass").removeClass("buttonoff");}
if (terrain.attr("display") === "none") {$("#toggleRelief").addClass("buttonoff");} else {$("#toggleRelief").removeClass("buttonoff");}
if (borders.attr("display") === "none") {$("#toggleBorders").addClass("buttonoff");} else {$("#toggleBorders").removeClass("buttonoff");}
if (burgs.attr("display") === "none") {$("#toggleIcons").addClass("buttonoff");} else {$("#toggleIcons").removeClass("buttonoff");}
if (labels.attr("display") === "none") {$("#toggleLabels").addClass("buttonoff");} else {$("#toggleLabels").removeClass("buttonoff");}
if (routes.attr("display") === "none") {$("#toggleRoutes").addClass("buttonoff");} else {$("#toggleRoutes").removeClass("buttonoff");}
if (grid.attr("display") === "none") {$("#toggleGrid").addClass("buttonoff");} else {$("#toggleGrid").removeClass("buttonoff");}
// update map to support some old versions and fetch fonts
labels.selectAll("g").each(function(d) {
var el = d3.select(this);
var font = el.attr("data-font");
if (fonts.indexOf(font) === -1) {addFonts("https://fonts.googleapis.com/css?family=" + font);}
if (!el.attr("data-size")) {el.attr("data-size", +el.attr("font-size"));}
if (el.style("display") === "none") {el.node().style.display = null;}
});
invokeActiveZooming();
console.timeEnd("loadMap");
}
// Poisson-disc sampling for a points
// Source: bl.ocks.org/mbostock/99049112373e12709381; Based on https://www.jasondavies.com/poisson-disc
function poissonDiscSampler(width, height, radius) {
var k = 5, // maximum number of points before rejection
radius2 = radius * radius,
R = 3 * radius2,
cellSize = radius * Math.SQRT1_2,
gridWidth = Math.ceil(width / cellSize),
gridHeight = Math.ceil(height / cellSize),
grid = new Array(gridWidth * gridHeight),
queue = [],
queueSize = 0,
sampleSize = 0;
return function() {
if (!sampleSize) return sample(Math.random() * width, Math.random() * height);
// Pick a random existing sample and remove it from the queue
while (queueSize) {
var i = Math.random() * queueSize | 0,
s = queue[i];
// Make a new candidate between [radius, 2 * radius] from the existing sample.
for (var j = 0; j < k; ++j) {
var a = 2 * Math.PI * Math.random(),
r = Math.sqrt(Math.random() * R + radius2),
x = s[0] + r * Math.cos(a),
y = s[1] + r * Math.sin(a);
// Reject candidates that are outside the allowed extent, or closer than 2 * radius to any existing sample
if (0 <= x && x < width && 0 <= y && y < height && far(x, y)) return sample(x, y);
}
queue[i] = queue[--queueSize];
queue.length = queueSize;
}
};
function far(x, y) {
var i = x / cellSize | 0,
j = y / cellSize | 0,
i0 = Math.max(i - 2, 0),
j0 = Math.max(j - 2, 0),
i1 = Math.min(i + 3, gridWidth),
j1 = Math.min(j + 3, gridHeight);
for (j = j0; j < j1; ++j) {
var o = j * gridWidth;
for (i = i0; i < i1; ++i) {
if (s = grid[o + i]) {
var s,
dx = s[0] - x,
dy = s[1] - y;
if (dx * dx + dy * dy < radius2) return false;
}
}
}
return true;
}
function sample(x, y) {
var s = [x, y];
queue.push(s);
grid[gridWidth * (y / cellSize | 0) + (x / cellSize | 0)] = s;
++sampleSize;
++queueSize;
return s;
}
}
// Hotkeys
d3.select("body").on("keydown", function() {
$("input").on("keydown", function(e) {e.stopPropagation();}); // cancel on input
switch(d3.event.keyCode) {
case 113: // "F2" for new map
$("#randomMap").click();
break;
case 32: // Space to log focused cell data
var point = d3.mouse(this);
const index = diagram.find(point[0], point[1]).index;
console.table(cells[index]);
break;
case 67: // "C" to log cells data
console.log(cells);
break;
case 77: // "B" to log burgs data
console.table(manors);
break;
case 83: // "S" to log states data
console.table(states);
break;
case 37: // Left to scroll map left
zoom.translateBy(svg, 10, 0);
break;
case 39: // Right to scroll map right
zoom.translateBy(svg, -10, 0);
break;
case 38: // Up to scroll map up
zoom.translateBy(svg, 0, 10);
break;
case 40: // Down to scroll map down
zoom.translateBy(svg, 0, -10);
break;
case 107: // Plus to zoom map up
zoom.scaleBy(svg, 1.2);
invokeActiveZooming();
break;
case 109: // Minus to zoom map out
zoom.scaleBy(svg, 0.8);
invokeActiveZooming();
break;
case 9: // Tab to toggle full-screen mode
$("#updateFullscreen").click();
break;
}
});
// Toggle Options pane
$("#optionsTrigger").on("click", function() {
if ($("#options").css("display") === "none") {
$("#regenerate").hide();
$("#options").fadeIn();
$("#layoutTab").click();
this.innerHTML = "◀";
} else {
$("#options").fadeOut();
this.innerHTML = "▶";
}
});
$("#collapsible").hover(function() {
if ($("#options").css("display") === "none") {$("#regenerate").show();}
}, function() {
$("#regenerate").hide();
});
// move layers on mapLayers dragging (jquery sortable)
function moveLayer(event, ui) {
var el = getLayer(ui.item.attr("id"));
if (el) {
var prev = getLayer(ui.item.prev().attr("id"));
var next = getLayer(ui.item.next().attr("id"));
if (prev) {el.insertAfter(prev);} else if (next) {el.insertBefore(next);}
}
}
// define connection between option layer buttons and actual svg groups
function getLayer(id) {
if (id === "toggleGrid") {return $("#grid");}
if (id === "toggleOverlay") {return $("#overlay");}
if (id === "toggleHeight") {return $("#terrs");}
if (id === "toggleCultures") {return $("#cults");}
if (id === "toggleRoutes") {return $("#routes");}
if (id === "toggleRivers") {return $("#rivers");}
if (id === "toggleCountries") {return $("#regions");}
if (id === "toggleBorders") {return $("#borders");}
if (id === "toggleRelief") {return $("#terrain");}
if (id === "toggleLabels") {return $("#labels");}
if (id === "toggleIcons") {return $("#icons");}
}
// UI Button handlers
$("button, a, li").on("click", function() {
var id = this.id;
var parent = this.parentNode.id;
if (icons.selectAll(".tag").size() > 0) {icons.selectAll(".tag, .line").remove();}
if (id === "toggleHeight") {toggleHeight();}
if (id === "toggleCountries") {
var countries = !$("#toggleCountries").hasClass("buttonoff");
var cultures = !$("#toggleCultures").hasClass("buttonoff");
if (!countries && cultures) {
$("#toggleCultures").toggleClass("buttonoff");
toggleCultures();
}
$('#regions').fadeToggle();
return;
}
if (id === "toggleCultures") {
var countries = !$("#toggleCountries").hasClass("buttonoff");
var cultures = !$("#toggleCultures").hasClass("buttonoff");
if (!cultures && countries) {
$("#toggleCountries").toggleClass("buttonoff");
$('#regions').fadeToggle();
}
toggleCultures();
return;
}
if (id === "toggleOverlay") {toggleOverlay();}
if (id === "toggleFlux") {toggleFlux();}
if (parent === "mapLayers" || parent === "styleContent") {$(this).toggleClass("buttonoff");}
if (id === "randomMap" || id === "regenerate") {
exitCustomization();
undraw();
resetZoom(1000);
generate();
return;
}
if (id === "editCountries") {editCountries();}
if (id === "editScale" || id === "editScaleCountries" || id === "editScaleBurgs") {editScale();}
if (id === "countriesManually") {
customization = 2;
mockRegions();
let temp = regions.append("g").attr("id", "temp");
$("#countriesBottom").children().hide();
$("#countriesManuallyButtons").show();
// highlight capital cells as it's not allowed to change capital's state that way
states.map(function(s) {
if (s.color === "neutral") {return;}
const capital = s.capital;
const index = manors[capital].cell;
temp.append("path")
.attr("data-cell", index).attr("data-state", s.i)
.attr("d", "M" + polygons[index].join("L") + "Z")
.attr("fill", s.color).attr("stroke", "red").attr("stroke-width", .7);
});
viewbox.style("cursor", "crosshair").call(drag).on("click", changeSelectedStateOnClick);
}
if (id === "countriesRegenerate") {
customization = 3;
mockRegions();
regions.append("g").attr("id", "temp");
$("#countriesBottom").children().hide();
$("#countriesRegenerateButtons").show();
$(".statePower, .icon-resize-full, .stateCells, .icon-check-empty").toggleClass("hidden");
$("div[data-sortby='expansion'], div[data-sortby='cells']").toggleClass("hidden");
}
if (id === "countriesManuallyComplete") {
icons.selectAll(".circle").remove();
var changedCells = regions.select("#temp").selectAll("path");
var changedStates = [];
changedCells.each(function() {
var el = d3.select(this);
var cell = +el.attr("data-cell");
var stateOld = cells[cell].region;
if (stateOld === "neutral") {stateOld = states.length - 1;}
var stateNew = +el.attr("data-state");
const region = states[stateNew].color === "neutral" ? "neutral" : stateNew;
cells[cell].region = region;
if (cells[cell].manor !== undefined) {manors[cells[cell].manor].region = region;}
changedStates.push(stateNew, stateOld);
});
changedStates = [...new Set(changedStates)];
changedStates.map(function(s) {recalculateStateData(s);});
var last = states.length - 1;
if (states[last].capital === "neutral" && states[last].cells === 0) {
$("#state" + last).remove();
states.splice(-1);
}
$("#countriesManuallyCancel").click();
if (changedStates.length) {editCountries();}
}
if (id === "countriesManuallyCancel") {
redrawRegions();
icons.selectAll(".circle").remove();
if (grid.style("display") === "inline") {toggleGrid.click();}
if (labels.style("display") === "none") {toggleLabels.click();}
$("#countriesBottom").children().show();
$("#countriesManuallyButtons, #countriesRegenerateButtons").hide();
$(".selected").removeClass("selected");
$("div[data-sortby='expansion'], .statePower, .icon-resize-full").addClass("hidden");
$("div[data-sortby='cells'], .stateCells, .icon-check-empty").removeClass("hidden");
customization = 0;
restoreDefaultEvents();
}
if (id === "countriesApply") {$("#countriesManuallyCancel").click();}
if (id === "countriesRandomize") {
var mod = +powerInput.value * 2;
$(".statePower").each(function(e, i) {
var state = +(this.parentNode.id).slice(5);
if (states[state].capital === "neutral") {return;}
var power = rn(Math.random() * mod / 2 + 1, 1);
$(this).val(power);
$(this).parent().attr("data-expansion", power);
states[state].power = power;
});
regenerateCountries();
}
if (id === "countriesAddM" || id === "countriesAddR" || id === "countriesAddG") {
var i = states.length;
// move neutrals to the last line
if (states[i-1].capital === "neutral") {states[i-1].i = i; i -= 1;}
var name = generateStateName(0);
var color = colors20(i);
states.push({i, color, name, capital: "select", cells: 0, burgs: 0, urbanPopulation: 0, ruralPopulation: 0, area: 0, power: 1});
states.sort(function(a, b){return a.i - b.i});
editCountries();
}
if (id === "countriesPercentage") {
var el = $("#countriesEditor");
if (el.attr("data-type") === "absolute") {
el.attr("data-type", "percentage");
var totalCells = land.length;
var totalBurgs = +countriesFooterBurgs.innerHTML;
var totalArea = countriesFooterArea.innerHTML;
totalArea = getInteger(totalArea.split(" ")[0]);
var totalPopulation = getInteger(countriesFooterPopulation.innerHTML);
$("#countriesBody > .states").each(function() {
var cells = rn($(this).attr("data-cells") / totalCells * 100);
var burgs = rn($(this).attr("data-burgs") / totalBurgs * 100);
var area = rn($(this).attr("data-area") / totalArea * 100);
var population = rn($(this).attr("data-population") / totalPopulation * 100);
$(this).children().filter(".stateCells").text(cells + "%");
$(this).children().filter(".stateBurgs").text(burgs + "%");
$(this).children().filter(".stateArea").text(area + "%");
$(this).children().filter(".statePopulation").val(population + "%");
});
} else {
el.attr("data-type", "absolute");
editCountries();
}
}
if (id === "countriesExport") {
if ($(".statePower").length === 0) {return;}
var unit = areaUnit.value === "square" ? distanceUnit.value + "2" : areaUnit.value;
var data = "Country,Capital,Cells,Burgs,Area ("+ unit +"),Population\n"; // countries headers
$("#countriesBody > .states").each(function() {
var country = $(this).attr("data-country");
if (country === "bottom") {data += "neutral,"} else {data += country + ",";}
var capital = $(this).attr("data-capital");
if (capital === "bottom" || capital === "select") {data += ","} else {data += capital + ",";}
data += $(this).attr("data-cells") + ",";
data += $(this).attr("data-burgs") + ",";
data += $(this).attr("data-area") + ",";
var population = +$(this).attr("data-population");
data += population + "\n";
});
data += "\nBurg,Country,Culture,Population\n"; // burgs headers
manors.map(function(m) {
if (m.region === "removed") {return;} // skip removed burgs
data += m.name + ",";
var country = m.region === "neutral" ? "neutral" : states[m.region].name;
data += country + ",";
data += window.cultures[m.culture] + ",";
var population = m.population * urbanization.value * populationRate.value * 1000;
data += population + "\n";
});
var dataBlob = new Blob([data], {type:"text/plain"});
var url = window.URL.createObjectURL(dataBlob);
var link = document.createElement("a");
link.download = "countries_data" + Date.now() + ".csv";
link.href = url;
link.click();
}
if (id === "burgNamesImport") {burgsListToLoad.click();}
if (id === "removeCountries") {
alertMessage.innerHTML = `Are you sure you want to remove all countries?`;
$("#alert").dialog({resizable: false, title: "Remove countries",
buttons: {
Cancel: function() {$(this).dialog("close");},
Remove: function() {
$(this).dialog("close");
$("#countriesBody").empty();
manors.map(function(m) {m.region = "neutral";});
land.map(function(l) {l.region = "neutral";});
states.map(function(s) {
var c = +s.capital;
if (isNaN(c)) {return;}
$("#manorLabel"+c).detach().appendTo($("#towns")).attr("dy", -0.7);
$("#manorIcon"+c).attr("r", .5).attr("stroke-width", .12);
});
labels.select("#countries").selectAll("text").remove();
regions.selectAll("path").remove();
states = [];
states.push({i: 0, color: "neutral", capital: "neutral", name: "Neutrals"});
recalculateStateData(0);
if ($("#burgsEditor").is(":visible")) {$("#burgsEditor").dialog("close");}
editCountries();
}
}
})
}
if (id === "removeBurgs") {
alertMessage.innerHTML = `Are you sure you want to remove all burgs associated with the country?`;
$("#alert").dialog({resizable: false, title: "Remove associated burgs",
buttons: {
Cancel: function() {$(this).dialog("close");},
Remove: function() {
$(this).dialog("close");
var state = +$("#burgsEditor").attr("data-state");
var region = states[state].capital === "neutral" ? "neutral" : state;
$("#burgsBody").empty();
manors.map(function(m) {
if (m.region !== region) {return;}
m.region = "removed";
cells[m.cell].manor = undefined;
labels.select("#manorLabel"+m.i).remove();
icons.select("#manorIcon"+m.i).remove();
});
states[state].urbanPopulation = 0;
states[state].burgs = 0;
states[state].capital = "select";
if ($("#countriesEditor").is(":visible")) {
editCountries();
$("#burgsEditor").dialog("moveToTop");
}
burgsFooterBurgs.innerHTML = 0;
burgsFooterPopulation.value = 0;
}
}
});
}
if (id === "changeCapital") {
if ($(this).hasClass("pressed")) {
$(this).removeClass("pressed")
} else {
$(".pressed").removeClass("pressed");
$(this).addClass("pressed");
}
}
if (id === "regenerateBurgNames") {
var s = +$("#burgsEditor").attr("data-state");
$(".burgName").each(function(e, i) {
var b = +(this.parentNode.id).slice(5);
var name = generateName(manors[b].culture);
$(this).val(name);
$(this).parent().attr("data-burg", name);
manors[b].name = name;
labels.select("#manorLabel"+b).text(name);
});
if ($("#countriesEditor").is(":visible")) {
if (states[s].capital === "neutral") {return;}
var c = states[s].capital;
$("#state"+s).attr("data-capital", manors[c].name);
$("#state"+s+" > .stateCapital").val(manors[c].name);
}
}
if (id === "burgAdd") {
var state = +$("#burgsEditor").attr("data-state");
clickToAdd(); // to load on click event function
$("#addBurg").click().attr("data-state", state);
}
if (id === "toggleScaleBar") {$("#scaleBar").toggleClass("hidden");}
if (id === "addRuler") {
$("#ruler").show();
var title =
`Ruler is an instrument for measuring thelinear lengths.
One dash shows 30 km (18.6 mi), approximate distance of a daily loaded march.
Drag edge circles to move the ruler, center circle to split the ruler into 2 parts.
Click on the ruler label to remove the ruler from the map`;
var rulerNew = ruler.append("g").attr("class", "linear").call(d3.drag().on("start", elementDrag));
var factor = rn(1 / Math.pow(scale, 0.3), 1);
rulerNew.append("title").text(title);
var y = Math.floor(Math.random() * svgHeight * 0.5 + svgHeight * 0.25);
var x1 = svgWidth * 0.2, x2 = svgWidth * 0.8;
var dash = rn(30 / distanceScale.value, 2);
rulerNew.append("line").attr("x1", x1).attr("y1", y).attr("x2", x2).attr("y2", y).attr("class", "white").attr("stroke-width", factor);
rulerNew.append("line").attr("x1", x1).attr("y1", y).attr("x2", x2).attr("y2", y).attr("class", "gray").attr("stroke-width", factor).attr("stroke-dasharray", dash);
rulerNew.append("circle").attr("r", 2 * factor).attr("stroke-width", 0.5 * factor).attr("cx", x1).attr("cy", y).attr("data-edge", "left").call(d3.drag().on("drag", rulerEdgeDrag));
rulerNew.append("circle").attr("r", 2 * factor).attr("stroke-width", 0.5 * factor).attr("cx", x2).attr("cy", y).attr("data-edge", "rigth").call(d3.drag().on("drag", rulerEdgeDrag));
rulerNew.append("circle").attr("r", 1.2 * factor).attr("stroke-width", 0.3 * factor).attr("cx", svgWidth / 2).attr("cy", y).attr("class", "center").call(d3.drag().on("start", rulerCenterDrag));
var dist = rn(x2 - x1);
var label = rn(dist * distanceScale.value) + " " + distanceUnit.value;
rulerNew.append("text").attr("x", svgWidth / 2).attr("y", y).attr("dy", -1).attr("data-dist", dist).text(label).text(label).on("click", removeParent).attr("font-size", 10 * factor);
return;
}
if (id === "addOpisometer" || id === "addPlanimeter") {
if ($(this).hasClass("pressed")) {
restoreDefaultEvents();
$(this).removeClass("pressed");
} else {
$(this).addClass("pressed");
viewbox.style("cursor", "crosshair").call(drag);
}
return;
}
if (id === "removeAllRulers") {
if ($("#ruler > g").length < 1) {return;}
alertMessage.innerHTML = `Are you sure you want to remove all placed rulers?`;
$("#alert").dialog({resizable: false, title: "Remove all rulers",
buttons: {
Remove: function() {
$(this).dialog("close");
$("#ruler > g").remove();
},
Cancel: function() {$(this).dialog("close");}
}
});
return;
}
if (id === "editHeightmap") {$("#customizeHeightmap").slideToggle();}
if (id === "fromScratch") {
alertMessage.innerHTML = "Are you sure you want to clear the map? All progress will be lost";
$("#alert").dialog({resizable: false, title: "Clear map",
buttons: {
Cancel: function() {$(this).dialog("close");},
Clear: function() {
closeDialogs();
undraw();
placePoints();
calculateVoronoi(points);
detectNeighbors("grid");
drawScaleBar();
customizeHeightmap();
openBrushesPanel();
$(this).dialog("close");
}
}
});
}
if (id === "fromHeightmap") {
let message = "It's highly recommended to finalize a heightmap as a first step. ";
message += "If you want to edit a map, it's better to clean up all the data except on heights. ";
message += "You may also keep the data, but it can cause unexpected errors";
alertMessage.innerHTML = message;
$("#alert").dialog({resizable: false, title: "Edit Heightmap",
buttons: {
"Clean up": function() {
editHeightmap("clean");
$(this).dialog("close");
},
Keep: function() {
editHeightmap("keep");
$(this).dialog("close");
},
Cancel: function() {$(this).dialog("close");}
}
});
return;
}
// heightmap customization buttons
if (customization === 1) {
if (id === "paintBrushes") {openBrushesPanel();}
if (id === "rescaleExecute") {
var subject = rescaleLower.value + "-" + rescaleHigher.value;
var sign = conditionSign.value;
var modifier = rescaleModifier.value;
if (sign === "×") {modifyHeights(subject, 0, +modifier);}
if (sign === "÷") {modifyHeights(subject, 0, (1 / modifier));}
if (sign === "+") {modifyHeights(subject, +modifier, 1);}
if (sign === "-") {modifyHeights(subject, (-1 * modifier), 1);}
if (sign === "^") {modifyHeights(subject, 0, "^" + modifier);}
updateHeightmap();
updateHistory();
}
if (id === "rescaleButton") {
$("#modifyButtons").children().not("#rescaleButton, .condition").toggle();
}
if (id === "rescaleCondButton") {$("#modifyButtons").children().not("#rescaleCondButton, #rescaler").toggle();}
if (id === "undo" || id === "templateUndo") {restoreHistory(historyStage - 1);}
if (id === "redo" || id === "templateRedo") {restoreHistory(historyStage + 1);}
if (id === "smoothHeights") {
smoothHeights(4);
updateHeightmap();
updateHistory();
}
if (id === "disruptHeights") {
disruptHeights();
updateHeightmap();
updateHistory();
}
if (id === "getMap") {
if (states.length && manors.length) {getMap("keep");} else {getMap();}
}
if (id === "applyTemplate") {
if ($("#templateEditor").is(":visible")) {return;}
$("#templateEditor").dialog({
title: "Template Editor",
minHeight: "auto", width: "auto", resizable: false,
position: {my: "right top", at: "right-10 top+10", of: "svg"}
});
}
if (id === "convertImage") {convertImage();}
if (id === "convertImageGrid") {$("#grid").fadeToggle();}
if (id === "convertImageHeights") {$("#landmass").fadeToggle();}
if (id === "perspectiveView") {
// Inputs control
if ($("#perspectivePanel").is(":visible")) {return;}
const line = +$("#lineHandle0").attr("data-value");
const grad = +$("#lineHandle1").attr("data-value");
$("#lineSlider").slider({
min: 10, max: 320, step: 1, values: [line, grad],
create: function() {
$("#lineHandle0").text("x:"+line);
$("#lineHandle1").text("y:"+grad);
},
slide: function(event, ui) {
$("#lineHandle0").text("x:"+ui.values[0]).attr("data-value", ui.values[0]);
$("#lineHandle1").text("y:"+ui.values[1]).attr("data-value", ui.values[1]);
drawPerspective();
}
});
$("#ySlider").slider({
min: 1, max: 5, step: 0.1, value: +$("#yHandle").attr("data-value"),
create: function() {$("#yHandle").text($("#yHandle").attr("data-value"));},
slide: function(event, ui) {
$("#yHandle").text(ui.value).attr("data-value", ui.value);
drawPerspective();
}
});
$("#scaleSlider").slider({
min: 0.5, max: 2, step: 0.1, value: +$("#scaleHandle").attr("data-value"),
create: function() {$("#scaleHandle").text($("#scaleHandle").attr("data-value"));},
slide: function(event, ui) {
$("#scaleHandle").text(ui.value).attr("data-value", ui.value);
drawPerspective();
}
});
$("#heightSlider").slider({
min: 1, max: 50, step: 1, value: +$("#heightHandle").attr("data-value"),
create: function() {$("#heightHandle").text($("#heightHandle").attr("data-value"));},
slide: function(event, ui) {
$("#heightHandle").text(ui.value).attr("data-value", ui.value);
drawPerspective();
}
});
$("#perspectivePanel").dialog({
title: "Perspective View",
width: 520, height: 360,
position: {my: "center center", at: "center center", of: "svg"}
});
drawPerspective();
return;
}
}
if (id === "restoreStyle") {
alertMessage.innerHTML = "Are you sure you want to restore default style?";
$("#alert").dialog({resizable: false, title: "Restore style",
buttons: {
Restore: function() {
applyDefaultStyle();
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
}
if (parent === "mapFilters") {
$("svg").attr("filter", "");
if ($(this).hasClass('pressed')) {
$("#mapFilters .pressed").removeClass('pressed');
} else {
$("#mapFilters .pressed").removeClass('pressed');
$(this).addClass('pressed');
$("svg").attr("filter", "url(#filter-" + id + ")");
}
return;
}
if (id === "updateFullscreen") {
mapWidthInput.value = window.innerWidth;
mapHeightInput.value = window.innerHeight;
changeMapSize();
}
if (id === "saveButton") {$("#saveDropdown").slideToggle();}
if (id === "loadMap") {mapToLoad.click();}
if (id === "zoomReset") {resetZoom(1000);}
if (id === "zoomPlus") {
scale += 1;
if (scale > 40) {scale = 40;}
invokeActiveZooming();
}
if (id === "zoomMinus") {
scale -= 1;
if (scale <= 1) {scale = 1; viewX = 0; viewY = 0;}
invokeActiveZooming();
}
if (id === "styleFontPlus" || id === "styleFontMinus") {
var el = viewbox.select("#"+styleElementSelect.value);
var mod = id === "styleFontPlus" ? 1.1 : 0.9;
el.selectAll("g").each(function() {
var el = d3.select(this);
var size = rn(el.attr("data-size") * mod, 2);
if (size < 2) {size = 2;}
el.attr("data-size", size).attr("font-size", rn((size + (size / scale)) / 2, 2));
});
invokeActiveZooming();
return;
}
if (id === "styleFillPlus" || id === "styleFillMinus") {
var el = viewbox.select("#"+styleElementSelect.value);
var mod = id === "styleFillPlus" ? 1.1 : 0.9;
el.selectAll("*").each(function() {
var el = d3.select(this);
var size = rn(el.attr("r") * mod, 2);
if (size < 0.1) {size = 0.1;}
if (el.node().nodeName === "circle") {el.attr("r", size);}
});
return;
}
if (id === "styleStrokePlus" || id === "styleStrokeMinus") {
var el = viewbox.select("#"+styleElementSelect.value);
var mod = id === "styleStrokePlus" ? 1.1 : 0.9;
el.selectAll("*").each(function() {
var el = d3.select(this);
var size = rn(el.attr("stroke-width") * mod, 2);
if (size < 0.1) {size = 0.1;}
if (el.node().nodeName === "circle") {el.attr("stroke-width", size);}
});
return;
}
if (id === "brushClear") {
if (customization === 1) {
var message = "Are you sure you want to clear the map?";
alertMessage.innerHTML = message;
$("#alert").dialog({resizable: false, title: "Clear map",
buttons: {
Clear: function() {
$(this).dialog("close");
viewbox.style("cursor", "crosshair").call(drag);
landmassCounter.innerHTML = "0";
$("#landmass").empty();
cells.map(function(i) {i.height = 0;});
// clear history
history = [];
historyStage = 0;
updateHistory();
redo.disabled = templateRedo.disabled = true;
undo.disabled = templateUndo.disabled = true;
},
Cancel: function() {$(this).dialog("close");}
}
});
} else {
start.click();
}
}
if (id === "templateComplete") {
if (customization === 1 && !$("#getMap").attr("disabled")) {getMap();}
}
if (id === "convertColorsMinus") {
var current = +convertColors.value - 1;
if (current < 4) {current = 3;}
convertColors.value = current;
heightsFromImage(current);
}
if (id === "convertColorsPlus") {
var current = +convertColors.value + 1;
if (current > 255) {current = 256;}
convertColors.value = current;
heightsFromImage(current);
}
if (id === "convertOverlayButton") {
$("#convertImageButtons").children().not(this).not("#convertColors").toggle();
}
if (id === "convertAutoLum") {autoAssing("lum");}
if (id === "convertAutoHue") {autoAssing("hue");}
if (id === "convertComplete") {completeConvertion();}
});
// support save options
$("#saveDropdown > div").click(function() {
var id = this.id;
var dns_allow_popup_message = localStorage.getItem("dns_allow_popup_message");
if (!dns_allow_popup_message) {
var message = "Generator uses pop-up window to download files. ";
message += "Please ensure your browser does not block popups. ";
message += "Please check browser settings and turn off adBlocker if it is enabled";
alertMessage.innerHTML = message;
$("#alert").dialog({title: "File saver. Please enable popups!",
buttons: {
"Don't show again": function() {
localStorage.setItem("dns_allow_popup_message", true);
$(this).dialog("close");
},
Close: function() {$(this).dialog("close");}
},
position: {my: "center", at: "center", of: "svg"}
});
}
if (id === "saveMap") {saveMap();}
if (id === "saveSVG") {saveAsImage("svg");}
if (id === "savePNG") {saveAsImage("png");}
$("#saveDropdown").slideUp("fast");
});
function editHeightmap(type) {
closeDialogs();
var heights = [], regionData = [], cultureData = [];
for (var i = 0; i < points.length; i++) {
var cell = diagram.find(points[i][0], points[i][1]).index;
heights.push(cells[cell].height);
var region = cells[cell].region;
if (region === undefined) {region = -1;}
regionData.push(region);
var culture = cells[cell].culture;
if (culture === undefined) {culture = -1;}
cultureData.push(culture);
}
if (type === "clean") {undraw();}
calculateVoronoi(points);
detectNeighbors("grid");
drawScaleBar();
for (var i = 0; i < points.length; i++) {
cells[i].height = heights[i];
}
if (type === "keep") {
svg.selectAll("#shape, #lakes, #coastline, #terrain, #rivers, #grid, #terrs, #landmass, #ocean, #regions")
.selectAll("path, circle, line").remove();
for (var i = 0; i < points.length; i++) {
if (regionData[i] !== -1) {cells[i].region = regionData[i];}
if (cultureData[i] !== -1) {cells[i].culture = cultureData[i];}
}
}
mockHeightmap();
customizeHeightmap();
openBrushesPanel();
}
function openBrushesPanel() {
if ($("#brushesPanel").is(":visible")) {return;}
$("#brushesPanel").dialog({
title: "Paint Brushes",
minHeight: 40, width: "auto", maxWidth: 200, resizable: false,
position: {my: "right top", at: "right-10 top+10", of: "svg"}
}).on('dialogclose', function() {
restoreDefaultEvents();
$("#brushesButtons > .pressed").removeClass('pressed');
});
if (modules.openBrushesPanel) {return;}
modules.openBrushesPanel = true;
$("#brushesButtons > button").on("click", function() {
const rSlider = $("#brushRadiusLabel, #brushRadius");
if ($(this).hasClass('pressed')) {
$(this).removeClass('pressed');
restoreDefaultEvents();
icons.selectAll(".circle").remove();
rSlider.attr("disabled", true).addClass("disabled");
} else {
$("#brushesButtons > .pressed").removeClass('pressed');
$(this).addClass('pressed');
viewbox.style("cursor", "crosshair");
if (this.id !== "brushRange" && this.id !== "brushTrough") {viewbox.call(drag);} // on drag brushes
else {viewbox.on("click", placeLinearFeature);} // on click brushes
if ($(this).hasClass("feature")) {rSlider.attr("disabled", true).addClass("disabled");}
else {rSlider.attr("disabled", false).removeClass("disabled");}
}
});
}
function drawPerspective() {
console.time("drawPerspective");
const width = 320, height = 180;
const wRatio = graphWidth / width, hRatio = graphHeight / height;
const lineCount = +$("#lineHandle0").attr("data-value");
const lineGranularity = +$("#lineHandle1").attr("data-value");
const perspective = document.getElementById("perspective");
const pContext = perspective.getContext("2d");
const lines = [];
let i = Math.floor(lineCount);
while (i--) {
const x = i / lineCount * width | 0;
const canvasPoints = [];
lines.push(canvasPoints);
let j = Math.floor(lineGranularity);
while (j--) {
const y = j / lineGranularity * height | 0;
let h = getHeightInPoint(x * wRatio, y * hRatio) - 0.2;
if (h < 0) {h = 0;}
canvasPoints.push([x, y, h]);
}
}
pContext.clearRect(0, 0, perspective.width, perspective.height);
for (let canvasPoints of lines) {
for (let i = 0; i < canvasPoints.length - 1; i++) {
const pt1 = canvasPoints[i];
const pt2 = canvasPoints[i + 1];
const avHeight = (pt1[2] + pt2[2]) / 2;
pContext.beginPath();
pContext.moveTo(...transformPt(pt1));
pContext.lineTo(...transformPt(pt2));
let clr = "rgb(81, 103, 169)"; // water
if (avHeight !== 0) {clr = color(1 - avHeight - 0.2);}
pContext.strokeStyle = clr;
pContext.stroke();
}
}
console.timeEnd("drawPerspective");
}
// get Height value in point for Perspective view
function getHeightInPoint(x, y) {
const index = diagram.find(x, y).index;
return cells[index].height;
}
function transformPt(pt) {
const width = 320;
const maxHeight = +$("#heightHandle").attr("data-value");
var [x, y] = projectIsometric(pt[0], pt[1]);
return [x + width / 2 + 10, y + 10 - pt[2] * maxHeight];
}
function projectIsometric(x, y) {
const scale = $("#scaleHandle").attr("data-value");
const yProj = $("#yHandle").attr("data-value");
return [(x - y) * scale, (x + y) / yProj * scale];
}
// templateEditor Button handlers
$("#templateTools > button").on("click", function() {
var id = this.id;
id = id.replace("template", "");
if (id === "Mountain") {
var steps = $("#templateBody > div").length;
if (steps > 0) {return;}
}
$("#templateBody").attr("data-changed", 1);
$("#templateBody").append('
' + id + '
');
var el = $("#templateBody div:last-child");
if (id === "Hill" || id === "Pit" || id === "Range" || id === "Trough") {
var count = '';
}
if (id === "Hill") {
var dist = '';
}
if (id === "Add" || id === "Multiply") {
var dist = '';
}
if (id === "Add") {
var count = '';
}
if (id === "Multiply") {
var count = '';
}
if (id === "Smooth") {
var count = '';
}
if (id === "Strait") {
var count = '';
}
el.append('');
$("#templateBody .icon-trash-empty").on("click", function() {$(this).parent().remove();});
if (dist) {el.append(dist);}
if (count) {el.append(count);}
el.find("select.templateElDist").on("input", fireTemplateElDist);
$("#templateBody").attr("data-changed", 1);
});
// fireTemplateElDist selector handlers
function fireTemplateElDist() {
if (this.value === "interval") {
var interval = prompt("Populate a height interval (e.g. from 0.17 to 0.2), without space, but with hyphen", "0.17-0.2");
if (interval) {
var option = '';
$(this).append(option).val(interval);
}
}
}
// templateSelect on change listener
$("#templateSelect").on("input", function() {
var steps = $("#templateBody > div").length;
var changed = +$("#templateBody").attr("data-changed");
var template = this.value;
if (steps && changed === 1) {
alertMessage.innerHTML = "Are you sure you want to change the base template? All the changes will be lost.";
$("#alert").dialog({resizable: false, title: "Change Template",
buttons: {
Change: function() {
changeTemplate(template);
$(this).dialog("close");
},
Cancel: function() {
var prev = $("#templateSelect").attr("data-prev");
$("#templateSelect").val(prev);
$(this).dialog("close");
}
}
});
}
if (steps === 0 || changed === 0) {changeTemplate(template);}
});
function changeTemplate(template) {
$("#templateBody").empty();
$("#templateSelect").attr("data-prev", template);
addStep("Mountain");
if (template === "templateVolcano") {
addStep("Add", 0.05);
addStep("Multiply", 1.1);
addStep("Hill", 5, 0.4);
addStep("Hill", 2, 0.15);
addStep("Range", 3);
addStep("Trough", 3);
}
if (template === "templateHighIsland") {
addStep("Add", 0.05);
addStep("Multiply", 0.9);
addStep("Range", 4);
addStep("Hill", 12, 0.25);
addStep("Trough", 3);
addStep("Multiply", 0.75, "land");
addStep("Hill", 3, 0.15);
}
if (template === "templateLowIsland") {
addStep("Smooth", 2);
addStep("Range", 1);
addStep("Hill", 4, 0.4);
addStep("Hill", 12, 0.2);
addStep("Trough", 8);
addStep("Multiply", 0.35, "land");
}
if (template === "templateContinents") {
addStep("Hill", 24, 0.25);
addStep("Range", 4);
addStep("Hill", 3, 0.18);
addStep("Multiply", 0.7, "land");
addStep("Strait", "2-7");
addStep("Smooth", 2);
addStep("Pit", 7);
addStep("Trough", 8);
addStep("Multiply", 0.8, "land");
addStep("Add", 0.02, "all");
}
if (template === "templateArchipelago") {
addStep("Add", -0.2, "land");
addStep("Hill", 14, 0.17);
addStep("Range", 5);
addStep("Strait", "2-4");
addStep("Trough", 12);
addStep("Pit", 8);
addStep("Add", -0.05, "land");
addStep("Multiply", 0.7, "land");
addStep("Smooth", 4);
}
if (template === "templateAtoll") {
addStep("Hill", 2, 0.35);
addStep("Range", 2);
addStep("Add", 0.07, "all");
addStep("Smooth", 1);
addStep("Multiply", 0.1, "0.27-10");
}
$("#templateBody").attr("data-changed", 0);
}
// interprete template function
function addStep(feature, count, dist) {
if (!feature) {return;}
if (feature === "Mountain") {templateMountain.click();}
if (feature === "Hill") {templateHill.click();}
if (feature === "Pit") {templatePit.click();}
if (feature === "Range") {templateRange.click();}
if (feature === "Trough") {templateTrough.click();}
if (feature === "Strait") {templateStrait.click();}
if (feature === "Add") {templateAdd.click();}
if (feature === "Multiply") {templateMultiply.click();}
if (feature === "Smooth") {templateSmooth.click();}
if (count) {$("#templateBody div:last-child .templateElCount").val(count);}
if (dist) {
if (dist !== "land") {
var option = '';
$("#templateBody div:last-child .templateElDist").append(option);
}
$("#templateBody div:last-child .templateElDist").val(dist);
}
}
// Execute custom template
$("#templateRun").on("click", function() {
if (customization !== 1) {return;}
var steps = $("#templateBody > div").length;
if (steps) {cells.map(function(i) {i.height = 0;});}
for (var step=1; step <= steps; step++) {
var element = $("#templateBody div:nth-child(" + step + ")");
var type = element.attr("data-type");
if (type === "Mountain") {addMountain(); continue;}
var count = $("#templateBody div:nth-child(" + step + ") .templateElCount").val();
var dist = $("#templateBody div:nth-child(" + step + ") .templateElDist").val();
if (count) {
if (count[0] !== "-" && count.includes("-")) {
var lim = count.split("-");
count = Math.floor(Math.random() * (+lim[1] - +lim[0] + 1) + +lim[0]);
} else {
count = +count; // parse string
}
}
if (type === "Hill") {addHill(count, +dist);}
if (type === "Pit") {addPit(count);}
if (type === "Range") {addRange(count);}
if (type === "Trough") {addRange(-1 * count);}
if (type === "Strait") {addStrait(count);}
if (type === "Add") {modifyHeights(dist, count, 1);}
if (type === "Multiply") {modifyHeights(dist, 0, count);}
if (type === "Smooth") {smoothHeights(count);}
}
if (steps) {mockHeightmap(); updateHistory();}
});
// Save custom template as text file
$("#templateSave").on("click", function() {
var steps = $("#templateBody > div").length;
var stepsData = "";
for (var step=1; step <= steps; step++) {
var element = $("#templateBody div:nth-child(" + step + ")");
var type = element.attr("data-type");
var count = $("#templateBody div:nth-child(" + step + ") .templateElCount").val();
var dist = $("#templateBody div:nth-child(" + step + ") .templateElDist").val();
if (!count) {count = "0";}
if (!dist) {dist = "0";}
stepsData += type + " " + count + " " + dist + "\r\n";
}
var dataBlob = new Blob([stepsData], {type:"text/plain"});
var url = window.URL.createObjectURL(dataBlob);
var link = document.createElement("a");
link.download = "template_" + Date.now() + ".txt";
link.href = url;
link.click();
$("#templateBody").attr("data-changed", 0);
});
// Load custom template as text file
$("#templateLoad").on("click", function() {templateToLoad.click();});
$("#templateToLoad").change(function() {
var fileToLoad = this.files[0];
this.value = "";
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var dataLoaded = fileLoadedEvent.target.result;
var data = dataLoaded.split("\r\n");
$("#templateBody").empty();
if (data.length > 0) {
$("#templateBody").attr("data-changed", 1);
$("#templateSelect").attr("data-prev", "templateCustom").val("templateCustom");
}
for (var i=0; i < data.length; i++) {
var line = data[i].split(" ");
addStep(line[0], line[1], line[2]);
}
};
fileReader.readAsText(fileToLoad, "UTF-8");
});
// Image to Heightmap Converter dialog
function convertImage() {
canvas.width = svgWidth;
canvas.height = svgHeight;
// turn off paint brushes drag and cursor
$(".pressed").removeClass('pressed');
restoreDefaultEvents();
var div = d3.select("#colorScheme");
if (div.selectAll("*").size() === 0) {
for (var i = 0; i <= 100; i++) {
var width = i < 20 || i > 70 ? "1px" : "3px";
if (i === 0) {width = "4px";}
var clr = color(1-i/100);
var style = "background-color: " + clr + "; width: " + width;
div.append("div").attr("data-color", i/100).attr("style", style);
}
div.selectAll("*").on("touchmove mousemove", showHeight).on("click", assignHeight);
}
if ($("#imageConverter").is(":visible")) {return;}
$("#imageConverter").dialog({
title: "Image to Heightmap Converter",
minHeight: 30, width: 260, resizable: false,
position: {my: "right top", at: "right-10 top+10", of: "svg"}})
.on('dialogclose', function() {completeConvertion();});
}
// Load image to convert
$("#convertImageLoad").on("click", function() {imageToLoad.click();});
$("#imageToLoad").change(function() {
console.time("loadImage");
// set style
resetZoom();
grid.attr("stroke-width", .3);
// load image
var file = this.files[0];
this.value = ""; // reset input value to get triggered if the same file is uploaded
var reader = new FileReader();
var img = new Image;
// draw image
img.onload = function() {
ctx.drawImage(img, 0, 0, svgWidth, svgHeight);
heightsFromImage(+convertColors.value);
console.timeEnd("loadImage");
}
reader.onloadend = function() {img.src = reader.result;}
reader.readAsDataURL(file);
});
function heightsFromImage(count) {
var imageData = ctx.getImageData(0, 0, svgWidth, svgHeight);
var data = imageData.data;
$("#landmass > path, .color-div").remove();
$("#landmass, #colorsUnassigned").fadeIn();
$("#colorsAssigned").fadeOut();
var colors = [], palette = [];
points.map(function(i) {
var x = rn(i[0]), y = rn(i[1]);
if (y == svgHeight) {y--;}
if (x == svgWidth) {x--;}
var p = (x + y * svgWidth) * 4;
var r = data[p], g = data[p + 1], b = data[p + 2];
colors.push([r, g, b]);
});
var cmap = MMCQ.quantize(colors, count);
polygons.map(function(i, d) {
cells[d].height = undefined;
var nearest = cmap.nearest(colors[d]);
var rgb = "rgb(" + nearest[0] + ", " + nearest[1] + ", " + nearest[2] + ")";
var hex = toHEX(rgb);
if (palette.indexOf(hex) === -1) {palette.push(hex);}
landmass.append("path")
.attr("d", "M" + i.join("L") + "Z").attr("data-i", d)
.attr("fill", hex).attr("stroke", hex);
});
landmass.selectAll("path").on("click", landmassClicked);
palette.sort(function(a, b) {return d3.lab(a).b - d3.lab(b).b;}).map(function(i) {
$("#colorsUnassigned").append('');
});
$(".color-div").click(selectColor);
}
function landmassClicked() {
var color = d3.select(this).attr("fill");
$("#"+color.slice(1)).click();
}
function selectColor() {
landmass.selectAll(".selectedCell").classed("selectedCell", 0);
var el = d3.select(this);
if (el.classed("selectedColor")) {
el.classed("selectedColor", 0);
} else {
$(".selectedColor").removeClass("selectedColor");
el.classed("selectedColor", 1);
$("#colorScheme .hoveredColor").removeClass("hoveredColor");
$("#colorsSelectValue").text(0);
if (el.attr("data-height")) {
var height = el.attr("data-height");
$("#colorScheme div[data-color='" + height + "']").addClass("hoveredColor");
$("#colorsSelectValue").text(rn(height * 100));
}
var color = "#" + d3.select(this).attr("id");
landmass.selectAll("path").classed("selectedCell", 0);
landmass.selectAll("path[fill='" + color + "']").classed("selectedCell", 1);
}
}
function showHeight() {
var el = d3.select(this);
var height = rn(el.attr("data-color") * 100);
$("#colorsSelectValue").text(height);
$("#colorScheme .hoveredColor").removeClass("hoveredColor");
el.classed("hoveredColor", 1);
}
function assignHeight() {
var sel = $(".selectedColor")[0];
var height = +d3.select(this).attr("data-color");
var rgb = color(1-height);
var hex = toHEX(rgb);
sel.style.backgroundColor = rgb;
sel.setAttribute("data-height", height);
var cur = "#" + sel.id;
sel.id = hex.substr(1);
landmass.selectAll(".selectedCell").each(function() {
d3.select(this).attr("fill", hex).attr("stroke", hex);
var i = +d3.select(this).attr("data-i");
cells[i].height = height;
});
var parent = sel.parentNode;
if (parent.id === "colorsUnassigned") {
colorsAssigned.appendChild(sel);
$("#colorsAssigned").fadeIn();
if ($("#colorsUnassigned .color-div").length < 1) {$("#colorsUnassigned").fadeOut();}
}
if ($("#colorsAssigned .color-div").length > 1) {sortAssignedColors();}
}
// sort colors based on assigned height
function sortAssignedColors() {
var data = [];
var colors = d3.select("#colorsAssigned").selectAll(".color-div");
colors.each(function(d) {
var id = d3.select(this).attr("id");
var height = +d3.select(this).attr("data-height");
data.push({id, height});
});
data.sort(function(a, b) {return a.height - b.height}).map(function(i) {
$("#colorsAssigned").append($("#"+i.id));
});
}
// auto assign color based on luminosity or hue
function autoAssing(type) {
var imageData = ctx.getImageData(0, 0, svgWidth, svgHeight);
var data = imageData.data;
$("#landmass > path, .color-div").remove();
$("#colorsAssigned").fadeIn();
$("#colorsUnassigned").fadeOut();
var heights = [];
polygons.map(function(i, d) {
var x = rn(i.data[0]), y = rn(i.data[1]);
if (y == svgHeight) {y--;}
if (x == svgWidth) {x--;}
var p = (x + y * svgWidth) * 4;
var r = data[p], g = data[p + 1], b = data[p + 2];
var lab = d3.lab("rgb(" + r + ", " + g + ", " + b + ")");
if (type === "hue") {
var normalized = rn(normalize(lab.b + lab.a / 2, -50, 200), 2);
} else {
var normalized = rn(normalize(lab.l, 0, 100), 2);
}
heights.push(normalized);
var rgb = color(1 - normalized);
var hex = toHEX(rgb);
cells[d].height = normalized;
landmass.append("path").attr("d", "M" + i.join("L") + "Z").attr("data-i", d).attr("fill", hex).attr("stroke", hex);
});
heights.sort(function(a, b) {return a - b;});
var unique = [...new Set(heights)];
unique.map(function(i) {
var rgb = color(1 - i);
var hex = toHEX(rgb);
$("#colorsAssigned").append('');
});
$(".color-div").click(selectColor);
}
function normalize(val, min, max) {
var normalized = (val - min) / (max - min);
if (normalized < 0) {normalized = 0;}
if (normalized > 1) {normalized = 1;}
return normalized;
}
function completeConvertion() {
mockHeightmap();
restartHistory();
$(".color-div").remove();
$("#colorsAssigned, #colorsUnassigned").fadeOut();
grid.attr("stroke-width", .1);
canvas.style.opacity = convertOverlay.value = convertOverlayValue.innerHTML = 0;
// turn on paint brushes drag and cursor
viewbox.style("cursor", "crosshair").call(drag);
$("#imageConverter").dialog('close');
}
// Clear the map
function undraw() {
svg.selectAll("path, circle, line, text, #ruler > g").remove();
cells = [], land = [], riversData = [], manors = [], states = [], queue = [];
}
// Enter Heightmap Customization mode
function customizeHeightmap() {
customization = 1;
resetZoom();
$("#customizationMenu").slideDown();
landmassCounter.innerHTML = "0";
$('#grid').fadeIn();
$('#toggleGrid').removeClass("buttonoff");
restartHistory();
}
// Remove all customization related styles, reset values
function exitCustomization() {
customization = 0;
canvas.style.opacity = 0;
$("#customizationMenu").slideUp();
$("#getMap").attr("disabled", true).addClass("buttonoff");
$("#landmass").empty();
$('#grid').empty().fadeOut();
$('#toggleGrid').addClass("buttonoff");
restoreDefaultEvents();
if (!$("#toggleHeight").hasClass("buttonoff")) {toggleHeight();}
closeDialogs();
history = [];
historyStage = 0;
}
// open editCountries dialog
function editCountries() {
$("#countriesBody").empty();
$("#countriesHeader").children().removeClass("icon-sort-name-up icon-sort-name-down icon-sort-number-up icon-sort-number-down");
var totalArea = 0, totalBurgs = 0, unit, areaConv;
if (areaUnit.value === "square") {unit = " " + distanceUnit.value + "²";} else {unit = " " + areaUnit.value;}
var totalPopulation = 0;
for (var s = 0; s < states.length; s++) {
$("#countriesBody").append('');
var el = $("#countriesBody div:last-child");
var burgsCount = states[s].burgs;
totalBurgs += burgsCount;
// calculate user-friendly area and population
var area = rn(states[s].area * Math.pow(distanceScale.value, 2));
totalArea += area;
areaConv = si(area) + unit;
var urban = rn(states[s].urbanPopulation * +urbanization.value * populationRate.value);
var rural = rn(states[s].ruralPopulation * populationRate.value);
var population = (urban + rural) * 1000;
totalPopulation += population;
var populationConv = si(population);
var title = `Total population: ${population}K\nRural population: ${rural}K\nUrban population: ${urban}K`;
var neutral = states[s].color === "neutral" || states[s].capital === "neutral";
// append elements to countriesBody
if (!neutral) {
el.append('');
el.append('');
var capital = states[s].capital !== "select" ? manors[states[s].capital].name : "select";
if (capital === "select") {
el.append('');
} else {
el.append('');
el.append('');
}
el.append('');
el.append('');
} else {
el.append('');
el.append('');
el.append('');
el.append('');
el.append('');
el.append('');
}
el.append('');
el.append('
' + states[s].cells + '
');
el.append('');
el.append('
' + burgsCount + '
');
el.append('');
el.append('
' + areaConv + '
');
el.append('');
el.append('');
if (!neutral) {
el.append('');
el.attr("data-country", states[s].name).attr("data-capital", capital).attr("data-expansion", states[s].power).attr("data-cells", states[s].cells)
.attr("data-burgs", states[s].burgs).attr("data-area", area).attr("data-population", population);
} else {
el.attr("data-country", "bottom").attr("data-capital", "bottom").attr("data-expansion", "bottom").attr("data-cells", states[s].cells)
.attr("data-burgs", states[s].burgs).attr("data-area", area).attr("data-population", population);
}
}
// initialize jQuery dialog
if (!$("#countriesEditor").is(":visible")) {
$("#countriesEditor").dialog({
title: "Countries Editor",
minHeight: "auto", minWidth: Math.min(svgWidth, 390),
position: {my: "right top", at: "right-10 top+10", of: "svg"}
}).on("dialogclose", function() {
if (customization === 2 || customization === 3) {$("#countriesManuallyCancel").click()};
});
}
// restore customization Editor version
if (customization === 3) {
$("div[data-sortby='expansion'], .statePower, .icon-resize-full").removeClass("hidden");
$("div[data-sortby='cells'], .stateCells, .icon-check-empty").addClass("hidden");
} else {
$("div[data-sortby='expansion'], .statePower, .icon-resize-full").addClass("hidden");
$("div[data-sortby='cells'], .stateCells, .icon-check-empty").removeClass("hidden");
}
// populate total line on footer
countriesFooterCountries.innerHTML = states.length;
if (states[states.length-1].capital === "neutral") {countriesFooterCountries.innerHTML = states.length - 1;}
countriesFooterBurgs.innerHTML = totalBurgs;
countriesFooterArea.innerHTML = si(totalArea) + unit;
countriesFooterPopulation.innerHTML = si(totalPopulation);
// handle events
$(".enlange").click(function() {
var s = +(this.parentNode.id).slice(5);
var capital = states[s].capital;
var l = labels.select("#manorLabel"+capital);
var x = +l.attr("x"), y = +l.attr("y");
zoomTo(x, y, 8, 1600);
});
$(".stateName").on("input", function() {
var s = +(this.parentNode.id).slice(5);
states[s].name = this.value;
labels.select("#regionLabel"+s).text(this.value);
if ($("#burgsEditor").is(":visible")) {
if ($("#burgsEditor").attr("data-state") == s) {
var color = '';
$("div[aria-describedby='burgsEditor'] .ui-dialog-title").text("Burgs of " + this.value).prepend(color);
}
}
}).hover(focusStates, unfocus);
$(".states > .stateColor").on("change", function() {
var s = +(this.parentNode.id).slice(5);
states[s].color = this.value;
regions.selectAll(".region"+s).attr("fill", this.value).attr("stroke", this.value);
if ($("#burgsEditor").is(":visible")) {
if ($("#burgsEditor").attr("data-state") == s) {
$(".ui-dialog-title > .stateColor").val(this.value);
}
}
});
$(".stateCapital").on("input", function() {
var s = +(this.parentNode.id).slice(5);
var capital = states[s].capital;
manors[capital].name = this.value;
labels.select("#manorLabel"+capital).text(this.value);
if ($("#burgsEditor").is(":visible")) {
if ($("#burgsEditor").attr("data-state") == s) {
$("#burgs"+capital+" > .burgName").val(this.value);
}
}
}).hover(focusCapital, unfocus);
$(".stateBurgs, .stateBIcon").on("click", editBurgs).hover(focusBurgs, unfocus);
$("#countriesBody > .states").on("click", function() {
if (customization === 2) {
$(".selected").removeClass("selected");
$(this).addClass("selected");
const state = +$(this).attr("id").slice(5);
let color = states[state].color;
if (color === "neutral") {color = "white";}
if (icons.selectAll(".circle").size()) {icons.selectAll(".circle").attr("stroke", color);}
}
});
$(".selectCapital").on("click", function() {
if ($(this).hasClass("pressed")) {
$(this).removeClass("pressed");
restoreDefaultEvents();
} else {
$(this).addClass("pressed");
viewbox.style("cursor", "crosshair").on("click", selectCapital);
}
});
function selectCapital() {
var point = d3.mouse(this);
var index = getIndex(point);
var x = rn(point[0], 2), y = rn(point[1], 2);
if (cells[index].height < 0.2) {
console.error("Cannot place capital on the water! Select a land cell");
return;
}
// check for capitals group for labels
let group = labels.select("#capitals");
if (!group.size()) {
group = labels.append("g").attr("id", "capitals")
.attr("fill", "#3e3e4b").attr("opacity", 1)
.attr("font-family", "Almendra SC").attr("data-font", "Almendra+SC")
.attr("font-size", 7).attr("data-size", 7);
invokeActiveZooming();
}
var state = $(".selectCapital.pressed").attr("id").replace("selectCapital", "");
var oldState = cells[index].region;
if (oldState === "neutral") {oldState = states.length - 1;}
if (cells[index].manor !== undefined) {
// cell has burg
var burg = cells[index].manor;
if (states[oldState].capital === burg) {
console.error("Existing capital cannot be selected as a new state capital! Select other cell");
return;
} else {
// make this burg a new capital
var urbanFactor = 0.9; // for old neutrals
manors[burg].region = state;
if (oldState === "neutral") {manors[burg].population *= (1 / urbanFactor);}
manors[burg].population *= 2; // give capital x2 population bonus
states[state].capital = burg;
$("#manorLabel"+burg).detach().appendTo($("#capitals")).attr("dy", -1.3);
$("#manorIcon"+burg).attr("r", 1).attr("stroke-width", .24);
}
} else {
// free cell -> create new burg for a capital
var closest = cultureTree.find(x, y);
var culture = cultureTree.data().indexOf(closest) || 0;
var name = generateName(culture);
var i = manors.length;
cells[index].manor = i;
states[state].capital = i;
var 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) {score *= 3;} // port-capital
var population = rn(score, 1);
manors.push({i, cell:index, x, y, region: state, culture, name, population});
burgs.append("circle").attr("id", "manorIcon"+i)
.attr("r", 1).attr("stroke-width", .24).attr("cx", x)
.attr("cy", y).call(d3.drag().on("start", elementDrag));
group.append("text").attr("id", "manorLabel"+i)
.attr("x", x).attr("y", y).attr("dy", -1.3)
.text(name).on("click", editLabel);
}
cells[index].region = state;
cells[index].neighbors.map(function(n) {
if (cells[n].height < 0.2) {return;}
if (cells[n].manor !== undefined) {return;}
cells[n].region = state;
});
redrawRegions();
recalculateStateData(oldState); // re-calc old state data
recalculateStateData(state); // calc new state data
editCountries();
restoreDefaultEvents();
}
$(".statePower").on("input", function() {
var s = +(this.parentNode.id).slice(5);
states[s].power = +this.value;
regenerateCountries();
});
$(".statePopulation").on("change", function() {
var s = +(this.parentNode.id).slice(5);
var popOr = +$(this).parent().attr("data-population");
var popNew = getInteger(this.value);
if (!Number.isInteger(popNew) || popNew < 1000) {
this.value = si(popOr);
return;
}
var change = popNew / popOr;
states[s].urbanPopulation = rn(states[s].urbanPopulation * change, 2);
states[s].ruralPopulation = rn(states[s].ruralPopulation * change, 2);
var urban = rn(states[s].urbanPopulation * urbanization.value * populationRate.value);
var rural = rn(states[s].ruralPopulation * populationRate.value);
var population = (urban + rural) * 1000;
$(this).parent().attr("data-population", population);
this.value = si(population);
var total = 0;
$("#countriesBody > div").each(function(e, i) {
total += +$(this).attr("data-population");
});
countriesFooterPopulation.innerHTML = si(total * 1000);
if (states[s].capital === "neutral") {s = "neutral";}
manors.map(function(m) {
if (m.region !== s) {return;}
m.population = rn(m.population * change, 2);
});
});
// fully remove country
$("#countriesBody .icon-trash-empty").on("click", function() {
var s = +(this.parentNode.id).slice(5);
if (states[s].capital === "select") {
removeCountry(s);
return;
}
alertMessage.innerHTML = `Are you sure you want to remove the country?`;
$("#alert").dialog({resizable: false, title: "Remove country", buttons: {
Remove: function() {
removeCountry(s);
$(this).dialog("close");
},
Cancel: function() {$(this).dialog("close");}
}});
});
function removeCountry(s) {
const cellsCount = states[s].cells;
const capital = states[s].capital;
states.splice(s, 1);
states.map(function(s, i) {s.i = i;});
cells.map(function(c) {
if (c.region === s) {c.region = "neutral";}
else if (c.region > s) {c.region -= 1;}
});
// do only if removed state had cells
if (cellsCount) {
$("#manorLabel"+capital).detach().appendTo($("#towns")).attr("dy", -0.7); // change capital label to burg
$("#manorIcon"+capital).attr("r", .5).attr("stroke-width", .12);
var burgsSelection = $.grep(manors, function(e) {return (e.region === s);});
var urbanFactor = 0.9;
burgsSelection.map(function(b) {
if (b.i === capital) {b.population *= 0.5;}
b.population *= urbanFactor;
b.region = "neutral";
});
// re-calculate neutral data
if (states[states.length-1].capital !== "neutral") {
states.push({i: states.length, color: "neutral", name: "Neutrals", capital: "neutral"});
}
recalculateStateData(states.length - 1); // re-calc data for neutrals
redrawRegions();
}
editCountries();
}
$("#countriesNeutral").on("change", function() {regenerateCountries();});
}
// burgs list + editor
function editBurgs(context, s) {
if (s === undefined) {s = +(this.parentNode.id).slice(5);}
$("#burgsEditor").attr("data-state", s);
$("#burgsBody").empty();
$("#burgsHeader").children().removeClass("icon-sort-name-up icon-sort-name-down icon-sort-number-up icon-sort-number-down");
var region = states[s].capital === "neutral" ? "neutral" : s;
var burgs = $.grep(manors, function(e) {return (e.region === region);});
var populationArray = [];
burgs.map(function(b) {
$("#burgsBody").append('');
var el = $("#burgsBody div:last-child");
el.append('');
el.append('');
el.append('');
el.append('
' + cultures[b.culture] + '
');
var population = b.population * urbanization.value * populationRate.value * 1000;
populationArray.push(population);
population = population > 1e4 ? si(population) : rn(population, -1);
el.append('');
el.append('');
var capital = states[s].capital;
var type = "z-burg"; // usual burg by default
if (b.i === capital) {el.append(''); type = "c-capital";}
else {el.append('');}
if (cells[b.cell].port) {
el.append('');
if (type === "c-capital") {type = "a-capital-port";} else {type = "p-port";}
} else {
el.append('');
}
if (b.i !== capital) {el.append('');}
el.attr("data-burg", b.name).attr("data-culture", cultures[b.culture]).attr("data-population", b.population).attr("data-type", type);
});
if (!$("#burgsEditor").is(":visible")) {
$("#burgsEditor").dialog({
title: "Burgs of " + states[s].name,
minHeight: "auto", width: "auto",
position: {my: "right bottom", at: "right-10 bottom-10", of: "svg"}
});
var color = '';
if (region !== "neutral") {$("div[aria-describedby='burgsEditor'] .ui-dialog-title").prepend(color);}
}
// populate total line on footer
burgsFooterBurgs.innerHTML = burgs.length;
burgsFooterCulture.innerHTML = $("#burgsBody div:first-child .burgCulture").text();
var avPop = rn(d3.mean(populationArray), -1);
burgsFooterPopulation.value = avPop;
$(".enlange").click(function() {
var b = +(this.parentNode.id).slice(5);
var l = labels.select("#manorLabel"+b);
var x = +l.attr("x"), y = +l.attr("y");
zoomTo(x, y, 8, 1600);
});
$("#burgsBody > div").hover(focusBurg, unfocus);
$("#burgsBody > div").click(function() {
if (!$("#changeCapital").hasClass("pressed")) {return;}
var type = $(this).attr("data-type");
if (type.includes("capital")) {return;}
var s = +$("#burgsEditor").attr("data-state");
var b = +$(this).attr("id").slice(5);
var oldCap = states[s].capital;
manors[oldCap].population *= 0.5;
manors[b].population *= 2;
states[s].capital = b;
recalculateStateData(s);
$("#manorLabel"+oldCap).detach().appendTo($("#towns")).attr("dy", -0.7);
$("#manorIcon"+oldCap).attr("r", .5).attr("stroke-width", .12);
$("#manorLabel"+b).detach().appendTo($("#capitals")).attr("dy", -1.3);
$("#manorIcon"+b).attr("r", 1).attr("stroke-width", .24);
updateCountryEditors();
$("#changeCapital").removeClass("pressed");
});
$(".burgName").on("input", function() {
var b = +(this.parentNode.id).slice(5);
manors[b].name = this.value;
labels.select("#manorLabel"+b).text(this.value);
if (b === s && $("#countriesEditor").is(":visible")) {
$("#state"+s+" > .stateCapital").val(this.value);
}
});
$(".ui-dialog-title > .stateColor").on("change", function() {
states[s].color = this.value;
regions.selectAll(".region"+s).attr("fill", this.value).attr("stroke", this.value);
if ($("#countriesEditor").is(":visible")) {
$("#state"+s+" > .stateColor").val(this.value);
}
});
$(".burgPopulation").on("change", function() {
var b = +(this.parentNode.id).slice(5);
var pop = getInteger(this.value);
if (!Number.isInteger(pop) || pop < 10) {
var orig = rn(manors[b].population * urbanization.value * populationRate.value * 1000, 2);
this.value = si(orig);
return;
}
populationRaw = rn(pop / urbanization.value / populationRate.value / 1000, 2);
var change = populationRaw - manors[b].population;
manors[b].population = populationRaw;
$(this).parent().attr("data-population", populationRaw);
this.value = si(pop);
var state = manors[b].region;
if (state === "neutral") {state = states.length - 1;}
states[state].urbanPopulation += change;
updateCountryPopulationUI(state);
var average = states[state].urbanPopulation / states[state].burgs * urbanization.value * populationRate.value * 1000;
burgsFooterPopulation.value = rn(average, -1);
});
$("#burgsFooterPopulation").on("change", function() {
var state = +$("#burgsEditor").attr("data-state");
var newPop = +this.value;
var avPop = states[state].urbanPopulation / states[state].burgs * urbanization.value * populationRate.value * 1000;
if (!Number.isInteger(newPop) || newPop < 10) {this.value = rn(avPop, -1); return;}
var change = +this.value / avPop;
$("#burgsBody > div").each(function(e, i) {
var b = +(this.id).slice(5);
var pop = rn(manors[b].population * change, 2);
manors[b].population = pop;
$(this).attr("data-population", pop);
var popUI = pop * urbanization.value * populationRate.value * 1000;
popUI = popUI > 1e4 ? si(popUI) : rn(popUI, -1);
$(this).children().filter(".burgPopulation").val(popUI);
});
states[state].urbanPopulation = rn(states[state].urbanPopulation * change, 2);
updateCountryPopulationUI(state);
});
$("#burgsBody .icon-trash-empty").on("click", function() {
alertMessage.innerHTML = `Are you sure you want to remove the burg?`;
var b = +(this.parentNode.id).slice(5);
$("#alert").dialog({resizable: false, title: "Remove burg",
buttons: {
Remove: function() {
$(this).dialog("close");
var state = +$("#burgsEditor").attr("data-state");
$("#burgs"+b).remove();
var cell = manors[b].cell;
manors[b].region = "removed";
cells[cell].manor = undefined;
states[state].burgs = states[state].burgs - 1;
burgsFooterBurgs.innerHTML = states[state].burgs;
countriesFooterBurgs.innerHTML = +countriesFooterBurgs.innerHTML - 1;
states[state].urbanPopulation = states[state].urbanPopulation - manors[b].population;
var avPop = states[state].urbanPopulation / states[state].burgs * urbanization.value * populationRate.value * 1000;
burgsFooterPopulation.value = rn(avPop, -1);
if ($("#countriesEditor").is(":visible")) {
$("#state"+state+" > .stateBurgs").text(states[state].burgs);
}
labels.select("#manorLabel"+b).remove();
icons.select("#manorIcon"+b).remove();
},
Cancel: function() {$(this).dialog("close");}
}
});
});
}
// onhover style functions
function focusStates() {
var s = +(this.parentNode.id).slice(5);
var l = labels.select("#regionLabel"+s);
l.classed("drag", true);
}
function focusCapital() {
var s = +(this.parentNode.id).slice(5);
var capital = states[s].capital;
var l = labels.select("#manorLabel"+capital);
l.classed("drag", true);
}
function focusBurgs() {
var s = +(this.parentNode.id).slice(5);
var stateManors = $.grep(manors, function(e) {return (e.region === s);});
stateManors.map(function(m) {
labels.select("#manorLabel"+m.i).classed("drag", true);
burgs.select("#manorIcon"+m.i).classed("drag", true);
});
}
function focusBurg() {
var b = +(this.id).slice(5);
var l = labels.select("#manorLabel"+b);
l.classed("drag", true);
}
function unfocus() {$(".drag").removeClass("drag");}
// save dialog position if "stable" dialog window is dragged
$(".stable").on("dialogdragstop", function(event, ui) {
sessionStorage.setItem(this.id, [ui.offset.left, ui.offset.top]);
});
// restore saved dialog position on "stable" dialog window open
$(".stable").on("dialogopen", function(event, ui) {
var pos = sessionStorage.getItem(this.id);
if (!pos) {return;}
pos = pos.split(",");
if (pos[0] > $(window).width() - 100 || pos[1] > $(window).width() - 40) {return;} // prevent showing out of screen
var at = `left+${pos[0]} top+${pos[1]}`;
$(this).dialog("option", "position", {my: "left top", at: at, of: "svg"});
});
// Map scale and measurements editor
function editScale() {
$("#ruler").fadeIn();
$("#scaleEditor").dialog({
title: "Scale Editor",
minHeight: "auto", width: "auto", resizable: false,
position: {my: "center bottom", at: "center bottom-10", of: "svg"}
});
}
// update only UI and sorting value in countryEditor screen
function updateCountryPopulationUI(s) {
if ($("#countriesEditor").is(":visible")) {
var urban = rn(states[s].urbanPopulation * +urbanization.value * populationRate.value);
var rural = rn(states[s].ruralPopulation * populationRate.value);
var population = (urban + rural) * 1000;
$("#state"+s).attr("data-population", population);
$("#state"+s).children().filter(".statePopulation").val(si(population));
}
}
// update dialogs if measurements are changed
function updateCountryEditors() {
if ($("#countriesEditor").is(":visible")) {editCountries();}
if ($("#burgsEditor").is(":visible")) {
var s = +$("#burgsEditor").attr("data-state");
editBurgs(this, s);
}
}
// remove drawn regions and draw all regions again
function redrawRegions() {
regions.selectAll("*").remove();
borders.selectAll("path").remove();
countries.selectAll("text").remove();
drawRegions();
}
// restore keeped region data on edit heightmap completion
function restoreRegions() {
borders.selectAll("path").remove();
countries.selectAll("text").remove();
manors.map(function(m) {
const cell = diagram.find(m.x, m.y).index;
if (cells[cell].height < 0.2) {
// remove manor if it ocean
m.region = "removed";
m.cell = cell;
labels.select("#manorLabel"+m.i).remove();
icons.select("#manorIcon"+m.i).remove();
} else {
m.cell = cell;
cells[cell].manor = m.i;
}
});
cells.map(function(c) {
if (c.height < 0.2) {
// no longer a land cell
delete c.region;
delete c.culture;
return;
}
if (c.region === undefined) {
c.region = "neutral";
if (states[states.length - 1].capital !== "neutral") {
states.push({i: states.length, color: "neutral", capital: "neutral", name: "Neutrals"});
}
}
if (c.culture === undefined) {
const closest = cultureTree.find(c.data[0], c.data[1]);
c.culture = cultureTree.data().indexOf(closest);
}
});
states.map(function(s) {recalculateStateData(s.i);})
drawRegions();
}
function regenerateCountries() {
regions.selectAll("*").remove();
neutral = +countriesNeutral.value;
manors.map(function(m) {
if (m.region === "removed") {return;}
var state = "neutral", closest = neutral;
var x = m.x, y = m.y;
states.map(function(s) {
if (s.capital === "neutral" || s.capital === "select") {return;}
var c = manors[s.capital];
var dist = Math.hypot(c.x - x, c.y - y) / s.power;
if (cells[m.cell].fn !== cells[c.cell].fn) {dist *= 3;}
if (dist < closest) {state = s.i; closest = dist;}
});
m.region = state;
cells[m.cell].region = state;
});
defineRegions();
var temp = regions.append("g").attr("id", "temp");
land.map(function(l) {
if (l.region === undefined) {return;}
if (l.region === "neutral") {return;}
var color = states[l.region].color;
temp.append("path")
.attr("data-cell", l.index).attr("data-state", l.region)
.attr("d", "M" + polygons[l.index].join("L") + "Z")
.attr("fill", color).attr("stroke", color);
});
var neutralBurgs = $.grep(manors, function(e) {return (e.region === "neutral");});
var last = states.length - 1;
var type = states[last].color;
if (type === "neutral" && neutralBurgs.length === 0) {
// remove neutral line
$("#state" + last).remove();
states.splice(-1);
}
// recalculate data for all countries
states.map(function(s) {
recalculateStateData(s.i);
$("#state"+s.i+" > .stateCells").text(s.cells);
$("#state"+s.i+" > .stateBurgs").text(s.burgs);
var area = rn(s.area * Math.pow(distanceScale.value, 2));
var unit = areaUnit.value === "square" ? " " + distanceUnit.value + "²" : " " + areaUnit.value;
$("#state"+s.i+" > .stateArea").text(si(area) + unit);
var urban = rn(s.urbanPopulation * urbanization.value * populationRate.value);
var rural = rn(s.ruralPopulation * populationRate.value);
var population = (urban + rural) * 1000;
$("#state"+s.i+" > .statePopulation").val(si(population));
$("#state"+s.i).attr("data-cells", s.cells).attr("data-burgs", s.burgs)
.attr("data-area", area).attr("data-population", population);
});
if (type !== "neutral" && neutralBurgs.length > 0) {
// add neutral line
states.push({i: states.length, color: "neutral", capital: "neutral", name: "Neutrals"});
recalculateStateData(states.length - 1);
editCountries();
}
}
// enter state edit mode
function mockRegions() {
if (grid.style("display") !== "inline") {toggleGrid.click();}
if (labels.style("display") !== "none") {toggleLabels.click();}
stateBorders.selectAll("*").remove();
neutralBorders.selectAll("*").remove();
}
// handle DOM elements sorting on header click
$(".sortable").on("click", function() {
var el = $(this);
// remove sorting for all siglings except of clicked element
el.siblings().removeClass("icon-sort-name-up icon-sort-name-down icon-sort-number-up icon-sort-number-down");
var type = el.hasClass("alphabetically") ? "name" : "number";
var state = "no";
if (el.is("[class*='down']")) {state = "asc";}
if (el.is("[class*='up']")) {state = "desc";}
var sortby = el.attr("data-sortby");
var list = el.parent().next(); // get list container element (e.g. "countriesBody")
var lines = list.children("div"); // get list elements
if (state === "no" || state === "asc") { // sort desc
el.removeClass("icon-sort-" + type + "-down");
el.addClass("icon-sort-" + type + "-up");
lines.sort(function(a, b) {
var an = a.getAttribute("data-" + sortby);
if (an === "bottom") {return 1;}
var bn = b.getAttribute("data-" + sortby);
if (bn === "bottom") {return -1;}
if (type === "number") {an = +an; bn = +bn;}
if (an > bn) {return 1;}
if (an < bn) {return -1;}
return 0;
});
}
if (state === "desc") { // sort asc
el.removeClass("icon-sort-" + type + "-up");
el.addClass("icon-sort-" + type + "-down");
lines.sort(function(a, b) {
var an = a.getAttribute("data-" + sortby);
if (an === "bottom") {return 1;}
var bn = b.getAttribute("data-" + sortby);
if (bn === "bottom") {return -1;}
if (type === "number") {an = +an; bn = +bn;}
if (an < bn) {return 1;}
if (an > bn) {return -1;}
return 0;
});
}
lines.detach().appendTo(list);
});
// load text file with new burg names
$("#burgsListToLoad").change(function() {
var fileToLoad = this.files[0];
this.value = "";
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var dataLoaded = fileLoadedEvent.target.result;
var data = dataLoaded.split("\r\n");
if (data.length === 0) {return;}
let change = [];
let message = `Burgs will be renamed as below. Please confirm`;
message += `
Id
Current name
New Name
`;
for (var i=0; i < data.length && i < manors.length; i++) {
const v = data[i];
if (v === "" || v === undefined) {continue;}
if (v === manors[i].name) {continue;}
change.push({i, name: v});
message += `
${i}
${manors[i].name}
${v}
`;
}
message += `
`;
alertMessage.innerHTML = message;
$("#alert").dialog({title: "Burgs bulk renaming", position: {my: "center", at: "center", of: "svg"},
buttons: {
Cancel: function() {$(this).dialog("close");},
Confirm: function() {
for (var i=0; i < change.length; i++) {
const id = change[i].i;
manors[id].name = change[i].name;
labels.select("#manorLabel"+id).text(change[i].name);
}
$(this).dialog("close");
updateCountryEditors();
}
}
});
}
fileReader.readAsText(fileToLoad, "UTF-8");
});
// just apply map size that was already set, apply graph size!
function applyMapSize() {
svgWidth = graphWidth = +mapWidthInput.value;
svgHeight = graphHeight = +mapHeightInput.value;
svg.attr("width", svgWidth).attr("height", svgHeight);
voronoi = d3.voronoi().extent([[0, 0], [graphWidth, graphHeight]]);
initView = [1, 0, 0];
zoom.translateExtent([[0, 0], [graphWidth, graphHeight]]).scaleExtent([1, 20]).scaleTo(svg, 1);
viewbox.attr("transform", null);
ocean.selectAll("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%");
}
// change svg size on manual size change or window resize, do not change graph size
function changeMapSize() {
svgWidth = +mapWidthInput.value;
svgHeight = +mapHeightInput.value;
svg.attr("width", svgWidth).attr("height", svgHeight);
zoom.translateExtent([[0, 0], [svgWidth, svgHeight]]);
fitScaleBar();
fitStatusBar();
}
// fit full-screen map if window is resized
$(window).resize(function(e) {
// trick to prevent resize on download bar opening
if (allowResize === false) {allowResize = true; return;}
mapWidthInput.value = window.innerWidth;
mapHeightInput.value = window.innerHeight;
changeMapSize();
});
// fit ScaleBar to map size
function fitScaleBar() {
if (d3.select("#scaleBar").size()) {
var bbox = d3.select("#scaleBar").node().getBBox();
var tr = [svgWidth - 10 - bbox.width, svgHeight - 10 - bbox.height];
d3.select("#scaleBar").attr("transform", "translate(" + rn(tr[0]) + "," + rn(tr[1]) + ")");
sessionStorage.removeItem("scaleBar");
}
}
// fit Statusbar to map size
function fitStatusBar() {
var el = $("#statusbar");
el.css("top", svgHeight - 20);
if (toggleStatusbar.checked) {el.show();}
}
// restore initial style
function applyDefaultStyle() {
viewbox.on("touchmove mousemove", moved);
landmass.attr("opacity", 1).attr("fill", "#eef6fb");
coastline.attr("opacity", .5).attr("stroke", "#1f3846").attr("stroke-width", .7).attr("filter", "url(#dropShadow)");
regions.attr("opacity", .55);
stateBorders.attr("opacity", .8).attr("stroke", "#56566d").attr("stroke-width", .5).attr("stroke-dasharray", "1.2 1.5").attr("stroke-linecap", "butt");
neutralBorders.attr("opacity", .8).attr("stroke", "#56566d").attr("stroke-width", .3).attr("stroke-dasharray", "1 1.5").attr("stroke-linecap", "butt");
cults.attr("opacity", .6);
rivers.attr("opacity", 1).attr("fill", "#5d97bb");
lakes.attr("opacity", 1).attr("fill", "#a6c1fd").attr("stroke", "#477794").attr("stroke-width", .3);
burgs.attr("opacity", 1).attr("fill", "#ffffff").attr("stroke", "#3e3e4b");
roads.attr("opacity", .8).attr("stroke", "#d06324").attr("stroke-width", .4).attr("stroke-dasharray", "1 2").attr("stroke-linecap", "round");
trails.attr("opacity", .8).attr("stroke", "#d06324").attr("stroke-width", .1).attr("stroke-dasharray", ".5 1").attr("stroke-linecap", "round");
searoutes.attr("opacity", .8).attr("stroke", "#ffffff").attr("stroke-width", .2).attr("stroke-dasharray", "1 2").attr("stroke-linecap", "round");
grid.attr("opacity", 1).attr("stroke", "#808080").attr("stroke-width", .1);
ruler.attr("opacity", 1).style("display", "none").attr("filter", "url(#dropShadow)");
overlay.attr("opacity", .8).attr("stroke", "#808080").attr("stroke-width", .5);
ocean.select("#oceanBase").attr("opacity", 1).attr("fill", "#53679f");
labels.attr("opacity", 1);
size = rn(8 - capitalsCount / 20);
if (size < 3) {size = 3;}
capitals.attr("fill", "#3e3e4b").attr("opacity", 1).attr("font-family", "Almendra SC").attr("data-font", "Almendra+SC").attr("font-size", size).attr("data-size", size);
towns.attr("fill", "#3e3e4b").attr("opacity", 1).attr("font-family", "Almendra SC").attr("data-font", "Almendra+SC").attr("font-size", 3).attr("data-size", 4);
size = rn(16 - capitalsCount / 6);
if (size < 6) {size = 6;}
countries.attr("fill", "#3e3e4b").attr("opacity", 1).attr("font-family", "Almendra SC").attr("data-font", "Almendra+SC").attr("font-size", size).attr("data-size", size);
}
// Options handlers
$("input, select").on("input change", function() {
var id = this.id;
if (id === "hideLabels") {invokeActiveZooming();}
if (id === "styleElementSelect") {
var sel = this.value;
var el = viewbox.select("#"+sel);
$("#styleInputs div").hide();
// opacity
$("#styleOpacity, #styleFilter").css("display", "block");
var opacity = el.attr("opacity") || 1;
styleOpacityInput.value = styleOpacityOutput.value = opacity;
// filter
if (sel == "oceanBase") {el = oceanLayers;}
styleFilterInput.value = el.attr("filter") || "";
if (sel === "rivers" || sel === "oceanBase" || sel === "lakes" || sel === "landmass" || sel === "burgs") {
$("#styleFill").css("display", "inline-block");
styleFillInput.value = styleFillOutput.value = el.attr("fill");
}
if (sel === "roads" || sel === "trails" || sel === "searoutes" || sel === "lakes" || sel === "stateBorders" || sel === "neutralBorders" || sel === "grid" || sel === "overlay" || sel === "coastline") {
$("#styleStroke").css("display", "inline-block");
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke");
$("#styleStrokeWidth").css("display", "block");
var width = el.attr("stroke-width") || "";
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = width;
}
if (sel === "roads" || sel === "trails" || sel === "searoutes" || sel === "stateBorders" || sel === "neutralBorders" || sel === "overlay") {
$("#styleStrokeDasharray, #styleStrokeLinecap").css("display", "block");
styleStrokeDasharrayInput.value = el.attr("stroke-dasharray") || "";
styleStrokeLinecapInput.value = el.attr("stroke-linecap") || "inherit";
}
if (sel === "regions") {
$("#styleMultiple").css("display", "inline-block");
$("#styleMultiple input").remove();
//var count = +$("#regions > path:last").attr("class").slice(6) + 1;
for (var s = 0; s < states.length; s++) {
var color = regions.select(".region"+s).attr("fill");
$("#styleMultiple").append('');
}
$("#styleMultiple input").on("input", function() {
var id = this.id;
var r = +id.replace("regionColor", "");
states[r].color = this.value;
regions.selectAll(".region"+r).attr("fill", this.value).attr("stroke", this.value);
});
}
if (sel === "terrs") {$("#styleScheme").css("display", "block");}
if (sel === "heightmap") {$("#styleScheme").css("display", "block");}
if (sel === "cults") {
$("#styleMultiple").css("display", "inline-block");
$("#styleMultiple input").remove();
var colors = [];
cults.selectAll("path").each(function(d) {
var fill = d3.select(this).attr("fill");
if (colors.indexOf(fill) === -1) {colors.push(fill);}
});
for (var c = 0; c < colors.length; c++) {
$("#styleMultiple").append('');
}
$("#styleMultiple input").on("input", function() {
var oldColor = "#" + d3.select(this).attr("id");
var newColor = this.value;
cults.selectAll("path").each(function() {
var fill = d3.select(this).attr("fill");
if (oldColor === fill) {d3.select(this).attr("fill", newColor).attr("stroke", newColor);}
});
$(this).attr("id", newColor.substr(1));
});
}
if (sel === "labels") {
$("#styleFill, #styleFontSize").css("display", "inline-block");
styleFillInput.value = styleFillOutput.value = el.select("g").attr("fill");
}
if (sel === "burgs") {
$("#styleSize").css("display", "block");
$("#styleStroke").css("display", "inline-block");
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke");
}
if (sel === "overlay") {
$("#styleOverlay").css("display", "block");
}
return;
}
if (id === "styleFillInput") {
styleFillOutput.value = this.value;
var el = svg.select("#"+styleElementSelect.value);
if (styleElementSelect.value !== "labels") {
el.attr('fill', this.value);
} else {
el.selectAll("g").attr('fill', this.value);
}
return;
}
if (id === "styleStrokeInput") {
styleStrokeOutput.value = this.value;
var el = svg.select("#"+styleElementSelect.value);
el.attr('stroke', this.value);
return;
}
if (id === "styleStrokeWidthInput") {
styleStrokeWidthOutput.value = this.value;
var sel = styleElementSelect.value;
svg.select("#"+sel).attr('stroke-width', +this.value);
return;
}
if (id === "styleStrokeDasharrayInput") {
var sel = styleElementSelect.value;
svg.select("#"+sel).attr('stroke-dasharray', this.value);
return;
}
if (id === "styleStrokeLinecapInput") {
var sel = styleElementSelect.value;
svg.select("#"+sel).attr('stroke-linecap', this.value);
return;
}
if (id === "styleOpacityInput") {
styleOpacityOutput.value = this.value;
var sel = styleElementSelect.value;
svg.select("#"+sel).attr('opacity', this.value);
return;
}
if (id === "styleFilterInput") {
var sel = styleElementSelect.value;
if (sel == "oceanBase") {sel = "oceanLayers";}
var el = svg.select("#"+sel);
el.attr('filter', this.value);
invokeActiveZooming();
return;
}
if (id === "styleSchemeInput") {
terrs.selectAll("path").remove();
toggleHeight();
return;
}
if (id === "styleOverlayType") {
overlay.selectAll("*").remove();
if (!$("#toggleOverlay").hasClass("buttonoff")) {
toggleOverlay();
}
}
if (id === "styleOverlaySize") {
styleOverlaySizeOutput.value = this.value;
overlay.selectAll("*").remove();
if (!$("#toggleOverlay").hasClass("buttonoff")) {
toggleOverlay();
}
}
if (id === "mapWidthInput" || id === "mapHeightInput") {
changeMapSize();
sessionStorage.setItem("screenSize", [+mapWidthInput.value, +mapHeightInput.value]);
}
if (id === "sizeInput") {
graphSize = sizeOutput.value = +this.value;
if (graphSize === 3) {sizeOutput.style.color = "red";}
if (graphSize === 2) {sizeOutput.style.color = "yellow";}
if (graphSize === 1) {sizeOutput.style.color = "green";}
}
if (id === "randomizeInput") {randomizeOutput.innerHTML = +this.value ? "✓" : "✕";}
if (id === "manorsInput") {
if (randomizeInput.value === "1") {
randomizeInput.value = 0;
randomizeOutput.innerHTML = "✕";
}
manorsCount = manorsOutput.value = this.value;
}
if (id === "regionsInput") {
if (randomizeInput.value === "1") {
randomizeInput.value = 0;
randomizeOutput.innerHTML = "✕";
}
capitalsCount = regionsOutput.value = this.value;
var size = rn(6 - capitalsCount / 20);
if (size < 3) {size = 3;}
capitals.attr("data-size", size);
size = rn(18 - capitalsCount / 6);
if (size < 4) {size = 4;}
countries.attr("data-size", size);
}
if (id === "powerInput") {powerOutput.value = this.value;}
if (id === "neutralInput") {neutral = neutralOutput.value = this.value;}
if (id === "swampinessInput") {swampiness = swampinessOutput.value = this.value;}
if (id === "sharpnessInput") {sharpness = sharpnessOutput.value = this.value;}
if (id === "precInput") {
precipitation = precOutput.value = +precInput.value;
if (randomizeInput.value === "1") {
randomizeInput.value = 0;
randomizeOutput.innerHTML = "✕";
}
}
if (id === "convertOverlay") {canvas.style.opacity = convertOverlayValue.innerHTML = +this.value;}
if (id === "populationRate") {
var population = +populationRate.value;
var output = si(population * 1000);
populationRateOutput.innerHTML = output;
updateCountryEditors();
}
if (id === "urbanization") {
urbanizationOutput.innerHTML = this.value;
updateCountryEditors();
}
if (id === "distanceUnit" || id === "distanceScale" || id === "areaUnit") {
var dUnit = distanceUnit.value;
if (id === "distanceUnit" && dUnit === "custom_name") {
var custom = prompt("Provide a custom name for distance unit");
if (custom) {
var opt = document.createElement("option");
opt.value = opt.innerHTML = custom;
distanceUnit.add(opt);
distanceUnit.value = custom;
} else {
this.value = "km"; return;
}
}
var scale = distanceScale.value;
scaleOutput.innerHTML = scale + " " + dUnit;
ruler.selectAll("g").each(function() {
var label;
var g = d3.select(this);
var area = +g.select("text").attr("data-area");
if (area) {
var areaConv = area * Math.pow(scale, 2); // convert area to distanceScale
var unit = areaUnit.value;
if (unit === "square") {unit = dUnit + "²"} else {unit = areaUnit.value;}
label = si(areaConv) + " " + unit;
} else {
var dist = +g.select("text").attr("data-dist");
label = rn(dist * scale) + " " + dUnit;
}
g.select("text").text(label);
});
ruler.selectAll(".gray").attr("stroke-dasharray", rn(30 / scale, 2));
drawScaleBar();
updateCountryEditors();
}
if (id === "barSize") {
barSizeOutput.innerHTML = this.value;
$("#scaleBar").removeClass("hidden");
drawScaleBar();
}
if (id === "barLabel") {
$("#scaleBar").removeClass("hidden");
drawScaleBar();
}
});
$("#rescaler").change(function() {
var change = rn((+this.value - 5) / 10, 2);
modifyHeights("all", change, 1);
updateHeightmap();
updateHistory();
rescaler.value = 5;
});
$("#layoutPreset").on("change", function() {
var preset = this.value;
$("#mapLayers li").not("#toggleOcean, #toggleLandmass").addClass("buttonoff");
$("#toggleOcean, #toggleLandmass").removeClass("buttonoff");
$("#oceanPattern, #landmass").fadeIn();
$("#rivers, #terrain, #borders, #regions, #burgs, #labels, #routes, #grid").fadeOut();
cults.selectAll("path").remove();
terrs.selectAll("path").remove();
if (preset === "layoutPolitical") {
toggleRivers.click();
toggleRelief.click();
toggleBorders.click();
toggleCountries.click();
toggleIcons.click();
toggleLabels.click();
toggleRoutes.click();
}
if (preset === "layoutCultural") {
toggleRivers.click();
toggleRelief.click();
toggleBorders.click();
$("#toggleCultures").click();
toggleIcons.click();
toggleLabels.click();
}
if (preset === "layoutEconomical") {
toggleRivers.click();
toggleRelief.click();
toggleBorders.click();
toggleIcons.click();
toggleLabels.click();
toggleRoutes.click();
}
if (preset === "layoutHeightmap") {
$("#toggleHeight").click();
toggleRivers.click();
}
});
// UI Button handlers
$(".tab > button").on("click", function() {
$(".tabcontent").hide();
$(".tab > button").removeClass("active");
$(this).addClass("active");
var id = this.id;
if (id === "layoutTab") {$("#layoutContent").show();}
if (id === "styleTab") {$("#styleContent").show();}
if (id === "optionsTab") {$("#optionsContent").show();}
if (id === "customizeTab") {$("#customizeContent").show();}
if (id === "aboutTab") {$("#aboutContent").show();}
});
// Pull request from @evyatron
// https://github.com/Azgaar/Fantasy-Map-Generator/pull/49
function addDragToUpload() {
document.addEventListener('dragover', function(e) {
e.stopPropagation();
e.preventDefault();
$('#map-dragged').show();
});
document.addEventListener('dragleave', function(e) {
$('#map-dragged').hide();
});
document.addEventListener('drop', function(e) {
e.stopPropagation();
e.preventDefault();
$('#map-dragged').hide();
// no files or more than one
if (e.dataTransfer.items == null || e.dataTransfer.items.length != 1) {return;}
var file = e.dataTransfer.items[0].getAsFile();
// not a .map file
if (file.name.indexOf('.map') == -1) {
alertMessage.innerHTML = 'Please upload a .map file you have previously downloaded';
$("#alert").dialog({
resizable: false, title: "Invalid file format",
width: 400, buttons: {
Close: function() { $(this).dialog("close"); }
}, position: {my: "center", at: "center", of: "svg"}
});
return;
}
// all good - show uploading text and load the map
$("#map-dragged > p").text("Uploading...");
uploadFile(file, function onUploadFinish() {
$("#map-dragged > p").text("Drop to upload");
});
});
}
}