mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 09:41:24 +01:00
refactor: load religions editor dynamically
This commit is contained in:
Azgaar
parent
b416551fb5
commit
221079321f
8 changed files with 1187 additions and 1135 deletions
22
index.css
22
index.css
|
|
@ -1619,28 +1619,6 @@ div.states > .riverType {
|
||||||
color: #abaaaa;
|
color: #abaaaa;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.states > .religionName {
|
|
||||||
width: 11em;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.states > .religionType {
|
|
||||||
width: 5em;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 0;
|
|
||||||
background-color: transparent;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.states > .religionForm {
|
|
||||||
width: 6em;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.states > .religionDeity {
|
|
||||||
width: 15em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.placeholder {
|
.placeholder {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
|
|
||||||
103
index.html
103
index.html
|
|
@ -4739,106 +4739,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="religionsEditor" class="dialog stable" style="display: none">
|
|
||||||
<div id="religionsHeader" class="header" style="grid-template-columns: 13em 6em 7em 16em 5em 6em">
|
|
||||||
<div data-tip="Click to sort by religion name" class="sortable alphabetically" data-sortby="name">
|
|
||||||
Religion
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
data-tip="Click to sort by religion type"
|
|
||||||
class="sortable alphabetically icon-sort-name-down"
|
|
||||||
data-sortby="type"
|
|
||||||
>
|
|
||||||
Type
|
|
||||||
</div>
|
|
||||||
<div data-tip="Click to sort by religion form" class="sortable alphabetically hide" data-sortby="form">
|
|
||||||
Form
|
|
||||||
</div>
|
|
||||||
<div data-tip="Click to sort by supreme deity" class="sortable alphabetically hide" data-sortby="deity">
|
|
||||||
Supreme Deity
|
|
||||||
</div>
|
|
||||||
<div data-tip="Click to sort by religion area" class="sortable hide" data-sortby="area">Area </div>
|
|
||||||
<div
|
|
||||||
data-tip="Click to sort by number of believers (religion area population)"
|
|
||||||
class="sortable hide"
|
|
||||||
data-sortby="population"
|
|
||||||
>
|
|
||||||
Believers
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="religionsBody" class="table" data-type="absolute"></div>
|
|
||||||
|
|
||||||
<div id="religionsFooter" class="totalLine">
|
|
||||||
<div data-tip="Total number of organized religions" style="margin-left: 12px">
|
|
||||||
Organized: <span id="religionsOrganized">0</span>
|
|
||||||
</div>
|
|
||||||
<div data-tip="Total number of heresies" style="margin-left: 12px">
|
|
||||||
Heresies: <span id="religionsHeresies">0</span>
|
|
||||||
</div>
|
|
||||||
<div data-tip="Total number of cults" style="margin-left: 12px">
|
|
||||||
Cults: <span id="religionsCults">0</span>
|
|
||||||
</div>
|
|
||||||
<div data-tip="Total number of folk religions" style="margin-left: 12px">
|
|
||||||
Folk: <span id="religionsFolk">0</span>
|
|
||||||
</div>
|
|
||||||
<div data-tip="Total land area" style="margin-left: 12px">
|
|
||||||
Land Area: <span id="religionsFooterArea">0</span>
|
|
||||||
</div>
|
|
||||||
<div data-tip="Total number of believers (population)" style="margin-left: 12px">
|
|
||||||
Believers: <span id="religionsFooterPopulation">0</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="religionsBottom">
|
|
||||||
<button id="religionsEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
|
|
||||||
<button id="religionsEditStyle" data-tip="Edit religions style in Style Editor" class="icon-adjust"></button>
|
|
||||||
<button id="religionsLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
|
|
||||||
<button
|
|
||||||
id="religionsPercentage"
|
|
||||||
data-tip="Toggle percentage / absolute values display mode"
|
|
||||||
class="icon-percent"
|
|
||||||
></button>
|
|
||||||
<button id="religionsHeirarchy" data-tip="Show religions hierarchy tree" class="icon-sitemap"></button>
|
|
||||||
<button
|
|
||||||
id="religionsExtinct"
|
|
||||||
data-tip="Show/hide extinct religions (religions without cells)"
|
|
||||||
class="icon-eye-off"
|
|
||||||
></button>
|
|
||||||
|
|
||||||
<button id="religionsManually" data-tip="Manually re-assign religions" class="icon-brush"></button>
|
|
||||||
<div id="religionsManuallyButtons" style="display: none">
|
|
||||||
<label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
|
|
||||||
>Brush size:
|
|
||||||
<input
|
|
||||||
id="religionsManuallyBrush"
|
|
||||||
oninput="tip('Brush size: '+this.value); religionsManuallyBrushNumber.value = this.value"
|
|
||||||
type="range"
|
|
||||||
min="5"
|
|
||||||
max="99"
|
|
||||||
value="15"
|
|
||||||
style="width: 7em"
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
id="religionsManuallyBrushNumber"
|
|
||||||
oninput="tip('Brush size: '+this.value); religionsManuallyBrush.value = this.value"
|
|
||||||
type="number"
|
|
||||||
min="5"
|
|
||||||
max="99"
|
|
||||||
value="15"
|
|
||||||
/> </label
|
|
||||||
><br />
|
|
||||||
<button id="religionsManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
|
|
||||||
<button id="religionsManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
id="religionsAdd"
|
|
||||||
data-tip="Add a new religion. Hold Shift to add multiple"
|
|
||||||
class="icon-plus"
|
|
||||||
></button>
|
|
||||||
<button id="religionsExport" data-tip="Download religions-related data" class="icon-download"></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="emblemEditor" class="dialog stable" style="display: none">
|
<div id="emblemEditor" class="dialog stable" style="display: none">
|
||||||
<svg viewBox="0 0 200 200"><use id="emblemImage"></use></svg>
|
<svg viewBox="0 0 200 200"><use id="emblemImage"></use></svg>
|
||||||
<div id="emblemBody">
|
<div id="emblemBody">
|
||||||
|
|
@ -7928,7 +7828,7 @@
|
||||||
|
|
||||||
<script defer src="modules/relief-icons.js"></script>
|
<script defer src="modules/relief-icons.js"></script>
|
||||||
<script defer src="modules/ui/style.js"></script>
|
<script defer src="modules/ui/style.js"></script>
|
||||||
<script defer src="modules/ui/editors.js?v=01062022"></script>
|
<script defer src="modules/ui/editors.js?v=06062022"></script>
|
||||||
<script defer src="modules/ui/tools.js?v=01062022"></script>
|
<script defer src="modules/ui/tools.js?v=01062022"></script>
|
||||||
<script defer src="modules/ui/world-configurator.js?v=29052022"></script>
|
<script defer src="modules/ui/world-configurator.js?v=29052022"></script>
|
||||||
<script defer src="modules/ui/heightmap-editor.js?v=29052020"></script>
|
<script defer src="modules/ui/heightmap-editor.js?v=29052020"></script>
|
||||||
|
|
@ -7945,7 +7845,6 @@
|
||||||
<script defer src="modules/ui/rivers-editor.js"></script>
|
<script defer src="modules/ui/rivers-editor.js"></script>
|
||||||
<script defer src="modules/ui/rivers-creator.js"></script>
|
<script defer src="modules/ui/rivers-creator.js"></script>
|
||||||
<script defer src="modules/ui/relief-editor.js"></script>
|
<script defer src="modules/ui/relief-editor.js"></script>
|
||||||
<script defer src="modules/ui/religions-editor.js?v=18052022"></script>
|
|
||||||
<script defer src="modules/ui/burg-editor.js"></script>
|
<script defer src="modules/ui/burg-editor.js"></script>
|
||||||
<script defer src="modules/ui/units-editor.js"></script>
|
<script defer src="modules/ui/units-editor.js"></script>
|
||||||
<script defer src="modules/ui/notes-editor.js?v=29052022"></script>
|
<script defer src="modules/ui/notes-editor.js?v=29052022"></script>
|
||||||
|
|
|
||||||
|
|
@ -115,7 +115,9 @@ function refreshCulturesEditor() {
|
||||||
|
|
||||||
function culturesCollectStatistics() {
|
function culturesCollectStatistics() {
|
||||||
const {cells, cultures, burgs} = pack;
|
const {cells, cultures, burgs} = pack;
|
||||||
cultures.forEach(c => (c.cells = c.area = c.rural = c.urban = 0));
|
cultures.forEach(c => {
|
||||||
|
c.cells = c.area = c.rural = c.urban = 0;
|
||||||
|
});
|
||||||
|
|
||||||
for (const i of cells.i) {
|
for (const i of cells.i) {
|
||||||
if (cells.h[i] < 20) continue;
|
if (cells.h[i] < 20) continue;
|
||||||
|
|
@ -143,7 +145,7 @@ function culturesEditorAddLines() {
|
||||||
const rural = c.rural * populationRate;
|
const rural = c.rural * populationRate;
|
||||||
const urban = c.urban * populationRate * urbanization;
|
const urban = c.urban * populationRate * urbanization;
|
||||||
const population = rn(rural + urban);
|
const population = rn(rural + urban);
|
||||||
const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(
|
const populationTip = `Total population: ${si(population)}. Rural population: ${si(rural)}. Urban population: ${si(
|
||||||
urban
|
urban
|
||||||
)}. Click to edit`;
|
)}. Click to edit`;
|
||||||
totalArea += area;
|
totalArea += area;
|
||||||
|
|
@ -153,13 +155,13 @@ function culturesEditorAddLines() {
|
||||||
// Uncultured (neutral) line
|
// Uncultured (neutral) line
|
||||||
lines += /* html */ `<div
|
lines += /* html */ `<div
|
||||||
class="states"
|
class="states"
|
||||||
data-id=${c.i}
|
data-id="${c.i}"
|
||||||
data-name="${c.name}"
|
data-name="${c.name}"
|
||||||
data-color=""
|
data-color=""
|
||||||
data-cells=${c.cells}
|
data-cells="${c.cells}"
|
||||||
data-area=${area}
|
data-area="${area}"
|
||||||
data-population=${population}
|
data-population="${population}"
|
||||||
data-base=${c.base}
|
data-base="${c.base}"
|
||||||
data-type=""
|
data-type=""
|
||||||
data-expansionism=""
|
data-expansionism=""
|
||||||
data-emblems="${c.shield}"
|
data-emblems="${c.shield}"
|
||||||
|
|
@ -169,9 +171,8 @@ function culturesEditorAddLines() {
|
||||||
value="${c.name}" autocorrect="off" spellcheck="false" />
|
value="${c.name}" autocorrect="off" spellcheck="false" />
|
||||||
<span class="icon-cw placeholder"></span>
|
<span class="icon-cw placeholder"></span>
|
||||||
<select class="cultureType placeholder">${getTypeOptions(c.type)}</select>
|
<select class="cultureType placeholder">${getTypeOptions(c.type)}</select>
|
||||||
<select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names" class="cultureBase">${getBaseOptions(
|
<select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names"
|
||||||
c.base
|
class="cultureBase">${getBaseOptions(c.base)}</select>
|
||||||
)}</select>
|
|
||||||
<span data-tip="Cells count" class="icon-check-empty hide"></span>
|
<span data-tip="Cells count" class="icon-check-empty hide"></span>
|
||||||
<div data-tip="Cells count" class="cultureCells hide" style="width: 4em">${c.cells}</div>
|
<div data-tip="Cells count" class="cultureCells hide" style="width: 4em">${c.cells}</div>
|
||||||
<span class="icon-resize-full placeholder hide"></span>
|
<span class="icon-resize-full placeholder hide"></span>
|
||||||
|
|
@ -179,9 +180,8 @@ function culturesEditorAddLines() {
|
||||||
<span data-tip="Culture area" style="padding-right: 4px" class="icon-map-o hide"></span>
|
<span data-tip="Culture area" style="padding-right: 4px" class="icon-map-o hide"></span>
|
||||||
<div data-tip="Culture area" class="cultureArea hide" style="width: 6em">${si(area)} ${unit}</div>
|
<div data-tip="Culture area" class="cultureArea hide" style="width: 6em">${si(area)} ${unit}</div>
|
||||||
<span data-tip="${populationTip}" class="icon-male hide"></span>
|
<span data-tip="${populationTip}" class="icon-male hide"></span>
|
||||||
<div data-tip="${populationTip}" class="culturePopulation hide pointer" style="width: 5em">${si(
|
<div data-tip="${populationTip}" class="culturePopulation hide pointer"
|
||||||
population
|
style="width: 5em">${si(population)}</div>
|
||||||
)}</div>
|
|
||||||
<span data-tip="Click to re-generate names for burgs with this culture assigned" class="icon-arrows-cw hide"></span>
|
<span data-tip="Click to re-generate names for burgs with this culture assigned" class="icon-arrows-cw hide"></span>
|
||||||
${getShapeOptions(selectShape, c.shield)}
|
${getShapeOptions(selectShape, c.shield)}
|
||||||
</div>`;
|
</div>`;
|
||||||
|
|
@ -190,27 +190,25 @@ function culturesEditorAddLines() {
|
||||||
|
|
||||||
lines += /* html */ `<div
|
lines += /* html */ `<div
|
||||||
class="states cultures"
|
class="states cultures"
|
||||||
data-id=${c.i}
|
data-id="${c.i}"
|
||||||
data-name="${c.name}"
|
data-name="${c.name}"
|
||||||
data-color="${c.color}"
|
data-color="${c.color}"
|
||||||
data-cells=${c.cells}
|
data-cells="${c.cells}"
|
||||||
data-area=${area}
|
data-area="${area}"
|
||||||
data-population=${population}
|
data-population="${population}"
|
||||||
data-base=${c.base}
|
data-base="${c.base}"
|
||||||
data-type=${c.type}
|
data-type="${c.type}"
|
||||||
data-expansionism=${c.expansionism}
|
data-expansionism="${c.expansionism}"
|
||||||
data-emblems="${c.shield}"
|
data-emblems="${c.shield}"
|
||||||
>
|
>
|
||||||
<fill-box fill="${c.color}"></fill-box>
|
<fill-box fill="${c.color}"></fill-box>
|
||||||
<input data-tip="Culture name. Click and type to change" class="cultureName" style="width: 7em"
|
<input data-tip="Culture name. Click and type to change" class="cultureName" style="width: 7em"
|
||||||
value="${c.name}" autocorrect="off" spellcheck="false" />
|
value="${c.name}" autocorrect="off" spellcheck="false" />
|
||||||
<span data-tip="Regenerate culture name" class="icon-cw hiddenIcon" style="visibility: hidden"></span>
|
<span data-tip="Regenerate culture name" class="icon-cw hiddenIcon" style="visibility: hidden"></span>
|
||||||
<select data-tip="Culture type. Defines growth model. Click to change" class="cultureType">${getTypeOptions(
|
<select data-tip="Culture type. Defines growth model. Click to change"
|
||||||
c.type
|
class="cultureType">${getTypeOptions(c.type)}</select>
|
||||||
)}</select>
|
<select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names"
|
||||||
<select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names" class="cultureBase">${getBaseOptions(
|
class="cultureBase">${getBaseOptions(c.base)}</select>
|
||||||
c.base
|
|
||||||
)}</select>
|
|
||||||
<span data-tip="Cells count" class="icon-check-empty hide"></span>
|
<span data-tip="Cells count" class="icon-check-empty hide"></span>
|
||||||
<div data-tip="Cells count" class="cultureCells hide" style="width: 4em">${c.cells}</div>
|
<div data-tip="Cells count" class="cultureCells hide" style="width: 4em">${c.cells}</div>
|
||||||
<span data-tip="Culture expansionism. Defines competitive size" class="icon-resize-full hide"></span>
|
<span data-tip="Culture expansionism. Defines competitive size" class="icon-resize-full hide"></span>
|
||||||
|
|
@ -226,9 +224,8 @@ function culturesEditorAddLines() {
|
||||||
<span data-tip="Culture area" style="padding-right: 4px" class="icon-map-o hide"></span>
|
<span data-tip="Culture area" style="padding-right: 4px" class="icon-map-o hide"></span>
|
||||||
<div data-tip="Culture area" class="cultureArea hide" style="width: 6em">${si(area)} ${unit}</div>
|
<div data-tip="Culture area" class="cultureArea hide" style="width: 6em">${si(area)} ${unit}</div>
|
||||||
<span data-tip="${populationTip}" class="icon-male hide"></span>
|
<span data-tip="${populationTip}" class="icon-male hide"></span>
|
||||||
<div data-tip="${populationTip}" class="culturePopulation hide pointer" style="width: 5em">${si(
|
<div data-tip="${populationTip}" class="culturePopulation hide pointer"
|
||||||
population
|
style="width: 5em">${si(population)}</div>
|
||||||
)}</div>
|
|
||||||
<span data-tip="Click to re-generate names for burgs with this culture assigned" class="icon-arrows-cw hide"></span>
|
<span data-tip="Click to re-generate names for burgs with this culture assigned" class="icon-arrows-cw hide"></span>
|
||||||
${getShapeOptions(selectShape, c.shield)}
|
${getShapeOptions(selectShape, c.shield)}
|
||||||
<span data-tip="Remove culture" class="icon-trash-empty hide"></span>
|
<span data-tip="Remove culture" class="icon-trash-empty hide"></span>
|
||||||
|
|
@ -257,7 +254,7 @@ function culturesEditorAddLines() {
|
||||||
$body.querySelectorAll("div > select.cultureEmblems").forEach(el => el.on("change", cultureChangeEmblemsShape));
|
$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 > 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-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");
|
const $culturesHeader = byId("culturesHeader");
|
||||||
$culturesHeader.querySelector("div[data-sortby='emblems']").style.display = selectShape ? "inline-block" : "none";
|
$culturesHeader.querySelector("div[data-sortby='emblems']").style.display = selectShape ? "inline-block" : "none";
|
||||||
|
|
@ -350,16 +347,16 @@ function cultureHighlightOff(event) {
|
||||||
function cultureChangeColor() {
|
function cultureChangeColor() {
|
||||||
const $el = this;
|
const $el = this;
|
||||||
const currentFill = $el.getAttribute("fill");
|
const currentFill = $el.getAttribute("fill");
|
||||||
const culture = +$el.parentNode.dataset.id;
|
const cultureId = +$el.parentNode.dataset.id;
|
||||||
|
|
||||||
const callback = newFill => {
|
const callback = newFill => {
|
||||||
$el.fill = newFill;
|
$el.fill = newFill;
|
||||||
pack.cultures[culture].color = newFill;
|
pack.cultures[cultureId].color = newFill;
|
||||||
cults
|
cults
|
||||||
.select("#culture" + culture)
|
.select("#culture" + cultureId)
|
||||||
.attr("fill", newFill)
|
.attr("fill", newFill)
|
||||||
.attr("stroke", newFill);
|
.attr("stroke", newFill);
|
||||||
debug.select("#cultureCenter" + culture).attr("fill", newFill);
|
debug.select("#cultureCenter" + cultureId).attr("fill", newFill);
|
||||||
};
|
};
|
||||||
|
|
||||||
openPicker(currentFill, callback);
|
openPicker(currentFill, callback);
|
||||||
|
|
@ -451,16 +448,20 @@ function changePopulation() {
|
||||||
const rural = rn(culture.rural * populationRate);
|
const rural = rn(culture.rural * populationRate);
|
||||||
const urban = rn(culture.urban * populationRate * urbanization);
|
const urban = rn(culture.urban * populationRate * urbanization);
|
||||||
const total = rural + urban;
|
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);
|
const burgs = pack.burgs.filter(b => !b.removed && b.culture === cultureId);
|
||||||
|
|
||||||
alertMessage.innerHTML = /* html */ `Rural: <input type="number" min="0" step="1" id="ruralPop" value=${rural} style="width:6em" /> Urban:
|
alertMessage.innerHTML = /* html */ `<div>
|
||||||
<input type="number" min="0" step="1" id="urbanPop" value=${urban} style="width:6em" ${
|
<i>Change population of all cells assigned to the culture</i>
|
||||||
burgs.length ? "" : "disabled"
|
<div style="margin: 0.5em 0">
|
||||||
} />
|
Rural: <input type="number" min="0" step="1" id="ruralPop" value=${rural} style="width:6em" />
|
||||||
<p>Total population: ${l(total)} ⇒ <span id="totalPop">${l(
|
Urban: <input type="number" min="0" step="1" id="urbanPop" value=${urban} style="width:6em"
|
||||||
total
|
${burgs.length ? "" : "disabled"} />
|
||||||
)}</span> (<span id="totalPopPerc">100</span>%)</p>`;
|
</div>
|
||||||
|
<div>Total population: ${format(total)} ⇒ <span id="totalPop">${format(total)}</span>
|
||||||
|
(<span id="totalPopPerc">100</span>%)
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
const update = function () {
|
const update = function () {
|
||||||
const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
|
const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
|
||||||
|
|
@ -552,23 +553,15 @@ function removeCulture(cultureId) {
|
||||||
refreshCulturesEditor();
|
refreshCulturesEditor();
|
||||||
}
|
}
|
||||||
|
|
||||||
function cultureRemove() {
|
function cultureRemovePrompt() {
|
||||||
if (customization === 4) return;
|
if (customization) return;
|
||||||
const cultureId = +this.parentNode.dataset.id;
|
|
||||||
|
|
||||||
alertMessage.innerHTML = "Are you sure you want to remove the culture? <br>This action cannot be reverted";
|
const cultureId = +this.parentNode.dataset.id;
|
||||||
$("#alert").dialog({
|
confirmationDialog({
|
||||||
resizable: false,
|
|
||||||
title: "Remove culture",
|
title: "Remove culture",
|
||||||
buttons: {
|
message: "Are you sure you want to remove the culture? <br>This action cannot be reverted",
|
||||||
Remove: function () {
|
confirm: "Remove",
|
||||||
removeCulture(cultureId);
|
onConfirm: () => removeCulture(cultureId)
|
||||||
$(this).dialog("close");
|
|
||||||
},
|
|
||||||
Cancel: function () {
|
|
||||||
$(this).dialog("close");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -608,22 +601,21 @@ function drawCultureCenters() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function cultureCenterDrag() {
|
function cultureCenterDrag() {
|
||||||
const el = d3.select(this);
|
const $el = d3.select(this);
|
||||||
const c = +this.id.slice(13);
|
const cultureId = +this.id.slice(13);
|
||||||
d3.event.on("drag", () => {
|
d3.event.on("drag", () => {
|
||||||
el.attr("cx", d3.event.x).attr("cy", d3.event.y);
|
const {x, y} = d3.event;
|
||||||
const cell = findCell(d3.event.x, d3.event.y);
|
$el.attr("cx", x).attr("cy", y);
|
||||||
|
const cell = findCell(x, y);
|
||||||
if (pack.cells.h[cell] < 20) return; // ignore dragging on water
|
if (pack.cells.h[cell] < 20) return; // ignore dragging on water
|
||||||
pack.cultures[c].center = cell;
|
pack.cultures[cultureId].center = cell;
|
||||||
recalculateCultures();
|
recalculateCultures();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleLegend() {
|
function toggleLegend() {
|
||||||
if (legend.selectAll("*").size()) {
|
if (legend.selectAll("*").size()) return clearLegend();
|
||||||
clearLegend();
|
|
||||||
return;
|
|
||||||
} // hide legend
|
|
||||||
const data = pack.cultures
|
const data = pack.cultures
|
||||||
.filter(c => c.i && !c.removed && c.cells)
|
.filter(c => c.i && !c.removed && c.cells)
|
||||||
.sort((a, b) => b.area - a.area)
|
.sort((a, b) => b.area - a.area)
|
||||||
|
|
@ -634,14 +626,15 @@ function toggleLegend() {
|
||||||
function togglePercentageMode() {
|
function togglePercentageMode() {
|
||||||
if ($body.dataset.type === "absolute") {
|
if ($body.dataset.type === "absolute") {
|
||||||
$body.dataset.type = "percentage";
|
$body.dataset.type = "percentage";
|
||||||
const totalCells = +culturesFooterCells.innerHTML;
|
const totalCells = +byId("culturesFooterCells").innerText;
|
||||||
const totalArea = +culturesFooterArea.dataset.area;
|
const totalArea = +byId("culturesFooterArea").dataset.area;
|
||||||
const totalPopulation = +culturesFooterPopulation.dataset.population;
|
const totalPopulation = +byId("culturesFooterPopulation").dataset.population;
|
||||||
|
|
||||||
$body.querySelectorAll(":scope > div").forEach(function (el) {
|
$body.querySelectorAll(":scope > div").forEach(function (el) {
|
||||||
el.querySelector(".cultureCells").innerHTML = rn((+el.dataset.cells / totalCells) * 100) + "%";
|
const {cells, area, population} = el.dataset;
|
||||||
el.querySelector(".cultureArea").innerHTML = rn((+el.dataset.area / totalArea) * 100) + "%";
|
el.querySelector(".cultureCells").innerText = rn((+cells / totalCells) * 100) + "%";
|
||||||
el.querySelector(".culturePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%";
|
el.querySelector(".cultureArea").innerText = rn((+area / totalArea) * 100) + "%";
|
||||||
|
el.querySelector(".culturePopulation").innerText = rn((+population / totalPopulation) * 100) + "%";
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
$body.dataset.type = "absolute";
|
$body.dataset.type = "absolute";
|
||||||
|
|
|
||||||
928
modules/dynamic/editors/religions-editor.js
Normal file
928
modules/dynamic/editors/religions-editor.js
Normal file
|
|
@ -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 */ `<div id="religionsEditor" class="dialog stable">
|
||||||
|
<div id="religionsHeader" class="header" style="grid-template-columns: 13em 6em 7em 18em 5em 6em">
|
||||||
|
<div data-tip="Click to sort by religion name" class="sortable alphabetically" data-sortby="name">Religion </div>
|
||||||
|
<div data-tip="Click to sort by religion type" class="sortable alphabetically icon-sort-name-down" data-sortby="type">Type </div>
|
||||||
|
<div data-tip="Click to sort by religion form" class="sortable alphabetically hide" data-sortby="form">Form </div>
|
||||||
|
<div data-tip="Click to sort by supreme deity" class="sortable alphabetically hide" data-sortby="deity">Supreme Deity </div>
|
||||||
|
<div data-tip="Click to sort by religion area" class="sortable hide" data-sortby="area">Area </div>
|
||||||
|
<div data-tip="Click to sort by number of believers (religion area population)" class="sortable hide" data-sortby="population">Believers </div>
|
||||||
|
</div>
|
||||||
|
<div id="religionsBody" class="table" data-type="absolute"></div>
|
||||||
|
|
||||||
|
<div id="religionsFooter" class="totalLine">
|
||||||
|
<div data-tip="Total number of organized religions" style="margin-left: 12px">
|
||||||
|
Organized: <span id="religionsOrganized">0</span>
|
||||||
|
</div>
|
||||||
|
<div data-tip="Total number of heresies" style="margin-left: 12px">
|
||||||
|
Heresies: <span id="religionsHeresies">0</span>
|
||||||
|
</div>
|
||||||
|
<div data-tip="Total number of cults" style="margin-left: 12px">
|
||||||
|
Cults: <span id="religionsCults">0</span>
|
||||||
|
</div>
|
||||||
|
<div data-tip="Total number of folk religions" style="margin-left: 12px">
|
||||||
|
Folk: <span id="religionsFolk">0</span>
|
||||||
|
</div>
|
||||||
|
<div data-tip="Total land area" style="margin-left: 12px">
|
||||||
|
Land Area: <span id="religionsFooterArea">0</span>
|
||||||
|
</div>
|
||||||
|
<div data-tip="Total number of believers (population)" style="margin-left: 12px">
|
||||||
|
Believers: <span id="religionsFooterPopulation">0</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="religionsBottom">
|
||||||
|
<button id="religionsEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
|
||||||
|
<button id="religionsEditStyle" data-tip="Edit religions style in Style Editor" class="icon-adjust"></button>
|
||||||
|
<button id="religionsLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
|
||||||
|
<button id="religionsPercentage" data-tip="Toggle percentage / absolute values display mode" class="icon-percent"></button>
|
||||||
|
<button id="religionsHeirarchy" data-tip="Show religions hierarchy tree" class="icon-sitemap"></button>
|
||||||
|
<button id="religionsExtinct" data-tip="Show/hide extinct religions (religions without cells)" class="icon-eye-off"></button>
|
||||||
|
|
||||||
|
<button id="religionsManually" data-tip="Manually re-assign religions" class="icon-brush"></button>
|
||||||
|
<div id="religionsManuallyButtons" style="display: none">
|
||||||
|
<label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic">Brush size:
|
||||||
|
<input
|
||||||
|
id="religionsManuallyBrush"
|
||||||
|
oninput="tip('Brush size: '+this.value); religionsManuallyBrushNumber.value = this.value"
|
||||||
|
type="range"
|
||||||
|
min="5"
|
||||||
|
max="99"
|
||||||
|
value="15"
|
||||||
|
style="width: 7em"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
id="religionsManuallyBrushNumber"
|
||||||
|
oninput="tip('Brush size: '+this.value); religionsManuallyBrush.value = this.value"
|
||||||
|
type="number"
|
||||||
|
min="5"
|
||||||
|
max="99"
|
||||||
|
value="15"
|
||||||
|
/> </label
|
||||||
|
><br />
|
||||||
|
<button id="religionsManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
|
||||||
|
<button id="religionsManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
|
||||||
|
</div>
|
||||||
|
<button id="religionsAdd" data-tip="Add a new religion. Hold Shift to add multiple" class="icon-plus"></button>
|
||||||
|
<button id="religionsExport" data-tip="Download religions-related data" class="icon-download"></button>
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
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 */ `<div
|
||||||
|
class="states"
|
||||||
|
data-id="${r.i}"
|
||||||
|
data-name="${r.name}"
|
||||||
|
data-color=""
|
||||||
|
data-area="${area}"
|
||||||
|
data-population="${population}"
|
||||||
|
data-type=""
|
||||||
|
data-form=""
|
||||||
|
data-deity=""
|
||||||
|
data-expansionism=""
|
||||||
|
>
|
||||||
|
<svg width="11" height="11" class="placeholder"></svg>
|
||||||
|
<input data-tip="Religion name. Click and type to change" class="religionName italic" style="width: 11em"
|
||||||
|
value="${r.name}" autocorrect="off" spellcheck="false" />
|
||||||
|
<select data-tip="Religion type" class="religionType placeholder" style="width: 5em">
|
||||||
|
${getTypeOptions(r.type)}
|
||||||
|
</select>
|
||||||
|
<input data-tip="Religion form" class="religionForm placeholder hide" style="width: 6em" value="" autocorrect="off" spellcheck="false" />
|
||||||
|
<span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw placeholder hide"></span>
|
||||||
|
<input data-tip="Religion supreme deity" class="religionDeity placeholder hide" style="width: 17em" value="" autocorrect="off" spellcheck="false" />
|
||||||
|
<span data-tip="Religion area" style="padding-right: 4px" class="icon-map-o hide"></span>
|
||||||
|
<div data-tip="Religion area" class="religionArea hide" style="width: 5em">${si(area) + unit}</div>
|
||||||
|
<span data-tip="${populationTip}" class="icon-male hide"></span>
|
||||||
|
<div data-tip="${populationTip}" class="religionPopulation hide pointer">${si(population)}</div>
|
||||||
|
</div>`;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
lines += /* html */ `<div
|
||||||
|
class="states"
|
||||||
|
data-id=${r.i}
|
||||||
|
data-name="${r.name}"
|
||||||
|
data-color="${r.color}"
|
||||||
|
data-area=${area}
|
||||||
|
data-population=${population}
|
||||||
|
data-type="${r.type}"
|
||||||
|
data-form="${r.form}"
|
||||||
|
data-deity="${r.deity || ""}"
|
||||||
|
data-expansionism="${r.expansionism}"
|
||||||
|
>
|
||||||
|
<fill-box fill="${r.color}"></fill-box>
|
||||||
|
<input data-tip="Religion name. Click and type to change" class="religionName" style="width: 11em"
|
||||||
|
value="${r.name}" autocorrect="off" spellcheck="false" />
|
||||||
|
<select data-tip="Religion type" class="religionType" style="width: 5em">
|
||||||
|
${getTypeOptions(r.type)}
|
||||||
|
</select>
|
||||||
|
<input data-tip="Religion form" class="religionForm hide" style="width: 6em"
|
||||||
|
value="${r.form}" autocorrect="off" spellcheck="false" />
|
||||||
|
<span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw hide"></span>
|
||||||
|
<input data-tip="Religion supreme deity" class="religionDeity hide" style="width: 17em"
|
||||||
|
value="${r.deity || ""}" autocorrect="off" spellcheck="false" />
|
||||||
|
<span data-tip="Religion area" style="padding-right: 4px" class="icon-map-o hide"></span>
|
||||||
|
<div data-tip="Religion area" class="religionArea hide" style="width: 5em">${si(area) + unit}</div>
|
||||||
|
<span data-tip="${populationTip}" class="icon-male hide"></span>
|
||||||
|
<div data-tip="${populationTip}" class="religionPopulation hide pointer">${si(population)}</div>
|
||||||
|
<span data-tip="Remove religion" class="icon-trash-empty hide"></span>
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
|
$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 += `<option ${type === t ? "selected" : ""} value="${t}">${t}</option>`));
|
||||||
|
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 */ `<div>
|
||||||
|
<i>All population of religion territory is considered believers of this religion. It means believers number change will directly affect population</i>
|
||||||
|
<div style="margin: 0.5em 0">
|
||||||
|
Rural: <input type="number" min="0" step="1" id="ruralPop" value=${rural} style="width:6em" />
|
||||||
|
Urban: <input type="number" min="0" step="1" id="urbanPop" value=${urban} style="width:6em"
|
||||||
|
${burgs.length ? "" : "disabled"} />
|
||||||
|
</div>
|
||||||
|
<div>Total population: ${format(total)} ⇒ <span id="totalPop">${format(total)}</span>
|
||||||
|
(<span id="totalPopPerc">100</span>%)
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
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? <br>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 */ `<div id="religionChartDetails" class='chartInfo'>
|
||||||
|
<div id='religionInfo' style="display: block">‍</div>
|
||||||
|
<div id='religionSelected' style="display: none">
|
||||||
|
<span><span id='religionSelectedName'></span>. </span>
|
||||||
|
<span data-name="Type religion short name (abbreviation)">Abbreviation: <input id='religionSelectedCode' type='text' maxlength='3' size='3' /></span>
|
||||||
|
<button data-tip='Clear origin, religion will be linked to top level' id='religionSelectedClear'>Clear</button>
|
||||||
|
<button data-tip='Close edit mode' id='religionSelectedClose'>Close</button>
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
// 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();
|
||||||
|
}
|
||||||
|
|
@ -145,14 +145,14 @@ function addListeners() {
|
||||||
$body.on("click", event => {
|
$body.on("click", event => {
|
||||||
const $element = event.target;
|
const $element = event.target;
|
||||||
const classList = $element.classList;
|
const classList = $element.classList;
|
||||||
const state = +$element.parentNode?.dataset?.id;
|
const stateId = +$element.parentNode?.dataset?.id;
|
||||||
if ($element.tagName === "FILL-BOX") stateChangeFill($element);
|
if ($element.tagName === "FILL-BOX") stateChangeFill($element);
|
||||||
else if (classList.contains("name")) editStateName(state);
|
else if (classList.contains("name")) editStateName(stateId);
|
||||||
else if (classList.contains("coaIcon")) editEmblem("state", "stateCOA" + state, pack.states[state]);
|
else if (classList.contains("coaIcon")) editEmblem("state", "stateCOA" + stateId, pack.states[stateId]);
|
||||||
else if (classList.contains("icon-star-empty")) stateCapitalZoomIn(state);
|
else if (classList.contains("icon-star-empty")) stateCapitalZoomIn(stateId);
|
||||||
else if (classList.contains("statePopulation")) changePopulation(state);
|
else if (classList.contains("statePopulation")) changePopulation(stateId);
|
||||||
else if (classList.contains("icon-pin")) toggleFog(state, classList);
|
else if (classList.contains("icon-pin")) toggleFog(stateId, classList);
|
||||||
else if (classList.contains("icon-trash-empty")) stateRemovePrompt(state);
|
else if (classList.contains("icon-trash-empty")) stateRemovePrompt(stateId);
|
||||||
});
|
});
|
||||||
|
|
||||||
$body.on("input", function (ev) {
|
$body.on("input", function (ev) {
|
||||||
|
|
@ -194,7 +194,9 @@ function statesEditorAddLines() {
|
||||||
const rural = s.rural * populationRate;
|
const rural = s.rural * populationRate;
|
||||||
const urban = s.urban * populationRate * urbanization;
|
const urban = s.urban * populationRate * urbanization;
|
||||||
const population = rn(rural + urban);
|
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;
|
totalArea += area;
|
||||||
totalPopulation += population;
|
totalPopulation += population;
|
||||||
totalBurgs += s.burgs;
|
totalBurgs += s.burgs;
|
||||||
|
|
@ -218,7 +220,9 @@ function statesEditorAddLines() {
|
||||||
data-expansionism=""
|
data-expansionism=""
|
||||||
>
|
>
|
||||||
<svg width="1em" height="1em" class="placeholder"></svg>
|
<svg width="1em" height="1em" class="placeholder"></svg>
|
||||||
<input data-tip="Neutral lands name. Click to change" class="stateName name pointer italic" value="${s.name}" readonly />
|
<input data-tip="Neutral lands name. Click to change" class="stateName name pointer italic" value="${
|
||||||
|
s.name
|
||||||
|
}" readonly />
|
||||||
<svg class="coaIcon placeholder hide"></svg>
|
<svg class="coaIcon placeholder hide"></svg>
|
||||||
<input class="stateForm placeholder" value="none" />
|
<input class="stateForm placeholder" value="none" />
|
||||||
<span class="icon-star-empty placeholder hide"></span>
|
<span class="icon-star-empty placeholder hide"></span>
|
||||||
|
|
@ -258,18 +262,26 @@ function statesEditorAddLines() {
|
||||||
>
|
>
|
||||||
<fill-box fill="${s.color}"></fill-box>
|
<fill-box fill="${s.color}"></fill-box>
|
||||||
<input data-tip="State name. Click to change" class="stateName name pointer" value="${s.name}" readonly />
|
<input data-tip="State name. Click to change" class="stateName name pointer" value="${s.name}" readonly />
|
||||||
<svg data-tip="Click to show and edit state emblem" class="coaIcon pointer hide" viewBox="0 0 200 200"><use href="#stateCOA${s.i}"></use></svg>
|
<svg data-tip="Click to show and edit state emblem" class="coaIcon pointer hide" viewBox="0 0 200 200"><use href="#stateCOA${
|
||||||
<input data-tip="State form name. Click to change" class="stateForm name pointer" value="${s.formName}" readonly />
|
s.i
|
||||||
|
}"></use></svg>
|
||||||
|
<input data-tip="State form name. Click to change" class="stateForm name pointer" value="${
|
||||||
|
s.formName
|
||||||
|
}" readonly />
|
||||||
<span data-tip="State capital. Click to zoom into view" class="icon-star-empty pointer hide"></span>
|
<span data-tip="State capital. Click to zoom into view" class="icon-star-empty pointer hide"></span>
|
||||||
<input data-tip="Capital name. Click and type to rename" class="stateCapital hide" value="${capital}" autocorrect="off" spellcheck="false" />
|
<input data-tip="Capital name. Click and type to rename" class="stateCapital hide" value="${capital}" autocorrect="off" spellcheck="false" />
|
||||||
<select data-tip="Dominant culture. Click to change" class="stateCulture hide">${getCultureOptions(s.culture)}</select>
|
<select data-tip="Dominant culture. Click to change" class="stateCulture hide">${getCultureOptions(
|
||||||
|
s.culture
|
||||||
|
)}</select>
|
||||||
<span data-tip="Burgs count" style="padding-right: 1px" class="icon-dot-circled hide"></span>
|
<span data-tip="Burgs count" style="padding-right: 1px" class="icon-dot-circled hide"></span>
|
||||||
<div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
|
<div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
|
||||||
<span data-tip="State area" style="padding-right: 4px" class="icon-map-o hide"></span>
|
<span data-tip="State area" style="padding-right: 4px" class="icon-map-o hide"></span>
|
||||||
<div data-tip="State area" class="stateArea hide" style="width: 6em">${si(area)} ${unit}</div>
|
<div data-tip="State area" class="stateArea hide" style="width: 6em">${si(area)} ${unit}</div>
|
||||||
<span data-tip="${populationTip}" class="icon-male hide"></span>
|
<span data-tip="${populationTip}" class="icon-male hide"></span>
|
||||||
<div data-tip="${populationTip}" class="statePopulation pointer hide" style="width: 5em">${si(population)}</div>
|
<div data-tip="${populationTip}" class="statePopulation pointer hide" style="width: 5em">${si(population)}</div>
|
||||||
<select data-tip="State type. Defines growth model. Click to change" class="cultureType ${hidden} show hide">${getTypeOptions(s.type)}</select>
|
<select data-tip="State type. Defines growth model. Click to change" class="cultureType ${hidden} show hide">${getTypeOptions(
|
||||||
|
s.type
|
||||||
|
)}</select>
|
||||||
<span data-tip="State expansionism" class="icon-resize-full ${hidden} show hide"></span>
|
<span data-tip="State expansionism" class="icon-resize-full ${hidden} show hide"></span>
|
||||||
<input data-tip="Expansionism (defines competitive size). Change to re-calculate states based on new value"
|
<input data-tip="Expansionism (defines competitive size). Change to re-calculate states based on new value"
|
||||||
class="statePower ${hidden} show hide" type="number" min="0" max="99" step=".1" value=${s.expansionism} />
|
class="statePower ${hidden} show hide" type="number" min="0" max="99" step=".1" value=${s.expansionism} />
|
||||||
|
|
@ -488,25 +500,30 @@ function stateChangeCapitalName(state, line, value) {
|
||||||
document.querySelector("#burgLabel" + capital).textContent = value;
|
document.querySelector("#burgLabel" + capital).textContent = value;
|
||||||
}
|
}
|
||||||
|
|
||||||
function changePopulation(state) {
|
function changePopulation(stateId) {
|
||||||
const s = pack.states[state];
|
const state = pack.states[stateId];
|
||||||
if (!s.cells) {
|
if (!state.cells) return tip("State does not have any cells, cannot change population", false, "error");
|
||||||
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();
|
|
||||||
|
|
||||||
alertMessage.innerHTML = /* html */ ` Rural: <input type="number" min="0" step="1" id="ruralPop" value=${rural} style="width:6em" /> Urban:
|
const rural = rn(state.rural * populationRate);
|
||||||
<input type="number" min="0" step="1" id="urbanPop" value=${urban} style="width:6em" ${s.burgs ? "" : "disabled"} />
|
const urban = rn(state.urban * populationRate * urbanization);
|
||||||
<p>Total population: ${l(total)} ⇒ <span id="totalPop">${l(total)}</span> (<span id="totalPopPerc">100</span>%)</p>`;
|
const total = rural + urban;
|
||||||
|
const format = n => Number(n).toLocaleString();
|
||||||
|
|
||||||
|
alertMessage.innerHTML = /* html */ `<div>
|
||||||
|
<i>Change population of all cells assigned to the state</i>
|
||||||
|
<div style="margin: 0.5em 0">
|
||||||
|
Rural: <input type="number" min="0" step="1" id="ruralPop" value=${rural} style="width:6em" />
|
||||||
|
Urban: <input type="number" min="0" step="1" id="urbanPop" value=${urban} style="width:6em" />
|
||||||
|
</div>
|
||||||
|
<div>Total population: ${format(total)} ⇒ <span id="totalPop">${format(total)}</span>
|
||||||
|
(<span id="totalPopPerc">100</span>%)
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
const update = function () {
|
const update = function () {
|
||||||
const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
|
const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
|
||||||
if (isNaN(totalNew)) return;
|
if (isNaN(totalNew)) return;
|
||||||
totalPop.innerHTML = l(totalNew);
|
totalPop.innerHTML = format(totalNew);
|
||||||
totalPopPerc.innerHTML = rn((totalNew / total) * 100);
|
totalPopPerc.innerHTML = rn((totalNew / total) * 100);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -532,24 +549,24 @@ function changePopulation(state) {
|
||||||
function applyPopulationChange() {
|
function applyPopulationChange() {
|
||||||
const ruralChange = ruralPop.value / rural;
|
const ruralChange = ruralPop.value / rural;
|
||||||
if (isFinite(ruralChange) && ruralChange !== 1) {
|
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));
|
cells.forEach(i => (pack.cells.pop[i] *= ruralChange));
|
||||||
}
|
}
|
||||||
if (!isFinite(ruralChange) && +ruralPop.value > 0) {
|
if (!isFinite(ruralChange) && +ruralPop.value > 0) {
|
||||||
const points = ruralPop.value / populationRate;
|
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;
|
const pop = points / cells.length;
|
||||||
cells.forEach(i => (pack.cells.pop[i] = pop));
|
cells.forEach(i => (pack.cells.pop[i] = pop));
|
||||||
}
|
}
|
||||||
|
|
||||||
const urbanChange = urbanPop.value / urban;
|
const urbanChange = urbanPop.value / urban;
|
||||||
if (isFinite(urbanChange) && urbanChange !== 1) {
|
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)));
|
burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
|
||||||
}
|
}
|
||||||
if (!isFinite(urbanChange) && +urbanPop.value > 0) {
|
if (!isFinite(urbanChange) && +urbanPop.value > 0) {
|
||||||
const points = urbanPop.value / populationRate / urbanization;
|
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);
|
const population = rn(points / burgs.length, 4);
|
||||||
burgs.forEach(b => (b.population = population));
|
burgs.forEach(b => (b.population = population));
|
||||||
}
|
}
|
||||||
|
|
@ -591,19 +608,11 @@ function toggleFog(state, cl) {
|
||||||
function stateRemovePrompt(state) {
|
function stateRemovePrompt(state) {
|
||||||
if (customization) return;
|
if (customization) return;
|
||||||
|
|
||||||
alertMessage.innerHTML = "Are you sure you want to remove the state? <br>This action cannot be reverted";
|
confirmationDialog({
|
||||||
$("#alert").dialog({
|
|
||||||
resizable: false,
|
|
||||||
title: "Remove state",
|
title: "Remove state",
|
||||||
buttons: {
|
message: "Are you sure you want to remove the state? <br>This action cannot be reverted",
|
||||||
Remove: function () {
|
confirm: "Remove",
|
||||||
$(this).dialog("close");
|
onConfirm: () => stateRemove(state)
|
||||||
stateRemove(state);
|
|
||||||
},
|
|
||||||
Cancel: function () {
|
|
||||||
$(this).dialog("close");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -667,10 +676,8 @@ function stateRemove(state) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleLegend() {
|
function toggleLegend() {
|
||||||
if (legend.selectAll("*").size()) {
|
if (legend.selectAll("*").size()) return clearLegend(); // hide legend
|
||||||
clearLegend();
|
|
||||||
return;
|
|
||||||
} // hide legend
|
|
||||||
const data = pack.states
|
const data = pack.states
|
||||||
.filter(s => s.i && !s.removed && s.cells)
|
.filter(s => s.i && !s.removed && s.cells)
|
||||||
.sort((a, b) => b.area - a.area)
|
.sort((a, b) => b.area - a.area)
|
||||||
|
|
@ -681,16 +688,17 @@ function toggleLegend() {
|
||||||
function togglePercentageMode() {
|
function togglePercentageMode() {
|
||||||
if ($body.dataset.type === "absolute") {
|
if ($body.dataset.type === "absolute") {
|
||||||
$body.dataset.type = "percentage";
|
$body.dataset.type = "percentage";
|
||||||
const totalCells = +statesFooterCells.innerHTML;
|
const totalCells = +byId("statesFooterCells").innerText;
|
||||||
const totalBurgs = +statesFooterBurgs.innerHTML;
|
const totalBurgs = +byId("statesFooterBurgs").innerText;
|
||||||
const totalArea = +statesFooterArea.dataset.area;
|
const totalArea = +byId("statesFooterArea").dataset.area;
|
||||||
const totalPopulation = +statesFooterPopulation.dataset.population;
|
const totalPopulation = +byId("statesFooterPopulation").dataset.population;
|
||||||
|
|
||||||
$body.querySelectorAll(":scope > div").forEach(function (el) {
|
$body.querySelectorAll(":scope > div").forEach(function (el) {
|
||||||
el.querySelector(".stateCells").innerHTML = rn((+el.dataset.cells / totalCells) * 100) + "%";
|
const {cells, burgs, area, population} = el.dataset;
|
||||||
el.querySelector(".stateBurgs").innerHTML = rn((+el.dataset.burgs / totalBurgs) * 100) + "%";
|
el.querySelector(".stateCells").innerText = rn((+cells / totalCells) * 100) + "%";
|
||||||
el.querySelector(".stateArea").innerHTML = rn((+el.dataset.area / totalArea) * 100) + "%";
|
el.querySelector(".stateBurgs").innerText = rn((+burgs / totalBurgs) * 100) + "%";
|
||||||
el.querySelector(".statePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%";
|
el.querySelector(".stateArea").innerText = rn((+area / totalArea) * 100) + "%";
|
||||||
|
el.querySelector(".statePopulation").innerText = rn((+population / totalPopulation) * 100) + "%";
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
$body.dataset.type = "absolute";
|
$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"}});
|
$("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
|
||||||
|
|
||||||
tip("Click on state to select, drag the circle to change state", true);
|
tip("Click on state to select, drag the circle to change state", true);
|
||||||
viewbox.style("cursor", "crosshair").on("click", selectStateOnMapClick).call(d3.drag().on("start", dragStateBrush)).on("touchmove mousemove", moveStateBrush);
|
viewbox
|
||||||
|
.style("cursor", "crosshair")
|
||||||
|
.on("click", selectStateOnMapClick)
|
||||||
|
.call(d3.drag().on("start", dragStateBrush))
|
||||||
|
.on("touchmove mousemove", moveStateBrush);
|
||||||
|
|
||||||
$body.querySelector("div").classList.add("selected");
|
$body.querySelector("div").classList.add("selected");
|
||||||
}
|
}
|
||||||
|
|
@ -967,7 +979,14 @@ function changeStateForSelection(selection) {
|
||||||
|
|
||||||
// change of append new element
|
// change of append new element
|
||||||
if (exists.size()) exists.attr("data-state", stateNew).attr("fill", color).attr("stroke", color);
|
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);
|
const coa = COA.generate(burg?.coa || states[stateId].coa, kinship, burg ? null : 0.9, type);
|
||||||
coa.shield = COA.getShield(culture, stateId);
|
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 => {
|
provinceCells.forEach(i => {
|
||||||
cells.province[i] = newProvinceId;
|
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;
|
return closesProvince;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1152,7 +1183,8 @@ function exitStatesManualAssignment(close) {
|
||||||
.forEach(el => el.classList.remove("hidden"));
|
.forEach(el => el.classList.remove("hidden"));
|
||||||
statesFooter.style.display = "block";
|
statesFooter.style.display = "block";
|
||||||
$body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
|
$body.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();
|
restoreDefaultEvents();
|
||||||
clearMainTip();
|
clearMainTip();
|
||||||
|
|
@ -1176,10 +1208,12 @@ function addState() {
|
||||||
const {cells, states, burgs} = pack;
|
const {cells, states, burgs} = pack;
|
||||||
const point = d3.mouse(this);
|
const point = d3.mouse(this);
|
||||||
const center = findCell(point[0], point[1]);
|
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];
|
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
|
if (!burg) burg = addBurg(point); // add new burg
|
||||||
|
|
||||||
|
|
@ -1226,7 +1260,10 @@ function addState() {
|
||||||
return relations;
|
return relations;
|
||||||
});
|
});
|
||||||
diplomacy.push("x");
|
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.state[center] = newState;
|
||||||
cells.province[center] = 0;
|
cells.province[center] = 0;
|
||||||
|
|
@ -1296,7 +1333,23 @@ function downloadStatesCsv() {
|
||||||
const {fullName = "", rural, urban} = pack.states[+id];
|
const {fullName = "", rural, urban} = pack.states[+id];
|
||||||
const ruralPopulation = Math.round(rural * populationRate);
|
const ruralPopulation = Math.round(rural * populationRate);
|
||||||
const urbanPopulation = Math.round(urban * populationRate * urbanization);
|
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");
|
const csvData = [headers].concat(data).join("\n");
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
|
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/");
|
const url = new URL("https://watabou.github.io/city-generator/");
|
||||||
url.search = new URLSearchParams(parameters);
|
url.search = new URLSearchParams(parameters);
|
||||||
if (sea) url.searchParams.append("sea", sea);
|
if (sea) url.searchParams.append("sea", sea);
|
||||||
|
|
@ -456,7 +472,12 @@ function createPicker() {
|
||||||
const cl = () => tip("Click to close the picker");
|
const cl = () => tip("Click to close the picker");
|
||||||
const closePicker = () => container.style("display", "none");
|
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
|
container
|
||||||
.append("rect")
|
.append("rect")
|
||||||
.attr("x", 0)
|
.attr("x", 0)
|
||||||
|
|
@ -589,8 +610,21 @@ function createPicker() {
|
||||||
.attr("height", 14)
|
.attr("height", 14)
|
||||||
.on("mousemove", cl)
|
.on("mousemove", cl)
|
||||||
.on("click", closePicker);
|
.on("click", closePicker);
|
||||||
picker.insert("text", ":first-child").attr("x", 12).attr("y", -10).attr("id", "pickerLabel").text("Color Picker").on("mousemove", pos);
|
picker
|
||||||
picker.insert("rect", ":first-child").attr("x", 0).attr("y", -30).attr("width", width).attr("height", 30).attr("id", "pickerHeader").on("mousemove", pos);
|
.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})`);
|
picker.attr("transform", `translate(${(svgWidth - width) / 2},${(svgHeight - height) / 2})`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -729,7 +763,12 @@ function changePickerSpace() {
|
||||||
|
|
||||||
const space = this.dataset.space;
|
const space = this.dataset.space;
|
||||||
const i = Array.from(this.parentNode.querySelectorAll("input")).map(input => input.value); // inputs
|
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);
|
const hsl = d3.hsl(fill);
|
||||||
if (isNaN(hsl.l)) {
|
if (isNaN(hsl.l)) {
|
||||||
|
|
@ -750,7 +789,14 @@ function fog(id, path) {
|
||||||
if (defs.select("#fog #" + id).size()) return;
|
if (defs.select("#fog #" + id).size()) return;
|
||||||
const fadeIn = d3.transition().duration(2000).ease(d3.easeSinInOut);
|
const fadeIn = d3.transition().duration(2000).ease(d3.easeSinInOut);
|
||||||
if (defs.select("#fog path").size()) {
|
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 {
|
} else {
|
||||||
defs.select("#fog").append("path").attr("d", path).attr("id", id).attr("opacity", 1);
|
defs.select("#fog").append("path").attr("d", path).attr("id", id).attr("opacity", 1);
|
||||||
const opacity = fogging.attr("opacity");
|
const opacity = fogging.attr("opacity");
|
||||||
|
|
@ -813,9 +859,20 @@ function highlightElement(element, zoom) {
|
||||||
const enter = d3.transition().duration(1000).ease(d3.easeBounceOut);
|
const enter = d3.transition().duration(1000).ease(d3.easeBounceOut);
|
||||||
const exit = d3.transition().duration(500).ease(d3.easeLinear);
|
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.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) {
|
if (zoom) {
|
||||||
const tr = parseTransform(transform);
|
const tr = parseTransform(transform);
|
||||||
|
|
@ -1119,12 +1176,18 @@ function refreshAllEditors() {
|
||||||
// dynamically loaded editors
|
// dynamically loaded editors
|
||||||
async function editStates() {
|
async function editStates() {
|
||||||
if (customization) return;
|
if (customization) return;
|
||||||
const StateEditor = await import("../dynamic/editors/states-editor.js?v=29052022");
|
const Editor = await import("../dynamic/editors/states-editor.js?v=29052022");
|
||||||
StateEditor.open();
|
Editor.open();
|
||||||
}
|
}
|
||||||
|
|
||||||
async function editCultures() {
|
async function editCultures() {
|
||||||
if (customization) return;
|
if (customization) return;
|
||||||
const CulturesEditor = await import("../dynamic/editors/cultures-editor.js?v=29052022");
|
const Editor = await import("../dynamic/editors/cultures-editor.js?v=05062022");
|
||||||
CulturesEditor.open();
|
Editor.open();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function editReligions() {
|
||||||
|
if (customization) return;
|
||||||
|
const Editor = await import("../dynamic/editors/religions-editor.js?v=05062022");
|
||||||
|
Editor.open();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 */ `<div
|
|
||||||
class="states religions"
|
|
||||||
data-id=${r.i}
|
|
||||||
data-name="${r.name}"
|
|
||||||
data-color="${r.color}"
|
|
||||||
data-area=${area}
|
|
||||||
data-population=${population}
|
|
||||||
data-type=${r.type}
|
|
||||||
data-form=${r.form}
|
|
||||||
data-deity="${r.deity ? r.deity : ""}"
|
|
||||||
data-expansionism=${r.expansionism}
|
|
||||||
>
|
|
||||||
<fill-box fill="${r.color}"></fill-box>
|
|
||||||
<input data-tip="Religion name. Click and type to change" class="religionName" value="${
|
|
||||||
r.name
|
|
||||||
}" autocorrect="off" spellcheck="false" />
|
|
||||||
<select data-tip="Religion type" class="religionType">
|
|
||||||
${getTypeOptions(r.type)}
|
|
||||||
</select>
|
|
||||||
<input data-tip="Religion form" class="religionForm hide" value="${
|
|
||||||
r.form
|
|
||||||
}" autocorrect="off" spellcheck="false" />
|
|
||||||
<span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw hide"></span>
|
|
||||||
<input data-tip="Religion supreme deity" class="religionDeity hide" value="${
|
|
||||||
r.deity ? r.deity : ""
|
|
||||||
}" autocorrect="off" spellcheck="false" />
|
|
||||||
<span data-tip="Religion area" style="padding-right: 4px" class="icon-map-o hide"></span>
|
|
||||||
<div data-tip="Religion area" class="biomeArea hide">${si(area) + unit}</div>
|
|
||||||
<span data-tip="${populationTip}" class="icon-male hide"></span>
|
|
||||||
<div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
|
|
||||||
<span data-tip="Remove religion" class="icon-trash-empty hide"></span>
|
|
||||||
</div>`;
|
|
||||||
} else {
|
|
||||||
// No religion (neutral) line
|
|
||||||
lines += /* html */ `<div
|
|
||||||
class="states"
|
|
||||||
data-id=${r.i}
|
|
||||||
data-name="${r.name}"
|
|
||||||
data-color=""
|
|
||||||
data-area=${area}
|
|
||||||
data-population=${population}
|
|
||||||
data-type=""
|
|
||||||
data-form=""
|
|
||||||
data-deity=""
|
|
||||||
data-expansionism=""
|
|
||||||
>
|
|
||||||
<svg width="11" height="11" class="placeholder"></svg>
|
|
||||||
<input data-tip="Religion name. Click and type to change" class="religionName italic" value="${
|
|
||||||
r.name
|
|
||||||
}" autocorrect="off" spellcheck="false" />
|
|
||||||
<select data-tip="Religion type" class="religionType placeholder">
|
|
||||||
${getTypeOptions(r.type)}
|
|
||||||
</select>
|
|
||||||
<input data-tip="Religion form" class="religionForm placeholder hide" value="" autocorrect="off" spellcheck="false" />
|
|
||||||
<span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw placeholder hide"></span>
|
|
||||||
<input data-tip="Religion supreme deity" class="religionDeity placeholder hide" value="" autocorrect="off" spellcheck="false" />
|
|
||||||
<span data-tip="Religion area" style="padding-right: 4px" class="icon-map-o hide"></span>
|
|
||||||
<div data-tip="Religion area" class="biomeArea hide">${si(area) + unit}</div>
|
|
||||||
<span data-tip="${populationTip}" class="icon-male hide"></span>
|
|
||||||
<div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
|
|
||||||
</div>`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
$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 += `<option ${type === t ? "selected" : ""} value="${t}">${t}</option>`));
|
|
||||||
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 */ `<p>
|
|
||||||
<i
|
|
||||||
>Please note all population of religion territory is considered believers of this religion. It means believers number change will directly change
|
|
||||||
population</i
|
|
||||||
>
|
|
||||||
</p>
|
|
||||||
Rural: <input type="number" min="0" step="1" id="ruralPop" value=${rural} style="width:6em" /> Urban:
|
|
||||||
<input type="number" min="0" step="1" id="urbanPop" value=${urban} style="width:6em" ${
|
|
||||||
burgs.length ? "" : "disabled"
|
|
||||||
} />
|
|
||||||
<p>Total believers: ${l(total)} ⇒ <span id="totalPop">${l(
|
|
||||||
total
|
|
||||||
)}</span> (<span id="totalPopPerc">100</span>%)</p>`;
|
|
||||||
|
|
||||||
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? <br>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 */ `<div id="religionChartDetails" class='chartInfo'>
|
|
||||||
<div id='religionInfo' style="display: block">‍</div>
|
|
||||||
<div id='religionSelected' style="display: none">
|
|
||||||
<span><span id='religionSelectedName'></span>. </span>
|
|
||||||
<span data-name="Type religion short name (abbreviation)">Abbreviation: <input id='religionSelectedCode' type='text' maxlength='3' size='3' /></span>
|
|
||||||
<button data-tip='Clear origin, religion will be linked to top level' id='religionSelectedClear'>Clear</button>
|
|
||||||
<button data-tip='Close edit mode' id='religionSelectedClose'>Close</button>
|
|
||||||
</div>
|
|
||||||
</div>`;
|
|
||||||
|
|
||||||
// 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();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -28,7 +28,7 @@ const version = "1.86.00"; // generator version, update each time
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<strong>Latest changes:</strong>
|
<strong>Latest changes:</strong>
|
||||||
<li>Hierarchy tree: cultures and religions can have multiple parents</li>
|
<li>Сultures and religions can have multiple parents in hierarchy tree</li>
|
||||||
<li>Heightmap selection screen</li>
|
<li>Heightmap selection screen</li>
|
||||||
<li>Dialogs optimization for mobile</li>
|
<li>Dialogs optimization for mobile</li>
|
||||||
<li>New heightmap template: Fractious</li>
|
<li>New heightmap template: Fractious</li>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue