mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-19 02:21:24 +01:00
1.1.14
This commit is contained in:
Azgaar
parent
b6ed03258a
commit
aadae58072
32 changed files with 1938 additions and 1577 deletions
|
|
@ -274,14 +274,8 @@ function editBiomes() {
|
|||
data += el.dataset.population + "\n";
|
||||
});
|
||||
|
||||
const dataBlob = new Blob([data], {type: "text/plain"});
|
||||
const url = window.URL.createObjectURL(dataBlob);
|
||||
const link = document.createElement("a");
|
||||
document.body.appendChild(link);
|
||||
link.download = getFileName("Biomes") + ".csv";
|
||||
link.href = url;
|
||||
link.click();
|
||||
window.setTimeout(function() {window.URL.revokeObjectURL(url);}, 2000);
|
||||
const name = getFileName("Biomes") + ".csv";
|
||||
downloadFile(data, name);
|
||||
}
|
||||
|
||||
function enterBiomesCustomizationMode() {
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@ function editBurgs() {
|
|||
document.getElementById("regenerateBurgNames").addEventListener("click", regenerateNames);
|
||||
document.getElementById("addNewBurg").addEventListener("click", enterAddBurgMode);
|
||||
document.getElementById("burgsExport").addEventListener("click", downloadBurgsData);
|
||||
document.getElementById("burgNamesImport").addEventListener("click", e => burgsListToLoad.click());
|
||||
document.getElementById("burgsListToLoad").addEventListener("change", importBurgNames);
|
||||
document.getElementById("burgNamesImport").addEventListener("click", renameBurgsInBulk);
|
||||
document.getElementById("burgsListToLoad").addEventListener("change", function() {uploadFile(this, importBurgNames)});
|
||||
document.getElementById("burgsRemoveAll").addEventListener("click", triggerAllBurgsRemove);
|
||||
|
||||
function refreshBurgsEditor() {
|
||||
|
|
@ -368,7 +368,7 @@ function editBurgs() {
|
|||
}
|
||||
|
||||
function downloadBurgsData() {
|
||||
let data = "Id,Burg,Province,State,Culture,Religion,Population,Longitude,Latitude,Elevation ("+heightUnit.value+"),Capital,Port\n"; // headers
|
||||
let data = "Id,Burg,Province,State,Culture,Religion,Population,Longitude,Latitude,Elevation ("+heightUnit.value+"),Capital,Port,Citadel,Walls,Plaza,Temple,Shanty Town\n"; // headers
|
||||
const valid = pack.burgs.filter(b => b.i && !b.removed); // all valid burgs
|
||||
|
||||
valid.forEach(b => {
|
||||
|
|
@ -388,61 +388,70 @@ function editBurgs() {
|
|||
|
||||
// add status data
|
||||
data += b.capital ? "capital," : ",";
|
||||
data += b.port ? "port\n" : "\n";
|
||||
data += b.port ? "port," : ",";
|
||||
data += b.citadel ? "citadel," : ",";
|
||||
data += b.walls ? "walls," : ",";
|
||||
data += b.plaza ? "plaza," : ",";
|
||||
data += b.temple ? "temple," : ",";
|
||||
data += b.shanty ? "shanty town\n" : "\n";
|
||||
});
|
||||
|
||||
const dataBlob = new Blob([data], {type: "text/plain"});
|
||||
const url = window.URL.createObjectURL(dataBlob);
|
||||
const link = document.createElement("a");
|
||||
document.body.appendChild(link);
|
||||
link.download = getFileName("Burgs") + ".csv";
|
||||
link.href = url;
|
||||
link.click();
|
||||
window.setTimeout(function() {window.URL.revokeObjectURL(url);}, 2000);
|
||||
const name = getFileName("Burgs") + ".csv";
|
||||
downloadFile(data, name);
|
||||
}
|
||||
|
||||
function importBurgNames() {
|
||||
const el = document.getElementById("burgsListToLoad");
|
||||
const fileToLoad = el.files[0];
|
||||
el.value = "";
|
||||
function renameBurgsInBulk() {
|
||||
const message = `Download burgs list as a text file, make changes and re-upload the file.
|
||||
If you do not want to change the name, just leave it as is`;
|
||||
alertMessage.innerHTML = message;
|
||||
|
||||
const fileReader = new FileReader();
|
||||
|
||||
fileReader.onload = function(e) {
|
||||
const dataLoaded = e.target.result;
|
||||
const data = dataLoaded.split("\r\n");
|
||||
if (!data.length) {tip("Cannot parse the list, please check the file format", false, "error"); return;}
|
||||
|
||||
let change = [];
|
||||
let message = `Burgs will be renamed as below. Please confirm;
|
||||
<div class="overflow-div"><table class="overflow-table"><tr><th>Id</th><th>Current name</th><th>New Name</th></tr>`;
|
||||
|
||||
for (let i=0; i < data.length && i <= pack.burgs.length; i++) {
|
||||
const v = data[i];
|
||||
if (!v || !pack.burgs[i+1] || v == pack.burgs[i+1].name) continue;
|
||||
change.push({id:i+1, name: v});
|
||||
message += `<tr><td style="width:20%">${i+1}</td><td style="width:40%">${pack.burgs[i+1].name}</td><td style="width:40%">${v}</td></tr>`;
|
||||
$("#alert").dialog({title: "Burgs bulk renaming", width:"22em",
|
||||
position: {my: "center", at: "center", of: "svg"},
|
||||
buttons: {
|
||||
Download: function() {
|
||||
const data = pack.burgs.filter(b => b.i && !b.removed).map(b => b.name).join("\r\n");
|
||||
const name = getFileName("Burg names") + ".txt";
|
||||
downloadFile(data, name);
|
||||
},
|
||||
Upload: () => burgsListToLoad.click(),
|
||||
Cancel: function() {$(this).dialog("close");}
|
||||
}
|
||||
message += `</tr></table></div>`;
|
||||
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 (let i=0; i < change.length; i++) {
|
||||
const id = change[i].id;
|
||||
pack.burgs[id].name = change[i].name;
|
||||
burgLabels.select("[data-id='" + id + "']").text(change[i].name);
|
||||
}
|
||||
$(this).dialog("close");
|
||||
burgsEditorAddLines();
|
||||
}
|
||||
}
|
||||
});
|
||||
function importBurgNames(dataLoaded) {
|
||||
if (!dataLoaded) {tip("Cannot load the file, please check the format", false, "error"); return;}
|
||||
const data = dataLoaded.split("\r\n");
|
||||
if (!data.length) {tip("Cannot parse the list, please check the file format", false, "error"); return;}
|
||||
|
||||
let change = [], message = `Burgs will be renamed as below. Please confirm`;
|
||||
message += `<table class="overflow-table"><tr><th>Id</th><th>Current name</th><th>New Name</th></tr>`;
|
||||
const burgs = pack.burgs.filter(b => b.i && !b.removed);
|
||||
for (let i=0; i < data.length && i <= burgs.length; i++) {
|
||||
const v = data[i];
|
||||
if (!v || !burgs[i] || v == burgs[i].name) continue;
|
||||
change.push({id:burgs[i].i, name: v});
|
||||
message += `<tr><td style="width:20%">${burgs[i].i}</td><td style="width:40%">${burgs[i].name}</td><td style="width:40%">${v}</td></tr>`;
|
||||
}
|
||||
message += `</tr></table>`;
|
||||
if (!change.length) message = "No changes found in the file. Please change some names to get a result"
|
||||
alertMessage.innerHTML = message;
|
||||
|
||||
fileReader.readAsText(fileToLoad, "UTF-8");
|
||||
$("#alert").dialog({title: "Burgs bulk renaming", width:"22em",
|
||||
position: {my: "center", at: "center", of: "svg"},
|
||||
buttons: {
|
||||
Cancel: function() {$(this).dialog("close");},
|
||||
Confirm: function() {
|
||||
for (let i=0; i < change.length; i++) {
|
||||
const id = change[i].id;
|
||||
pack.burgs[id].name = change[i].name;
|
||||
burgLabels.select("[data-id='" + id + "']").text(change[i].name);
|
||||
}
|
||||
$(this).dialog("close");
|
||||
burgsEditorAddLines();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function triggerAllBurgsRemove() {
|
||||
|
|
|
|||
|
|
@ -537,14 +537,8 @@ function editCultures() {
|
|||
data += nameBases[base].name + "\n";
|
||||
});
|
||||
|
||||
const dataBlob = new Blob([data], {type: "text/plain"});
|
||||
const url = window.URL.createObjectURL(dataBlob);
|
||||
const link = document.createElement("a");
|
||||
document.body.appendChild(link);
|
||||
link.download = getFileName("Cultures") + ".csv";
|
||||
link.href = url;
|
||||
link.click();
|
||||
window.setTimeout(function() {window.URL.revokeObjectURL(url);}, 2000);
|
||||
const name = getFileName("Cultures") + ".csv";
|
||||
downloadFile(data, name);
|
||||
}
|
||||
|
||||
function closeCulturesEditor() {
|
||||
|
|
|
|||
|
|
@ -222,15 +222,9 @@ function editDiplomacy() {
|
|||
$("#alert").dialog({title: "Relations history", position: {my: "center", at: "center", of: "svg"},
|
||||
buttons: {
|
||||
Save: function() {
|
||||
const text = this.querySelector("div").innerText.split("\n").join("\r\n");
|
||||
const dataBlob = new Blob([text], {type: "text/plain"});
|
||||
const url = window.URL.createObjectURL(dataBlob);
|
||||
const link = document.createElement("a");
|
||||
document.body.appendChild(link);
|
||||
link.download = getFileName("Relations history") + ".txt";
|
||||
link.href = url;
|
||||
link.click();
|
||||
window.setTimeout(function() {window.URL.revokeObjectURL(url);}, 2000);
|
||||
const data = this.querySelector("div").innerText.split("\n").join("\r\n");
|
||||
const name = getFileName("Relations history") + ".txt";
|
||||
downloadFile(data, name);
|
||||
},
|
||||
Clear: function() {pack.states[0].diplomacy = []; $(this).dialog("close");},
|
||||
Close: function() {$(this).dialog("close");}
|
||||
|
|
@ -277,14 +271,8 @@ function editDiplomacy() {
|
|||
data += s.name + "," + rels.join(",") + "\n";
|
||||
});
|
||||
|
||||
const dataBlob = new Blob([data], {type: "text/plain"});
|
||||
const url = window.URL.createObjectURL(dataBlob);
|
||||
const link = document.createElement("a");
|
||||
document.body.appendChild(link);
|
||||
link.download = getFileName("Relations") + ".csv";
|
||||
link.href = url;
|
||||
link.click();
|
||||
window.setTimeout(function() {window.URL.revokeObjectURL(url);}, 2000);
|
||||
const name = getFileName("Relations") + ".csv";
|
||||
downloadFile(data, name);
|
||||
}
|
||||
|
||||
function closeDiplomacyEditor() {
|
||||
|
|
|
|||
|
|
@ -125,9 +125,10 @@ function addBurg(point) {
|
|||
const state = cells.state[cell];
|
||||
const feature = cells.f[cell];
|
||||
|
||||
const temple = pack.states[state].form === "Theocracy";
|
||||
const population = Math.max((cells.s[cell] + cells.road[cell]) / 3 + i / 1000 + cell % 100 / 1000, .1);
|
||||
|
||||
pack.burgs.push({name, cell, x, y, state, i, culture, feature, capital: 0, port: 0, population});
|
||||
pack.burgs.push({name, cell, x, y, state, i, culture, feature, capital: 0, port: 0, temple, population});
|
||||
cells.burg[cell] = i;
|
||||
|
||||
const townSize = burgIcons.select("#towns").attr("size") || 0.5;
|
||||
|
|
@ -254,7 +255,8 @@ function drawLegend(name, data) {
|
|||
const width = bbox.width + colOffset * 2;
|
||||
const height = bbox.height + colOffset / 2 + vOffset;
|
||||
|
||||
legend.insert("rect", ":first-child").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height)
|
||||
legend.insert("rect", ":first-child").attr("id", "legendBox")
|
||||
.attr("x", 0).attr("y", 0).attr("width", width).attr("height", height)
|
||||
.attr("fill", backClr).attr("fill-opacity", opacity);
|
||||
|
||||
fitLegendBox();
|
||||
|
|
@ -272,6 +274,7 @@ function fitLegendBox() {
|
|||
|
||||
// draw legend with the same data, but using different settings
|
||||
function redrawLegend() {
|
||||
if (!legend.select("rect").size()) return;
|
||||
const name = legend.select("#legendLabel").text();
|
||||
const data = legend.attr("data").split("|").map(l => l.split(","));
|
||||
drawLegend(name, data);
|
||||
|
|
@ -526,4 +529,32 @@ function unfog() {
|
|||
defs.select("#fog").selectAll("path").remove();
|
||||
fogging.selectAll("path").remove();
|
||||
fogging.attr("display", "none");
|
||||
}
|
||||
|
||||
function getFileName(dataType) {
|
||||
const name = mapName.value;
|
||||
const type = dataType ? dataType + " " : "";
|
||||
const date = new Date();
|
||||
const datFormatter = new Intl.DateTimeFormat("en", {month: "short", day: "numeric"});
|
||||
const timeFormatter = new Intl.DateTimeFormat("ru", {hour: "numeric", minute: "numeric"});
|
||||
const day = datFormatter.format(date).replace(" ", "");
|
||||
const time = timeFormatter.format(date).replace(":", "-");
|
||||
return name + " " + type + day + " " + time;
|
||||
}
|
||||
|
||||
function downloadFile(data, name, type = "text/plain") {
|
||||
const dataBlob = new Blob([data], {type});
|
||||
const url = window.URL.createObjectURL(dataBlob);
|
||||
const link = document.createElement("a");
|
||||
link.download = name;
|
||||
link.href = url;
|
||||
link.click();
|
||||
window.setTimeout(() => window.URL.revokeObjectURL(url), 2000);
|
||||
}
|
||||
|
||||
function uploadFile(el, callback) {
|
||||
const fileReader = new FileReader();
|
||||
fileReader.readAsText(el.files[0], "UTF-8");
|
||||
el.value = "";
|
||||
fileReader.onload = loaded => callback(loaded.target.result);
|
||||
}
|
||||
|
|
@ -103,7 +103,7 @@ function showMapTooltip(point, e, i, g) {
|
|||
|
||||
// covering elements
|
||||
if (layerIsOn("togglePrec") && land) tip("Annual Precipitation: "+ getFriendlyPrecipitation(i)); else
|
||||
if (layerIsOn("togglePopulation")) tip("Population: "+ getFriendlyPopulation(i)); else
|
||||
if (layerIsOn("togglePopulation")) tip(getPopulationTip(i)); else
|
||||
if (layerIsOn("toggleTemp")) tip("Temperature: " + convertTemperature(grid.cells.temp[g])); else
|
||||
if (layerIsOn("toggleBiomes") && pack.cells.biome[i]) tip("Biome: " + biomesData.name[pack.cells.biome[i]]); else
|
||||
if (layerIsOn("toggleReligions") && pack.cells.religion[i]) {
|
||||
|
|
@ -119,7 +119,6 @@ function showMapTooltip(point, e, i, g) {
|
|||
} else
|
||||
if (layerIsOn("toggleCultures") && pack.cells.culture[i]) tip("Culture: " + pack.cultures[pack.cells.culture[i]].name); else
|
||||
if (layerIsOn("toggleHeight")) tip("Height: " + getFriendlyHeight(point));
|
||||
//if (pack.cells.t[i] === 1 && !tooltip.textContent) tip("Click to edit the coastline");
|
||||
}
|
||||
|
||||
// get cell info on mouse move
|
||||
|
|
@ -176,7 +175,13 @@ function getFriendlyPrecipitation(i) {
|
|||
function getFriendlyPopulation(i) {
|
||||
const rural = pack.cells.pop[i] * populationRate.value;
|
||||
const urban = pack.cells.burg[i] ? pack.burgs[pack.cells.burg[i]].population * populationRate.value * urbanization.value : 0;
|
||||
return si(rural+urban);
|
||||
return `${si(rural+urban)} (${si(rural)} rural, urban ${si(urban)})`;
|
||||
}
|
||||
|
||||
function getPopulationTip(i) {
|
||||
const rural = pack.cells.pop[i] * populationRate.value;
|
||||
const urban = pack.cells.burg[i] ? pack.burgs[pack.cells.burg[i]].population * populationRate.value * urbanization.value : 0;
|
||||
return `Cell population: ${si(rural+urban)}; Rural: ${si(rural)}; Urban: ${si(urban)}`;
|
||||
}
|
||||
|
||||
// assign lock behavior
|
||||
|
|
@ -225,10 +230,10 @@ function stored(option) {
|
|||
}
|
||||
|
||||
// apply drop-down menu option. If the value is not in options, add it
|
||||
function applyOption(select, option) {
|
||||
const custom = !Array.from(select.options).some(o => o.value == option);
|
||||
if (custom) select.options.add(new Option(option, option));
|
||||
select.value = option;
|
||||
function applyOption(select, id, name = id) {
|
||||
const custom = !Array.from(select.options).some(o => o.value == id);
|
||||
if (custom) select.options.add(new Option(name, id));
|
||||
select.value = id;
|
||||
}
|
||||
|
||||
// show info about the generator in a popup
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@
|
|||
"use strict";
|
||||
|
||||
function editHeightmap() {
|
||||
const heights = viewbox.select("#heights").size()
|
||||
? viewbox.select("#heights")
|
||||
: viewbox.insert("g", "#terrs").attr("id", "heights");
|
||||
|
||||
void function selectEditMode() {
|
||||
alertMessage.innerHTML = `<p>Heightmap is a core element on which all other data (rivers, burgs, states etc) is based.
|
||||
So the best edit approach is to <i>erase</i> the secondary data and let the system automatically regenerate it on edit completion.</p>
|
||||
|
|
@ -53,14 +57,12 @@ function editHeightmap() {
|
|||
heightmapEditMode.innerHTML = type;
|
||||
|
||||
if (type === "erase") {
|
||||
terrs.attr("mask", null);
|
||||
undraw();
|
||||
changeOnlyLand.checked = false;
|
||||
} else if (type === "keep") {
|
||||
viewbox.selectAll("#landmass, #lakes").attr("display", "none");
|
||||
changeOnlyLand.checked = true;
|
||||
} else if (type === "risk") {
|
||||
terrs.attr("mask", null);
|
||||
defs.selectAll("#land, #water").selectAll("path").remove();
|
||||
viewbox.selectAll("#coastline path, #lakes path, #oceanLayers path").remove();
|
||||
changeOnlyLand.checked = false;
|
||||
|
|
@ -108,7 +110,7 @@ function getHeight(h) {
|
|||
|
||||
// Exit customization mode
|
||||
function finalizeHeightmap() {
|
||||
if (terrs.selectAll("*").size() < 200) {
|
||||
if (heights.selectAll("*").size() < 200) {
|
||||
tip("Insufficient land area! There should be at least 200 land cells to finalize the heightmap", null, "error");
|
||||
return;
|
||||
}
|
||||
|
|
@ -131,7 +133,7 @@ function getHeight(h) {
|
|||
else if (mode === "risk") restoreRiskedData();
|
||||
|
||||
// restore initial layers
|
||||
terrs.selectAll("*").remove();
|
||||
heights.selectAll("*").remove();
|
||||
turnButtonOff("toggleHeight");
|
||||
document.getElementById("mapLayers").querySelectorAll("li").forEach(function(e) {
|
||||
if (editHeightmap.layers.includes(e.id) && !layerIsOn(e.id)) e.click(); // turn on
|
||||
|
|
@ -143,7 +145,6 @@ function getHeight(h) {
|
|||
function regenerateErasedData() {
|
||||
console.group("Edit Heightmap");
|
||||
console.time("regenerateErasedData");
|
||||
terrs.attr("mask", "url(#land)");
|
||||
|
||||
const change = changeHeights.checked;
|
||||
markFeatures();
|
||||
|
|
@ -171,6 +172,10 @@ function getHeight(h) {
|
|||
Cultures.expand();
|
||||
BurgsAndStates.generate();
|
||||
Religions.generate();
|
||||
BurgsAndStates.defineStateForms();
|
||||
BurgsAndStates.generateProvinces();
|
||||
BurgsAndStates.defineBurgFeatures();
|
||||
|
||||
drawStates();
|
||||
drawBorders();
|
||||
BurgsAndStates.drawStateLabels();
|
||||
|
|
@ -190,7 +195,6 @@ function getHeight(h) {
|
|||
function restoreRiskedData() {
|
||||
console.group("Edit Heightmap");
|
||||
console.time("restoreRiskedData");
|
||||
terrs.attr("mask", "url(#land)");
|
||||
|
||||
// assign pack data to grid cells
|
||||
const l = grid.cells.i.length;
|
||||
|
|
@ -374,7 +378,7 @@ function getHeight(h) {
|
|||
function mockHeightmap() {
|
||||
const data = renderOcean.checked ? grid.cells.i : grid.cells.i.filter(i => grid.cells.h[i] >= 20);
|
||||
const scheme = getColorScheme();
|
||||
terrs.selectAll("polygon").data(data).join("polygon").attr("points", d => getGridPolygon(d))
|
||||
heights.selectAll("polygon").data(data).join("polygon").attr("points", d => getGridPolygon(d))
|
||||
.attr("id", d => "cell"+d).attr("fill", d => getColor(grid.cells.h[d], scheme));
|
||||
}
|
||||
|
||||
|
|
@ -384,9 +388,9 @@ function getHeight(h) {
|
|||
const scheme = getColorScheme();
|
||||
|
||||
selection.forEach(function(i) {
|
||||
let cell = terrs.select("#cell"+i);
|
||||
let cell = heights.select("#cell"+i);
|
||||
if (!ocean && grid.cells.h[i] < 20) {cell.remove(); return;}
|
||||
if (!cell.size()) cell = terrs.append("polygon").attr("points", getGridPolygon(i)).attr("id", "cell"+i);
|
||||
if (!cell.size()) cell = heights.append("polygon").attr("points", getGridPolygon(i)).attr("id", "cell"+i);
|
||||
cell.attr("fill", getColor(grid.cells.h[i], scheme));
|
||||
});
|
||||
}
|
||||
|
|
@ -569,10 +573,10 @@ function getHeight(h) {
|
|||
const someHeights = grid.cells.h.some(h => h);
|
||||
if (!someHeights) {tip("Heightmap is already cleared, please do not click twice if not required", false, "error"); return;}
|
||||
grid.cells.h = new Uint8Array(grid.cells.i.length);
|
||||
terrs.selectAll("*").remove();
|
||||
heights.selectAll("*").remove();
|
||||
updateHistory();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
function openTemplateEditor() {
|
||||
|
|
@ -614,8 +618,8 @@ function getHeight(h) {
|
|||
document.getElementById("templateSelect").addEventListener("change", e => selectTemplate(e));
|
||||
document.getElementById("templateRun").addEventListener("click", executeTemplate);
|
||||
document.getElementById("templateSave").addEventListener("click", downloadTemplate);
|
||||
document.getElementById("templateLoad").addEventListener("click", e => templateToLoad.click());
|
||||
document.getElementById("templateToLoad").addEventListener("change", uploadTemplate);
|
||||
document.getElementById("templateLoad").addEventListener("click", () => templateToLoad.click());
|
||||
document.getElementById("templateToLoad").addEventListener("change", function() {uploadFile(this, uploadTemplate)});
|
||||
|
||||
function addStepOnClick(e) {
|
||||
if (e.target.tagName !== "BUTTON") return;
|
||||
|
|
@ -868,7 +872,7 @@ function getHeight(h) {
|
|||
const steps = body.querySelectorAll("#templateBody > div");
|
||||
if (!steps.length) return;
|
||||
|
||||
let stepsData = "";
|
||||
let data = "";
|
||||
for (const s of steps) {
|
||||
if (s.style.opacity == .5) continue;
|
||||
const type = s.getAttribute("data-type");
|
||||
|
|
@ -881,37 +885,23 @@ function getHeight(h) {
|
|||
const x = templateX ? templateX.value : "0";
|
||||
const templateY = s.querySelector(".templateY");
|
||||
const y = templateY ? templateY.value : "0";
|
||||
stepsData += `${type} ${count} ${arg3} ${x} ${y}\r\n`;
|
||||
data += `${type} ${count} ${arg3} ${x} ${y}\r\n`;
|
||||
}
|
||||
|
||||
const dataBlob = new Blob([stepsData], {type: "text/plain"});
|
||||
const url = window.URL.createObjectURL(dataBlob);
|
||||
const link = document.createElement("a");
|
||||
link.download = "template_" + Date.now() + ".txt";
|
||||
link.href = url;
|
||||
link.click();
|
||||
const name = "template_" + Date.now() + ".txt";
|
||||
downloadFile(data, name);
|
||||
}
|
||||
|
||||
function uploadTemplate(c) {
|
||||
const body = document.getElementById("templateBody");
|
||||
const el = document.getElementById("templateToLoad");
|
||||
const fileToLoad = el.files[0];
|
||||
el.value = "";
|
||||
const fileReader = new FileReader();
|
||||
|
||||
fileReader.onload = function(e) {
|
||||
const dataLoaded = e.target.result;
|
||||
const steps = dataLoaded.split("\r\n");
|
||||
if (!steps.length) {tip("Cannot parse the template, please check the file", false, "error"); return;}
|
||||
body.innerHTML = "";
|
||||
for (const s of steps) {
|
||||
const step = s.split(" ");
|
||||
if (step.length !== 5) {console.error("Cannot parse step, wrong arguments count", s); continue;}
|
||||
addStep(step[0], step[1], step[2], step[3], step[4]);
|
||||
}
|
||||
function uploadTemplate(dataLoaded) {
|
||||
const steps = dataLoaded.split("\r\n");
|
||||
if (!steps.length) {tip("Cannot parse the template, please check the file", false, "error"); return;}
|
||||
templateBody.innerHTML = "";
|
||||
for (const s of steps) {
|
||||
const step = s.split(" ");
|
||||
if (step.length !== 5) {console.error("Cannot parse step, wrong arguments count", s); continue;}
|
||||
addStep(step[0], step[1], step[2], step[3], step[4]);
|
||||
}
|
||||
|
||||
fileReader.readAsText(fileToLoad, "UTF-8");
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -930,14 +920,20 @@ function getHeight(h) {
|
|||
canvas.width = graphWidth;
|
||||
canvas.height = graphHeight;
|
||||
document.body.insertBefore(canvas, optionsContainer);
|
||||
|
||||
const img = new Image;
|
||||
img.id = "image";
|
||||
img.style.display = "none";
|
||||
document.body.appendChild(img);
|
||||
|
||||
setOverlayOpacity(0);
|
||||
|
||||
|
||||
document.getElementById("convertImageLoad").classList.add("glow"); // add glow effect
|
||||
tip('Image Converter is opened. Upload the image and assign the colors to desired heights', true, "warn"); // main tip
|
||||
|
||||
// remove all heights
|
||||
grid.cells.h = new Uint8Array(grid.cells.i.length);
|
||||
terrs.selectAll("*").remove();
|
||||
heights.selectAll("*").remove();
|
||||
updateHistory();
|
||||
|
||||
if (modules.openImageConverter) return;
|
||||
|
|
@ -973,7 +969,6 @@ function getHeight(h) {
|
|||
const file = this.files[0];
|
||||
this.value = ""; // reset input value to get triggered if the file is re-uploaded
|
||||
const reader = new FileReader();
|
||||
const img = new Image;
|
||||
|
||||
img.onload = function() {
|
||||
const ctx = document.getElementById("canvas").getContext("2d");
|
||||
|
|
@ -992,7 +987,7 @@ function getHeight(h) {
|
|||
const imageData = ctx.getImageData(0, 0, graphWidth, graphHeight);
|
||||
const data = imageData.data;
|
||||
|
||||
terrs.selectAll("*").remove();
|
||||
heights.selectAll("*").remove();
|
||||
d3.select("#imageConverter").selectAll("div.color-div").remove();
|
||||
colorsSelect.style.display = "block";
|
||||
colorsUnassigned.style.display = "block";
|
||||
|
|
@ -1008,7 +1003,8 @@ function getHeight(h) {
|
|||
const cmap = MMCQ.quantize(gridColors, count);
|
||||
const usedColors = new Set();
|
||||
|
||||
terrs.selectAll("polygon").data(grid.cells.i).join("polygon").attr("points", d => getGridPolygon(d))
|
||||
heights.selectAll("polygon").data(grid.cells.i).join("polygon")
|
||||
.attr("points", d => getGridPolygon(d))
|
||||
.attr("id", d => "cell"+d).attr("fill", d => {
|
||||
const clr = `rgb(${cmap.nearest(gridColors[d])})`;
|
||||
usedColors.add(clr);
|
||||
|
|
@ -1031,7 +1027,7 @@ function getHeight(h) {
|
|||
}
|
||||
|
||||
function colorClicked() {
|
||||
terrs.selectAll(".selectedCell").attr("class", null);
|
||||
heights.selectAll(".selectedCell").attr("class", null);
|
||||
const unselect = this.classList.contains("selectedColor");
|
||||
|
||||
const selectedColor = imageConverter.querySelector("div.selectedColor");
|
||||
|
|
@ -1050,8 +1046,8 @@ function getHeight(h) {
|
|||
}
|
||||
|
||||
const color = this.getAttribute("data-color");
|
||||
terrs.selectAll("polygon.selectedCell").classed("selectedCell", 0);
|
||||
terrs.selectAll("polygon[fill='" + color + "']").classed("selectedCell", 1);
|
||||
heights.selectAll("polygon.selectedCell").classed("selectedCell", 0);
|
||||
heights.selectAll("polygon[fill='" + color + "']").classed("selectedCell", 1);
|
||||
}
|
||||
|
||||
function assignHeight() {
|
||||
|
|
@ -1062,7 +1058,7 @@ function getHeight(h) {
|
|||
selectedColor.setAttribute("data-color", rgb);
|
||||
selectedColor.setAttribute("data-height", height);
|
||||
|
||||
terrs.selectAll(".selectedCell").each(function() {
|
||||
heights.selectAll(".selectedCell").each(function() {
|
||||
this.setAttribute("fill", rgb);
|
||||
this.setAttribute("data-height", height);
|
||||
});
|
||||
|
|
@ -1086,7 +1082,7 @@ function getHeight(h) {
|
|||
const colorTo = color(1 - (normalized < .2 ? normalized-.05 : normalized));
|
||||
const heightTo = normalized * 100;
|
||||
|
||||
terrs.selectAll("polygon[fill='" + colorFrom + "']").attr("fill", colorTo).attr("data-height", heightTo);
|
||||
heights.selectAll("polygon[fill='" + colorFrom + "']").attr("fill", colorTo).attr("data-height", heightTo);
|
||||
el.style.backgroundColor = colorTo;
|
||||
el.setAttribute("data-color", colorTo);
|
||||
el.setAttribute("data-height", heightTo);
|
||||
|
|
@ -1098,9 +1094,9 @@ function getHeight(h) {
|
|||
}
|
||||
|
||||
function setConvertColorsNumber() {
|
||||
const number = +prompt(`Please provide a desired number of colors. Min value is 3, max is 255. An actual number depends on color scheme and may vary from desired number`,
|
||||
convertColors.value);
|
||||
if (Number.isNaN(number) || number < 3 || number > 255) {tip("The number should be an integer in 3-255 range", false, "error"); return;}
|
||||
const text = "Please provide a desired number of colors. Min value is 3, max is 255. An actual number depends on color scheme and may vary from desired number";
|
||||
const number = Math.max(Math.min(+prompt(text, convertColors.value), 255), 3);
|
||||
if (Number.isNaN(number)) {tip("The number should be an integer", false, "error"); return;}
|
||||
convertColors.value = number;
|
||||
heightsFromImage(number);
|
||||
}
|
||||
|
|
@ -1113,6 +1109,8 @@ function getHeight(h) {
|
|||
function closeImageConverter() {
|
||||
const canvas = document.getElementById("canvas");
|
||||
if (canvas) canvas.remove(); else return;
|
||||
const img = document.getElementById("image");
|
||||
if (img) img.remove(); else return;
|
||||
|
||||
d3.select("#imageConverter").selectAll("div.color-div").remove();
|
||||
colorsAssigned.style.display = "none";
|
||||
|
|
@ -1121,13 +1119,13 @@ function getHeight(h) {
|
|||
viewbox.style("cursor", "default").on(".drag", null);
|
||||
tip('Heightmap edit mode is active. Click on "Exit Customization" to finalize the heightmap', true);
|
||||
|
||||
terrs.selectAll("polygon").each(function() {
|
||||
heights.selectAll("polygon").each(function() {
|
||||
const height = +this.getAttribute("data-height") || 0;
|
||||
const i = +this.id.slice(4);
|
||||
grid.cells.h[i] = height;
|
||||
});
|
||||
|
||||
terrs.selectAll("polygon").remove();
|
||||
heights.selectAll("polygon").remove();
|
||||
updateHeightmap();
|
||||
}
|
||||
|
||||
|
|
@ -1201,7 +1199,6 @@ function getHeight(h) {
|
|||
|
||||
const imgBig = canvas.toDataURL("image/png");
|
||||
const link = document.createElement("a");
|
||||
link.target = "_blank";
|
||||
link.download = getFileName("Heightmap") + ".png";
|
||||
link.href = imgBig;
|
||||
document.body.appendChild(link);
|
||||
|
|
|
|||
|
|
@ -134,10 +134,10 @@ function drawHeightmap() {
|
|||
const paths = new Array(101).fill("");
|
||||
|
||||
const scheme = getColorScheme();
|
||||
const terracing = +styleHeightmapTerracingInput.value / 10; // add additional shifted darker layer for pseudo-3d effect
|
||||
const skip = +styleHeightmapSkipOutput.value + 1;
|
||||
const simplification = +styleHeightmapSimplificationInput.value;
|
||||
switch (+styleHeightmapCurveInput.value) {
|
||||
const terracing = terrs.attr("terracing") / 10; // add additional shifted darker layer for pseudo-3d effect
|
||||
const skip = +terrs.attr("skip") + 1;
|
||||
const simplification = +terrs.attr("relax");
|
||||
switch (+terrs.attr("curve")) {
|
||||
case 0: lineGen.curve(d3.curveBasisClosed); break;
|
||||
case 1: lineGen.curve(d3.curveLinear); break;
|
||||
case 2: lineGen.curve(d3.curveStep); break;
|
||||
|
|
@ -199,11 +199,12 @@ function drawHeightmap() {
|
|||
}
|
||||
|
||||
function getColorScheme() {
|
||||
const scheme = styleHeightmapSchemeInput.value;
|
||||
const scheme = terrs.attr("scheme");
|
||||
if (scheme === "bright") return d3.scaleSequential(d3.interpolateSpectral);
|
||||
if (scheme === "light") return d3.scaleSequential(d3.interpolateRdYlGn);
|
||||
if (scheme === "green") return d3.scaleSequential(d3.interpolateGreens);
|
||||
if (scheme === "monochrome") return d3.scaleSequential(d3.interpolateGreys);
|
||||
return d3.scaleSequential(d3.interpolateSpectral);
|
||||
}
|
||||
|
||||
function getColor(value, scheme = getColorScheme()) {
|
||||
|
|
@ -977,12 +978,11 @@ function toggleCompass(event) {
|
|||
turnButtonOn("toggleCompass");
|
||||
$('#compass').fadeIn();
|
||||
if (!compass.selectAll("*").size()) {
|
||||
const tr = `translate(80 80) scale(.25)`;
|
||||
d3.select("#rose").attr("transform", tr);
|
||||
compass.append("use").attr("xlink:href","#rose");
|
||||
// prolongate rose lines
|
||||
svg.select("g#rose > g#sL > line#sL1").attr("y1", -19000).attr("y2", 19000);
|
||||
svg.select("g#rose > g#sL > line#sL2").attr("x1", -19000).attr("x2", 19000);
|
||||
shiftCompass();
|
||||
}
|
||||
if (event && event.ctrlKey) editStyle("compass");
|
||||
} else {
|
||||
|
|
@ -1010,8 +1010,11 @@ function toggleTexture(event) {
|
|||
turnButtonOn("toggleTexture");
|
||||
// append default texture image selected by default. Don't append on load to not harm performance
|
||||
if (!texture.selectAll("*").size()) {
|
||||
texture.append("image").attr("x", 0).attr("y", 0).attr("width", graphWidth).attr("height", graphHeight)
|
||||
.attr('xlink:href', getDefaultTexture()).attr('preserveAspectRatio', "xMidYMid slice");
|
||||
const x = +styleTextureShiftX.value, y = +styleTextureShiftY.value;
|
||||
const href = styleTextureInput.value === "default" ? getDefaultTexture() : setBase64Texture(styleTextureInput.value);
|
||||
texture.append("image").attr("id", "textureImage")
|
||||
.attr("x", x).attr("y", y).attr("width", graphWidth - x).attr("height", graphHeight - y)
|
||||
.attr("xlink:href", href).attr("preserveAspectRatio", "xMidYMid slice");
|
||||
}
|
||||
$('#texture').fadeIn();
|
||||
zoom.scaleBy(svg, 1.00001); // enforce browser re-draw
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@ function editNamesbase() {
|
|||
document.getElementById("namesbaseAdd").addEventListener("click", namesbaseAdd);
|
||||
document.getElementById("namesbaseDefault").addEventListener("click", namesbaseRestoreDefault);
|
||||
document.getElementById("namesbaseDownload").addEventListener("click", namesbaseDownload);
|
||||
document.getElementById("namesbaseUpload").addEventListener("click", e => namesbaseToLoad.click());
|
||||
document.getElementById("namesbaseToLoad").addEventListener("change", namesbaseUpload);
|
||||
document.getElementById("namesbaseUpload").addEventListener("click", () => namesbaseToLoad.click());
|
||||
document.getElementById("namesbaseToLoad").addEventListener("change", function() {uploadFile(this, namesbaseUpload)});
|
||||
|
||||
createBasesList();
|
||||
updateInputs();
|
||||
|
|
@ -138,36 +138,23 @@ function editNamesbase() {
|
|||
}
|
||||
|
||||
function namesbaseDownload() {
|
||||
const data = nameBases.map((b,i) => `${b.name}|${b.min}|${b.max}|${b.d}|${b.m}|${b.b}`);
|
||||
const dataBlob = new Blob([data.join("\r\n")], {type:"text/plain"});
|
||||
const url = window.URL.createObjectURL(dataBlob);
|
||||
const link = document.createElement("a");
|
||||
link.download = getFileName("Namesbase") + ".txt";
|
||||
link.href = url;
|
||||
link.click();
|
||||
const data = nameBases.map((b,i) => `${b.name}|${b.min}|${b.max}|${b.d}|${b.m}|${b.b}`).join("\r\n");
|
||||
const name = getFileName("Namesbase") + ".txt";
|
||||
downloadFile(data, name);
|
||||
}
|
||||
|
||||
function namesbaseUpload() {
|
||||
const fileToLoad = this.files[0];
|
||||
this.value = "";
|
||||
const fileReader = new FileReader();
|
||||
function namesbaseUpload(dataLoaded) {
|
||||
const data = dataLoaded.split("\r\n");
|
||||
if (!data || !data[0]) {tip("Cannot load a namesbase. Please check the data format", false, "error"); return;}
|
||||
|
||||
fileReader.onload = function(fileLoadedEvent) {
|
||||
const dataLoaded = fileLoadedEvent.target.result;
|
||||
const data = dataLoaded.split("\r\n");
|
||||
if (!data || !data[0]) {tip("Cannot load a namesbase. Please check the data format", false, "error"); return;}
|
||||
Names.clearChains();
|
||||
nameBases = [];
|
||||
data.forEach(d => {
|
||||
const e = d.split("|");
|
||||
nameBases.push({name:e[0], min:e[1], max:e[2], d:e[3], m:e[4], b:e[5]});
|
||||
});
|
||||
|
||||
Names.clearChains();
|
||||
nameBases = [];
|
||||
data.forEach(d => {
|
||||
const e = d.split("|");
|
||||
nameBases.push({name:e[0], min:e[1], max:e[2], d:e[3], m:e[4], b:e[5]});
|
||||
});
|
||||
|
||||
createBasesList();
|
||||
updateInputs();
|
||||
};
|
||||
|
||||
fileReader.readAsText(fileToLoad, "UTF-8");
|
||||
}
|
||||
createBasesList();
|
||||
updateInputs();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ function editNotes(id, name) {
|
|||
document.getElementById("notesFocus").addEventListener("click", validateHighlightElement);
|
||||
document.getElementById("notesDownload").addEventListener("click", downloadLegends);
|
||||
document.getElementById("notesUpload").addEventListener("click", () => legendsToLoad.click());
|
||||
document.getElementById("legendsToLoad").addEventListener("change", uploadLegends);
|
||||
document.getElementById("legendsToLoad").addEventListener("change", function() {uploadFile(this, uploadLegends)});
|
||||
document.getElementById("notesRemove").addEventListener("click", triggernotesRemove);
|
||||
|
||||
function changeObject() {
|
||||
|
|
@ -104,30 +104,16 @@ function editNotes(id, name) {
|
|||
}
|
||||
|
||||
function downloadLegends() {
|
||||
const legendString = JSON.stringify(notes);
|
||||
const dataBlob = new Blob([legendString],{type:"text/plain"});
|
||||
const url = window.URL.createObjectURL(dataBlob);
|
||||
const link = document.createElement("a");
|
||||
link.download = getFileName("Notes") + ".txt";
|
||||
link.href = url;
|
||||
link.click();
|
||||
const data = JSON.stringify(notes);
|
||||
const name = getFileName("Notes") + ".txt";
|
||||
downloadFile(data, name);
|
||||
}
|
||||
|
||||
function uploadLegends() {
|
||||
const fileToLoad = this.files[0];
|
||||
this.value = "";
|
||||
const fileReader = new FileReader();
|
||||
fileReader.onload = function(fileLoadedEvent) {
|
||||
const dataLoaded = fileLoadedEvent.target.result;
|
||||
if (dataLoaded) {
|
||||
notes = JSON.parse(dataLoaded);
|
||||
document.getElementById("notesSelect").options.length = 0;
|
||||
editNotes(notes[0].id, notes[0].name);
|
||||
} else {
|
||||
tip("Cannot load a file. Please check the data format", false, "error")
|
||||
}
|
||||
}
|
||||
fileReader.readAsText(fileToLoad, "UTF-8");
|
||||
function uploadLegends(dataLoaded) {
|
||||
if (!dataLoaded) {tip("Cannot load the file. Please check the data format", false, "error"); return;}
|
||||
notes = JSON.parse(dataLoaded);
|
||||
document.getElementById("notesSelect").options.length = 0;
|
||||
editNotes(notes[0].id, notes[0].name);
|
||||
}
|
||||
|
||||
function triggernotesRemove() {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// UI module to control the options (style, preferences)
|
||||
// UI module to control the options (preferences)
|
||||
"use strict";
|
||||
|
||||
$("#optionsContainer").draggable({handle: ".drag-trigger", snap: "svg", snapMode: "both"});
|
||||
|
|
@ -82,605 +82,6 @@ function collapse(e) {
|
|||
}
|
||||
}
|
||||
|
||||
// select element to be edited
|
||||
function editStyle(element, group) {
|
||||
showOptions();
|
||||
styleTab.click();
|
||||
styleElementSelect.value = element;
|
||||
if (group) styleGroupSelect.options.add(new Option(group, group, true, true));
|
||||
selectStyleElement();
|
||||
|
||||
styleElementSelect.classList.add("glow");
|
||||
if (group) styleGroupSelect.classList.add("glow");
|
||||
setTimeout(() => {
|
||||
styleElementSelect.classList.remove("glow");
|
||||
if (group) styleGroupSelect.classList.remove("glow");
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
// Toggle style sections on element select
|
||||
styleElementSelect.addEventListener("change", selectStyleElement);
|
||||
function selectStyleElement() {
|
||||
const sel = styleElementSelect.value;
|
||||
let el = d3.select("#"+sel);
|
||||
|
||||
styleElements.querySelectorAll("tbody").forEach(e => e.style.display = "none"); // hide all sections
|
||||
const off = el.style("display") === "none" || !el.selectAll("*").size(); // check if layer is off
|
||||
if (off) {
|
||||
styleIsOff.style.display = "block";
|
||||
setTimeout(() => styleIsOff.style.display = "none", 1500);
|
||||
}
|
||||
|
||||
// active group element
|
||||
const group = styleGroupSelect.value;
|
||||
if (sel == "ocean") el = oceanLayers.select("rect");
|
||||
else if (sel == "routes" || sel == "labels" || sel === "coastline" || sel == "lakes" || sel == "anchors" || sel == "burgIcons" || sel == "borders") {
|
||||
el = d3.select("#"+sel).select("g#"+group).size()
|
||||
? d3.select("#"+sel).select("g#"+group)
|
||||
: d3.select("#"+sel).select("g");
|
||||
}
|
||||
|
||||
if (sel !== "landmass" && sel !== "legend") {
|
||||
// opacity
|
||||
styleOpacity.style.display = "block";
|
||||
styleOpacityInput.value = styleOpacityOutput.value = el.attr("opacity") || 1;
|
||||
|
||||
// filter
|
||||
styleFilter.style.display = "block";
|
||||
if (sel == "ocean") el = oceanLayers;
|
||||
styleFilterInput.value = el.attr("filter") || "";
|
||||
}
|
||||
|
||||
// fill
|
||||
if (sel === "rivers" || sel === "lakes" || sel === "landmass" || sel === "prec" || sel === "fogging") {
|
||||
styleFill.style.display = "block";
|
||||
styleFillInput.value = styleFillOutput.value = el.attr("fill");
|
||||
}
|
||||
|
||||
// stroke color and width
|
||||
if (sel === "routes" || sel === "lakes" || sel === "borders" || sel === "relig" || sel === "cults" || sel === "cells" || sel === "gridOverlay" || sel === "coastline" || sel === "prec" || sel === "icons" || sel === "coordinates"|| sel === "zones") {
|
||||
styleStroke.style.display = "block";
|
||||
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke");
|
||||
styleStrokeWidth.style.display = "block";
|
||||
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
|
||||
}
|
||||
|
||||
// stroke width
|
||||
if (sel === "fogging") {
|
||||
styleStrokeWidth.style.display = "block";
|
||||
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
|
||||
}
|
||||
|
||||
// stroke dash
|
||||
if (sel === "routes" || sel === "borders" || sel === "gridOverlay" || sel === "temperature" || sel === "legend" || sel === "population" || sel === "coordinates"|| sel === "zones") {
|
||||
styleStrokeDash.style.display = "block";
|
||||
styleStrokeDasharrayInput.value = el.attr("stroke-dasharray") || "";
|
||||
styleStrokeLinecapInput.value = el.attr("stroke-linecap") || "inherit";
|
||||
}
|
||||
|
||||
// clipping
|
||||
if (sel === "cells" || sel === "gridOverlay" || sel === "coordinates" || sel === "compass" || sel === "terrain" || sel === "temperature" || sel === "routes" || sel === "texture" || sel === "biomes"|| sel === "zones") {
|
||||
styleClipping.style.display = "block";
|
||||
styleClippingInput.value = el.attr("mask") || "";
|
||||
}
|
||||
|
||||
// shift (translate)
|
||||
if (sel === "gridOverlay") {
|
||||
styleShift.style.display = "block";
|
||||
const tr = parseTransform(el.attr("transform"));
|
||||
styleShiftX.value = tr[0];
|
||||
styleShiftY.value = tr[1];
|
||||
}
|
||||
|
||||
if (sel === "compass") {
|
||||
styleCompass.style.display = "block";
|
||||
const tr = parseTransform(d3.select("#rose").attr("transform"));
|
||||
styleCompassShiftX.value = tr[0];
|
||||
styleCompassShiftY.value = tr[1];
|
||||
styleCompassSizeInput.value = styleCompassSizeOutput.value = tr[2];
|
||||
}
|
||||
|
||||
// show specific sections
|
||||
if (sel === "terrs") styleHeightmap.style.display = "block";
|
||||
if (sel === "gridOverlay") styleGrid.style.display = "block";
|
||||
if (sel === "terrain") styleRelief.style.display = "block";
|
||||
if (sel === "texture") styleTexture.style.display = "block";
|
||||
if (sel === "routes" || sel === "labels" || sel == "anchors" || sel == "burgIcons" || sel === "coastline" || sel === "lakes" || sel === "borders") styleGroup.style.display = "block";
|
||||
if (sel === "markers") styleMarkers.style.display = "block";
|
||||
|
||||
if (sel === "population") {
|
||||
stylePopulation.style.display = "block";
|
||||
stylePopulationRuralStrokeInput.value = stylePopulationRuralStrokeOutput.value = population.select("#rural").attr("stroke");
|
||||
stylePopulationUrbanStrokeInput.value = stylePopulationUrbanStrokeOutput.value = population.select("#urban").attr("stroke");
|
||||
styleStrokeWidth.style.display = "block";
|
||||
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
|
||||
}
|
||||
|
||||
if (sel === "regions") {
|
||||
styleStates.style.display = "block";
|
||||
styleStatesHaloWidth.value = styleStatesHaloWidthOutput.value = statesHalo.attr("stroke-width");
|
||||
styleStatesHaloOpacity.value = styleStatesHaloOpacityOutput.value = statesHalo.attr("opacity");
|
||||
}
|
||||
|
||||
if (sel === "labels") {
|
||||
styleFill.style.display = "block";
|
||||
styleStroke.style.display = "block";
|
||||
styleStrokeWidth.style.display = "block";
|
||||
loadDefaultFonts();
|
||||
styleFont.style.display = "block";
|
||||
styleSize.style.display = "block";
|
||||
styleVisibility.style.display = "block";
|
||||
styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#3e3e4b";
|
||||
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3a3a3a";
|
||||
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0;
|
||||
styleSelectFont.value = fonts.indexOf(el.attr("data-font"));
|
||||
styleInputFont.style.display = "none";
|
||||
styleInputFont.value = "";
|
||||
styleFontSize.value = el.attr("data-size");
|
||||
}
|
||||
|
||||
if (sel == "burgIcons") {
|
||||
styleFill.style.display = "block";
|
||||
styleStroke.style.display = "block";
|
||||
styleStrokeWidth.style.display = "block";
|
||||
styleStrokeDash.style.display = "block";
|
||||
styleRadius.style.display = "block";
|
||||
styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#ffffff";
|
||||
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3e3e4b";
|
||||
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || .24;
|
||||
styleStrokeDasharrayInput.value = el.attr("stroke-dasharray") || "";
|
||||
styleStrokeLinecapInput.value = el.attr("stroke-linecap") || "inherit";
|
||||
styleRadiusInput.value = el.attr("size") || 1;
|
||||
}
|
||||
|
||||
if (sel == "anchors") {
|
||||
styleFill.style.display = "block";
|
||||
styleStroke.style.display = "block";
|
||||
styleStrokeWidth.style.display = "block";
|
||||
styleIconSize.style.display = "block";
|
||||
styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#ffffff";
|
||||
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3e3e4b";
|
||||
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || .24;
|
||||
styleIconSizeInput.value = el.attr("size") || 2;
|
||||
}
|
||||
|
||||
if (sel === "legend") {
|
||||
styleStroke.style.display = "block";
|
||||
styleStrokeWidth.style.display = "block";
|
||||
loadDefaultFonts();
|
||||
styleFont.style.display = "block";
|
||||
styleSize.style.display = "block";
|
||||
styleLegend.style.display = "block";
|
||||
|
||||
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#111111";
|
||||
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || .5;
|
||||
styleSelectFont.value = fonts.indexOf(el.attr("data-font"));
|
||||
styleInputFont.style.display = "none";
|
||||
styleInputFont.value = "";
|
||||
styleFontSize.value = el.attr("data-size");
|
||||
}
|
||||
|
||||
if (sel === "ocean") {
|
||||
styleOcean.style.display = "block";
|
||||
styleOceanBack.value = styleOceanBackOutput.value = svg.attr("background-color");
|
||||
styleOceanFore.value = styleOceanForeOutput.value = oceanLayers.select("rect").attr("fill");
|
||||
}
|
||||
|
||||
if (sel === "coastline") {
|
||||
if (styleGroupSelect.value === "sea_island") {
|
||||
styleCoastline.style.display = "block";
|
||||
if (styleCoastlineAuto.checked) styleFilter.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
if (sel === "temperature") {
|
||||
styleStrokeWidth.style.display = "block";
|
||||
styleTemperature.style.display = "block";
|
||||
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
|
||||
styleTemperatureFillOpacityInput.value = styleTemperatureFillOpacityOutput.value = el.attr("fill-opacity") || .1;
|
||||
styleTemperatureFillInput.value = styleTemperatureFillOutput.value = el.attr("fill") || "#000";
|
||||
styleTemperatureFontSizeInput.value = styleTemperatureFontSizeOutput.value = el.attr("font-size") || "8px";;
|
||||
}
|
||||
|
||||
if (sel === "coordinates") {
|
||||
styleSize.style.display = "block";
|
||||
styleFontSize.value = el.attr("data-size");
|
||||
}
|
||||
|
||||
// update group options
|
||||
styleGroupSelect.options.length = 0; // remove all options
|
||||
if (sel === "routes" || sel === "labels" || sel === "coastline" || sel === "lakes" || sel === "anchors" || sel === "burgIcons" || sel === "borders") {
|
||||
document.getElementById(sel).querySelectorAll("g").forEach(el => {
|
||||
if (el.id === "burgLabels") return;
|
||||
const count = el.childElementCount;
|
||||
styleGroupSelect.options.add(new Option(`${el.id} (${count})`, el.id, false, false));
|
||||
});
|
||||
styleGroupSelect.value = el.attr("id");
|
||||
} else {
|
||||
styleGroupSelect.options.add(new Option(sel, sel, false, true));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Handle style inputs change
|
||||
styleGroupSelect.addEventListener("change", selectStyleElement);
|
||||
|
||||
function getEl() {
|
||||
const el = styleElementSelect.value, g = styleGroupSelect.value;
|
||||
if (g === el) return svg.select("#"+el); else return svg.select("#"+el).select("#"+g);
|
||||
}
|
||||
|
||||
styleFillInput.addEventListener("input", function() {
|
||||
styleFillOutput.value = this.value;
|
||||
getEl().attr('fill', this.value);
|
||||
});
|
||||
|
||||
styleStrokeInput.addEventListener("input", function() {
|
||||
styleStrokeOutput.value = this.value;
|
||||
getEl().attr('stroke', this.value);
|
||||
});
|
||||
|
||||
styleStrokeWidthInput.addEventListener("input", function() {
|
||||
styleStrokeWidthOutput.value = this.value;
|
||||
getEl().attr('stroke-width', +this.value);
|
||||
});
|
||||
|
||||
styleStrokeDasharrayInput.addEventListener("input", function() {
|
||||
getEl().attr('stroke-dasharray', this.value);
|
||||
});
|
||||
|
||||
styleStrokeLinecapInput.addEventListener("change", function() {
|
||||
getEl().attr('stroke-linecap', this.value);
|
||||
});
|
||||
|
||||
styleOpacityInput.addEventListener("input", function() {
|
||||
styleOpacityOutput.value = this.value;
|
||||
getEl().attr('opacity', this.value);
|
||||
});
|
||||
|
||||
styleFilterInput.addEventListener("change", function() {
|
||||
if (styleGroupSelect.value === "ocean") {oceanLayers.attr('filter', this.value); return;}
|
||||
getEl().attr('filter', this.value);
|
||||
});
|
||||
|
||||
styleTextureInput.addEventListener("change", function() {
|
||||
if (this.value === "none") texture.select("image").attr("xlink:href", ""); else
|
||||
if (this.value === "default") texture.select("image").attr("xlink:href", getDefaultTexture()); else
|
||||
setBase64Texture(this.value);
|
||||
});
|
||||
|
||||
styleTextureShiftX.addEventListener("input", function() {
|
||||
texture.select("image").attr("x", this.value).attr("width", graphWidth - this.valueAsNumber);
|
||||
});
|
||||
|
||||
styleTextureShiftY.addEventListener("input", function() {
|
||||
texture.select("image").attr("y", this.value).attr("height", graphHeight - this.valueAsNumber);
|
||||
});
|
||||
|
||||
styleClippingInput.addEventListener("change", function() {
|
||||
getEl().attr('mask', this.value);
|
||||
});
|
||||
|
||||
styleGridType.addEventListener("change", function() {
|
||||
if (layerIsOn("toggleGrid")) drawGrid();
|
||||
calculateFriendlyGridSize();
|
||||
});
|
||||
|
||||
styleGridSize.addEventListener("input", function() {
|
||||
if (layerIsOn("toggleGrid")) drawGrid();
|
||||
calculateFriendlyGridSize();
|
||||
});
|
||||
|
||||
function calculateFriendlyGridSize() {
|
||||
const square = styleGridType.value === "square";
|
||||
const size = square ? styleGridSize.value : styleGridSize.value * Math.cos(30 * Math.PI / 180) * 2;
|
||||
const friendly = `${rn(size * distanceScaleInput.value, 2)} ${distanceUnitInput.value}`;
|
||||
styleGridSizeFriendly.value = friendly;
|
||||
}
|
||||
|
||||
styleShiftX.addEventListener("input", shiftElement);
|
||||
styleShiftY.addEventListener("input", shiftElement);
|
||||
|
||||
function shiftElement() {
|
||||
const x = styleShiftX.value || 0;
|
||||
const y = styleShiftY.value || 0;
|
||||
getEl().attr("transform", `translate(${x},${y})`);
|
||||
}
|
||||
|
||||
styleOceanBack.addEventListener("input", function() {
|
||||
svg.style("background-color", this.value);
|
||||
styleOceanBackOutput.value = this.value;
|
||||
});
|
||||
|
||||
styleOceanFore.addEventListener("input", function() {
|
||||
oceanLayers.select("rect").attr("fill", this.value);
|
||||
styleOceanForeOutput.value = this.value;
|
||||
});
|
||||
|
||||
styleOceanPattern.addEventListener("change", function() {
|
||||
svg.select("pattern#oceanic rect").attr("filter", this.value);
|
||||
});
|
||||
|
||||
outlineLayersInput.addEventListener("change", function() {
|
||||
oceanLayers.selectAll("path").remove();
|
||||
OceanLayers();
|
||||
});
|
||||
|
||||
styleReliefSet.addEventListener("change", function() {
|
||||
ReliefIcons();
|
||||
if (!layerIsOn("toggleRelief")) toggleRelief();
|
||||
});
|
||||
|
||||
styleReliefSizeInput.addEventListener("input", function() {
|
||||
styleReliefSizeOutput.value = this.value;
|
||||
const size = +this.value;
|
||||
|
||||
terrain.selectAll("use").each(function(d) {
|
||||
const newSize = this.getAttribute("data-size") * size;
|
||||
const shift = (newSize - +this.getAttribute("width")) / 2;
|
||||
this.setAttribute("width", newSize);
|
||||
this.setAttribute("height", newSize);
|
||||
const x = +this.getAttribute("x");
|
||||
const y = +this.getAttribute("y");
|
||||
this.setAttribute("x", x - shift);
|
||||
this.setAttribute("y", y - shift);
|
||||
});
|
||||
});
|
||||
|
||||
styleReliefDensityInput.addEventListener("input", function() {
|
||||
styleReliefDensityOutput.value = rn(this.value * 100) + "%";
|
||||
ReliefIcons();
|
||||
if (!layerIsOn("toggleRelief")) toggleRelief();
|
||||
});
|
||||
|
||||
styleTemperatureFillOpacityInput.addEventListener("input", function() {
|
||||
temperature.attr("fill-opacity", this.value);
|
||||
styleTemperatureFillOpacityOutput.value = this.value;
|
||||
});
|
||||
|
||||
styleTemperatureFontSizeInput.addEventListener("input", function() {
|
||||
temperature.attr("font-size", this.value + "px");
|
||||
styleTemperatureFontSizeOutput.value = this.value + "px";
|
||||
});
|
||||
|
||||
styleTemperatureFillInput.addEventListener("input", function() {
|
||||
temperature.attr("fill", this.value);
|
||||
styleTemperatureFillOutput.value = this.value;
|
||||
});
|
||||
|
||||
stylePopulationRuralStrokeInput.addEventListener("input", function() {
|
||||
population.select("#rural").attr("stroke", this.value);
|
||||
stylePopulationRuralStrokeOutput.value = this.value;
|
||||
});
|
||||
|
||||
stylePopulationUrbanStrokeInput.addEventListener("input", function() {
|
||||
population.select("#urban").attr("stroke", this.value);
|
||||
stylePopulationUrbanStrokeOutput.value = this.value;
|
||||
});
|
||||
|
||||
styleCompassSizeInput.addEventListener("input", function() {
|
||||
styleCompassSizeOutput.value = this.value;
|
||||
shiftCompass();
|
||||
});
|
||||
|
||||
styleCompassShiftX.addEventListener("input", shiftCompass);
|
||||
styleCompassShiftY.addEventListener("input", shiftCompass);
|
||||
|
||||
function shiftCompass() {
|
||||
const tr = `translate(${styleCompassShiftX.value} ${styleCompassShiftY.value}) scale(${styleCompassSizeInput.value})`;
|
||||
d3.select("#rose").attr("transform", tr);
|
||||
}
|
||||
|
||||
styleLegendColItems.addEventListener("input", function() {
|
||||
styleLegendColItemsOutput.value = this.value;
|
||||
redrawLegend();
|
||||
});
|
||||
|
||||
styleLegendBack.addEventListener("input", function() {
|
||||
legend.select("rect").attr("fill", this.value)
|
||||
});
|
||||
|
||||
styleLegendOpacity.addEventListener("input", function() {
|
||||
styleLegendOpacityOutput.value = this.value;
|
||||
legend.select("rect").attr("fill-opacity", this.value)
|
||||
});
|
||||
|
||||
styleSelectFont.addEventListener("change", changeFont);
|
||||
function changeFont() {
|
||||
const value = styleSelectFont.value;
|
||||
const font = fonts[value].split(':')[0].replace(/\+/g, " ");
|
||||
getEl().attr("font-family", font).attr("data-font", fonts[value]);
|
||||
if (styleElementSelect.value === "legend") redrawLegend();
|
||||
}
|
||||
|
||||
styleFontAdd.addEventListener("click", function() {
|
||||
if (styleInputFont.style.display === "none") {
|
||||
styleInputFont.style.display = "inline-block";
|
||||
styleInputFont.focus();
|
||||
styleSelectFont.style.display = "none";
|
||||
} else {
|
||||
styleInputFont.style.display = "none";
|
||||
styleSelectFont.style.display = "inline-block";
|
||||
}
|
||||
});
|
||||
|
||||
styleInputFont.addEventListener("change", function() {
|
||||
if (!this.value) {tip("Please provide a valid Google font name or link to a @font-face declaration"); return;}
|
||||
fetchFonts(this.value).then(fetched => {
|
||||
if (!fetched) return;
|
||||
styleFontAdd.click();
|
||||
styleInputFont.value = "";
|
||||
if (fetched !== 1) return;
|
||||
styleSelectFont.value = fonts.length-1;
|
||||
changeFont(); // auto-change font if 1 font is fetched
|
||||
});
|
||||
});
|
||||
|
||||
styleFontSize.addEventListener("change", function() {
|
||||
changeFontSize(+this.value);
|
||||
});
|
||||
|
||||
styleFontPlus.addEventListener("click", function() {
|
||||
const size = Math.max(rn(getEl().attr("data-size") * 1.1, 2), 1);
|
||||
changeFontSize(size);
|
||||
});
|
||||
|
||||
styleFontMinus.addEventListener("click", function() {
|
||||
const size = Math.max(rn(getEl().attr("data-size") * .9, 2), 1);
|
||||
changeFontSize(size);
|
||||
});
|
||||
|
||||
function changeFontSize(size) {
|
||||
const legend = styleElementSelect.value === "legend";
|
||||
const coords = styleElementSelect.value === "coordinates";
|
||||
|
||||
const desSize = legend ? size : coords ? rn(size / scale ** .8, 2) : rn(size + (size / scale));
|
||||
getEl().attr("data-size", size).attr("font-size", desSize);
|
||||
styleFontSize.value = size;
|
||||
if (legend) redrawLegend();
|
||||
}
|
||||
|
||||
styleRadiusInput.addEventListener("change", function() {
|
||||
changeRadius(+this.value);
|
||||
});
|
||||
|
||||
styleRadiusPlus.addEventListener("click", function() {
|
||||
const size = Math.max(rn(getEl().attr("size") * 1.1, 2), .2);
|
||||
changeRadius(size);
|
||||
});
|
||||
|
||||
styleRadiusMinus.addEventListener("click", function() {
|
||||
const size = Math.max(rn(getEl().attr("size") * .9, 2), .2);
|
||||
changeRadius(size);
|
||||
});
|
||||
|
||||
function changeRadius(size) {
|
||||
getEl().attr("size", size)
|
||||
getEl().selectAll("circle").each(function() {this.setAttribute("r", size)});
|
||||
styleRadiusInput.value = size;
|
||||
const group = getEl().attr("id");
|
||||
burgLabels.select("g#"+group).selectAll("text").each(function() {this.setAttribute("dy", `${size * -1.5}px`)});
|
||||
changeIconSize(size * 2, group); // change also anchor icons
|
||||
}
|
||||
|
||||
styleIconSizeInput.addEventListener("change", function() {
|
||||
changeIconSize(+this.value);
|
||||
});
|
||||
|
||||
styleIconSizePlus.addEventListener("click", function() {
|
||||
const size = Math.max(rn(getEl().attr("size") * 1.1, 2), .2);
|
||||
changeIconSize(size);
|
||||
});
|
||||
|
||||
styleIconSizeMinus.addEventListener("click", function() {
|
||||
const size = Math.max(rn(getEl().attr("size") * .9, 2), .2);
|
||||
changeIconSize(size);
|
||||
});
|
||||
|
||||
function changeIconSize(size, group) {
|
||||
const el = group ? anchors.select("#"+group) : getEl();
|
||||
const oldSize = +el.attr("size");
|
||||
const shift = (size - oldSize) / 2;
|
||||
el.attr("size", size);
|
||||
el.selectAll("use").each(function() {
|
||||
const x = +this.getAttribute("x");
|
||||
const y = +this.getAttribute("y");
|
||||
this.setAttribute("x", x - shift);
|
||||
this.setAttribute("y", y - shift);
|
||||
this.setAttribute("width", size);
|
||||
this.setAttribute("height", size);
|
||||
});;
|
||||
styleIconSizeInput.value = size;
|
||||
}
|
||||
|
||||
styleStatesHaloWidth.addEventListener("input", function() {
|
||||
styleStatesHaloWidthOutput.value = this.value;
|
||||
statesHalo.attr("stroke-width", +this.value);
|
||||
});
|
||||
|
||||
styleStatesHaloOpacity.addEventListener("input", function() {
|
||||
styleStatesHaloOpacityOutput.value = this.value;
|
||||
statesHalo.attr("opacity", +this.value);
|
||||
});
|
||||
|
||||
// request to restore default style on button click
|
||||
function askToRestoreDefaultStyle() {
|
||||
if (customization) {tip("Please exit the customization mode first", false, "error"); return;}
|
||||
alertMessage.innerHTML = "Are you sure you want to restore default style for all elements?";
|
||||
$("#alert").dialog({resizable: false, title: "Restore default style",
|
||||
buttons: {
|
||||
Restore: function() {
|
||||
applyDefaultStyle();
|
||||
selectStyleElement();
|
||||
$(this).dialog("close");
|
||||
},
|
||||
Cancel: function() {$(this).dialog("close");}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// request a URL to image to be used as a texture
|
||||
function textureProvideURL() {
|
||||
alertMessage.innerHTML = `Provide an image URL to be used as a texture:
|
||||
<input id="textureURL" type="url" style="width: 24em" placeholder="http://www.example.com/image.jpg" oninput="fetchTextureURL(this.value)">
|
||||
<div style="border: 1px solid darkgrey; height: 144px; margin-top: 2px"><canvas id="preview" width="256px" height="144px"></canvas></div>`;
|
||||
$("#alert").dialog({resizable: false, title: "Load custom texture", width: "26em",
|
||||
buttons: {
|
||||
Apply: function() {
|
||||
const name = textureURL.value.split("/").pop();
|
||||
if (!name || name === "") {tip("Please provide a valid URL", false, "error"); return;}
|
||||
const opt = document.createElement("option");
|
||||
opt.value = textureURL.value;
|
||||
opt.text = name.slice(0, 20);
|
||||
styleTextureInput.add(opt);
|
||||
styleTextureInput.value = textureURL.value;
|
||||
setBase64Texture(textureURL.value);
|
||||
zoom.scaleBy(svg, 1.00001); // enforce browser re-draw
|
||||
$(this).dialog("close");
|
||||
},
|
||||
Cancel: function() {$(this).dialog("close");}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setBase64Texture(url) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onload = function() {
|
||||
var reader = new FileReader();
|
||||
reader.onloadend = function() {
|
||||
texture.select("image").attr("xlink:href", reader.result);
|
||||
}
|
||||
reader.readAsDataURL(xhr.response);
|
||||
};
|
||||
xhr.open('GET', url);
|
||||
xhr.responseType = 'blob';
|
||||
xhr.send();
|
||||
};
|
||||
|
||||
function fetchTextureURL(url) {
|
||||
console.log("Provided URL is", url);
|
||||
const img = new Image();
|
||||
img.onload = function () {
|
||||
const canvas = document.getElementById("preview");
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
||||
};
|
||||
img.src = url;
|
||||
}
|
||||
|
||||
// Style map filters handler
|
||||
mapFilters.addEventListener("click", applyMapFilter);
|
||||
function applyMapFilter(event) {
|
||||
if (event.target.tagName !== "BUTTON") return;
|
||||
const button = event.target;
|
||||
svg.attr("filter", null);
|
||||
if (button.classList.contains("pressed")) {button.classList.remove("pressed"); return;}
|
||||
mapFilters.querySelectorAll(".pressed").forEach(button => button.classList.remove("pressed"));
|
||||
button.classList.add("pressed");
|
||||
svg.attr("filter", "url(#filter-" + button.id + ")");
|
||||
}
|
||||
|
||||
// Option listeners
|
||||
const optionsContent = document.getElementById("optionsContent");
|
||||
optionsContent.addEventListener("input", function(event) {
|
||||
|
|
@ -883,6 +284,9 @@ function applyStoredOptions() {
|
|||
if (input) input.value = value;
|
||||
if (output) output.value = value;
|
||||
lock(stored);
|
||||
|
||||
// add saved style presets to options
|
||||
if(stored.slice(0,5) === "style") applyOption(stylePreset, stored, stored.slice(5));
|
||||
}
|
||||
|
||||
if (localStorage.getItem("winds")) winds = localStorage.getItem("winds").split(",").map(w => +w);
|
||||
|
|
@ -907,10 +311,11 @@ function randomizeOptions() {
|
|||
if (!locked("power")) powerInput.value = powerOutput.value = gauss(3, 2, 0, 10);
|
||||
if (!locked("neutral")) neutralInput.value = neutralOutput.value = rn(1 + Math.random(), 1);
|
||||
if (!locked("cultures")) culturesInput.value = culturesOutput.value = gauss(12, 3, 5, 30);
|
||||
if (!locked("culturesSet")) culturesSet.value = ra(Array.from(culturesSet.options)).value;
|
||||
changeCultureSet();
|
||||
|
||||
// 'Configure World' settings
|
||||
if (!locked("prec")) precInput.value = precOutput.value = gauss(100, 20, 5, 500);
|
||||
if (!locked("prec")) precInput.value = precOutput.value = gauss(120, 20, 5, 500);
|
||||
const tMax = +temperatureEquatorOutput.max, tMin = +temperatureEquatorOutput.min; // temperature extremes
|
||||
if (!locked("temperatureEquator")) temperatureEquatorOutput.value = temperatureEquatorInput.value = rand(tMax-6, tMax);
|
||||
if (!locked("temperaturePole")) temperaturePoleOutput.value = temperaturePoleInput.value = rand(tMin, tMin+10);
|
||||
|
|
@ -932,91 +337,6 @@ function restoreDefaultOptions() {
|
|||
location.reload();
|
||||
}
|
||||
|
||||
// FONTS
|
||||
// fetch default fonts if not done before
|
||||
function loadDefaultFonts() {
|
||||
if (!$('link[href="fonts.css"]').length) {
|
||||
$("head").append('<link rel="stylesheet" type="text/css" href="fonts.css">');
|
||||
const fontsToAdd = ["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"];
|
||||
fontsToAdd.forEach(function(f) {if (fonts.indexOf(f) === -1) fonts.push(f);});
|
||||
updateFontOptions();
|
||||
}
|
||||
}
|
||||
|
||||
function fetchFonts(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (url === "") {
|
||||
tip("Use a direct link to any @font-face declaration or just font name to fetch from Google Fonts");
|
||||
return;
|
||||
}
|
||||
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;
|
||||
}
|
||||
const fetched = addFonts(url).then(fetched => {
|
||||
if (fetched === undefined) {
|
||||
tip("Cannot fetch font for this value!", false, "error");
|
||||
return;
|
||||
}
|
||||
if (fetched === 0) {
|
||||
tip("Already in the fonts list!", false, "error");
|
||||
return;
|
||||
}
|
||||
updateFontOptions();
|
||||
if (fetched === 1) {
|
||||
tip("Font " + fonts[fonts.length - 1] + " is fetched");
|
||||
} else if (fetched > 1) {
|
||||
tip(fetched + " fonts are added to the list");
|
||||
}
|
||||
resolve(fetched);
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
function addFonts(url) {
|
||||
$("head").append('<link rel="stylesheet" type="text/css" href="' + url + '">');
|
||||
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 font = family.replace(/['"]+/g, '').replace(/ /g, "+");
|
||||
let weight = rule.style.getPropertyValue('font-weight');
|
||||
if (weight !== "400") font += ":" + weight;
|
||||
if (fonts.indexOf(font) == -1) {
|
||||
fonts.push(font);
|
||||
fetched++
|
||||
}
|
||||
};
|
||||
let fetched = 0;
|
||||
for (let r of styleSheet.cssRules) {FontRule(r);}
|
||||
document.head.removeChild(s);
|
||||
return fetched;
|
||||
})
|
||||
.catch(function() {});
|
||||
}
|
||||
|
||||
// Update font list for Label and Burg Editors
|
||||
function updateFontOptions() {
|
||||
styleSelectFont.innerHTML = "";
|
||||
for (let i=0; i < fonts.length; i++) {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = i;
|
||||
const font = fonts[i].split(':')[0].replace(/\+/g, " ");
|
||||
opt.style.fontFamily = opt.innerHTML = font;
|
||||
styleSelectFont.add(opt);
|
||||
}
|
||||
}
|
||||
|
||||
// Sticked menu Options listeners
|
||||
document.getElementById("sticked").addEventListener("click", function(event) {
|
||||
const id = event.target.id;
|
||||
|
|
@ -1039,6 +359,7 @@ document.getElementById("sticked").addEventListener("click", function(event) {
|
|||
});
|
||||
|
||||
function regeneratePrompt() {
|
||||
if (customization) {tip("New map cannot be generated when edit mode is active, please exit the mode and retry", false, "error"); return;}
|
||||
const workingTime = (Date.now() - last(mapHistory).created) / 60000; // minutes
|
||||
if (workingTime < 5) {regenerateMap(); return;}
|
||||
|
||||
|
|
@ -1100,5 +421,5 @@ document.getElementById("mapToLoad").addEventListener("change", function() {
|
|||
const fileToLoad = this.files[0];
|
||||
this.value = "";
|
||||
closeDialogs();
|
||||
uploadFile(fileToLoad);
|
||||
uploadMap(fileToLoad);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -405,7 +405,7 @@ function editProvinces() {
|
|||
const displayed = provinceNameEditorCustomForm.style.display === "inline-block";
|
||||
provinceNameEditorCustomForm.style.display = displayed ? "none" : "inline-block";
|
||||
provinceNameEditorSelectForm.style.display = displayed ? "inline-block" : "none";
|
||||
if (displayed && value) applyOption(provinceNameEditorSelectForm, value);
|
||||
if (displayed) applyOption(provinceNameEditorSelectForm, value);
|
||||
}
|
||||
|
||||
function regenerateFullName() {
|
||||
|
|
@ -761,9 +761,10 @@ function editProvinces() {
|
|||
|
||||
function downloadProvincesData() {
|
||||
const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value;
|
||||
let data = "Id,Province,Form,State,Color,Capital,Area "+unit+",Population\n"; // headers
|
||||
let data = "Id,Province,Form,State,Color,Capital,Area "+unit+",Total Population,Rural Population,Urban Population\n"; // headers
|
||||
|
||||
body.querySelectorAll(":scope > div").forEach(function(el) {
|
||||
let key = parseInt(el.dataset.id)
|
||||
data += el.dataset.id + ",";
|
||||
data += el.dataset.name + ",";
|
||||
data += el.dataset.form + ",";
|
||||
|
|
@ -771,17 +772,13 @@ function editProvinces() {
|
|||
data += el.dataset.color + ",";
|
||||
data += el.dataset.capital + ",";
|
||||
data += el.dataset.area + ",";
|
||||
data += el.dataset.population + "\n";
|
||||
data += el.dataset.population + ",";
|
||||
data += `${Math.round(pack.provinces[key].rural*populationRate.value)},`
|
||||
data += `${Math.round(pack.provinces[key].urban*populationRate.value * urbanization.value)}\n`
|
||||
});
|
||||
|
||||
const dataBlob = new Blob([data], {type: "text/plain"});
|
||||
const url = window.URL.createObjectURL(dataBlob);
|
||||
const link = document.createElement("a");
|
||||
document.body.appendChild(link);
|
||||
link.download = getFileName("Provinces") + ".csv";
|
||||
link.href = url;
|
||||
link.click();
|
||||
window.setTimeout(function() {window.URL.revokeObjectURL(url);}, 2000);
|
||||
const name = getFileName("Provinces") + ".csv";
|
||||
downloadFile(data, name);
|
||||
}
|
||||
|
||||
function removeAllProvinces() {
|
||||
|
|
|
|||
|
|
@ -611,14 +611,8 @@ function editReligions() {
|
|||
data += el.dataset.population + "\n";
|
||||
});
|
||||
|
||||
const dataBlob = new Blob([data], {type: "text/plain"});
|
||||
const url = window.URL.createObjectURL(dataBlob);
|
||||
const link = document.createElement("a");
|
||||
document.body.appendChild(link);
|
||||
link.download = getFileName("Religions") + ".csv";
|
||||
link.href = url;
|
||||
link.click();
|
||||
window.setTimeout(function() {window.URL.revokeObjectURL(url);}, 2000);
|
||||
const name = getFileName("Religions") + ".csv";
|
||||
downloadFile(data, name);
|
||||
}
|
||||
|
||||
function closeReligionsEditor() {
|
||||
|
|
|
|||
|
|
@ -257,7 +257,7 @@ function editStates() {
|
|||
const displayed = stateNameEditorCustomForm.style.display === "inline-block";
|
||||
stateNameEditorCustomForm.style.display = displayed ? "none" : "inline-block";
|
||||
stateNameEditorSelectForm.style.display = displayed ? "inline-block" : "none";
|
||||
if (displayed && value) applyOption(stateNameEditorSelectForm, value);
|
||||
if (displayed) applyOption(stateNameEditorSelectForm, value);
|
||||
}
|
||||
|
||||
function regenerateFullName() {
|
||||
|
|
@ -869,9 +869,10 @@ function editStates() {
|
|||
|
||||
function downloadStatesData() {
|
||||
const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value;
|
||||
let data = "Id,State,Color,Capital,Culture,Type,Expansionism,Cells,Burgs,Area "+unit+",Population\n"; // headers
|
||||
let data = "Id,State,Color,Capital,Culture,Type,Expansionism,Cells,Burgs,Area "+unit+",Total Population,Rural Population,Urban Population\n"; // headers
|
||||
|
||||
body.querySelectorAll(":scope > div").forEach(function(el) {
|
||||
let key = parseInt(el.dataset.id)
|
||||
data += el.dataset.id + ",";
|
||||
data += el.dataset.name + ",";
|
||||
data += el.dataset.color + ",";
|
||||
|
|
@ -882,17 +883,13 @@ function editStates() {
|
|||
data += el.dataset.cells + ",";
|
||||
data += el.dataset.burgs + ",";
|
||||
data += el.dataset.area + ",";
|
||||
data += el.dataset.population + "\n";
|
||||
data += el.dataset.population + ",";
|
||||
data += `${Math.round(pack.states[key].rural*populationRate.value)},`;
|
||||
data += `${Math.round(pack.states[key].urban*populationRate.value * urbanization.value)}\n`;
|
||||
});
|
||||
|
||||
const dataBlob = new Blob([data], {type: "text/plain"});
|
||||
const url = window.URL.createObjectURL(dataBlob);
|
||||
const link = document.createElement("a");
|
||||
document.body.appendChild(link);
|
||||
link.download = getFileName("States") + ".csv";
|
||||
link.href = url;
|
||||
link.click();
|
||||
window.setTimeout(function() {window.URL.revokeObjectURL(url);}, 2000);
|
||||
const name = getFileName("States") + ".csv";
|
||||
downloadFile(data, name);
|
||||
}
|
||||
|
||||
function closeStatesEditor() {
|
||||
|
|
|
|||
1089
modules/ui/style.js
Normal file
1089
modules/ui/style.js
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -66,9 +66,9 @@ function processFeatureRegeneration(button) {
|
|||
}
|
||||
|
||||
function regenerateRivers() {
|
||||
const heights = new Uint8Array(pack.cells.h);
|
||||
const heights = new Float32Array(pack.cells.h);
|
||||
Rivers.generate();
|
||||
pack.cells.h = new Uint8Array(heights);
|
||||
pack.cells.h = new Float32Array(heights);
|
||||
if (!layerIsOn("toggleRivers")) toggleRivers();
|
||||
}
|
||||
|
||||
|
|
@ -95,8 +95,8 @@ function regenerateBurgs() {
|
|||
|
||||
const score = new Int16Array(cells.s.map(s => s * Math.random())); // cell score for capitals placement
|
||||
const sorted = cells.i.filter(i => score[i] > 0 && cells.culture[i]).sort((a, b) => score[b] - score[a]); // filtered and sorted array of indexes
|
||||
const burgsCount = manorsInput.value == 1000 ? rn(sorted.length / 10 / (grid.points.length / 10000) ** .8) + states.length : +manorsInput.value + states.length;
|
||||
const spacing = (graphWidth + graphHeight) / 200 / (burgsCount / 500); // base min distance between towns
|
||||
const burgsCount = manorsInput.value == 1000 ? rn(sorted.length / 5 / (grid.points.length / 10000) ** .8) + states.length : +manorsInput.value + states.length;
|
||||
const spacing = (graphWidth + graphHeight) / 150 / (burgsNumber ** .7 / 66); // base min distance between towns
|
||||
|
||||
for (let i=0; i < sorted.length && burgs.length < burgsCount; i++) {
|
||||
const id = burgs.length;
|
||||
|
|
@ -128,6 +128,7 @@ function regenerateBurgs() {
|
|||
});
|
||||
|
||||
BurgsAndStates.specifyBurgs();
|
||||
BurgsAndStates.defineBurgFeatures();
|
||||
BurgsAndStates.drawBurgs();
|
||||
Routes.regenerate();
|
||||
|
||||
|
|
@ -156,6 +157,25 @@ function regenerateStates() {
|
|||
b.capital = 0;
|
||||
});
|
||||
|
||||
unfog();
|
||||
|
||||
// if desired states number is 0
|
||||
if (regionsInput.value == 0) {
|
||||
tip(`Cannot generate zero states. Please check the <i>States Number</i> option`, false, "warn");
|
||||
pack.states = pack.states.slice(0,1); // remove all except of neutrals
|
||||
pack.states[0].diplomacy = []; // clear diplomacy
|
||||
pack.provinces = [0]; // remove all provinces
|
||||
pack.cells.state = new Uint16Array(pack.cells.i.length); // reset cells data
|
||||
borders.selectAll("path").remove(); // remove borders
|
||||
regions.selectAll("path").remove(); // remove states fill
|
||||
labels.select("#states").selectAll("text"); // remove state labels
|
||||
defs.select("#textPaths").selectAll("path[id*='stateLabel']").remove(); // remove state labels paths
|
||||
|
||||
if (document.getElementById("burgsEditorRefresh").offsetParent) burgsEditorRefresh.click();
|
||||
if (document.getElementById("statesEditorRefresh").offsetParent) statesEditorRefresh.click();
|
||||
return;
|
||||
}
|
||||
|
||||
const neutral = pack.states[0].name;
|
||||
const count = Math.min(+regionsInput.value, burgs.length);
|
||||
let spacing = (graphWidth + graphHeight) / 2 / count; // min distance between capitals
|
||||
|
|
@ -183,7 +203,6 @@ function regenerateStates() {
|
|||
return {i, name, type, capital:capital.i, center:capital.cell, culture, expansionism};
|
||||
});
|
||||
|
||||
unfog();
|
||||
BurgsAndStates.expandStates();
|
||||
BurgsAndStates.normalizeStates();
|
||||
BurgsAndStates.collectStatistics();
|
||||
|
|
@ -374,7 +393,7 @@ function addRiverOnClick() {
|
|||
Keep: function() {$(this).dialog("close");},
|
||||
Restore: function() {
|
||||
$(this).dialog("close");
|
||||
pack.cells.h = new Uint8Array(heights);
|
||||
pack.cells.h = new Float32Array(heights);
|
||||
if (layerIsOn("toggleHeight")) drawHeightmap();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ function editWorld() {
|
|||
elevateLakes();
|
||||
const heights = new Uint8Array(pack.cells.h);
|
||||
Rivers.generate();
|
||||
pack.cells.h = new Uint8Array(heights);
|
||||
pack.cells.h = new Float32Array(heights);
|
||||
defineBiomes();
|
||||
|
||||
if (layerIsOn("toggleTemp")) drawTemp();
|
||||
|
|
|
|||
|
|
@ -345,14 +345,8 @@ function editZones() {
|
|||
data += el.dataset.population + "\n";
|
||||
});
|
||||
|
||||
const dataBlob = new Blob([data], {type: "text/plain"});
|
||||
const url = window.URL.createObjectURL(dataBlob);
|
||||
const link = document.createElement("a");
|
||||
document.body.appendChild(link);
|
||||
link.download = getFileName("Zones") + ".csv";
|
||||
link.href = url;
|
||||
link.click();
|
||||
window.setTimeout(function() {window.URL.revokeObjectURL(url);}, 2000);
|
||||
const name = getFileName("Zones") + ".csv";
|
||||
downloadFile(data, name);
|
||||
}
|
||||
|
||||
function toggleEraseMode() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue