'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 = document.getElementById('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
document.getElementById('religionsEditorRefresh').addEventListener('click', refreshReligionsEditor);
document.getElementById('religionsEditStyle').addEventListener('click', () => editStyle('relig'));
document.getElementById('religionsLegend').addEventListener('click', toggleLegend);
document.getElementById('religionsPercentage').addEventListener('click', togglePercentageMode);
document.getElementById('religionsHeirarchy').addEventListener('click', showHierarchy);
document.getElementById('religionsExtinct').addEventListener('click', toggleExtinct);
document.getElementById('religionsManually').addEventListener('click', enterReligionsManualAssignent);
document.getElementById('religionsManuallyApply').addEventListener('click', applyReligionsManualAssignent);
document.getElementById('religionsManuallyCancel').addEventListener('click', () => exitReligionsManualAssignment());
document.getElementById('religionsAdd').addEventListener('click', enterAddReligionMode);
document.getElementById('religionsExport').addEventListener('click', downloadReligionsData);
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 = areaUnit.value === 'square' ? ' ' + distanceUnitInput.value + '²' : ' ' + areaUnit.value;
let lines = '',
totalArea = 0,
totalPopulation = 0;
for (const r of pack.religions) {
if (r.removed) continue;
const area = r.area * distanceScaleInput.value ** 2;
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 += ``;
} else {
// No religion (neutral) line
lines += ``;
}
}
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.addEventListener('mouseenter', (ev) => religionHighlightOn(ev)));
body.querySelectorAll('div.religions').forEach((el) => el.addEventListener('mouseleave', (ev) => religionHighlightOff(ev)));
body.querySelectorAll('div.states').forEach((el) => el.addEventListener('click', selectReligionOnLineClick));
body.querySelectorAll('rect.fillRect').forEach((el) => el.addEventListener('click', religionChangeColor));
body.querySelectorAll('div > input.religionName').forEach((el) => el.addEventListener('input', religionChangeName));
body.querySelectorAll('div > select.religionType').forEach((el) => el.addEventListener('change', religionChangeType));
body.querySelectorAll('div > input.religionForm').forEach((el) => el.addEventListener('input', religionChangeForm));
body.querySelectorAll('div > input.religionDeity').forEach((el) => el.addEventListener('input', religionChangeDeity));
body.querySelectorAll('div > span.icon-arrows-cw').forEach((el) => el.addEventListener('click', regenerateDeity));
body.querySelectorAll('div > div.culturePopulation').forEach((el) => el.addEventListener('click', changePopulation));
body.querySelectorAll('div > span.icon-trash-empty').forEach((el) => el.addEventListener('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 religion = +event.target.dataset.id;
const info = document.getElementById('religionInfo');
if (info) {
d3.select('#hierarchy')
.select("g[data-id='" + religion + "'] > path")
.classed('selected', 1);
const r = pack.religions[religion];
const type = r.name.includes(r.type) ? '' : r.type === 'Folk' || r.type === 'Organized' ? '. ' + r.type + ' religion' : '. ' + r.type;
const form = r.form === r.type || r.name.includes(r.form) ? '' : '. ' + r.form;
const rural = r.rural * populationRate;
const urban = r.urban * populationRate * urbanization;
const population = rural + urban > 0 ? '. ' + si(rn(rural + urban)) + ' believers' : '. Extinct';
info.innerHTML = `${r.name}${type}${form}${population}`;
tip('Drag to change parent, drag to itself to move to the top level. Hold CTRL and click to change abbreviation');
}
const el = body.querySelector(`div[data-id='${religion}']`);
if (el) el.classList.add('active');
if (!layerIsOn('toggleReligions')) return;
if (customization) return;
relig
.select('#religion' + religion)
.raise()
.transition(animate)
.attr('stroke-width', 2.5)
.attr('stroke', '#c13119');
debug
.select('#religionsCenter' + religion)
.raise()
.transition(animate)
.attr('r', 8)
.attr('stroke-width', 2)
.attr('stroke', '#c13119');
}
function religionHighlightOff(event) {
const religion = +event.target.dataset.id;
const info = document.getElementById('religionInfo');
if (info) {
d3.select('#hierarchy')
.select("g[data-id='" + religion + "'] > path")
.classed('selected', 0);
info.innerHTML = '';
tip('');
}
const el = body.querySelector(`div[data-id='${religion}']`);
if (el) el.classList.remove('active');
relig
.select('#religion' + religion)
.transition()
.attr('stroke-width', null)
.attr('stroke', null);
debug
.select('#religionsCenter' + religion)
.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.parentNode.dataset.id;
const callback = function (fill) {
el.setAttribute('fill', fill);
pack.religions[religion].color = fill;
relig.select('#religion' + religion).attr('fill', fill);
debug.select('#religionsCenter' + religion).attr('fill', fill);
};
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 = `Please note all population of religion territory is considered
believers of this religion. It means believers number change will directly change population
Rural: 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 religion = +this.parentNode.dataset.id;
alertMessage.innerHTML = 'Are you sure you want to remove the religion?
";
const svg = d3.select('#alertMessage').insert('svg', '#religionInfo').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 nodes = graph.append('g');
renderTree();
function renderTree() {
treeLayout(root);
links
.selectAll('path')
.data(root.links())
.enter()
.append('path')
.attr('d', (d) => {
return (
'M' +
d.source.x +
',' +
d.source.y +
'C' +
d.source.x +
',' +
(d.source.y * 3 + d.target.y) / 4 +
' ' +
d.target.x +
',' +
(d.source.y * 2 + d.target.y) / 3 +
' ' +
d.target.x +
',' +
d.target.y
);
});
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(event))
.on('mouseleave', () => religionHighlightOff(event))
.call(d3.drag().on('start', (d) => dragToReorigin(d)));
node
.append('path')
.attr('d', (d) => {
if (d.data.type === 'Folk') return 'M11.3,0A11.3,11.3,0,1,1,-11.3,0A11.3,11.3,0,1,1,11.3,0';
// circle
else if (d.data.type === 'Heresy') return 'M0,-14L14,0L0,14L-14,0Z';
// diamond
else if (d.data.type === 'Cult') return 'M-6.5,-11.26l13,0l6.5,11.26l-6.5,11.26l-13,0l-6.5,-11.26Z';
// hex
else if (!d.data.i) return 'M5,0A5,5,0,1,1,-5,0A5,5,0,1,1,5,0';
// small circle
else return 'M-11,-11h22v22h-22Z'; // square
})
.attr('fill', (d) => (d.data.i ? d.data.color : '#ffffff'))
.attr('stroke-dasharray', (d) => (d.data.cells ? 'null' : '1'));
node
.append('text')
.attr('dy', '.35em')
.text((d) => (d.data.i ? 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 dragToReorigin(d) {
if (isCtrlClick(d3.event.sourceEvent)) {
changeCode(d);
return;
}
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('path.selected');
if (!selected.size()) return;
const religion = d.data.i;
const oldOrigin = d.data.origin;
let newOrigin = selected.datum().data.i;
if (newOrigin == oldOrigin) return; // already a child of the selected node
if (newOrigin == religion) newOrigin = 0; // move to top
if (newOrigin && d.descendants().some((node) => node.id == newOrigin)) return; // cannot be a child of its own child
pack.religions[religion].origin = d.data.origin = newOrigin; // change data
showHierarchy(); // update hierarchy
});
}
function changeCode(d) {
prompt(`Please provide an abbreviation for ${d.data.name}`, {default: d.data.code}, (v) => {
pack.religions[d.data.i].code = v;
nodes
.select("g[data-id='" + d.data.i + "']")
.select('text')
.text(v);
});
}
}
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'));
document.getElementById('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'));
document.getElementById('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 downloadReligionsData() {
const unit = areaUnit.value === 'square' ? distanceUnitInput.value + '2' : areaUnit.value;
let data = 'Id,Religion,Color,Type,Form,Deity,Area ' + unit + ',Believers\n'; // headers
body.querySelectorAll(':scope > div').forEach(function (el) {
data += el.dataset.id + ',';
data += el.dataset.name + ',';
data += el.dataset.color + ',';
data += el.dataset.type + ',';
data += el.dataset.form + ',';
data += el.dataset.deity.replace(',', ' -') + ',';
data += el.dataset.area + ',';
data += el.dataset.population + '\n';
});
const name = getFileName('Religions') + '.csv';
downloadFile(data, name);
}
function closeReligionsEditor() {
debug.select('#religionCenters').remove();
exitReligionsManualAssignment('close');
exitAddReligionMode();
}
}