backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-22 12:01:23 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

generic confirmationDialog for all files

Browse source
This commit is contained in:
Azgaar 2021-05-16 18:51:34 +03:00 • committed by Peter
parent 556e651d52
commit 4bf901e849
20 changed files with 863 additions and 836 deletions
Download patch file Download diff file Expand all files Collapse all files

124
modules/ui/burg-editor.js
View file

@ -1,13 +1,13 @@
"use strict"; 'use strict';
function editBurg(id) { function editBurg(id) {
if (customization) return; if (customization) return;
closeDialogs(".stable"); closeDialogs('.stable');
if (!layerIsOn("toggleIcons")) toggleIcons(); if (!layerIsOn('toggleIcons')) toggleIcons();
if (!layerIsOn("toggleLabels")) toggleLabels(); if (!layerIsOn('toggleLabels')) toggleLabels();
const burg = id || d3.event.target.dataset.id; const burg = id || d3.event.target.dataset.id;
elSelected = burgLabels.select("[data-id='" + burg + "']"); elSelected = burgLabels.select("[data-id='" + burg + "']");
burgLabels.selectAll("text").call(d3.drag().on("start", dragBurgLabel)).classed("draggable", true); burgLabels.selectAll('text').call(d3.drag().on('start', dragBurgLabel)).classed('draggable', true);
updateBurgValues(); updateBurgValues();
$("#burgEditor").dialog({ $("#burgEditor").dialog({
@ -21,12 +21,12 @@ function editBurg(id) {
modules.editBurg = true; modules.editBurg = true;
// add listeners // add listeners
document.getElementById("burgGroupShow").addEventListener("click", showGroupSection); document.getElementById('burgGroupShow').addEventListener('click', showGroupSection);
document.getElementById("burgGroupHide").addEventListener("click", hideGroupSection); document.getElementById('burgGroupHide').addEventListener('click', hideGroupSection);
document.getElementById("burgSelectGroup").addEventListener("change", changeGroup); document.getElementById('burgSelectGroup').addEventListener('change', changeGroup);
document.getElementById("burgInputGroup").addEventListener("change", createNewGroup); document.getElementById('burgInputGroup').addEventListener('change', createNewGroup);
document.getElementById("burgAddGroup").addEventListener("click", toggleNewGroupInput); document.getElementById('burgAddGroup').addEventListener('click', toggleNewGroupInput);
document.getElementById("burgRemoveGroup").addEventListener("click", removeBurgsGroup); document.getElementById('burgRemoveGroup').addEventListener('click', removeBurgsGroup);
document.getElementById("burgName").addEventListener("input", changeName); document.getElementById("burgName").addEventListener("input", changeName);
document.getElementById("burgNameReRandom").addEventListener("click", generateNameRandom); document.getElementById("burgNameReRandom").addEventListener("click", generateNameRandom);
@ -39,11 +39,11 @@ function editBurg(id) {
document.getElementById("regenerateMFCGBurgSeed").addEventListener("click", randomizeSeed); document.getElementById("regenerateMFCGBurgSeed").addEventListener("click", randomizeSeed);
document.getElementById("addCustomMFCGBurgLink").addEventListener("click", addCustomMfcgLink); document.getElementById("addCustomMFCGBurgLink").addEventListener("click", addCustomMfcgLink);
document.getElementById("burgStyleShow").addEventListener("click", showStyleSection); document.getElementById('burgStyleShow').addEventListener('click', showStyleSection);
document.getElementById("burgStyleHide").addEventListener("click", hideStyleSection); document.getElementById('burgStyleHide').addEventListener('click', hideStyleSection);
document.getElementById("burgEditLabelStyle").addEventListener("click", editGroupLabelStyle); document.getElementById('burgEditLabelStyle').addEventListener('click', editGroupLabelStyle);
document.getElementById("burgEditIconStyle").addEventListener("click", editGroupIconStyle); document.getElementById('burgEditIconStyle').addEventListener('click', editGroupIconStyle);
document.getElementById("burgEditAnchorStyle").addEventListener("click", editGroupAnchorStyle); document.getElementById('burgEditAnchorStyle').addEventListener('click', editGroupAnchorStyle);
document.getElementById("burgEmblem").addEventListener("click", openEmblemEdit); document.getElementById("burgEmblem").addEventListener("click", openEmblemEdit);
document.getElementById("burgToggleMFCGMap").addEventListener("click", toggleMFCGMap); document.getElementById("burgToggleMFCGMap").addEventListener("click", toggleMFCGMap);
@ -55,12 +55,12 @@ function editBurg(id) {
document.getElementById("burgTemperatureGraph").addEventListener("click", showTemperatureGraph); document.getElementById("burgTemperatureGraph").addEventListener("click", showTemperatureGraph);
function updateBurgValues() { function updateBurgValues() {
const id = +elSelected.attr("data-id"); const id = +elSelected.attr('data-id');
const b = pack.burgs[id]; const b = pack.burgs[id];
const province = pack.cells.province[b.cell]; const province = pack.cells.province[b.cell];
const provinceName = province ? pack.provinces[province].fullName + ", " : ""; const provinceName = province ? pack.provinces[province].fullName + ', ' : '';
const stateName = pack.states[b.state].fullName || pack.states[b.state].name; const stateName = pack.states[b.state].fullName || pack.states[b.state].name;
document.getElementById("burgProvinceAndState").innerHTML = provinceName + stateName; document.getElementById('burgProvinceAndState').innerHTML = provinceName + stateName;
document.getElementById("burgName").value = b.name; document.getElementById("burgName").value = b.name;
document.getElementById("burgType").value = b.type || "Generic"; document.getElementById("burgType").value = b.type || "Generic";
@ -68,15 +68,15 @@ function editBurg(id) {
document.getElementById("burgEditAnchorStyle").style.display = +b.port ? "inline-block" : "none"; document.getElementById("burgEditAnchorStyle").style.display = +b.port ? "inline-block" : "none";
// update list and select culture // update list and select culture
const cultureSelect = document.getElementById("burgCulture"); const cultureSelect = document.getElementById('burgCulture');
cultureSelect.options.length = 0; cultureSelect.options.length = 0;
const cultures = pack.cultures.filter(c => !c.removed); const cultures = pack.cultures.filter((c) => !c.removed);
cultures.forEach(c => cultureSelect.options.add(new Option(c.name, c.i, false, c.i === b.culture))); cultures.forEach((c) => cultureSelect.options.add(new Option(c.name, c.i, false, c.i === b.culture)));
const temperature = grid.cells.temp[pack.cells.g[b.cell]]; const temperature = grid.cells.temp[pack.cells.g[b.cell]];
document.getElementById("burgTemperature").innerHTML = convertTemperature(temperature); document.getElementById('burgTemperature').innerHTML = convertTemperature(temperature);
document.getElementById("burgTemperatureLikeIn").innerHTML = getTemperatureLikeness(temperature); document.getElementById('burgTemperatureLikeIn').innerHTML = getTemperatureLikeness(temperature);
document.getElementById("burgElevation").innerHTML = getHeight(pack.cells.h[b.cell]); document.getElementById('burgElevation').innerHTML = getHeight(pack.cells.h[b.cell]);
// toggle features // toggle features
if (b.capital) document.getElementById("burgCapital").classList.remove("inactive"); if (b.capital) document.getElementById("burgCapital").classList.remove("inactive");
@ -104,7 +104,7 @@ function editBurg(id) {
// select group // select group
const group = elSelected.node().parentNode.id; const group = elSelected.node().parentNode.id;
const select = document.getElementById("burgSelectGroup"); const select = document.getElementById('burgSelectGroup');
select.options.length = 0; // remove all options select.options.length = 0; // remove all options
burgLabels.selectAll("g").each(function () { burgLabels.selectAll("g").each(function () {
@ -167,7 +167,7 @@ function editBurg(id) {
} }
// in °C, array from -1 °C; source: https://en.wikipedia.org/wiki/List_of_cities_by_average_temperature // in °C, array from -1 °C; source: https://en.wikipedia.org/wiki/List_of_cities_by_average_temperature
function getTemperatureLikeness(temperature) { function getTemperatureLikeness(temperature) {
if (temperature < -5) return "Yakutsk"; if (temperature < -5) return 'Yakutsk';
const cities = [ const cities = [
"Snag (Yukon)", "Snag (Yukon)",
"Yellowknife (Canada)", "Yellowknife (Canada)",
@ -237,18 +237,18 @@ function editBurg(id) {
} }
function changeGroup() { function changeGroup() {
const id = +elSelected.attr("data-id"); const id = +elSelected.attr('data-id');
moveBurgToGroup(id, this.value); moveBurgToGroup(id, this.value);
} }
function toggleNewGroupInput() { function toggleNewGroupInput() {
if (burgInputGroup.style.display === "none") { if (burgInputGroup.style.display === 'none') {
burgInputGroup.style.display = "inline-block"; burgInputGroup.style.display = 'inline-block';
burgInputGroup.focus(); burgInputGroup.focus();
burgSelectGroup.style.display = "none"; burgSelectGroup.style.display = 'none';
} else { } else {
burgInputGroup.style.display = "none"; burgInputGroup.style.display = 'none';
burgSelectGroup.style.display = "inline-block"; burgSelectGroup.style.display = 'inline-block';
} }
} }
@ -263,16 +263,16 @@ function editBurg(id) {
.replace(/[^\w\s]/gi, ""); .replace(/[^\w\s]/gi, "");
if (document.getElementById(group)) { if (document.getElementById(group)) {
tip("Element with this id already exists. Please provide a unique name", false, "error"); tip('Element with this id already exists. Please provide a unique name', false, 'error');
return; return;
} }
if (Number.isFinite(+group.charAt(0))) { if (Number.isFinite(+group.charAt(0))) {
tip("Group name should start with a letter", false, "error"); tip('Group name should start with a letter', false, 'error');
return; return;
} }
const id = +elSelected.attr("data-id"); const id = +elSelected.attr('data-id');
const oldGroup = elSelected.node().parentNode.id; const oldGroup = elSelected.node().parentNode.id;
const label = document.querySelector("#burgLabels [data-id='" + id + "']"); const label = document.querySelector("#burgLabels [data-id='" + id + "']");
@ -289,11 +289,11 @@ function editBurg(id) {
// just rename if only 1 element left // just rename if only 1 element left
const count = elSelected.node().parentNode.childElementCount; const count = elSelected.node().parentNode.childElementCount;
if (oldGroup !== "cities" && oldGroup !== "towns" && count === 1) { if (oldGroup !== 'cities' && oldGroup !== 'towns' && count === 1) {
document.getElementById("burgSelectGroup").selectedOptions[0].remove(); document.getElementById('burgSelectGroup').selectedOptions[0].remove();
document.getElementById("burgSelectGroup").options.add(new Option(group, group, false, true)); document.getElementById('burgSelectGroup').options.add(new Option(group, group, false, true));
toggleNewGroupInput(); toggleNewGroupInput();
document.getElementById("burgInputGroup").value = ""; document.getElementById('burgInputGroup').value = '';
labelG.id = group; labelG.id = group;
iconG.id = group; iconG.id = group;
if (anchor) anchorG.id = group; if (anchor) anchorG.id = group;
@ -301,9 +301,9 @@ function editBurg(id) {
} }
// create new groups // create new groups
document.getElementById("burgSelectGroup").options.add(new Option(group, group, false, true)); document.getElementById('burgSelectGroup').options.add(new Option(group, group, false, true));
toggleNewGroupInput(); toggleNewGroupInput();
document.getElementById("burgInputGroup").value = ""; document.getElementById('burgInputGroup').value = '';
addBurgsGroup(group); addBurgsGroup(group);
moveBurgToGroup(id, group); moveBurgToGroup(id, group);
@ -311,13 +311,13 @@ function editBurg(id) {
function removeBurgsGroup() { function removeBurgsGroup() {
const group = elSelected.node().parentNode; const group = elSelected.node().parentNode;
const basic = group.id === "cities" || group.id === "towns"; const basic = group.id === 'cities' || group.id === 'towns';
const burgsInGroup = []; const burgsInGroup = [];
for (let i = 0; i < group.children.length; i++) { for (let i = 0; i < group.children.length; i++) {
burgsInGroup.push(+group.children[i].dataset.id); burgsInGroup.push(+group.children[i].dataset.id);
} }
const burgsToRemove = burgsInGroup.filter(b => !(pack.burgs[b].capital || pack.burgs[b].lock)); const burgsToRemove = burgsInGroup.filter((b) => !(pack.burgs[b].capital || pack.burgs[b].lock));
const capital = burgsToRemove.length < burgsInGroup.length; const capital = burgsToRemove.length < burgsInGroup.length;
alertMessage.innerHTML = /* html */ `Are you sure you want to remove ${ alertMessage.innerHTML = /* html */ `Are you sure you want to remove ${
@ -352,7 +352,7 @@ function editBurg(id) {
} }
function changeName() { function changeName() {
const id = +elSelected.attr("data-id"); const id = +elSelected.attr('data-id');
pack.burgs[id].name = burgName.value; pack.burgs[id].name = burgName.value;
elSelected.text(burgName.value); elSelected.text(burgName.value);
} }
@ -364,17 +364,17 @@ function editBurg(id) {
} }
function changeType() { function changeType() {
const id = +elSelected.attr("data-id"); const id = +elSelected.attr('data-id');
pack.burgs[id].type = this.value; pack.burgs[id].type = this.value;
} }
function changeCulture() { function changeCulture() {
const id = +elSelected.attr("data-id"); const id = +elSelected.attr('data-id');
pack.burgs[id].culture = +this.value; pack.burgs[id].culture = +this.value;
} }
function generateNameCulture() { function generateNameCulture() {
const id = +elSelected.attr("data-id"); const id = +elSelected.attr('data-id');
const culture = pack.burgs[id].culture; const culture = pack.burgs[id].culture;
burgName.value = Names.getCulture(culture); burgName.value = Names.getCulture(culture);
changeName(); changeName();
@ -410,7 +410,7 @@ function editBurg(id) {
} }
function updateBurgLockIcon() { function updateBurgLockIcon() {
const id = +elSelected.attr("data-id"); const id = +elSelected.attr('data-id');
const b = pack.burgs[id]; const b = pack.burgs[id];
if (b.lock) { if (b.lock) {
document.getElementById("burgLock").classList.remove("icon-lock-open"); document.getElementById("burgLock").classList.remove("icon-lock-open");
@ -433,17 +433,17 @@ function editBurg(id) {
function editGroupLabelStyle() { function editGroupLabelStyle() {
const g = elSelected.node().parentNode.id; const g = elSelected.node().parentNode.id;
editStyle("labels", g); editStyle('labels', g);
} }
function editGroupIconStyle() { function editGroupIconStyle() {
const g = elSelected.node().parentNode.id; const g = elSelected.node().parentNode.id;
editStyle("burgIcons", g); editStyle('burgIcons', g);
} }
function editGroupAnchorStyle() { function editGroupAnchorStyle() {
const g = elSelected.node().parentNode.id; const g = elSelected.node().parentNode.id;
editStyle("anchors", g); editStyle('anchors', g);
} }
function updateMFCGFrame(burg) { function updateMFCGFrame(burg) {
@ -516,16 +516,16 @@ function editBurg(id) {
const cells = pack.cells; const cells = pack.cells;
const point = d3.mouse(this); const point = d3.mouse(this);
const cell = findCell(point[0], point[1]); const cell = findCell(point[0], point[1]);
const id = +elSelected.attr("data-id"); const id = +elSelected.attr('data-id');
const burg = pack.burgs[id]; const burg = pack.burgs[id];
if (cells.h[cell] < 20) { if (cells.h[cell] < 20) {
tip("Cannot place burg into the water! Select a land cell", false, "error"); tip('Cannot place burg into the water! Select a land cell', false, 'error');
return; return;
} }
if (cells.burg[cell] && cells.burg[cell] !== id) { if (cells.burg[cell] && cells.burg[cell] !== id) {
tip("There is already a burg in this cell. Please select a free cell", false, "error"); tip('There is already a burg in this cell. Please select a free cell', false, 'error');
return; return;
} }
@ -533,7 +533,7 @@ function editBurg(id) {
const oldState = burg.state; const oldState = burg.state;
if (newState !== oldState && burg.capital) { if (newState !== oldState && burg.capital) {
tip("Capital cannot be relocated into another state!", false, "error"); tip('Capital cannot be relocated into another state!', false, 'error');
return; return;
} }
@ -552,10 +552,10 @@ function editBurg(id) {
.attr("y", y); .attr("y", y);
const anchor = anchors.select("use[data-id='" + id + "']"); const anchor = anchors.select("use[data-id='" + id + "']");
if (anchor.size()) { if (anchor.size()) {
const size = anchor.attr("width"); const size = anchor.attr('width');
const xa = rn(x - size * 0.47, 2); const xa = rn(x - size * 0.47, 2);
const ya = rn(y - size * 0.47, 2); const ya = rn(y - size * 0.47, 2);
anchor.attr("transform", null).attr("x", xa).attr("y", ya); anchor.attr('transform', null).attr('x', xa).attr('y', ya);
} }
// change data // change data
@ -571,7 +571,7 @@ function editBurg(id) {
} }
function editBurgLegend() { function editBurgLegend() {
const id = elSelected.attr("data-id"); const id = elSelected.attr('data-id');
const name = elSelected.text(); const name = elSelected.text();
editNotes("burg" + id, name); editNotes("burg" + id, name);
} }
@ -582,7 +582,7 @@ function editBurg(id) {
} }
function removeSelectedBurg() { function removeSelectedBurg() {
const id = +elSelected.attr("data-id"); const id = +elSelected.attr('data-id');
if (pack.burgs[id].capital) { if (pack.burgs[id].capital) {
alertMessage.innerHTML = /* html */ `You cannot remove the burg as it is a state capital.<br /><br /> alertMessage.innerHTML = /* html */ `You cannot remove the burg as it is a state capital.<br /><br />
You can change the capital using Burgs Editor (shift + T)`; You can change the capital using Burgs Editor (shift + T)`;
@ -615,8 +615,8 @@ function editBurg(id) {
} }
function closeBurgEditor() { function closeBurgEditor() {
document.getElementById("burgRelocate").classList.remove("pressed"); document.getElementById('burgRelocate').classList.remove('pressed');
burgLabels.selectAll("text").call(d3.drag().on("drag", null)).classed("draggable", false); burgLabels.selectAll('text').call(d3.drag().on('drag', null)).classed('draggable', false);
unselect(); unselect();
} }
} }

84
modules/ui/burgs-overview.js
View file

@ -1,15 +1,15 @@
"use strict"; 'use strict';
function overviewBurgs() { function overviewBurgs() {
if (customization) return; if (customization) return;
closeDialogs("#burgsOverview, .stable"); closeDialogs('#burgsOverview, .stable');
if (!layerIsOn("toggleIcons")) toggleIcons(); if (!layerIsOn('toggleIcons')) toggleIcons();
if (!layerIsOn("toggleLabels")) toggleLabels(); if (!layerIsOn('toggleLabels')) toggleLabels();
const body = document.getElementById("burgsBody"); const body = document.getElementById('burgsBody');
updateFilter(); updateFilter();
updateLockAllIcon(); updateLockAllIcon();
burgsOverviewAddLines(); burgsOverviewAddLines();
$("#burgsOverview").dialog(); $('#burgsOverview').dialog();
if (modules.overviewBurgs) return; if (modules.overviewBurgs) return;
modules.overviewBurgs = true; modules.overviewBurgs = true;
@ -44,7 +44,7 @@ function overviewBurgs() {
} }
function updateFilter() { function updateFilter() {
const stateFilter = document.getElementById("burgsFilterState"); const stateFilter = document.getElementById('burgsFilterState');
const selectedState = stateFilter.value || 1; const selectedState = stateFilter.value || 1;
stateFilter.options.length = 0; // remove all options stateFilter.options.length = 0; // remove all options
stateFilter.options.add(new Option(`all`, -1, false, selectedState == -1)); stateFilter.options.add(new Option(`all`, -1, false, selectedState == -1));
@ -52,7 +52,7 @@ function overviewBurgs() {
const statesSorted = pack.states.filter(s => s.i && !s.removed).sort((a, b) => (a.name > b.name ? 1 : -1)); const statesSorted = pack.states.filter(s => s.i && !s.removed).sort((a, b) => (a.name > b.name ? 1 : -1));
statesSorted.forEach(s => stateFilter.options.add(new Option(s.name, s.i, false, s.i == selectedState))); statesSorted.forEach(s => stateFilter.options.add(new Option(s.name, s.i, false, s.i == selectedState)));
const cultureFilter = document.getElementById("burgsFilterCulture"); const cultureFilter = document.getElementById('burgsFilterCulture');
const selectedCulture = cultureFilter.value || -1; const selectedCulture = cultureFilter.value || -1;
cultureFilter.options.length = 0; // remove all options cultureFilter.options.length = 0; // remove all options
cultureFilter.options.add(new Option(`all`, -1, false, selectedCulture == -1)); cultureFilter.options.add(new Option(`all`, -1, false, selectedCulture == -1));
@ -63,11 +63,11 @@ function overviewBurgs() {
// add line for each burg // add line for each burg
function burgsOverviewAddLines() { function burgsOverviewAddLines() {
const selectedState = +document.getElementById("burgsFilterState").value; const selectedState = +document.getElementById('burgsFilterState').value;
const selectedCulture = +document.getElementById("burgsFilterCulture").value; const selectedCulture = +document.getElementById('burgsFilterCulture').value;
let filtered = pack.burgs.filter(b => b.i && !b.removed); // all valid burgs let filtered = pack.burgs.filter((b) => b.i && !b.removed); // all valid burgs
if (selectedState != -1) filtered = filtered.filter(b => b.state === selectedState); // filtered by state if (selectedState != -1) filtered = filtered.filter((b) => b.state === selectedState); // filtered by state
if (selectedCulture != -1) filtered = filtered.filter(b => b.culture === selectedCulture); // filtered by culture if (selectedCulture != -1) filtered = filtered.filter((b) => b.culture === selectedCulture); // filtered by culture
body.innerHTML = ""; body.innerHTML = "";
let lines = "", let lines = "",
@ -76,10 +76,10 @@ function overviewBurgs() {
for (const b of filtered) { for (const b of filtered) {
const population = b.population * populationRate * urbanization; const population = b.population * populationRate * urbanization;
totalPopulation += population; totalPopulation += population;
const type = b.capital && b.port ? "a-capital-port" : b.capital ? "c-capital" : b.port ? "p-port" : "z-burg"; const type = b.capital && b.port ? 'a-capital-port' : b.capital ? 'c-capital' : b.port ? 'p-port' : 'z-burg';
const state = pack.states[b.state].name; const state = pack.states[b.state].name;
const prov = pack.cells.province[b.cell]; const prov = pack.cells.province[b.cell];
const province = prov ? pack.provinces[prov].name : ""; const province = prov ? pack.provinces[prov].name : '';
const culture = pack.cultures[b.culture].name; const culture = pack.cultures[b.culture].name;
lines += /* html */ `<div lines += /* html */ `<div
@ -113,7 +113,7 @@ function overviewBurgs() {
<span data-tip="Remove burg" class="icon-trash-empty"></span> <span data-tip="Remove burg" class="icon-trash-empty"></span>
</div>`; </div>`;
} }
body.insertAdjacentHTML("beforeend", lines); body.insertAdjacentHTML('beforeend', lines);
// update footer // update footer
burgsFooterBurgs.innerHTML = filtered.length; burgsFooterBurgs.innerHTML = filtered.length;
@ -142,13 +142,13 @@ function overviewBurgs() {
} }
function burgHighlightOn(event) { function burgHighlightOn(event) {
if (!layerIsOn("toggleLabels")) toggleLabels(); if (!layerIsOn('toggleLabels')) toggleLabels();
const burg = +event.target.dataset.id; const burg = +event.target.dataset.id;
burgLabels.select("[data-id='" + burg + "']").classed("drag", true); burgLabels.select("[data-id='" + burg + "']").classed('drag', true);
} }
function burgHighlightOff() { function burgHighlightOff() {
burgLabels.selectAll("text.drag").classed("drag", false); burgLabels.selectAll('text.drag').classed('drag', false);
} }
function changeBurgName() { function changeBurgName() {
@ -187,7 +187,7 @@ function overviewBurgs() {
this.value = si(this.value); this.value = si(this.value);
const population = []; const population = [];
body.querySelectorAll(":scope > div").forEach(el => population.push(+getInteger(el.dataset.population))); body.querySelectorAll(':scope > div').forEach((el) => population.push(+getInteger(el.dataset.population)));
burgsFooterPopulation.innerHTML = si(d3.mean(population)); burgsFooterPopulation.innerHTML = si(d3.mean(population));
} }
@ -200,8 +200,8 @@ function overviewBurgs() {
function togglePortStatus() { function togglePortStatus() {
const burg = +this.parentNode.parentNode.dataset.id; const burg = +this.parentNode.parentNode.dataset.id;
togglePort(burg); togglePort(burg);
if (this.classList.contains("inactive")) this.classList.remove("inactive"); if (this.classList.contains('inactive')) this.classList.remove('inactive');
else this.classList.add("inactive"); else this.classList.add('inactive');
} }
function toggleBurgLockStatus() { function toggleBurgLockStatus() {
@ -258,9 +258,9 @@ function overviewBurgs() {
function enterAddBurgMode() { function enterAddBurgMode() {
if (this.classList.contains("pressed")) return exitAddBurgMode(); if (this.classList.contains("pressed")) return exitAddBurgMode();
customization = 3; customization = 3;
this.classList.add("pressed"); this.classList.add('pressed');
tip("Click on the map to create a new burg. Hold Shift to add multiple", true, "warn"); tip('Click on the map to create a new burg. Hold Shift to add multiple', true, 'warn');
viewbox.style("cursor", "crosshair").on("click", addBurgOnClick); viewbox.style('cursor', 'crosshair').on('click', addBurgOnClick);
} }
function addBurgOnClick() { function addBurgOnClick() {
@ -281,14 +281,14 @@ function overviewBurgs() {
customization = 0; customization = 0;
restoreDefaultEvents(); restoreDefaultEvents();
clearMainTip(); clearMainTip();
if (addBurgTool.classList.contains("pressed")) addBurgTool.classList.remove("pressed"); if (addBurgTool.classList.contains('pressed')) addBurgTool.classList.remove('pressed');
if (addNewBurg.classList.contains("pressed")) addNewBurg.classList.remove("pressed"); if (addNewBurg.classList.contains('pressed')) addNewBurg.classList.remove('pressed');
} }
function showBurgsChart() { function showBurgsChart() {
// build hierarchy tree // build hierarchy tree
const states = pack.states.map(s => { const states = pack.states.map((s) => {
const color = s.color ? s.color : "#ccc"; const color = s.color ? s.color : '#ccc';
const name = s.fullName ? s.fullName : s.name; const name = s.fullName ? s.fullName : s.name;
return {id: s.i, state: s.i ? 0 : null, color, name}; return {id: s.i, state: s.i ? 0 : null, color, name};
}); });
@ -353,22 +353,22 @@ function overviewBurgs() {
.on("click", d => zoomTo(d.data.x, d.data.y, 8, 2000)); .on("click", d => zoomTo(d.data.x, d.data.y, 8, 2000));
function showInfo(ev, d) { function showInfo(ev, d) {
d3.select(ev.target).transition().duration(1500).attr("stroke", "#c13119"); d3.select(ev.target).transition().duration(1500).attr('stroke', '#c13119');
const name = d.data.name; const name = d.data.name;
const parent = d.parent.data.name; const parent = d.parent.data.name;
const population = si(d.value * populationRate * urbanization); const population = si(d.value * populationRate * urbanization);
burgsInfo.innerHTML = /* html */ `${name}. ${parent}. Population: ${population}`; burgsInfo.innerHTML = /* html */ `${name}. ${parent}. Population: ${population}`;
burgHighlightOn(ev); burgHighlightOn(ev);
tip("Click to zoom into view"); tip('Click to zoom into view');
} }
function hideInfo(ev) { function hideInfo(ev) {
burgHighlightOff(ev); burgHighlightOff(ev);
if (!document.getElementById("burgsInfo")) return; if (!document.getElementById('burgsInfo')) return;
burgsInfo.innerHTML = "&#8205;"; burgsInfo.innerHTML = '&#8205;';
d3.select(ev.target).transition().attr("stroke", null); d3.select(ev.target).transition().attr('stroke', null);
tip(""); tip('');
} }
function updateChart() { function updateChart() {
@ -386,8 +386,8 @@ function overviewBurgs() {
}); });
const getParentData = () => { const getParentData = () => {
const states = pack.states.map(s => { const states = pack.states.map((s) => {
const color = s.color ? s.color : "#ccc"; const color = s.color ? s.color : '#ccc';
const name = s.fullName ? s.fullName : s.name; const name = s.fullName ? s.fullName : s.name;
return {id: s.i, parent: s.i ? 0 : null, color, name}; return {id: s.i, parent: s.i ? 0 : null, color, name};
}); });
@ -458,9 +458,9 @@ function overviewBurgs() {
const valid = pack.burgs.filter(b => b.i && !b.removed); // all valid burgs const valid = pack.burgs.filter(b => b.i && !b.removed); // all valid burgs
valid.forEach(b => { valid.forEach((b) => {
data += b.i + ","; data += b.i + ',';
data += b.name + ","; data += b.name + ',';
const province = pack.cells.province[b.cell]; const province = pack.cells.province[b.cell];
data += province ? pack.provinces[province].name + "," : ","; data += province ? pack.provinces[province].name + "," : ",";
data += province ? pack.provinces[province].fullName + "," : ","; data += province ? pack.provinces[province].fullName + "," : ",";
@ -487,7 +487,7 @@ function overviewBurgs() {
data += "\n"; data += "\n";
}); });
const name = getFileName("Burgs") + ".csv"; const name = getFileName('Burgs') + '.csv';
downloadFile(data, name); downloadFile(data, name);
} }
@ -567,7 +567,7 @@ function overviewBurgs() {
} }
function removeAllBurgs() { function removeAllBurgs() {
pack.burgs.filter(b => b.i && !(b.capital || b.lock)).forEach(b => removeBurg(b.i)); pack.burgs.filter((b) => b.i && !(b.capital || b.lock)).forEach((b) => removeBurg(b.i));
burgsOverviewAddLines(); burgsOverviewAddLines();
} }

67
modules/ui/coastline-editor.js
View file

@ -1,8 +1,8 @@
"use strict"; 'use strict';
function editCoastline(node = d3.event.target) { function editCoastline(node = d3.event.target) {
if (customization) return; if (customization) return;
closeDialogs(".stable"); closeDialogs('.stable');
if (layerIsOn("toggleCells")) toggleCells(); if (layerIsOn('toggleCells')) toggleCells();
$("#coastlineEditor").dialog({ $("#coastlineEditor").dialog({
title: "Edit Coastline", title: "Edit Coastline",
@ -11,26 +11,26 @@ function editCoastline(node = d3.event.target) {
close: closeCoastlineEditor close: closeCoastlineEditor
}); });
debug.append("g").attr("id", "vertices"); debug.append('g').attr('id', 'vertices');
elSelected = d3.select(node); elSelected = d3.select(node);
selectCoastlineGroup(node); selectCoastlineGroup(node);
drawCoastlineVertices(); drawCoastlineVertices();
viewbox.on("touchmove mousemove", null); viewbox.on('touchmove mousemove', null);
if (modules.editCoastline) return; if (modules.editCoastline) return;
modules.editCoastline = true; modules.editCoastline = true;
// add listeners // add listeners
document.getElementById("coastlineGroupsShow").addEventListener("click", showGroupSection); document.getElementById('coastlineGroupsShow').addEventListener('click', showGroupSection);
document.getElementById("coastlineGroup").addEventListener("change", changeCoastlineGroup); document.getElementById('coastlineGroup').addEventListener('change', changeCoastlineGroup);
document.getElementById("coastlineGroupAdd").addEventListener("click", toggleNewGroupInput); document.getElementById('coastlineGroupAdd').addEventListener('click', toggleNewGroupInput);
document.getElementById("coastlineGroupName").addEventListener("change", createNewGroup); document.getElementById('coastlineGroupName').addEventListener('change', createNewGroup);
document.getElementById("coastlineGroupRemove").addEventListener("click", removeCoastlineGroup); document.getElementById('coastlineGroupRemove').addEventListener('click', removeCoastlineGroup);
document.getElementById("coastlineGroupsHide").addEventListener("click", hideGroupSection); document.getElementById('coastlineGroupsHide').addEventListener('click', hideGroupSection);
document.getElementById("coastlineEditStyle").addEventListener("click", editGroupStyle); document.getElementById('coastlineEditStyle').addEventListener('click', editGroupStyle);
function drawCoastlineVertices() { function drawCoastlineVertices() {
const f = +elSelected.attr("data-f"); // feature id const f = +elSelected.attr('data-f'); // feature id
const v = pack.features[f].vertices; // coastline outer vertices const v = pack.features[f].vertices; // coastline outer vertices
const l = pack.cells.i.length; const l = pack.cells.i.length;
@ -77,7 +77,7 @@ function editCoastline(node = d3.event.target) {
function redrawCoastline() { function redrawCoastline() {
lineGen.curve(d3.curveBasisClosed); lineGen.curve(d3.curveBasisClosed);
const f = +elSelected.attr("data-f"); const f = +elSelected.attr('data-f');
const vertices = pack.features[f].vertices; const vertices = pack.features[f].vertices;
const points = clipPoly( const points = clipPoly(
vertices.map(v => pack.vertices.p[v]), vertices.map(v => pack.vertices.p[v]),
@ -107,7 +107,7 @@ function editCoastline(node = d3.event.target) {
function selectCoastlineGroup(node) { function selectCoastlineGroup(node) {
const group = node.parentNode.id; const group = node.parentNode.id;
const select = document.getElementById("coastlineGroup"); const select = document.getElementById('coastlineGroup');
select.options.length = 0; // remove all options select.options.length = 0; // remove all options
coastline.selectAll("g").each(function () { coastline.selectAll("g").each(function () {
@ -120,13 +120,13 @@ function editCoastline(node = d3.event.target) {
} }
function toggleNewGroupInput() { function toggleNewGroupInput() {
if (coastlineGroupName.style.display === "none") { if (coastlineGroupName.style.display === 'none') {
coastlineGroupName.style.display = "inline-block"; coastlineGroupName.style.display = 'inline-block';
coastlineGroupName.focus(); coastlineGroupName.focus();
coastlineGroup.style.display = "none"; coastlineGroup.style.display = 'none';
} else { } else {
coastlineGroupName.style.display = "none"; coastlineGroupName.style.display = 'none';
coastlineGroup.style.display = "inline-block"; coastlineGroup.style.display = 'inline-block';
} }
} }
@ -141,42 +141,42 @@ function editCoastline(node = d3.event.target) {
.replace(/[^\w\s]/gi, ""); .replace(/[^\w\s]/gi, "");
if (document.getElementById(group)) { if (document.getElementById(group)) {
tip("Element with this id already exists. Please provide a unique name", false, "error"); tip('Element with this id already exists. Please provide a unique name', false, 'error');
return; return;
} }
if (Number.isFinite(+group.charAt(0))) { if (Number.isFinite(+group.charAt(0))) {
tip("Group name should start with a letter", false, "error"); tip('Group name should start with a letter', false, 'error');
return; return;
} }
// just rename if only 1 element left // just rename if only 1 element left
const oldGroup = elSelected.node().parentNode; const oldGroup = elSelected.node().parentNode;
const basic = ["sea_island", "lake_island"].includes(oldGroup.id); const basic = ['sea_island', 'lake_island'].includes(oldGroup.id);
if (!basic && oldGroup.childElementCount === 1) { if (!basic && oldGroup.childElementCount === 1) {
document.getElementById("coastlineGroup").selectedOptions[0].remove(); document.getElementById('coastlineGroup').selectedOptions[0].remove();
document.getElementById("coastlineGroup").options.add(new Option(group, group, false, true)); document.getElementById('coastlineGroup').options.add(new Option(group, group, false, true));
oldGroup.id = group; oldGroup.id = group;
toggleNewGroupInput(); toggleNewGroupInput();
document.getElementById("coastlineGroupName").value = ""; document.getElementById('coastlineGroupName').value = '';
return; return;
} }
// create a new group // create a new group
const newGroup = elSelected.node().parentNode.cloneNode(false); const newGroup = elSelected.node().parentNode.cloneNode(false);
document.getElementById("coastline").appendChild(newGroup); document.getElementById('coastline').appendChild(newGroup);
newGroup.id = group; newGroup.id = group;
document.getElementById("coastlineGroup").options.add(new Option(group, group, false, true)); document.getElementById('coastlineGroup').options.add(new Option(group, group, false, true));
document.getElementById(group).appendChild(elSelected.node()); document.getElementById(group).appendChild(elSelected.node());
toggleNewGroupInput(); toggleNewGroupInput();
document.getElementById("coastlineGroupName").value = ""; document.getElementById('coastlineGroupName').value = '';
} }
function removeCoastlineGroup() { function removeCoastlineGroup() {
const group = elSelected.node().parentNode.id; const group = elSelected.node().parentNode.id;
if (["sea_island", "lake_island"].includes(group)) { if (['sea_island', 'lake_island'].includes(group)) {
tip("This is one of the default groups, it cannot be removed", false, "error"); tip('This is one of the default groups, it cannot be removed', false, 'error');
return; return;
} }
@ -204,15 +204,16 @@ function editCoastline(node = d3.event.target) {
} }
} }
}); });
confirmationDialog({title: 'Remove coastline group', message, confirm: 'Remove', onConfirm});
} }
function editGroupStyle() { function editGroupStyle() {
const g = elSelected.node().parentNode.id; const g = elSelected.node().parentNode.id;
editStyle("coastline", g); editStyle('coastline', g);
} }
function closeCoastlineEditor() { function closeCoastlineEditor() {
debug.select("#vertices").remove(); debug.select('#vertices').remove();
unselect(); unselect();
} }
} }

140
modules/ui/heightmap-editor.js
View file

@ -3,7 +3,7 @@
function editHeightmap(options) { function editHeightmap(options) {
const {mode, tool} = options || {}; const {mode, tool} = options || {};
restartHistory(); restartHistory();
viewbox.insert("g", "#terrs").attr("id", "heights"); viewbox.insert('g', '#terrs').attr('id', 'heights');
if (!mode) showModeDialog(); if (!mode) showModeDialog();
else enterHeightmapEditMode(mode); else enterHeightmapEditMode(mode);
@ -87,8 +87,8 @@ function editHeightmap(options) {
allowErosionBox.style.display = mode === "keep" ? "none" : "inline-block"; allowErosionBox.style.display = mode === "keep" ? "none" : "inline-block";
// show finalize button // show finalize button
if (!sessionStorage.getItem("noExitButtonAnimation")) { if (!sessionStorage.getItem('noExitButtonAnimation')) {
sessionStorage.setItem("noExitButtonAnimation", true); sessionStorage.setItem('noExitButtonAnimation', true);
exitCustomization.style.opacity = 0; exitCustomization.style.opacity = 0;
const width = 12 * uiSizeOutput.value * 11; const width = 12 * uiSizeOutput.value * 11;
exitCustomization.style.right = (svgWidth - width) / 2 + "px"; exitCustomization.style.right = (svgWidth - width) / 2 + "px";
@ -145,7 +145,7 @@ function editHeightmap(options) {
if (h >= 20) height = Math.pow(h - 18, +heightExponentInput.value); if (h >= 20) height = Math.pow(h - 18, +heightExponentInput.value);
else if (h < 20 && h > 0) height = ((h - 20) / h) * 50; else if (h < 20 && h > 0) height = ((h - 20) / h) * 50;
return rn(height * unitRatio) + " " + unit; return rn(height * unitRatio) + ' ' + unit;
} }
// Exit customization mode // Exit customization mode
@ -166,7 +166,7 @@ function editHeightmap(options) {
customizationMenu.style.display = "none"; customizationMenu.style.display = "none";
if (byId("options").querySelector(".tab > button.active").id === "toolsTab") toolsContent.style.display = "block"; if (byId("options").querySelector(".tab > button.active").id === "toolsTab") toolsContent.style.display = "block";
layersPreset.disabled = false; layersPreset.disabled = false;
exitCustomization.style.display = "none"; // hide finalize button exitCustomization.style.display = 'none'; // hide finalize button
restoreDefaultEvents(); restoreDefaultEvents();
clearMainTip(); clearMainTip();
closeDialogs(); closeDialogs();
@ -176,9 +176,9 @@ function editHeightmap(options) {
if (byId("canvas3d")) enterStandardView(); if (byId("canvas3d")) enterStandardView();
const mode = heightmapEditMode.innerHTML; const mode = heightmapEditMode.innerHTML;
if (mode === "erase") regenerateErasedData(); if (mode === 'erase') regenerateErasedData();
else if (mode === "keep") restoreKeptData(); else if (mode === 'keep') restoreKeptData();
else if (mode === "risk") restoreRiskedData(); else if (mode === 'risk') restoreRiskedData();
// restore initial layers // restore initial layers
//viewbox.select("#heights").remove(); //viewbox.select("#heights").remove();
@ -196,8 +196,8 @@ function editHeightmap(options) {
} }
function regenerateErasedData() { function regenerateErasedData() {
INFO && console.group("Edit Heightmap"); INFO && console.group('Edit Heightmap');
TIME && console.time("regenerateErasedData"); TIME && console.time('regenerateErasedData');
const erosionAllowed = allowErosion.checked; const erosionAllowed = allowErosion.checked;
markFeatures(); markFeatures();
@ -247,12 +247,12 @@ function editHeightmap(options) {
Military.generate(); Military.generate();
Markers.generate(); Markers.generate();
addZones(); addZones();
TIME && console.timeEnd("regenerateErasedData"); TIME && console.timeEnd('regenerateErasedData');
INFO && console.groupEnd("Edit Heightmap"); INFO && console.groupEnd('Edit Heightmap');
} }
function restoreKeptData() { function restoreKeptData() {
viewbox.selectAll("#landmass, #lakes").style("display", null); viewbox.selectAll('#landmass, #lakes').style('display', null);
for (const i of pack.cells.i) { for (const i of pack.cells.i) {
pack.cells.h[i] = grid.cells.h[pack.cells.g[i]]; pack.cells.h[i] = grid.cells.h[pack.cells.g[i]];
} }
@ -318,11 +318,11 @@ function editHeightmap(options) {
// recalculate zones to grid // recalculate zones to grid
zones.selectAll("g").each(function () { zones.selectAll("g").each(function () {
const zone = d3.select(this); const zone = d3.select(this);
const dataCells = zone.attr("data-cells"); const dataCells = zone.attr('data-cells');
const cells = dataCells ? dataCells.split(",").map(i => +i) : []; const cells = dataCells ? dataCells.split(',').map((i) => +i) : [];
const g = cells.map(i => pack.cells.g[i]); const g = cells.map((i) => pack.cells.g[i]);
zone.attr("data-cells", g); zone.attr('data-cells', g);
zone.selectAll("*").remove(); zone.selectAll('*').remove();
}); });
markFeatures(); markFeatures();
@ -404,7 +404,7 @@ function editHeightmap(options) {
for (const p of pack.provinces) { for (const p of pack.provinces) {
if (!p.i || p.removed) continue; if (!p.i || p.removed) continue;
const provCells = pack.cells.i.filter(i => pack.cells.province[i] === p.i); const provCells = pack.cells.i.filter((i) => pack.cells.province[i] === p.i);
if (!provCells.length) { if (!provCells.length) {
const state = p.state; const state = p.state;
const stateProvs = pack.states[state].provinces; const stateProvs = pack.states[state].provinces;
@ -438,9 +438,9 @@ function editHeightmap(options) {
// restore zones from grid // restore zones from grid
zones.selectAll("g").each(function () { zones.selectAll("g").each(function () {
const zone = d3.select(this); const zone = d3.select(this);
const g = zone.attr("data-cells"); const g = zone.attr('data-cells');
const gCells = g ? g.split(",").map(i => +i) : []; const gCells = g ? g.split(',').map((i) => +i) : [];
const cells = pack.cells.i.filter(i => gCells.includes(pack.cells.g[i])); const cells = pack.cells.i.filter((i) => gCells.includes(pack.cells.g[i]));
zone.attr("data-cells", cells); zone.attr("data-cells", cells);
zone.selectAll("*").remove(); zone.selectAll("*").remove();
@ -454,8 +454,8 @@ function editHeightmap(options) {
.attr("id", d => base + d); .attr("id", d => base + d);
}); });
TIME && console.timeEnd("restoreRiskedData"); TIME && console.timeEnd('restoreRiskedData');
INFO && console.groupEnd("Edit Heightmap"); INFO && console.groupEnd('Edit Heightmap');
} }
// trigger heightmap redraw and history update if at least 1 cell is changed // trigger heightmap redraw and history update if at least 1 cell is changed
@ -478,7 +478,7 @@ function editHeightmap(options) {
// draw or update heightmap // draw or update heightmap
function mockHeightmap() { function mockHeightmap() {
const data = renderOcean.checked ? grid.cells.i : grid.cells.i.filter(i => grid.cells.h[i] >= 20); const data = renderOcean.checked ? grid.cells.i : grid.cells.i.filter((i) => grid.cells.h[i] >= 20);
const scheme = getColorScheme(); const scheme = getColorScheme();
viewbox viewbox
.select("#heights") .select("#heights")
@ -600,7 +600,7 @@ function editHeightmap(options) {
if (!pressed) return; if (!pressed) return;
pressed.classList.remove("pressed"); pressed.classList.remove("pressed");
viewbox.style("cursor", "default").on(".drag", null); viewbox.style('cursor', 'default').on('.drag', null);
removeCircle(); removeCircle();
byId("brushesSliders").style.display = "none"; byId("brushesSliders").style.display = "none";
} }
@ -622,17 +622,17 @@ function editHeightmap(options) {
const [x, y] = d3.mouse(this); const [x, y] = d3.mouse(this);
const start = findGridCell(x, y, grid); const start = findGridCell(x, y, grid);
d3.event.on("drag", () => { d3.event.on('drag', () => {
const p = d3.mouse(this); const p = d3.mouse(this);
moveCircle(p[0], p[1], r, "#333"); moveCircle(p[0], p[1], r, '#333');
if (~~d3.event.sourceEvent.timeStamp % 5 != 0) return; // slow down the edit if (~~d3.event.sourceEvent.timeStamp % 5 != 0) return; // slow down the edit
const inRadius = findGridAll(p[0], p[1], r); const inRadius = findGridAll(p[0], p[1], r);
const selection = changeOnlyLand.checked ? inRadius.filter(i => grid.cells.h[i] >= 20) : inRadius; const selection = changeOnlyLand.checked ? inRadius.filter((i) => grid.cells.h[i] >= 20) : inRadius;
if (selection && selection.length) changeHeightForSelection(selection, start); if (selection && selection.length) changeHeightForSelection(selection, start);
}); });
d3.event.on("end", updateHeightmap); d3.event.on('end', updateHeightmap);
} }
function changeHeightForSelection(s, start) { function changeHeightForSelection(s, start) {
@ -669,9 +669,9 @@ function editHeightmap(options) {
} }
function changeOnlyLandClick(e) { function changeOnlyLandClick(e) {
if (heightmapEditMode.innerHTML !== "keep") return; if (heightmapEditMode.innerHTML !== 'keep') return;
e.preventDefault(); e.preventDefault();
tip("You cannot change the coastline in 'Keep' edit mode", false, "error"); tip("You cannot change the coastline in 'Keep' edit mode", false, 'error');
} }
function rescale(v) { function rescale(v) {
@ -682,7 +682,7 @@ function editHeightmap(options) {
} }
function rescaleWithCondition() { function rescaleWithCondition() {
const range = rescaleLower.value + "-" + rescaleHigher.value; const range = rescaleLower.value + '-' + rescaleHigher.value;
const operator = conditionSign.value; const operator = conditionSign.value;
const operand = rescaleModifier.valueAsNumber; const operand = rescaleModifier.valueAsNumber;
if (Number.isNaN(operand)) return tip("Operand should be a number", false, "error"); if (Number.isNaN(operand)) return tip("Operand should be a number", false, "error");
@ -720,7 +720,7 @@ function editHeightmap(options) {
return tip("Heightmap is already cleared, please do not click twice if not required", false, "error"); return tip("Heightmap is already cleared, please do not click twice if not required", false, "error");
grid.cells.h = new Uint8Array(grid.cells.i.length); grid.cells.h = new Uint8Array(grid.cells.i.length);
viewbox.select("#heights").selectAll("*").remove(); viewbox.select('#heights').selectAll('*').remove();
updateHistory(); updateHistory();
} }
} }
@ -757,9 +757,9 @@ function editHeightmap(options) {
$body.dataset.changed = 1; $body.dataset.changed = 1;
return; return;
} }
if (el.classList.contains("icon-check-empty")) { if (el.classList.contains('icon-check-empty')) {
el.classList.add("icon-check"); el.classList.add('icon-check');
el.classList.remove("icon-check-empty"); el.classList.remove('icon-check-empty');
el.parentElement.style.opacity = 1; el.parentElement.style.opacity = 1;
return; return;
} }
@ -923,7 +923,7 @@ function editHeightmap(options) {
} }
function setRange(event) { function setRange(event) {
if (event.target.value !== "interval") return; if (event.target.value !== 'interval') return;
prompt("Set a height interval. Avoid space, use hyphen as a separator", {default: "17-20"}, v => { prompt("Set a height interval. Avoid space, use hyphen as a separator", {default: "17-20"}, v => {
const opt = document.createElement("option"); const opt = document.createElement("option");
@ -1019,10 +1019,10 @@ function editHeightmap(options) {
function downloadTemplate() { function downloadTemplate() {
const body = byId("templateBody"); const body = byId("templateBody");
body.dataset.changed = 0; body.dataset.changed = 0;
const steps = body.querySelectorAll("#templateBody > div"); const steps = body.querySelectorAll('#templateBody > div');
if (!steps.length) return; if (!steps.length) return;
let data = ""; let data = '';
for (const s of steps) { for (const s of steps) {
if (s.style.opacity === "0.5") continue; if (s.style.opacity === "0.5") continue;
@ -1034,7 +1034,7 @@ function editHeightmap(options) {
data += `${type} ${count} ${arg3} ${x} ${y}\r\n`; data += `${type} ${count} ${arg3} ${x} ${y}\r\n`;
} }
const name = "template_" + Date.now() + ".txt"; const name = 'template_' + Date.now() + '.txt';
downloadFile(data, name); downloadFile(data, name);
} }
@ -1055,9 +1055,9 @@ function editHeightmap(options) {
} }
function openImageConverter() { function openImageConverter() {
if ($("#imageConverter").is(":visible")) return; if ($('#imageConverter').is(':visible')) return;
imageToLoad.click(); imageToLoad.click();
closeDialogs("#imageConverter"); closeDialogs('#imageConverter');
$("#imageConverter").dialog({ $("#imageConverter").dialog({
title: "Image Converter", title: "Image Converter",
@ -1069,8 +1069,8 @@ function editHeightmap(options) {
}); });
// create canvas for image // create canvas for image
const canvas = document.createElement("canvas"); const canvas = document.createElement('canvas');
canvas.id = "canvas"; canvas.id = 'canvas';
canvas.width = graphWidth; canvas.width = graphWidth;
canvas.height = graphHeight; canvas.height = graphHeight;
document.body.insertBefore(canvas, optionsContainer); document.body.insertBefore(canvas, optionsContainer);
@ -1081,7 +1081,7 @@ function editHeightmap(options) {
// remove all heights // remove all heights
grid.cells.h = new Uint8Array(grid.cells.i.length); grid.cells.h = new Uint8Array(grid.cells.i.length);
viewbox.select("#heights").selectAll("*").remove(); viewbox.select('#heights').selectAll('*').remove();
updateHistory(); updateHistory();
if (modules.openImageConverter) return; if (modules.openImageConverter) return;
@ -1118,7 +1118,7 @@ function editHeightmap(options) {
}); });
function showPalleteHeight() { function showPalleteHeight() {
const height = +this.getAttribute("data-color"); const height = +this.getAttribute('data-color');
colorsSelectValue.innerHTML = height; colorsSelectValue.innerHTML = height;
colorsSelectFriendly.innerHTML = getHeight(height); colorsSelectFriendly.innerHTML = getHeight(height);
const former = imageConverterPalette.querySelector(".hoveredColor"); const former = imageConverterPalette.querySelector(".hoveredColor");
@ -1128,7 +1128,7 @@ function editHeightmap(options) {
function loadImage() { function loadImage() {
const file = this.files[0]; const file = this.files[0];
this.value = ""; // reset input value to get triggered if the file is re-uploaded this.value = ''; // reset input value to get triggered if the file is re-uploaded
const reader = new FileReader(); const reader = new FileReader();
const img = new Image(); const img = new Image();
@ -1159,11 +1159,11 @@ function editHeightmap(options) {
const data = q.reduce(sampleCanvas); const data = q.reduce(sampleCanvas);
const pallete = q.palette(true); const pallete = q.palette(true);
viewbox.select("#heights").selectAll("*").remove(); viewbox.select('#heights').selectAll('*').remove();
d3.select("#imageConverter").selectAll("div.color-div").remove(); d3.select('#imageConverter').selectAll('div.color-div').remove();
colorsSelect.style.display = "block"; colorsSelect.style.display = 'block';
colorsUnassigned.style.display = "block"; colorsUnassigned.style.display = 'block';
colorsAssigned.style.display = "none"; colorsAssigned.style.display = 'none';
sampleCanvas.remove(); // no need to keep sampleCanvas.remove(); // no need to keep
viewbox viewbox
@ -1191,27 +1191,27 @@ function editHeightmap(options) {
} }
function mapClicked() { function mapClicked() {
const fill = this.getAttribute("fill"); const fill = this.getAttribute('fill');
const palleteColor = imageConverter.querySelector(`div[data-color="${fill}"]`); const palleteColor = imageConverter.querySelector(`div[data-color="${fill}"]`);
palleteColor.click(); palleteColor.click();
} }
function colorClicked() { function colorClicked() {
viewbox.select("#heights").selectAll(".selectedCell").attr("class", null); viewbox.select('#heights').selectAll('.selectedCell').attr('class', null);
const unselect = this.classList.contains("selectedColor"); const unselect = this.classList.contains('selectedColor');
const selectedColor = imageConverter.querySelector("div.selectedColor"); const selectedColor = imageConverter.querySelector('div.selectedColor');
if (selectedColor) selectedColor.classList.remove("selectedColor"); if (selectedColor) selectedColor.classList.remove('selectedColor');
const hoveredColor = imageConverterPalette.querySelector("div.hoveredColor"); const hoveredColor = imageConverterPalette.querySelector('div.hoveredColor');
if (hoveredColor) hoveredColor.classList.remove("hoveredColor"); if (hoveredColor) hoveredColor.classList.remove('hoveredColor');
colorsSelectValue.innerHTML = colorsSelectFriendly.innerHTML = 0; colorsSelectValue.innerHTML = colorsSelectFriendly.innerHTML = 0;
if (unselect) return; if (unselect) return;
this.classList.add("selectedColor"); this.classList.add('selectedColor');
if (this.dataset.height) { if (this.dataset.height) {
const height = +this.dataset.height; const height = +this.dataset.height;
imageConverterPalette.querySelector(`div[data-color="${height}"]`).classList.add("hoveredColor"); imageConverterPalette.querySelector(`div[data-color="${height}"]`).classList.add('hoveredColor');
colorsSelectValue.innerHTML = height; colorsSelectValue.innerHTML = height;
colorsSelectFriendly.innerHTML = getHeight(height); colorsSelectFriendly.innerHTML = getHeight(height);
} }
@ -1229,8 +1229,8 @@ function editHeightmap(options) {
const rgb = color(1 - (height < 20 ? height - 5 : height) / 100); const rgb = color(1 - (height < 20 ? height - 5 : height) / 100);
const selectedColor = imageConverter.querySelector("div.selectedColor"); const selectedColor = imageConverter.querySelector("div.selectedColor");
selectedColor.style.backgroundColor = rgb; selectedColor.style.backgroundColor = rgb;
selectedColor.setAttribute("data-color", rgb); selectedColor.setAttribute('data-color', rgb);
selectedColor.setAttribute("data-height", height); selectedColor.setAttribute('data-height', height);
viewbox viewbox
.select("#heights") .select("#heights")
@ -1283,7 +1283,7 @@ function editHeightmap(options) {
}; };
const assinged = []; // store assigned heights const assinged = []; // store assigned heights
unassigned.forEach(el => { unassigned.forEach((el) => {
const clr = el.dataset.color; const clr = el.dataset.color;
const height = const height =
type === "hue" ? getHeightByHue(clr) : type === "lum" ? getHeightByLum(clr) : getHeightByScheme(clr); type === "hue" ? getHeightByHue(clr) : type === "lum" ? getHeightByLum(clr) : getHeightByScheme(clr);
@ -1343,7 +1343,7 @@ function editHeightmap(options) {
grid.cells.h[i] = height; grid.cells.h[i] = height;
}); });
viewbox.select("#heights").selectAll("polygon").remove(); viewbox.select('#heights').selectAll('polygon').remove();
updateHeightmap(); updateHeightmap();
restoreImageConverterState(); restoreImageConverterState();
} }
@ -1365,9 +1365,9 @@ function editHeightmap(options) {
colorsAssigned.style.display = "none"; colorsAssigned.style.display = "none";
colorsUnassigned.style.display = "none"; colorsUnassigned.style.display = "none";
colorsSelectValue.innerHTML = colorsSelectFriendly.innerHTML = 0; colorsSelectValue.innerHTML = colorsSelectFriendly.innerHTML = 0;
viewbox.style("cursor", "default").on(".drag", null); viewbox.style('cursor', 'default').on('.drag', null);
tip('Heightmap edit mode is active. Click on "Exit Customization" to finalize the heightmap', true); tip('Heightmap edit mode is active. Click on "Exit Customization" to finalize the heightmap', true);
$("#imageConverter").dialog("destroy"); $('#imageConverter').dialog('destroy');
openBrushesPanel(); openBrushesPanel();
} }
@ -1404,8 +1404,8 @@ function editHeightmap(options) {
byId("preview").remove(); byId("preview").remove();
return; return;
} }
const preview = document.createElement("canvas"); const preview = document.createElement('canvas');
preview.id = "preview"; preview.id = 'preview';
preview.width = grid.cellsX; preview.width = grid.cellsX;
preview.height = grid.cellsY; preview.height = grid.cellsY;
document.body.insertBefore(preview, optionsContainer); document.body.insertBefore(preview, optionsContainer);

46
modules/ui/ice-editor.js
View file

@ -1,15 +1,15 @@
"use strict"; 'use strict';
function editIce() { function editIce() {
if (customization) return; if (customization) return;
closeDialogs(".stable"); closeDialogs('.stable');
if (!layerIsOn("toggleIce")) toggleIce(); if (!layerIsOn('toggleIce')) toggleIce();
elSelected = d3.select(d3.event.target); elSelected = d3.select(d3.event.target);
const type = elSelected.attr("type") ? "Glacier" : "Iceberg"; const type = elSelected.attr('type') ? 'Glacier' : 'Iceberg';
document.getElementById("iceRandomize").style.display = type === "Glacier" ? "none" : "inline-block"; document.getElementById('iceRandomize').style.display = type === 'Glacier' ? 'none' : 'inline-block';
document.getElementById("iceSize").style.display = type === "Glacier" ? "none" : "inline-block"; document.getElementById('iceSize').style.display = type === 'Glacier' ? 'none' : 'inline-block';
if (type === "Iceberg") document.getElementById("iceSize").value = +elSelected.attr("size"); if (type === 'Iceberg') document.getElementById('iceSize').value = +elSelected.attr('size');
ice.selectAll("*").classed("draggable", true).call(d3.drag().on("drag", dragElement)); ice.selectAll('*').classed('draggable', true).call(d3.drag().on('drag', dragElement));
$("#iceEditor").dialog({ $("#iceEditor").dialog({
title: "Edit " + type, title: "Edit " + type,
@ -22,11 +22,11 @@ function editIce() {
modules.editIce = true; modules.editIce = true;
// add listeners // add listeners
document.getElementById("iceEditStyle").addEventListener("click", () => editStyle("ice")); document.getElementById('iceEditStyle').addEventListener('click', () => editStyle('ice'));
document.getElementById("iceRandomize").addEventListener("click", randomizeShape); document.getElementById('iceRandomize').addEventListener('click', randomizeShape);
document.getElementById("iceSize").addEventListener("input", changeSize); document.getElementById('iceSize').addEventListener('input', changeSize);
document.getElementById("iceNew").addEventListener("click", toggleAdd); document.getElementById('iceNew').addEventListener('click', toggleAdd);
document.getElementById("iceRemove").addEventListener("click", removeIce); document.getElementById('iceRemove').addEventListener('click', removeIce);
function randomizeShape() { function randomizeShape() {
const c = grid.points[+elSelected.attr("cell")]; const c = grid.points[+elSelected.attr("cell")];
@ -49,18 +49,18 @@ function editIce() {
while (flat.length) pairs.push(flat.splice(0, 2)); while (flat.length) pairs.push(flat.splice(0, 2));
const poly = pairs.map(p => [(p[0] - c[0]) / s, (p[1] - c[1]) / s]); const poly = pairs.map(p => [(p[0] - c[0]) / s, (p[1] - c[1]) / s]);
const size = +this.value; const size = +this.value;
const points = poly.map(p => [rn(c[0] + p[0] * size, 2), rn(c[1] + p[1] * size, 2)]); const points = poly.map((p) => [rn(c[0] + p[0] * size, 2), rn(c[1] + p[1] * size, 2)]);
elSelected.attr("points", points).attr("size", size); elSelected.attr('points', points).attr('size', size);
} }
function toggleAdd() { function toggleAdd() {
document.getElementById("iceNew").classList.toggle("pressed"); document.getElementById('iceNew').classList.toggle('pressed');
if (document.getElementById("iceNew").classList.contains("pressed")) { if (document.getElementById('iceNew').classList.contains('pressed')) {
viewbox.style("cursor", "crosshair").on("click", addIcebergOnClick); viewbox.style('cursor', 'crosshair').on('click', addIcebergOnClick);
tip("Click on map to create an iceberg. Hold Shift to add multiple", true); tip('Click on map to create an iceberg. Hold Shift to add multiple', true);
} else { } else {
clearMainTip(); clearMainTip();
viewbox.on("click", clicked).style("cursor", "default"); viewbox.on('click', clicked).style('cursor', 'default');
} }
} }
@ -68,7 +68,7 @@ function editIce() {
const [x, y] = d3.mouse(this); const [x, y] = d3.mouse(this);
const i = findGridCell(x, y, grid); const i = findGridCell(x, y, grid);
const c = grid.points[i]; const c = grid.points[i];
const s = +document.getElementById("iceSize").value; const s = +document.getElementById('iceSize').value;
const points = getGridPolygon(i).map(p => [(p[0] + (c[0] - p[0]) / s) | 0, (p[1] + (c[1] - p[1]) / s) | 0]); const points = getGridPolygon(i).map(p => [(p[0] + (c[0] - p[0]) / s) | 0, (p[1] + (c[1] - p[1]) / s) | 0]);
const iceberg = ice.append("polygon").attr("points", points).attr("cell", i).attr("size", s); const iceberg = ice.append("polygon").attr("points", points).attr("cell", i).attr("size", s);
@ -108,9 +108,9 @@ function editIce() {
} }
function closeEditor() { function closeEditor() {
ice.selectAll("*").classed("draggable", false).call(d3.drag().on("drag", null)); ice.selectAll('*').classed('draggable', false).call(d3.drag().on('drag', null));
clearMainTip(); clearMainTip();
iceNew.classList.remove("pressed"); iceNew.classList.remove('pressed');
unselect(); unselect();
} }
} }

119
modules/ui/labels-editor.js
View file

@ -1,14 +1,14 @@
"use strict"; 'use strict';
function editLabel() { function editLabel() {
if (customization) return; if (customization) return;
closeDialogs(); closeDialogs();
if (!layerIsOn("toggleLabels")) toggleLabels(); if (!layerIsOn('toggleLabels')) toggleLabels();
const tspan = d3.event.target; const tspan = d3.event.target;
const textPath = tspan.parentNode; const textPath = tspan.parentNode;
const text = textPath.parentNode; const text = textPath.parentNode;
elSelected = d3.select(text).call(d3.drag().on("start", dragLabel)).classed("draggable", true); elSelected = d3.select(text).call(d3.drag().on('start', dragLabel)).classed('draggable', true);
viewbox.on("touchmove mousemove", showEditorTips); viewbox.on('touchmove mousemove', showEditorTips);
$("#labelEditor").dialog({ $("#labelEditor").dialog({
title: "Edit Label", title: "Edit Label",
@ -26,28 +26,28 @@ function editLabel() {
modules.editLabel = true; modules.editLabel = true;
// add listeners // add listeners
document.getElementById("labelGroupShow").addEventListener("click", showGroupSection); document.getElementById('labelGroupShow').addEventListener('click', showGroupSection);
document.getElementById("labelGroupHide").addEventListener("click", hideGroupSection); document.getElementById('labelGroupHide').addEventListener('click', hideGroupSection);
document.getElementById("labelGroupSelect").addEventListener("click", changeGroup); document.getElementById('labelGroupSelect').addEventListener('click', changeGroup);
document.getElementById("labelGroupInput").addEventListener("change", createNewGroup); document.getElementById('labelGroupInput').addEventListener('change', createNewGroup);
document.getElementById("labelGroupNew").addEventListener("click", toggleNewGroupInput); document.getElementById('labelGroupNew').addEventListener('click', toggleNewGroupInput);
document.getElementById("labelGroupRemove").addEventListener("click", removeLabelsGroup); document.getElementById('labelGroupRemove').addEventListener('click', removeLabelsGroup);
document.getElementById("labelTextShow").addEventListener("click", showTextSection); document.getElementById('labelTextShow').addEventListener('click', showTextSection);
document.getElementById("labelTextHide").addEventListener("click", hideTextSection); document.getElementById('labelTextHide').addEventListener('click', hideTextSection);
document.getElementById("labelText").addEventListener("input", changeText); document.getElementById('labelText').addEventListener('input', changeText);
document.getElementById("labelTextRandom").addEventListener("click", generateRandomName); document.getElementById('labelTextRandom').addEventListener('click', generateRandomName);
document.getElementById("labelEditStyle").addEventListener("click", editGroupStyle); document.getElementById('labelEditStyle').addEventListener('click', editGroupStyle);
document.getElementById("labelSizeShow").addEventListener("click", showSizeSection); document.getElementById('labelSizeShow').addEventListener('click', showSizeSection);
document.getElementById("labelSizeHide").addEventListener("click", hideSizeSection); document.getElementById('labelSizeHide').addEventListener('click', hideSizeSection);
document.getElementById("labelStartOffset").addEventListener("input", changeStartOffset); document.getElementById('labelStartOffset').addEventListener('input', changeStartOffset);
document.getElementById("labelRelativeSize").addEventListener("input", changeRelativeSize); document.getElementById('labelRelativeSize').addEventListener('input', changeRelativeSize);
document.getElementById("labelAlign").addEventListener("click", editLabelAlign); document.getElementById('labelAlign').addEventListener('click', editLabelAlign);
document.getElementById("labelLegend").addEventListener("click", editLabelLegend); document.getElementById('labelLegend').addEventListener('click', editLabelLegend);
document.getElementById("labelRemoveSingle").addEventListener("click", removeLabel); document.getElementById('labelRemoveSingle').addEventListener('click', removeLabel);
function showEditorTips() { function showEditorTips() {
showMainTip(); showMainTip();
@ -78,16 +78,16 @@ function editLabel() {
} }
function updateValues(textPath) { function updateValues(textPath) {
document.getElementById("labelText").value = [...textPath.querySelectorAll("tspan")].map(tspan => tspan.textContent).join("|"); document.getElementById('labelText').value = [...textPath.querySelectorAll('tspan')].map((tspan) => tspan.textContent).join('|');
document.getElementById("labelStartOffset").value = parseFloat(textPath.getAttribute("startOffset")); document.getElementById('labelStartOffset').value = parseFloat(textPath.getAttribute('startOffset'));
document.getElementById("labelRelativeSize").value = parseFloat(textPath.getAttribute("font-size")); document.getElementById('labelRelativeSize').value = parseFloat(textPath.getAttribute('font-size'));
} }
function drawControlPointsAndLine() { function drawControlPointsAndLine() {
debug.select("#controlPoints").remove(); debug.select('#controlPoints').remove();
debug.append("g").attr("id", "controlPoints").attr("transform", elSelected.attr("transform")); debug.append('g').attr('id', 'controlPoints').attr('transform', elSelected.attr('transform'));
const path = document.getElementById("textPath_" + elSelected.attr("id")); const path = document.getElementById('textPath_' + elSelected.attr('id'));
debug.select("#controlPoints").append("path").attr("d", path.getAttribute("d")).on("click", addInterimControlPoint); debug.select('#controlPoints').append('path').attr('d', path.getAttribute('d')).on('click', addInterimControlPoint);
const l = path.getTotalLength(); const l = path.getTotalLength();
if (!l) return; if (!l) return;
const increment = l / Math.max(Math.ceil(l / 200), 2); const increment = l / Math.max(Math.ceil(l / 200), 2);
@ -109,13 +109,13 @@ function editLabel() {
} }
function dragControlPoint() { function dragControlPoint() {
this.setAttribute("cx", d3.event.x); this.setAttribute('cx', d3.event.x);
this.setAttribute("cy", d3.event.y); this.setAttribute('cy', d3.event.y);
redrawLabelPath(); redrawLabelPath();
} }
function redrawLabelPath() { function redrawLabelPath() {
const path = document.getElementById("textPath_" + elSelected.attr("id")); const path = document.getElementById('textPath_' + elSelected.attr('id'));
lineGen.curve(d3.curveBundle.beta(1)); lineGen.curve(d3.curveBundle.beta(1));
const points = []; const points = [];
debug debug
@ -125,8 +125,8 @@ function editLabel() {
points.push([this.getAttribute("cx"), this.getAttribute("cy")]); points.push([this.getAttribute("cx"), this.getAttribute("cy")]);
}); });
const d = round(lineGen(points)); const d = round(lineGen(points));
path.setAttribute("d", d); path.setAttribute('d', d);
debug.select("#controlPoints > path").attr("d", d); debug.select('#controlPoints > path').attr('d', d);
} }
function clickControlPoint() { function clickControlPoint() {
@ -202,10 +202,10 @@ function editLabel() {
} }
function toggleNewGroupInput() { function toggleNewGroupInput() {
if (labelGroupInput.style.display === "none") { if (labelGroupInput.style.display === 'none') {
labelGroupInput.style.display = "inline-block"; labelGroupInput.style.display = 'inline-block';
labelGroupInput.focus(); labelGroupInput.focus();
labelGroupSelect.style.display = "none"; labelGroupSelect.style.display = 'none';
} else { } else {
labelGroupInput.style.display = "none"; labelGroupInput.style.display = "none";
labelGroupSelect.style.display = "inline-block"; labelGroupSelect.style.display = "inline-block";
@ -223,39 +223,39 @@ function editLabel() {
.replace(/[^\w\s]/gi, ""); .replace(/[^\w\s]/gi, "");
if (document.getElementById(group)) { if (document.getElementById(group)) {
tip("Element with this id already exists. Please provide a unique name", false, "error"); tip('Element with this id already exists. Please provide a unique name', false, 'error');
return; return;
} }
if (Number.isFinite(+group.charAt(0))) { if (Number.isFinite(+group.charAt(0))) {
tip("Group name should start with a letter", false, "error"); tip('Group name should start with a letter', false, 'error');
return; return;
} }
// just rename if only 1 element left // just rename if only 1 element left
const oldGroup = elSelected.node().parentNode; const oldGroup = elSelected.node().parentNode;
if (oldGroup !== "states" && oldGroup !== "addedLabels" && oldGroup.childElementCount === 1) { if (oldGroup !== 'states' && oldGroup !== 'addedLabels' && oldGroup.childElementCount === 1) {
document.getElementById("labelGroupSelect").selectedOptions[0].remove(); document.getElementById('labelGroupSelect').selectedOptions[0].remove();
document.getElementById("labelGroupSelect").options.add(new Option(group, group, false, true)); document.getElementById('labelGroupSelect').options.add(new Option(group, group, false, true));
oldGroup.id = group; oldGroup.id = group;
toggleNewGroupInput(); toggleNewGroupInput();
document.getElementById("labelGroupInput").value = ""; document.getElementById('labelGroupInput').value = '';
return; return;
} }
const newGroup = elSelected.node().parentNode.cloneNode(false); const newGroup = elSelected.node().parentNode.cloneNode(false);
document.getElementById("labels").appendChild(newGroup); document.getElementById('labels').appendChild(newGroup);
newGroup.id = group; newGroup.id = group;
document.getElementById("labelGroupSelect").options.add(new Option(group, group, false, true)); document.getElementById('labelGroupSelect').options.add(new Option(group, group, false, true));
document.getElementById(group).appendChild(elSelected.node()); document.getElementById(group).appendChild(elSelected.node());
toggleNewGroupInput(); toggleNewGroupInput();
document.getElementById("labelGroupInput").value = ""; document.getElementById('labelGroupInput').value = '';
} }
function removeLabelsGroup() { function removeLabelsGroup() {
const group = elSelected.node().parentNode.id; const group = elSelected.node().parentNode.id;
const basic = group === "states" || group === "addedLabels"; const basic = group === 'states' || group === 'addedLabels';
const count = elSelected.node().parentNode.childElementCount; const count = elSelected.node().parentNode.childElementCount;
alertMessage.innerHTML = /* html */ `Are you sure you want to remove ${ alertMessage.innerHTML = /* html */ `Are you sure you want to remove ${
basic ? "all elements in the group" : "the entire label group" basic ? "all elements in the group" : "the entire label group"
@ -299,8 +299,13 @@ function editLabel() {
const input = document.getElementById("labelText").value; const input = document.getElementById("labelText").value;
const el = elSelected.select("textPath").node(); const el = elSelected.select("textPath").node();
const example = d3.select(elSelected.node().parentNode).append("text").attr("x", 0).attr("x", 0).attr("font-size", el.getAttribute("font-size")).node(); const example = d3.select(elSelected.node().parentNode).append("text").attr("x", 0).attr("x", 0).attr("font-size", el.getAttribute("font-size")).node();
}
function changeText() {
const input = document.getElementById('labelText').value;
const el = elSelected.select('textPath').node();
const example = d3.select(elSelected.node().parentNode).append('text').attr('x', 0).attr('x', 0).attr('font-size', el.getAttribute('font-size')).node();
const lines = input.split("|"); const lines = input.split('|');
const top = (lines.length - 1) / -2; // y offset const top = (lines.length - 1) / -2; // y offset
const inner = lines const inner = lines
.map((l, d) => { .map((l, d) => {
@ -321,20 +326,20 @@ function editLabel() {
if (elSelected.attr("id").slice(0, 10) === "stateLabel") { if (elSelected.attr("id").slice(0, 10) === "stateLabel") {
const id = +elSelected.attr("id").slice(10); const id = +elSelected.attr("id").slice(10);
const culture = pack.states[id].culture; const culture = pack.states[id].culture;
name = Names.getState(Names.getCulture(culture, 4, 7, ""), culture); name = Names.getState(Names.getCulture(culture, 4, 7, ''), culture);
} else { } else {
const box = elSelected.node().getBBox(); const box = elSelected.node().getBBox();
const cell = findCell((box.x + box.width) / 2, (box.y + box.height) / 2); const cell = findCell((box.x + box.width) / 2, (box.y + box.height) / 2);
const culture = pack.cells.culture[cell]; const culture = pack.cells.culture[cell];
name = Names.getCulture(culture); name = Names.getCulture(culture);
} }
document.getElementById("labelText").value = name; document.getElementById('labelText').value = name;
changeText(); changeText();
} }
function editGroupStyle() { function editGroupStyle() {
const g = elSelected.node().parentNode.id; const g = elSelected.node().parentNode.id;
editStyle("labels", g); editStyle('labels', g);
} }
function showSizeSection() { function showSizeSection() {
@ -348,13 +353,13 @@ function editLabel() {
} }
function changeStartOffset() { function changeStartOffset() {
elSelected.select("textPath").attr("startOffset", this.value + "%"); elSelected.select('textPath').attr('startOffset', this.value + '%');
tip("Label offset: " + this.value + "%"); tip('Label offset: ' + this.value + '%');
} }
function changeRelativeSize() { function changeRelativeSize() {
elSelected.select("textPath").attr("font-size", this.value + "%"); elSelected.select('textPath').attr('font-size', this.value + '%');
tip("Label relative size: " + this.value + "%"); tip('Label relative size: ' + this.value + '%');
changeText(); changeText();
} }
@ -367,7 +372,7 @@ function editLabel() {
} }
function editLabelLegend() { function editLabelLegend() {
const id = elSelected.attr("id"); const id = elSelected.attr('id');
const name = elSelected.text(); const name = elSelected.text();
editNotes(id, name); editNotes(id, name);
} }
@ -392,7 +397,7 @@ function editLabel() {
} }
function closeLabelEditor() { function closeLabelEditor() {
debug.select("#controlPoints").remove(); debug.select('#controlPoints').remove();
unselect(); unselect();
} }
} }

91
modules/ui/lakes-editor.js
View file

@ -1,8 +1,8 @@
"use strict"; 'use strict';
function editLake() { function editLake() {
if (customization) return; if (customization) return;
closeDialogs(".stable"); closeDialogs('.stable');
if (layerIsOn("toggleCells")) toggleCells(); if (layerIsOn('toggleCells')) toggleCells();
$("#lakeEditor").dialog({ $("#lakeEditor").dialog({
title: "Edit Lake", title: "Edit Lake",
@ -12,32 +12,32 @@ function editLake() {
}); });
const node = d3.event.target; const node = d3.event.target;
debug.append("g").attr("id", "vertices"); debug.append('g').attr('id', 'vertices');
elSelected = d3.select(node); elSelected = d3.select(node);
updateLakeValues(); updateLakeValues();
selectLakeGroup(node); selectLakeGroup(node);
drawLakeVertices(); drawLakeVertices();
viewbox.on("touchmove mousemove", null); viewbox.on('touchmove mousemove', null);
if (modules.editLake) return; if (modules.editLake) return;
modules.editLake = true; modules.editLake = true;
// add listeners // add listeners
document.getElementById("lakeName").addEventListener("input", changeName); document.getElementById('lakeName').addEventListener('input', changeName);
document.getElementById("lakeNameCulture").addEventListener("click", generateNameCulture); document.getElementById('lakeNameCulture').addEventListener('click', generateNameCulture);
document.getElementById("lakeNameRandom").addEventListener("click", generateNameRandom); document.getElementById('lakeNameRandom').addEventListener('click', generateNameRandom);
document.getElementById("lakeGroup").addEventListener("change", changeLakeGroup); document.getElementById('lakeGroup').addEventListener('change', changeLakeGroup);
document.getElementById("lakeGroupAdd").addEventListener("click", toggleNewGroupInput); document.getElementById('lakeGroupAdd').addEventListener('click', toggleNewGroupInput);
document.getElementById("lakeGroupName").addEventListener("change", createNewGroup); document.getElementById('lakeGroupName').addEventListener('change', createNewGroup);
document.getElementById("lakeGroupRemove").addEventListener("click", removeLakeGroup); document.getElementById('lakeGroupRemove').addEventListener('click', removeLakeGroup);
document.getElementById("lakeEditStyle").addEventListener("click", editGroupStyle); document.getElementById('lakeEditStyle').addEventListener('click', editGroupStyle);
document.getElementById("lakeLegend").addEventListener("click", editLakeLegend); document.getElementById('lakeLegend').addEventListener('click', editLakeLegend);
function getLake() { function getLake() {
const lakeId = +elSelected.attr("data-f"); const lakeId = +elSelected.attr('data-f');
return pack.features.find(feature => feature.i === lakeId); return pack.features.find((feature) => feature.i === lakeId);
} }
function updateLakeValues() { function updateLakeValues() {
@ -51,21 +51,21 @@ function editLake() {
document.getElementById("lakeShoreLength").value = document.getElementById("lakeShoreLength").value =
si(length * distanceScaleInput.value) + " " + distanceUnitInput.value; si(length * distanceScaleInput.value) + " " + distanceUnitInput.value;
const lakeCells = Array.from(cells.i.filter(i => cells.f[i] === l.i)); const lakeCells = Array.from(cells.i.filter((i) => cells.f[i] === l.i));
const heights = lakeCells.map(i => cells.h[i]); const heights = lakeCells.map((i) => cells.h[i]);
document.getElementById("lakeElevation").value = getHeight(l.height); document.getElementById("lakeElevation").value = getHeight(l.height);
document.getElementById("lakeAverageDepth").value = getHeight(d3.mean(heights), "abs"); document.getElementById("lakeAverageDepth").value = getHeight(d3.mean(heights), "abs");
document.getElementById("lakeMaxDepth").value = getHeight(d3.min(heights), "abs"); document.getElementById("lakeMaxDepth").value = getHeight(d3.min(heights), "abs");
document.getElementById("lakeFlux").value = l.flux; document.getElementById('lakeFlux').value = l.flux;
document.getElementById("lakeEvaporation").value = l.evaporation; document.getElementById('lakeEvaporation').value = l.evaporation;
const inlets = l.inlets && l.inlets.map(inlet => pack.rivers.find(river => river.i === inlet)?.name); const inlets = l.inlets && l.inlets.map((inlet) => pack.rivers.find((river) => river.i === inlet)?.name);
const outlet = l.outlet ? pack.rivers.find(river => river.i === l.outlet)?.name : "no"; const outlet = l.outlet ? pack.rivers.find((river) => river.i === l.outlet)?.name : 'no';
document.getElementById("lakeInlets").value = inlets ? inlets.length : "no"; document.getElementById('lakeInlets').value = inlets ? inlets.length : 'no';
document.getElementById("lakeInlets").title = inlets ? inlets.join(", ") : ""; document.getElementById('lakeInlets').title = inlets ? inlets.join(', ') : '';
document.getElementById("lakeOutlet").value = outlet; document.getElementById('lakeOutlet').value = outlet;
} }
function drawLakeVertices() { function drawLakeVertices() {
@ -114,7 +114,7 @@ function editLake() {
function redrawLake() { function redrawLake() {
lineGen.curve(d3.curveBasisClosed); lineGen.curve(d3.curveBasisClosed);
const feature = getLake(); const feature = getLake();
const points = feature.vertices.map(v => pack.vertices.p[v]); const points = feature.vertices.map((v) => pack.vertices.p[v]);
const d = round(lineGen(points)); const d = round(lineGen(points));
elSelected.attr("d", d); elSelected.attr("d", d);
defs.select("mask#land > path#land_" + feature.i).attr("d", d); // update land mask defs.select("mask#land > path#land_" + feature.i).attr("d", d); // update land mask
@ -139,7 +139,7 @@ function editLake() {
function selectLakeGroup(node) { function selectLakeGroup(node) {
const group = node.parentNode.id; const group = node.parentNode.id;
const select = document.getElementById("lakeGroup"); const select = document.getElementById('lakeGroup');
select.options.length = 0; // remove all options select.options.length = 0; // remove all options
lakes.selectAll("g").each(function () { lakes.selectAll("g").each(function () {
@ -153,10 +153,10 @@ function editLake() {
} }
function toggleNewGroupInput() { function toggleNewGroupInput() {
if (lakeGroupName.style.display === "none") { if (lakeGroupName.style.display === 'none') {
lakeGroupName.style.display = "inline-block"; lakeGroupName.style.display = 'inline-block';
lakeGroupName.focus(); lakeGroupName.focus();
lakeGroup.style.display = "none"; lakeGroup.style.display = 'none';
} else { } else {
lakeGroupName.style.display = "none"; lakeGroupName.style.display = "none";
lakeGroup.style.display = "inline-block"; lakeGroup.style.display = "inline-block";
@ -174,42 +174,42 @@ function editLake() {
.replace(/[^\w\s]/gi, ""); .replace(/[^\w\s]/gi, "");
if (document.getElementById(group)) { if (document.getElementById(group)) {
tip("Element with this id already exists. Please provide a unique name", false, "error"); tip('Element with this id already exists. Please provide a unique name', false, 'error');
return; return;
} }
if (Number.isFinite(+group.charAt(0))) { if (Number.isFinite(+group.charAt(0))) {
tip("Group name should start with a letter", false, "error"); tip('Group name should start with a letter', false, 'error');
return; return;
} }
// just rename if only 1 element left // just rename if only 1 element left
const oldGroup = elSelected.node().parentNode; const oldGroup = elSelected.node().parentNode;
const basic = ["freshwater", "salt", "sinkhole", "frozen", "lava", "dry"].includes(oldGroup.id); const basic = ['freshwater', 'salt', 'sinkhole', 'frozen', 'lava', 'dry'].includes(oldGroup.id);
if (!basic && oldGroup.childElementCount === 1) { if (!basic && oldGroup.childElementCount === 1) {
document.getElementById("lakeGroup").selectedOptions[0].remove(); document.getElementById('lakeGroup').selectedOptions[0].remove();
document.getElementById("lakeGroup").options.add(new Option(group, group, false, true)); document.getElementById('lakeGroup').options.add(new Option(group, group, false, true));
oldGroup.id = group; oldGroup.id = group;
toggleNewGroupInput(); toggleNewGroupInput();
document.getElementById("lakeGroupName").value = ""; document.getElementById('lakeGroupName').value = '';
return; return;
} }
// create a new group // create a new group
const newGroup = elSelected.node().parentNode.cloneNode(false); const newGroup = elSelected.node().parentNode.cloneNode(false);
document.getElementById("lakes").appendChild(newGroup); document.getElementById('lakes').appendChild(newGroup);
newGroup.id = group; newGroup.id = group;
document.getElementById("lakeGroup").options.add(new Option(group, group, false, true)); document.getElementById('lakeGroup').options.add(new Option(group, group, false, true));
document.getElementById(group).appendChild(elSelected.node()); document.getElementById(group).appendChild(elSelected.node());
toggleNewGroupInput(); toggleNewGroupInput();
document.getElementById("lakeGroupName").value = ""; document.getElementById('lakeGroupName').value = '';
} }
function removeLakeGroup() { function removeLakeGroup() {
const group = elSelected.node().parentNode.id; const group = elSelected.node().parentNode.id;
if (["freshwater", "salt", "sinkhole", "frozen", "lava", "dry"].includes(group)) { if (['freshwater', 'salt', 'sinkhole', 'frozen', 'lava', 'dry'].includes(group)) {
tip("This is one of the default groups, it cannot be removed", false, "error"); tip('This is one of the default groups, it cannot be removed', false, 'error');
return; return;
} }
@ -236,20 +236,21 @@ function editLake() {
} }
} }
}); });
confirmationDialog({title: 'Remove lake group', message, confirm: 'Remove', onConfirm});
} }
function editGroupStyle() { function editGroupStyle() {
const g = elSelected.node().parentNode.id; const g = elSelected.node().parentNode.id;
editStyle("lakes", g); editStyle('lakes', g);
} }
function editLakeLegend() { function editLakeLegend() {
const id = elSelected.attr("id"); const id = elSelected.attr('id');
editNotes(id, getLake().name + " " + lakeGroup.value + " lake"); editNotes(id, getLake().name + ' ' + lakeGroup.value + ' lake');
} }
function closeLakesEditor() { function closeLakesEditor() {
debug.select("#vertices").remove(); debug.select('#vertices').remove();
unselect(); unselect();
} }
} }

62
modules/ui/military-overview.js
View file

@ -1,14 +1,14 @@
"use strict"; 'use strict';
function overviewMilitary() { function overviewMilitary() {
if (customization) return; if (customization) return;
closeDialogs("#militaryOverview, .stable"); closeDialogs('#militaryOverview, .stable');
if (!layerIsOn("toggleStates")) toggleStates(); if (!layerIsOn('toggleStates')) toggleStates();
if (!layerIsOn("toggleBorders")) toggleBorders(); if (!layerIsOn('toggleBorders')) toggleBorders();
if (!layerIsOn("toggleMilitary")) toggleMilitary(); if (!layerIsOn('toggleMilitary')) toggleMilitary();
const body = document.getElementById("militaryBody"); const body = document.getElementById('militaryBody');
addLines(); addLines();
$("#militaryOverview").dialog(); $('#militaryOverview').dialog();
if (modules.overviewMilitary) return; if (modules.overviewMilitary) return;
modules.overviewMilitary = true; modules.overviewMilitary = true;
@ -22,13 +22,13 @@ function overviewMilitary() {
}); });
// add listeners // add listeners
document.getElementById("militaryOverviewRefresh").addEventListener("click", addLines); document.getElementById('militaryOverviewRefresh').addEventListener('click', addLines);
document.getElementById("militaryPercentage").addEventListener("click", togglePercentageMode); document.getElementById('militaryPercentage').addEventListener('click', togglePercentageMode);
document.getElementById("militaryOptionsButton").addEventListener("click", militaryCustomize); document.getElementById('militaryOptionsButton').addEventListener('click', militaryCustomize);
document.getElementById("militaryRegimentsList").addEventListener("click", () => overviewRegiments(-1)); document.getElementById('militaryRegimentsList').addEventListener('click', () => overviewRegiments(-1));
document.getElementById("militaryOverviewRecalculate").addEventListener("click", militaryRecalculate); document.getElementById('militaryOverviewRecalculate').addEventListener('click', militaryRecalculate);
document.getElementById("militaryExport").addEventListener("click", downloadMilitaryData); document.getElementById('militaryExport').addEventListener('click', downloadMilitaryData);
document.getElementById("militaryWiki").addEventListener("click", () => wiki("Military-Forces")); document.getElementById('militaryWiki').addEventListener('click', () => wiki('Military-Forces'));
body.addEventListener("change", function (ev) { body.addEventListener("change", function (ev) {
const el = ev.target, const el = ev.target,
@ -65,9 +65,9 @@ function overviewMilitary() {
// add line for each state // add line for each state
function addLines() { function addLines() {
body.innerHTML = ""; body.innerHTML = '';
let lines = ""; let lines = '';
const states = pack.states.filter(s => s.i && !s.removed); const states = pack.states.filter((s) => s.i && !s.removed);
for (const s of states) { for (const s of states) {
const population = rn((s.rural + s.urban * urbanization) * populationRate); const population = rn((s.rural + s.urban * urbanization) * populationRate);
@ -75,8 +75,8 @@ function overviewMilitary() {
const total = options.military.reduce((s, u) => s + getForces(u) * u.crew, 0); const total = options.military.reduce((s, u) => s + getForces(u) * u.crew, 0);
const rate = (total / population) * 100; const rate = (total / population) * 100;
const sortData = options.military.map(u => `data-${u.name}="${getForces(u)}"`).join(" "); const sortData = options.military.map((u) => `data-${u.name}="${getForces(u)}"`).join(' ');
const lineData = options.military.map(u => `<div data-type="${u.name}" data-tip="State ${u.name} units number">${getForces(u)}</div>`).join(" "); const lineData = options.military.map((u) => `<div data-type="${u.name}" data-tip="State ${u.name} units number">${getForces(u)}</div>`).join(' ');
lines += /* html */ `<div lines += /* html */ `<div
class="states" class="states"
@ -105,12 +105,12 @@ function overviewMilitary() {
<span data-tip="Show regiments list" class="icon-list-bullet pointer"></span> <span data-tip="Show regiments list" class="icon-list-bullet pointer"></span>
</div>`; </div>`;
} }
body.insertAdjacentHTML("beforeend", lines); body.insertAdjacentHTML('beforeend', lines);
updateFooter(); updateFooter();
// add listeners // add listeners
body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseenter", ev => stateHighlightOn(ev))); body.querySelectorAll('div.states').forEach((el) => el.addEventListener('mouseenter', (ev) => stateHighlightOn(ev)));
body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseleave", ev => stateHighlightOff(ev))); body.querySelectorAll('div.states').forEach((el) => el.addEventListener('mouseleave', (ev) => stateHighlightOff(ev)));
if (body.dataset.type === "percentage") { if (body.dataset.type === "percentage") {
body.dataset.type = "absolute"; body.dataset.type = "absolute";
@ -137,7 +137,7 @@ function overviewMilitary() {
const total = (line.dataset.total = options.military.reduce((s, u) => s + getForces(u) * u.crew, 0)); const total = (line.dataset.total = options.military.reduce((s, u) => s + getForces(u) * u.crew, 0));
const rate = (line.dataset.rate = (total / population) * 100); const rate = (line.dataset.rate = (total / population) * 100);
line.querySelector("div[data-type='total']").innerHTML = si(total); line.querySelector("div[data-type='total']").innerHTML = si(total);
line.querySelector("div[data-type='rate']").innerHTML = rn(rate, 2) + "%"; line.querySelector("div[data-type='rate']").innerHTML = rn(rate, 2) + '%';
updateFooter(); updateFooter();
} }
@ -148,8 +148,8 @@ function overviewMilitary() {
const total = d3.sum(lines.map(el => el.dataset.total)); const total = d3.sum(lines.map(el => el.dataset.total));
militaryFooterForcesTotal.innerHTML = si(total); militaryFooterForcesTotal.innerHTML = si(total);
militaryFooterForces.innerHTML = si(total / statesNumber); militaryFooterForces.innerHTML = si(total / statesNumber);
militaryFooterRate.innerHTML = rn(d3.sum(lines.map(el => el.dataset.rate)) / statesNumber, 2) + "%"; militaryFooterRate.innerHTML = rn(d3.sum(lines.map((el) => el.dataset.rate)) / statesNumber, 2) + '%';
militaryFooterAlert.innerHTML = rn(d3.sum(lines.map(el => el.dataset.alert)) / statesNumber, 2); militaryFooterAlert.innerHTML = rn(d3.sum(lines.map((el) => el.dataset.alert)) / statesNumber, 2);
} }
function stateHighlightOn(event) { function stateHighlightOn(event) {
@ -207,7 +207,7 @@ function overviewMilitary() {
const total = function (type) { const total = function (type) {
if (cache[type]) cache[type]; if (cache[type]) cache[type];
cache[type] = d3.sum(array.map(el => +el.dataset[type])); cache[type] = d3.sum(array.map((el) => +el.dataset[type]));
return cache[type]; return cache[type];
}; };
@ -219,7 +219,7 @@ function overviewMilitary() {
}); });
}); });
} else { } else {
body.dataset.type = "absolute"; body.dataset.type = 'absolute';
addLines(); addLines();
} }
} }
@ -388,11 +388,11 @@ function overviewMilitary() {
const unitLines = Array.from(tableBody.querySelectorAll("tr")); const unitLines = Array.from(tableBody.querySelectorAll("tr"));
const names = unitLines.map(r => r.querySelector("input").value.replace(/[&\/\\#, +()$~%.'":*?<>{}]/g, "_")); const names = unitLines.map(r => r.querySelector("input").value.replace(/[&\/\\#, +()$~%.'":*?<>{}]/g, "_"));
if (new Set(names).size !== names.length) { if (new Set(names).size !== names.length) {
tip("All units should have unique names", false, "error"); tip('All units should have unique names', false, 'error');
return; return;
} }
$("#militaryOptions").dialog("close"); $('#militaryOptions').dialog('close');
options.military = unitLines.map((r, i) => { options.military = unitLines.map((r, i) => {
const elements = Array.from(r.querySelectorAll("input, button, select")); const elements = Array.from(r.querySelectorAll("input, button, select"));
const [icon, name, biomes, states, cultures, religions, rural, urban, crew, power, type, separate] = elements.map(el => { const [icon, name, biomes, states, cultures, religions, rural, urban, crew, power, type, separate] = elements.map(el => {
@ -411,7 +411,7 @@ function overviewMilitary() {
if (religions) unit.religions = religions; if (religions) unit.religions = religions;
return unit; return unit;
}); });
localStorage.setItem("military", JSON.stringify(options.military)); localStorage.setItem('military', JSON.stringify(options.military));
Military.generate(); Military.generate();
updateHeaders(); updateHeaders();
addLines(); addLines();
@ -450,7 +450,7 @@ function overviewMilitary() {
data += el.dataset.alert + "\n"; data += el.dataset.alert + "\n";
}); });
const name = getFileName("Military") + ".csv"; const name = getFileName('Military') + '.csv';
downloadFile(data, name); downloadFile(data, name);
} }
} }

18
modules/ui/namesbase-editor.js
View file

@ -1,8 +1,8 @@
"use strict"; 'use strict';
function editNamesbase() { function editNamesbase() {
if (customization) return; if (customization) return;
closeDialogs("#namesbaseEditor, .stable"); closeDialogs('#namesbaseEditor, .stable');
$("#namesbaseEditor").dialog(); $('#namesbaseEditor').dialog();
if (modules.editNamesbase) return; if (modules.editNamesbase) return;
modules.editNamesbase = true; modules.editNamesbase = true;
@ -58,8 +58,8 @@ function editNamesbase() {
}); });
function createBasesList() { function createBasesList() {
const select = document.getElementById("namesbaseSelect"); const select = document.getElementById('namesbaseSelect');
select.innerHTML = ""; select.innerHTML = '';
nameBases.forEach((b, i) => select.options.add(new Option(b.name, i))); nameBases.forEach((b, i) => select.options.add(new Option(b.name, i)));
} }
@ -81,13 +81,13 @@ function editNamesbase() {
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
const example = Names.getBase(base); const example = Names.getBase(base);
if (example === undefined) { if (example === undefined) {
examples = "Cannot generate examples. Please verify the data"; examples = 'Cannot generate examples. Please verify the data';
break; break;
} }
if (i) examples += ", "; if (i) examples += ', ';
examples += example; examples += example;
} }
document.getElementById("namesbaseExamples").innerHTML = examples; document.getElementById('namesbaseExamples').innerHTML = examples;
} }
function updateNamesData() { function updateNamesData() {
@ -130,7 +130,7 @@ function editNamesbase() {
} }
function updateBaseDublication() { function updateBaseDublication() {
const base = +document.getElementById("namesbaseSelect").value; const base = +document.getElementById('namesbaseSelect').value;
nameBases[base].d = this.value; nameBases[base].d = this.value;
} }

4
modules/ui/notes-editor.js
View file

@ -21,10 +21,10 @@ function editNotes(id, name) {
// select an object // select an object
if (notes.length || id) { if (notes.length || id) {
if (!id) id = notes[0].id; if (!id) id = notes[0].id;
let note = notes.find(note => note.id === id); let note = notes.find((note) => note.id === id);
if (note === undefined) { if (note === undefined) {
if (!name) name = id; if (!name) name = id;
note = {id, name, legend: ""}; note = {id, name, legend: ''};
notes.push(note); notes.push(note);
notesSelect.options.add(new Option(id, id)); notesSelect.options.add(new Option(id, id));
} }

122
modules/ui/options.js
View file

@ -1,41 +1,41 @@
// UI module to control the options (preferences) // UI module to control the options (preferences)
"use strict"; 'use strict';
$("#optionsContainer").draggable({handle: ".drag-trigger", snap: "svg", snapMode: "both"}); $('#optionsContainer').draggable({handle: '.drag-trigger', snap: 'svg', snapMode: 'both'});
$("#exitCustomization").draggable({handle: "div"}); $('#exitCustomization').draggable({handle: 'div'});
$("#mapLayers").disableSelection(); $('#mapLayers').disableSelection();
// remove glow if tip is aknowledged // remove glow if tip is aknowledged
if (stored("disable_click_arrow_tooltip")) { if (stored("disable_click_arrow_tooltip")) {
clearMainTip(); clearMainTip();
optionsTrigger.classList.remove("glow"); optionsTrigger.classList.remove('glow');
} }
// Show options pane on trigger click // Show options pane on trigger click
function showOptions(event) { function showOptions(event) {
if (!stored("disable_click_arrow_tooltip")) { if (!stored("disable_click_arrow_tooltip")) {
clearMainTip(); clearMainTip();
localStorage.setItem("disable_click_arrow_tooltip", true); localStorage.setItem('disable_click_arrow_tooltip', true);
optionsTrigger.classList.remove("glow"); optionsTrigger.classList.remove('glow');
} }
regenerate.style.display = "none"; regenerate.style.display = 'none';
document.getElementById("options").style.display = "block"; document.getElementById('options').style.display = 'block';
optionsTrigger.style.display = "none"; optionsTrigger.style.display = 'none';
if (event) event.stopPropagation(); if (event) event.stopPropagation();
} }
// Hide options pane on trigger click // Hide options pane on trigger click
function hideOptions(event) { function hideOptions(event) {
document.getElementById("options").style.display = "none"; document.getElementById('options').style.display = 'none';
optionsTrigger.style.display = "block"; optionsTrigger.style.display = 'block';
if (event) event.stopPropagation(); if (event) event.stopPropagation();
} }
// To toggle options on hotkey press // To toggle options on hotkey press
function toggleOptions(event) { function toggleOptions(event) {
if (document.getElementById("options").style.display === "none") showOptions(event); if (document.getElementById('options').style.display === 'none') showOptions(event);
else hideOptions(event); else hideOptions(event);
} }
@ -158,15 +158,15 @@ optionsContent.addEventListener("click", function (event) {
function mapSizeInputChange() { function mapSizeInputChange() {
changeMapSize(); changeMapSize();
localStorage.setItem("mapWidth", mapWidthInput.value); localStorage.setItem('mapWidth', mapWidthInput.value);
localStorage.setItem("mapHeight", mapHeightInput.value); localStorage.setItem('mapHeight', mapHeightInput.value);
} }
// change svg size on manual size change or window resize, do not change graph size // change svg size on manual size change or window resize, do not change graph size
function changeMapSize() { function changeMapSize() {
svgWidth = Math.min(+mapWidthInput.value, window.innerWidth); svgWidth = Math.min(+mapWidthInput.value, window.innerWidth);
svgHeight = Math.min(+mapHeightInput.value, window.innerHeight); svgHeight = Math.min(+mapHeightInput.value, window.innerHeight);
svg.attr("width", svgWidth).attr("height", svgHeight); svg.attr('width', svgWidth).attr('height', svgHeight);
const maxWidth = Math.max(+mapWidthInput.value, graphWidth); const maxWidth = Math.max(+mapWidthInput.value, graphWidth);
const maxHeight = Math.max(+mapHeightInput.value, graphHeight); const maxHeight = Math.max(+mapHeightInput.value, graphHeight);
@ -207,8 +207,8 @@ function toggleFullscreen() {
if (mapWidthInput.value != window.innerWidth || mapHeightInput.value != window.innerHeight) { if (mapWidthInput.value != window.innerWidth || mapHeightInput.value != window.innerHeight) {
mapWidthInput.value = window.innerWidth; mapWidthInput.value = window.innerWidth;
mapHeightInput.value = window.innerHeight; mapHeightInput.value = window.innerHeight;
localStorage.removeItem("mapHeight"); localStorage.removeItem('mapHeight');
localStorage.removeItem("mapWidth"); localStorage.removeItem('mapWidth');
} else { } else {
mapWidthInput.value = graphWidth; mapWidthInput.value = graphWidth;
mapHeightInput.value = graphHeight; mapHeightInput.value = graphHeight;
@ -236,7 +236,7 @@ const voiceInterval = setInterval(function () {
if (voices.length) clearInterval(voiceInterval); if (voices.length) clearInterval(voiceInterval);
else return; else return;
const select = document.getElementById("speakerVoice"); const select = document.getElementById('speakerVoice');
voices.forEach((voice, i) => { voices.forEach((voice, i) => {
select.options.add(new Option(voice.name, i, false)); select.options.add(new Option(voice.name, i, false));
}); });
@ -250,7 +250,7 @@ function testSpeaker() {
const speaker = new SpeechSynthesisUtterance(text); const speaker = new SpeechSynthesisUtterance(text);
const voices = speechSynthesis.getVoices(); const voices = speechSynthesis.getVoices();
if (voices.length) { if (voices.length) {
const voiceId = +document.getElementById("speakerVoice").value; const voiceId = +document.getElementById('speakerVoice').value;
speaker.voice = voices[voiceId]; speaker.voice = voices[voiceId];
} }
speechSynthesis.speak(speaker); speechSynthesis.speak(speaker);
@ -349,9 +349,9 @@ function changeCultureSet() {
} }
function changeEmblemShape(emblemShape) { function changeEmblemShape(emblemShape) {
const image = document.getElementById("emblemShapeImage"); const image = document.getElementById('emblemShapeImage');
const shapePath = window.COArenderer && COArenderer.shieldPaths[emblemShape]; const shapePath = window.COArenderer && COArenderer.shieldPaths[emblemShape];
shapePath ? image.setAttribute("d", shapePath) : image.removeAttribute("d"); shapePath ? image.setAttribute('d', shapePath) : image.removeAttribute('d');
const specificShape = ["culture", "state", "random"].includes(emblemShape) ? null : emblemShape; const specificShape = ["culture", "state", "random"].includes(emblemShape) ? null : emblemShape;
if (emblemShape === "random") if (emblemShape === "random")
@ -364,25 +364,25 @@ function changeEmblemShape(emblemShape) {
COArenderer.trigger(id, coa); COArenderer.trigger(id, coa);
}; };
pack.states.forEach(state => { pack.states.forEach((state) => {
if (!state.i || state.removed || !state.coa || state.coa === "custom") return; if (!state.i || state.removed || !state.coa || state.coa === 'custom') return;
const newShield = specificShape || COA.getShield(state.culture, null); const newShield = specificShape || COA.getShield(state.culture, null);
if (newShield === state.coa.shield) return; if (newShield === state.coa.shield) return;
state.coa.shield = newShield; state.coa.shield = newShield;
rerenderCOA("stateCOA" + state.i, state.coa); rerenderCOA('stateCOA' + state.i, state.coa);
}); });
pack.provinces.forEach(province => { pack.provinces.forEach((province) => {
if (!province.i || province.removed || !province.coa || province.coa === "custom") return; if (!province.i || province.removed || !province.coa || province.coa === 'custom') return;
const culture = pack.cells.culture[province.center]; const culture = pack.cells.culture[province.center];
const newShield = specificShape || COA.getShield(culture, province.state); const newShield = specificShape || COA.getShield(culture, province.state);
if (newShield === province.coa.shield) return; if (newShield === province.coa.shield) return;
province.coa.shield = newShield; province.coa.shield = newShield;
rerenderCOA("provinceCOA" + province.i, province.coa); rerenderCOA('provinceCOA' + province.i, province.coa);
}); });
pack.burgs.forEach(burg => { pack.burgs.forEach((burg) => {
if (!burg.i || burg.removed || !burg.coa || burg.coa === "custom") return; if (!burg.i || burg.removed || !burg.coa || burg.coa === 'custom') return;
const newShield = specificShape || COA.getShield(burg.culture, burg.state); const newShield = specificShape || COA.getShield(burg.culture, burg.state);
if (newShield === burg.coa.shield) return; if (newShield === burg.coa.shield) return;
burg.coa.shield = newShield; burg.coa.shield = newShield;
@ -521,8 +521,8 @@ function applyStoredOptions() {
// search params overwrite stored and default options // search params overwrite stored and default options
const params = new URL(window.location.href).searchParams; const params = new URL(window.location.href).searchParams;
const width = +params.get("width"); const width = +params.get('width');
const height = +params.get("height"); const height = +params.get('height');
if (width) mapWidthInput.value = width; if (width) mapWidthInput.value = width;
if (height) mapHeightInput.value = height; if (height) mapHeightInput.value = height;
@ -647,7 +647,7 @@ function changeYear() {
function changeEra() { function changeEra() {
if (!eraInput.value) return; if (!eraInput.value) return;
lock("era"); lock('era');
options.era = eraInput.value; options.era = eraInput.value;
} }
@ -810,7 +810,7 @@ function loadURL() {
return; return;
} }
loadMapFromURL(value); loadMapFromURL(value);
$(this).dialog("close"); $(this).dialog('close');
}, },
Cancel: function () { Cancel: function () {
$(this).dialog("close"); $(this).dialog("close");
@ -822,7 +822,7 @@ function loadURL() {
// load map // load map
document.getElementById("mapToLoad").addEventListener("change", function () { document.getElementById("mapToLoad").addEventListener("change", function () {
const fileToLoad = this.files[0]; const fileToLoad = this.files[0];
this.value = ""; this.value = '';
closeDialogs(); closeDialogs();
uploadMap(fileToLoad); uploadMap(fileToLoad);
}); });
@ -904,52 +904,52 @@ function updateTilesOptions() {
} }
// View mode // View mode
viewMode.addEventListener("click", changeViewMode); viewMode.addEventListener('click', changeViewMode);
function changeViewMode(event) { function changeViewMode(event) {
const button = event.target; const button = event.target;
if (button.tagName !== "BUTTON") return; if (button.tagName !== 'BUTTON') return;
const pressed = button.classList.contains("pressed"); const pressed = button.classList.contains('pressed');
enterStandardView(); enterStandardView();
if (!pressed && button.id !== "viewStandard") { if (!pressed && button.id !== 'viewStandard') {
viewStandard.classList.remove("pressed"); viewStandard.classList.remove('pressed');
button.classList.add("pressed"); button.classList.add('pressed');
enter3dView(button.id); enter3dView(button.id);
} }
} }
function enterStandardView() { function enterStandardView() {
viewMode.querySelectorAll(".pressed").forEach(button => button.classList.remove("pressed")); viewMode.querySelectorAll('.pressed').forEach((button) => button.classList.remove('pressed'));
heightmap3DView.classList.remove("pressed"); heightmap3DView.classList.remove('pressed');
viewStandard.classList.add("pressed"); viewStandard.classList.add('pressed');
if (!document.getElementById("canvas3d")) return; if (!document.getElementById('canvas3d')) return;
ThreeD.stop(); ThreeD.stop();
document.getElementById("canvas3d").remove(); document.getElementById('canvas3d').remove();
if (options3dUpdate.offsetParent) $("#options3d").dialog("close"); if (options3dUpdate.offsetParent) $('#options3d').dialog('close');
if (preview3d.offsetParent) $("#preview3d").dialog("close"); if (preview3d.offsetParent) $('#preview3d').dialog('close');
} }
async function enter3dView(type) { async function enter3dView(type) {
const canvas = document.createElement("canvas"); const canvas = document.createElement('canvas');
canvas.id = "canvas3d"; canvas.id = 'canvas3d';
canvas.dataset.type = type; canvas.dataset.type = type;
if (type === "heightmap3DView") { if (type === 'heightmap3DView') {
canvas.width = parseFloat(preview3d.style.width) || graphWidth / 3; canvas.width = parseFloat(preview3d.style.width) || graphWidth / 3;
canvas.height = canvas.width / (graphWidth / graphHeight); canvas.height = canvas.width / (graphWidth / graphHeight);
canvas.style.display = "block"; canvas.style.display = 'block';
} else { } else {
canvas.width = svgWidth; canvas.width = svgWidth;
canvas.height = svgHeight; canvas.height = svgHeight;
canvas.style.position = "absolute"; canvas.style.position = 'absolute';
canvas.style.display = "none"; canvas.style.display = 'none';
} }
const started = await ThreeD.create(canvas, type); const started = await ThreeD.create(canvas, type);
if (!started) return; if (!started) return;
canvas.style.display = "block"; canvas.style.display = 'block';
canvas.onmouseenter = () => { canvas.onmouseenter = () => {
const help = const help =
"Left mouse to change angle, middle mouse / mousewheel to zoom, right mouse to pan. <b>O</b> to toggle options"; "Left mouse to change angle, middle mouse / mousewheel to zoom, right mouse to pan. <b>O</b> to toggle options";
@ -972,7 +972,7 @@ async function enter3dView(type) {
} }
function resize3d() { function resize3d() {
const canvas = document.getElementById("canvas3d"); const canvas = document.getElementById('canvas3d');
canvas.width = parseFloat(preview3d.style.width); canvas.width = parseFloat(preview3d.style.width);
canvas.height = parseFloat(preview3d.style.height) - 2; canvas.height = parseFloat(preview3d.style.height) - 2;
ThreeD.redraw(); ThreeD.redraw();
@ -995,9 +995,9 @@ function toggle3dOptions() {
if (modules.options3d) return; if (modules.options3d) return;
modules.options3d = true; modules.options3d = true;
document.getElementById("options3dUpdate").addEventListener("click", ThreeD.update); document.getElementById('options3dUpdate').addEventListener('click', ThreeD.update);
document.getElementById("options3dSave").addEventListener("click", ThreeD.saveScreenshot); document.getElementById('options3dSave').addEventListener('click', ThreeD.saveScreenshot);
document.getElementById("options3dOBJSave").addEventListener("click", ThreeD.saveOBJ); document.getElementById('options3dOBJSave').addEventListener('click', ThreeD.saveOBJ);
document.getElementById("options3dScaleRange").addEventListener("input", changeHeightScale); document.getElementById("options3dScaleRange").addEventListener("input", changeHeightScale);
document.getElementById("options3dScaleNumber").addEventListener("change", changeHeightScale); document.getElementById("options3dScaleNumber").addEventListener("change", changeHeightScale);
@ -1030,7 +1030,7 @@ function toggle3dOptions() {
options3dGlobeRotationRange.value = options3dGlobeRotationNumber.value = ThreeD.options.rotateGlobe; options3dGlobeRotationRange.value = options3dGlobeRotationNumber.value = ThreeD.options.rotateGlobe;
options3dMeshLabels3d.value = ThreeD.options.labels3d; options3dMeshLabels3d.value = ThreeD.options.labels3d;
options3dMeshSkyMode.value = ThreeD.options.extendedWater; options3dMeshSkyMode.value = ThreeD.options.extendedWater;
options3dColorSection.style.display = ThreeD.options.extendedWater ? "block" : "none"; options3dColorSection.style.display = ThreeD.options.extendedWater ? 'block' : 'none';
options3dMeshSky.value = ThreeD.options.skyColor; options3dMeshSky.value = ThreeD.options.skyColor;
options3dMeshWater.value = ThreeD.options.waterColor; options3dMeshWater.value = ThreeD.options.waterColor;
options3dGlobeResolution.value = ThreeD.options.resolution; options3dGlobeResolution.value = ThreeD.options.resolution;
@ -1065,7 +1065,7 @@ function toggle3dOptions() {
function toggleSkyMode() { function toggleSkyMode() {
const hide = ThreeD.options.extendedWater; const hide = ThreeD.options.extendedWater;
options3dColorSection.style.display = hide ? "none" : "block"; options3dColorSection.style.display = hide ? 'none' : 'block';
ThreeD.toggleSky(); ThreeD.toggleSky();
} }

157
modules/ui/provinces-editor.js
View file

@ -1,14 +1,14 @@
"use strict"; 'use strict';
function editProvinces() { function editProvinces() {
if (customization) return; if (customization) return;
closeDialogs("#provincesEditor, .stable"); closeDialogs('#provincesEditor, .stable');
if (!layerIsOn("toggleProvinces")) toggleProvinces(); if (!layerIsOn('toggleProvinces')) toggleProvinces();
if (!layerIsOn("toggleBorders")) toggleBorders(); if (!layerIsOn('toggleBorders')) toggleBorders();
if (layerIsOn("toggleStates")) toggleStates(); if (layerIsOn('toggleStates')) toggleStates();
if (layerIsOn("toggleCultures")) toggleCultures(); if (layerIsOn('toggleCultures')) toggleCultures();
provs.selectAll("text").call(d3.drag().on("drag", dragLabel)).classed("draggable", true); provs.selectAll('text').call(d3.drag().on('drag', dragLabel)).classed('draggable', true);
const body = document.getElementById("provincesBodySection"); const body = document.getElementById('provincesBodySection');
refreshProvincesEditor(); refreshProvincesEditor();
if (modules.editProvinces) return; if (modules.editProvinces) return;
@ -91,14 +91,14 @@ function editProvinces() {
provinces[p].burgs.push(cells.burg[i]); provinces[p].burgs.push(cells.burg[i]);
} }
provinces.forEach(p => { provinces.forEach((p) => {
if (!p.i || p.removed) return; if (!p.i || p.removed) return;
if (!p.burg && p.burgs.length) p.burg = p.burgs[0]; if (!p.burg && p.burgs.length) p.burg = p.burgs[0];
}); });
} }
function updateFilter() { function updateFilter() {
const stateFilter = document.getElementById("provincesFilterState"); const stateFilter = document.getElementById('provincesFilterState');
const selectedState = stateFilter.value || 1; const selectedState = stateFilter.value || 1;
stateFilter.options.length = 0; // remove all options stateFilter.options.length = 0; // remove all options
stateFilter.options.add(new Option(`all`, -1, false, selectedState == -1)); stateFilter.options.add(new Option(`all`, -1, false, selectedState == -1));
@ -175,10 +175,10 @@ function editProvinces() {
provincesFooterArea.dataset.area = totalArea; provincesFooterArea.dataset.area = totalArea;
provincesFooterPopulation.dataset.population = totalPopulation; provincesFooterPopulation.dataset.population = totalPopulation;
body.querySelectorAll("div.states").forEach(el => { body.querySelectorAll('div.states').forEach((el) => {
el.addEventListener("click", selectProvinceOnLineClick); el.addEventListener('click', selectProvinceOnLineClick);
el.addEventListener("mouseenter", ev => provinceHighlightOn(ev)); el.addEventListener('mouseenter', (ev) => provinceHighlightOn(ev));
el.addEventListener("mouseleave", ev => provinceHighlightOff(ev)); el.addEventListener('mouseleave', (ev) => provinceHighlightOff(ev));
}); });
if (body.dataset.type === "percentage") { if (body.dataset.type === "percentage") {
@ -186,7 +186,7 @@ function editProvinces() {
togglePercentageMode(); togglePercentageMode();
} }
applySorting(provincesHeader); applySorting(provincesHeader);
$("#provincesEditor").dialog({width: fitContent()}); $('#provincesEditor').dialog({width: fitContent()});
} }
function getCapitalOptions(burgs, capital) { function getCapitalOptions(burgs, capital) {
@ -198,9 +198,9 @@ function editProvinces() {
function provinceHighlightOn(event) { function provinceHighlightOn(event) {
const province = +event.target.dataset.id; const province = +event.target.dataset.id;
const el = body.querySelector(`div[data-id='${province}']`); const el = body.querySelector(`div[data-id='${province}']`);
if (el) el.classList.add("active"); if (el) el.classList.add('active');
if (!layerIsOn("toggleProvinces")) return; if (!layerIsOn('toggleProvinces')) return;
if (customization) return; if (customization) return;
const animate = d3.transition().duration(2000).ease(d3.easeSinIn); const animate = d3.transition().duration(2000).ease(d3.easeSinIn);
provs provs
@ -214,7 +214,7 @@ function editProvinces() {
function provinceHighlightOff(event) { function provinceHighlightOff(event) {
const province = +event.target.dataset.id; const province = +event.target.dataset.id;
const el = body.querySelector(`div[data-id='${province}']`); const el = body.querySelector(`div[data-id='${province}']`);
if (el) el.classList.remove("active"); if (el) el.classList.remove('active');
if (!layerIsOn("toggleProvinces")) return; if (!layerIsOn("toggleProvinces")) return;
provs provs
@ -370,7 +370,7 @@ function editProvinces() {
const rural = rn(p.rural * populationRate); const rural = rn(p.rural * populationRate);
const urban = rn(p.urban * populationRate * urbanization); const urban = rn(p.urban * populationRate * urbanization);
const total = rural + urban; const total = rural + urban;
const l = n => Number(n).toLocaleString(); const l = (n) => Number(n).toLocaleString();
alertMessage.innerHTML = /* html */ ` Rural: <input type="number" min="0" step="1" id="ruralPop" value=${rural} style="width:6em" /> Urban: alertMessage.innerHTML = /* html */ ` Rural: <input type="number" min="0" step="1" id="ruralPop" value=${rural} style="width:6em" /> Urban:
<input type="number" min="0" step="1" id="urbanPop" value=${urban} style="width:6em" ${p.burgs.length ? "" : "disabled"} /> <input type="number" min="0" step="1" id="urbanPop" value=${urban} style="width:6em" ${p.burgs.length ? "" : "disabled"} />
@ -450,7 +450,7 @@ function editProvinces() {
unfog("focusProvince" + p); unfog("focusProvince" + p);
const coaId = "provinceCOA" + p; const coaId = 'provinceCOA' + p;
if (document.getElementById(coaId)) document.getElementById(coaId).remove(); if (document.getElementById(coaId)) document.getElementById(coaId).remove();
emblems.select(`#provinceEmblems > use[data-i='${p}']`).remove(); emblems.select(`#provinceEmblems > use[data-i='${p}']`).remove();
@ -497,41 +497,41 @@ function editProvinces() {
modules.editProvinceName = true; modules.editProvinceName = true;
// add listeners // add listeners
document.getElementById("provinceNameEditorShortCulture").addEventListener("click", regenerateShortNameCuture); document.getElementById('provinceNameEditorShortCulture').addEventListener('click', regenerateShortNameCuture);
document.getElementById("provinceNameEditorShortRandom").addEventListener("click", regenerateShortNameRandom); document.getElementById('provinceNameEditorShortRandom').addEventListener('click', regenerateShortNameRandom);
document.getElementById("provinceNameEditorAddForm").addEventListener("click", addCustomForm); document.getElementById('provinceNameEditorAddForm').addEventListener('click', addCustomForm);
document.getElementById("provinceNameEditorFullRegenerate").addEventListener("click", regenerateFullName); document.getElementById('provinceNameEditorFullRegenerate').addEventListener('click', regenerateFullName);
function regenerateShortNameCuture() { function regenerateShortNameCuture() {
const province = +provinceNameEditor.dataset.province; const province = +provinceNameEditor.dataset.province;
const culture = pack.cells.culture[pack.provinces[province].center]; const culture = pack.cells.culture[pack.provinces[province].center];
const name = Names.getState(Names.getCultureShort(culture), culture); const name = Names.getState(Names.getCultureShort(culture), culture);
document.getElementById("provinceNameEditorShort").value = name; document.getElementById('provinceNameEditorShort').value = name;
} }
function regenerateShortNameRandom() { function regenerateShortNameRandom() {
const base = rand(nameBases.length - 1); const base = rand(nameBases.length - 1);
const name = Names.getState(Names.getBase(base), undefined, base); const name = Names.getState(Names.getBase(base), undefined, base);
document.getElementById("provinceNameEditorShort").value = name; document.getElementById('provinceNameEditorShort').value = name;
} }
function addCustomForm() { function addCustomForm() {
const value = provinceNameEditorCustomForm.value; const value = provinceNameEditorCustomForm.value;
const displayed = provinceNameEditorCustomForm.style.display === "inline-block"; const displayed = provinceNameEditorCustomForm.style.display === 'inline-block';
provinceNameEditorCustomForm.style.display = displayed ? "none" : "inline-block"; provinceNameEditorCustomForm.style.display = displayed ? 'none' : 'inline-block';
provinceNameEditorSelectForm.style.display = displayed ? "inline-block" : "none"; provinceNameEditorSelectForm.style.display = displayed ? 'inline-block' : 'none';
if (displayed) applyOption(provinceNameEditorSelectForm, value); if (displayed) applyOption(provinceNameEditorSelectForm, value);
} }
function regenerateFullName() { function regenerateFullName() {
const short = document.getElementById("provinceNameEditorShort").value; const short = document.getElementById('provinceNameEditorShort').value;
const form = document.getElementById("provinceNameEditorSelectForm").value; const form = document.getElementById('provinceNameEditorSelectForm').value;
document.getElementById("provinceNameEditorFull").value = getFullName(); document.getElementById('provinceNameEditorFull').value = getFullName();
function getFullName() { function getFullName() {
if (!form) return short; if (!form) return short;
if (!short && form) return "The " + form; if (!short && form) return 'The ' + form;
return short + " " + form; return short + ' ' + form;
} }
} }
@ -551,8 +551,8 @@ function editProvinces() {
} }
function togglePercentageMode() { function togglePercentageMode() {
if (body.dataset.type === "absolute") { if (body.dataset.type === 'absolute') {
body.dataset.type = "percentage"; body.dataset.type = 'percentage';
const totalArea = +provincesFooterArea.dataset.area; const totalArea = +provincesFooterArea.dataset.area;
const totalPopulation = +provincesFooterPopulation.dataset.population; const totalPopulation = +provincesFooterPopulation.dataset.population;
@ -561,7 +561,7 @@ function editProvinces() {
el.querySelector(".culturePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%"; el.querySelector(".culturePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%";
}); });
} else { } else {
body.dataset.type = "absolute"; body.dataset.type = 'absolute';
provincesEditorAddLines(); provincesEditorAddLines();
} }
} }
@ -628,7 +628,7 @@ function editProvinces() {
.on("mouseleave", d => hideInfo(event, d)); .on("mouseleave", d => hideInfo(event, d));
function showInfo(ev, d) { function showInfo(ev, d) {
d3.select(ev.target).select("rect").classed("selected", 1); d3.select(ev.target).select('rect').classed('selected', 1);
const name = d.data.fullName; const name = d.data.fullName;
const state = pack.states[d.data.state].fullName; const state = pack.states[d.data.state].fullName;
@ -651,9 +651,9 @@ function editProvinces() {
function hideInfo(ev) { function hideInfo(ev) {
provinceHighlightOff(ev); provinceHighlightOff(ev);
if (!document.getElementById("provinceInfo")) return; if (!document.getElementById('provinceInfo')) return;
provinceInfo.innerHTML = "&#8205;"; provinceInfo.innerHTML = '&#8205;';
d3.select(ev.target).select("rect").classed("selected", 0); d3.select(ev.target).select('rect').classed('selected', 0);
} }
node node
@ -677,7 +677,7 @@ function editProvinces() {
node.select("text").each(function (d) { node.select("text").each(function (d) {
this.innerHTML = d.data.name; this.innerHTML = d.data.name;
let b = this.getBBox(); let b = this.getBBox();
if (b.y + b.height > d.y1 + 1) this.innerHTML = ""; if (b.y + b.height > d.y1 + 1) this.innerHTML = '';
for (let i = 0; i < 15 && b.width > 0 && b.x + b.width > d.x1; i++) { for (let i = 0; i < 15 && b.width > 0 && b.x + b.width > d.x1; i++) {
if (this.innerHTML.length < 3) { if (this.innerHTML.length < 3) {
@ -730,10 +730,10 @@ function editProvinces() {
} }
function toggleLabels() { function toggleLabels() {
const hidden = provs.select("#provinceLabels").style("display") === "none"; const hidden = provs.select('#provinceLabels').style('display') === 'none';
provs.select("#provinceLabels").style("display", `${hidden ? "block" : "none"}`); provs.select('#provinceLabels').style('display', `${hidden ? 'block' : 'none'}`);
provs.attr("data-labels", +hidden); provs.attr('data-labels', +hidden);
provs.selectAll("text").call(d3.drag().on("drag", dragLabel)).classed("draggable", true); provs.selectAll('text').call(d3.drag().on('drag', dragLabel)).classed('draggable', true);
} }
function triggerProvincesRelease() { function triggerProvincesRelease() {
@ -765,8 +765,8 @@ function editProvinces() {
} }
function enterProvincesManualAssignent() { function enterProvincesManualAssignent() {
if (!layerIsOn("toggleProvinces")) toggleProvinces(); if (!layerIsOn('toggleProvinces')) toggleProvinces();
if (!layerIsOn("toggleBorders")) toggleBorders(); if (!layerIsOn('toggleBorders')) toggleBorders();
// make province and state borders more visible // make province and state borders more visible
provinceBorders.select("path").attr("stroke", "#000").attr("stroke-width", 0.5); provinceBorders.select("path").attr("stroke", "#000").attr("stroke-width", 0.5);
@ -788,15 +788,15 @@ function editProvinces() {
tip("Click on a province to select, drag the circle to change province", true); tip("Click on a province to select, drag the circle to change province", true);
viewbox.style("cursor", "crosshair").on("click", selectProvinceOnMapClick).call(d3.drag().on("start", dragBrush)).on("touchmove mousemove", moveBrush); viewbox.style("cursor", "crosshair").on("click", selectProvinceOnMapClick).call(d3.drag().on("start", dragBrush)).on("touchmove mousemove", moveBrush);
body.querySelector("div").classList.add("selected"); body.querySelector('div').classList.add('selected');
selectProvince(+body.querySelector("div").dataset.id); selectProvince(+body.querySelector('div').dataset.id);
} }
function selectProvinceOnLineClick() { function selectProvinceOnLineClick() {
if (customization !== 11) return; if (customization !== 11) return;
if (this.parentNode.id !== "provincesBodySection") return; if (this.parentNode.id !== 'provincesBodySection') return;
body.querySelector("div.selected").classList.remove("selected"); body.querySelector('div.selected').classList.remove('selected');
this.classList.add("selected"); this.classList.add('selected');
selectProvince(+this.dataset.id); selectProvince(+this.dataset.id);
} }
@ -814,8 +814,8 @@ function editProvinces() {
return; return;
} }
body.querySelector("div.selected").classList.remove("selected"); body.querySelector('div.selected').classList.remove('selected');
editorLine.classList.add("selected"); editorLine.classList.add('selected');
selectProvince(province); selectProvince(province);
} }
@ -828,7 +828,7 @@ function editProvinces() {
function dragBrush() { function dragBrush() {
const r = +provincesManuallyBrush.value; const r = +provincesManuallyBrush.value;
d3.event.on("drag", () => { d3.event.on('drag', () => {
if (!d3.event.dx && !d3.event.dy) return; if (!d3.event.dx && !d3.event.dy) return;
const p = d3.mouse(this); const p = d3.mouse(this);
moveCircle(p[0], p[1], r); moveCircle(p[0], p[1], r);
@ -847,9 +847,9 @@ function editProvinces() {
const provinceNew = +selected.dataset.id; const provinceNew = +selected.dataset.id;
const state = pack.provinces[provinceNew].state; const state = pack.provinces[provinceNew].state;
const fill = pack.provinces[provinceNew].color || "#ffffff"; const fill = pack.provinces[provinceNew].color || '#ffffff';
selection.forEach(i => { selection.forEach((i) => {
if (!pack.cells.state[i] || pack.cells.state[i] !== state) return; if (!pack.cells.state[i] || pack.cells.state[i] !== state) return;
const exists = temp.select("polygon[data-cell='" + i + "']"); const exists = temp.select("polygon[data-cell='" + i + "']");
const provinceOld = exists.size() ? +exists.attr("data-province") : pack.cells.province[i]; const provinceOld = exists.size() ? +exists.attr("data-province") : pack.cells.province[i];
@ -864,7 +864,7 @@ function editProvinces() {
// change of append new element // change of append new element
if (exists.size()) { if (exists.size()) {
if (pack.cells.province[i] === provinceNew) exists.remove(); if (pack.cells.province[i] === provinceNew) exists.remove();
else exists.attr("data-province", provinceNew).attr("fill", fill); else exists.attr('data-province', provinceNew).attr('fill', fill);
} else { } else {
temp temp
.append("polygon") .append("polygon")
@ -903,14 +903,14 @@ function editProvinces() {
function exitProvincesManualAssignment(close) { function exitProvincesManualAssignment(close) {
customization = 0; customization = 0;
provs.select("#temp").remove(); provs.select('#temp').remove();
provs.select("#centers").remove(); provs.select('#centers').remove();
removeCircle(); removeCircle();
// restore borders style // restore borders style
provinceBorders.select("path").attr("stroke", null).attr("stroke-width", null); provinceBorders.select('path').attr('stroke', null).attr('stroke-width', null);
stateBorders.select("path").attr("stroke", null).attr("stroke-width", null); stateBorders.select('path').attr('stroke', null).attr('stroke-width', null);
debug.selectAll("path.selected").remove(); debug.selectAll('path.selected').remove();
document.querySelectorAll("#provincesBottom > *").forEach(el => (el.style.display = "inline-block")); document.querySelectorAll("#provincesBottom > *").forEach(el => (el.style.display = "inline-block"));
document.getElementById("provincesManuallyButtons").style.display = "none"; document.getElementById("provincesManuallyButtons").style.display = "none";
@ -923,8 +923,8 @@ function editProvinces() {
restoreDefaultEvents(); restoreDefaultEvents();
clearMainTip(); clearMainTip();
const selected = body.querySelector("div.selected"); const selected = body.querySelector('div.selected');
if (selected) selected.classList.remove("selected"); if (selected) selected.classList.remove('selected');
} }
function enterAddProvinceMode() { function enterAddProvinceMode() {
@ -969,14 +969,14 @@ function editProvinces() {
const type = BurgsAndStates.getType(center, parent.port); const type = BurgsAndStates.getType(center, parent.port);
const coa = COA.generate(parent, kinship, P(0.1), type); const coa = COA.generate(parent, kinship, P(0.1), type);
coa.shield = COA.getShield(c, state); coa.shield = COA.getShield(c, state);
COArenderer.add("province", province, coa, point[0], point[1]); COArenderer.add('province', province, coa, point[0], point[1]);
provinces.push({i: province, state, center, burg, name, formName, fullName, color, coa}); provinces.push({i: province, state, center, burg, name, formName, fullName, color, coa});
cells.province[center] = province; cells.province[center] = province;
cells.c[center].forEach(c => { cells.c[center].forEach((c) => {
if (cells.h[c] < 20 || cells.state[c] !== state) return; if (cells.h[c] < 20 || cells.state[c] !== state) return;
if (provinces.find(p => !p.removed && p.center === c)) return; if (provinces.find((p) => !p.removed && p.center === c)) return;
cells.province[c] = province; cells.province[c] = province;
}); });
@ -985,7 +985,7 @@ function editProvinces() {
if (!layerIsOn("toggleProvinces")) toggleProvinces(); if (!layerIsOn("toggleProvinces")) toggleProvinces();
else drawProvinces(); else drawProvinces();
collectStatistics(); collectStatistics();
document.getElementById("provincesFilterState").value = state; document.getElementById('provincesFilterState').value = state;
provincesEditorAddLines(); provincesEditorAddLines();
} }
@ -998,9 +998,9 @@ function editProvinces() {
} }
function recolorProvinces() { function recolorProvinces() {
const state = +document.getElementById("provincesFilterState").value; const state = +document.getElementById('provincesFilterState').value;
pack.provinces.forEach(p => { pack.provinces.forEach((p) => {
if (!p || p.removed) return; if (!p || p.removed) return;
if (state !== -1 && p.state !== state) return; if (state !== -1 && p.state !== state) return;
const stateColor = pack.states[p.state].color; const stateColor = pack.states[p.state].color;
@ -1032,7 +1032,7 @@ function editProvinces() {
data += `${Math.round(provincePack.urban * populationRate * urbanization)}\n`; data += `${Math.round(provincePack.urban * populationRate * urbanization)}\n`;
}); });
const name = getFileName("Provinces") + ".csv"; const name = getFileName('Provinces') + '.csv';
downloadFile(data, name); downloadFile(data, name);
} }
@ -1045,9 +1045,10 @@ function editProvinces() {
Remove: function () { Remove: function () {
$(this).dialog("close"); $(this).dialog("close");
// remove emblems // remove data
document.querySelectorAll("[id^='provinceCOA']").forEach(el => el.remove()); pack.provinces = [0];
emblems.select("#provinceEmblems").selectAll("*").remove(); pack.cells.province = new Uint16Array(pack.cells.i.length);
pack.states.forEach((s) => (s.provinces = []));
// remove data // remove data
pack.provinces = [0]; pack.provinces = [0];
@ -1081,8 +1082,8 @@ function editProvinces() {
} }
function closeProvincesEditor() { function closeProvincesEditor() {
provs.selectAll("text").call(d3.drag().on("drag", null)).attr("class", null); provs.selectAll('text').call(d3.drag().on('drag', null)).attr('class', null);
if (customization === 11) exitProvincesManualAssignment("close"); if (customization === 11) exitProvincesManualAssignment('close');
if (customization === 12) exitAddProvinceMode(); if (customization === 12) exitAddProvinceMode();
} }
} }

128
modules/ui/regiment-editor.js
View file

@ -1,11 +1,11 @@
"use strict"; 'use strict';
function editRegiment(selector) { function editRegiment(selector) {
if (customization) return; if (customization) return;
closeDialogs(".stable"); closeDialogs('.stable');
if (!layerIsOn("toggleMilitary")) toggleMilitary(); if (!layerIsOn('toggleMilitary')) toggleMilitary();
armies.selectAll(":scope > g").classed("draggable", true); armies.selectAll(':scope > g').classed('draggable', true);
armies.selectAll(":scope > g > g").call(d3.drag().on("drag", dragRegiment)); armies.selectAll(':scope > g > g').call(d3.drag().on('drag', dragRegiment));
elSelected = selector ? document.querySelector(selector) : d3.event.target.parentElement; // select g element elSelected = selector ? document.querySelector(selector) : d3.event.target.parentElement; // select g element
if (!pack.states[elSelected.dataset.state]) return; if (!pack.states[elSelected.dataset.state]) return;
if (!regiment()) return; if (!regiment()) return;
@ -23,22 +23,22 @@ function editRegiment(selector) {
modules.editRegiment = true; modules.editRegiment = true;
// add listeners // add listeners
document.getElementById("regimentNameRestore").addEventListener("click", restoreName); document.getElementById('regimentNameRestore').addEventListener('click', restoreName);
document.getElementById("regimentType").addEventListener("click", changeType); document.getElementById('regimentType').addEventListener('click', changeType);
document.getElementById("regimentName").addEventListener("change", changeName); document.getElementById('regimentName').addEventListener('change', changeName);
document.getElementById("regimentEmblem").addEventListener("input", changeEmblem); document.getElementById('regimentEmblem').addEventListener('input', changeEmblem);
document.getElementById("regimentEmblemSelect").addEventListener("click", selectEmblem); document.getElementById('regimentEmblemSelect').addEventListener('click', selectEmblem);
document.getElementById("regimentAttack").addEventListener("click", toggleAttack); document.getElementById('regimentAttack').addEventListener('click', toggleAttack);
document.getElementById("regimentRegenerateLegend").addEventListener("click", regenerateLegend); document.getElementById('regimentRegenerateLegend').addEventListener('click', regenerateLegend);
document.getElementById("regimentLegend").addEventListener("click", editLegend); document.getElementById('regimentLegend').addEventListener('click', editLegend);
document.getElementById("regimentSplit").addEventListener("click", splitRegiment); document.getElementById('regimentSplit').addEventListener('click', splitRegiment);
document.getElementById("regimentAdd").addEventListener("click", toggleAdd); document.getElementById('regimentAdd').addEventListener('click', toggleAdd);
document.getElementById("regimentAttach").addEventListener("click", toggleAttach); document.getElementById('regimentAttach').addEventListener('click', toggleAttach);
document.getElementById("regimentRemove").addEventListener("click", removeRegiment); document.getElementById('regimentRemove').addEventListener('click', removeRegiment);
// get regiment data element // get regiment data element
function regiment() { function regiment() {
return pack.states[elSelected.dataset.state].military.find(r => r.i == elSelected.dataset.id); return pack.states[elSelected.dataset.state].military.find((r) => r.i == elSelected.dataset.id);
} }
function updateRegimentData(regiment) { function updateRegimentData(regiment) {
@ -56,7 +56,7 @@ function editRegiment(selector) {
}) })
.join(""); .join("");
composition.querySelectorAll("input").forEach(el => el.addEventListener("change", changeUnit)); composition.querySelectorAll('input').forEach((el) => el.addEventListener('change', changeUnit));
} }
function drawBase() { function drawBase() {
@ -117,7 +117,7 @@ function editRegiment(selector) {
const reg = regiment(), const reg = regiment(),
regs = pack.states[elSelected.dataset.state].military; regs = pack.states[elSelected.dataset.state].military;
const name = Military.getName(reg, regs); const name = Military.getName(reg, regs);
elSelected.dataset.name = reg.name = document.getElementById("regimentName").value = name; elSelected.dataset.name = reg.name = document.getElementById('regimentName').value = name;
} }
function selectEmblem() { function selectEmblem() {
@ -128,8 +128,8 @@ function editRegiment(selector) {
} }
function changeEmblem() { function changeEmblem() {
const emblem = document.getElementById("regimentEmblem").value; const emblem = document.getElementById('regimentEmblem').value;
regiment().icon = elSelected.querySelector(".regimentIcon").innerHTML = emblem; regiment().icon = elSelected.querySelector('.regimentIcon').innerHTML = emblem;
} }
function changeUnit() { function changeUnit() {
@ -137,7 +137,7 @@ function editRegiment(selector) {
const reg = regiment(); const reg = regiment();
reg.u[u] = +this.value || 0; reg.u[u] = +this.value || 0;
reg.a = d3.sum(Object.values(reg.u)); reg.a = d3.sum(Object.values(reg.u));
elSelected.querySelector("text").innerHTML = Military.getTotal(reg); elSelected.querySelector('text').innerHTML = Military.getTotal(reg);
if (militaryOverviewRefresh.offsetParent) militaryOverviewRefresh.click(); if (militaryOverviewRefresh.offsetParent) militaryOverviewRefresh.click();
if (regimentsOverviewRefresh.offsetParent) regimentsOverviewRefresh.click(); if (regimentsOverviewRefresh.offsetParent) regimentsOverviewRefresh.click();
} }
@ -193,13 +193,13 @@ function editRegiment(selector) {
} }
function toggleAdd() { function toggleAdd() {
document.getElementById("regimentAdd").classList.toggle("pressed"); document.getElementById('regimentAdd').classList.toggle('pressed');
if (document.getElementById("regimentAdd").classList.contains("pressed")) { if (document.getElementById('regimentAdd').classList.contains('pressed')) {
viewbox.style("cursor", "crosshair").on("click", addRegimentOnClick); viewbox.style('cursor', 'crosshair').on('click', addRegimentOnClick);
tip("Click on map to create new regiment or fleet", true); tip('Click on map to create new regiment or fleet', true);
} else { } else {
clearMainTip(); clearMainTip();
viewbox.on("click", clicked).style("cursor", "default"); viewbox.on('click', clicked).style('cursor', 'default');
} }
} }
@ -222,15 +222,15 @@ function editRegiment(selector) {
} }
function toggleAttack() { function toggleAttack() {
document.getElementById("regimentAttack").classList.toggle("pressed"); document.getElementById('regimentAttack').classList.toggle('pressed');
if (document.getElementById("regimentAttack").classList.contains("pressed")) { if (document.getElementById('regimentAttack').classList.contains('pressed')) {
viewbox.style("cursor", "crosshair").on("click", attackRegimentOnClick); viewbox.style('cursor', 'crosshair').on('click', attackRegimentOnClick);
tip("Click on another regiment to initiate battle", true); tip('Click on another regiment to initiate battle', true);
armies.selectAll(":scope > g").classed("draggable", false); armies.selectAll(':scope > g').classed('draggable', false);
} else { } else {
clearMainTip(); clearMainTip();
armies.selectAll(":scope > g").classed("draggable", true); armies.selectAll(':scope > g').classed('draggable', true);
viewbox.on("click", clicked).style("cursor", "default"); viewbox.on('click', clicked).style('cursor', 'default');
} }
} }
@ -290,19 +290,19 @@ function editRegiment(selector) {
.remove(); .remove();
clearMainTip(); clearMainTip();
$("#regimentEditor").dialog("close"); $('#regimentEditor').dialog('close');
} }
function toggleAttach() { function toggleAttach() {
document.getElementById("regimentAttach").classList.toggle("pressed"); document.getElementById('regimentAttach').classList.toggle('pressed');
if (document.getElementById("regimentAttach").classList.contains("pressed")) { if (document.getElementById('regimentAttach').classList.contains('pressed')) {
viewbox.style("cursor", "crosshair").on("click", attachRegimentOnClick); viewbox.style('cursor', 'crosshair').on('click', attachRegimentOnClick);
tip("Click on another regiment to unite both regiments. The current regiment will be removed", true); tip('Click on another regiment to unite both regiments. The current regiment will be removed', true);
armies.selectAll(":scope > g").classed("draggable", false); armies.selectAll(':scope > g').classed('draggable', false);
} else { } else {
clearMainTip(); clearMainTip();
armies.selectAll(":scope > g").classed("draggable", true); armies.selectAll(':scope > g').classed('draggable', true);
viewbox.on("click", clicked).style("cursor", "default"); viewbox.on('click', clicked).style('cursor', 'default');
} }
} }
@ -323,19 +323,19 @@ function editRegiment(selector) {
} }
const reg = regiment(); // reg to be attached const reg = regiment(); // reg to be attached
const sel = pack.states[newState].military.find(r => r.i == regSelected.dataset.id); // reg to attach to const sel = pack.states[newState].military.find((r) => r.i == regSelected.dataset.id); // reg to attach to
for (const unit of options.military) { for (const unit of options.military) {
const u = unit.name; const u = unit.name;
if (reg.u[u]) sel.u[u] ? (sel.u[u] += reg.u[u]) : (sel.u[u] = reg.u[u]); if (reg.u[u]) sel.u[u] ? (sel.u[u] += reg.u[u]) : (sel.u[u] = reg.u[u]);
} }
sel.a = d3.sum(Object.values(sel.u)); // reg total sel.a = d3.sum(Object.values(sel.u)); // reg total
regSelected.querySelector("text").innerHTML = Military.getTotal(sel); // update selected reg total text regSelected.querySelector('text').innerHTML = Military.getTotal(sel); // update selected reg total text
// remove attached regiment // remove attached regiment
const military = pack.states[oldState].military; const military = pack.states[oldState].military;
military.splice(military.indexOf(reg), 1); military.splice(military.indexOf(reg), 1);
const index = notes.findIndex(n => n.id === elSelected.id); const index = notes.findIndex((n) => n.id === elSelected.id);
if (index != -1) notes.splice(index, 1); if (index != -1) notes.splice(index, 1);
elSelected.remove(); elSelected.remove();
@ -345,7 +345,7 @@ function editRegiment(selector) {
} }
function regenerateLegend() { function regenerateLegend() {
const index = notes.findIndex(n => n.id === elSelected.id); const index = notes.findIndex((n) => n.id === elSelected.id);
if (index != -1) notes.splice(index, 1); if (index != -1) notes.splice(index, 1);
const s = pack.states[elSelected.dataset.state]; const s = pack.states[elSelected.dataset.state];
@ -369,7 +369,7 @@ function editRegiment(selector) {
if (regIndex === -1) return; if (regIndex === -1) return;
military.splice(regIndex, 1); military.splice(regIndex, 1);
const index = notes.findIndex(n => n.id === elSelected.id); const index = notes.findIndex((n) => n.id === elSelected.id);
if (index != -1) notes.splice(index, 1); if (index != -1) notes.splice(index, 1);
elSelected.remove(); elSelected.remove();
@ -388,20 +388,20 @@ function editRegiment(selector) {
d3.select(this).raise(); d3.select(this).raise();
d3.select(this.parentNode).raise(); d3.select(this.parentNode).raise();
const reg = pack.states[this.dataset.state].military.find(r => r.i == this.dataset.id); const reg = pack.states[this.dataset.state].military.find((r) => r.i == this.dataset.id);
const size = +armies.attr("box-size"); const size = +armies.attr('box-size');
const w = reg.n ? size * 4 : size * 6; const w = reg.n ? size * 4 : size * 6;
const h = size * 2; const h = size * 2;
const x1 = x => rn(x - w / 2, 2); const x1 = (x) => rn(x - w / 2, 2);
const y1 = y => rn(y - size, 2); const y1 = (y) => rn(y - size, 2);
const baseRect = this.querySelector("rect"); const baseRect = this.querySelector('rect');
const text = this.querySelector("text"); const text = this.querySelector('text');
const iconRect = this.querySelectorAll("rect")[1]; const iconRect = this.querySelectorAll('rect')[1];
const icon = this.querySelector(".regimentIcon"); const icon = this.querySelector('.regimentIcon');
const self = elSelected === this; const self = elSelected === this;
const baseLine = viewbox.select("g#regimentBase > line"); const baseLine = viewbox.select('g#regimentBase > line');
d3.event.on("drag", function () { d3.event.on("drag", function () {
const x = (reg.x = d3.event.x), const x = (reg.x = d3.event.x),
@ -420,7 +420,7 @@ function editRegiment(selector) {
} }
function dragBase() { function dragBase() {
const baseLine = viewbox.select("g#regimentBase > line"); const baseLine = viewbox.select('g#regimentBase > line');
const reg = regiment(); const reg = regiment();
d3.event.on("drag", function () { d3.event.on("drag", function () {
@ -436,12 +436,12 @@ function editRegiment(selector) {
} }
function closeEditor() { function closeEditor() {
armies.selectAll(":scope > g").classed("draggable", false); armies.selectAll(':scope > g').classed('draggable', false);
armies.selectAll("g>g").call(d3.drag().on("drag", null)); armies.selectAll('g>g').call(d3.drag().on('drag', null));
viewbox.selectAll("g#regimentBase").remove(); viewbox.selectAll('g#regimentBase').remove();
document.getElementById("regimentAdd").classList.remove("pressed"); document.getElementById('regimentAdd').classList.remove('pressed');
document.getElementById("regimentAttack").classList.remove("pressed"); document.getElementById('regimentAttack').classList.remove('pressed');
document.getElementById("regimentAttach").classList.remove("pressed"); document.getElementById('regimentAttach').classList.remove('pressed');
restoreDefaultEvents(); restoreDefaultEvents();
elSelected = null; elSelected = null;
} }

94
modules/ui/relief-editor.js
View file

@ -1,10 +1,10 @@
"use strict"; 'use strict';
function editReliefIcon() { function editReliefIcon() {
if (customization) return; if (customization) return;
closeDialogs(".stable"); closeDialogs('.stable');
if (!layerIsOn("toggleRelief")) toggleRelief(); if (!layerIsOn('toggleRelief')) toggleRelief();
terrain.selectAll("use").call(d3.drag().on("drag", dragReliefIcon)).classed("draggable", true); terrain.selectAll('use').call(d3.drag().on('drag', dragReliefIcon)).classed('draggable', true);
elSelected = d3.select(d3.event.target); elSelected = d3.select(d3.event.target);
restoreEditMode(); restoreEditMode();
@ -23,24 +23,24 @@ function editReliefIcon() {
modules.editReliefIcon = true; modules.editReliefIcon = true;
// add listeners // add listeners
document.getElementById("reliefIndividual").addEventListener("click", enterIndividualMode); document.getElementById('reliefIndividual').addEventListener('click', enterIndividualMode);
document.getElementById("reliefBulkAdd").addEventListener("click", enterBulkAddMode); document.getElementById('reliefBulkAdd').addEventListener('click', enterBulkAddMode);
document.getElementById("reliefBulkRemove").addEventListener("click", enterBulkRemoveMode); document.getElementById('reliefBulkRemove').addEventListener('click', enterBulkRemoveMode);
document.getElementById("reliefSize").addEventListener("input", changeIconSize); document.getElementById('reliefSize').addEventListener('input', changeIconSize);
document.getElementById("reliefSizeNumber").addEventListener("input", changeIconSize); document.getElementById('reliefSizeNumber').addEventListener('input', changeIconSize);
document.getElementById("reliefEditorSet").addEventListener("change", changeIconsSet); document.getElementById('reliefEditorSet').addEventListener('change', changeIconsSet);
reliefIconsDiv.querySelectorAll("svg").forEach(el => el.addEventListener("click", changeIcon)); reliefIconsDiv.querySelectorAll('svg').forEach((el) => el.addEventListener('click', changeIcon));
document.getElementById("reliefEditStyle").addEventListener("click", () => editStyle("terrain")); document.getElementById('reliefEditStyle').addEventListener('click', () => editStyle('terrain'));
document.getElementById("reliefCopy").addEventListener("click", copyIcon); document.getElementById('reliefCopy').addEventListener('click', copyIcon);
document.getElementById("reliefMoveFront").addEventListener("click", () => elSelected.raise()); document.getElementById('reliefMoveFront').addEventListener('click', () => elSelected.raise());
document.getElementById("reliefMoveBack").addEventListener("click", () => elSelected.lower()); document.getElementById('reliefMoveBack').addEventListener('click', () => elSelected.lower());
document.getElementById("reliefRemove").addEventListener("click", removeIcon); document.getElementById('reliefRemove').addEventListener('click', removeIcon);
function dragReliefIcon() { function dragReliefIcon() {
const dx = +this.getAttribute("x") - d3.event.x; const dx = +this.getAttribute('x') - d3.event.x;
const dy = +this.getAttribute("y") - d3.event.y; const dy = +this.getAttribute('y') - d3.event.y;
d3.event.on("drag", function () { d3.event.on("drag", function () {
const x = d3.event.x, const x = d3.event.x,
@ -68,18 +68,18 @@ function editReliefIcon() {
} }
function updateReliefSizeInput() { function updateReliefSizeInput() {
const size = +elSelected.attr("width"); const size = +elSelected.attr('width');
reliefSize.value = reliefSizeNumber.value = rn(size); reliefSize.value = reliefSizeNumber.value = rn(size);
} }
function enterIndividualMode() { function enterIndividualMode() {
reliefTools.querySelectorAll("button.pressed").forEach(b => b.classList.remove("pressed")); reliefTools.querySelectorAll('button.pressed').forEach((b) => b.classList.remove('pressed'));
reliefIndividual.classList.add("pressed"); reliefIndividual.classList.add('pressed');
reliefSizeDiv.style.display = "block"; reliefSizeDiv.style.display = 'block';
reliefRadiusDiv.style.display = "none"; reliefRadiusDiv.style.display = 'none';
reliefSpacingDiv.style.display = "none"; reliefSpacingDiv.style.display = 'none';
reliefIconsSeletionAny.style.display = "none"; reliefIconsSeletionAny.style.display = 'none';
removeCircle(); removeCircle();
updateReliefSizeInput(); updateReliefSizeInput();
@ -88,13 +88,13 @@ function editReliefIcon() {
} }
function enterBulkAddMode() { function enterBulkAddMode() {
reliefTools.querySelectorAll("button.pressed").forEach(b => b.classList.remove("pressed")); reliefTools.querySelectorAll('button.pressed').forEach((b) => b.classList.remove('pressed'));
reliefBulkAdd.classList.add("pressed"); reliefBulkAdd.classList.add('pressed');
reliefSizeDiv.style.display = "block"; reliefSizeDiv.style.display = 'block';
reliefRadiusDiv.style.display = "block"; reliefRadiusDiv.style.display = 'block';
reliefSpacingDiv.style.display = "block"; reliefSpacingDiv.style.display = 'block';
reliefIconsSeletionAny.style.display = "none"; reliefIconsSeletionAny.style.display = 'none';
const pressedType = reliefIconsDiv.querySelector("svg.pressed"); const pressedType = reliefIconsDiv.querySelector("svg.pressed");
if (pressedType.id === "reliefIconsSeletionAny") { if (pressedType.id === "reliefIconsSeletionAny") {
@ -103,8 +103,8 @@ function editReliefIcon() {
reliefIconsDiv.querySelector("svg").classList.add("pressed"); reliefIconsDiv.querySelector("svg").classList.add("pressed");
} }
viewbox.style("cursor", "crosshair").call(d3.drag().on("start", dragToAdd)).on("touchmove mousemove", moveBrush); viewbox.style('cursor', 'crosshair').call(d3.drag().on('start', dragToAdd)).on('touchmove mousemove', moveBrush);
tip("Drag to place relief icons within radius", true); tip('Drag to place relief icons within radius', true);
} }
function moveBrush() { function moveBrush() {
@ -172,13 +172,13 @@ function editReliefIcon() {
} }
function enterBulkRemoveMode() { function enterBulkRemoveMode() {
reliefTools.querySelectorAll("button.pressed").forEach(b => b.classList.remove("pressed")); reliefTools.querySelectorAll('button.pressed').forEach((b) => b.classList.remove('pressed'));
reliefBulkRemove.classList.add("pressed"); reliefBulkRemove.classList.add('pressed');
reliefSizeDiv.style.display = "none"; reliefSizeDiv.style.display = 'none';
reliefRadiusDiv.style.display = "block"; reliefRadiusDiv.style.display = 'block';
reliefSpacingDiv.style.display = "none"; reliefSpacingDiv.style.display = 'none';
reliefIconsSeletionAny.style.display = "inline-block"; reliefIconsSeletionAny.style.display = 'inline-block';
viewbox.style("cursor", "crosshair").call(d3.drag().on("start", dragToRemove)).on("touchmove mousemove", moveBrush); viewbox.style("cursor", "crosshair").call(d3.drag().on("start", dragToRemove)).on("touchmove mousemove", moveBrush);
tip("Drag to remove relief icons in radius", true); tip("Drag to remove relief icons in radius", true);
@ -201,13 +201,13 @@ function editReliefIcon() {
d3.event.on("drag", function () { d3.event.on("drag", function () {
const p = d3.mouse(this); const p = d3.mouse(this);
moveCircle(p[0], p[1], r); moveCircle(p[0], p[1], r);
tree.findAll(p[0], p[1], r).forEach(f => f[2].remove()); tree.findAll(p[0], p[1], r).forEach((f) => f[2].remove());
}); });
} }
function changeIconSize() { function changeIconSize() {
const size = +reliefSizeNumber.value; const size = +reliefSizeNumber.value;
if (!reliefIndividual.classList.contains("pressed")) return; if (!reliefIndividual.classList.contains('pressed')) return;
const shift = (size - +elSelected.attr("width")) / 2; const shift = (size - +elSelected.attr("width")) / 2;
elSelected.attr("width", size).attr("height", size); elSelected.attr("width", size).attr("height", size);
@ -223,14 +223,14 @@ function editReliefIcon() {
} }
function changeIcon() { function changeIcon() {
if (this.classList.contains("pressed")) return; if (this.classList.contains('pressed')) return;
reliefIconsDiv.querySelectorAll("svg.pressed").forEach(b => b.classList.remove("pressed")); reliefIconsDiv.querySelectorAll("svg.pressed").forEach(b => b.classList.remove("pressed"));
this.classList.add("pressed"); this.classList.add("pressed");
if (reliefIndividual.classList.contains("pressed")) { if (reliefIndividual.classList.contains('pressed')) {
const type = this.dataset.type; const type = this.dataset.type;
elSelected.attr("href", type); elSelected.attr('href', type);
} }
} }
@ -245,8 +245,8 @@ function editReliefIcon() {
y -= 3; y -= 3;
} }
copy.setAttribute("x", x); copy.setAttribute('x', x);
copy.setAttribute("y", y); copy.setAttribute('y', y);
parent.insertBefore(copy, null); parent.insertBefore(copy, null);
} }
@ -280,7 +280,7 @@ function editReliefIcon() {
} }
function closeReliefEditor() { function closeReliefEditor() {
terrain.selectAll("use").call(d3.drag().on("drag", null)).classed("draggable", false); terrain.selectAll('use').call(d3.drag().on('drag', null)).classed('draggable', false);
removeCircle(); removeCircle();
unselect(); unselect();
clearMainTip(); clearMainTip();

3
modules/ui/resources-editor.js
View file

@ -696,8 +696,7 @@ function editResources() {
function regenerateCurrentResources() { function regenerateCurrentResources() {
const message = 'Are you sure you want to regenerate resources? <br>This action cannot be reverted'; const message = 'Are you sure you want to regenerate resources? <br>This action cannot be reverted';
const onConfirm = () => regenerateResources(); confirmationDialog({title: 'Regenerate resources', message, confirm: 'Regenerate', onConfirm: regenerateResources});
confirmationDialog({title: 'Regenerate resources', message, confirm: 'Regenerate', onConfirm});
} }
function resourcesRestoreDefaults() { function resourcesRestoreDefaults() {

22
modules/ui/rivers-editor.js
View file

@ -1,4 +1,4 @@
"use strict"; 'use strict';
function editRiver(id) { function editRiver(id) {
if (customization) return; if (customization) return;
if (elSelected && id === elSelected.attr("id")) return; if (elSelected && id === elSelected.attr("id")) return;
@ -47,18 +47,18 @@ function editRiver(id) {
document.getElementById("riverWidthFactor").addEventListener("input", changeWidthFactor); document.getElementById("riverWidthFactor").addEventListener("input", changeWidthFactor);
function getRiver() { function getRiver() {
const riverId = +elSelected.attr("id").slice(5); const riverId = +elSelected.attr('id').slice(5);
const river = pack.rivers.find(r => r.i === riverId); const river = pack.rivers.find((r) => r.i === riverId);
return river; return river;
} }
function updateRiverData() { function updateRiverData() {
const r = getRiver(); const r = getRiver();
document.getElementById("riverName").value = r.name; document.getElementById('riverName').value = r.name;
document.getElementById("riverType").value = r.type; document.getElementById('riverType').value = r.type;
const parentSelect = document.getElementById("riverMainstem"); const parentSelect = document.getElementById('riverMainstem');
parentSelect.options.length = 0; parentSelect.options.length = 0;
const parent = r.parent || r.i; const parent = r.parent || r.i;
const sortedRivers = pack.rivers.slice().sort((a, b) => (a.name > b.name ? 1 : -1)); const sortedRivers = pack.rivers.slice().sort((a, b) => (a.name > b.name ? 1 : -1));
@ -66,7 +66,7 @@ function editRiver(id) {
const opt = new Option(river.name, river.i, false, river.i === parent); const opt = new Option(river.name, river.i, false, river.i === parent);
parentSelect.options.add(opt); parentSelect.options.add(opt);
}); });
document.getElementById("riverBasin").value = pack.rivers.find(river => river.i === r.basin).name; document.getElementById('riverBasin').value = pack.rivers.find((river) => river.i === r.basin).name;
document.getElementById("riverDischarge").value = r.discharge + " m³/s"; document.getElementById("riverDischarge").value = r.discharge + " m³/s";
document.getElementById("riverSourceWidth").value = r.sourceWidth; document.getElementById("riverSourceWidth").value = r.sourceWidth;
@ -208,8 +208,8 @@ function editRiver(id) {
function changeParent() { function changeParent() {
const r = getRiver(); const r = getRiver();
r.parent = +this.value; r.parent = +this.value;
r.basin = pack.rivers.find(river => river.i === r.parent).basin; r.basin = pack.rivers.find((river) => river.i === r.parent).basin;
document.getElementById("riverBasin").value = pack.rivers.find(river => river.i === r.basin).name; document.getElementById('riverBasin').value = pack.rivers.find((river) => river.i === r.basin).name;
} }
function changeSourceWidth() { function changeSourceWidth() {
@ -232,9 +232,9 @@ function editRiver(id) {
} }
function editRiverLegend() { function editRiverLegend() {
const id = elSelected.attr("id"); const id = elSelected.attr('id');
const river = getRiver(); const river = getRiver();
editNotes(id, river.name + " " + river.type); editNotes(id, river.name + ' ' + river.type);
} }
function removeRiver() { function removeRiver() {

46
modules/ui/rivers-overview.js
View file

@ -1,12 +1,12 @@
"use strict"; 'use strict';
function overviewRivers() { function overviewRivers() {
if (customization) return; if (customization) return;
closeDialogs("#riversOverview, .stable"); closeDialogs('#riversOverview, .stable');
if (!layerIsOn("toggleRivers")) toggleRivers(); if (!layerIsOn('toggleRivers')) toggleRivers();
const body = document.getElementById("riversBody"); const body = document.getElementById('riversBody');
riversOverviewAddLines(); riversOverviewAddLines();
$("#riversOverview").dialog(); $('#riversOverview').dialog();
if (modules.overviewRivers) return; if (modules.overviewRivers) return;
modules.overviewRivers = true; modules.overviewRivers = true;
@ -28,15 +28,15 @@ function overviewRivers() {
// add line for each river // add line for each river
function riversOverviewAddLines() { function riversOverviewAddLines() {
body.innerHTML = ""; body.innerHTML = '';
let lines = ""; let lines = '';
const unit = distanceUnitInput.value; const unit = distanceUnitInput.value;
for (const r of pack.rivers) { for (const r of pack.rivers) {
const discharge = r.discharge + " m³/s"; const discharge = r.discharge + ' m³/s';
const length = rn(r.length * distanceScaleInput.value) + " " + unit; const length = rn(r.length * distanceScaleInput.value) + ' ' + unit;
const width = rn(r.width * distanceScaleInput.value, 3) + " " + unit; const width = rn(r.width * distanceScaleInput.value, 3) + ' ' + unit;
const basin = pack.rivers.find(river => river.i === r.basin)?.name; const basin = pack.rivers.find((river) => river.i === r.basin)?.name;
lines += /* html */ `<div lines += /* html */ `<div
class="states" class="states"
@ -59,7 +59,7 @@ function overviewRivers() {
<span data-tip="Remove river" class="icon-trash-empty"></span> <span data-tip="Remove river" class="icon-trash-empty"></span>
</div>`; </div>`;
} }
body.insertAdjacentHTML("beforeend", lines); body.insertAdjacentHTML('beforeend', lines);
// update footer // update footer
riversFooterNumber.innerHTML = pack.rivers.length; riversFooterNumber.innerHTML = pack.rivers.length;
@ -71,17 +71,17 @@ function overviewRivers() {
riversFooterWidth.innerHTML = rn(averageWidth * distanceScaleInput.value, 3) + " " + unit; riversFooterWidth.innerHTML = rn(averageWidth * distanceScaleInput.value, 3) + " " + unit;
// add listeners // add listeners
body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseenter", ev => riverHighlightOn(ev))); body.querySelectorAll('div.states').forEach((el) => el.addEventListener('mouseenter', (ev) => riverHighlightOn(ev)));
body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseleave", ev => riverHighlightOff(ev))); body.querySelectorAll('div.states').forEach((el) => el.addEventListener('mouseleave', (ev) => riverHighlightOff(ev)));
body.querySelectorAll("div > span.icon-dot-circled").forEach(el => el.addEventListener("click", zoomToRiver)); body.querySelectorAll('div > span.icon-dot-circled').forEach((el) => el.addEventListener('click', zoomToRiver));
body.querySelectorAll("div > span.icon-pencil").forEach(el => el.addEventListener("click", openRiverEditor)); body.querySelectorAll('div > span.icon-pencil').forEach((el) => el.addEventListener('click', openRiverEditor));
body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.addEventListener("click", triggerRiverRemove)); body.querySelectorAll('div > span.icon-trash-empty').forEach((el) => el.addEventListener('click', triggerRiverRemove));
applySorting(riversHeader); applySorting(riversHeader);
} }
function riverHighlightOn(event) { function riverHighlightOn(event) {
if (!layerIsOn("toggleRivers")) toggleRivers(); if (!layerIsOn('toggleRivers')) toggleRivers();
const r = +event.target.dataset.id; const r = +event.target.dataset.id;
rivers rivers
.select("#river" + r) .select("#river" + r)
@ -104,9 +104,9 @@ function overviewRivers() {
} }
function toggleBasinsHightlight() { function toggleBasinsHightlight() {
if (rivers.attr("data-basin") === "hightlighted") { if (rivers.attr('data-basin') === 'hightlighted') {
rivers.selectAll("*").attr("fill", null); rivers.selectAll('*').attr('fill', null);
rivers.attr("data-basin", null); rivers.attr('data-basin', null);
} else { } else {
rivers.attr("data-basin", "hightlighted"); rivers.attr("data-basin", "hightlighted");
const basins = [...new Set(pack.rivers.map(r => r.basin))]; const basins = [...new Set(pack.rivers.map(r => r.basin))];
@ -124,7 +124,7 @@ function overviewRivers() {
} }
function downloadRiversData() { function downloadRiversData() {
let data = "Id,River,Type,Discharge,Length,Width,Basin\n"; // headers let data = 'Id,River,Type,Discharge,Length,Width,Basin\n'; // headers
body.querySelectorAll(":scope > div").forEach(function (el) { body.querySelectorAll(":scope > div").forEach(function (el) {
const d = el.dataset; const d = el.dataset;
@ -134,7 +134,7 @@ function overviewRivers() {
data += [d.id, d.name, d.type, discharge, length, width, d.basin].join(",") + "\n"; data += [d.id, d.name, d.type, discharge, length, width, d.basin].join(",") + "\n";
}); });
const name = getFileName("Rivers") + ".csv"; const name = getFileName('Rivers') + '.csv';
downloadFile(data, name); downloadFile(data, name);
} }

142
modules/ui/routes-editor.js
View file

@ -1,9 +1,9 @@
"use strict"; 'use strict';
function editRoute(onClick) { function editRoute(onClick) {
if (customization) return; if (customization) return;
if (!onClick && elSelected && d3.event.target.id === elSelected.attr("id")) return; if (!onClick && elSelected && d3.event.target.id === elSelected.attr('id')) return;
closeDialogs(".stable"); closeDialogs('.stable');
if (!layerIsOn("toggleRoutes")) toggleRoutes(); if (!layerIsOn('toggleRoutes')) toggleRoutes();
$("#routeEditor").dialog({ $("#routeEditor").dialog({
title: "Edit Route", title: "Edit Route",
@ -12,32 +12,32 @@ function editRoute(onClick) {
close: closeRoutesEditor close: closeRoutesEditor
}); });
debug.append("g").attr("id", "controlPoints"); debug.append('g').attr('id', 'controlPoints');
const node = onClick ? elSelected.node() : d3.event.target; const node = onClick ? elSelected.node() : d3.event.target;
elSelected = d3.select(node).on("click", addInterimControlPoint); elSelected = d3.select(node).on('click', addInterimControlPoint);
drawControlPoints(node); drawControlPoints(node);
selectRouteGroup(node); selectRouteGroup(node);
viewbox.on("touchmove mousemove", showEditorTips); viewbox.on('touchmove mousemove', showEditorTips);
if (onClick) toggleRouteCreationMode(); if (onClick) toggleRouteCreationMode();
if (modules.editRoute) return; if (modules.editRoute) return;
modules.editRoute = true; modules.editRoute = true;
// add listeners // add listeners
document.getElementById("routeGroupsShow").addEventListener("click", showGroupSection); document.getElementById('routeGroupsShow').addEventListener('click', showGroupSection);
document.getElementById("routeGroup").addEventListener("change", changeRouteGroup); document.getElementById('routeGroup').addEventListener('change', changeRouteGroup);
document.getElementById("routeGroupAdd").addEventListener("click", toggleNewGroupInput); document.getElementById('routeGroupAdd').addEventListener('click', toggleNewGroupInput);
document.getElementById("routeGroupName").addEventListener("change", createNewGroup); document.getElementById('routeGroupName').addEventListener('change', createNewGroup);
document.getElementById("routeGroupRemove").addEventListener("click", removeRouteGroup); document.getElementById('routeGroupRemove').addEventListener('click', removeRouteGroup);
document.getElementById("routeGroupsHide").addEventListener("click", hideGroupSection); document.getElementById('routeGroupsHide').addEventListener('click', hideGroupSection);
document.getElementById("routeElevationProfile").addEventListener("click", showElevationProfile); document.getElementById('routeElevationProfile').addEventListener('click', showElevationProfile);
document.getElementById("routeEditStyle").addEventListener("click", editGroupStyle); document.getElementById('routeEditStyle').addEventListener('click', editGroupStyle);
document.getElementById("routeSplit").addEventListener("click", toggleRouteSplitMode); document.getElementById('routeSplit').addEventListener('click', toggleRouteSplitMode);
document.getElementById("routeLegend").addEventListener("click", editRouteLegend); document.getElementById('routeLegend').addEventListener('click', editRouteLegend);
document.getElementById("routeNew").addEventListener("click", toggleRouteCreationMode); document.getElementById('routeNew').addEventListener('click', toggleRouteCreationMode);
document.getElementById("routeRemove").addEventListener("click", removeRoute); document.getElementById('routeRemove').addEventListener('click', removeRoute);
function showEditorTips() { function showEditorTips() {
showMainTip(); showMainTip();
@ -53,7 +53,7 @@ function editRoute(onClick) {
const point = node.getPointAtLength(i); const point = node.getPointAtLength(i);
addControlPoint([point.x, point.y]); addControlPoint([point.x, point.y]);
} }
routeLength.innerHTML = rn(l * distanceScaleInput.value) + " " + distanceUnitInput.value; routeLength.innerHTML = rn(l * distanceScaleInput.value) + ' ' + distanceUnitInput.value;
} }
function addControlPoint(point, before = null) { function addControlPoint(point, before = null) {
@ -69,8 +69,8 @@ function editRoute(onClick) {
function addInterimControlPoint() { function addInterimControlPoint() {
const point = d3.mouse(this); const point = d3.mouse(this);
const controls = document.getElementById("controlPoints").querySelectorAll("circle"); const controls = document.getElementById('controlPoints').querySelectorAll('circle');
const points = Array.from(controls).map(circle => [+circle.getAttribute("cx"), +circle.getAttribute("cy")]); const points = Array.from(controls).map((circle) => [+circle.getAttribute('cx'), +circle.getAttribute('cy')]);
const index = getSegmentId(points, point, 2); const index = getSegmentId(points, point, 2);
addControlPoint(point, ":nth-child(" + (index + 1) + ")"); addControlPoint(point, ":nth-child(" + (index + 1) + ")");
@ -78,8 +78,8 @@ function editRoute(onClick) {
} }
function dragControlPoint() { function dragControlPoint() {
this.setAttribute("cx", d3.event.x); this.setAttribute('cx', d3.event.x);
this.setAttribute("cy", d3.event.y); this.setAttribute('cy', d3.event.y);
redrawRoute(); redrawRoute();
} }
@ -93,9 +93,9 @@ function editRoute(onClick) {
points.push([this.getAttribute("cx"), this.getAttribute("cy")]); points.push([this.getAttribute("cx"), this.getAttribute("cy")]);
}); });
elSelected.attr("d", round(lineGen(points))); elSelected.attr('d', round(lineGen(points)));
const l = elSelected.node().getTotalLength(); const l = elSelected.node().getTotalLength();
routeLength.innerHTML = rn(l * distanceScaleInput.value) + " " + distanceUnitInput.value; routeLength.innerHTML = rn(l * distanceScaleInput.value) + ' ' + distanceUnitInput.value;
if (modules.elevation) showEPForRoute(elSelected.node()); if (modules.elevation) showEPForRoute(elSelected.node());
} }
@ -120,7 +120,7 @@ function editRoute(onClick) {
function selectRouteGroup(node) { function selectRouteGroup(node) {
const group = node.parentNode.id; const group = node.parentNode.id;
const select = document.getElementById("routeGroup"); const select = document.getElementById('routeGroup');
select.options.length = 0; // remove all options select.options.length = 0; // remove all options
routes.selectAll("g").each(function () { routes.selectAll("g").each(function () {
@ -133,10 +133,10 @@ function editRoute(onClick) {
} }
function toggleNewGroupInput() { function toggleNewGroupInput() {
if (routeGroupName.style.display === "none") { if (routeGroupName.style.display === 'none') {
routeGroupName.style.display = "inline-block"; routeGroupName.style.display = 'inline-block';
routeGroupName.focus(); routeGroupName.focus();
routeGroup.style.display = "none"; routeGroup.style.display = 'none';
} else { } else {
routeGroupName.style.display = "none"; routeGroupName.style.display = "none";
routeGroup.style.display = "inline-block"; routeGroup.style.display = "inline-block";
@ -154,17 +154,17 @@ function editRoute(onClick) {
.replace(/[^\w\s]/gi, ""); .replace(/[^\w\s]/gi, "");
if (document.getElementById(group)) { if (document.getElementById(group)) {
tip("Element with this id already exists. Please provide a unique name", false, "error"); tip('Element with this id already exists. Please provide a unique name', false, 'error');
return; return;
} }
if (Number.isFinite(+group.charAt(0))) { if (Number.isFinite(+group.charAt(0))) {
tip("Group name should start with a letter", false, "error"); tip('Group name should start with a letter', false, 'error');
return; return;
} }
// just rename if only 1 element left // just rename if only 1 element left
const oldGroup = elSelected.node().parentNode; const oldGroup = elSelected.node().parentNode;
const basic = ["roads", "trails", "searoutes"].includes(oldGroup.id); const basic = ['roads', 'trails', 'searoutes'].includes(oldGroup.id);
if (!basic && oldGroup.childElementCount === 1) { if (!basic && oldGroup.childElementCount === 1) {
document.getElementById("routeGroup").selectedOptions[0].remove(); document.getElementById("routeGroup").selectedOptions[0].remove();
document.getElementById("routeGroup").options.add(new Option(group, group, false, true)); document.getElementById("routeGroup").options.add(new Option(group, group, false, true));
@ -175,18 +175,18 @@ function editRoute(onClick) {
} }
const newGroup = elSelected.node().parentNode.cloneNode(false); const newGroup = elSelected.node().parentNode.cloneNode(false);
document.getElementById("routes").appendChild(newGroup); document.getElementById('routes').appendChild(newGroup);
newGroup.id = group; newGroup.id = group;
document.getElementById("routeGroup").options.add(new Option(group, group, false, true)); document.getElementById('routeGroup').options.add(new Option(group, group, false, true));
document.getElementById(group).appendChild(elSelected.node()); document.getElementById(group).appendChild(elSelected.node());
toggleNewGroupInput(); toggleNewGroupInput();
document.getElementById("routeGroupName").value = ""; document.getElementById('routeGroupName').value = '';
} }
function removeRouteGroup() { function removeRouteGroup() {
const group = elSelected.node().parentNode.id; const group = elSelected.node().parentNode.id;
const basic = ["roads", "trails", "searoutes"].includes(group); const basic = ['roads', 'trails', 'searoutes'].includes(group);
const count = elSelected.node().parentNode.childElementCount; const count = elSelected.node().parentNode.childElementCount;
alertMessage.innerHTML = /* html */ `Are you sure you want to remove ${ alertMessage.innerHTML = /* html */ `Are you sure you want to remove ${
basic ? "all elements in the group" : "the entire route group" basic ? "all elements in the group" : "the entire route group"
@ -216,12 +216,12 @@ function editRoute(onClick) {
function editGroupStyle() { function editGroupStyle() {
const g = elSelected.node().parentNode.id; const g = elSelected.node().parentNode.id;
editStyle("routes", g); editStyle('routes', g);
} }
function toggleRouteSplitMode() { function toggleRouteSplitMode() {
document.getElementById("routeNew").classList.remove("pressed"); document.getElementById('routeNew').classList.remove('pressed');
this.classList.toggle("pressed"); this.classList.toggle('pressed');
} }
function clickControlPoint() { function clickControlPoint() {
@ -252,34 +252,54 @@ function editRoute(onClick) {
this.remove(); this.remove();
}); });
elSelected.attr("d", round(lineGen(points1))); function splitRoute(clicked) {
const id = getNextId("route"); lineGen.curve(d3.curveCatmullRom.alpha(0.1));
group.append("path").attr("id", id).attr("d", lineGen(points2)); const group = d3.select(elSelected.node().parentNode);
debug.select("#controlPoints").selectAll("circle").remove(); routeSplit.classList.remove('pressed');
const points1 = [],
points2 = [];
let points = points1;
debug
.select('#controlPoints')
.selectAll('circle')
.each(function () {
points.push([this.getAttribute('cx'), this.getAttribute('cy')]);
if (this === clicked) {
points = points2;
points.push([this.getAttribute('cx'), this.getAttribute('cy')]);
}
this.remove();
});
elSelected.attr('d', round(lineGen(points1)));
const id = getNextId('route');
group.append('path').attr('id', id).attr('d', lineGen(points2));
debug.select('#controlPoints').selectAll('circle').remove();
drawControlPoints(elSelected.node()); drawControlPoints(elSelected.node());
} }
function toggleRouteCreationMode() { function toggleRouteCreationMode() {
document.getElementById("routeSplit").classList.remove("pressed"); document.getElementById('routeSplit').classList.remove('pressed');
document.getElementById("routeNew").classList.toggle("pressed"); document.getElementById('routeNew').classList.toggle('pressed');
if (document.getElementById("routeNew").classList.contains("pressed")) { if (document.getElementById('routeNew').classList.contains('pressed')) {
tip("Click on map to add control points", true); tip('Click on map to add control points', true);
viewbox.on("click", addPointOnClick).style("cursor", "crosshair"); viewbox.on('click', addPointOnClick).style('cursor', 'crosshair');
elSelected.on("click", null); elSelected.on('click', null);
} else { } else {
clearMainTip(); clearMainTip();
viewbox.on("click", clicked).style("cursor", "default"); viewbox.on('click', clicked).style('cursor', 'default');
elSelected.on("click", addInterimControlPoint).attr("data-new", null); elSelected.on('click', addInterimControlPoint).attr('data-new', null);
} }
} }
function addPointOnClick() { function addPointOnClick() {
// create new route // create new route
if (!elSelected.attr("data-new")) { if (!elSelected.attr('data-new')) {
debug.select("#controlPoints").selectAll("circle").remove(); debug.select('#controlPoints').selectAll('circle').remove();
const parent = elSelected.node().parentNode; const parent = elSelected.node().parentNode;
const id = getNextId("route"); const id = getNextId('route');
elSelected = d3.select(parent).append("path").attr("id", id).attr("data-new", 1); elSelected = d3.select(parent).append('path').attr('id', id).attr('data-new', 1);
} }
addControlPoint(d3.mouse(this)); addControlPoint(d3.mouse(this));
@ -287,7 +307,7 @@ function editRoute(onClick) {
} }
function editRouteLegend() { function editRouteLegend() {
const id = elSelected.attr("id"); const id = elSelected.attr('id');
editNotes(id, id); editNotes(id, id);
} }
@ -310,11 +330,11 @@ function editRoute(onClick) {
} }
function closeRoutesEditor() { function closeRoutesEditor() {
elSelected.attr("data-new", null).on("click", null); elSelected.attr('data-new', null).on('click', null);
clearMainTip(); clearMainTip();
routeSplit.classList.remove("pressed"); routeSplit.classList.remove('pressed');
routeNew.classList.remove("pressed"); routeNew.classList.remove('pressed');
debug.select("#controlPoints").remove(); debug.select('#controlPoints').remove();
unselect(); unselect();
} }
} }

162
modules/ui/style.js
View file

@ -1,5 +1,5 @@
// UI module to control the style // UI module to control the style
"use strict"; 'use strict';
// add available filters to lists // add available filters to lists
{ {
@ -29,16 +29,16 @@ function editStyle(element, group) {
if (group) styleGroupSelect.options.add(new Option(group, group, true, true)); if (group) styleGroupSelect.options.add(new Option(group, group, true, true));
selectStyleElement(); selectStyleElement();
styleElementSelect.classList.add("glow"); styleElementSelect.classList.add('glow');
if (group) styleGroupSelect.classList.add("glow"); if (group) styleGroupSelect.classList.add('glow');
setTimeout(() => { setTimeout(() => {
styleElementSelect.classList.remove("glow"); styleElementSelect.classList.remove('glow');
if (group) styleGroupSelect.classList.remove("glow"); if (group) styleGroupSelect.classList.remove('glow');
}, 1500); }, 1500);
} }
// Toggle style sections on element select // Toggle style sections on element select
styleElementSelect.addEventListener("change", selectStyleElement); styleElementSelect.addEventListener('change', selectStyleElement);
function selectStyleElement() { function selectStyleElement() {
const sel = styleElementSelect.value; const sel = styleElementSelect.value;
let el = d3.select("#" + sel); let el = d3.select("#" + sel);
@ -69,9 +69,9 @@ function selectStyleElement() {
} }
// fill // fill
if (["rivers", "lakes", "landmass", "prec", "ice", "fogging"].includes(sel)) { if (['rivers', 'lakes', 'landmass', 'prec', 'ice', 'fogging'].includes(sel)) {
styleFill.style.display = "block"; styleFill.style.display = 'block';
styleFillInput.value = styleFillOutput.value = el.attr("fill"); styleFillInput.value = styleFillOutput.value = el.attr('fill');
} }
// stroke color and width // stroke color and width
@ -87,16 +87,16 @@ function selectStyleElement() {
} }
// stroke dash // stroke dash
if (["routes", "borders", "temperature", "legend", "population", "coordinates", "zones", "gridOverlay"].includes(sel)) { if (['routes', 'borders', 'temperature', 'legend', 'population', 'coordinates', 'zones', 'gridOverlay'].includes(sel)) {
styleStrokeDash.style.display = "block"; styleStrokeDash.style.display = 'block';
styleStrokeDasharrayInput.value = el.attr("stroke-dasharray") || ""; styleStrokeDasharrayInput.value = el.attr('stroke-dasharray') || '';
styleStrokeLinecapInput.value = el.attr("stroke-linecap") || "inherit"; styleStrokeLinecapInput.value = el.attr('stroke-linecap') || 'inherit';
} }
// clipping // clipping
if (["cells", "gridOverlay", "coordinates", "compass", "terrain", "temperature", "routes", "texture", "biomes", "zones"].includes(sel)) { if (['cells', 'gridOverlay', 'coordinates', 'compass', 'terrain', 'temperature', 'routes', 'texture', 'biomes', 'zones'].includes(sel)) {
styleClipping.style.display = "block"; styleClipping.style.display = 'block';
styleClippingInput.value = el.attr("mask") || ""; styleClippingInput.value = el.attr('mask') || '';
} }
// show specific sections // show specific sections
@ -111,41 +111,41 @@ function selectStyleElement() {
styleHeightmapCurve.value = terrs.attr("curve"); styleHeightmapCurve.value = terrs.attr("curve");
} }
if (sel === "markers") { if (sel === 'markers') {
styleMarkers.style.display = "block"; styleMarkers.style.display = 'block';
styleRescaleMarkers.checked = +markers.attr("rescale"); styleRescaleMarkers.checked = +markers.attr('rescale');
} }
if (sel === "gridOverlay") { if (sel === 'gridOverlay') {
styleGrid.style.display = "block"; styleGrid.style.display = 'block';
styleGridType.value = el.attr("type"); styleGridType.value = el.attr('type');
styleGridScale.value = el.attr("scale") || 1; styleGridScale.value = el.attr('scale') || 1;
styleGridShiftX.value = el.attr("dx") || 0; styleGridShiftX.value = el.attr('dx') || 0;
styleGridShiftY.value = el.attr("dy") || 0; styleGridShiftY.value = el.attr('dy') || 0;
calculateFriendlyGridSize(); calculateFriendlyGridSize();
} }
if (sel === "compass") { if (sel === 'compass') {
styleCompass.style.display = "block"; styleCompass.style.display = 'block';
const tr = parseTransform(compass.select("use").attr("transform")); const tr = parseTransform(compass.select('use').attr('transform'));
styleCompassShiftX.value = tr[0]; styleCompassShiftX.value = tr[0];
styleCompassShiftY.value = tr[1]; styleCompassShiftY.value = tr[1];
styleCompassSizeInput.value = styleCompassSizeOutput.value = tr[2]; styleCompassSizeInput.value = styleCompassSizeOutput.value = tr[2];
} }
if (sel === "terrain") { if (sel === 'terrain') {
styleRelief.style.display = "block"; styleRelief.style.display = 'block';
styleReliefSizeOutput.innerHTML = styleReliefSizeInput.value = terrain.attr("size"); styleReliefSizeOutput.innerHTML = styleReliefSizeInput.value = terrain.attr('size');
styleReliefDensityOutput.innerHTML = styleReliefDensityInput.value = terrain.attr("density"); styleReliefDensityOutput.innerHTML = styleReliefDensityInput.value = terrain.attr('density');
styleReliefSet.value = terrain.attr("set"); styleReliefSet.value = terrain.attr('set');
} }
if (sel === "population") { if (sel === 'population') {
stylePopulation.style.display = "block"; stylePopulation.style.display = 'block';
stylePopulationRuralStrokeInput.value = stylePopulationRuralStrokeOutput.value = population.select("#rural").attr("stroke"); stylePopulationRuralStrokeInput.value = stylePopulationRuralStrokeOutput.value = population.select('#rural').attr('stroke');
stylePopulationUrbanStrokeInput.value = stylePopulationUrbanStrokeOutput.value = population.select("#urban").attr("stroke"); stylePopulationUrbanStrokeInput.value = stylePopulationUrbanStrokeOutput.value = population.select('#urban').attr('stroke');
styleStrokeWidth.style.display = "block"; styleStrokeWidth.style.display = 'block';
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || ""; styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr('stroke-width') || '';
} }
if (sel === "regions") { if (sel === "regions") {
@ -216,10 +216,10 @@ function selectStyleElement() {
styleStrokeWidth.style.display = "block"; styleStrokeWidth.style.display = "block";
styleSize.style.display = "block"; styleSize.style.display = "block";
styleLegend.style.display = "block"; styleLegend.style.display = 'block';
styleLegendColItemsOutput.value = styleLegendColItems.value = el.attr("data-columns"); styleLegendColItemsOutput.value = styleLegendColItems.value = el.attr('data-columns');
styleLegendBackOutput.value = styleLegendBack.value = el.select("#legendBox").attr("fill"); styleLegendBackOutput.value = styleLegendBack.value = el.select('#legendBox').attr('fill');
styleLegendOpacityOutput.value = styleLegendOpacity.value = el.select("#legendBox").attr("fill-opacity"); styleLegendOpacityOutput.value = styleLegendOpacity.value = el.select('#legendBox').attr('fill-opacity');
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#111111"; styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#111111";
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0.5; styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0.5;
@ -246,21 +246,21 @@ function selectStyleElement() {
styleTemperatureFontSizeInput.value = styleTemperatureFontSizeOutput.value = el.attr("font-size") || "8px"; styleTemperatureFontSizeInput.value = styleTemperatureFontSizeOutput.value = el.attr("font-size") || "8px";
} }
if (sel === "coordinates") { if (sel === 'coordinates') {
styleSize.style.display = "block"; styleSize.style.display = 'block';
styleFontSize.value = el.attr("data-size"); styleFontSize.value = el.attr('data-size');
} }
if (sel === "armies") { if (sel === 'armies') {
styleArmies.style.display = "block"; styleArmies.style.display = 'block';
styleArmiesFillOpacity.value = styleArmiesFillOpacityOutput.value = el.attr("fill-opacity"); styleArmiesFillOpacity.value = styleArmiesFillOpacityOutput.value = el.attr('fill-opacity');
styleArmiesSize.value = styleArmiesSizeOutput.value = el.attr("box-size"); styleArmiesSize.value = styleArmiesSizeOutput.value = el.attr('box-size');
} }
if (sel === "emblems") { if (sel === 'emblems') {
styleEmblems.style.display = "block"; styleEmblems.style.display = 'block';
styleStrokeWidth.style.display = "block"; styleStrokeWidth.style.display = 'block';
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 1; styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr('stroke-width') || 1;
} }
if (sel === 'goods') { if (sel === 'goods') {
@ -294,7 +294,7 @@ function selectStyleElement() {
} }
// Handle style inputs change // Handle style inputs change
styleGroupSelect.addEventListener("change", selectStyleElement); styleGroupSelect.addEventListener('change', selectStyleElement);
function getEl() { function getEl() {
const el = styleElementSelect.value; const el = styleElementSelect.value;
@ -391,13 +391,13 @@ styleGridShiftY.addEventListener("input", function () {
if (layerIsOn("toggleGrid")) drawGrid(); if (layerIsOn("toggleGrid")) drawGrid();
}); });
styleShiftX.addEventListener("input", shiftElement); styleShiftX.addEventListener('input', shiftElement);
styleShiftY.addEventListener("input", shiftElement); styleShiftY.addEventListener('input', shiftElement);
function shiftElement() { function shiftElement() {
const x = styleShiftX.value || 0; const x = styleShiftX.value || 0;
const y = styleShiftY.value || 0; const y = styleShiftY.value || 0;
getEl().attr("transform", `translate(${x},${y})`); getEl().attr('transform', `translate(${x},${y})`);
} }
styleRescaleMarkers.addEventListener("change", function () { styleRescaleMarkers.addEventListener("change", function () {
@ -459,7 +459,7 @@ styleHeightmapCurve.addEventListener("change", function () {
styleReliefSet.addEventListener("change", function () { styleReliefSet.addEventListener("change", function () {
terrain.attr("set", this.value); terrain.attr("set", this.value);
ReliefIcons(); ReliefIcons();
if (!layerIsOn("toggleRelief")) toggleRelief(); if (!layerIsOn('toggleRelief')) toggleRelief();
}); });
styleReliefSizeInput.addEventListener("change", function () { styleReliefSizeInput.addEventListener("change", function () {
@ -473,7 +473,7 @@ styleReliefDensityInput.addEventListener("change", function () {
terrain.attr("density", this.value); terrain.attr("density", this.value);
styleReliefDensityOutput.value = this.value; styleReliefDensityOutput.value = this.value;
ReliefIcons(); ReliefIcons();
if (!layerIsOn("toggleRelief")) toggleRelief(); if (!layerIsOn('toggleRelief')) toggleRelief();
}); });
styleTemperatureFillOpacityInput.addEventListener("input", function () { styleTemperatureFillOpacityInput.addEventListener("input", function () {
@ -506,31 +506,31 @@ styleCompassSizeInput.addEventListener("input", function () {
shiftCompass(); shiftCompass();
}); });
styleCompassShiftX.addEventListener("input", shiftCompass); styleCompassShiftX.addEventListener('input', shiftCompass);
styleCompassShiftY.addEventListener("input", shiftCompass); styleCompassShiftY.addEventListener('input', shiftCompass);
function shiftCompass() { function shiftCompass() {
const tr = `translate(${styleCompassShiftX.value} ${styleCompassShiftY.value}) scale(${styleCompassSizeInput.value})`; const tr = `translate(${styleCompassShiftX.value} ${styleCompassShiftY.value}) scale(${styleCompassSizeInput.value})`;
compass.select("use").attr("transform", tr); compass.select('use').attr('transform', tr);
} }
styleLegendColItems.addEventListener("input", function () { styleLegendColItems.addEventListener("input", function () {
styleLegendColItemsOutput.value = this.value; styleLegendColItemsOutput.value = this.value;
legend.select("#legendBox").attr("data-columns", this.value); legend.select('#legendBox').attr('data-columns', this.value);
redrawLegend(); redrawLegend();
}); });
styleLegendBack.addEventListener("input", function () { styleLegendBack.addEventListener("input", function () {
styleLegendBackOutput.value = this.value; styleLegendBackOutput.value = this.value;
legend.select("#legendBox").attr("fill", this.value); legend.select('#legendBox').attr('fill', this.value);
}); });
styleLegendOpacity.addEventListener("input", function () { styleLegendOpacity.addEventListener("input", function () {
styleLegendOpacityOutput.value = this.value; styleLegendOpacityOutput.value = this.value;
legend.select("#legendBox").attr("fill-opacity", this.value); legend.select('#legendBox').attr('fill-opacity', this.value);
}); });
styleSelectFont.addEventListener("change", changeFont); styleSelectFont.addEventListener('change', changeFont);
function changeFont() { function changeFont() {
const family = styleSelectFont.value; const family = styleSelectFont.value;
getEl().attr("font-family", family); getEl().attr("font-family", family);
@ -688,12 +688,12 @@ styleStatesBodyFilter.addEventListener("change", function () {
styleStatesHaloWidth.addEventListener("input", function () { styleStatesHaloWidth.addEventListener("input", function () {
styleStatesHaloWidthOutput.value = this.value; styleStatesHaloWidthOutput.value = this.value;
statesHalo.attr("data-width", this.value).attr("stroke-width", this.value); statesHalo.attr('data-width', this.value).attr('stroke-width', this.value);
}); });
styleStatesHaloOpacity.addEventListener("input", function () { styleStatesHaloOpacity.addEventListener("input", function () {
styleStatesHaloOpacityOutput.value = this.value; styleStatesHaloOpacityOutput.value = this.value;
statesHalo.attr("opacity", this.value); statesHalo.attr('opacity', this.value);
}); });
styleStatesHaloBlur.addEventListener("input", function () { styleStatesHaloBlur.addEventListener("input", function () {
@ -710,8 +710,8 @@ styleArmiesFillOpacity.addEventListener("input", function () {
styleArmiesSize.addEventListener("input", function () { styleArmiesSize.addEventListener("input", function () {
armies.attr("box-size", this.value).attr("font-size", this.value * 2); armies.attr("box-size", this.value).attr("font-size", this.value * 2);
styleArmiesSizeOutput.value = this.value; styleArmiesSizeOutput.value = this.value;
armies.selectAll("g").remove(); // clear armies layer armies.selectAll('g').remove(); // clear armies layer
pack.states.forEach(s => { pack.states.forEach((s) => {
if (!s.i || s.removed || !s.military.length) return; if (!s.i || s.removed || !s.military.length) return;
Military.drawRegiments(s.military, s.i); Military.drawRegiments(s.military, s.i);
}); });
@ -748,9 +748,9 @@ function textureProvideURL() {
opt.text = name.slice(0, 20); opt.text = name.slice(0, 20);
styleTextureInput.add(opt); styleTextureInput.add(opt);
styleTextureInput.value = textureURL.value; styleTextureInput.value = textureURL.value;
getBase64(textureURL.value, base64 => texture.select("image").attr("xlink:href", base64)); getBase64(textureURL.value, (base64) => texture.select('image').attr('xlink:href', base64));
zoom.scaleBy(svg, 1.00001); // enforce browser re-draw zoom.scaleBy(svg, 1.00001); // enforce browser re-draw
$(this).dialog("close"); $(this).dialog('close');
}, },
Cancel: function () { Cancel: function () {
$(this).dialog("close"); $(this).dialog("close");
@ -760,11 +760,11 @@ function textureProvideURL() {
} }
function fetchTextureURL(url) { function fetchTextureURL(url) {
INFO && console.log("Provided URL is", url); INFO && console.log('Provided URL is', url);
const img = new Image(); const img = new Image();
img.onload = function () { img.onload = function () {
const canvas = document.getElementById("texturePreview"); const canvas = document.getElementById('texturePreview');
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}; };
@ -805,17 +805,17 @@ function updateElements() {
}); });
// redraw elements // redraw elements
if (layerIsOn("toggleHeight")) drawHeightmap(); if (layerIsOn('toggleHeight')) drawHeightmap();
if (legend.selectAll("*").size() && window.redrawLegend) redrawLegend(); if (legend.selectAll('*').size() && window.redrawLegend) redrawLegend();
oceanLayers.selectAll("path").remove(); oceanLayers.selectAll('path').remove();
OceanLayers(); OceanLayers();
invokeActiveZooming(); invokeActiveZooming();
} }
// GLOBAL FILTERS // GLOBAL FILTERS
mapFilters.addEventListener("click", applyMapFilter); mapFilters.addEventListener('click', applyMapFilter);
function applyMapFilter(event) { function applyMapFilter(event) {
if (event.target.tagName !== "BUTTON") return; if (event.target.tagName !== 'BUTTON') return;
const button = event.target; const button = event.target;
svg.attr("data-filter", null).attr("filter", null); svg.attr("data-filter", null).attr("filter", null);
if (button.classList.contains("pressed")) return button.classList.remove("pressed"); if (button.classList.contains("pressed")) return button.classList.remove("pressed");

58
modules/ui/units-editor.js
View file

@ -1,14 +1,14 @@
"use strict"; 'use strict';
function editUnits() { function editUnits() {
closeDialogs("#unitsEditor, .stable"); closeDialogs('#unitsEditor, .stable');
$("#unitsEditor").dialog(); $('#unitsEditor').dialog();
if (modules.editUnits) return; if (modules.editUnits) return;
modules.editUnits = true; modules.editUnits = true;
$("#unitsEditor").dialog({ $('#unitsEditor').dialog({
title: "Units Editor", title: 'Units Editor',
position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"} position: {my: 'right top', at: 'right-10 top+10', of: 'svg', collision: 'fit'}
}); });
const drawBar = () => drawScaleBar(scale); const drawBar = () => drawScaleBar(scale);
@ -36,12 +36,12 @@ function editUnits() {
document.getElementById("urbanDensityOutput").addEventListener("input", changeUrbanDensity); document.getElementById("urbanDensityOutput").addEventListener("input", changeUrbanDensity);
document.getElementById("urbanDensityInput").addEventListener("change", changeUrbanDensity); document.getElementById("urbanDensityInput").addEventListener("change", changeUrbanDensity);
document.getElementById("addLinearRuler").addEventListener("click", addRuler); document.getElementById('addLinearRuler').addEventListener('click', addRuler);
document.getElementById("addOpisometer").addEventListener("click", toggleOpisometerMode); document.getElementById('addOpisometer').addEventListener('click', toggleOpisometerMode);
document.getElementById("addRouteOpisometer").addEventListener("click", toggleRouteOpisometerMode); document.getElementById('addRouteOpisometer').addEventListener('click', toggleRouteOpisometerMode);
document.getElementById("addPlanimeter").addEventListener("click", togglePlanimeterMode); document.getElementById('addPlanimeter').addEventListener('click', togglePlanimeterMode);
document.getElementById("removeRulers").addEventListener("click", removeAllRulers); document.getElementById('removeRulers').addEventListener('click', removeAllRulers);
document.getElementById("unitsRestore").addEventListener("click", restoreDefaultUnits); document.getElementById('unitsRestore').addEventListener('click', restoreDefaultUnits);
function changeDistanceUnit() { function changeDistanceUnit() {
if (this.value === "custom_name") { if (this.value === "custom_name") {
@ -109,21 +109,21 @@ function editUnits() {
unlock("distanceScale"); unlock("distanceScale");
// units // units
const US = navigator.language === "en-US"; const US = navigator.language === 'en-US';
const UK = navigator.language === "en-GB"; const UK = navigator.language === 'en-GB';
distanceUnitInput.value = US || UK ? "mi" : "km"; distanceUnitInput.value = US || UK ? 'mi' : 'km';
heightUnit.value = US || UK ? "ft" : "m"; heightUnit.value = US || UK ? 'ft' : 'm';
temperatureScale.value = US ? "°F" : "°C"; temperatureScale.value = US ? '°F' : '°C';
areaUnit.value = "square"; areaUnit.value = 'square';
localStorage.removeItem("distanceUnit"); localStorage.removeItem('distanceUnit');
localStorage.removeItem("heightUnit"); localStorage.removeItem('heightUnit');
localStorage.removeItem("temperatureScale"); localStorage.removeItem('temperatureScale');
localStorage.removeItem("areaUnit"); localStorage.removeItem('areaUnit');
calculateFriendlyGridSize(); calculateFriendlyGridSize();
// height exponent // height exponent
heightExponentInput.value = heightExponentOutput.value = 1.8; heightExponentInput.value = heightExponentOutput.value = 1.8;
localStorage.removeItem("heightExponent"); localStorage.removeItem('heightExponent');
calculateTemperatures(); calculateTemperatures();
// scale bar // scale bar
@ -163,10 +163,10 @@ function editUnits() {
} }
function toggleOpisometerMode() { function toggleOpisometerMode() {
if (this.classList.contains("pressed")) { if (this.classList.contains('pressed')) {
restoreDefaultEvents(); restoreDefaultEvents();
clearMainTip(); clearMainTip();
this.classList.remove("pressed"); this.classList.remove('pressed');
} else { } else {
if (!layerIsOn("toggleRulers")) toggleRulers(); if (!layerIsOn("toggleRulers")) toggleRulers();
tip("Draw a curve to measure length. Hold Shift to disallow path optimization", true); tip("Draw a curve to measure length. Hold Shift to disallow path optimization", true);
@ -195,10 +195,10 @@ function editUnits() {
} }
function toggleRouteOpisometerMode() { function toggleRouteOpisometerMode() {
if (this.classList.contains("pressed")) { if (this.classList.contains('pressed')) {
restoreDefaultEvents(); restoreDefaultEvents();
clearMainTip(); clearMainTip();
this.classList.remove("pressed"); this.classList.remove('pressed');
} else { } else {
if (!layerIsOn("toggleRulers")) toggleRulers(); if (!layerIsOn("toggleRulers")) toggleRulers();
tip("Draw a curve along routes to measure length. Hold Shift to measure away from roads.", true); tip("Draw a curve along routes to measure length. Hold Shift to measure away from roads.", true);
@ -244,10 +244,10 @@ function editUnits() {
} }
function togglePlanimeterMode() { function togglePlanimeterMode() {
if (this.classList.contains("pressed")) { if (this.classList.contains('pressed')) {
restoreDefaultEvents(); restoreDefaultEvents();
clearMainTip(); clearMainTip();
this.classList.remove("pressed"); this.classList.remove('pressed');
} else { } else {
if (!layerIsOn("toggleRulers")) toggleRulers(); if (!layerIsOn("toggleRulers")) toggleRulers();
tip("Draw a curve to measure its area. Hold Shift to disallow path optimization", true); tip("Draw a curve to measure its area. Hold Shift to disallow path optimization", true);