`;
@@ -190,27 +190,25 @@ function culturesEditorAddLines() {
lines += /* html */ `
-
${getTypeOptions(
- c.type
- )}
-
${getBaseOptions(
- c.base
- )}
+
${getTypeOptions(c.type)}
+
${getBaseOptions(c.base)}
${c.cells}
@@ -226,9 +224,8 @@ function culturesEditorAddLines() {
${si(area)} ${unit}
-
${si(
- population
- )}
+
${si(population)}
${getShapeOptions(selectShape, c.shield)}
@@ -257,7 +254,7 @@ function culturesEditorAddLines() {
$body.querySelectorAll("div > select.cultureEmblems").forEach(el => el.on("change", cultureChangeEmblemsShape));
$body.querySelectorAll("div > div.culturePopulation").forEach(el => el.on("click", changePopulation));
$body.querySelectorAll("div > span.icon-arrows-cw").forEach(el => el.on("click", cultureRegenerateBurgs));
- $body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.on("click", cultureRemove));
+ $body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.on("click", cultureRemovePrompt));
const $culturesHeader = byId("culturesHeader");
$culturesHeader.querySelector("div[data-sortby='emblems']").style.display = selectShape ? "inline-block" : "none";
@@ -350,16 +347,16 @@ function cultureHighlightOff(event) {
function cultureChangeColor() {
const $el = this;
const currentFill = $el.getAttribute("fill");
- const culture = +$el.parentNode.dataset.id;
+ const cultureId = +$el.parentNode.dataset.id;
const callback = newFill => {
$el.fill = newFill;
- pack.cultures[culture].color = newFill;
+ pack.cultures[cultureId].color = newFill;
cults
- .select("#culture" + culture)
+ .select("#culture" + cultureId)
.attr("fill", newFill)
.attr("stroke", newFill);
- debug.select("#cultureCenter" + culture).attr("fill", newFill);
+ debug.select("#cultureCenter" + cultureId).attr("fill", newFill);
};
openPicker(currentFill, callback);
@@ -451,16 +448,20 @@ function changePopulation() {
const rural = rn(culture.rural * populationRate);
const urban = rn(culture.urban * populationRate * urbanization);
const total = rural + urban;
- const l = n => Number(n).toLocaleString();
+ const format = n => Number(n).toLocaleString();
const burgs = pack.burgs.filter(b => !b.removed && b.culture === cultureId);
- alertMessage.innerHTML = /* html */ `Rural:
Urban:
-
-
Total population: ${l(total)} ⇒ ${l(
- total
- )} (100 %)
`;
+ alertMessage.innerHTML = /* html */ `
+
Change population of all cells assigned to the culture
+
+ Rural:
+
Total population: ${format(total)} ⇒ ${format(total)}
+ (100 %)
+
+
`;
const update = function () {
const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
@@ -552,23 +553,15 @@ function removeCulture(cultureId) {
refreshCulturesEditor();
}
-function cultureRemove() {
- if (customization === 4) return;
- const cultureId = +this.parentNode.dataset.id;
+function cultureRemovePrompt() {
+ if (customization) return;
- alertMessage.innerHTML = "Are you sure you want to remove the culture?
This action cannot be reverted";
- $("#alert").dialog({
- resizable: false,
+ const cultureId = +this.parentNode.dataset.id;
+ confirmationDialog({
title: "Remove culture",
- buttons: {
- Remove: function () {
- removeCulture(cultureId);
- $(this).dialog("close");
- },
- Cancel: function () {
- $(this).dialog("close");
- }
- }
+ message: "Are you sure you want to remove the culture?
This action cannot be reverted",
+ confirm: "Remove",
+ onConfirm: () => removeCulture(cultureId)
});
}
@@ -608,22 +601,21 @@ function drawCultureCenters() {
}
function cultureCenterDrag() {
- const el = d3.select(this);
- const c = +this.id.slice(13);
+ const $el = d3.select(this);
+ const cultureId = +this.id.slice(13);
d3.event.on("drag", () => {
- el.attr("cx", d3.event.x).attr("cy", d3.event.y);
- const cell = findCell(d3.event.x, d3.event.y);
+ const {x, y} = d3.event;
+ $el.attr("cx", x).attr("cy", y);
+ const cell = findCell(x, y);
if (pack.cells.h[cell] < 20) return; // ignore dragging on water
- pack.cultures[c].center = cell;
+ pack.cultures[cultureId].center = cell;
recalculateCultures();
});
}
function toggleLegend() {
- if (legend.selectAll("*").size()) {
- clearLegend();
- return;
- } // hide legend
+ if (legend.selectAll("*").size()) return clearLegend();
+
const data = pack.cultures
.filter(c => c.i && !c.removed && c.cells)
.sort((a, b) => b.area - a.area)
@@ -634,14 +626,15 @@ function toggleLegend() {
function togglePercentageMode() {
if ($body.dataset.type === "absolute") {
$body.dataset.type = "percentage";
- const totalCells = +culturesFooterCells.innerHTML;
- const totalArea = +culturesFooterArea.dataset.area;
- const totalPopulation = +culturesFooterPopulation.dataset.population;
+ const totalCells = +byId("culturesFooterCells").innerText;
+ const totalArea = +byId("culturesFooterArea").dataset.area;
+ const totalPopulation = +byId("culturesFooterPopulation").dataset.population;
$body.querySelectorAll(":scope > div").forEach(function (el) {
- el.querySelector(".cultureCells").innerHTML = rn((+el.dataset.cells / totalCells) * 100) + "%";
- el.querySelector(".cultureArea").innerHTML = rn((+el.dataset.area / totalArea) * 100) + "%";
- el.querySelector(".culturePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%";
+ const {cells, area, population} = el.dataset;
+ el.querySelector(".cultureCells").innerText = rn((+cells / totalCells) * 100) + "%";
+ el.querySelector(".cultureArea").innerText = rn((+area / totalArea) * 100) + "%";
+ el.querySelector(".culturePopulation").innerText = rn((+population / totalPopulation) * 100) + "%";
});
} else {
$body.dataset.type = "absolute";
diff --git a/modules/dynamic/editors/religions-editor.js b/modules/dynamic/editors/religions-editor.js
new file mode 100644
index 00000000..cadf018c
--- /dev/null
+++ b/modules/dynamic/editors/religions-editor.js
@@ -0,0 +1,928 @@
+const $body = insertEditorHtml();
+addListeners();
+
+export function open() {
+ closeDialogs("#religionsEditor, .stable");
+ if (!layerIsOn("toggleCultures")) toggleCultures();
+ if (layerIsOn("toggleStates")) toggleStates();
+ if (layerIsOn("toggleBiomes")) toggleBiomes();
+ if (layerIsOn("toggleReligions")) toggleReligions();
+ if (layerIsOn("toggleProvinces")) toggleProvinces();
+
+ refreshReligionsEditor();
+ drawReligionCenters();
+
+ $("#religionsEditor").dialog({
+ title: "Religions Editor",
+ resizable: false,
+ close: closeReligionsEditor,
+ position: {my: "right top", at: "right-10 top+10", of: "svg"}
+ });
+ $body.focus();
+}
+
+function insertEditorHtml() {
+ const editorHtml = /* html */ `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Brush size:
+
+
+
+
+
`;
+
+ byId("dialogs").insertAdjacentHTML("beforeend", editorHtml);
+ return byId("religionsBody");
+}
+
+function addListeners() {
+ applySortingByHeader("religionsHeader");
+
+ byId("religionsEditorRefresh").on("click", refreshReligionsEditor);
+ byId("religionsEditStyle").on("click", () => editStyle("relig"));
+ byId("religionsLegend").on("click", toggleLegend);
+ byId("religionsPercentage").on("click", togglePercentageMode);
+ byId("religionsHeirarchy").on("click", showHierarchy);
+ byId("religionsExtinct").on("click", toggleExtinct);
+ byId("religionsManually").on("click", enterReligionsManualAssignent);
+ byId("religionsManuallyApply").on("click", applyReligionsManualAssignent);
+ byId("religionsManuallyCancel").on("click", () => exitReligionsManualAssignment());
+ byId("religionsAdd").on("click", enterAddReligionMode);
+ byId("religionsExport").on("click", downloadReligionsCsv);
+}
+
+function refreshReligionsEditor() {
+ religionsCollectStatistics();
+ religionsEditorAddLines();
+}
+
+function religionsCollectStatistics() {
+ const {cells, religions, burgs} = pack;
+ religions.forEach(r => {
+ r.cells = r.area = r.rural = r.urban = 0;
+ });
+
+ for (const i of cells.i) {
+ if (cells.h[i] < 20) continue;
+ const religionId = cells.religion[i];
+ religions[religionId].cells += 1;
+ religions[religionId].area += cells.area[i];
+ religions[religionId].rural += cells.pop[i];
+ const burgId = cells.burg[i];
+ if (burgId) religions[religionId].urban += burgs[burgId].population;
+ }
+}
+
+// add line for each religion
+function religionsEditorAddLines() {
+ const unit = " " + getAreaUnit();
+ let lines = "";
+ let totalArea = 0;
+ let totalPopulation = 0;
+
+ for (const r of pack.religions) {
+ if (r.removed) continue;
+ if (r.i && !r.cells && $body.dataset.extinct !== "show") continue; // hide extinct religions
+
+ const area = getArea(r.area);
+ const rural = r.rural * populationRate;
+ const urban = r.urban * populationRate * urbanization;
+ const population = rn(rural + urban);
+ const populationTip = `Believers: ${si(population)}; Rural areas: ${si(rural)}; Urban areas: ${si(
+ urban
+ )}. Click to change`;
+ totalArea += area;
+ totalPopulation += population;
+
+ if (!r.i) {
+ // No religion (neutral) line
+ lines += /* html */ `
+
+
+
+ ${getTypeOptions(r.type)}
+
+
+
+
+
+
${si(area) + unit}
+
+
${si(population)}
+
`;
+ continue;
+ }
+
+ lines += /* html */ `
+
+
+
+ ${getTypeOptions(r.type)}
+
+
+
+
+
+
${si(area) + unit}
+
+
${si(population)}
+
+
`;
+ }
+ $body.innerHTML = lines;
+
+ // update footer
+ const validReligions = pack.religions.filter(r => r.i && !r.removed);
+ byId("religionsOrganized").innerHTML = validReligions.filter(r => r.type === "Organized").length;
+ byId("religionsHeresies").innerHTML = validReligions.filter(r => r.type === "Heresy").length;
+ byId("religionsCults").innerHTML = validReligions.filter(r => r.type === "Cult").length;
+ byId("religionsFolk").innerHTML = validReligions.filter(r => r.type === "Folk").length;
+ byId("religionsFooterArea").innerHTML = si(totalArea) + unit;
+ byId("religionsFooterPopulation").innerHTML = si(totalPopulation);
+ byId("religionsFooterArea").dataset.area = totalArea;
+ byId("religionsFooterPopulation").dataset.population = totalPopulation;
+
+ // add listeners
+ $body.querySelectorAll("div.religions").forEach(el => el.on("mouseenter", religionHighlightOn));
+ $body.querySelectorAll("div.religions").forEach(el => el.on("mouseleave", religionHighlightOff));
+ $body.querySelectorAll("div.states").forEach(el => el.on("click", selectReligionOnLineClick));
+ $body.querySelectorAll("fill-box").forEach(el => el.on("click", religionChangeColor));
+ $body.querySelectorAll("div > input.religionName").forEach(el => el.on("input", religionChangeName));
+ $body.querySelectorAll("div > select.religionType").forEach(el => el.on("change", religionChangeType));
+ $body.querySelectorAll("div > input.religionForm").forEach(el => el.on("input", religionChangeForm));
+ $body.querySelectorAll("div > input.religionDeity").forEach(el => el.on("input", religionChangeDeity));
+ $body.querySelectorAll("div > span.icon-arrows-cw").forEach(el => el.on("click", regenerateDeity));
+ $body.querySelectorAll("div > div.religionPopulation").forEach(el => el.on("click", changePopulation));
+ $body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.on("click", religionRemovePrompt));
+
+ if ($body.dataset.type === "percentage") {
+ $body.dataset.type = "absolute";
+ togglePercentageMode();
+ }
+ applySorting(religionsHeader);
+ $("#religionsEditor").dialog({width: fitContent()});
+}
+
+function getTypeOptions(type) {
+ let options = "";
+ const types = ["Folk", "Organized", "Cult", "Heresy"];
+ types.forEach(t => (options += `
${t} `));
+ return options;
+}
+
+function religionHighlightOn(event) {
+ const religionId = Number(event.id || event.target.dataset.id);
+ const $info = byId("religionInfo");
+ if ($info) {
+ d3.select("#hierarchy").select(`g[data-id='${religionId}']`).classed("selected", 1);
+ const {name, type, form, rural, urban} = pack.religions[religionId];
+
+ const getTypeText = () => {
+ if (name.includes(type)) return "";
+ if (form.includes(type)) return "";
+ if (type === "Folk" || type === "Organized") return `. ${type} religion`;
+ return `. ${type}`;
+ };
+ const formText = form === type ? "" : ". " + form;
+ const population = rural * populationRate + urban * populationRate * urbanization;
+ const populationText = population > 0 ? si(rn(population)) + " people" : "Extinct";
+
+ $info.innerHTML = `${name}${getTypeText()}${formText}. ${populationText}`;
+ tip("Drag to other node to add parent, click to edit");
+ }
+
+ const $el = $body.querySelector(`div[data-id='${religionId}']`);
+ if ($el) $el.classList.add("active");
+
+ if (!layerIsOn("toggleReligions")) return;
+ if (customization) return;
+
+ const animate = d3.transition().duration(1500).ease(d3.easeSinIn);
+ relig
+ .select("#religion" + religionId)
+ .raise()
+ .transition(animate)
+ .attr("stroke-width", 2.5)
+ .attr("stroke", "#c13119");
+ debug
+ .select("#religionsCenter" + religionId)
+ .raise()
+ .transition(animate)
+ .attr("r", 8)
+ .attr("stroke-width", 2)
+ .attr("stroke", "#c13119");
+}
+
+function religionHighlightOff(event) {
+ const religionId = Number(event.id || event.target.dataset.id);
+ const $info = byId("religionInfo");
+ if ($info) {
+ d3.select("#hierarchy").select(`g[data-id='${religionId}']`).classed("selected", 0);
+ $info.innerHTML = "";
+ tip("");
+ }
+
+ const $el = $body.querySelector(`div[data-id='${religionId}']`);
+ if ($el) $el.classList.remove("active");
+
+ relig
+ .select("#religion" + religionId)
+ .transition()
+ .attr("stroke-width", null)
+ .attr("stroke", null);
+ debug
+ .select("#religionsCenter" + religionId)
+ .transition()
+ .attr("r", 4)
+ .attr("stroke-width", 1.2)
+ .attr("stroke", null);
+}
+
+function religionChangeColor() {
+ const $el = this;
+ const currentFill = $el.getAttribute("fill");
+ const religionId = +$el.parentNode.dataset.id;
+
+ const callback = newFill => {
+ $el.fill = newFill;
+ pack.religions[religionId].color = newFill;
+ relig.select("#religion" + religionId).attr("fill", newFill);
+ debug.select("#religionsCenter" + religionId).attr("fill", newFill);
+ };
+
+ openPicker(currentFill, callback);
+}
+
+function religionChangeName() {
+ const religionId = +this.parentNode.dataset.id;
+ this.parentNode.dataset.name = this.value;
+ pack.religions[religionId].name = this.value;
+ pack.religions[religionId].code = abbreviate(
+ this.value,
+ pack.religions.map(c => c.code)
+ );
+}
+
+function religionChangeType() {
+ const religionId = +this.parentNode.dataset.id;
+ this.parentNode.dataset.type = this.value;
+ pack.religions[religionId].type = this.value;
+}
+
+function religionChangeForm() {
+ const religionId = +this.parentNode.dataset.id;
+ this.parentNode.dataset.form = this.value;
+ pack.religions[religionId].form = this.value;
+}
+
+function religionChangeDeity() {
+ const religionId = +this.parentNode.dataset.id;
+ this.parentNode.dataset.deity = this.value;
+ pack.religions[religionId].deity = this.value;
+}
+
+function regenerateDeity() {
+ const religionId = +this.parentNode.dataset.id;
+ const cultureId = pack.religions[religionId].culture;
+ const deity = Religions.getDeityName(cultureId);
+ this.parentNode.dataset.deity = deity;
+ pack.religions[religionId].deity = deity;
+ this.nextElementSibling.value = deity;
+}
+
+function changePopulation() {
+ const religionId = +this.parentNode.dataset.id;
+ const religion = pack.religions[religionId];
+ if (!religion.cells) return tip("Religion does not have any cells, cannot change population", false, "error");
+
+ const rural = rn(religion.rural * populationRate);
+ const urban = rn(religion.urban * populationRate * urbanization);
+ const total = rural + urban;
+ const format = n => Number(n).toLocaleString();
+ const burgs = pack.burgs.filter(b => !b.removed && pack.cells.religion[b.cell] === religionId);
+
+ alertMessage.innerHTML = /* html */ `
+
All population of religion territory is considered believers of this religion. It means believers number change will directly affect population
+
+ Rural:
+
Total population: ${format(total)} ⇒ ${format(total)}
+ (100 %)
+
+
`;
+
+ const update = function () {
+ const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
+ if (isNaN(totalNew)) return;
+ totalPop.innerHTML = format(totalNew);
+ totalPopPerc.innerHTML = rn((totalNew / total) * 100);
+ };
+
+ ruralPop.oninput = () => update();
+ urbanPop.oninput = () => update();
+
+ $("#alert").dialog({
+ resizable: false,
+ title: "Change believers number",
+ width: "24em",
+ buttons: {
+ Apply: function () {
+ applyPopulationChange();
+ $(this).dialog("close");
+ },
+ Cancel: function () {
+ $(this).dialog("close");
+ }
+ },
+ position: {my: "center", at: "center", of: "svg"}
+ });
+
+ function applyPopulationChange() {
+ const ruralChange = ruralPop.value / rural;
+ if (isFinite(ruralChange) && ruralChange !== 1) {
+ const cells = pack.cells.i.filter(i => pack.cells.religion[i] === religionId);
+ cells.forEach(i => (pack.cells.pop[i] *= ruralChange));
+ }
+ if (!isFinite(ruralChange) && +ruralPop.value > 0) {
+ const points = ruralPop.value / populationRate;
+ const cells = pack.cells.i.filter(i => pack.cells.religion[i] === religionId);
+ const pop = rn(points / cells.length);
+ cells.forEach(i => (pack.cells.pop[i] = pop));
+ }
+
+ const urbanChange = urbanPop.value / urban;
+ if (isFinite(urbanChange) && urbanChange !== 1) {
+ burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
+ }
+ if (!isFinite(urbanChange) && +urbanPop.value > 0) {
+ const points = urbanPop.value / populationRate / urbanization;
+ const population = rn(points / burgs.length, 4);
+ burgs.forEach(b => (b.population = population));
+ }
+
+ refreshReligionsEditor();
+ }
+}
+
+function religionRemovePrompt() {
+ if (customization) return;
+
+ const religionId = +this.parentNode.dataset.id;
+ confirmationDialog({
+ title: "Remove religion",
+ message: "Are you sure you want to remove the religion?
This action cannot be reverted",
+ confirm: "Remove",
+ onConfirm: () => removeReligion(religionId)
+ });
+}
+
+function removeReligion(religionId) {
+ relig.select("#religion" + religionId).remove();
+ relig.select("#religion-gap" + religionId).remove();
+ debug.select("#religionsCenter" + religionId).remove();
+
+ pack.cells.religion.forEach((r, i) => {
+ if (r === religionId) pack.cells.religion[i] = 0;
+ });
+ pack.religions[religionId].removed = true;
+
+ pack.religions
+ .filter(r => r.i && !r.removed)
+ .forEach(r => {
+ r.origins = r.origins.filter(origin => origin !== religionId);
+ if (!r.origins.length) r.origins = [0];
+ });
+
+ refreshReligionsEditor();
+}
+
+function drawReligionCenters() {
+ debug.select("#religionCenters").remove();
+ const religionCenters = debug
+ .append("g")
+ .attr("id", "religionCenters")
+ .attr("stroke-width", 1.2)
+ .attr("stroke", "#444444")
+ .style("cursor", "move");
+
+ const data = pack.religions.filter(r => r.i && r.center && r.cells && !r.removed);
+ religionCenters
+ .selectAll("circle")
+ .data(data)
+ .enter()
+ .append("circle")
+ .attr("id", d => "religionsCenter" + d.i)
+ .attr("data-id", d => d.i)
+ .attr("r", 4)
+ .attr("fill", d => d.color)
+ .attr("cx", d => pack.cells.p[d.center][0])
+ .attr("cy", d => pack.cells.p[d.center][1])
+ .on("mouseenter", d => {
+ tip(d.name + ". Drag to move the religion center", true);
+ religionHighlightOn(event);
+ })
+ .on("mouseleave", d => {
+ tip("", true);
+ religionHighlightOff(event);
+ })
+ .call(d3.drag().on("start", religionCenterDrag));
+}
+
+function religionCenterDrag() {
+ const $el = d3.select(this);
+ const religionId = +this.dataset.id;
+ d3.event.on("drag", () => {
+ const {x, y} = d3.event;
+ $el.attr("cx", x).attr("cy", y);
+ const cell = findCell(x, y);
+ if (pack.cells.h[cell] < 20) return; // ignore dragging on water
+ pack.religions[religionId].center = cell;
+ });
+}
+
+function toggleLegend() {
+ if (legend.selectAll("*").size()) return clearLegend(); // hide legend
+
+ const data = pack.religions
+ .filter(r => r.i && !r.removed && r.area)
+ .sort((a, b) => b.area - a.area)
+ .map(r => [r.i, r.color, r.name]);
+ drawLegend("Religions", data);
+}
+
+function togglePercentageMode() {
+ if ($body.dataset.type === "absolute") {
+ $body.dataset.type = "percentage";
+ const totalArea = +byId("religionsFooterArea").dataset.area;
+ const totalPopulation = +byId("religionsFooterPopulation").dataset.population;
+
+ $body.querySelectorAll(":scope > div").forEach($el => {
+ const {area, population} = $el.dataset;
+ $el.querySelector(".religionArea").innerText = rn((+area / totalArea) * 100) + "%";
+ $el.querySelector(".religionPopulation").innerText = rn((+population / totalPopulation) * 100) + "%";
+ });
+ } else {
+ $body.dataset.type = "absolute";
+ religionsEditorAddLines();
+ }
+}
+
+function showHierarchy() {
+ // build hierarchy tree
+ pack.religions[0].origins = [null];
+ const validReligions = pack.religions.filter(r => !r.removed);
+ if (validReligions.length < 3) return tip("Not enough religions to show hierarchy", false, "error");
+
+ const root = d3
+ .stratify()
+ .id(d => d.i)
+ .parentId(d => d.origins[0])(validReligions);
+ const treeWidth = root.leaves().length;
+ const treeHeight = root.height;
+ const width = Math.max(treeWidth * 40, 300);
+ const height = treeHeight * 60;
+
+ const margin = {top: 10, right: 10, bottom: -5, left: 10};
+ const w = width - margin.left - margin.right;
+ const h = height + 30 - margin.top - margin.bottom;
+ const treeLayout = d3.tree().size([w, h]);
+
+ alertMessage.innerHTML = /* html */ `
+
+
+ Abbreviation:
+ Clear
+ Close
+
+
`;
+
+ // prepare svg
+ const svg = d3
+ .select("#alertMessage")
+ .insert("svg", "#religionChartDetails")
+ .attr("id", "hierarchy")
+ .attr("width", width)
+ .attr("height", height)
+ .style("text-anchor", "middle");
+ const graph = svg.append("g").attr("transform", `translate(10, -45)`);
+ const links = graph.append("g").attr("fill", "none").attr("stroke", "#aaaaaa");
+ const primaryLinks = links.append("g");
+ const secondaryLinks = links.append("g").attr("stroke-dasharray", 1);
+ const nodes = graph.append("g");
+
+ // render helper functions
+ const getLinkPath = d => {
+ const {
+ source: {x: sx, y: sy},
+ target: {x: tx, y: ty}
+ } = d;
+ return `M${sx},${sy} C${sx},${(sy * 3 + ty) / 4} ${tx},${(sy * 2 + ty) / 3} ${tx},${ty}`;
+ };
+
+ const getSecondaryLinks = root => {
+ const nodes = root.descendants();
+ const links = [];
+
+ for (const node of nodes) {
+ const origins = node.data.origins;
+ if (node.depth < 2) continue;
+
+ for (let i = 1; i < origins.length; i++) {
+ const source = nodes.find(n => n.data.i === origins[i]);
+ if (source) links.push({source, target: node});
+ }
+ }
+
+ return links;
+ };
+
+ const nodePathMap = {
+ undefined: "M5,0A5,5,0,1,1,-5,0A5,5,0,1,1,5,0", // small circle
+ Folk: "M11.3,0A11.3,11.3,0,1,1,-11.3,0A11.3,11.3,0,1,1,11.3,0", // circle
+ Organized: "M-11,-11h22v22h-22Z", // square
+ Cult: "M-6.5,-11.26l13,0l6.5,11.26l-6.5,11.26l-13,0l-6.5,-11.26Z", // hexagon
+ Heresy: "M0,-14L14,0L0,14L-14,0Z" // diamond
+ };
+
+ const getNodePath = d => nodePathMap[d.data.type];
+
+ renderTree();
+ function renderTree() {
+ treeLayout(root);
+
+ primaryLinks.selectAll("path").data(root.links()).enter().append("path").attr("d", getLinkPath);
+ secondaryLinks.selectAll("path").data(getSecondaryLinks(root)).enter().append("path").attr("d", getLinkPath);
+
+ const node = nodes
+ .selectAll("g")
+ .data(root.descendants())
+ .enter()
+ .append("g")
+ .attr("data-id", d => d.data.i)
+ .attr("stroke", "#333333")
+ .attr("transform", d => `translate(${d.x}, ${d.y})`)
+ .on("mouseenter", religionHighlightOn)
+ .on("mouseleave", religionHighlightOff)
+ .on("click", religionSelect)
+ .call(d3.drag().on("start", dragToReorigin));
+
+ node
+ .append("path")
+ .attr("d", getNodePath)
+ .attr("fill", d => d.data.color || "#ffffff")
+ .attr("stroke-dasharray", d => (d.data.cells ? "null" : "1"));
+
+ node
+ .append("text")
+ .attr("dy", ".35em")
+ .text(d => d.data.code || "");
+ }
+
+ $("#alert").dialog({
+ title: "Religions tree",
+ width: fitContent(),
+ resizable: false,
+ position: {my: "left center", at: "left+10 center", of: "svg"},
+ buttons: {},
+ close: () => {
+ alertMessage.innerHTML = "";
+ }
+ });
+
+ function religionSelect(d) {
+ d3.event.stopPropagation();
+
+ nodes.selectAll("g").style("outline", "none");
+ this.style.outline = "1px solid #c13119";
+ byId("religionSelected").style.display = "block";
+ byId("religionInfo").style.display = "none";
+
+ const religion = d.data;
+ byId("religionSelectedName").innerText = religion.name;
+ byId("religionSelectedCode").value = religion.code;
+
+ byId("religionSelectedCode").onchange = function () {
+ if (this.value.length > 3) return tip("Abbreviation must be 3 characters or less", false, "error", 3000);
+ if (!this.value.length) return tip("Abbreviation cannot be empty", false, "error", 3000);
+ nodes.select(`g[data-id="${d.id}"] > text`).text(this.value);
+ religion.code = this.value;
+ };
+
+ byId("religionSelectedClear").onclick = () => {
+ religion.origins = [0];
+ showHierarchy();
+ };
+
+ byId("religionSelectedClose").onclick = () => {
+ this.style.outline = "none";
+ byId("religionSelected").style.display = "none";
+ byId("religionInfo").style.display = "block";
+ };
+ }
+
+ function dragToReorigin(d) {
+ const originLine = graph.append("path").attr("class", "dragLine").attr("d", `M${d.x},${d.y}L${d.x},${d.y}`);
+
+ d3.event.on("drag", () => {
+ originLine.attr("d", `M${d.x},${d.y}L${d3.event.x},${d3.event.y}`);
+ });
+
+ d3.event.on("end", () => {
+ originLine.remove();
+ const selected = graph.select("g.selected");
+ if (!selected.size()) return;
+
+ const religionId = d.data.i;
+ const newOrigin = selected.datum().data.i;
+ if (religionId === newOrigin) return; // dragged to itself
+ if (d.data.origins.includes(newOrigin)) return; // already a child of the selected node
+ if (d.descendants().some(node => node.data.i === newOrigin)) return; // cannot be a child of its own child
+
+ const religion = pack.religions[religionId];
+ if (religion.origins[0] === 0) religion.origins = [];
+ religion.origins.push(newOrigin);
+
+ showHierarchy();
+ });
+ }
+}
+
+function toggleExtinct() {
+ $body.dataset.extinct = $body.dataset.extinct !== "show" ? "show" : "hide";
+ religionsEditorAddLines();
+}
+
+function enterReligionsManualAssignent() {
+ if (!layerIsOn("toggleReligions")) toggleReligions();
+ customization = 7;
+ relig.append("g").attr("id", "temp");
+ document.querySelectorAll("#religionsBottom > button").forEach(el => (el.style.display = "none"));
+ byId("religionsManuallyButtons").style.display = "inline-block";
+ debug.select("#religionCenters").style("display", "none");
+
+ religionsEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden"));
+ religionsFooter.style.display = "none";
+ $body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
+ $("#religionsEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
+
+ tip("Click on religion to select, drag the circle to change religion", true);
+ viewbox
+ .style("cursor", "crosshair")
+ .on("click", selectReligionOnMapClick)
+ .call(d3.drag().on("start", dragReligionBrush))
+ .on("touchmove mousemove", moveReligionBrush);
+
+ $body.querySelector("div").classList.add("selected");
+}
+
+function selectReligionOnLineClick(i) {
+ if (customization !== 7) return;
+ $body.querySelector("div.selected").classList.remove("selected");
+ this.classList.add("selected");
+}
+
+function selectReligionOnMapClick() {
+ const point = d3.mouse(this);
+ const i = findCell(point[0], point[1]);
+ if (pack.cells.h[i] < 20) return;
+
+ const assigned = relig.select("#temp").select("polygon[data-cell='" + i + "']");
+ const religion = assigned.size() ? +assigned.attr("data-religion") : pack.cells.religion[i];
+
+ $body.querySelector("div.selected").classList.remove("selected");
+ $body.querySelector("div[data-id='" + religion + "']").classList.add("selected");
+}
+
+function dragReligionBrush() {
+ const r = +religionsManuallyBrushNumber.value;
+
+ d3.event.on("drag", () => {
+ if (!d3.event.dx && !d3.event.dy) return;
+ const p = d3.mouse(this);
+ moveCircle(p[0], p[1], r);
+
+ const found = r > 5 ? findAll(p[0], p[1], r) : [findCell(p[0], p[1], r)];
+ const selection = found.filter(isLand);
+ if (selection) changeReligionForSelection(selection);
+ });
+}
+
+// change religion within selection
+function changeReligionForSelection(selection) {
+ const temp = relig.select("#temp");
+ const selected = $body.querySelector("div.selected");
+ const r = +selected.dataset.id; // religionNew
+ const color = pack.religions[r].color || "#ffffff";
+
+ selection.forEach(function (i) {
+ const exists = temp.select("polygon[data-cell='" + i + "']");
+ const religionOld = exists.size() ? +exists.attr("data-religion") : pack.cells.religion[i];
+ if (r === religionOld) return;
+
+ // change of append new element
+ if (exists.size()) exists.attr("data-religion", r).attr("fill", color);
+ else
+ temp
+ .append("polygon")
+ .attr("data-cell", i)
+ .attr("data-religion", r)
+ .attr("points", getPackPolygon(i))
+ .attr("fill", color);
+ });
+}
+
+function moveReligionBrush() {
+ showMainTip();
+ const point = d3.mouse(this);
+ const radius = +religionsManuallyBrushNumber.value;
+ moveCircle(point[0], point[1], radius);
+}
+
+function applyReligionsManualAssignent() {
+ const changed = relig.select("#temp").selectAll("polygon");
+ changed.each(function () {
+ const i = +this.dataset.cell;
+ const r = +this.dataset.religion;
+ pack.cells.religion[i] = r;
+ });
+
+ if (changed.size()) {
+ drawReligions();
+ refreshReligionsEditor();
+ drawReligionCenters();
+ }
+ exitReligionsManualAssignment();
+}
+
+function exitReligionsManualAssignment(close) {
+ customization = 0;
+ relig.select("#temp").remove();
+ removeCircle();
+ document.querySelectorAll("#religionsBottom > button").forEach(el => (el.style.display = "inline-block"));
+ byId("religionsManuallyButtons").style.display = "none";
+
+ religionsEditor.querySelectorAll(".hide").forEach(el => el.classList.remove("hidden"));
+ religionsFooter.style.display = "block";
+ $body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
+ if (!close) $("#religionsEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
+
+ debug.select("#religionCenters").style("display", null);
+ restoreDefaultEvents();
+ clearMainTip();
+ const selected = $body.querySelector("div.selected");
+ if (selected) selected.classList.remove("selected");
+}
+
+function enterAddReligionMode() {
+ if (this.classList.contains("pressed")) {
+ exitAddReligionMode();
+ return;
+ }
+ customization = 8;
+ this.classList.add("pressed");
+ tip("Click on the map to add a new religion", true);
+ viewbox.style("cursor", "crosshair").on("click", addReligion);
+ $body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
+}
+
+function exitAddReligionMode() {
+ customization = 0;
+ restoreDefaultEvents();
+ clearMainTip();
+ $body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
+ if (religionsAdd.classList.contains("pressed")) religionsAdd.classList.remove("pressed");
+}
+
+function addReligion() {
+ const point = d3.mouse(this);
+ const center = findCell(point[0], point[1]);
+ if (pack.cells.h[center] < 20) {
+ tip("You cannot place religion center into the water. Please click on a land cell", false, "error");
+ return;
+ }
+ const occupied = pack.religions.some(r => !r.removed && r.center === center);
+ if (occupied) {
+ tip("This cell is already a religion center. Please select a different cell", false, "error");
+ return;
+ }
+
+ if (d3.event.shiftKey === false) exitAddReligionMode();
+ Religions.add(center);
+
+ drawReligions();
+ refreshReligionsEditor();
+ drawReligionCenters();
+}
+
+function downloadReligionsCsv() {
+ const unit = getAreaUnit("2");
+ const headers = `Id,Name,Color,Type,Form,Supreme Deity,Area ${unit},Believers,Origins`;
+ const lines = Array.from($body.querySelectorAll(":scope > div"));
+ const data = lines.map($line => {
+ const {id, name, color, type, form, deity, area, population} = $line.dataset;
+ const deityText = '"' + deity + '"';
+ const {origins} = pack.religions[+id];
+ const originList = (origins || []).filter(origin => origin).map(origin => pack.religions[origin].name);
+ const originText = '"' + originList.join(", ") + '"';
+ return [id, name, color, type, form, deityText, area, population, originText].join(",");
+ });
+ const csvData = [headers].concat(data).join("\n");
+
+ const name = getFileName("Religions") + ".csv";
+ downloadFile(csvData, name);
+}
+
+function closeReligionsEditor() {
+ debug.select("#religionCenters").remove();
+ exitReligionsManualAssignment("close");
+ exitAddReligionMode();
+}
diff --git a/modules/dynamic/editors/states-editor.js b/modules/dynamic/editors/states-editor.js
index 44dc59fa..26a09d17 100644
--- a/modules/dynamic/editors/states-editor.js
+++ b/modules/dynamic/editors/states-editor.js
@@ -145,14 +145,14 @@ function addListeners() {
$body.on("click", event => {
const $element = event.target;
const classList = $element.classList;
- const state = +$element.parentNode?.dataset?.id;
+ const stateId = +$element.parentNode?.dataset?.id;
if ($element.tagName === "FILL-BOX") stateChangeFill($element);
- else if (classList.contains("name")) editStateName(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("statePopulation")) changePopulation(state);
- else if (classList.contains("icon-pin")) toggleFog(state, classList);
- else if (classList.contains("icon-trash-empty")) stateRemovePrompt(state);
+ else if (classList.contains("name")) editStateName(stateId);
+ else if (classList.contains("coaIcon")) editEmblem("state", "stateCOA" + stateId, pack.states[stateId]);
+ else if (classList.contains("icon-star-empty")) stateCapitalZoomIn(stateId);
+ else if (classList.contains("statePopulation")) changePopulation(stateId);
+ else if (classList.contains("icon-pin")) toggleFog(stateId, classList);
+ else if (classList.contains("icon-trash-empty")) stateRemovePrompt(stateId);
});
$body.on("input", function (ev) {
@@ -194,7 +194,9 @@ function statesEditorAddLines() {
const rural = s.rural * populationRate;
const urban = s.urban * populationRate * urbanization;
const population = rn(rural + urban);
- const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}. Click to change`;
+ const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(
+ urban
+ )}. Click to change`;
totalArea += area;
totalPopulation += population;
totalBurgs += s.burgs;
@@ -218,7 +220,9 @@ function statesEditorAddLines() {
data-expansionism=""
>
-
+
@@ -258,18 +262,26 @@ function statesEditorAddLines() {
>
-
-
+
+
-
${getCultureOptions(s.culture)}
+
${getCultureOptions(
+ s.culture
+ )}
${s.burgs}
${si(area)} ${unit}
${si(population)}
-
${getTypeOptions(s.type)}
+
${getTypeOptions(
+ s.type
+ )}
@@ -488,25 +500,30 @@ function stateChangeCapitalName(state, line, value) {
document.querySelector("#burgLabel" + capital).textContent = value;
}
-function changePopulation(state) {
- const s = pack.states[state];
- if (!s.cells) {
- tip("State does not have any cells, cannot change population", false, "error");
- return;
- }
- const rural = rn(s.rural * populationRate);
- const urban = rn(s.urban * populationRate * urbanization);
- const total = rural + urban;
- const l = n => Number(n).toLocaleString();
+function changePopulation(stateId) {
+ const state = pack.states[stateId];
+ if (!state.cells) return tip("State does not have any cells, cannot change population", false, "error");
- alertMessage.innerHTML = /* html */ ` Rural:
Urban:
-
-
Total population: ${l(total)} ⇒ ${l(total)} (100 %)
`;
+ const rural = rn(state.rural * populationRate);
+ const urban = rn(state.urban * populationRate * urbanization);
+ const total = rural + urban;
+ const format = n => Number(n).toLocaleString();
+
+ alertMessage.innerHTML = /* html */ `
+
Change population of all cells assigned to the state
+
+ Rural:
+
Total population: ${format(total)} ⇒ ${format(total)}
+ (100 %)
+
+
`;
const update = function () {
const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
if (isNaN(totalNew)) return;
- totalPop.innerHTML = l(totalNew);
+ totalPop.innerHTML = format(totalNew);
totalPopPerc.innerHTML = rn((totalNew / total) * 100);
};
@@ -532,24 +549,24 @@ function changePopulation(state) {
function applyPopulationChange() {
const ruralChange = ruralPop.value / rural;
if (isFinite(ruralChange) && ruralChange !== 1) {
- const cells = pack.cells.i.filter(i => pack.cells.state[i] === state);
+ const cells = pack.cells.i.filter(i => pack.cells.state[i] === stateId);
cells.forEach(i => (pack.cells.pop[i] *= ruralChange));
}
if (!isFinite(ruralChange) && +ruralPop.value > 0) {
const points = ruralPop.value / populationRate;
- const cells = pack.cells.i.filter(i => pack.cells.state[i] === state);
+ const cells = pack.cells.i.filter(i => pack.cells.state[i] === stateId);
const pop = points / cells.length;
cells.forEach(i => (pack.cells.pop[i] = pop));
}
const urbanChange = urbanPop.value / urban;
if (isFinite(urbanChange) && urbanChange !== 1) {
- const burgs = pack.burgs.filter(b => !b.removed && b.state === state);
+ const burgs = pack.burgs.filter(b => !b.removed && b.state === stateId);
burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
}
if (!isFinite(urbanChange) && +urbanPop.value > 0) {
const points = urbanPop.value / populationRate / urbanization;
- const burgs = pack.burgs.filter(b => !b.removed && b.state === state);
+ const burgs = pack.burgs.filter(b => !b.removed && b.state === stateId);
const population = rn(points / burgs.length, 4);
burgs.forEach(b => (b.population = population));
}
@@ -591,19 +608,11 @@ function toggleFog(state, cl) {
function stateRemovePrompt(state) {
if (customization) return;
- alertMessage.innerHTML = "Are you sure you want to remove the state?
This action cannot be reverted";
- $("#alert").dialog({
- resizable: false,
+ confirmationDialog({
title: "Remove state",
- buttons: {
- Remove: function () {
- $(this).dialog("close");
- stateRemove(state);
- },
- Cancel: function () {
- $(this).dialog("close");
- }
- }
+ message: "Are you sure you want to remove the state?
This action cannot be reverted",
+ confirm: "Remove",
+ onConfirm: () => stateRemove(state)
});
}
@@ -667,10 +676,8 @@ function stateRemove(state) {
}
function toggleLegend() {
- if (legend.selectAll("*").size()) {
- clearLegend();
- return;
- } // hide legend
+ if (legend.selectAll("*").size()) return clearLegend(); // hide legend
+
const data = pack.states
.filter(s => s.i && !s.removed && s.cells)
.sort((a, b) => b.area - a.area)
@@ -681,16 +688,17 @@ function toggleLegend() {
function togglePercentageMode() {
if ($body.dataset.type === "absolute") {
$body.dataset.type = "percentage";
- const totalCells = +statesFooterCells.innerHTML;
- const totalBurgs = +statesFooterBurgs.innerHTML;
- const totalArea = +statesFooterArea.dataset.area;
- const totalPopulation = +statesFooterPopulation.dataset.population;
+ const totalCells = +byId("statesFooterCells").innerText;
+ const totalBurgs = +byId("statesFooterBurgs").innerText;
+ const totalArea = +byId("statesFooterArea").dataset.area;
+ const totalPopulation = +byId("statesFooterPopulation").dataset.population;
$body.querySelectorAll(":scope > div").forEach(function (el) {
- el.querySelector(".stateCells").innerHTML = rn((+el.dataset.cells / totalCells) * 100) + "%";
- el.querySelector(".stateBurgs").innerHTML = rn((+el.dataset.burgs / totalBurgs) * 100) + "%";
- el.querySelector(".stateArea").innerHTML = rn((+el.dataset.area / totalArea) * 100) + "%";
- el.querySelector(".statePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%";
+ const {cells, burgs, area, population} = el.dataset;
+ el.querySelector(".stateCells").innerText = rn((+cells / totalCells) * 100) + "%";
+ el.querySelector(".stateBurgs").innerText = rn((+burgs / totalBurgs) * 100) + "%";
+ el.querySelector(".stateArea").innerText = rn((+area / totalArea) * 100) + "%";
+ el.querySelector(".statePopulation").innerText = rn((+population / totalPopulation) * 100) + "%";
});
} else {
$body.dataset.type = "absolute";
@@ -913,7 +921,11 @@ function enterStatesManualAssignent() {
$("#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);
- viewbox.style("cursor", "crosshair").on("click", selectStateOnMapClick).call(d3.drag().on("start", dragStateBrush)).on("touchmove mousemove", moveStateBrush);
+ viewbox
+ .style("cursor", "crosshair")
+ .on("click", selectStateOnMapClick)
+ .call(d3.drag().on("start", dragStateBrush))
+ .on("touchmove mousemove", moveStateBrush);
$body.querySelector("div").classList.add("selected");
}
@@ -967,7 +979,14 @@ function changeStateForSelection(selection) {
// change of append new element
if (exists.size()) exists.attr("data-state", stateNew).attr("fill", color).attr("stroke", color);
- else temp.append("polygon").attr("data-cell", i).attr("data-state", stateNew).attr("points", getPackPolygon(i)).attr("fill", color).attr("stroke", color);
+ else
+ temp
+ .append("polygon")
+ .attr("data-cell", i)
+ .attr("data-state", stateNew)
+ .attr("points", getPackPolygon(i))
+ .attr("fill", color)
+ .attr("stroke", color);
});
}
@@ -1118,7 +1137,17 @@ function adjustProvinces(affectedProvinces) {
const coa = COA.generate(burg?.coa || states[stateId].coa, kinship, burg ? null : 0.9, type);
coa.shield = COA.getShield(culture, stateId);
- provinces.push({i: newProvinceId, state: stateId, center, burg: burgId, name, formName, fullName: `${name} ${formName}`, color, coa});
+ provinces.push({
+ i: newProvinceId,
+ state: stateId,
+ center,
+ burg: burgId,
+ name,
+ formName,
+ fullName: `${name} ${formName}`,
+ color,
+ coa
+ });
provinceCells.forEach(i => {
cells.province[i] = newProvinceId;
@@ -1134,7 +1163,9 @@ function adjustProvinces(affectedProvinces) {
})
);
- const closesProvince = borderCell && cells.c[borderCell].map(c => cells.province[c]).find(province => province && province !== provinceId);
+ const closesProvince =
+ borderCell &&
+ cells.c[borderCell].map(c => cells.province[c]).find(province => province && province !== provinceId);
return closesProvince;
}
}
@@ -1152,7 +1183,8 @@ function exitStatesManualAssignment(close) {
.forEach(el => el.classList.remove("hidden"));
statesFooter.style.display = "block";
$body.querySelectorAll("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();
clearMainTip();
@@ -1176,10 +1208,12 @@ function addState() {
const {cells, states, burgs} = pack;
const point = d3.mouse(this);
const center = findCell(point[0], point[1]);
- if (cells.h[center] < 20) return tip("You cannot place state into the water. Please click on a land cell", false, "error");
+ if (cells.h[center] < 20)
+ return tip("You cannot place state into the water. Please click on a land cell", false, "error");
let burg = cells.burg[center];
- if (burg && burgs[burg].capital) return tip("Existing capital cannot be selected as a new state capital! Select other cell", false, "error");
+ if (burg && burgs[burg].capital)
+ return tip("Existing capital cannot be selected as a new state capital! Select other cell", false, "error");
if (!burg) burg = addBurg(point); // add new burg
@@ -1226,7 +1260,10 @@ function addState() {
return relations;
});
diplomacy.push("x");
- states[0].diplomacy.push([`Independance declaration`, `${name} declared its independance from ${states[oldState].name}`]);
+ states[0].diplomacy.push([
+ `Independance declaration`,
+ `${name} declared its independance from ${states[oldState].name}`
+ ]);
cells.state[center] = newState;
cells.province[center] = 0;
@@ -1296,7 +1333,23 @@ function downloadStatesCsv() {
const {fullName = "", rural, urban} = pack.states[+id];
const ruralPopulation = Math.round(rural * populationRate);
const urbanPopulation = Math.round(urban * populationRate * urbanization);
- return [id, name, fullName, form, color, capital, culture, type, expansionism, cells, burgs, area, population, ruralPopulation, urbanPopulation].join(",");
+ return [
+ id,
+ name,
+ fullName,
+ form,
+ color,
+ capital,
+ culture,
+ type,
+ expansionism,
+ cells,
+ burgs,
+ area,
+ population,
+ ruralPopulation,
+ urbanPopulation
+ ].join(",");
});
const csvData = [headers].concat(data).join("\n");
diff --git a/modules/ui/editors.js b/modules/ui/editors.js
index c744ce89..725b2b73 100644
--- a/modules/ui/editors.js
+++ b/modules/ui/editors.js
@@ -330,7 +330,23 @@ function getMFCGlink(burg) {
return rn(normalize(deg, 0, 360) * 2, 2); // 0 = south, 0.5 = west, 1 = north, 1.5 = east
}
- const parameters = {name, population, size, seed, river, coast, farms, citadel, urban_castle, hub, plaza, temple, walls, shantytown, gates: -1};
+ const parameters = {
+ name,
+ population,
+ size,
+ seed,
+ river,
+ coast,
+ farms,
+ citadel,
+ urban_castle,
+ hub,
+ plaza,
+ temple,
+ walls,
+ shantytown,
+ gates: -1
+ };
const url = new URL("https://watabou.github.io/city-generator/");
url.search = new URLSearchParams(parameters);
if (sea) url.searchParams.append("sea", sea);
@@ -456,7 +472,12 @@ function createPicker() {
const cl = () => tip("Click to close the picker");
const closePicker = () => container.style("display", "none");
- const container = d3.select("body").append("svg").attr("id", "pickerContainer").attr("width", "100%").attr("height", "100%");
+ const container = d3
+ .select("body")
+ .append("svg")
+ .attr("id", "pickerContainer")
+ .attr("width", "100%")
+ .attr("height", "100%");
container
.append("rect")
.attr("x", 0)
@@ -589,8 +610,21 @@ function createPicker() {
.attr("height", 14)
.on("mousemove", cl)
.on("click", closePicker);
- picker.insert("text", ":first-child").attr("x", 12).attr("y", -10).attr("id", "pickerLabel").text("Color Picker").on("mousemove", pos);
- picker.insert("rect", ":first-child").attr("x", 0).attr("y", -30).attr("width", width).attr("height", 30).attr("id", "pickerHeader").on("mousemove", pos);
+ picker
+ .insert("text", ":first-child")
+ .attr("x", 12)
+ .attr("y", -10)
+ .attr("id", "pickerLabel")
+ .text("Color Picker")
+ .on("mousemove", pos);
+ picker
+ .insert("rect", ":first-child")
+ .attr("x", 0)
+ .attr("y", -30)
+ .attr("width", width)
+ .attr("height", 30)
+ .attr("id", "pickerHeader")
+ .on("mousemove", pos);
picker.attr("transform", `translate(${(svgWidth - width) / 2},${(svgHeight - height) / 2})`);
}
@@ -729,7 +763,12 @@ function changePickerSpace() {
const space = this.dataset.space;
const i = Array.from(this.parentNode.querySelectorAll("input")).map(input => input.value); // inputs
- const fill = space === "hex" ? d3.rgb(this.value) : space === "rgb" ? d3.rgb(i[0], i[1], i[2]) : d3.hsl(i[0], i[1] / 100, i[2] / 100);
+ const fill =
+ space === "hex"
+ ? d3.rgb(this.value)
+ : space === "rgb"
+ ? d3.rgb(i[0], i[1], i[2])
+ : d3.hsl(i[0], i[1] / 100, i[2] / 100);
const hsl = d3.hsl(fill);
if (isNaN(hsl.l)) {
@@ -750,7 +789,14 @@ function fog(id, path) {
if (defs.select("#fog #" + id).size()) return;
const fadeIn = d3.transition().duration(2000).ease(d3.easeSinInOut);
if (defs.select("#fog path").size()) {
- defs.select("#fog").append("path").attr("d", path).attr("id", id).attr("opacity", 0).transition(fadeIn).attr("opacity", 1);
+ defs
+ .select("#fog")
+ .append("path")
+ .attr("d", path)
+ .attr("id", id)
+ .attr("opacity", 0)
+ .transition(fadeIn)
+ .attr("opacity", 1);
} else {
defs.select("#fog").append("path").attr("d", path).attr("id", id).attr("opacity", 1);
const opacity = fogging.attr("opacity");
@@ -813,9 +859,20 @@ function highlightElement(element, zoom) {
const enter = d3.transition().duration(1000).ease(d3.easeBounceOut);
const exit = d3.transition().duration(500).ease(d3.easeLinear);
- const highlight = debug.append("rect").attr("x", box.x).attr("y", box.y).attr("width", box.width).attr("height", box.height);
+ const highlight = debug
+ .append("rect")
+ .attr("x", box.x)
+ .attr("y", box.y)
+ .attr("width", box.width)
+ .attr("height", box.height);
highlight.classed("highlighted", 1).attr("transform", transform);
- highlight.transition(enter).style("outline-offset", "0px").transition(exit).style("outline-color", "transparent").delay(1000).remove();
+ highlight
+ .transition(enter)
+ .style("outline-offset", "0px")
+ .transition(exit)
+ .style("outline-color", "transparent")
+ .delay(1000)
+ .remove();
if (zoom) {
const tr = parseTransform(transform);
@@ -1119,12 +1176,18 @@ function refreshAllEditors() {
// dynamically loaded editors
async function editStates() {
if (customization) return;
- const StateEditor = await import("../dynamic/editors/states-editor.js?v=29052022");
- StateEditor.open();
+ const Editor = await import("../dynamic/editors/states-editor.js?v=29052022");
+ Editor.open();
}
async function editCultures() {
if (customization) return;
- const CulturesEditor = await import("../dynamic/editors/cultures-editor.js?v=29052022");
- CulturesEditor.open();
+ const Editor = await import("../dynamic/editors/cultures-editor.js?v=05062022");
+ Editor.open();
+}
+
+async function editReligions() {
+ if (customization) return;
+ const Editor = await import("../dynamic/editors/religions-editor.js?v=05062022");
+ Editor.open();
}
diff --git a/modules/ui/religions-editor.js b/modules/ui/religions-editor.js
deleted file mode 100644
index 09827d33..00000000
--- a/modules/ui/religions-editor.js
+++ /dev/null
@@ -1,862 +0,0 @@
-"use strict";
-function editReligions() {
- if (customization) return;
- closeDialogs("#religionsEditor, .stable");
- if (!layerIsOn("toggleReligions")) toggleReligions();
- if (layerIsOn("toggleCultures")) toggleCultures();
- if (layerIsOn("toggleStates")) toggleStates();
- if (layerIsOn("toggleBiomes")) toggleBiomes();
- if (layerIsOn("toggleProvinces")) toggleProvinces();
-
- const $body = byId("religionsBody");
- const animate = d3.transition().duration(1500).ease(d3.easeSinIn);
- refreshReligionsEditor();
- drawReligionCenters();
-
- if (modules.editReligions) return;
- modules.editReligions = true;
-
- $("#religionsEditor").dialog({
- title: "Religions Editor",
- resizable: false,
- width: fitContent(),
- close: closeReligionsEditor,
- position: {my: "right top", at: "right-10 top+10", of: "svg"}
- });
-
- // add listeners
- byId("religionsEditorRefresh").on("click", refreshReligionsEditor);
- byId("religionsEditStyle").on("click", () => editStyle("relig"));
- byId("religionsLegend").on("click", toggleLegend);
- byId("religionsPercentage").on("click", togglePercentageMode);
- byId("religionsHeirarchy").on("click", showHierarchy);
- byId("religionsExtinct").on("click", toggleExtinct);
- byId("religionsManually").on("click", enterReligionsManualAssignent);
- byId("religionsManuallyApply").on("click", applyReligionsManualAssignent);
- byId("religionsManuallyCancel").on("click", () => exitReligionsManualAssignment());
- byId("religionsAdd").on("click", enterAddReligionMode);
- byId("religionsExport").on("click", downloadReligionsCsv);
-
- function refreshReligionsEditor() {
- religionsCollectStatistics();
- religionsEditorAddLines();
- }
-
- function religionsCollectStatistics() {
- const cells = pack.cells,
- religions = pack.religions;
- religions.forEach(r => (r.cells = r.area = r.rural = r.urban = 0));
-
- for (const i of cells.i) {
- if (cells.h[i] < 20) continue;
- const r = cells.religion[i];
- religions[r].cells += 1;
- religions[r].area += cells.area[i];
- religions[r].rural += cells.pop[i];
- if (cells.burg[i]) religions[r].urban += pack.burgs[cells.burg[i]].population;
- }
- }
-
- // add line for each religion
- function religionsEditorAddLines() {
- const unit = " " + getAreaUnit();
- let lines = "",
- totalArea = 0,
- totalPopulation = 0;
-
- for (const r of pack.religions) {
- if (r.removed) continue;
-
- const area = getArea(r.area);
- const rural = r.rural * populationRate;
- const urban = r.urban * populationRate * urbanization;
- const population = rn(rural + urban);
- if (r.i && !r.cells && $body.dataset.extinct !== "show") continue; // hide extinct religions
- const populationTip = `Believers: ${si(population)}; Rural areas: ${si(rural)}; Urban areas: ${si(
- urban
- )}. Click to change`;
- totalArea += area;
- totalPopulation += population;
-
- if (r.i) {
- lines += /* html */ `
-
-
-
- ${getTypeOptions(r.type)}
-
-
-
-
-
-
${si(area) + unit}
-
-
${si(population)}
-
-
`;
- } else {
- // No religion (neutral) line
- lines += /* html */ `
-
-
-
- ${getTypeOptions(r.type)}
-
-
-
-
-
-
${si(area) + unit}
-
-
${si(population)}
-
`;
- }
- }
- $body.innerHTML = lines;
-
- // update footer
- const valid = pack.religions.filter(r => r.i && !r.removed);
- religionsOrganized.innerHTML = valid.filter(r => r.type === "Organized").length;
- religionsHeresies.innerHTML = valid.filter(r => r.type === "Heresy").length;
- religionsCults.innerHTML = valid.filter(r => r.type === "Cult").length;
- religionsFolk.innerHTML = valid.filter(r => r.type === "Folk").length;
- religionsFooterArea.innerHTML = si(totalArea) + unit;
- religionsFooterPopulation.innerHTML = si(totalPopulation);
- religionsFooterArea.dataset.area = totalArea;
- religionsFooterPopulation.dataset.population = totalPopulation;
-
- // add listeners
- $body.querySelectorAll("div.religions").forEach(el => el.on("mouseenter", religionHighlightOn));
- $body.querySelectorAll("div.religions").forEach(el => el.on("mouseleave", religionHighlightOff));
- $body.querySelectorAll("div.states").forEach(el => el.on("click", selectReligionOnLineClick));
- $body.querySelectorAll("fill-box").forEach(el => el.on("click", religionChangeColor));
- $body.querySelectorAll("div > input.religionName").forEach(el => el.on("input", religionChangeName));
- $body.querySelectorAll("div > select.religionType").forEach(el => el.on("change", religionChangeType));
- $body.querySelectorAll("div > input.religionForm").forEach(el => el.on("input", religionChangeForm));
- $body.querySelectorAll("div > input.religionDeity").forEach(el => el.on("input", religionChangeDeity));
- $body.querySelectorAll("div > span.icon-arrows-cw").forEach(el => el.on("click", regenerateDeity));
- $body.querySelectorAll("div > div.culturePopulation").forEach(el => el.on("click", changePopulation));
- $body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.on("click", religionRemove));
-
- if ($body.dataset.type === "percentage") {
- $body.dataset.type = "absolute";
- togglePercentageMode();
- }
- applySorting(religionsHeader);
- $("#religionsEditor").dialog({width: fitContent()});
- }
-
- function getTypeOptions(type) {
- let options = "";
- const types = ["Folk", "Organized", "Cult", "Heresy"];
- types.forEach(t => (options += `
${t} `));
- return options;
- }
-
- function religionHighlightOn(event) {
- const religionId = Number(event.id || event.target.dataset.id);
- const $info = byId("religionInfo");
- if ($info) {
- d3.select("#hierarchy").select(`g[data-id='${religionId}']`).classed("selected", 1);
- const {name, type, form, rural, urban} = pack.religions[religionId];
-
- const getTypeText = () => {
- if (name.includes(type)) return "";
- if (form.includes(type)) return "";
- if (type === "Folk" || type === "Organized") return `. ${type} religion`;
- return `. ${type}`;
- };
- const formText = form === type ? "" : ". " + form;
- const population = rural * populationRate + urban * populationRate * urbanization;
- const populationText = population > 0 ? si(rn(population)) + " people" : "Extinct";
-
- $info.innerHTML = `${name}${getTypeText()}${formText}. ${populationText}`;
- tip("Drag to other node to add parent, click to edit");
- }
-
- const el = $body.querySelector(`div[data-id='${religionId}']`);
- if (el) el.classList.add("active");
-
- if (!layerIsOn("toggleReligions")) return;
- if (customization) return;
- relig
- .select("#religion" + religionId)
- .raise()
- .transition(animate)
- .attr("stroke-width", 2.5)
- .attr("stroke", "#c13119");
- debug
- .select("#religionsCenter" + religionId)
- .raise()
- .transition(animate)
- .attr("r", 8)
- .attr("stroke-width", 2)
- .attr("stroke", "#c13119");
- }
-
- function religionHighlightOff(event) {
- const religionId = Number(event.id || event.target.dataset.id);
- const $info = byId("religionInfo");
- if ($info) {
- d3.select("#hierarchy").select(`g[data-id='${religionId}']`).classed("selected", 0);
- $info.innerHTML = "";
- tip("");
- }
-
- const el = $body.querySelector(`div[data-id='${religionId}']`);
- if (el) el.classList.remove("active");
-
- relig
- .select("#religion" + religionId)
- .transition()
- .attr("stroke-width", null)
- .attr("stroke", null);
- debug
- .select("#religionsCenter" + religionId)
- .transition()
- .attr("r", 4)
- .attr("stroke-width", 1.2)
- .attr("stroke", null);
- }
-
- function religionChangeColor() {
- const el = this;
- const currentFill = el.getAttribute("fill");
- const religion = +el.parentNode.dataset.id;
-
- const callback = newFill => {
- el.fill = newFill;
- pack.religions[religion].color = newFill;
- relig.select("#religion" + religion).attr("fill", newFill);
- debug.select("#religionsCenter" + religion).attr("fill", newFill);
- };
-
- openPicker(currentFill, callback);
- }
-
- function religionChangeName() {
- const religion = +this.parentNode.dataset.id;
- this.parentNode.dataset.name = this.value;
- pack.religions[religion].name = this.value;
- pack.religions[religion].code = abbreviate(
- this.value,
- pack.religions.map(c => c.code)
- );
- }
-
- function religionChangeType() {
- const religion = +this.parentNode.dataset.id;
- this.parentNode.dataset.type = this.value;
- pack.religions[religion].type = this.value;
- }
-
- function religionChangeForm() {
- const religion = +this.parentNode.dataset.id;
- this.parentNode.dataset.form = this.value;
- pack.religions[religion].form = this.value;
- }
-
- function religionChangeDeity() {
- const religion = +this.parentNode.dataset.id;
- this.parentNode.dataset.deity = this.value;
- pack.religions[religion].deity = this.value;
- }
-
- function regenerateDeity() {
- const religion = +this.parentNode.dataset.id;
- const culture = pack.religions[religion].culture;
- const deity = Religions.getDeityName(culture);
- this.parentNode.dataset.deity = deity;
- pack.religions[religion].deity = deity;
- this.nextElementSibling.value = deity;
- }
-
- function changePopulation() {
- const religion = +this.parentNode.dataset.id;
- const r = pack.religions[religion];
- if (!r.cells) {
- tip("Religion does not have any cells, cannot change population", false, "error");
- return;
- }
- const rural = rn(r.rural * populationRate);
- const urban = rn(r.urban * populationRate * urbanization);
- const total = rural + urban;
- const l = n => Number(n).toLocaleString();
- const burgs = pack.burgs.filter(b => !b.removed && pack.cells.religion[b.cell] === religion);
-
- alertMessage.innerHTML = /* html */ `
- Please note all population of religion territory is considered believers of this religion. It means believers number change will directly change
- population
-
- Rural:
Urban:
-
-
Total believers: ${l(total)} ⇒ ${l(
- total
- )} (100 %)
`;
-
- const update = function () {
- const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
- if (isNaN(totalNew)) return;
- totalPop.innerHTML = l(totalNew);
- totalPopPerc.innerHTML = rn((totalNew / total) * 100);
- };
-
- ruralPop.oninput = () => update();
- urbanPop.oninput = () => update();
-
- $("#alert").dialog({
- resizable: false,
- title: "Change believers number",
- width: "24em",
- buttons: {
- Apply: function () {
- applyPopulationChange();
- $(this).dialog("close");
- },
- Cancel: function () {
- $(this).dialog("close");
- }
- },
- position: {my: "center", at: "center", of: "svg"}
- });
-
- function applyPopulationChange() {
- const ruralChange = ruralPop.value / rural;
- if (isFinite(ruralChange) && ruralChange !== 1) {
- const cells = pack.cells.i.filter(i => pack.cells.religion[i] === religion);
- cells.forEach(i => (pack.cells.pop[i] *= ruralChange));
- }
- if (!isFinite(ruralChange) && +ruralPop.value > 0) {
- const points = ruralPop.value / populationRate;
- const cells = pack.cells.i.filter(i => pack.cells.religion[i] === religion);
- const pop = rn(points / cells.length);
- cells.forEach(i => (pack.cells.pop[i] = pop));
- }
-
- const urbanChange = urbanPop.value / urban;
- if (isFinite(urbanChange) && urbanChange !== 1) {
- burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
- }
- if (!isFinite(urbanChange) && +urbanPop.value > 0) {
- const points = urbanPop.value / populationRate / urbanization;
- const population = rn(points / burgs.length, 4);
- burgs.forEach(b => (b.population = population));
- }
-
- refreshReligionsEditor();
- }
- }
-
- function religionRemove() {
- if (customization) return;
- const religionId = +this.parentNode.dataset.id;
-
- alertMessage.innerHTML = "Are you sure you want to remove the religion?
This action cannot be reverted";
- $("#alert").dialog({
- resizable: false,
- title: "Remove religion",
- buttons: {
- Remove: function () {
- relig.select("#religion" + religionId).remove();
- relig.select("#religion-gap" + religionId).remove();
- debug.select("#religionsCenter" + religionId).remove();
-
- pack.cells.religion.forEach((r, i) => {
- if (r === religionId) pack.cells.religion[i] = 0;
- });
- pack.religions[religionId].removed = true;
-
- pack.religions
- .filter(r => r.i && !r.removed)
- .forEach(r => {
- r.origins = r.origins.filter(origin => origin !== religionId);
- if (!r.origins.length) r.origins = [0];
- });
-
- refreshReligionsEditor();
- $(this).dialog("close");
- },
- Cancel: function () {
- $(this).dialog("close");
- }
- }
- });
- }
-
- function drawReligionCenters() {
- debug.select("#religionCenters").remove();
- const religionCenters = debug
- .append("g")
- .attr("id", "religionCenters")
- .attr("stroke-width", 1.2)
- .attr("stroke", "#444444")
- .style("cursor", "move");
-
- const data = pack.religions.filter(r => r.i && r.center && r.cells && !r.removed);
- religionCenters
- .selectAll("circle")
- .data(data)
- .enter()
- .append("circle")
- .attr("id", d => "religionsCenter" + d.i)
- .attr("data-id", d => d.i)
- .attr("r", 4)
- .attr("fill", d => d.color)
- .attr("cx", d => pack.cells.p[d.center][0])
- .attr("cy", d => pack.cells.p[d.center][1])
- .on("mouseenter", d => {
- tip(d.name + ". Drag to move the religion center", true);
- religionHighlightOn(event);
- })
- .on("mouseleave", d => {
- tip("", true);
- religionHighlightOff(event);
- })
- .call(d3.drag().on("start", religionCenterDrag));
- }
-
- function religionCenterDrag() {
- const el = d3.select(this);
- const r = +this.dataset.id;
- d3.event.on("drag", () => {
- el.attr("cx", d3.event.x).attr("cy", d3.event.y);
- const cell = findCell(d3.event.x, d3.event.y);
- if (pack.cells.h[cell] < 20) return; // ignore dragging on water
- pack.religions[r].center = cell;
- });
- }
-
- function toggleLegend() {
- if (legend.selectAll("*").size()) {
- clearLegend();
- return;
- } // hide legend
- const data = pack.religions
- .filter(r => r.i && !r.removed && r.area)
- .sort((a, b) => b.area - a.area)
- .map(r => [r.i, r.color, r.name]);
- drawLegend("Religions", data);
- }
-
- function togglePercentageMode() {
- if ($body.dataset.type === "absolute") {
- $body.dataset.type = "percentage";
- const totalArea = +religionsFooterArea.dataset.area;
- const totalPopulation = +religionsFooterPopulation.dataset.population;
-
- $body.querySelectorAll(":scope > div").forEach(function (el) {
- el.querySelector(".biomeArea").innerHTML = rn((+el.dataset.area / totalArea) * 100) + "%";
- el.querySelector(".culturePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%";
- });
- } else {
- $body.dataset.type = "absolute";
- religionsEditorAddLines();
- }
- }
-
- function showHierarchy() {
- // build hierarchy tree
- pack.religions[0].origins = [null];
- const validReligions = pack.religions.filter(r => !r.removed);
- if (validReligions.length < 3) return tip("Not enough religions to show hierarchy", false, "error");
-
- const root = d3
- .stratify()
- .id(d => d.i)
- .parentId(d => d.origins[0])(validReligions);
- const treeWidth = root.leaves().length;
- const treeHeight = root.height;
- const width = Math.max(treeWidth * 40, 300);
- const height = treeHeight * 60;
-
- const margin = {top: 10, right: 10, bottom: -5, left: 10};
- const w = width - margin.left - margin.right;
- const h = height + 30 - margin.top - margin.bottom;
- const treeLayout = d3.tree().size([w, h]);
-
- alertMessage.innerHTML = /* html */ `
-
-
- Abbreviation:
- Clear
- Close
-
-
`;
-
- // prepare svg
- const svg = d3
- .select("#alertMessage")
- .insert("svg", "#religionChartDetails")
- .attr("id", "hierarchy")
- .attr("width", width)
- .attr("height", height)
- .style("text-anchor", "middle");
- const graph = svg.append("g").attr("transform", `translate(10, -45)`);
- const links = graph.append("g").attr("fill", "none").attr("stroke", "#aaaaaa");
- const primaryLinks = links.append("g");
- const secondaryLinks = links.append("g").attr("stroke-dasharray", 1);
- const nodes = graph.append("g");
-
- // render helper functions
- const getLinkPath = d => {
- const {
- source: {x: sx, y: sy},
- target: {x: tx, y: ty}
- } = d;
- return `M${sx},${sy} C${sx},${(sy * 3 + ty) / 4} ${tx},${(sy * 2 + ty) / 3} ${tx},${ty}`;
- };
-
- const getSecondaryLinks = root => {
- const nodes = root.descendants();
- const links = [];
-
- for (const node of nodes) {
- const origins = node.data.origins;
- if (node.depth < 2) continue;
-
- for (let i = 1; i < origins.length; i++) {
- const source = nodes.find(n => n.data.i === origins[i]);
- if (source) links.push({source, target: node});
- }
- }
-
- return links;
- };
-
- const nodePathMap = {
- undefined: "M5,0A5,5,0,1,1,-5,0A5,5,0,1,1,5,0", // small circle
- Folk: "M11.3,0A11.3,11.3,0,1,1,-11.3,0A11.3,11.3,0,1,1,11.3,0", // circle
- Organized: "M-11,-11h22v22h-22Z", // square
- Cult: "M-6.5,-11.26l13,0l6.5,11.26l-6.5,11.26l-13,0l-6.5,-11.26Z", // hexagon
- Heresy: "M0,-14L14,0L0,14L-14,0Z" // diamond
- };
-
- const getNodePath = d => nodePathMap[d.data.type];
-
- renderTree();
- function renderTree() {
- treeLayout(root);
-
- primaryLinks.selectAll("path").data(root.links()).enter().append("path").attr("d", getLinkPath);
- secondaryLinks.selectAll("path").data(getSecondaryLinks(root)).enter().append("path").attr("d", getLinkPath);
-
- const node = nodes
- .selectAll("g")
- .data(root.descendants())
- .enter()
- .append("g")
- .attr("data-id", d => d.data.i)
- .attr("stroke", "#333333")
- .attr("transform", d => `translate(${d.x}, ${d.y})`)
- .on("mouseenter", religionHighlightOn)
- .on("mouseleave", religionHighlightOff)
- .on("click", religionSelect)
- .call(d3.drag().on("start", dragToReorigin));
-
- node
- .append("path")
- .attr("d", getNodePath)
- .attr("fill", d => d.data.color || "#ffffff")
- .attr("stroke-dasharray", d => (d.data.cells ? "null" : "1"));
-
- node
- .append("text")
- .attr("dy", ".35em")
- .text(d => d.data.code || "");
- }
-
- $("#alert").dialog({
- title: "Religions tree",
- width: fitContent(),
- resizable: false,
- position: {my: "left center", at: "left+10 center", of: "svg"},
- buttons: {},
- close: () => {
- alertMessage.innerHTML = "";
- }
- });
-
- function religionSelect(d) {
- d3.event.stopPropagation();
-
- nodes.selectAll("g").style("outline", "none");
- this.style.outline = "1px solid #c13119";
- byId("religionSelected").style.display = "block";
- byId("religionInfo").style.display = "none";
-
- const religion = d.data;
- byId("religionSelectedName").innerText = religion.name;
- byId("religionSelectedCode").value = religion.code;
-
- byId("religionSelectedCode").onchange = function () {
- if (this.value.length > 3) return tip("Abbreviation must be 3 characters or less", false, "error", 3000);
- if (!this.value.length) return tip("Abbreviation cannot be empty", false, "error", 3000);
- nodes.select(`g[data-id="${d.id}"] > text`).text(this.value);
- religion.code = this.value;
- };
-
- byId("religionSelectedClear").onclick = () => {
- religion.origins = [0];
- showHierarchy();
- };
-
- byId("religionSelectedClose").onclick = () => {
- this.style.outline = "none";
- byId("religionSelected").style.display = "none";
- byId("religionInfo").style.display = "block";
- };
- }
-
- function dragToReorigin(d) {
- const originLine = graph.append("path").attr("class", "dragLine").attr("d", `M${d.x},${d.y}L${d.x},${d.y}`);
-
- d3.event.on("drag", () => {
- originLine.attr("d", `M${d.x},${d.y}L${d3.event.x},${d3.event.y}`);
- });
-
- d3.event.on("end", () => {
- originLine.remove();
- const selected = graph.select("g.selected");
- if (!selected.size()) return;
-
- const religionId = d.data.i;
- const newOrigin = selected.datum().data.i;
- if (religionId === newOrigin) return; // dragged to itself
- if (d.data.origins.includes(newOrigin)) return; // already a child of the selected node
- if (d.descendants().some(node => node.data.i === newOrigin)) return; // cannot be a child of its own child
-
- const religion = pack.religions[religionId];
- if (religion.origins[0] === 0) religion.origins = [];
- religion.origins.push(newOrigin);
-
- showHierarchy();
- });
- }
- }
-
- function toggleExtinct() {
- $body.dataset.extinct = $body.dataset.extinct !== "show" ? "show" : "hide";
- religionsEditorAddLines();
- }
-
- function enterReligionsManualAssignent() {
- if (!layerIsOn("toggleReligions")) toggleReligions();
- customization = 7;
- relig.append("g").attr("id", "temp");
- document.querySelectorAll("#religionsBottom > button").forEach(el => (el.style.display = "none"));
- byId("religionsManuallyButtons").style.display = "inline-block";
- debug.select("#religionCenters").style("display", "none");
-
- religionsEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden"));
- religionsFooter.style.display = "none";
- $body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
- $("#religionsEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
-
- tip("Click on religion to select, drag the circle to change religion", true);
- viewbox
- .style("cursor", "crosshair")
- .on("click", selectReligionOnMapClick)
- .call(d3.drag().on("start", dragReligionBrush))
- .on("touchmove mousemove", moveReligionBrush);
-
- $body.querySelector("div").classList.add("selected");
- }
-
- function selectReligionOnLineClick(i) {
- if (customization !== 7) return;
- $body.querySelector("div.selected").classList.remove("selected");
- this.classList.add("selected");
- }
-
- function selectReligionOnMapClick() {
- const point = d3.mouse(this);
- const i = findCell(point[0], point[1]);
- if (pack.cells.h[i] < 20) return;
-
- const assigned = relig.select("#temp").select("polygon[data-cell='" + i + "']");
- const religion = assigned.size() ? +assigned.attr("data-religion") : pack.cells.religion[i];
-
- $body.querySelector("div.selected").classList.remove("selected");
- $body.querySelector("div[data-id='" + religion + "']").classList.add("selected");
- }
-
- function dragReligionBrush() {
- const r = +religionsManuallyBrushNumber.value;
-
- d3.event.on("drag", () => {
- if (!d3.event.dx && !d3.event.dy) return;
- const p = d3.mouse(this);
- moveCircle(p[0], p[1], r);
-
- const found = r > 5 ? findAll(p[0], p[1], r) : [findCell(p[0], p[1], r)];
- const selection = found.filter(isLand);
- if (selection) changeReligionForSelection(selection);
- });
- }
-
- // change religion within selection
- function changeReligionForSelection(selection) {
- const temp = relig.select("#temp");
- const selected = $body.querySelector("div.selected");
- const r = +selected.dataset.id; // religionNew
- const color = pack.religions[r].color || "#ffffff";
-
- selection.forEach(function (i) {
- const exists = temp.select("polygon[data-cell='" + i + "']");
- const religionOld = exists.size() ? +exists.attr("data-religion") : pack.cells.religion[i];
- if (r === religionOld) return;
-
- // change of append new element
- if (exists.size()) exists.attr("data-religion", r).attr("fill", color);
- else
- temp
- .append("polygon")
- .attr("data-cell", i)
- .attr("data-religion", r)
- .attr("points", getPackPolygon(i))
- .attr("fill", color);
- });
- }
-
- function moveReligionBrush() {
- showMainTip();
- const point = d3.mouse(this);
- const radius = +religionsManuallyBrushNumber.value;
- moveCircle(point[0], point[1], radius);
- }
-
- function applyReligionsManualAssignent() {
- const changed = relig.select("#temp").selectAll("polygon");
- changed.each(function () {
- const i = +this.dataset.cell;
- const r = +this.dataset.religion;
- pack.cells.religion[i] = r;
- });
-
- if (changed.size()) {
- drawReligions();
- refreshReligionsEditor();
- drawReligionCenters();
- }
- exitReligionsManualAssignment();
- }
-
- function exitReligionsManualAssignment(close) {
- customization = 0;
- relig.select("#temp").remove();
- removeCircle();
- document.querySelectorAll("#religionsBottom > button").forEach(el => (el.style.display = "inline-block"));
- byId("religionsManuallyButtons").style.display = "none";
-
- religionsEditor.querySelectorAll(".hide").forEach(el => el.classList.remove("hidden"));
- religionsFooter.style.display = "block";
- $body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
- if (!close) $("#religionsEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
-
- debug.select("#religionCenters").style("display", null);
- restoreDefaultEvents();
- clearMainTip();
- const selected = $body.querySelector("div.selected");
- if (selected) selected.classList.remove("selected");
- }
-
- function enterAddReligionMode() {
- if (this.classList.contains("pressed")) {
- exitAddReligionMode();
- return;
- }
- customization = 8;
- this.classList.add("pressed");
- tip("Click on the map to add a new religion", true);
- viewbox.style("cursor", "crosshair").on("click", addReligion);
- $body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
- }
-
- function exitAddReligionMode() {
- customization = 0;
- restoreDefaultEvents();
- clearMainTip();
- $body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
- if (religionsAdd.classList.contains("pressed")) religionsAdd.classList.remove("pressed");
- }
-
- function addReligion() {
- const point = d3.mouse(this);
- const center = findCell(point[0], point[1]);
- if (pack.cells.h[center] < 20) {
- tip("You cannot place religion center into the water. Please click on a land cell", false, "error");
- return;
- }
- const occupied = pack.religions.some(r => !r.removed && r.center === center);
- if (occupied) {
- tip("This cell is already a religion center. Please select a different cell", false, "error");
- return;
- }
-
- if (d3.event.shiftKey === false) exitAddReligionMode();
- Religions.add(center);
-
- drawReligions();
- refreshReligionsEditor();
- drawReligionCenters();
- }
-
- function downloadReligionsCsv() {
- const unit = getAreaUnit("2");
- const headers = `Id,Name,Color,Type,Form,Supreme Deity,Area ${unit},Believers,Origins`;
- const lines = Array.from($body.querySelectorAll(":scope > div"));
- const data = lines.map($line => {
- const {id, name, color, type, form, deity, area, population} = $line.dataset;
- const deityText = '"' + deity + '"';
- const {origins} = pack.religions[+id];
- const originList = (origins || []).filter(origin => origin).map(origin => pack.religions[origin].name);
- const originText = '"' + originList.join(", ") + '"';
- return [id, name, color, type, form, deityText, area, population, originText].join(",");
- });
- const csvData = [headers].concat(data).join("\n");
-
- const name = getFileName("Religions") + ".csv";
- downloadFile(csvData, name);
- }
-
- function closeReligionsEditor() {
- debug.select("#religionCenters").remove();
- exitReligionsManualAssignment("close");
- exitAddReligionMode();
- }
-}
diff --git a/versioning.js b/versioning.js
index e9e89f2d..f2da3518 100644
--- a/versioning.js
+++ b/versioning.js
@@ -28,7 +28,7 @@ const version = "1.86.00"; // generator version, update each time
Latest changes:
- Hierarchy tree: cultures and religions can have multiple parents
+ Сultures and religions can have multiple parents in hierarchy tree
Heightmap selection screen
Dialogs optimization for mobile
New heightmap template: Fractious