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

Religions live update UX (#915)

Browse source 
* preparatory bugfixes

* restructure religion generator for extensibility

* Add culture-like update functions and UI

* Syntax / Typo

* PR Versioning

* Relig Editor UI: hide on brush, limit -> potential

* add / remove Culture creates / removes Folk religion

* Religions UX: stable abbr, Folk non-selectable type & not separately removed

* Folk religions follow cultures through regeneration; extinct religion centers draw, folk centers are immutable and do not

* style

* regenerate bugs fixing

* when cultures regenerate a different number

* ability to lock culture in a easy-defined set

fixes uncaught error in commit dada419 from PR #910

* what is locked folk?

* New Map ignores old locked things

* No auto-update of religion on culture regeneration

* typo

* Bugfixes

* Refactor toward modern style

* Prepare to lock - Further refactor

* Complete locked religions functionality

* Prepare for live updates

* Editors fixing + re-versioning

* Fix merge snafu

* Bugs, toungue-twisting

* indexing bugfix

* Manual Add prefers to create missing Folk

* Locked origin regen; deterministic expansion

* version update; fix add wild folk

---------

Co-authored-by: A C James <james.ander31@gmail.com>
Co-authored-by: Azgaar <maxganiev@yandex.ru>
This commit is contained in:
Alexander James 2023-03-19 03:57:59 -06:00 • committed by GitHub
parent efb5ad8091
commit 47ef8d938b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 511 additions and 394 deletions
Download patch file Download diff file Expand all files Collapse all files

91
modules/dynamic/editors/religions-editor.js
View file

@ -3,11 +3,11 @@ addListeners();
export function open() {
closeDialogs("#religionsEditor, .stable");
if (!layerIsOn("toggleReligions")) toggleReligions();
if (layerIsOn("toggleStates")) toggleStates();
if (layerIsOn("toggleBiomes")) toggleBiomes();
if (layerIsOn("toggleCultures")) toggleReligions();
if (layerIsOn("toggleCultures")) toggleCultures();
if (layerIsOn("toggleProvinces")) toggleProvinces();
if (!layerIsOn("toggleReligions")) toggleReligions();
refreshReligionsEditor();
drawReligionCenters();
@ -23,13 +23,15 @@ export function open() {
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 id="religionsHeader" class="header" style="grid-template-columns: 13em 6em 7em 18em 5em 6em 6em 8em">
<div data-tip="Click to sort by religion name" class="sortable alphabetically" data-sortby="name">Religion&nbsp;</div>
<div data-tip="Click to sort by religion type" class="sortable alphabetically icon-sort-name-down" data-sortby="type">Type&nbsp;</div>
<div data-tip="Click to sort by religion form" class="sortable alphabetically hide" data-sortby="form">Form&nbsp;</div>
<div data-tip="Click to sort by supreme deity" class="sortable alphabetically hide" data-sortby="deity">Supreme Deity&nbsp;</div>
<div data-tip="Click to sort by religion area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
<div data-tip="Click to sort by number of believers (religion area population)" class="sortable hide" data-sortby="population">Believers&nbsp;</div>
<div data-tip="Click to sort by potential extent type" class="sortable hide" data-sortby="expansion">Potential&nbsp;</div>
<div data-tip="Click to sort by expansionism" class="sortable hide" data-sortby="expansionism">Expansion&nbsp;</div>
</div>
<div id="religionsBody" class="table" data-type="absolute"></div>
@ -88,6 +90,11 @@ function insertEditorHtml() {
</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>
<button id="religionsRecalculate" data-tip="Recalculate religions based on current values of growth-related attributes" class="icon-retweet"></button>
<span data-tip="Allow religion center, extent, and expansionism changes to take an immediate effect">
<input id="religionsAutoChange" class="checkbox" type="checkbox" />
<label for="religionsAutoChange" class="checkbox-label"><i>auto-apply changes</i></label>
</span>
</div>
</div>`;
@ -109,6 +116,7 @@ function addListeners() {
byId("religionsManuallyCancel").on("click", () => exitReligionsManualAssignment());
byId("religionsAdd").on("click", enterAddReligionMode);
byId("religionsExport").on("click", downloadReligionsCsv);
byId("religionsRecalculate").on("click", () => recalculateReligions(true));
}
function refreshReligionsEditor() {
@ -166,6 +174,7 @@ function religionsEditorAddLines() {
data-type=""
data-form=""
data-deity=""
data-expansion=""
data-expansionism=""
>
<svg width="11" height="11" class="placeholder"></svg>
@ -181,6 +190,9 @@ function religionsEditorAddLines() {
<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>
<select data-tip="Potential religion extent" class="religionExtent placeholder hide" style="width: 5em"></select>
<span class="icon-resize-full placeholder hide"></span>
<input class="religionExpan placeholder hide" type="number" />
</div>`;
continue;
}
@ -195,6 +207,7 @@ function religionsEditorAddLines() {
data-type="${r.type}"
data-form="${r.form}"
data-deity="${r.deity || ""}"
data-expansion="${r.expansion}"
data-expansionism="${r.expansionism}"
>
<fill-box fill="${r.color}"></fill-box>
@ -212,8 +225,9 @@ function religionsEditorAddLines() {
<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>
${getExpansionColumns(r)}
<span
data-tip="Lock religion, will regenerate the origin folk and organized religion if they are not also locked"
data-tip="Lock this religion"
class="icon-lock${r.lock ? "" : "-open"} hide"
></span>
<span data-tip="Remove religion" class="icon-trash-empty hide"></span>
@ -245,6 +259,8 @@ function religionsEditorAddLines() {
$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 > select.religionExtent").forEach(el => el.on("change", religionChangeExtent));
$body.querySelectorAll("div > input.religionExpan").forEach(el => el.on("change", religionChangeExpansionism));
$body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.on("click", religionRemovePrompt));
$body.querySelectorAll("div > span.icon-lock").forEach($el => $el.on("click", updateLockStatus));
$body.querySelectorAll("div > span.icon-lock-open").forEach($el => $el.on("click", updateLockStatus));
@ -264,6 +280,36 @@ function getTypeOptions(type) {
return options;
}
function getExpansionColumns(r) {
if (r.type === "Folk")
return `<span data-tip="Potential religion extent" class="religionExtent hide" style="width: 5em">
culture
</span>
<span class="icon-resize-full placeholder hide"></span>
<input class="religionExpan placeholder hide" type="number" />`
else
return `<select data-tip="Potential religion extent" class="religionExtent hide" style="width: 5em">
${getExtentOptions(r.expansion)}
</select>
<span data-tip="Religion expansionism. Defines competitive size" class="icon-resize-full hide"></span>
<input
data-tip="Religion expansionism. Defines competitive size. Click to change, then click Recalculate to apply change"
class="religionExpan hide"
type="number"
min="0"
max="99"
step=".1"
value=${r.expansionism}
/>`
}
function getExtentOptions(type) {
let options = "";
const types = ["global", "state", "culture"];
types.forEach(t => (options += `<option ${type === t ? "selected" : ""} value="${t}">${t}</option>`));
return options;
}
const religionHighlightOn = debounce(event => {
const religionId = Number(event.id || event.target.dataset.id);
const $el = $body.querySelector(`div[data-id='${religionId}']`);
@ -434,6 +480,20 @@ function changePopulation() {
}
}
function religionChangeExtent() {
const religion = +this.parentNode.dataset.id;
this.parentNode.dataset.expansion = this.value;
pack.religions[religion].expansion = this.value;
recalculateReligions();
}
function religionChangeExpansionism() {
const religion = +this.parentNode.dataset.id;
this.parentNode.dataset.expansionism = this.value;
pack.religions[religion].expansionism = +this.value;
recalculateReligions();
}
function religionRemovePrompt() {
if (customization) return;
@ -475,7 +535,7 @@ function drawReligionCenters() {
.attr("stroke", "#444444")
.style("cursor", "move");
const data = pack.religions.filter(r => r.i && r.center && r.cells && !r.removed);
const data = pack.religions.filter(r => r.i && r.center && !r.removed);
religionCenters
.selectAll("circle")
.data(data)
@ -507,6 +567,7 @@ function religionCenterDrag() {
const cell = findCell(x, y);
if (pack.cells.h[cell] < 20) return; // ignore dragging on water
pack.religions[religionId].center = cell;
recalculateReligions();
});
}
@ -584,7 +645,7 @@ function enterReligionsManualAssignent() {
if (!layerIsOn("toggleReligions")) toggleReligions();
customization = 7;
relig.append("g").attr("id", "temp");
document.querySelectorAll("#religionsBottom > button").forEach(el => (el.style.display = "none"));
document.querySelectorAll("#religionsBottom > *").forEach(el => (el.style.display = "none"));
byId("religionsManuallyButtons").style.display = "inline-block";
debug.select("#religionCenters").style("display", "none");
@ -686,7 +747,7 @@ function exitReligionsManualAssignment(close) {
customization = 0;
relig.select("#temp").remove();
removeCircle();
document.querySelectorAll("#religionsBottom > button").forEach(el => (el.style.display = "inline-block"));
document.querySelectorAll("#religionsBottom > *").forEach(el => (el.style.display = "inline-block"));
byId("religionsManuallyButtons").style.display = "none";
byId("religionsEditor")
@ -740,15 +801,15 @@ function addReligion() {
function downloadReligionsCsv() {
const unit = getAreaUnit("2");
const headers = `Id,Name,Color,Type,Form,Supreme Deity,Area ${unit},Believers,Origins`;
const headers = `Id,Name,Color,Type,Form,Supreme Deity,Area ${unit},Believers,Origins,Potential,Expansionism`;
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 {id, name, color, type, form, deity, area, population, expansion, expansionism} = $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(",");
return [id, name, color, type, form, deityText, area, population, originText, expansion, expansionism].join(",");
});
const csvData = [headers].concat(data).join("\n");
@ -773,3 +834,13 @@ function updateLockStatus() {
classList.toggle("icon-lock-open");
classList.toggle("icon-lock");
}
function recalculateReligions(must) {
if (!must && !religionsAutoChange.checked) return;
Religions.recalculate();
drawReligions();
refreshReligionsEditor();
drawReligionCenters();
}