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

add functional shorthands

Browse source
This commit is contained in:
Azgaar 2022-05-17 22:34:14 +03:00
parent 159c1aa3e3
commit fc62143eae
5 changed files with 162 additions and 157 deletions
Download patch file Download diff file Expand all files Collapse all files

3
index.html
View file

@ -6162,6 +6162,7 @@
<script src="libs/priority-queue.min.js"></script> <script src="libs/priority-queue.min.js"></script>
<script src="libs/delaunator.min.js"></script> <script src="libs/delaunator.min.js"></script>
<script src="utils/shorthands.js"></script>
<script src="utils/commonUtils.js"></script> <script src="utils/commonUtils.js"></script>
<script src="utils/arrayUtils.js?v=14052022"></script> <script src="utils/arrayUtils.js?v=14052022"></script>
<script src="utils/colorUtils.js"></script> <script src="utils/colorUtils.js"></script>
@ -6202,7 +6203,7 @@
<script defer src="modules/relief-icons.js"></script> <script defer src="modules/relief-icons.js"></script>
<script defer src="modules/ui/style.js"></script> <script defer src="modules/ui/style.js"></script>
<script defer src="modules/ui/editors.js?v=15052022"></script> <script defer src="modules/ui/editors.js?v=17052022"></script>
<script defer src="modules/ui/tools.js"></script> <script defer src="modules/ui/tools.js"></script>
<script defer src="modules/ui/world-configurator.js"></script> <script defer src="modules/ui/world-configurator.js"></script>
<script defer src="modules/ui/heightmap-editor.js"></script> <script defer src="modules/ui/heightmap-editor.js"></script>

291
modules/dynamic/editors/states-editor.js
View file

