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

This commit is contained in:
Canis Artorus 2023-02-20 23:46:02 -07:00
parent 6d9c8df651
commit de3ed0d705
2 changed files with 40 additions and 21 deletions

View file

@ -190,9 +190,7 @@ function religionsEditorAddLines() {
<div data-tip="Religion area" class="religionArea hide" style="width: 5em">${si(area) + unit}</div> <div data-tip="Religion area" class="religionArea hide" style="width: 5em">${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="religionPopulation hide pointer">${si(population)}</div> <div data-tip="${populationTip}" class="religionPopulation hide pointer">${si(population)}</div>
<select data-tip="Potential religion extent" class="religionLimit placeholder hide" style="width: 5em"> <select data-tip="Potential religion extent" class="religionLimit placeholder hide" style="width: 5em"></select>
${getExtentOptions(r.expansion)}
</select>
<span class="icon-resize-full placeholder hide"></span> <span class="icon-resize-full placeholder hide"></span>
<input class="religionExpan placeholder hide" type="number" /> <input class="religionExpan placeholder hide" type="number" />
</div>`; </div>`;
@ -215,9 +213,15 @@ function religionsEditorAddLines() {
<fill-box fill="${r.color}"></fill-box> <fill-box fill="${r.color}"></fill-box>
<input data-tip="Religion name. Click and type to change" class="religionName" style="width: 11em" <input data-tip="Religion name. Click and type to change" class="religionName" style="width: 11em"
value="${r.name}" autocorrect="off" spellcheck="false" /> value="${r.name}" autocorrect="off" spellcheck="false" />
<select data-tip="Religion type" class="religionType" style="width: 5em"> ${r.type === "Folk" ?
`<span data-tip="Religion type" class="religionType" style="width: 5em">
Folk
</span>`
:
`<select data-tip="Religion type" class="religionType" style="width: 5em">
${getTypeOptions(r.type)} ${getTypeOptions(r.type)}
</select> </select>`
}
<input data-tip="Religion form" class="religionForm hide" style="width: 6em" <input data-tip="Religion form" class="religionForm hide" style="width: 6em"
value="${r.form}" autocorrect="off" spellcheck="false" /> value="${r.form}" autocorrect="off" spellcheck="false" />
<span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw hide"></span> <span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw hide"></span>
@ -227,19 +231,19 @@ function religionsEditorAddLines() {
<div data-tip="Religion area" class="religionArea hide" style="width: 5em">${si(area) + unit}</div> <div data-tip="Religion area" class="religionArea hide" style="width: 5em">${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="religionPopulation hide pointer">${si(population)}</div> <div data-tip="${populationTip}" class="religionPopulation hide pointer">${si(population)}</div>
${r.type == "Folk" ? ${r.type === "Folk" ?
`<span data-tip="Potential religion extent" class="hide" style="width: 5em"> `<span data-tip="Potential religion extent" class="hide" style="width: 5em">
"culture" culture
</span>` </span>`
: :
`<select data-tip="Potential religion extent" class="religionLimit hide" style="width: 5em"> `<select data-tip="Potential religion extent" class="religionLimit hide" style="width: 5em">
${getExtentOptions(r.expansion)} ${getExtentOptions(r.expansion)}
</select>` </select>`
} }
<span data-tip="Religion expansionism. Defines competitive size" class="icon-resize-full ${r.type =="Folk" ? "placeholder"} hide"></span> <span data-tip="Religion expansionism. Defines competitive size" class="icon-resize-full ${r.type === "Folk" ? "placeholder "}hide"></span>
<input <input
data-tip="Religion expansionism. Defines competitive size. Click to change, then click Recalculate to apply change" data-tip="Religion expansionism. Defines competitive size. Click to change, then click Recalculate to apply change"
class="religionExpan ${r.type =="Folk" ? "placeholder"} hide" class="religionExpan ${r.type === "Folk" ? "placeholder "}hide"
type="number" type="number"
min="0" min="0"
max="99" max="99"
@ -250,7 +254,7 @@ function religionsEditorAddLines() {
data-tip="Lock religion, will regenerate the origin folk and organized religion if they are not also locked" data-tip="Lock religion, will regenerate the origin folk and organized religion if they are not also locked"
class="icon-lock${r.lock ? '' : '-open'} hide" class="icon-lock${r.lock ? '' : '-open'} hide"
></span> ></span>
<span data-tip="Remove religion" class="icon-trash-empty hide"></span> <span data-tip="Remove religion" class="icon-trash-empty ${r.type === "Folk" ? "placeholder "}hide"></span>
</div>`; </div>`;
} }
$body.innerHTML = lines; $body.innerHTML = lines;
@ -295,7 +299,7 @@ function religionsEditorAddLines() {
function getTypeOptions(type) { function getTypeOptions(type) {
let options = ""; let options = "";
const types = ["Folk", "Organized", "Cult", "Heresy"]; const types = ["Organized", "Cult", "Heresy"];
types.forEach(t => (options += `<option ${type === t ? "selected" : ""} value="${t}">${t}</option>`)); types.forEach(t => (options += `<option ${type === t ? "selected" : ""} value="${t}">${t}</option>`));
return options; return options;
} }

View file

@ -348,6 +348,7 @@ window.Religions = (function () {
const religionIds = new Uint16Array(cells.culture); // cell religion; initially based on culture const religionIds = new Uint16Array(cells.culture); // cell religion; initially based on culture
const religions = []; const religions = [];
const codes = [];
// add folk religions // add folk religions
pack.cultures.forEach(c => { pack.cultures.forEach(c => {
@ -376,6 +377,7 @@ window.Religions = (function () {
lockedFolkReligion.i = newId; lockedFolkReligion.i = newId;
religions.push(lockedFolkReligion); religions.push(lockedFolkReligion);
codes.push(lockedFolkReligion.code);
return; return;
} }
} }
@ -384,6 +386,8 @@ window.Religions = (function () {
const name = c.name + " " + rw(types[form]); const name = c.name + " " + rw(types[form]);
const deity = form === "Animism" ? null : getDeityName(c.i); const deity = form === "Animism" ? null : getDeityName(c.i);
const color = getMixedColor(c.color, 0.1, 0); // `url(#hatch${rand(8,13)})`; const color = getMixedColor(c.color, 0.1, 0); // `url(#hatch${rand(8,13)})`;
const code = abbreviate(name, codes);
codes.push(code);
religions.push({ religions.push({
i: newId, i: newId,
name, name,
@ -393,7 +397,8 @@ window.Religions = (function () {
form, form,
deity, deity,
center: c.center, center: c.center,
origins: [0] origins: [0],
code
}); });
}); });
@ -435,6 +440,7 @@ window.Religions = (function () {
religion.origins = religion.origins.filter(origin => origin < newId); religion.origins = religion.origins.filter(origin => origin < newId);
religionsTree.add(cells.p[religion.center]); religionsTree.add(cells.p[religion.center]);
religions.push(religion); religions.push(religion);
codes.push(religion.code);
} }
} }
@ -471,7 +477,9 @@ window.Religions = (function () {
const expansionism = rand(3, 8); const expansionism = rand(3, 8);
const baseColor = religions[culture]?.color || states[state]?.color || getRandomColor(); const baseColor = religions[culture]?.color || states[state]?.color || getRandomColor();
const color = getMixedColor(baseColor, 0.3, 0); const color = getMixedColor(baseColor, 0.3, 0);
const code = abbreviate(name, codes);
codes.push(code);
religions.push({ religions.push({
i: religions.length, i: religions.length,
name, name,
@ -483,7 +491,8 @@ window.Religions = (function () {
expansion, expansion,
expansionism, expansionism,
center, center,
origins origins,
code
}); });
religionsTree.add([x, y]); religionsTree.add([x, y]);
} }
@ -506,6 +515,8 @@ window.Religions = (function () {
const name = getCultName(form, center); const name = getCultName(form, center);
const expansionism = gauss(1.1, 0.5, 0, 5); const expansionism = gauss(1.1, 0.5, 0, 5);
const color = getMixedColor(cultures[culture].color, 0.5, 0); // "url(#hatch7)"; const color = getMixedColor(cultures[culture].color, 0.5, 0); // "url(#hatch7)";
code = abbreviate(name, codes);
codes.push(code);
religions.push({ religions.push({
i: religions.length, i: religions.length,
name, name,
@ -517,7 +528,8 @@ window.Religions = (function () {
expansion: "global", expansion: "global",
expansionism, expansionism,
center, center,
origins origins,
code
}); });
religionsTree.add([x, y]); religionsTree.add([x, y]);
} }
@ -544,6 +556,8 @@ window.Religions = (function () {
const name = getCultName("Heresy", center); const name = getCultName("Heresy", center);
const expansionism = gauss(1.2, 0.5, 0, 5); const expansionism = gauss(1.2, 0.5, 0, 5);
const color = getMixedColor(r.color, 0.4, 0.2); // "url(#hatch6)"; const color = getMixedColor(r.color, 0.4, 0.2); // "url(#hatch6)";
const code = abbreviate(name, codes);
codes.push(code);
pack.religions.push({ pack.religions.push({
i: pack.religions.length, i: pack.religions.length,
name, name,
@ -555,7 +569,8 @@ window.Religions = (function () {
expansion: "global", expansion: "global",
expansionism, expansionism,
center, center,
origins: [r.i] origins: [r.i],
code
}); });
religionsTree.add([x, y]); religionsTree.add([x, y]);
} }
@ -657,13 +672,10 @@ window.Religions = (function () {
} }
function checkReligionCenters() { function checkReligionCenters() {
const codes = pack.religions.map(r => r.code);
pack.religions.forEach(r => { pack.religions.forEach(r => {
if (!r.i) return; if (!r.i) return;
r.code = abbreviate(r.name, codes);
// move religion center if it's not within religion area after expansion // move religion center if it's not within religion area after expansion
if (pack.cells.religion[r.center] === r.i) return; // in area if (r.type==="Folk" || pack.cells.religion[r.center] === r.i) return; // in area, or non-expanding
const firstCell = pack.cells.i.find(i => pack.cells.religion[i] === r.i); const firstCell = pack.cells.i.find(i => pack.cells.religion[i] === r.i);
if (firstCell) r.center = firstCell; // move center, othervise it's an extinct religion if (firstCell) r.center = firstCell; // move center, othervise it's an extinct religion
}); });
@ -725,7 +737,10 @@ window.Religions = (function () {
const form = rw(forms.Folk); const form = rw(forms.Folk);
const deity = form === "Animism" ? null : getDeityName(c.i); const deity = form === "Animism" ? null : getDeityName(c.i);
const name = c.name + " " + rw(types[form]); const name = c.name + " " + rw(types[form]);
const code = abbreviate(name); const code = abbreviate(
name,
religions.map(r => r.code)
);
const newFolk = { const newFolk = {
i: c.i, i: c.i,
name, name,