Small Js Fixes

This commit is contained in:
Brian Weasner 2018-08-09 18:37:42 -06:00
parent 42dcae94bb
commit 338ce17cb8

175
script.js
View file

@ -37,7 +37,7 @@ function fantasyMap() {
labels = viewbox.append("g").attr("id", "labels"), labels = viewbox.append("g").attr("id", "labels"),
burgLabels = labels.append("g").attr("id", "burgLabels"), burgLabels = labels.append("g").attr("id", "burgLabels"),
icons = viewbox.append("g").attr("id", "icons"), icons = viewbox.append("g").attr("id", "icons"),
burgIcons = icons.append("g").attr("id", "burgIcons") burgIcons = icons.append("g").attr("id", "burgIcons"),
ruler = viewbox.append("g").attr("id", "ruler"), ruler = viewbox.append("g").attr("id", "ruler"),
debug = viewbox.append("g").attr("id", "debug"); debug = viewbox.append("g").attr("id", "debug");
@ -190,7 +190,8 @@ function fantasyMap() {
<br><br><i>Join our <a href='https://www.reddit.com/r/FantasyMapGenerator/' target='_blank'>Reddit community</a> <br><br><i>Join our <a href='https://www.reddit.com/r/FantasyMapGenerator/' target='_blank'>Reddit community</a>
to share created maps, discuss the Generator, ask questions and propose new features.</i>`; to share created maps, discuss the Generator, ask questions and propose new features.</i>`;
$("#alert").dialog( $("#alert").dialog(
{resizable: false, title: "Fantasy Map Generator update", width: 280, {
resizable: false, title: "Fantasy Map Generator update", width: 280,
buttons: { buttons: {
"Don't show again": function () { "Don't show again": function () {
localStorage.setItem("version", version); localStorage.setItem("version", version);
@ -466,8 +467,10 @@ function fantasyMap() {
const x = +debug.select(".tag").attr("cx"); const x = +debug.select(".tag").attr("cx");
const y = +debug.select(".tag").attr("cy"); const y = +debug.select(".tag").attr("cy");
if (line.size()) { line.attr("x1", x).attr("y1", y).attr("x2", point[0]).attr("y2", point[1]); } if (line.size()) { line.attr("x1", x).attr("y1", y).attr("x2", point[0]).attr("y2", point[1]); }
else {debug.insert("line", ":first-child").attr("class", "line") else {
.attr("x1", x).attr("y1", y).attr("x2", point[0]).attr("y2", point[1]);} debug.insert("line", ":first-child").attr("class", "line")
.attr("x1", x).attr("y1", y).attr("x2", point[0]).attr("y2", point[1]);
}
} else { } else {
line.remove(); line.remove();
} }
@ -890,7 +893,7 @@ function fantasyMap() {
function addHill(count, shift) { function addHill(count, shift) {
// shift from 0 to 0.5 // shift from 0 to 0.5
for (c = 0; c < count; c++) { for (let c = 0; c < count; c++) {
var limit = 0; var limit = 0;
do { do {
var height = Math.random() * 0.4 + 0.1; var height = Math.random() * 0.4 + 0.1;
@ -915,7 +918,7 @@ function fantasyMap() {
radius = type === "mountain" ? mRadius : hRadius; radius = type === "mountain" ? mRadius : hRadius;
var queue = [start]; var queue = [start];
if (type === "mountain") { cells[start].height = height; } if (type === "mountain") { cells[start].height = height; }
for (i = 0; i < queue.length && height >= 0.01; i++) { for (let i = 0; i < queue.length && height >= 0.01; i++) {
if (type == "mountain") { if (type == "mountain") {
height = +cells[queue[i]].height * radius - height / 100; height = +cells[queue[i]].height * radius - height / 100;
} else { } else {
@ -936,7 +939,7 @@ function fantasyMap() {
var session = Math.ceil(Math.random() * 100000); var session = Math.ceil(Math.random() * 100000);
var count = Math.abs(mod); var count = Math.abs(mod);
let range = []; let range = [];
for (c = 0; c < count; c++) { for (let c = 0; c < count; c++) {
range = []; range = [];
var diff = 0, start = from, end = to; var diff = 0, start = from, end = to;
if (!start || !end) { if (!start || !end) {
@ -951,7 +954,7 @@ function fantasyMap() {
} while (diff < 150 / graphSize || diff > 300 / graphSize) } while (diff < 150 / graphSize || diff > 300 / graphSize)
} }
if (start && end) { if (start && end) {
for (var l = 0; start != end && l < 10000; l++) { for (let l = 0; start != end && l < 10000; l++) {
var min = 10000; var min = 10000;
cells[start].neighbors.forEach(function (e) { 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]); diff = Math.hypot(cells[end].data[0] - cells[e].data[0], cells[end].data[1] - cells[e].data[1]);
@ -988,10 +991,10 @@ function fantasyMap() {
var start = diagram.find(top, graphHeight * 0.2).index; var start = diagram.find(top, graphHeight * 0.2).index;
var end = diagram.find(bottom, graphHeight * 0.8).index; var end = diagram.find(bottom, graphHeight * 0.8).index;
var range = []; var range = [];
for (var l = 0; start !== end && l < 1000; l++) { for (let l = 0; start !== end && l < 1000; l++) {
var min = 10000; // dummy value var min = 10000; // dummy value
cells[start].neighbors.forEach(function (e) { 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]); let diff = Math.hypot(cells[end].data[0] - cells[e].data[0], cells[end].data[1] - cells[e].data[1]);
if (Math.random() > 0.8) { diff = diff / 2 } if (Math.random() > 0.8) { diff = diff / 2 }
if (diff < min) { min = diff; start = e; } if (diff < min) { min = diff; start = e; }
}); });
@ -1014,7 +1017,7 @@ function fantasyMap() {
function addPit(count, height, cell) { function addPit(count, height, cell) {
var session = Math.ceil(Math.random() * 100000); var session = Math.ceil(Math.random() * 100000);
for (c = 0; c < count; c++) { for (let c = 0; c < count; c++) {
var change = height ? height + 0.1 : Math.random() * 0.1 + 0.2; var change = height ? height + 0.1 : Math.random() * 0.1 + 0.2;
var start = cell; var start = cell;
if (!start) { if (!start) {
@ -1028,7 +1031,7 @@ function fantasyMap() {
cells[start].height -= change; cells[start].height -= change;
if (cells[start].height < 0.05) { cells[start].height = 0.05; } if (cells[start].height < 0.05) { cells[start].height = 0.05; }
cells[start].used = session; cells[start].used = session;
for (var i = 1; i < 10000; i++) { for (let i = 1; i < 10000; i++) {
var rnd = Math.random() * 0.4 + 0.8; var rnd = Math.random() * 0.4 + 0.8;
change -= i / 60 * rnd; change -= i / 60 * rnd;
if (change < 0.01) { return; } if (change < 0.01) { return; }
@ -1529,7 +1532,7 @@ function fantasyMap() {
scaleBar.append("line").attr("x1", x).attr("y1", y).attr("x2", x + l + size).attr("y2", y) 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"); .attr("stroke-width", rn(size * 3, 2)).attr("stroke-dasharray", dash).attr("stroke", "#3d3d3d");
// big scale // big scale
for (var b = 0; b < 6; b++) { for (let b = 0; b < 6; b++) {
var value = rn(b * l / 5, 2); var value = rn(b * l / 5, 2);
var label = rn(value * dScale / scale); var label = rn(value * dScale / scale);
if (b === 5) { if (b === 5) {
@ -1914,7 +1917,7 @@ function fantasyMap() {
function drawRiverLines(riverNext) { function drawRiverLines(riverNext) {
console.time('drawRiverLines'); console.time('drawRiverLines');
for (var i = 0; i < riverNext; i++) { for (let i = 0; i < riverNext; i++) {
var dataRiver = $.grep(riversData, function (e) { return e.river === i; }); var dataRiver = $.grep(riversData, function (e) { return e.river === i; });
if (dataRiver.length > 1) { if (dataRiver.length > 1) {
var riverAmended = amendRiver(dataRiver, 1); var riverAmended = amendRiver(dataRiver, 1);
@ -1931,7 +1934,7 @@ function fantasyMap() {
// add more river points on 1/3 and 2/3 of length // add more river points on 1/3 and 2/3 of length
function amendRiver(dataRiver, rndFactor) { function amendRiver(dataRiver, rndFactor) {
var riverAmended = [], side = 1; var riverAmended = [], side = 1;
for (var r = 0; r < dataRiver.length; r++) { for (let r = 0; r < dataRiver.length; r++) {
var dX = dataRiver[r].x; var dX = dataRiver[r].x;
var dY = dataRiver[r].y; var dY = dataRiver[r].y;
var cell = dataRiver[r].cell; var cell = dataRiver[r].cell;
@ -1995,7 +1998,7 @@ function fantasyMap() {
riverPointsRight.unshift({ scX: xRight, scY: yRight }); riverPointsRight.unshift({ scX: xRight, scY: yRight });
// middle points // middle points
for (var p = 1; p < last; p ++) { for (let p = 1; p < last; p++) {
x = points[p][0], y = points[p][1], c = points[p][2]; x = points[p][0], y = points[p][1], c = points[p][2];
if (c) { extraOffset += Math.atan(c * 10 / widening); } // confluence if (c) { extraOffset += Math.atan(c * 10 / widening); } // confluence
var xPrev = points[p - 1][0], yPrev = points[p - 1][1]; var xPrev = points[p - 1][0], yPrev = points[p - 1][1];
@ -2208,7 +2211,7 @@ function fantasyMap() {
let inc = l / parts; // increment let inc = l / parts; // increment
if (inc === Infinity) { inc = l; } // 2 control points for short rivers if (inc === Infinity) { inc = l; } // 2 control points for short rivers
// draw control points // draw control points
for (var i = l, c = l; i > 0; i -= inc, c += inc) { for (let i = l, c = l; i > 0; i -= inc, c += inc) {
const p1 = node.getPointAtLength(i); const p1 = node.getPointAtLength(i);
const p2 = node.getPointAtLength(c); const p2 = node.getPointAtLength(c);
const p = [(p1.x + p2.x) / 2, (p1.y + p2.y) / 2]; const p = [(p1.x + p2.x) / 2, (p1.y + p2.y) / 2];
@ -2273,7 +2276,7 @@ function fantasyMap() {
const parts = (l / 8) >> 0; // number of points const parts = (l / 8) >> 0; // number of points
let inc = l / parts; // increment let inc = l / parts; // increment
if (inc === Infinity) { inc = l; } // 2 control points for short rivers if (inc === Infinity) { inc = l; } // 2 control points for short rivers
for (var i = l, e = l; i > 0; i -= inc, e += inc) { for (let i = l, e = l; i > 0; i -= inc, e += inc) {
p1 = node.getPointAtLength(i); p1 = node.getPointAtLength(i);
p2 = node.getPointAtLength(e); p2 = node.getPointAtLength(e);
x = (p1.x + p2.x) / 2, y = (p1.y + p2.y) / 2; x = (p1.x + p2.x) / 2, y = (p1.y + p2.y) / 2;
@ -2286,7 +2289,7 @@ function fantasyMap() {
points.push([x, y]); points.push([x, y]);
// amend points // amend points
const rndFactor = 0.3 + Math.random() * 1.4; // random factor in range 0.2-1.8 const rndFactor = 0.3 + Math.random() * 1.4; // random factor in range 0.2-1.8
for (var i = 0; i < points.length; i++) { for (let i = 0; i < points.length; i++) {
x = points[i][0], y = points[i][1]; x = points[i][0], y = points[i][1];
amended.push([x, y]); amended.push([x, y]);
// add additional semi-random point // add additional semi-random point
@ -2408,7 +2411,8 @@ function fantasyMap() {
$("#riverRemove").click(function () { $("#riverRemove").click(function () {
alertMessage.innerHTML = `Are you sure you want to remove the river?`; alertMessage.innerHTML = `Are you sure you want to remove the river?`;
$("#alert").dialog({resizable: false, title: "Remove river", $("#alert").dialog({
resizable: false, title: "Remove river",
buttons: { buttons: {
Remove: function () { Remove: function () {
$(this).dialog("close"); $(this).dialog("close");
@ -2521,7 +2525,7 @@ function fantasyMap() {
let inc = l / parts; // increment let inc = l / parts; // increment
if (inc === Infinity) { inc = l; } // 2 control points for short routes if (inc === Infinity) { inc = l; } // 2 control points for short routes
// draw control points // draw control points
for (var i = 0; i <= l; i += inc) { for (let i = 0; i <= l; i += inc) {
const p = node.getPointAtLength(i); const p = node.getPointAtLength(i);
addRoutePoint(p); addRoutePoint(p);
} }
@ -2606,7 +2610,7 @@ function fantasyMap() {
const node = elSelected.node(); const node = elSelected.node();
const l = node.getTotalLength(); const l = node.getTotalLength();
let pathCells = []; let pathCells = [];
for (var i = 0; i <= l; i ++) { for (let i = 0; i <= l; i++) {
const p = node.getPointAtLength(i); const p = node.getPointAtLength(i);
const cell = diagram.find(p.x, p.y); const cell = diagram.find(p.x, p.y);
if (!cell) { return; } if (!cell) { return; }
@ -2674,7 +2678,8 @@ function fantasyMap() {
$("#routeRemove").click(function () { $("#routeRemove").click(function () {
alertMessage.innerHTML = `Are you sure you want to remove the route?`; alertMessage.innerHTML = `Are you sure you want to remove the route?`;
$("#alert").dialog({resizable: false, title: "Remove route", $("#alert").dialog({
resizable: false, title: "Remove route",
buttons: { buttons: {
Remove: function () { Remove: function () {
$(this).dialog("close"); $(this).dialog("close");
@ -2764,7 +2769,8 @@ function fantasyMap() {
} }
const message = "Are you sure you want to remove all '" + iconGroup.value + "' icons (" + count + ")?"; const message = "Are you sure you want to remove all '" + iconGroup.value + "' icons (" + count + ")?";
alertMessage.innerHTML = message; alertMessage.innerHTML = message;
$("#alert").dialog({resizable: false, title: "Remove icon group", $("#alert").dialog({
resizable: false, title: "Remove icon group",
buttons: { buttons: {
Remove: function () { Remove: function () {
$(this).dialog("close"); $(this).dialog("close");
@ -2810,7 +2816,8 @@ function fantasyMap() {
$("#iconRemove").click(function () { $("#iconRemove").click(function () {
alertMessage.innerHTML = `Are you sure you want to remove the icon?`; alertMessage.innerHTML = `Are you sure you want to remove the icon?`;
$("#alert").dialog({resizable: false, title: "Remove icon", $("#alert").dialog({
resizable: false, title: "Remove icon",
buttons: { buttons: {
Remove: function () { Remove: function () {
$(this).dialog("close"); $(this).dialog("close");
@ -2889,7 +2896,8 @@ function fantasyMap() {
} }
const message = "Are you sure you want to remove all '" + reliefGroup.value + "' icons (" + count + ")?"; const message = "Are you sure you want to remove all '" + reliefGroup.value + "' icons (" + count + ")?";
alertMessage.innerHTML = message; alertMessage.innerHTML = message;
$("#alert").dialog({resizable: false, title: "Remove all icons within group", $("#alert").dialog({
resizable: false, title: "Remove all icons within group",
buttons: { buttons: {
Remove: function () { Remove: function () {
$(this).dialog("close"); $(this).dialog("close");
@ -2903,7 +2911,8 @@ function fantasyMap() {
$("#reliefRemove").click(function () { $("#reliefRemove").click(function () {
alertMessage.innerHTML = `Are you sure you want to remove the icon?`; alertMessage.innerHTML = `Are you sure you want to remove the icon?`;
$("#alert").dialog({resizable: false, title: "Remove relief icon", $("#alert").dialog({
resizable: false, title: "Remove relief icon",
buttons: { buttons: {
Remove: function () { Remove: function () {
$(this).dialog("close"); $(this).dialog("close");
@ -3065,7 +3074,8 @@ function fantasyMap() {
var count = group.selectAll("*").size(); var count = group.selectAll("*").size();
const message = "Are you sure you want to remove all Burgs (" + count + ") of that group?"; const message = "Are you sure you want to remove all Burgs (" + count + ") of that group?";
alertMessage.innerHTML = message; alertMessage.innerHTML = message;
$("#alert").dialog({resizable: false, title: "Remove Burgs", $("#alert").dialog({
resizable: false, title: "Remove Burgs",
buttons: { buttons: {
Remove: function () { Remove: function () {
$(this).dialog("close"); $(this).dialog("close");
@ -3267,7 +3277,8 @@ function fantasyMap() {
$("#burgRemove").click(function () { $("#burgRemove").click(function () {
alertMessage.innerHTML = `Are you sure you want to remove the Burg?`; alertMessage.innerHTML = `Are you sure you want to remove the Burg?`;
$("#alert").dialog({resizable: false, title: "Remove Burg", $("#alert").dialog({
resizable: false, title: "Remove Burg",
buttons: { buttons: {
Remove: function () { Remove: function () {
$(this).dialog("close"); $(this).dialog("close");
@ -3435,9 +3446,11 @@ function fantasyMap() {
ruralPopulation += c.pop; ruralPopulation += c.pop;
area += cells[c.index].area; area += cells[c.index].area;
}); });
states.push({i: states.length, color: "neutral", name: "Neutrals", capital: "neutral", states.push({
i: states.length, color: "neutral", name: "Neutrals", capital: "neutral",
cells: neutralCells.length, burgs, urbanPopulation: rn(urbanPopulation, 2), cells: neutralCells.length, burgs, urbanPopulation: rn(urbanPopulation, 2),
ruralPopulation: rn(ruralPopulation, 2), area: rn(area)}); ruralPopulation: rn(ruralPopulation, 2), area: rn(area)
});
} }
} }
@ -3639,7 +3652,7 @@ function fantasyMap() {
var l = manorsOnIsland.length; var l = manorsOnIsland.length;
if (l > 1) { if (l > 1) {
var secondary = rn((l + 8) / 10); var secondary = rn((l + 8) / 10);
for (s = 0; s < secondary; s++) { for (let s = 0; s < secondary; s++) {
var start = manorsOnIsland[Math.floor(Math.random() * l)].index; var start = manorsOnIsland[Math.floor(Math.random() * l)].index;
var end = 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]); var dist = Math.hypot(cells[start].data[0] - cells[end].data[0], cells[start].data[1] - cells[end].data[1]);
@ -3879,7 +3892,7 @@ function fantasyMap() {
var prev = cells[end]; var prev = cells[end];
if (type === "ocean" || !prev.path) { path.push({ scX: prev.data[0], scY: prev.data[1], i: end }); } if (type === "ocean" || !prev.path) { path.push({ scX: prev.data[0], scY: prev.data[1], i: end }); }
if (!prev.path) { prev.path = 1; } if (!prev.path) { prev.path = 1; }
for (var i = 0; i < limit; i++) { for (let i = 0; i < limit; i++) {
current = from[current]; current = from[current];
var cur = cells[current]; var cur = cells[current];
if (!cur) { break; } if (!cur) { break; }
@ -4199,7 +4212,7 @@ function fantasyMap() {
edgesOrdered.push({ scX: spl[0], scY: spl[1] }); edgesOrdered.push({ scX: spl[0], scY: spl[1] });
spl = end.split(" "); spl = end.split(" ");
edgesOrdered.push({ scX: spl[0], scY: spl[1] }); edgesOrdered.push({ scX: spl[0], scY: spl[1] });
for (var i = 0; end !== start && i < 2000; i++) { for (let i = 0; end !== start && i < 2000; i++) {
var next = $.grep(edges, function (e) { return (e.start == end || e.end == end); }); var next = $.grep(edges, function (e) { return (e.start == end || e.end == end); });
if (next.length > 0) { if (next.length > 0) {
if (next[0].start == end) { if (next[0].start == end) {
@ -4553,7 +4566,7 @@ function fantasyMap() {
terrain.selectAll("g").selectAll("g").remove(); terrain.selectAll("g").selectAll("g").remove();
// sort the land to Draw the top element first (reduce the elements overlapping) // sort the land to Draw the top element first (reduce the elements overlapping)
land.sort(compareY); land.sort(compareY);
for (i = 0; i < land.length; i++) { for (let i = 0; i < land.length; i++) {
const x = land[i].data[0]; const x = land[i].data[0];
const y = land[i].data[1]; const y = land[i].data[1];
const height = land[i].height; const height = land[i].height;
@ -4685,7 +4698,8 @@ function fantasyMap() {
function drawSwamp(x, y) { function drawSwamp(x, y) {
var h = 0.6, line = ""; var h = 0.6, line = "";
for (c = 0; c < 3; c++) { for (let c = 0; c < 3; c++) {
let cx, cy;
if (c == 0) { if (c == 0) {
cx = x; cx = x;
cy = y - 0.5 - Math.random(); cy = y - 0.5 - Math.random();
@ -5121,7 +5135,8 @@ function fantasyMap() {
var group = d3.select(elSelected.node().parentNode); var group = d3.select(elSelected.node().parentNode);
if (this.id == "editRemoveSingle") { if (this.id == "editRemoveSingle") {
alertMessage.innerHTML = "Are you sure you want to remove the label?"; alertMessage.innerHTML = "Are you sure you want to remove the label?";
$("#alert").dialog({resizable: false, title: "Remove label", $("#alert").dialog({
resizable: false, title: "Remove label",
buttons: { buttons: {
Remove: function () { Remove: function () {
$(this).dialog("close"); $(this).dialog("close");
@ -5142,7 +5157,8 @@ function fantasyMap() {
} }
var message = "Are you sure you want to remove all labels (" + count + ") of that group?"; var message = "Are you sure you want to remove all labels (" + count + ") of that group?";
alertMessage.innerHTML = message; alertMessage.innerHTML = message;
$("#alert").dialog({resizable: false, title: "Remove labels", $("#alert").dialog({
resizable: false, title: "Remove labels",
buttons: { buttons: {
Remove: function () { Remove: function () {
$(this).dialog("close"); $(this).dialog("close");
@ -5299,7 +5315,7 @@ function fantasyMap() {
if (fonts.indexOf(font) == -1) { fonts.push(font); fetched++ }; if (fonts.indexOf(font) == -1) { fonts.push(font); fetched++ };
}; };
let fetched = 0; let fetched = 0;
for (var r of styleSheet.cssRules) {FontRule(r);} for (let r of styleSheet.cssRules) { FontRule(r); }
document.head.removeChild(s); document.head.removeChild(s);
return fetched; return fetched;
}) })
@ -5553,7 +5569,7 @@ function fantasyMap() {
}; };
let fontRules = [], fontProms = []; let fontRules = [], fontProms = [];
for (var r of styleSheet.cssRules) { for (let r of styleSheet.cssRules) {
let fR = FontRule(r) let fR = FontRule(r)
fontRules.push(fR); fontRules.push(fR);
fontProms.push( fontProms.push(
@ -5651,9 +5667,13 @@ function fantasyMap() {
of the Generator. Please note the Gennerator is still on demo and a lot of crusial changes are being made every month`; of the Generator. Please note the Gennerator is still on demo and a lot of crusial changes are being made every month`;
} }
alertMessage.innerHTML = message; alertMessage.innerHTML = message;
$("#alert").dialog({title: "Warning", buttons: {OK: function() { $("#alert").dialog({
title: "Warning", buttons: {
OK: function () {
loadDataFromMap(data); loadDataFromMap(data);
}}}); }
}
});
} else { loadDataFromMap(data); } } else { loadDataFromMap(data); }
if (mapVersion.length > 10) { console.error("Cannot load map"); return; } if (mapVersion.length > 10) { console.error("Cannot load map"); return; }
} }
@ -5705,7 +5725,8 @@ function fantasyMap() {
if (nWidth !== svgWidth || nHeight !== 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. alertMessage.innerHTML = `The loaded map has size ${nWidth} x ${nHeight} pixels, while the current canvas size is ${svgWidth} x ${svgHeight} pixels.
Click "Rescale" to fit the map to the current canvas size. Click "OK" to browse the map without rescaling`; Click "Rescale" to fit the map to the current canvas size. Click "OK" to browse the map without rescaling`;
$("#alert").dialog({title: "Map size conflict", $("#alert").dialog({
title: "Map size conflict",
buttons: { buttons: {
Rescale: function () { Rescale: function () {
applyLoadedData(data); applyLoadedData(data);
@ -5920,7 +5941,7 @@ function fantasyMap() {
var i = Math.random() * queueSize | 0, var i = Math.random() * queueSize | 0,
s = queue[i]; s = queue[i];
// Make a new candidate between [radius, 2 * radius] from the existing sample. // Make a new candidate between [radius, 2 * radius] from the existing sample.
for (var j = 0; j < k; ++j) { for (let j = 0; j < k; ++j) {
var a = 2 * Math.PI * Math.random(), var a = 2 * Math.PI * Math.random(),
r = Math.sqrt(Math.random() * R + radius2), r = Math.sqrt(Math.random() * R + radius2),
x = s[0] + r * Math.cos(a), x = s[0] + r * Math.cos(a),
@ -5939,9 +5960,9 @@ function fantasyMap() {
j0 = Math.max(j - 2, 0), j0 = Math.max(j - 2, 0),
i1 = Math.min(i + 3, gridWidth), i1 = Math.min(i + 3, gridWidth),
j1 = Math.min(j + 3, gridHeight); j1 = Math.min(j + 3, gridHeight);
for (j = j0; j < j1; ++j) { for (let j = j0; j < j1; ++j) {
var o = j * gridWidth; var o = j * gridWidth;
for (i = i0; i < i1; ++i) { for (let i = i0; i < i1; ++i) {
if (s = grid[o + i]) { if (s = grid[o + i]) {
var s, var s,
dx = s[0] - x, dx = s[0] - x,
@ -6049,7 +6070,8 @@ function fantasyMap() {
if ($("#options").css("display") === "none") { if ($("#options").css("display") === "none") {
$("#regenerate").show(); $("#regenerate").show();
$("#optionsTrigger").removeClass("glow"); $("#optionsTrigger").removeClass("glow");
}}, function() { }
}, function () {
$("#regenerate").hide(); $("#regenerate").hide();
}); });
@ -6260,7 +6282,8 @@ function fantasyMap() {
if (id === "burgNamesImport") { burgsListToLoad.click(); } if (id === "burgNamesImport") { burgsListToLoad.click(); }
if (id === "removeCountries") { if (id === "removeCountries") {
alertMessage.innerHTML = `Are you sure you want remove all countries?`; alertMessage.innerHTML = `Are you sure you want remove all countries?`;
$("#alert").dialog({resizable: false, title: "Remove countries", $("#alert").dialog({
resizable: false, title: "Remove countries",
buttons: { buttons: {
Cancel: function () { $(this).dialog("close"); }, Cancel: function () { $(this).dialog("close"); },
Remove: function () { Remove: function () {
@ -6287,7 +6310,8 @@ function fantasyMap() {
} }
if (id === "removeBurgs") { if (id === "removeBurgs") {
alertMessage.innerHTML = `Are you sure you want to remove all burgs associated with the country?`; alertMessage.innerHTML = `Are you sure you want to remove all burgs associated with the country?`;
$("#alert").dialog({resizable: false, title: "Remove associated burgs", $("#alert").dialog({
resizable: false, title: "Remove associated burgs",
buttons: { buttons: {
Cancel: function () { $(this).dialog("close"); }, Cancel: function () { $(this).dialog("close"); },
Remove: function () { Remove: function () {
@ -6376,7 +6400,8 @@ function fantasyMap() {
if (id === "removeAllRulers") { if (id === "removeAllRulers") {
if ($("#ruler > g").length < 1) { return; } if ($("#ruler > g").length < 1) { return; }
alertMessage.innerHTML = `Are you sure you want to remove all placed rulers?`; alertMessage.innerHTML = `Are you sure you want to remove all placed rulers?`;
$("#alert").dialog({resizable: false, title: "Remove all rulers", $("#alert").dialog({
resizable: false, title: "Remove all rulers",
buttons: { buttons: {
Remove: function () { Remove: function () {
$(this).dialog("close"); $(this).dialog("close");
@ -6390,7 +6415,8 @@ function fantasyMap() {
if (id === "editHeightmap") { $("#customizeHeightmap").slideToggle(); } if (id === "editHeightmap") { $("#customizeHeightmap").slideToggle(); }
if (id === "fromScratch") { if (id === "fromScratch") {
alertMessage.innerHTML = "Are you sure you want to clear the map? All progress will be lost"; alertMessage.innerHTML = "Are you sure you want to clear the map? All progress will be lost";
$("#alert").dialog({resizable: false, title: "Clear map", $("#alert").dialog({
resizable: false, title: "Clear map",
buttons: { buttons: {
Cancel: function () { $(this).dialog("close"); }, Cancel: function () { $(this).dialog("close"); },
Clear: function () { Clear: function () {
@ -6412,7 +6438,8 @@ function fantasyMap() {
message += "If you want to edit a map, it's better to clean up all the data except on heights. "; 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"; message += "You may also keep the data, but it can cause unexpected errors";
alertMessage.innerHTML = message; alertMessage.innerHTML = message;
$("#alert").dialog({resizable: false, title: "Edit Heightmap", $("#alert").dialog({
resizable: false, title: "Edit Heightmap",
buttons: { buttons: {
"Clean up": function () { "Clean up": function () {
editHeightmap("clean"); editHeightmap("clean");
@ -6524,7 +6551,8 @@ function fantasyMap() {
} }
if (id === "restoreStyle") { if (id === "restoreStyle") {
alertMessage.innerHTML = "Are you sure you want to restore default style?"; alertMessage.innerHTML = "Are you sure you want to restore default style?";
$("#alert").dialog({resizable: false, title: "Restore style", $("#alert").dialog({
resizable: false, title: "Restore style",
buttons: { buttons: {
Restore: function () { Restore: function () {
applyDefaultStyle(); applyDefaultStyle();
@ -6588,7 +6616,8 @@ function fantasyMap() {
if (customization === 1) { if (customization === 1) {
var message = "Are you sure you want to clear the map?"; var message = "Are you sure you want to clear the map?";
alertMessage.innerHTML = message; alertMessage.innerHTML = message;
$("#alert").dialog({resizable: false, title: "Clear map", $("#alert").dialog({
resizable: false, title: "Clear map",
buttons: { buttons: {
Clear: function () { Clear: function () {
$(this).dialog("close"); $(this).dialog("close");
@ -6642,7 +6671,8 @@ function fantasyMap() {
message += "Please ensure your browser does not block popups. "; message += "Please ensure your browser does not block popups. ";
message += "Please check browser settings and turn off adBlocker if it is enabled"; message += "Please check browser settings and turn off adBlocker if it is enabled";
alertMessage.innerHTML = message; alertMessage.innerHTML = message;
$("#alert").dialog({title: "File saver. Please enable popups!", $("#alert").dialog({
title: "File saver. Please enable popups!",
buttons: { buttons: {
"Don't show again": function () { "Don't show again": function () {
localStorage.setItem("dns_allow_popup_message", true); localStorage.setItem("dns_allow_popup_message", true);
@ -6853,7 +6883,8 @@ function fantasyMap() {
var template = this.value; var template = this.value;
if (steps && changed === 1) { if (steps && changed === 1) {
alertMessage.innerHTML = "Are you sure you want to change the base template? All the changes will be lost."; 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", $("#alert").dialog({
resizable: false, title: "Change Template",
buttons: { buttons: {
Change: function () { Change: function () {
changeTemplate(template); changeTemplate(template);
@ -6959,7 +6990,7 @@ function fantasyMap() {
if (customization !== 1) { return; } if (customization !== 1) { return; }
var steps = $("#templateBody > div").length; var steps = $("#templateBody > div").length;
if (steps) { cells.map(function (i) { i.height = 0; }); } if (steps) { cells.map(function (i) { i.height = 0; }); }
for (var step=1; step <= steps; step++) { for (let step = 1; step <= steps; step++) {
var element = $("#templateBody div:nth-child(" + step + ")"); var element = $("#templateBody div:nth-child(" + step + ")");
var type = element.attr("data-type"); var type = element.attr("data-type");
if (type === "Mountain") { addMountain(); continue; } if (type === "Mountain") { addMountain(); continue; }
@ -6989,7 +7020,7 @@ function fantasyMap() {
$("#templateSave").on("click", function () { $("#templateSave").on("click", function () {
var steps = $("#templateBody > div").length; var steps = $("#templateBody > div").length;
var stepsData = ""; var stepsData = "";
for (var step=1; step <= steps; step++) { for (let step = 1; step <= steps; step++) {
var element = $("#templateBody div:nth-child(" + step + ")"); var element = $("#templateBody div:nth-child(" + step + ")");
var type = element.attr("data-type"); var type = element.attr("data-type");
var count = $("#templateBody div:nth-child(" + step + ") .templateElCount").val(); var count = $("#templateBody div:nth-child(" + step + ") .templateElCount").val();
@ -7021,7 +7052,7 @@ function fantasyMap() {
$("#templateBody").attr("data-changed", 1); $("#templateBody").attr("data-changed", 1);
$("#templateSelect").attr("data-prev", "templateCustom").val("templateCustom"); $("#templateSelect").attr("data-prev", "templateCustom").val("templateCustom");
} }
for (var i=0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
var line = data[i].split(" "); var line = data[i].split(" ");
addStep(line[0], line[1], line[2]); addStep(line[0], line[1], line[2]);
} }
@ -7038,7 +7069,7 @@ function fantasyMap() {
restoreDefaultEvents(); restoreDefaultEvents();
var div = d3.select("#colorScheme"); var div = d3.select("#colorScheme");
if (div.selectAll("*").size() === 0) { if (div.selectAll("*").size() === 0) {
for (var i = 0; i <= 100; i++) { for (let i = 0; i <= 100; i++) {
var width = i < 20 || i > 70 ? "1px" : "3px"; var width = i < 20 || i > 70 ? "1px" : "3px";
if (i === 0) { width = "4px"; } if (i === 0) { width = "4px"; }
var clr = color(1 - i / 100); var clr = color(1 - i / 100);
@ -7051,7 +7082,8 @@ function fantasyMap() {
$("#imageConverter").dialog({ $("#imageConverter").dialog({
title: "Image to Heightmap Converter", title: "Image to Heightmap Converter",
minHeight: 30, width: 260, resizable: false, minHeight: 30, width: 260, resizable: false,
position: {my: "right top", at: "right-10 top+10", of: "svg"}}) position: { my: "right top", at: "right-10 top+10", of: "svg" }
})
.on('dialogclose', function () { completeConvertion(); }); .on('dialogclose', function () { completeConvertion(); });
} }
@ -7288,7 +7320,7 @@ function fantasyMap() {
var totalArea = 0, totalBurgs = 0, unit, areaConv; var totalArea = 0, totalBurgs = 0, unit, areaConv;
if (areaUnit.value === "square") { unit = " " + distanceUnit.value + "²"; } else { unit = " " + areaUnit.value; } if (areaUnit.value === "square") { unit = " " + distanceUnit.value + "²"; } else { unit = " " + areaUnit.value; }
var totalPopulation = 0; var totalPopulation = 0;
for (var s = 0; s < states.length; s++) { for (let s = 0; s < states.length; s++) {
$("#countriesBody").append('<div class="states" id="state' + s + '"></div>'); $("#countriesBody").append('<div class="states" id="state' + s + '"></div>');
var el = $("#countriesBody div:last-child"); var el = $("#countriesBody div:last-child");
var burgsCount = states[s].burgs; var burgsCount = states[s].burgs;
@ -7531,13 +7563,15 @@ function fantasyMap() {
return; return;
} }
alertMessage.innerHTML = `Are you sure you want to remove the country?`; alertMessage.innerHTML = `Are you sure you want to remove the country?`;
$("#alert").dialog({resizable: false, title: "Remove country", buttons: { $("#alert").dialog({
resizable: false, title: "Remove country", buttons: {
Remove: function () { Remove: function () {
removeCountry(s); removeCountry(s);
$(this).dialog("close"); $(this).dialog("close");
}, },
Cancel: function () { $(this).dialog("close"); } Cancel: function () { $(this).dialog("close"); }
}}); }
});
}); });
function removeCountry(s) { function removeCountry(s) {
@ -7703,7 +7737,8 @@ function fantasyMap() {
$("#burgsBody .icon-trash-empty").on("click", function () { $("#burgsBody .icon-trash-empty").on("click", function () {
alertMessage.innerHTML = `Are you sure you want to remove the burg?`; alertMessage.innerHTML = `Are you sure you want to remove the burg?`;
var b = +(this.parentNode.id).slice(5); var b = +(this.parentNode.id).slice(5);
$("#alert").dialog({resizable: false, title: "Remove burg", $("#alert").dialog({
resizable: false, title: "Remove burg",
buttons: { buttons: {
Remove: function () { Remove: function () {
$(this).dialog("close"); $(this).dialog("close");
@ -8221,7 +8256,8 @@ function fantasyMap() {
alertMessage.innerHTML = `Are you sure you want to restore the default namesbase? alertMessage.innerHTML = `Are you sure you want to restore the default namesbase?
All custom bases will be removed and default ones will be assigned to existing cultures. All custom bases will be removed and default ones will be assigned to existing cultures.
Meanwhile existing names will not be changed.`; Meanwhile existing names will not be changed.`;
$("#alert").dialog({resizable: false, title: "Restore default data", $("#alert").dialog({
resizable: false, title: "Restore default data",
buttons: { buttons: {
Restore: function () { Restore: function () {
$(this).dialog("close"); $(this).dialog("close");
@ -8509,7 +8545,7 @@ function fantasyMap() {
let change = []; let change = [];
let message = `Burgs will be renamed as below. Please confirm`; let message = `Burgs will be renamed as below. Please confirm`;
message += `<div class="overflow-div"><table class="overflow-table"><tr><th>Id</th><th>Current name</th><th>New Name</th></tr>`; message += `<div class="overflow-div"><table class="overflow-table"><tr><th>Id</th><th>Current name</th><th>New Name</th></tr>`;
for (var i=0; i < data.length && i < manors.length; i++) { for (let i = 0; i < data.length && i < manors.length; i++) {
const v = data[i]; const v = data[i];
if (v === "" || v === undefined) { continue; } if (v === "" || v === undefined) { continue; }
if (v === manors[i].name) { continue; } if (v === manors[i].name) { continue; }
@ -8518,11 +8554,12 @@ function fantasyMap() {
} }
message += `</tr></table></div>`; message += `</tr></table></div>`;
alertMessage.innerHTML = message; alertMessage.innerHTML = message;
$("#alert").dialog({title: "Burgs bulk renaming", position: {my: "center", at: "center", of: "svg"}, $("#alert").dialog({
title: "Burgs bulk renaming", position: { my: "center", at: "center", of: "svg" },
buttons: { buttons: {
Cancel: function () { $(this).dialog("close"); }, Cancel: function () { $(this).dialog("close"); },
Confirm: function () { Confirm: function () {
for (var i=0; i < change.length; i++) { for (let i = 0; i < change.length; i++) {
const id = change[i].i; const id = change[i].i;
manors[id].name = change[i].name; manors[id].name = change[i].name;
labels.select("[data-id='" + id + "']").text(change[i].name); labels.select("[data-id='" + id + "']").text(change[i].name);