@ -1,4 +1,4 @@
const body = insertEditorHtml(); const $body = insertEditorHtml();
addListeners(); addListeners();
export function open() { export function open() {
@ -119,45 +119,36 @@ function insertEditorHtml() {
</div> </div>
</div>`; </div>`;
const dialogs = document.getElementById("dialogs"); byId("dialogs").insertAdjacentHTML("beforeend", editorHtml);
dialogs.insertAdjacentHTML("beforeend", editorHtml); return byId("statesBodySection");
return document.getElementById("statesBodySection");
} }
function addListeners() { function addListeners() {
document.getElementById("statesEditorRefresh").addEventListener("click", refreshStatesEditor); byId("statesEditorRefresh").on("click", refreshStatesEditor);
document.getElementById("statesEditStyle").addEventListener("click", () => editStyle("regions")); byId("statesEditStyle").on("click", () => editStyle("regions"));
document.getElementById("statesLegend").addEventListener("click", toggleLegend); byId("statesLegend").on("click", toggleLegend);
document.getElementById("statesPercentage").addEventListener("click", togglePercentageMode); byId("statesPercentage").on("click", togglePercentageMode);
document.getElementById("statesChart").addEventListener("click", showStatesChart); byId("statesChart").on("click", showStatesChart);
document.getElementById("statesRegenerate").addEventListener("click", openRegenerationMenu); byId("statesRegenerate").on("click", openRegenerationMenu);
document.getElementById("statesRegenerateBack").addEventListener("click", exitRegenerationMenu); byId("statesRegenerateBack").on("click", exitRegenerationMenu);
document.getElementById("statesRecalculate").addEventListener("click", () => recalculateStates(true)); byId("statesRecalculate").on("click", () => recalculateStates(true));
document.getElementById("statesRandomize").addEventListener("click", randomizeStatesExpansion); byId("statesRandomize").on("click", randomizeStatesExpansion);
document.getElementById("statesNeutral").addEventListener("input", changeStatesGrowthRate); byId("statesNeutral").on("input", changeStatesGrowthRate);
document.getElementById("statesNeutralNumber").addEventListener("change", changeStatesGrowthRate); byId("statesNeutralNumber").on("change", changeStatesGrowthRate);
document.getElementById("statesManually").addEventListener("click", enterStatesManualAssignent); byId("statesManually").on("click", enterStatesManualAssignent);
document.getElementById("statesManuallyApply").addEventListener("click", applyStatesManualAssignent); byId("statesManuallyApply").on("click", applyStatesManualAssignent);
document.getElementById("statesManuallyCancel").addEventListener("click", () => exitStatesManualAssignment()); byId("statesManuallyCancel").on("click", () => exitStatesManualAssignment(false));
document.getElementById("statesAdd").addEventListener("click", enterAddStateMode); byId("statesAdd").on("click", enterAddStateMode);
document.getElementById("statesExport").addEventListener("click", downloadStatesData); byId("statesExport").on("click", downloadStatesCsv);
document const $header = byId("statesHeader");
.getElementById("statesHeader") $header.queryAll(".sortable").forEach(element => element.on("click", () => sortLines(element)));
.querySelectorAll(".sortable")
.forEach(function (element) {
element.addEventListener("click", function () {
sortLines(this);
});
});
body.addEventListener("click", function (event) { $body.on("click", event => {
const element = event.target; const $element = event.target;
const classList = element.classList; const classList = $element.classList;
const line = element.parentNode; const state = +$element.parentNode?.dataset?.id;
const state = +line.dataset.id; if ($element.tagName === "FILL-BOX") stateChangeFill($element);
if (element.tagName === "FILL-BOX") stateChangeFill(element);
else if (classList.contains("name")) editStateName(state); else if (classList.contains("name")) editStateName(state);
else if (classList.contains("coaIcon")) editEmblem("state", "stateCOA" + state, pack.states[state]); else if (classList.contains("coaIcon")) editEmblem("state", "stateCOA" + state, pack.states[state]);
else if (classList.contains("icon-star-empty")) stateCapitalZoomIn(state); else if (classList.contains("icon-star-empty")) stateCapitalZoomIn(state);
@ -166,22 +157,22 @@ function addListeners() {
else if (classList.contains("icon-trash-empty")) stateRemovePrompt(state); else if (classList.contains("icon-trash-empty")) stateRemovePrompt(state);
}); });
body.addEventListener("input", function (ev) { $body.on("input", function (ev) {
const element = ev.target; const $element = ev.target;
const classList = element.classList; const classList = $element.classList;
const line = element.parentNode; const line = $element.parentNode;
const state = +line.dataset.id; const state = +line.dataset.id;
if (classList.contains("stateCapital")) stateChangeCapitalName(state, line, element.value); if (classList.contains("stateCapital")) stateChangeCapitalName(state, line, $element.value);
else if (classList.contains("cultureType")) stateChangeType(state, line, element.value); else if (classList.contains("cultureType")) stateChangeType(state, line, $element.value);
else if (classList.contains("statePower")) stateChangeExpansionism(state, line, element.value); else if (classList.contains("statePower")) stateChangeExpansionism(state, line, $element.value);
}); });
body.addEventListener("change", function (ev) { $body.on("change", function (ev) {
const element = ev.target; const $element = ev.target;
const classList = element.classList; const classList = $element.classList;
const line = element.parentNode; const line = $element.parentNode;
const state = +line.dataset.id; const state = +line.dataset.id;
if (classList.contains("stateCulture")) stateChangeCulture(state, line, element.value); if (classList.contains("stateCulture")) stateChangeCulture(state, line, $element.value);
}); });
} }
@ -194,10 +185,10 @@ function refreshStatesEditor() {
function statesEditorAddLines() { function statesEditorAddLines() {
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value; const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
const hidden = statesRegenerateButtons.style.display === "block" ? "" : "hidden"; // show/hide regenerate columns const hidden = statesRegenerateButtons.style.display === "block" ? "" : "hidden"; // show/hide regenerate columns
let lines = "", let lines = "";
totalArea = 0, let totalArea = 0;
totalPopulation = 0, let totalPopulation = 0;
totalBurgs = 0; let totalBurgs = 0;
for (const s of pack.states) { for (const s of pack.states) {
if (s.removed) continue; if (s.removed) continue;
@ -290,25 +281,26 @@ function statesEditorAddLines() {
<span data-tip="Remove the state" class="icon-trash-empty hide"></span> <span data-tip="Remove the state" class="icon-trash-empty hide"></span>
</div>`; </div>`;
} }
body.innerHTML = lines; $body.innerHTML = lines;
// update footer // update footer
statesFooterStates.innerHTML = pack.states.filter(s => s.i && !s.removed).length; byId("statesFooterStates").innerHTML = pack.states.filter(s => s.i && !s.removed).length;
statesFooterCells.innerHTML = pack.cells.h.filter(h => h >= 20).length; byId("statesFooterCells").innerHTML = pack.cells.h.filter(h => h >= 20).length;
statesFooterBurgs.innerHTML = totalBurgs; byId("statesFooterBurgs").innerHTML = totalBurgs;
statesFooterArea.innerHTML = si(totalArea) + unit; byId("statesFooterArea").innerHTML = si(totalArea) + unit;
statesFooterPopulation.innerHTML = si(totalPopulation); byId("statesFooterArea").dataset.area = totalArea;
statesFooterArea.dataset.area = totalArea; byId("statesFooterPopulation").innerHTML = si(totalPopulation);
statesFooterPopulation.dataset.population = totalPopulation; byId("statesFooterPopulation").dataset.population = totalPopulation;
body.querySelectorAll("div.states").forEach(el => { // add listeners
el.addEventListener("click", selectStateOnLineClick); $body.queryAll("div.states").forEach(el => {
el.addEventListener("mouseenter", ev => stateHighlightOn(ev)); el.on("click", selectStateOnLineClick);
el.addEventListener("mouseleave", ev => stateHighlightOff(ev)); el.on("mouseenter", stateHighlightOn);
el.on("mouseleave", stateHighlightOff);
}); });
if (body.dataset.type === "percentage") { if ($body.dataset.type === "percentage") {
body.dataset.type = "absolute"; $body.dataset.type = "absolute";
togglePercentageMode(); togglePercentageMode();
} }
applySorting(statesHeader); applySorting(statesHeader);
@ -350,15 +342,13 @@ function stateHighlightOn(event) {
.attr("opacity", 1) .attr("opacity", 1)
.attr("filter", "url(#blur1)"); .attr("filter", "url(#blur1)");
const l = path.node().getTotalLength(), const totalLength = path.node().getTotalLength();
dur = (l + 5000) / 2; const duration = (totalLength + 5000) / 2;
const i = d3.interpolateString("0," + l, l + "," + l); const interpolate = d3.interpolateString(`0, ${totalLength}`, `${totalLength}, ${totalLength}`);
path path
.transition() .transition()
.duration(dur) .duration(duration)
.attrTween("stroke-dasharray", function () { .attrTween("stroke-dasharray", () => interpolate);
return t => i(t);
});
} }
function stateHighlightOff() { function stateHighlightOff() {
@ -402,10 +392,10 @@ function editStateName(state) {
} }
const s = pack.states[state]; const s = pack.states[state];
document.getElementById("stateNameEditor").dataset.state = state; byId("stateNameEditor").dataset.state = state;
document.getElementById("stateNameEditorShort").value = s.name || ""; byId("stateNameEditorShort").value = s.name || "";
applyOption(stateNameEditorSelectForm, s.formName); applyOption(stateNameEditorSelectForm, s.formName);
document.getElementById("stateNameEditorFull").value = s.fullName || ""; byId("stateNameEditorFull").value = s.fullName || "";
$("#stateNameEditor").dialog({ $("#stateNameEditor").dialog({
resizable: false, resizable: false,
@ -426,23 +416,23 @@ function editStateName(state) {
modules.editStateName = true; modules.editStateName = true;
// add listeners // add listeners
document.getElementById("stateNameEditorShortCulture").addEventListener("click", regenerateShortNameCuture); byId("stateNameEditorShortCulture").on("click", regenerateShortNameCuture);
document.getElementById("stateNameEditorShortRandom").addEventListener("click", regenerateShortNameRandom); byId("stateNameEditorShortRandom").on("click", regenerateShortNameRandom);
document.getElementById("stateNameEditorAddForm").addEventListener("click", addCustomForm); byId("stateNameEditorAddForm").on("click", addCustomForm);
document.getElementById("stateNameEditorCustomForm").addEventListener("change", addCustomForm); byId("stateNameEditorCustomForm").on("change", addCustomForm);
document.getElementById("stateNameEditorFullRegenerate").addEventListener("click", regenerateFullName); byId("stateNameEditorFullRegenerate").on("click", regenerateFullName);
function regenerateShortNameCuture() { function regenerateShortNameCuture() {
const state = +stateNameEditor.dataset.state; const state = +stateNameEditor.dataset.state;
const culture = pack.states[state].culture; const culture = pack.states[state].culture;
const name = Names.getState(Names.getCultureShort(culture), culture); const name = Names.getState(Names.getCultureShort(culture), culture);
document.getElementById("stateNameEditorShort").value = name; byId("stateNameEditorShort").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("stateNameEditorShort").value = name; byId("stateNameEditorShort").value = name;
} }
function addCustomForm() { function addCustomForm() {
@ -455,9 +445,9 @@ function editStateName(state) {
} }
function regenerateFullName() { function regenerateFullName() {
const short = document.getElementById("stateNameEditorShort").value; const short = byId("stateNameEditorShort").value;
const form = document.getElementById("stateNameEditorSelectForm").value; const form = byId("stateNameEditorSelectForm").value;
document.getElementById("stateNameEditorFull").value = getFullName(); byId("stateNameEditorFull").value = getFullName();
function getFullName() { function getFullName() {
if (!form) return short; if (!form) return short;
@ -469,9 +459,9 @@ function editStateName(state) {
} }
function applyNameChange(s) { function applyNameChange(s) {
const nameInput = document.getElementById("stateNameEditorShort"); const nameInput = byId("stateNameEditorShort");
const formSelect = document.getElementById("stateNameEditorSelectForm"); const formSelect = byId("stateNameEditorSelectForm");
const fullNameInput = document.getElementById("stateNameEditorFull"); const fullNameInput = byId("stateNameEditorFull");
const nameChanged = nameInput.value !== s.name; const nameChanged = nameInput.value !== s.name;
const formChanged = formSelect.value !== s.formName; const formChanged = formSelect.value !== s.formName;
@ -497,7 +487,7 @@ function stateChangeCapitalName(state, line, value) {
const capital = pack.states[state].capital; const capital = pack.states[state].capital;
if (!capital) return; if (!capital) return;
pack.burgs[capital].name = value; pack.burgs[capital].name = value;
document.querySelector("#burgLabel" + capital).textContent = value; query("#burgLabel" + capital).textContent = value;
} }
function changePopulation(state) { function changePopulation(state) {
@ -636,7 +626,7 @@ function stateRemove(state) {
// remove emblem // remove emblem
const coaId = "stateCOA" + state; const coaId = "stateCOA" + state;
document.getElementById(coaId).remove(); byId(coaId).remove();
emblems.select(`#stateEmblems > use[data-i='${state}']`).remove(); emblems.select(`#stateEmblems > use[data-i='${state}']`).remove();
// remove provinces // remove provinces
@ -647,7 +637,7 @@ function stateRemove(state) {
}); });
const coaId = "provinceCOA" + p; const coaId = "provinceCOA" + p;
if (document.getElementById(coaId)) document.getElementById(coaId).remove(); if (byId(coaId)) byId(coaId).remove();
emblems.select(`#provinceEmblems > use[data-i='${p}']`).remove(); emblems.select(`#provinceEmblems > use[data-i='${p}']`).remove();
const g = provs.select("#provincesBody"); const g = provs.select("#provincesBody");
g.select("#province" + p).remove(); g.select("#province" + p).remove();
@ -691,21 +681,21 @@ function toggleLegend() {
} }
function togglePercentageMode() { function togglePercentageMode() {
if (body.dataset.type === "absolute") { if ($body.dataset.type === "absolute") {
body.dataset.type = "percentage"; $body.dataset.type = "percentage";
const totalCells = +statesFooterCells.innerHTML; const totalCells = +statesFooterCells.innerHTML;
const totalBurgs = +statesFooterBurgs.innerHTML; const totalBurgs = +statesFooterBurgs.innerHTML;
const totalArea = +statesFooterArea.dataset.area; const totalArea = +statesFooterArea.dataset.area;
const totalPopulation = +statesFooterPopulation.dataset.population; const totalPopulation = +statesFooterPopulation.dataset.population;
body.querySelectorAll(":scope > div").forEach(function (el) { $body.queryAll(":scope > div").forEach(function (el) {
el.querySelector(".stateCells").innerHTML = rn((+el.dataset.cells / totalCells) * 100) + "%"; el.query(".stateCells").innerHTML = rn((+el.dataset.cells / totalCells) * 100) + "%";
el.querySelector(".stateBurgs").innerHTML = rn((+el.dataset.burgs / totalBurgs) * 100) + "%"; el.query(".stateBurgs").innerHTML = rn((+el.dataset.burgs / totalBurgs) * 100) + "%";
el.querySelector(".stateArea").innerHTML = rn((+el.dataset.area / totalArea) * 100) + "%"; el.query(".stateArea").innerHTML = rn((+el.dataset.area / totalArea) * 100) + "%";
el.querySelector(".statePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%"; el.query(".statePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%";
}); });
} else { } else {
body.dataset.type = "absolute"; $body.dataset.type = "absolute";
statesEditorAddLines(); statesEditorAddLines();
} }
} }
@ -748,7 +738,7 @@ function showStatesChart() {
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.attr("dominant-baseline", "central"); .attr("dominant-baseline", "central");
const graph = svg.append("g").attr("transform", `translate(-50, 0)`); const graph = svg.append("g").attr("transform", `translate(-50, 0)`);
document.getElementById("statesTreeType").addEventListener("change", updateChart); byId("statesTreeType").on("change", updateChart);
treeLayout(root); treeLayout(root);
@ -807,7 +797,7 @@ function showStatesChart() {
function hideInfo(ev) { function hideInfo(ev) {
stateHighlightOff(ev); stateHighlightOff(ev);
if (!document.getElementById("statesInfo")) return; if (!byId("statesInfo")) return;
statesInfo.innerHTML = "&#8205;"; statesInfo.innerHTML = "&#8205;";
d3.select(ev.target).select("circle").classed("selected", 0); d3.select(ev.target).select("circle").classed("selected", 0);
} }
@ -855,10 +845,10 @@ function showStatesChart() {
} }
function openRegenerationMenu() { function openRegenerationMenu() {
statesBottom.querySelectorAll(":scope > button").forEach(el => (el.style.display = "none")); statesBottom.queryAll(":scope > button").forEach(el => (el.style.display = "none"));
statesRegenerateButtons.style.display = "block"; statesRegenerateButtons.style.display = "block";
statesEditor.querySelectorAll(".show").forEach(el => el.classList.remove("hidden")); statesEditor.queryAll(".show").forEach(el => el.classList.remove("hidden"));
$("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}}); $("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
} }
@ -878,8 +868,8 @@ function recalculateStates(must) {
function changeStatesGrowthRate() { function changeStatesGrowthRate() {
const growthRate = +this.value; const growthRate = +this.value;
document.getElementById("statesNeutral").value = growthRate; byId("statesNeutral").value = growthRate;
document.getElementById("statesNeutralNumber").value = growthRate; byId("statesNeutralNumber").value = growthRate;
statesNeutral = growthRate; statesNeutral = growthRate;
tip("Growth rate: " + growthRate); tip("Growth rate: " + growthRate);
recalculateStates(false); recalculateStates(false);
@ -890,15 +880,15 @@ function randomizeStatesExpansion() {
if (!s.i || s.removed) return; if (!s.i || s.removed) return;
const expansionism = rn(Math.random() * 4 + 1, 1); const expansionism = rn(Math.random() * 4 + 1, 1);
s.expansionism = expansionism; s.expansionism = expansionism;
body.querySelector("div.states[data-id='" + s.i + "'] > input.statePower").value = expansionism; $body.query("div.states[data-id='" + s.i + "'] > input.statePower").value = expansionism;
}); });
recalculateStates(true, true); recalculateStates(true, true);
} }
function exitRegenerationMenu() { function exitRegenerationMenu() {
statesBottom.querySelectorAll(":scope > button").forEach(el => (el.style.display = "inline-block")); statesBottom.queryAll(":scope > button").forEach(el => (el.style.display = "inline-block"));
statesRegenerateButtons.style.display = "none"; statesRegenerateButtons.style.display = "none";
statesEditor.querySelectorAll(".show").forEach(el => el.classList.add("hidden")); statesEditor.queryAll(".show").forEach(el => el.classList.add("hidden"));
$("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}}); $("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
} }
@ -906,25 +896,29 @@ function enterStatesManualAssignent() {
if (!layerIsOn("toggleStates")) toggleStates(); if (!layerIsOn("toggleStates")) toggleStates();
customization = 2; customization = 2;
statesBody.append("g").attr("id", "temp"); statesBody.append("g").attr("id", "temp");
document.querySelectorAll("#statesBottom > button").forEach(el => (el.style.display = "none")); queryAll("#statesBottom > button").forEach(el => (el.style.display = "none"));
document.getElementById("statesManuallyButtons").style.display = "inline-block"; byId("statesManuallyButtons").style.display = "inline-block";
document.getElementById("statesHalo").style.display = "none"; byId("statesHalo").style.display = "none";
statesEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden")); statesEditor.queryAll(".hide").forEach(el => el.classList.add("hidden"));
statesFooter.style.display = "none"; statesFooter.style.display = "none";
body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none")); $body.queryAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
$("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}}); $("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
tip("Click on state to select, drag the circle to change state", true); tip("Click on state to select, drag the circle to change state", true);
viewbox.style("cursor", "crosshair").on("click", selectStateOnMapClick).call(d3.drag().on("start", dragStateBrush)).on("touchmove mousemove", moveStateBrush); byId("viewbox")
.style("cursor", "crosshair")
.on("click", selectStateOnMapClick)
.call(d3.drag().on("start", dragStateBrush))
.on("touchmove mousemove", moveStateBrush);
body.querySelector("div").classList.add("selected"); $body.query("div").classList.add("selected");
} }
function selectStateOnLineClick() { function selectStateOnLineClick() {
if (customization !== 2) return; if (customization !== 2) return;
if (this.parentNode.id !== "statesBodySection") return; if (this.parentNode.id !== "statesBodySection") return;
body.querySelector("div.selected").classList.remove("selected"); $body.query("div.selected").classList.remove("selected");
this.classList.add("selected"); this.classList.add("selected");
} }
@ -936,8 +930,8 @@ function selectStateOnMapClick() {
const assigned = statesBody.select("#temp").select("polygon[data-cell='" + i + "']"); const assigned = statesBody.select("#temp").select("polygon[data-cell='" + i + "']");
const state = assigned.size() ? +assigned.attr("data-state") : pack.cells.state[i]; const state = assigned.size() ? +assigned.attr("data-state") : pack.cells.state[i];
body.querySelector("div.selected").classList.remove("selected"); $body.query("div.selected").classList.remove("selected");
body.querySelector("div[data-id='" + state + "']").classList.add("selected"); $body.query("div[data-id='" + state + "']").classList.add("selected");
} }
function dragStateBrush() { function dragStateBrush() {
@ -957,9 +951,9 @@ function dragStateBrush() {
// change state within selection // change state within selection
function changeStateForSelection(selection) { function changeStateForSelection(selection) {
const temp = statesBody.select("#temp"); const temp = statesBody.select("#temp");
const selected = body.querySelector("div.selected");
const stateNew = +selected.dataset.id; const $selected = $body.query("div.selected");
const stateNew = +$selected.dataset.id;
const color = pack.states[stateNew].color || "#ffffff"; const color = pack.states[stateNew].color || "#ffffff";
selection.forEach(function (i) { selection.forEach(function (i) {
@ -1007,7 +1001,7 @@ function applyStatesManualAssignent() {
if (layerIsOn("toggleProvinces")) drawProvinces(); if (layerIsOn("toggleProvinces")) drawProvinces();
} }
exitStatesManualAssignment(); exitStatesManualAssignment(false);
} }
function adjustProvinces(affectedProvinces) { function adjustProvinces(affectedProvinces) {
@ -1146,18 +1140,18 @@ function exitStatesManualAssignment(close) {
customization = 0; customization = 0;
statesBody.select("#temp").remove(); statesBody.select("#temp").remove();
removeCircle(); removeCircle();
document.querySelectorAll("#statesBottom > button").forEach(el => (el.style.display = "inline-block")); queryAll("#statesBottom > button").forEach(el => (el.style.display = "inline-block"));
document.getElementById("statesManuallyButtons").style.display = "none"; byId("statesManuallyButtons").style.display = "none";
document.getElementById("statesHalo").style.display = "block"; byId("statesHalo").style.display = "block";
statesEditor.querySelectorAll(".hide:not(.show)").forEach(el => el.classList.remove("hidden")); statesEditor.queryAll(".hide:not(.show)").forEach(el => el.classList.remove("hidden"));
statesFooter.style.display = "block"; statesFooter.style.display = "block";
body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all")); $body.queryAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
if (!close) $("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}}); if (!close) $("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
restoreDefaultEvents(); restoreDefaultEvents();
clearMainTip(); clearMainTip();
const selected = body.querySelector("div.selected"); const selected = $body.query("div.selected");
if (selected) selected.classList.remove("selected"); if (selected) selected.classList.remove("selected");
} }
@ -1170,7 +1164,7 @@ function enterAddStateMode() {
this.classList.add("pressed"); this.classList.add("pressed");
tip("Click on the map to create a new capital or promote an existing burg", true); tip("Click on the map to create a new capital or promote an existing burg", true);
viewbox.style("cursor", "crosshair").on("click", addState); viewbox.style("cursor", "crosshair").on("click", addState);
body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none")); $body.queryAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
} }
function addState() { function addState() {
@ -1284,41 +1278,30 @@ function exitAddStateMode() {
customization = 0; customization = 0;
restoreDefaultEvents(); restoreDefaultEvents();
clearMainTip(); clearMainTip();
body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all")); $body.queryAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
if (statesAdd.classList.contains("pressed")) statesAdd.classList.remove("pressed"); if (statesAdd.classList.contains("pressed")) statesAdd.classList.remove("pressed");
} }
function downloadStatesData() { function downloadStatesCsv() {
const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value; const unit = byId("areaUnit").value === "square" ? byId("distanceUnitInput").value + "2" : byId("areaUnit").value;
let data = const headers = `Id,State,Full Name,Form,Color,Capital,Culture,Type,Expansionism,Cells,Burgs,Area ${unit},Total Population,Rural Population,Urban Population`;
"Id,State,Full Name,Form,Color,Capital,Culture,Type,Expansionism,Cells,Burgs,Area " + unit + ",Total Population,Rural Population,Urban Population\n"; // headers const lines = Array.from($body.queryAll(":scope > div"));
body.querySelectorAll(":scope > div").forEach(function (el) { const statesData = lines.map($line => {
const key = parseInt(el.dataset.id); const {id, name, form, color, capital, culture, type, expansionism, cells, burgs, area, population} = $line.dataset;
const statePack = pack.states[key]; const {fullName = "", rural, urban} = pack.states[+id];
data += el.dataset.id + ","; const ruralPopulation = Math.round(rural * populationRate);
data += el.dataset.name + ","; const urbanPopulation = Math.round(urban * populationRate * urbanization);
data += (statePack.fullName ? statePack.fullName : "") + ","; return [id, name, fullName, form, color, capital, culture, type, expansionism, cells, burgs, area, population, ruralPopulation, urbanPopulation].join(",");
data += el.dataset.form + ",";
data += el.dataset.color + ",";
data += el.dataset.capital + ",";
data += el.dataset.culture + ",";
data += el.dataset.type + ",";
data += el.dataset.expansionism + ",";
data += el.dataset.cells + ",";
data += el.dataset.burgs + ",";
data += el.dataset.area + ",";
data += el.dataset.population + ",";
data += `${Math.round(statePack.rural * populationRate)},`;
data += `${Math.round(statePack.urban * populationRate * urbanization)}\n`;
}); });
const csvData = [headers].concat(statesData).join("\n");
const name = getFileName("States") + ".csv"; const name = getFileName("States") + ".csv";
downloadFile(data, name); downloadFile(csvData, name);
} }
function closeStatesEditor() { function closeStatesEditor() {
if (customization === 2) exitStatesManualAssignment("close"); if (customization === 2) exitStatesManualAssignment(true);
if (customization === 3) exitAddStateMode(); if (customization === 3) exitAddStateMode();
debug.selectAll(".highlight").remove(); debug.selectAll(".highlight").remove();
body.innerHTML = ""; $body.innerHTML = "";
} }

2
modules/ui/editors.js
View file

@ -1097,6 +1097,6 @@ function refreshAllEditors() {
// dynamically loaded editors // dynamically loaded editors
async function editStates() { async function editStates() {
if (customization) return; if (customization) return;
const StateEditor = await import("../dynamic/editors/states-editor.js"); const StateEditor = await import("../dynamic/editors/states-editor.js?v=17052022");
StateEditor.open(); StateEditor.open();
} }

21
utils/shorthands.js Normal file
View file

@ -0,0 +1,21 @@
const query = document.querySelector.bind(document);
const queryAll = document.querySelectorAll.bind(document);
const byId = document.getElementById.bind(document);
const byClass = document.getElementsByClassName.bind(document);
const byTag = document.getElementsByTagName.bind(document);
Node.prototype.query = function (selector) {
return this.querySelector(selector);
};
Node.prototype.queryAll = function (selector) {
return this.querySelectorAll(selector);
};
Node.prototype.on = function (name, fn, options) {
this.addEventListener(name, fn, options);
};
Node.prototype.off = function (name, fn) {
this.removeEventListener(name, fn);
};

2
versioning.js
View file

@ -1,7 +1,7 @@
"use strict"; "use strict";
// version and caching control // version and caching control
const version = "1.82.01"; // generator version, update each time const version = "1.82.02"; // generator version, update each time
{ {
document.title += " v" + version; document.title += " v" + version;