mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2026-02-04 17:41:23 +01:00
[Migration] NPM (#1266)
* chore: add npm + vite for progressive enhancement * fix: update Dockerfile to copy only the dist folder contents * fix: update Dockerfile to use multi-stage build for optimized production image * fix: correct nginx config file copy command in Dockerfile * chore: add netlify configuration for build and redirects * fix: add NODE_VERSION to environment in Netlify configuration * remove wrong dist folder * Update package.json Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * chore: split public and src * migrating all util files from js to ts * feat: Implement HeightmapGenerator and Voronoi module - Added HeightmapGenerator class for generating heightmaps with various tools (Hill, Pit, Range, Trough, Strait, etc.). - Introduced Voronoi class for creating Voronoi diagrams using Delaunator. - Updated index.html to include new modules. - Created index.ts to manage module imports. - Enhanced arrayUtils and graphUtils with type definitions and improved functionality. - Added utility functions for generating grids and calculating Voronoi cells. * chore: add GitHub Actions workflow for deploying to GitHub Pages * fix: update branch name in GitHub Actions workflow from 'main' to 'master' * chore: update package.json to specify Node.js engine version and remove unused launch.json * Initial plan * Update copilot guidelines to reflect NPM/Vite/TypeScript migration Co-authored-by: Azgaar <26469650+Azgaar@users.noreply.github.com> * Update src/modules/heightmap-generator.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update src/utils/graphUtils.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update src/modules/heightmap-generator.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * feat: Add TIME and ERROR variables to global scope in HeightmapGenerator * fix: Update base path in vite.config.ts for Netlify deployment * fix: Update Node.js version in Dockerfile to 24-alpine --------- Co-authored-by: Marc Emmanuel <marc.emmanuel@tado.com> Co-authored-by: Marc Emmanuel <marcwissler@gmail.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: Azgaar <26469650+Azgaar@users.noreply.github.com>
This commit is contained in:
Azgaar
GitHub
parent
0c26f0831f
commit
9e0eb03618
713 changed files with 5182 additions and 2161 deletions
950
public/modules/dynamic/editors/cultures-editor.js
Normal file
950
public/modules/dynamic/editors/cultures-editor.js
Normal file
|
|
@ -0,0 +1,950 @@
|
|||
const $body = insertEditorHtml();
|
||||
addListeners();
|
||||
|
||||
const cultureTypes = ["Generic", "River", "Lake", "Naval", "Nomadic", "Hunting", "Highland"];
|
||||
|
||||
export function open() {
|
||||
closeDialogs("#culturesEditor, .stable");
|
||||
if (!layerIsOn("toggleCultures")) toggleCultures();
|
||||
if (layerIsOn("toggleStates")) toggleStates();
|
||||
if (layerIsOn("toggleBiomes")) toggleBiomes();
|
||||
if (layerIsOn("toggleReligions")) toggleReligions();
|
||||
if (layerIsOn("toggleProvinces")) toggleProvinces();
|
||||
|
||||
refreshCulturesEditor();
|
||||
|
||||
$("#culturesEditor").dialog({
|
||||
title: "Cultures Editor",
|
||||
resizable: false,
|
||||
close: closeCulturesEditor,
|
||||
position: {my: "right top", at: "right-10 top+10", of: "svg"}
|
||||
});
|
||||
$body.focus();
|
||||
}
|
||||
|
||||
function insertEditorHtml() {
|
||||
const editorHtml = /* html */ `<div id="culturesEditor" class="dialog stable">
|
||||
<div id="culturesHeader" class="header" style="grid-template-columns: 10em 7em 9em 4em 8em 5em 7em 8em">
|
||||
<div data-tip="Click to sort by culture name" class="sortable alphabetically" data-sortby="name">Culture </div>
|
||||
<div data-tip="Click to sort by type" class="sortable alphabetically" data-sortby="type">Type </div>
|
||||
<div data-tip="Click to sort by culture namesbase" class="sortable" data-sortby="base">Namesbase </div>
|
||||
<div data-tip="Click to sort by culture cells count" class="sortable hide" data-sortby="cells">Cells </div>
|
||||
<div data-tip="Click to sort by expansionism" class="sortable hide" data-sortby="expansionism">Expansion </div>
|
||||
<div data-tip="Click to sort by culture area" class="sortable hide" data-sortby="area">Area </div>
|
||||
<div data-tip="Click to sort by culture population" class="sortable hide icon-sort-number-down" data-sortby="population">Population </div>
|
||||
<div data-tip="Click to sort by culture emblems shape" class="sortable alphabetically hide" data-sortby="emblems">Emblems </div>
|
||||
</div>
|
||||
<div id="culturesBody" class="table" data-type="absolute"></div>
|
||||
|
||||
<div id="culturesFooter" class="totalLine">
|
||||
<div data-tip="Cultures number" style="margin-left: 12px">Cultures: <span id="culturesFooterCultures">0</span></div>
|
||||
<div data-tip="Total land cells number" style="margin-left: 12px">Cells: <span id="culturesFooterCells">0</span></div>
|
||||
<div data-tip="Total land area" style="margin-left: 12px">Land Area: <span id="culturesFooterArea">0</span></div>
|
||||
<div data-tip="Total population" style="margin-left: 12px">Population: <span id="culturesFooterPopulation">0</span></div>
|
||||
</div>
|
||||
|
||||
<div id="culturesBottom">
|
||||
<button id="culturesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
|
||||
<button id="culturesEditStyle" data-tip="Edit cultures style in Style Editor" class="icon-adjust"></button>
|
||||
<button id="culturesLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
|
||||
<button id="culturesPercentage" data-tip="Toggle percentage / absolute values display mode" class="icon-percent"></button>
|
||||
<button id="culturesHeirarchy" data-tip="Show cultures hierarchy tree" class="icon-sitemap"></button>
|
||||
<button id="culturesManually" data-tip="Manually re-assign cultures" class="icon-brush"></button>
|
||||
<div id="culturesManuallyButtons" style="display: none">
|
||||
<div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em;">
|
||||
<slider-input id="culturesBrush" min="1" max="100" value="15">Brush size:</slider-input>
|
||||
</div>
|
||||
<button id="culturesManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
|
||||
<button id="culturesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
|
||||
</div>
|
||||
<button id="culturesEditNamesBase" data-tip="Edit a database used for names generation" class="icon-font"></button>
|
||||
<button id="culturesAdd" data-tip="Add a new culture. Hold Shift to add multiple" class="icon-plus"></button>
|
||||
<button id="culturesExport" data-tip="Download cultures-related data" class="icon-download"></button>
|
||||
<button id="culturesImport" data-tip="Upload cultures-related data" class="icon-upload"></button>
|
||||
<button id="culturesRecalculate" data-tip="Recalculate cultures based on current values of growth-related attributes" class="icon-retweet"></button>
|
||||
<span data-tip="Allow culture centers, expansion and type changes to take an immediate effect">
|
||||
<input id="culturesAutoChange" class="checkbox" type="checkbox" />
|
||||
<label for="culturesAutoChange" class="checkbox-label"><i>auto-apply changes</i></label>
|
||||
</span>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
byId("dialogs").insertAdjacentHTML("beforeend", editorHtml);
|
||||
return byId("culturesBody");
|
||||
}
|
||||
|
||||
function addListeners() {
|
||||
applySortingByHeader("culturesHeader");
|
||||
|
||||
byId("culturesEditorRefresh").on("click", refreshCulturesEditor);
|
||||
byId("culturesEditStyle").on("click", () => editStyle("cults"));
|
||||
byId("culturesLegend").on("click", toggleLegend);
|
||||
byId("culturesPercentage").on("click", togglePercentageMode);
|
||||
byId("culturesHeirarchy").on("click", showHierarchy);
|
||||
byId("culturesRecalculate").on("click", () => recalculateCultures(true));
|
||||
byId("culturesManually").on("click", enterCultureManualAssignent);
|
||||
byId("culturesManuallyApply").on("click", applyCultureManualAssignent);
|
||||
byId("culturesManuallyCancel").on("click", () => exitCulturesManualAssignment());
|
||||
byId("culturesEditNamesBase").on("click", editNamesbase);
|
||||
byId("culturesAdd").on("click", enterAddCulturesMode);
|
||||
byId("culturesExport").on("click", downloadCulturesCsv);
|
||||
byId("culturesImport").on("click", () => byId("culturesCSVToLoad").click());
|
||||
byId("culturesCSVToLoad").on("change", uploadCulturesData);
|
||||
}
|
||||
|
||||
function refreshCulturesEditor() {
|
||||
culturesCollectStatistics();
|
||||
culturesEditorAddLines();
|
||||
drawCultureCenters();
|
||||
}
|
||||
|
||||
function culturesCollectStatistics() {
|
||||
const {cells, cultures, burgs} = pack;
|
||||
cultures.forEach(c => {
|
||||
c.cells = c.area = c.rural = c.urban = 0;
|
||||
});
|
||||
|
||||
for (const i of cells.i) {
|
||||
if (cells.h[i] < 20) continue;
|
||||
const cultureId = cells.culture[i];
|
||||
cultures[cultureId].cells += 1;
|
||||
cultures[cultureId].area += cells.area[i];
|
||||
cultures[cultureId].rural += cells.pop[i];
|
||||
const burgId = cells.burg[i];
|
||||
if (burgId) cultures[cultureId].urban += burgs[burgId].population;
|
||||
}
|
||||
}
|
||||
|
||||
function culturesEditorAddLines() {
|
||||
const unit = getAreaUnit();
|
||||
let lines = "";
|
||||
let totalArea = 0;
|
||||
let totalPopulation = 0;
|
||||
|
||||
const emblemShapeGroup = byId("emblemShape")?.selectedOptions[0]?.parentNode?.label;
|
||||
const selectShape = emblemShapeGroup === "Diversiform";
|
||||
|
||||
for (const c of pack.cultures) {
|
||||
if (c.removed) continue;
|
||||
const area = getArea(c.area);
|
||||
const rural = c.rural * populationRate;
|
||||
const urban = c.urban * populationRate * urbanization;
|
||||
const population = rn(rural + urban);
|
||||
const populationTip = `Total population: ${si(population)}. Rural population: ${si(rural)}. Urban population: ${si(
|
||||
urban
|
||||
)}. Click to edit`;
|
||||
totalArea += area;
|
||||
totalPopulation += population;
|
||||
|
||||
if (!c.i) {
|
||||
// Uncultured (neutral) line
|
||||
lines += /* html */ `<div
|
||||
class="states"
|
||||
data-id="${c.i}"
|
||||
data-name="${c.name}"
|
||||
data-color=""
|
||||
data-cells="${c.cells}"
|
||||
data-area="${area}"
|
||||
data-population="${population}"
|
||||
data-base="${c.base}"
|
||||
data-type=""
|
||||
data-expansionism=""
|
||||
data-emblems="${c.shield}"
|
||||
>
|
||||
<svg width="11" height="11" class="placeholder"></svg>
|
||||
<input data-tip="Neutral culture name. Click and type to change" class="cultureName italic" style="width: 7em"
|
||||
value="${c.name}" autocorrect="off" spellcheck="false" />
|
||||
<span class="icon-cw placeholder"></span>
|
||||
<select class="cultureType placeholder">${getTypeOptions(c.type)}</select>
|
||||
<span data-tip="Click to re-generate names for burgs with this culture assigned" class="icon-arrows-cw hide"></span>
|
||||
<select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names"
|
||||
class="cultureBase">${getBaseOptions(c.base)}</select>
|
||||
<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>
|
||||
<span class="icon-resize-full placeholder hide"></span>
|
||||
<input class="cultureExpan placeholder hide" type="number" />
|
||||
<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>
|
||||
<span data-tip="${populationTip}" class="icon-male hide"></span>
|
||||
<div data-tip="${populationTip}" class="culturePopulation hide pointer"
|
||||
style="width: 4em">${si(population)}</div>
|
||||
${getShapeOptions(selectShape, c.shield)}
|
||||
</div>`;
|
||||
continue;
|
||||
}
|
||||
|
||||
lines += /* html */ `<div
|
||||
class="states"
|
||||
data-id="${c.i}"
|
||||
data-name="${c.name}"
|
||||
data-color="${c.color}"
|
||||
data-cells="${c.cells}"
|
||||
data-area="${area}"
|
||||
data-population="${population}"
|
||||
data-base="${c.base}"
|
||||
data-type="${c.type}"
|
||||
data-expansionism="${c.expansionism}"
|
||||
data-emblems="${c.shield}"
|
||||
>
|
||||
<fill-box fill="${c.color}"></fill-box>
|
||||
<input data-tip="Culture name. Click and type to change" class="cultureName" style="width: 7em"
|
||||
value="${c.name}" autocorrect="off" spellcheck="false" />
|
||||
<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(c.type)}</select>
|
||||
<span data-tip="Click to re-generate names for burgs with this culture assigned" class="icon-arrows-cw hide"></span>
|
||||
<select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names"
|
||||
class="cultureBase">${getBaseOptions(c.base)}</select>
|
||||
<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>
|
||||
<span data-tip="Culture expansionism. Defines competitive size" class="icon-resize-full hide"></span>
|
||||
<input
|
||||
data-tip="Culture expansionism. Defines competitive size. Click to change, then click Recalculate to apply change"
|
||||
class="cultureExpan hide"
|
||||
type="number"
|
||||
min="0"
|
||||
max="99"
|
||||
step=".1"
|
||||
value=${c.expansionism}
|
||||
/>
|
||||
<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>
|
||||
<span data-tip="${populationTip}" class="icon-male hide"></span>
|
||||
<div data-tip="${populationTip}" class="culturePopulation hide pointer"
|
||||
style="width: 4em">${si(population)}</div>
|
||||
${getShapeOptions(selectShape, c.shield)}
|
||||
<span data-tip="Lock culture" class="icon-lock${c.lock ? "" : "-open"} hide"></span>
|
||||
<span data-tip="Remove culture" class="icon-trash-empty hide"></span>
|
||||
</div>`;
|
||||
}
|
||||
$body.innerHTML = lines;
|
||||
|
||||
// update footer
|
||||
byId("culturesFooterCultures").innerHTML = pack.cultures.filter(c => c.i && !c.removed).length;
|
||||
byId("culturesFooterCells").innerHTML = pack.cells.h.filter(h => h >= 20).length;
|
||||
byId("culturesFooterArea").innerHTML = `${si(totalArea)} ${unit}`;
|
||||
byId("culturesFooterPopulation").innerHTML = si(totalPopulation);
|
||||
byId("culturesFooterArea").dataset.area = totalArea;
|
||||
byId("culturesFooterPopulation").dataset.population = totalPopulation;
|
||||
|
||||
// add listeners
|
||||
$body.querySelectorAll(":scope > div").forEach($line => {
|
||||
$line.on("mouseenter", cultureHighlightOn);
|
||||
$line.on("mouseleave", cultureHighlightOff);
|
||||
$line.on("click", selectCultureOnLineClick);
|
||||
});
|
||||
$body.querySelectorAll("fill-box").forEach($el => $el.on("click", cultureChangeColor));
|
||||
$body.querySelectorAll("div > input.cultureName").forEach($el => $el.on("input", cultureChangeName));
|
||||
$body.querySelectorAll("div > span.icon-cw").forEach($el => $el.on("click", cultureRegenerateName));
|
||||
$body.querySelectorAll("div > input.cultureExpan").forEach($el => $el.on("change", cultureChangeExpansionism));
|
||||
$body.querySelectorAll("div > select.cultureType").forEach($el => $el.on("change", cultureChangeType));
|
||||
$body.querySelectorAll("div > select.cultureBase").forEach($el => $el.on("change", cultureChangeBase));
|
||||
$body.querySelectorAll("div > select.cultureEmblems").forEach($el => $el.on("change", cultureChangeEmblemsShape));
|
||||
$body.querySelectorAll("div > div.culturePopulation").forEach($el => $el.on("click", changePopulation));
|
||||
$body.querySelectorAll("div > span.icon-arrows-cw").forEach($el => $el.on("click", cultureRegenerateBurgs));
|
||||
$body.querySelectorAll("div > span.icon-trash-empty").forEach($el => $el.on("click", cultureRemovePrompt));
|
||||
$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));
|
||||
|
||||
const $culturesHeader = byId("culturesHeader");
|
||||
$culturesHeader.querySelector("div[data-sortby='emblems']").style.display = selectShape ? "inline-block" : "none";
|
||||
|
||||
if ($body.dataset.type === "percentage") {
|
||||
$body.dataset.type = "absolute";
|
||||
togglePercentageMode();
|
||||
}
|
||||
applySorting($culturesHeader);
|
||||
$("#culturesEditor").dialog({width: fitContent()});
|
||||
}
|
||||
|
||||
function getTypeOptions(type) {
|
||||
let options = "";
|
||||
cultureTypes.forEach(t => (options += `<option ${type === t ? "selected" : ""} value="${t}">${t}</option>`));
|
||||
return options;
|
||||
}
|
||||
|
||||
function getBaseOptions(base) {
|
||||
let options = "";
|
||||
nameBases.forEach((n, i) => (options += `<option ${base === i ? "selected" : ""} value="${i}">${n.name}</option>`));
|
||||
if (!nameBases[base]) options += `<option selected value="${base}">removed</option>`; // in case namesbase was removed
|
||||
return options;
|
||||
}
|
||||
|
||||
function getShapeOptions(selectShape, selected) {
|
||||
if (!selectShape) return "";
|
||||
|
||||
const shapes = Object.keys(COA.shields.types)
|
||||
.map(type => Object.keys(COA.shields[type]))
|
||||
.flat();
|
||||
const options = shapes.map(
|
||||
shape => `<option ${shape === selected ? "selected" : ""} value="${shape}">${capitalize(shape)}</option>`
|
||||
);
|
||||
return `<select data-tip="Emblem shape associated with culture. Click to change" class="cultureEmblems hide">${options}</select>`;
|
||||
}
|
||||
|
||||
const cultureHighlightOn = debounce(event => {
|
||||
const cultureId = Number(event.id || event.target.dataset.id);
|
||||
|
||||
if (!layerIsOn("toggleCultures")) return;
|
||||
if (customization) return;
|
||||
|
||||
const animate = d3.transition().duration(2000).ease(d3.easeSinIn);
|
||||
cults
|
||||
.select("#culture" + cultureId)
|
||||
.raise()
|
||||
.transition(animate)
|
||||
.attr("stroke-width", 2.5)
|
||||
.attr("stroke", "#d0240f");
|
||||
debug
|
||||
.select("#cultureCenter" + cultureId)
|
||||
.raise()
|
||||
.transition(animate)
|
||||
.attr("r", 3)
|
||||
.attr("stroke", "#d0240f");
|
||||
}, 200);
|
||||
|
||||
function cultureHighlightOff(event) {
|
||||
const cultureId = Number(event.id || event.target.dataset.id);
|
||||
|
||||
if (!layerIsOn("toggleCultures")) return;
|
||||
cults
|
||||
.select("#culture" + cultureId)
|
||||
.transition()
|
||||
.attr("stroke-width", null)
|
||||
.attr("stroke", null);
|
||||
debug
|
||||
.select("#cultureCenter" + cultureId)
|
||||
.transition()
|
||||
.attr("r", 2)
|
||||
.attr("stroke", null);
|
||||
}
|
||||
|
||||
function cultureChangeColor() {
|
||||
const $el = this;
|
||||
const currentFill = $el.getAttribute("fill");
|
||||
const cultureId = +$el.parentNode.dataset.id;
|
||||
|
||||
const callback = newFill => {
|
||||
$el.fill = newFill;
|
||||
pack.cultures[cultureId].color = newFill;
|
||||
cults.select("#culture" + cultureId).attr("fill", newFill);
|
||||
debug.select("#cultureCenter" + cultureId).attr("fill", newFill);
|
||||
};
|
||||
|
||||
openPicker(currentFill, callback);
|
||||
}
|
||||
|
||||
function cultureChangeName() {
|
||||
const culture = +this.parentNode.dataset.id;
|
||||
this.parentNode.dataset.name = this.value;
|
||||
pack.cultures[culture].name = this.value;
|
||||
pack.cultures[culture].code = abbreviate(
|
||||
this.value,
|
||||
pack.cultures.map(c => c.code)
|
||||
);
|
||||
}
|
||||
|
||||
function cultureRegenerateName() {
|
||||
const cultureId = +this.parentNode.dataset.id;
|
||||
const base = pack.cultures[cultureId].base;
|
||||
if (!nameBases[base]) return tip("Namesbase is not defined, please select a valid namesbase", false, "error", 5000);
|
||||
|
||||
const name = Names.getCultureShort(cultureId);
|
||||
this.parentNode.querySelector("input.cultureName").value = name;
|
||||
pack.cultures[cultureId].name = name;
|
||||
}
|
||||
|
||||
function cultureChangeExpansionism() {
|
||||
const culture = +this.parentNode.dataset.id;
|
||||
this.parentNode.dataset.expansionism = this.value;
|
||||
pack.cultures[culture].expansionism = +this.value;
|
||||
recalculateCultures();
|
||||
}
|
||||
|
||||
function cultureChangeType() {
|
||||
const culture = +this.parentNode.dataset.id;
|
||||
this.parentNode.dataset.type = this.value;
|
||||
pack.cultures[culture].type = this.value;
|
||||
recalculateCultures();
|
||||
}
|
||||
|
||||
function cultureChangeBase() {
|
||||
const culture = +this.parentNode.dataset.id;
|
||||
const v = +this.value;
|
||||
this.parentNode.dataset.base = pack.cultures[culture].base = v;
|
||||
}
|
||||
|
||||
function cultureChangeEmblemsShape() {
|
||||
const culture = +this.parentNode.dataset.id;
|
||||
const shape = this.value;
|
||||
this.parentNode.dataset.emblems = pack.cultures[culture].shield = shape;
|
||||
|
||||
const rerenderCOA = (id, coa) => {
|
||||
const $coa = byId(id);
|
||||
if (!$coa) return; // not rendered
|
||||
$coa.remove();
|
||||
COArenderer.trigger(id, coa);
|
||||
};
|
||||
|
||||
pack.states.forEach(state => {
|
||||
if (state.culture !== culture || !state.i || state.removed || !state.coa || state.coa.custom) return;
|
||||
if (shape === state.coa.shield) return;
|
||||
state.coa.shield = shape;
|
||||
rerenderCOA("stateCOA" + state.i, state.coa);
|
||||
});
|
||||
|
||||
pack.provinces.forEach(province => {
|
||||
if (
|
||||
pack.cells.culture[province.center] !== culture ||
|
||||
!province.i ||
|
||||
province.removed ||
|
||||
!province.coa ||
|
||||
province.coa.custom
|
||||
)
|
||||
return;
|
||||
if (shape === province.coa.shield) return;
|
||||
province.coa.shield = shape;
|
||||
rerenderCOA("provinceCOA" + province.i, province.coa);
|
||||
});
|
||||
|
||||
pack.burgs.forEach(burg => {
|
||||
if (burg.culture !== culture || !burg.i || burg.removed || !burg.coa || burg.coa.custom) return;
|
||||
if (shape === burg.coa.shield) return;
|
||||
burg.coa.shield = shape;
|
||||
rerenderCOA("burgCOA" + burg.i, burg.coa);
|
||||
});
|
||||
}
|
||||
|
||||
function changePopulation() {
|
||||
const cultureId = +this.parentNode.dataset.id;
|
||||
const culture = pack.cultures[cultureId];
|
||||
if (!culture.cells) return tip("Culture does not have any cells, cannot change population", false, "error");
|
||||
|
||||
const rural = rn(culture.rural * populationRate);
|
||||
const urban = rn(culture.urban * populationRate * urbanization);
|
||||
const total = rural + urban;
|
||||
const format = n => Number(n).toLocaleString();
|
||||
const burgs = pack.burgs.filter(b => !b.removed && b.culture === cultureId);
|
||||
|
||||
alertMessage.innerHTML = /* html */ `<div>
|
||||
<i>Change population of all cells assigned to the culture</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 = l(totalNew);
|
||||
totalPopPerc.innerHTML = rn((totalNew / total) * 100);
|
||||
};
|
||||
|
||||
ruralPop.oninput = () => update();
|
||||
urbanPop.oninput = () => update();
|
||||
|
||||
$("#alert").dialog({
|
||||
resizable: false,
|
||||
title: "Change culture population",
|
||||
width: "24em",
|
||||
buttons: {
|
||||
Apply: function () {
|
||||
applyPopulationChange(rural, urban, ruralPop.value, urbanPop.value, cultureId);
|
||||
$(this).dialog("close");
|
||||
},
|
||||
Cancel: function () {
|
||||
$(this).dialog("close");
|
||||
}
|
||||
},
|
||||
position: {my: "center", at: "center", of: "svg"}
|
||||
});
|
||||
}
|
||||
|
||||
function applyPopulationChange(oldRural, oldUrban, newRural, newUrban, culture) {
|
||||
const ruralChange = newRural / oldRural;
|
||||
if (isFinite(ruralChange) && ruralChange !== 1) {
|
||||
const cells = pack.cells.i.filter(i => pack.cells.culture[i] === culture);
|
||||
cells.forEach(i => (pack.cells.pop[i] *= ruralChange));
|
||||
}
|
||||
if (!isFinite(ruralChange) && +newRural > 0) {
|
||||
const points = newRural / populationRate;
|
||||
const cells = pack.cells.i.filter(i => pack.cells.culture[i] === culture);
|
||||
const pop = rn(points / cells.length);
|
||||
cells.forEach(i => (pack.cells.pop[i] = pop));
|
||||
}
|
||||
|
||||
const burgs = pack.burgs.filter(b => !b.removed && b.culture === culture);
|
||||
const urbanChange = newUrban / oldUrban;
|
||||
if (isFinite(urbanChange) && urbanChange !== 1) {
|
||||
burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
|
||||
}
|
||||
if (!isFinite(urbanChange) && +newUrban > 0) {
|
||||
const points = newUrban / populationRate / urbanization;
|
||||
const population = rn(points / burgs.length, 4);
|
||||
burgs.forEach(b => (b.population = population));
|
||||
}
|
||||
|
||||
if (layerIsOn("togglePopulation")) drawPopulation();
|
||||
refreshCulturesEditor();
|
||||
}
|
||||
|
||||
function cultureRegenerateBurgs() {
|
||||
if (customization === 4) return;
|
||||
|
||||
const cultureId = +this.parentNode.dataset.id;
|
||||
const base = pack.cultures[cultureId].base;
|
||||
if (!nameBases[base]) return tip("Namesbase is not defined, please select a valid namesbase", false, "error", 5000);
|
||||
|
||||
const cultureBurgs = pack.burgs.filter(b => b.culture === cultureId && !b.removed && !b.lock);
|
||||
cultureBurgs.forEach(b => {
|
||||
b.name = Names.getCulture(cultureId);
|
||||
labels.select("[data-id='" + b.i + "']").text(b.name);
|
||||
});
|
||||
tip(`Names for ${cultureBurgs.length} burgs are regenerated`, false, "success");
|
||||
}
|
||||
|
||||
function removeCulture(cultureId) {
|
||||
cults.select("#culture" + cultureId).remove();
|
||||
debug.select("#cultureCenter" + cultureId).remove();
|
||||
|
||||
const {burgs, states, cells, cultures} = pack;
|
||||
|
||||
burgs.filter(b => b.culture == cultureId).forEach(b => (b.culture = 0));
|
||||
states.forEach(s => {
|
||||
if (s.culture === cultureId) s.culture = 0;
|
||||
});
|
||||
cells.culture.forEach((c, i) => {
|
||||
if (c === cultureId) cells.culture[i] = 0;
|
||||
});
|
||||
cultures[cultureId].removed = true;
|
||||
|
||||
cultures
|
||||
.filter(c => c.i && !c.removed)
|
||||
.forEach(c => {
|
||||
c.origins = c.origins.filter(origin => origin !== cultureId);
|
||||
if (!c.origins.length) c.origins = [0];
|
||||
});
|
||||
refreshCulturesEditor();
|
||||
}
|
||||
|
||||
function cultureRemovePrompt() {
|
||||
if (customization) return;
|
||||
|
||||
const cultureId = +this.parentNode.dataset.id;
|
||||
confirmationDialog({
|
||||
title: "Remove culture",
|
||||
message: "Are you sure you want to remove the culture? <br>This action cannot be reverted",
|
||||
confirm: "Remove",
|
||||
onConfirm: () => removeCulture(cultureId)
|
||||
});
|
||||
}
|
||||
|
||||
function drawCultureCenters() {
|
||||
const tooltip = "Drag to move the culture center (ancestral home)";
|
||||
debug.select("#cultureCenters").remove();
|
||||
const cultureCenters = debug
|
||||
.append("g")
|
||||
.attr("id", "cultureCenters")
|
||||
.attr("stroke-width", 0.8)
|
||||
.attr("stroke", "#444444")
|
||||
.style("cursor", "move");
|
||||
|
||||
const data = pack.cultures.filter(c => c.i && !c.removed);
|
||||
cultureCenters
|
||||
.selectAll("circle")
|
||||
.data(data)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("id", d => "cultureCenter" + d.i)
|
||||
.attr("data-id", d => d.i)
|
||||
.attr("r", 2)
|
||||
.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(tooltip, true);
|
||||
$body.querySelector(`div[data-id='${d.i}']`).classList.add("selected");
|
||||
cultureHighlightOn(event);
|
||||
})
|
||||
.on("mouseleave", d => {
|
||||
tip("", true);
|
||||
$body.querySelector(`div[data-id='${d.i}']`).classList.remove("selected");
|
||||
cultureHighlightOff(event);
|
||||
})
|
||||
.call(d3.drag().on("start", cultureCenterDrag));
|
||||
}
|
||||
|
||||
function cultureCenterDrag() {
|
||||
const cultureId = +this.id.slice(13);
|
||||
const tr = parseTransform(this.getAttribute("transform"));
|
||||
const x0 = +tr[0] - d3.event.x;
|
||||
const y0 = +tr[1] - d3.event.y;
|
||||
|
||||
function handleDrag() {
|
||||
const {x, y} = d3.event;
|
||||
this.setAttribute("transform", `translate(${x0 + x},${y0 + y})`);
|
||||
const cell = findCell(x, y);
|
||||
if (pack.cells.h[cell] < 20) return; // ignore dragging on water
|
||||
|
||||
pack.cultures[cultureId].center = cell;
|
||||
recalculateCultures();
|
||||
}
|
||||
|
||||
const dragDebounced = debounce(handleDrag, 50);
|
||||
d3.event.on("drag", dragDebounced);
|
||||
}
|
||||
|
||||
function toggleLegend() {
|
||||
if (legend.selectAll("*").size()) return clearLegend();
|
||||
|
||||
const data = pack.cultures
|
||||
.filter(c => c.i && !c.removed && c.cells)
|
||||
.sort((a, b) => b.area - a.area)
|
||||
.map(c => [c.i, c.color, c.name]);
|
||||
drawLegend("Cultures", data);
|
||||
}
|
||||
|
||||
function togglePercentageMode() {
|
||||
if ($body.dataset.type === "absolute") {
|
||||
$body.dataset.type = "percentage";
|
||||
const totalCells = +byId("culturesFooterCells").innerText;
|
||||
const totalArea = +byId("culturesFooterArea").dataset.area;
|
||||
const totalPopulation = +byId("culturesFooterPopulation").dataset.population;
|
||||
|
||||
$body.querySelectorAll(":scope > div").forEach(function (el) {
|
||||
const {cells, area, population} = el.dataset;
|
||||
el.querySelector(".cultureCells").innerText = rn((+cells / totalCells) * 100) + "%";
|
||||
el.querySelector(".cultureArea").innerText = rn((+area / totalArea) * 100) + "%";
|
||||
el.querySelector(".culturePopulation").innerText = rn((+population / totalPopulation) * 100) + "%";
|
||||
});
|
||||
} else {
|
||||
$body.dataset.type = "absolute";
|
||||
culturesEditorAddLines();
|
||||
}
|
||||
}
|
||||
|
||||
async function showHierarchy() {
|
||||
if (customization) return;
|
||||
const HeirarchyTree = await import("../hierarchy-tree.js?v=1.88.06");
|
||||
|
||||
const getDescription = culture => {
|
||||
const {name, type, rural, urban} = culture;
|
||||
|
||||
const population = rural * populationRate + urban * populationRate * urbanization;
|
||||
const populationText = population > 0 ? si(rn(population)) + " people" : "Extinct";
|
||||
return `${name} culture. ${type}. ${populationText}`;
|
||||
};
|
||||
|
||||
const getShape = ({type}) => {
|
||||
if (type === "Generic") return "circle";
|
||||
if (type === "River") return "diamond";
|
||||
if (type === "Lake") return "hexagon";
|
||||
if (type === "Naval") return "square";
|
||||
if (type === "Highland") return "concave";
|
||||
if (type === "Nomadic") return "octagon";
|
||||
if (type === "Hunting") return "pentagon";
|
||||
};
|
||||
|
||||
HeirarchyTree.open({
|
||||
type: "cultures",
|
||||
data: pack.cultures,
|
||||
onNodeEnter: cultureHighlightOn,
|
||||
onNodeLeave: cultureHighlightOff,
|
||||
getDescription,
|
||||
getShape
|
||||
});
|
||||
}
|
||||
|
||||
function recalculateCultures(force) {
|
||||
if (force || culturesAutoChange.checked) {
|
||||
Cultures.expand();
|
||||
drawCultures();
|
||||
pack.burgs.forEach(b => (b.culture = pack.cells.culture[b.cell]));
|
||||
refreshCulturesEditor();
|
||||
}
|
||||
}
|
||||
|
||||
function enterCultureManualAssignent() {
|
||||
if (!layerIsOn("toggleCultures")) toggleCultures();
|
||||
customization = 4;
|
||||
cults.append("g").attr("id", "temp");
|
||||
document.querySelectorAll("#culturesBottom > *").forEach(el => (el.style.display = "none"));
|
||||
byId("culturesManuallyButtons").style.display = "inline-block";
|
||||
debug.select("#cultureCenters").style("display", "none");
|
||||
|
||||
culturesEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden"));
|
||||
culturesFooter.style.display = "none";
|
||||
$body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
|
||||
$("#culturesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
|
||||
|
||||
tip("Click on culture to select, drag the circle to change culture", true);
|
||||
viewbox
|
||||
.style("cursor", "crosshair")
|
||||
.on("click", selectCultureOnMapClick)
|
||||
.call(d3.drag().on("start", dragCultureBrush))
|
||||
.on("touchmove mousemove", moveCultureBrush);
|
||||
|
||||
$body.querySelector("div").classList.add("selected");
|
||||
}
|
||||
|
||||
function selectCultureOnLineClick(i) {
|
||||
if (customization !== 4) return;
|
||||
$body.querySelector("div.selected").classList.remove("selected");
|
||||
this.classList.add("selected");
|
||||
}
|
||||
|
||||
function selectCultureOnMapClick() {
|
||||
const point = d3.mouse(this);
|
||||
const i = findCell(point[0], point[1]);
|
||||
if (pack.cells.h[i] < 20) return;
|
||||
|
||||
const assigned = cults.select("#temp").select("polygon[data-cell='" + i + "']");
|
||||
const culture = assigned.size() ? +assigned.attr("data-culture") : pack.cells.culture[i];
|
||||
|
||||
$body.querySelector("div.selected").classList.remove("selected");
|
||||
$body.querySelector("div[data-id='" + culture + "']").classList.add("selected");
|
||||
}
|
||||
|
||||
function dragCultureBrush() {
|
||||
const radius = +culturesBrush.value;
|
||||
|
||||
d3.event.on("drag", () => {
|
||||
if (!d3.event.dx && !d3.event.dy) return;
|
||||
const p = d3.mouse(this);
|
||||
moveCircle(p[0], p[1], radius);
|
||||
|
||||
const found = radius > 5 ? findAll(p[0], p[1], radius) : [findCell(p[0], p[1], radius)];
|
||||
const selection = found.filter(isLand);
|
||||
if (selection) changeCultureForSelection(selection);
|
||||
});
|
||||
}
|
||||
|
||||
function changeCultureForSelection(selection) {
|
||||
const temp = cults.select("#temp");
|
||||
const selected = $body.querySelector("div.selected");
|
||||
|
||||
const cultureNew = +selected.dataset.id;
|
||||
const color = pack.cultures[cultureNew].color || "#ffffff";
|
||||
|
||||
selection.forEach(function (i) {
|
||||
const exists = temp.select("polygon[data-cell='" + i + "']");
|
||||
const cultureOld = exists.size() ? +exists.attr("data-culture") : pack.cells.culture[i];
|
||||
if (cultureNew === cultureOld) return;
|
||||
|
||||
// change of append new element
|
||||
if (exists.size()) exists.attr("data-culture", cultureNew).attr("fill", color).attr("stroke", color);
|
||||
else
|
||||
temp
|
||||
.append("polygon")
|
||||
.attr("data-cell", i)
|
||||
.attr("data-culture", cultureNew)
|
||||
.attr("points", getPackPolygon(i))
|
||||
.attr("fill", color)
|
||||
.attr("stroke", color);
|
||||
});
|
||||
}
|
||||
|
||||
function moveCultureBrush() {
|
||||
showMainTip();
|
||||
const point = d3.mouse(this);
|
||||
const radius = +culturesBrush.value;
|
||||
moveCircle(point[0], point[1], radius);
|
||||
}
|
||||
|
||||
function applyCultureManualAssignent() {
|
||||
const changed = cults.select("#temp").selectAll("polygon");
|
||||
changed.each(function () {
|
||||
const i = +this.dataset.cell;
|
||||
const c = +this.dataset.culture;
|
||||
pack.cells.culture[i] = c;
|
||||
if (pack.cells.burg[i]) pack.burgs[pack.cells.burg[i]].culture = c;
|
||||
});
|
||||
|
||||
if (changed.size()) {
|
||||
drawCultures();
|
||||
refreshCulturesEditor();
|
||||
}
|
||||
exitCulturesManualAssignment();
|
||||
}
|
||||
|
||||
function exitCulturesManualAssignment(close) {
|
||||
customization = 0;
|
||||
cults.select("#temp").remove();
|
||||
removeCircle();
|
||||
document.querySelectorAll("#culturesBottom > *").forEach(el => (el.style.display = "inline-block"));
|
||||
byId("culturesManuallyButtons").style.display = "none";
|
||||
|
||||
culturesEditor.querySelectorAll(".hide").forEach(el => el.classList.remove("hidden"));
|
||||
culturesFooter.style.display = "block";
|
||||
$body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
|
||||
if (!close) $("#culturesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
|
||||
|
||||
debug.select("#cultureCenters").style("display", null);
|
||||
restoreDefaultEvents();
|
||||
clearMainTip();
|
||||
const selected = $body.querySelector("div.selected");
|
||||
if (selected) selected.classList.remove("selected");
|
||||
}
|
||||
|
||||
function enterAddCulturesMode() {
|
||||
if (this.classList.contains("pressed")) return exitAddCultureMode();
|
||||
|
||||
customization = 9;
|
||||
this.classList.add("pressed");
|
||||
tip("Click on the map to add a new culture", true);
|
||||
viewbox.style("cursor", "crosshair").on("click", addCulture);
|
||||
$body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
|
||||
}
|
||||
|
||||
function exitAddCultureMode() {
|
||||
customization = 0;
|
||||
restoreDefaultEvents();
|
||||
clearMainTip();
|
||||
$body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
|
||||
if (culturesAdd.classList.contains("pressed")) culturesAdd.classList.remove("pressed");
|
||||
}
|
||||
|
||||
function addCulture() {
|
||||
const point = d3.mouse(this);
|
||||
const center = findCell(point[0], point[1]);
|
||||
|
||||
if (pack.cells.h[center] < 20)
|
||||
return tip("You cannot place culture center into the water. Please click on a land cell", false, "error");
|
||||
|
||||
const occupied = pack.cultures.some(c => !c.removed && c.center === center);
|
||||
if (occupied) return tip("This cell is already a culture center. Please select a different cell", false, "error");
|
||||
|
||||
if (d3.event.shiftKey === false) exitAddCultureMode();
|
||||
Cultures.add(center);
|
||||
|
||||
drawCultureCenters();
|
||||
culturesEditorAddLines();
|
||||
}
|
||||
|
||||
function downloadCulturesCsv() {
|
||||
const unit = getAreaUnit("2");
|
||||
const headers = `Id,Name,Color,Cells,Expansionism,Type,Area ${unit},Population,Namesbase,Emblems Shape,Origins`;
|
||||
const lines = Array.from($body.querySelectorAll(":scope > div"));
|
||||
const data = lines.map($line => {
|
||||
const {id, name, color, cells, expansionism, type, area, population, emblems, base} = $line.dataset;
|
||||
const namesbase = nameBases[+base].name;
|
||||
const {origins} = pack.cultures[+id];
|
||||
const originList = origins.filter(origin => origin).map(origin => pack.cultures[origin].name);
|
||||
const originText = '"' + originList.join(", ") + '"';
|
||||
return [id, name, color, cells, expansionism, type, area, population, namesbase, emblems, originText].join(",");
|
||||
});
|
||||
const csvData = [headers].concat(data).join("\n");
|
||||
|
||||
const name = getFileName("Cultures") + ".csv";
|
||||
downloadFile(csvData, name);
|
||||
}
|
||||
|
||||
function closeCulturesEditor() {
|
||||
debug.select("#cultureCenters").remove();
|
||||
exitCulturesManualAssignment("close");
|
||||
exitAddCultureMode();
|
||||
}
|
||||
|
||||
async function uploadCulturesData() {
|
||||
const file = this.files[0];
|
||||
this.value = "";
|
||||
const csv = await file.text();
|
||||
const data = d3.csvParse(csv, d => ({
|
||||
name: d.Name,
|
||||
i: +d.Id,
|
||||
color: d.Color,
|
||||
expansionism: +d.Expansionism,
|
||||
type: d.Type,
|
||||
population: +d.Population,
|
||||
emblemsShape: d["Emblems Shape"],
|
||||
origins: d.Origins,
|
||||
namesbase: d.Namesbase
|
||||
}));
|
||||
|
||||
const {cultures, cells} = pack;
|
||||
const shapes = Object.keys(COA.shields.types)
|
||||
.map(type => Object.keys(COA.shields[type]))
|
||||
.flat();
|
||||
|
||||
const populated = cells.pop.map((c, i) => (c ? i : null)).filter(c => c);
|
||||
cultures.forEach(item => {
|
||||
if (item.i) item.removed = true;
|
||||
});
|
||||
|
||||
for (const culture of data) {
|
||||
let current;
|
||||
if (culture.i < cultures.length) {
|
||||
current = cultures[culture.i];
|
||||
|
||||
const ratio = current.urban / (current.rural + current.urban);
|
||||
applyPopulationChange(
|
||||
current.rural,
|
||||
current.urban,
|
||||
culture.population * (1 - ratio),
|
||||
culture.population * ratio,
|
||||
culture.i
|
||||
);
|
||||
} else {
|
||||
current = {i: cultures.length, center: ra(populated), area: 0, cells: 0, origins: [0], rural: 0, urban: 0};
|
||||
cultures.push(current);
|
||||
}
|
||||
|
||||
current.removed = false;
|
||||
current.name = culture.name;
|
||||
|
||||
if (current.i) {
|
||||
current.code = abbreviate(
|
||||
current.name,
|
||||
cultures.map(c => c.code)
|
||||
);
|
||||
|
||||
current.color = culture.color;
|
||||
current.expansionism = +culture.expansionism;
|
||||
|
||||
if (cultureTypes.includes(culture.type)) current.type = culture.type;
|
||||
else current.type = "Generic";
|
||||
}
|
||||
|
||||
culture.origins = current.i ? restoreOrigins(culture.origins || "") : [null];
|
||||
current.shield = shapes.includes(culture.emblemsShape) ? culture.emblemsShape : "heater";
|
||||
current.base = nameBases.findIndex(n => n.name == culture.namesbase); // can be -1 if namesbase is not found
|
||||
|
||||
function restoreOrigins(originsString) {
|
||||
const originNames = originsString
|
||||
.replaceAll('"', "")
|
||||
.split(",")
|
||||
.map(s => s.trim())
|
||||
.filter(s => s);
|
||||
|
||||
const originIds = originNames.map(name => {
|
||||
const id = cultures.findIndex(c => c.name === name);
|
||||
return id === -1 ? null : id;
|
||||
});
|
||||
|
||||
current.origins = originIds.filter(id => id !== null);
|
||||
if (!current.origins.length) current.origins = [0];
|
||||
}
|
||||
}
|
||||
|
||||
cultures.filter(c => c.removed).forEach(c => removeCulture(c.i));
|
||||
|
||||
drawCultures();
|
||||
refreshCulturesEditor();
|
||||
}
|
||||
|
||||
function updateLockStatus() {
|
||||
if (customization) return;
|
||||
|
||||
const cultureId = +this.parentNode.dataset.id;
|
||||
const classList = this.classList;
|
||||
const c = pack.cultures[cultureId];
|
||||
c.lock = !c.lock;
|
||||
|
||||
classList.toggle("icon-lock-open");
|
||||
classList.toggle("icon-lock");
|
||||
}
|
||||
844
public/modules/dynamic/editors/religions-editor.js
Normal file
844
public/modules/dynamic/editors/religions-editor.js
Normal file
|
|
@ -0,0 +1,844 @@
|
|||
const $body = insertEditorHtml();
|
||||
addListeners();
|
||||
|
||||
export function open() {
|
||||
closeDialogs("#religionsEditor, .stable");
|
||||
if (!layerIsOn("toggleReligions")) toggleReligions();
|
||||
if (layerIsOn("toggleStates")) toggleStates();
|
||||
if (layerIsOn("toggleBiomes")) toggleBiomes();
|
||||
if (layerIsOn("toggleCultures")) toggleCultures();
|
||||
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 6em 7em 6em 7em">
|
||||
<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" 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 data-tip="Click to sort by potential extent type" class="sortable alphabetically hide" data-sortby="expansion">Potential </div>
|
||||
<div data-tip="Click to sort by expansionism" class="sortable hide" data-sortby="expansionism">Expansion </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">
|
||||
<div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em;">
|
||||
<slider-input id="religionsBrush" min="1" max="100" value="15">Brush size:</slider-input>
|
||||
</div>
|
||||
<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>
|
||||
<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>`;
|
||||
|
||||
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);
|
||||
byId("religionsRecalculate").on("click", () => recalculateReligions(true));
|
||||
}
|
||||
|
||||
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-expansion=""
|
||||
data-expansionism=""
|
||||
>
|
||||
<svg width="9" height="9" 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" 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: 6em">${si(area) + unit}</div>
|
||||
<span data-tip="${populationTip}" class="icon-male hide"></span>
|
||||
<div data-tip="${populationTip}" class="religionPopulation hide pointer" style="width: 5em">${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-expansion="${r.expansion}"
|
||||
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" 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: 6em">${si(area) + unit}</div>
|
||||
<span data-tip="${populationTip}" class="icon-male hide"></span>
|
||||
<div data-tip="${populationTip}" class="religionPopulation hide pointer" style="width: 5em">${si(
|
||||
population
|
||||
)}</div>
|
||||
${getExpansionColumns(r)}
|
||||
<span data-tip="Lock this religion" class="icon-lock${r.lock ? "" : "-open"} hide"></span>
|
||||
<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(":scope > div").forEach($line => {
|
||||
$line.on("mouseenter", religionHighlightOn);
|
||||
$line.on("mouseleave", religionHighlightOff);
|
||||
$line.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 > select.religionExtent").forEach(el => el.on("change", religionChangeExtent));
|
||||
$body.querySelectorAll("div > input.religionExpantion").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));
|
||||
|
||||
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 getExpansionColumns(r) {
|
||||
if (r.type === "Folk") {
|
||||
const tip =
|
||||
"Folk religions are not competitive and do not expand. Initially they cover all cells of their parent culture, but get ousted by organized religions when they expand";
|
||||
return /* html */ `
|
||||
<span data-tip="${tip}" class="icon-resize-full-alt hide" style="padding-right: 2px"></span>
|
||||
<span data-tip="${tip}" class="religionExtent hide" style="width: 5em">culture</span>
|
||||
<span data-tip="${tip}" class="icon-resize-full hide"></span>
|
||||
<input data-tip="${tip}" class="religionExpantion hide" disabled type="number" value='0' />`;
|
||||
}
|
||||
|
||||
return /* html */ `
|
||||
<span data-tip="Potential religion extent" class="icon-resize-full-alt hide" style="padding-right: 2px"></span>
|
||||
<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="religionExpantion 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}']`);
|
||||
if ($el) $el.classList.add("active");
|
||||
|
||||
if (!layerIsOn("toggleReligions")) return;
|
||||
if (customization) return;
|
||||
|
||||
const animate = d3.transition().duration(2000).ease(d3.easeSinIn);
|
||||
relig
|
||||
.select("#religion" + religionId)
|
||||
.raise()
|
||||
.transition(animate)
|
||||
.attr("stroke-width", 2.5)
|
||||
.attr("stroke", "#d0240f");
|
||||
debug
|
||||
.select("#religionsCenter" + religionId)
|
||||
.raise()
|
||||
.transition(animate)
|
||||
.attr("r", 3)
|
||||
.attr("stroke", "#d0240f");
|
||||
}, 200);
|
||||
|
||||
function religionHighlightOff(event) {
|
||||
const religionId = Number(event.id || event.target.dataset.id);
|
||||
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", 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));
|
||||
}
|
||||
|
||||
if (layerIsOn("togglePopulation")) drawPopulation();
|
||||
refreshReligionsEditor();
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
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", 0.8)
|
||||
.attr("stroke", "#444444")
|
||||
.style("cursor", "move");
|
||||
|
||||
let data = pack.religions.filter(r => r.i && r.center && !r.removed);
|
||||
const showExtinct = $body.dataset.extinct === "show";
|
||||
if (!showExtinct) data = data.filter(r => r.cells > 0);
|
||||
|
||||
religionCenters
|
||||
.selectAll("circle")
|
||||
.data(data)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("id", d => "religionsCenter" + d.i)
|
||||
.attr("data-id", d => d.i)
|
||||
.attr("r", 2)
|
||||
.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 religionId = +this.dataset.id;
|
||||
const tr = parseTransform(this.getAttribute("transform"));
|
||||
const x0 = +tr[0] - d3.event.x;
|
||||
const y0 = +tr[1] - d3.event.y;
|
||||
|
||||
function handleDrag() {
|
||||
const {x, y} = d3.event;
|
||||
this.setAttribute("transform", `translate(${x0 + x},${y0 + y})`);
|
||||
const cell = findCell(x, y);
|
||||
if (pack.cells.h[cell] < 20) return; // ignore dragging on water
|
||||
|
||||
pack.religions[religionId].center = cell;
|
||||
recalculateReligions();
|
||||
}
|
||||
|
||||
const dragDebounced = debounce(handleDrag, 50);
|
||||
d3.event.on("drag", dragDebounced);
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
async function showHierarchy() {
|
||||
if (customization) return;
|
||||
const HeirarchyTree = await import("../hierarchy-tree.js?v=1.88.06");
|
||||
|
||||
const getDescription = religion => {
|
||||
const {name, type, form, rural, urban} = religion;
|
||||
|
||||
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";
|
||||
|
||||
return `${name}${getTypeText()}${formText}. ${populationText}`;
|
||||
};
|
||||
|
||||
const getShape = ({type}) => {
|
||||
if (type === "Folk") return "circle";
|
||||
if (type === "Organized") return "square";
|
||||
if (type === "Cult") return "hexagon";
|
||||
if (type === "Heresy") return "diamond";
|
||||
};
|
||||
|
||||
HeirarchyTree.open({
|
||||
type: "religions",
|
||||
data: pack.religions,
|
||||
onNodeEnter: religionHighlightOn,
|
||||
onNodeLeave: religionHighlightOff,
|
||||
getDescription,
|
||||
getShape
|
||||
});
|
||||
}
|
||||
|
||||
function toggleExtinct() {
|
||||
$body.dataset.extinct = $body.dataset.extinct !== "show" ? "show" : "hide";
|
||||
religionsEditorAddLines();
|
||||
drawReligionCenters();
|
||||
}
|
||||
|
||||
function enterReligionsManualAssignent() {
|
||||
if (!layerIsOn("toggleReligions")) toggleReligions();
|
||||
customization = 7;
|
||||
relig.append("g").attr("id", "temp");
|
||||
document.querySelectorAll("#religionsBottom > *").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 radius = +byId("religionsBrush").value;
|
||||
|
||||
d3.event.on("drag", () => {
|
||||
if (!d3.event.dx && !d3.event.dy) return;
|
||||
const [x, y] = d3.mouse(this);
|
||||
moveCircle(x, y, radius);
|
||||
|
||||
const found = radius > 5 ? findAll(x, y, radius) : [findCell(x, y, radius)];
|
||||
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 religionNew = +selected.dataset.id;
|
||||
const color = pack.religions[religionNew].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 (religionNew === religionOld) return;
|
||||
|
||||
// change of append new element
|
||||
if (exists.size()) exists.attr("data-religion", religionNew).attr("fill", color);
|
||||
else
|
||||
temp
|
||||
.append("polygon")
|
||||
.attr("data-cell", i)
|
||||
.attr("data-religion", religionNew)
|
||||
.attr("points", getPackPolygon(i))
|
||||
.attr("fill", color);
|
||||
});
|
||||
}
|
||||
|
||||
function moveReligionBrush() {
|
||||
showMainTip();
|
||||
const [x, y] = d3.mouse(this);
|
||||
const radius = +byId("religionsBrush").value;
|
||||
moveCircle(x, y, 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 > *").forEach(el => (el.style.display = "inline-block"));
|
||||
byId("religionsManuallyButtons").style.display = "none";
|
||||
|
||||
byId("religionsEditor")
|
||||
.querySelectorAll(".hide")
|
||||
.forEach(el => el.classList.remove("hidden"));
|
||||
byId("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")) return exitAddReligionMode();
|
||||
|
||||
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 [x, y] = d3.mouse(this);
|
||||
const center = findCell(x, y);
|
||||
if (pack.cells.h[center] < 20)
|
||||
return tip("You cannot place religion center into the water. Please click on a land cell", false, "error");
|
||||
|
||||
const occupied = pack.religions.some(r => !r.removed && r.center === center);
|
||||
if (occupied) return tip("This cell is already a religion center. Please select a different cell", false, "error");
|
||||
|
||||
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,Potential,Expansionism`;
|
||||
const lines = Array.from($body.querySelectorAll(":scope > div"));
|
||||
const data = lines.map($line => {
|
||||
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, expansion, expansionism].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();
|
||||
}
|
||||
|
||||
function updateLockStatus() {
|
||||
if (customization) return;
|
||||
|
||||
const religionId = +this.parentNode.dataset.id;
|
||||
const classList = this.classList;
|
||||
const r = pack.religions[religionId];
|
||||
r.lock = !r.lock;
|
||||
|
||||
classList.toggle("icon-lock-open");
|
||||
classList.toggle("icon-lock");
|
||||
}
|
||||
|
||||
function recalculateReligions(must) {
|
||||
if (!must && !religionsAutoChange.checked) return;
|
||||
|
||||
Religions.recalculate();
|
||||
|
||||
drawReligions();
|
||||
refreshReligionsEditor();
|
||||
drawReligionCenters();
|
||||
}
|
||||
1462
public/modules/dynamic/editors/states-editor.js
Normal file
1462
public/modules/dynamic/editors/states-editor.js
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue