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

refactor: population utils

Browse source
This commit is contained in:
Azgaar 2022-07-09 23:38:19 +03:00
parent 3125366944
commit 3c850d8d46
22 changed files with 443 additions and 330 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/dialogs/dialogs/biomes-editor.js
View file

@ -7,7 +7,7 @@ import {getRandomColor} from "utils/colorUtils";
import {findAll, findCell, getPackPolygon, isLand} from "utils/graphUtils";
import {openURL} from "utils/linkUtils";
import {rn} from "utils/numberUtils";
import {getArea, getAreaUnit, si} from "utils/unitUtils";
import {getArea, getAreaUnit, si, getRuralPopulation, getBurgPopulation, getPopulationTip} from "utils/unitUtils";
let isLoaded = false;
@ -96,13 +96,12 @@ export function open() {
for (const i of b.i) {
if (!i || biomesData.name[i] === "removed") continue; // ignore water and removed biomes
const area = getArea(b.area[i]);
const rural = b.rural[i] * populationRate;
const urban = b.urban[i] * populationRate * urbanization;
const population = rn(rural + urban);
const populationTip = `Total population: ${si(population)}; Rural population: ${si(
rural
)}; Urban population: ${si(urban)}`;
totalArea += area;
const rural = getRuralPopulation(b.rural[i]);
const urban = getBurgPopulation(b.urban[i]);
const population = rn(rural + urban);
const populationTip = getPopulationTip("Total", rural, urban);
totalPopulation += population;
lines += /* html */ `

6
src/dialogs/dialogs/burg-editor.js
View file

@ -10,7 +10,7 @@ import {findCell} from "utils/graphUtils";
import {rn} from "utils/numberUtils";
import {rand} from "utils/probabilityUtils";
import {parseTransform} from "utils/stringUtils";
import {convertTemperature, getHeight} from "utils/unitUtils";
import {convertTemperature, getHeight, getBurgPopulation, getBurgPopulationPoints} from "utils/unitUtils";
import {restoreDefaultEvents} from "scripts/events";
let isLoaded = false;
@ -80,7 +80,7 @@ export function open({id} = {}) {
document.getElementById("burgName").value = b.name;
document.getElementById("burgType").value = b.type || "Generic";
document.getElementById("burgPopulation").value = rn(b.population * populationRate * urbanization);
document.getElementById("burgPopulation").value = getBurgPopulation(b.population);
document.getElementById("burgEditAnchorStyle").style.display = +b.port ? "inline-block" : "none";
// update list and select culture
@ -361,7 +361,7 @@ export function open({id} = {}) {
function changePopulation() {
const id = +elSelected.attr("data-id");
pack.burgs[id].population = rn(burgPopulation.value / populationRate / urbanization, 4);
pack.burgs[id].population = getBurgPopulationPoints(burgPopulation.value);
}
function toggleFeature() {

32
src/dialogs/dialogs/burgs-overview.js
View file

@ -1,16 +1,21 @@
import * as d3 from "d3";
import {restoreDefaultEvents} from "scripts/events";
import {findCell} from "utils/graphUtils";
import {tip, clearMainTip} from "scripts/tooltips";
import {getCoordinates} from "utils/coordinateUtils";
import {rn} from "utils/numberUtils";
import {si, siToInteger} from "utils/unitUtils";
import {getHeight} from "utils/unitUtils";
import {closeDialogs} from "dialogs/utils";
import {openDialog} from "dialogs";
import {closeDialogs} from "dialogs/utils";
import {layerIsOn, toggleLayer} from "layers";
import {applySorting} from "modules/ui/editors";
import {restoreDefaultEvents} from "scripts/events";
import {clearMainTip, tip} from "scripts/tooltips";
import {getCoordinates} from "utils/coordinateUtils";
import {findCell} from "utils/graphUtils";
import {
getBurgPopulation,
getHeight,
si,
siToInteger,
getBurgPopulation,
getBurgPopulationPoints
} from "utils/unitUtils";
let isLoaded = false;
@ -89,7 +94,7 @@ export function open() {
totalPopulation = 0;
for (const b of filtered) {
const population = b.population * populationRate * urbanization;
const population = getBurgPopulation(b.population);
totalPopulation += population;
const type = b.capital && b.port ? "a-capital-port" : b.capital ? "c-capital" : b.port ? "p-port" : "z-burg";
const state = pack.states[b.state].name;
@ -204,10 +209,11 @@ export function open() {
const burg = +this.parentNode.dataset.id;
if (this.value == "" || isNaN(+this.value)) {
tip("Please provide an integer number (like 10000, not 10K)", false, "error");
this.value = si(pack.burgs[burg].population * populationRate * urbanization);
this.value = si(getBurgPopulation(pack.burgs[burg].population));
return;
}
pack.burgs[burg].population = this.value / populationRate / urbanization;
pack.burgs[burg].population = getBurgPopulationPoints(this.value);
this.parentNode.dataset.population = this.value;
this.value = si(this.value);
@ -395,7 +401,7 @@ export function open() {
d3.select(ev.target).transition().duration(1500).attr("stroke", "#c13119");
const name = d.data.name;
const parent = d.parent.data.name;
const population = si(d.value * populationRate * urbanization);
const population = si(getBurgPopulation(d.value));
burgsInfo.innerHTML = /* html */ `${name}. ${parent}. Population: ${population}`;
burgHighlightOn(ev);
@ -507,7 +513,7 @@ export function open() {
data += pack.states[b.state].fullName + ",";
data += pack.cultures[b.culture].name + ",";
data += pack.religions[pack.cells.religion[b.cell]].name + ",";
data += rn(b.population * populationRate * urbanization) + ",";
data += getBurgPopulation(b.population) + ",";
// add geography data
const [lon, lat] = getCoordinates(b.x, b.y, 2);

42
src/dialogs/dialogs/charts-overview.js
View file

@ -7,7 +7,14 @@ import {isWater} from "utils/graphUtils";
import {rn} from "utils/numberUtils";
import {byId} from "utils/shorthands";
import {capitalize} from "utils/stringUtils";
import {convertTemperature, getArea, getAreaUnit, getFriendlyPrecipitation, si} from "utils/unitUtils";
import {
convertTemperature,
getArea,
getAreaUnit,
getFriendlyPrecipitation,
si,
getCellPopulation
} from "utils/unitUtils";
const entitiesMap = {
states: {
@ -50,16 +57,7 @@ const entitiesMap = {
const quantizationMap = {
total_population: {
label: "Total population",
quantize: cellId => getUrbanPopulation(cellId) + getRuralPopulation(cellId),
aggregate: values => rn(d3.sum(values)),
formatTicks: value => si(value),
stringify: value => value.toLocaleString(),
stackable: true,
landOnly: true
},
urban_population: {
label: "Urban population",
quantize: getUrbanPopulation,
quantize: cellId => d3.sum(getCellPopulation(cellId)),
aggregate: values => rn(d3.sum(values)),
formatTicks: value => si(value),
stringify: value => value.toLocaleString(),
@ -68,7 +66,16 @@ const quantizationMap = {
},
rural_population: {
label: "Rural population",
quantize: getRuralPopulation,
quantize: cellId => getCellPopulation(cellId)[0],
aggregate: values => rn(d3.sum(values)),
formatTicks: value => si(value),
stringify: value => value.toLocaleString(),
stackable: true,
landOnly: true
},
urban_population: {
label: "Urban population",
quantize: cellId => getCellPopulation(cellId)[1],
aggregate: values => rn(d3.sum(values)),
formatTicks: value => si(value),
stringify: value => value.toLocaleString(),
@ -667,17 +674,6 @@ function biomeColorsGetter() {
return Object.fromEntries(biomesData.i.map(i => [biomesData.name[i], biomesData.color[i]]));
}
function getUrbanPopulation(cellId) {
const burgId = pack.cells.burg[cellId];
if (!burgId) return 0;
const populationPoints = pack.burgs[burgId].population;
return populationPoints * populationRate * urbanization;
}
function getRuralPopulation(cellId) {
return pack.cells.pop[cellId] * populationRate;
}
function sortData(data, sorting) {
if (sorting === "natural") return data;

6
src/dialogs/dialogs/coastline-editor.js
View file

@ -11,7 +11,7 @@ import {getArea, getAreaUnit, si} from "utils/unitUtils";
let isLoaded = false;
export function open({node}) {
export function open({el}) {
if (customization) return;
closeDialogs(".stable");
if (layerIsOn("toggleCells")) toggleCells();
@ -24,8 +24,8 @@ export function open({node}) {
});
debug.append("g").attr("id", "vertices");
elSelected = d3.select(node);
selectCoastlineGroup(node);
elSelected = d3.select(el);
selectCoastlineGroup(el);
drawCoastlineVertices();
viewbox.on("touchmove mousemove", null);

33
src/dialogs/dialogs/cultures-editor.js
View file

@ -10,7 +10,16 @@ import {abbreviate} from "utils/languageUtils";
import {rn} from "utils/numberUtils";
import {byId} from "utils/shorthands";
import {capitalize} from "utils/stringUtils";
import {getArea, getAreaUnit, si} from "utils/unitUtils";
import {
getArea,
getAreaUnit,
si,
getRuralPopulation,
getBurgPopulation,
getTotalPopulation,
getBurgPopulationPoints,
getPopulationTip
} from "utils/unitUtils";
import {applySortingByHeader} from "modules/ui/editors";
const $body = insertEditorHtml();
@ -155,13 +164,12 @@ function culturesEditorAddLines() {
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;
const rural = getRuralPopulation(c.rural);
const urban = getBurgPopulation(c.urban);
const population = rn(rural + urban);
const populationTip = getPopulationTip("Total", rural, urban) + ". Click to edit";
totalPopulation += population;
if (!c.i) {
@ -444,8 +452,8 @@ function changePopulation() {
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 rural = getRuralPopulation(culture.rural);
const urban = getBurgPopulation(culture.urban);
const total = rural + urban;
const format = n => Number(n).toLocaleString();
const burgs = pack.burgs.filter(b => !b.removed && b.culture === cultureId);
@ -507,8 +515,9 @@ function applyPopulationChange(oldRural, oldUrban, newRural, newUrban, culture)
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 points = getBurgPopulationPoints(newUrban);
const population = rn(points / burgs.length, 4);
burgs.forEach(b => (b.population = population));
}
@ -645,8 +654,8 @@ async function showHierarchy() {
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";
const population = getTotalPopulation(rural, urban);
const populationText = population > 0 ? si(population) + " people" : "Extinct";
return `${name} culture. ${type}. ${populationText}`;
};

113
src/modules/ui/labels-editor.js → src/dialogs/dialogs/label-editor.js
View file

@ -1,17 +1,20 @@
import {findCell} from "utils/graphUtils";
import {tip, showMainTip} from "scripts/tooltips";
import {round, parseTransform} from "utils/stringUtils";
import * as d3 from "d3";
import {closeDialogs} from "dialogs/utils";
import {layerIsOn, toggleLayer} from "layers";
import {unselect} from "modules/ui/editors";
import {showMainTip, tip} from "scripts/tooltips";
import {findCell} from "utils/graphUtils";
import {byId} from "utils/shorthands";
import {parseTransform, round} from "utils/stringUtils";
let isLoaded = false;
export function editLabel() {
if (customization) return;
export function open({el}) {
closeDialogs();
if (!layerIsOn("toggleLabels")) toggleLabels();
if (!layerIsOn("toggleLabels")) toggleLayer("toggleLabels");
const tspan = d3.event.target;
const textPath = tspan.parentNode;
const textPath = el.parentNode;
const text = textPath.parentNode;
elSelected = d3.select(text).call(d3.drag().on("start", dragLabel)).classed("draggable", true);
viewbox.on("touchmove mousemove", showEditorTips);
@ -32,28 +35,28 @@ export function editLabel() {
isLoaded = true;
// add listeners
document.getElementById("labelGroupShow").addEventListener("click", showGroupSection);
document.getElementById("labelGroupHide").addEventListener("click", hideGroupSection);
document.getElementById("labelGroupSelect").addEventListener("click", changeGroup);
document.getElementById("labelGroupInput").addEventListener("change", createNewGroup);
document.getElementById("labelGroupNew").addEventListener("click", toggleNewGroupInput);
document.getElementById("labelGroupRemove").addEventListener("click", removeLabelsGroup);
byId("labelGroupShow")?.on("click", showGroupSection);
byId("labelGroupHide")?.on("click", hideGroupSection);
byId("labelGroupSelect")?.on("click", changeGroup);
byId("labelGroupInput")?.on("change", createNewGroup);
byId("labelGroupNew")?.on("click", toggleNewGroupInput);
byId("labelGroupRemove")?.on("click", removeLabelsGroup);
document.getElementById("labelTextShow").addEventListener("click", showTextSection);
document.getElementById("labelTextHide").addEventListener("click", hideTextSection);
document.getElementById("labelText").addEventListener("input", changeText);
document.getElementById("labelTextRandom").addEventListener("click", generateRandomName);
byId("labelTextShow")?.on("click", showTextSection);
byId("labelTextHide")?.on("click", hideTextSection);
byId("labelText")?.on("input", changeText);
byId("labelTextRandom")?.on("click", generateRandomName);
document.getElementById("labelEditStyle").addEventListener("click", editGroupStyle);
byId("labelEditStyle")?.on("click", editGroupStyle);
document.getElementById("labelSizeShow").addEventListener("click", showSizeSection);
document.getElementById("labelSizeHide").addEventListener("click", hideSizeSection);
document.getElementById("labelStartOffset").addEventListener("input", changeStartOffset);
document.getElementById("labelRelativeSize").addEventListener("input", changeRelativeSize);
byId("labelSizeShow")?.on("click", showSizeSection);
byId("labelSizeHide")?.on("click", hideSizeSection);
byId("labelStartOffset")?.on("input", changeStartOffset);
byId("labelRelativeSize")?.on("input", changeRelativeSize);
document.getElementById("labelAlign").addEventListener("click", editLabelAlign);
document.getElementById("labelLegend").addEventListener("click", editLabelLegend);
document.getElementById("labelRemoveSingle").addEventListener("click", removeLabel);
byId("labelAlign")?.on("click", editLabelAlign);
byId("labelLegend")?.on("click", editLabelLegend);
byId("labelRemoveSingle")?.on("click", removeLabel);
function showEditorTips() {
showMainTip();
@ -68,12 +71,12 @@ export function editLabel() {
const group = text.parentNode.id;
if (group === "states" || group === "burgLabels") {
document.getElementById("labelGroupShow").style.display = "none";
byId("labelGroupShow").style.display = "none";
return;
}
hideGroupSection();
const select = document.getElementById("labelGroupSelect");
const select = byId("labelGroupSelect");
select.options.length = 0; // remove all options
labels.selectAll(":scope > g").each(function () {
@ -84,17 +87,15 @@ export function editLabel() {
}
function updateValues(textPath) {
document.getElementById("labelText").value = [...textPath.querySelectorAll("tspan")]
.map(tspan => tspan.textContent)
.join("|");
document.getElementById("labelStartOffset").value = parseFloat(textPath.getAttribute("startOffset"));
document.getElementById("labelRelativeSize").value = parseFloat(textPath.getAttribute("font-size"));
byId("labelText").value = [...textPath.querySelectorAll("tspan")].map(tspan => tspan.textContent).join("|");
byId("labelStartOffset").value = parseFloat(textPath.getAttribute("startOffset"));
byId("labelRelativeSize").value = parseFloat(textPath.getAttribute("font-size"));
}
function drawControlPointsAndLine() {
debug.select("#controlPoints").remove();
debug.append("g").attr("id", "controlPoints").attr("transform", elSelected.attr("transform"));
const path = document.getElementById("textPath_" + elSelected.attr("id"));
const path = byId("textPath_" + elSelected.attr("id"));
debug.select("#controlPoints").append("path").attr("d", path.getAttribute("d")).on("click", addInterimControlPoint);
const l = path.getTotalLength();
if (!l) return;
@ -125,7 +126,7 @@ export function editLabel() {
const lineGen = d3.line().curve(d3.curveBundle.beta(1));
function redrawLabelPath() {
const path = document.getElementById("textPath_" + elSelected.attr("id"));
const path = byId("textPath_" + elSelected.attr("id"));
const points = [];
debug
.select("#controlPoints")
@ -195,19 +196,19 @@ export function editLabel() {
function showGroupSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
document.getElementById("labelGroupSection").style.display = "inline-block";
byId("labelGroupSection").style.display = "inline-block";
}
function hideGroupSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
document.getElementById("labelGroupSection").style.display = "none";
document.getElementById("labelGroupInput").style.display = "none";
document.getElementById("labelGroupInput").value = "";
document.getElementById("labelGroupSelect").style.display = "inline-block";
byId("labelGroupSection").style.display = "none";
byId("labelGroupInput").style.display = "none";
byId("labelGroupInput").value = "";
byId("labelGroupSelect").style.display = "inline-block";
}
function changeGroup() {
document.getElementById(this.value).appendChild(elSelected.node());
byId(this.value).appendChild(elSelected.node());
}
function toggleNewGroupInput() {
@ -231,7 +232,7 @@ export function editLabel() {
.replace(/ /g, "_")
.replace(/[^\w\s]/gi, "");
if (document.getElementById(group)) {
if (byId(group)) {
tip("Element with this id already exists. Please provide a unique name", false, "error");
return;
}
@ -244,22 +245,22 @@ export function editLabel() {
// just rename if only 1 element left
const oldGroup = elSelected.node().parentNode;
if (oldGroup !== "states" && oldGroup !== "addedLabels" && oldGroup.childElementCount === 1) {
document.getElementById("labelGroupSelect").selectedOptions[0].remove();
document.getElementById("labelGroupSelect").options.add(new Option(group, group, false, true));
byId("labelGroupSelect").selectedOptions[0].remove();
byId("labelGroupSelect").options.add(new Option(group, group, false, true));
oldGroup.id = group;
toggleNewGroupInput();
document.getElementById("labelGroupInput").value = "";
byId("labelGroupInput").value = "";
return;
}
const newGroup = elSelected.node().parentNode.cloneNode(false);
document.getElementById("labels").appendChild(newGroup);
byId("labels").appendChild(newGroup);
newGroup.id = group;
document.getElementById("labelGroupSelect").options.add(new Option(group, group, false, true));
document.getElementById(group).appendChild(elSelected.node());
byId("labelGroupSelect").options.add(new Option(group, group, false, true));
byId(group).appendChild(elSelected.node());
toggleNewGroupInput();
document.getElementById("labelGroupInput").value = "";
byId("labelGroupInput").value = "";
}
function removeLabelsGroup() {
@ -282,7 +283,7 @@ export function editLabel() {
.select("#" + group)
.selectAll("text")
.each(function () {
document.getElementById("textPath_" + this.id).remove();
byId("textPath_" + this.id).remove();
this.remove();
});
if (!basic) labels.select("#" + group).remove();
@ -296,16 +297,16 @@ export function editLabel() {
function showTextSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
document.getElementById("labelTextSection").style.display = "inline-block";
byId("labelTextSection").style.display = "inline-block";
}
function hideTextSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
document.getElementById("labelTextSection").style.display = "none";
byId("labelTextSection").style.display = "none";
}
function changeText() {
const input = document.getElementById("labelText").value;
const input = byId("labelText").value;
const el = elSelected.select("textPath").node();
const example = d3
.select(elSelected.node().parentNode)
@ -344,7 +345,7 @@ export function editLabel() {
const culture = pack.cells.culture[cell];
name = Names.getCulture(culture);
}
document.getElementById("labelText").value = name;
byId("labelText").value = name;
changeText();
}
@ -355,12 +356,12 @@ export function editLabel() {
function showSizeSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
document.getElementById("labelSizeSection").style.display = "inline-block";
byId("labelSizeSection").style.display = "inline-block";
}
function hideSizeSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
document.getElementById("labelSizeSection").style.display = "none";
byId("labelSizeSection").style.display = "none";
}
function changeStartOffset() {

83
src/modules/ui/lakes-editor.js → src/dialogs/dialogs/lake-editor.js
View file

@ -1,19 +1,20 @@
import * as d3 from "d3";
import {closeDialogs} from "dialogs/utils";
import {layerIsOn, toggleLayer} from "layers";
import {tip} from "scripts/tooltips";
import {getPackPolygon} from "utils/graphUtils";
import {rn} from "utils/numberUtils";
import {rand} from "utils/probabilityUtils";
import {round} from "utils/stringUtils";
import {getArea, getAreaUnit, getHeight, si} from "utils/unitUtils";
import {unselect} from "modules/ui/editors";
let isLoaded = false;
export function editLake() {
if (customization) return;
export function open({el}) {
closeDialogs(".stable");
if (layerIsOn("toggleCells")) toggleCells();
if (layerIsOn("toggleCells")) toggleLayer("toggleCells");
$("#lakeEditor").dialog({
title: "Edit Lake",
@ -22,11 +23,10 @@ export function editLake() {
close: closeLakesEditor
});
const node = d3.event.target;
debug.append("g").attr("id", "vertices");
elSelected = d3.select(node);
elSelected = d3.select(el);
updateLakeValues();
selectLakeGroup(node);
selectLakeGroup(el);
drawLakeVertices();
viewbox.on("touchmove mousemove", null);
@ -34,17 +34,17 @@ export function editLake() {
isLoaded = true;
// add listeners
document.getElementById("lakeName").addEventListener("input", changeName);
document.getElementById("lakeNameCulture").addEventListener("click", generateNameCulture);
document.getElementById("lakeNameRandom").addEventListener("click", generateNameRandom);
byId("lakeName")?.on("input", changeName);
byId("lakeNameCulture")?.on("click", generateNameCulture);
byId("lakeNameRandom")?.on("click", generateNameRandom);
document.getElementById("lakeGroup").addEventListener("change", changeLakeGroup);
document.getElementById("lakeGroupAdd").addEventListener("click", toggleNewGroupInput);
document.getElementById("lakeGroupName").addEventListener("change", createNewGroup);
document.getElementById("lakeGroupRemove").addEventListener("click", removeLakeGroup);
byId("lakeGroup")?.on("change", changeLakeGroup);
byId("lakeGroupAdd")?.on("click", toggleNewGroupInput);
byId("lakeGroupName")?.on("change", createNewGroup);
byId("lakeGroupRemove")?.on("click", removeLakeGroup);
document.getElementById("lakeEditStyle").addEventListener("click", editGroupStyle);
document.getElementById("lakeLegend").addEventListener("click", editLakeLegend);
byId("lakeEditStyle")?.on("click", editGroupStyle);
byId("lakeLegend")?.on("click", editLakeLegend);
function getLake() {
const lakeId = +elSelected.attr("data-f");
@ -55,28 +55,27 @@ export function editLake() {
const cells = pack.cells;
const l = getLake();
document.getElementById("lakeName").value = l.name;
document.getElementById("lakeArea").value = si(getArea(l.area)) + " " + getAreaUnit();
byId("lakeName").value = l.name;
byId("lakeArea").value = si(getArea(l.area)) + " " + getAreaUnit();
const length = d3.polygonLength(l.vertices.map(v => pack.vertices.p[v]));
document.getElementById("lakeShoreLength").value =
si(length * distanceScaleInput.value) + " " + distanceUnitInput.value;
byId("lakeShoreLength").value = si(length * distanceScaleInput.value) + " " + distanceUnitInput.value;
const lakeCells = Array.from(cells.i.filter(i => cells.f[i] === l.i));
const heights = lakeCells.map(i => cells.h[i]);
document.getElementById("lakeElevation").value = getHeight(l.height);
document.getElementById("lakeAvarageDepth").value = getHeight(d3.mean(heights), true);
document.getElementById("lakeMaxDepth").value = getHeight(d3.min(heights), true);
byId("lakeElevation").value = getHeight(l.height);
byId("lakeAvarageDepth").value = getHeight(d3.mean(heights), true);
byId("lakeMaxDepth").value = getHeight(d3.min(heights), true);
document.getElementById("lakeFlux").value = l.flux;
document.getElementById("lakeEvaporation").value = l.evaporation;
byId("lakeFlux").value = l.flux;
byId("lakeEvaporation").value = l.evaporation;
const inlets = l.inlets && l.inlets.map(inlet => pack.rivers.find(river => river.i === inlet)?.name);
const outlet = l.outlet ? pack.rivers.find(river => river.i === l.outlet)?.name : "no";
document.getElementById("lakeInlets").value = inlets ? inlets.length : "no";
document.getElementById("lakeInlets").title = inlets ? inlets.join(", ") : "";
document.getElementById("lakeOutlet").value = outlet;
byId("lakeInlets").value = inlets ? inlets.length : "no";
byId("lakeInlets").title = inlets ? inlets.join(", ") : "";
byId("lakeOutlet").value = outlet;
}
function drawLakeVertices() {
@ -132,7 +131,7 @@ export function editLake() {
defs.select("mask#land > path#land_" + feature.i).attr("d", d); // update land mask
feature.area = Math.abs(d3.polygonArea(points));
document.getElementById("lakeArea").value = si(getArea(feature.area)) + " " + getAreaUnit();
byId("lakeArea").value = si(getArea(feature.area)) + " " + getAreaUnit();
}
function changeName() {
@ -151,7 +150,7 @@ export function editLake() {
function selectLakeGroup(node) {
const group = node.parentNode.id;
const select = document.getElementById("lakeGroup");
const select = byId("lakeGroup");
select.options.length = 0; // remove all options
lakes.selectAll("g").each(function () {
@ -160,7 +159,7 @@ export function editLake() {
}
function changeLakeGroup() {
document.getElementById(this.value).appendChild(elSelected.node());
byId(this.value).appendChild(elSelected.node());
getLake().group = this.value;
}
@ -185,7 +184,7 @@ export function editLake() {
.replace(/ /g, "_")
.replace(/[^\w\s]/gi, "");
if (document.getElementById(group)) {
if (byId(group)) {
tip("Element with this id already exists. Please provide a unique name", false, "error");
return;
}
@ -199,23 +198,23 @@ export function editLake() {
const oldGroup = elSelected.node().parentNode;
const basic = ["freshwater", "salt", "sinkhole", "frozen", "lava", "dry"].includes(oldGroup.id);
if (!basic && oldGroup.childElementCount === 1) {
document.getElementById("lakeGroup").selectedOptions[0].remove();
document.getElementById("lakeGroup").options.add(new Option(group, group, false, true));
byId("lakeGroup").selectedOptions[0].remove();
byId("lakeGroup").options.add(new Option(group, group, false, true));
oldGroup.id = group;
toggleNewGroupInput();
document.getElementById("lakeGroupName").value = "";
byId("lakeGroupName").value = "";
return;
}
// create a new group
const newGroup = elSelected.node().parentNode.cloneNode(false);
document.getElementById("lakes").appendChild(newGroup);
byId("lakes").appendChild(newGroup);
newGroup.id = group;
document.getElementById("lakeGroup").options.add(new Option(group, group, false, true));
document.getElementById(group).appendChild(elSelected.node());
byId("lakeGroup").options.add(new Option(group, group, false, true));
byId(group).appendChild(elSelected.node());
toggleNewGroupInput();
document.getElementById("lakeGroupName").value = "";
byId("lakeGroupName").value = "";
}
function removeLakeGroup() {
@ -234,14 +233,14 @@ export function editLake() {
buttons: {
Remove: function () {
$(this).dialog("close");
const freshwater = document.getElementById("freshwater");
const groupEl = document.getElementById(group);
const freshwater = byId("freshwater");
const groupEl = byId(group);
while (groupEl.childNodes.length) {
freshwater.appendChild(groupEl.childNodes[0]);
}
groupEl.remove();
document.getElementById("lakeGroup").selectedOptions[0].remove();
document.getElementById("lakeGroup").value = "freshwater";
byId("lakeGroup").selectedOptions[0].remove();
byId("lakeGroup").value = "freshwater";
},
Cancel: function () {
$(this).dialog("close");

34
src/dialogs/dialogs/religions-editor.js
View file

@ -2,6 +2,7 @@ import * as d3 from "d3";
import {openDialog} from "dialogs";
import {closeDialogs} from "dialogs/utils";
import {applySortingByHeader} from "modules/ui/editors";
import {restoreDefaultEvents} from "scripts/events";
import {clearMainTip, showMainTip, tip} from "scripts/tooltips";
import {debounce} from "utils/functionUtils";
@ -9,8 +10,16 @@ import {findAll, findCell, getPackPolygon, isLand} from "utils/graphUtils";
import {abbreviate} from "utils/languageUtils";
import {rn} from "utils/numberUtils";
import {byId} from "utils/shorthands";
import {getArea, getAreaUnit, si} from "utils/unitUtils";
import {applySortingByHeader} from "modules/ui/editors";
import {
getArea,
getAreaUnit,
getRuralPopulation,
getBurgPopulation,
getTotalPopulation,
getBurgPopulationPoints,
getPopulationTip,
si
} from "utils/unitUtils";
const $body = insertEditorHtml();
addListeners();
@ -159,13 +168,12 @@ function religionsEditorAddLines() {
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;
const rural = getRuralPopulation(r.rural);
const urban = getBurgPopulation(r.urban);
const population = rn(rural + urban);
const populationTip = getPopulationTip("Total", rural, urban) + ". Click to change";
totalPopulation += population;
if (!r.i) {
@ -371,8 +379,8 @@ function changePopulation() {
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 rural = getRuralPopulation(religion.rural);
const urban = getBurgPopulation(religion.urban);
const total = rural + urban;
const format = n => Number(n).toLocaleString();
const burgs = pack.burgs.filter(b => !b.removed && pack.cells.religion[b.cell] === religionId);
@ -433,7 +441,7 @@ function changePopulation() {
burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
}
if (!isFinite(urbanChange) && +urbanPop.value > 0) {
const points = urbanPop.value / populationRate / urbanization;
const points = getBurgPopulationPoints(urbanPop.value);
const population = rn(points / burgs.length, 4);
burgs.forEach(b => (b.population = population));
}
@ -557,8 +565,8 @@ async function showHierarchy() {
};
const formText = form === type ? "" : ". " + form;
const population = rural * populationRate + urban * populationRate * urbanization;
const populationText = population > 0 ? si(rn(population)) + " people" : "Extinct";
const population = getTotalPopulation(rural, urban);
const populationText = population > 0 ? si(population) + " people" : "Extinct";
return `${name}${getTypeText()}${formText}. ${populationText}`;
};

58
src/dialogs/dialogs/states-editor.js
View file

@ -11,7 +11,15 @@ import {getAdjective} from "utils/languageUtils";
import {rn} from "utils/numberUtils";
import {P, rand} from "utils/probabilityUtils";
import {byId} from "utils/shorthands";
import {getArea, getAreaUnit, si} from "utils/unitUtils";
import {
getArea,
getAreaUnit,
si,
getRuralPopulation,
getBurgPopulation,
getBurgPopulationPoints,
getPopulationTip
} from "utils/unitUtils";
const $body = insertEditorHtml();
addListeners();
@ -207,15 +215,16 @@ function statesEditorAddLines() {
for (const s of pack.states) {
if (s.removed) continue;
const area = getArea(s.area);
const rural = s.rural * populationRate;
const urban = s.urban * populationRate * urbanization;
const population = rn(rural + urban);
const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(
urban
)}. Click to change`;
totalArea += area;
const rural = getRuralPopulation(s.rural);
const urban = getBurgPopulation(s.urban);
const population = rn(rural + urban);
const populationTip = getPopulationTip("Total", rural, urban) + ". Click to change";
totalPopulation += population;
totalBurgs += s.burgs;
const focused = defs.select("#fog #focusState" + s.i).size();
if (!s.i) {
@ -529,8 +538,8 @@ function changePopulation(stateId) {
const state = pack.states[stateId];
if (!state.cells) return tip("State does not have any cells, cannot change population", false, "error");
const rural = rn(state.rural * populationRate);
const urban = rn(state.urban * populationRate * urbanization);
const rural = getRuralPopulation(state.rural);
const urban = getBurgPopulation(state.urban);
const total = rural + urban;
const format = n => Number(n).toLocaleString();
@ -590,7 +599,7 @@ function changePopulation(stateId) {
burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
}
if (!isFinite(urbanChange) && +urbanPop.value > 0) {
const points = urbanPop.value / populationRate / urbanization;
const points = getBurgPopulationPoints(urbanPop.value);
const burgs = pack.burgs.filter(b => !b.removed && b.state === stateId);
const population = rn(points / burgs.length, 4);
burgs.forEach(b => (b.population = population));
@ -805,20 +814,18 @@ function showStatesChart() {
const state = d.data.fullName;
const area = getArea(d.data.area) + " " + getAreaUnit();
const rural = rn(d.data.rural * populationRate);
const urban = rn(d.data.urban * populationRate * urbanization);
const rural = getRuralPopulation(d.data.rural);
const urban = getBurgPopulation(d.data.urban);
const option = statesTreeType.value;
const value =
option === "area"
? "Area: " + area
: option === "rural"
? "Rural population: " + si(rural)
: option === "urban"
? "Urban population: " + si(urban)
: option === "burgs"
? "Burgs number: " + d.data.burgs
: "Population: " + si(rural + urban);
const optionToLabelMap = {
area: "Area: " + area,
rural: "Rural population: " + si(rural),
urban: "Urban population: " + si(urban),
burgs: "Burgs number: " + d.data.burgs,
population: "Population: " + si(rural + urban)
};
const option = getInputValue("statesTreeType");
const value = optionToLabelMap[option] || "";
statesInfo.innerHTML = /* html */ `${state}. ${value}`;
stateHighlightOn(ev);
@ -1355,8 +1362,9 @@ function downloadStatesCsv() {
const data = lines.map($line => {
const {id, name, form, color, capital, culture, type, expansionism, cells, burgs, area, population} = $line.dataset;
const {fullName = "", rural, urban} = pack.states[+id];
const ruralPopulation = Math.round(rural * populationRate);
const urbanPopulation = Math.round(urban * populationRate * urbanization);
const ruralPopulation = getRuralPopulation(rural);
const urbanPopulation = getBurgPopulation(urban);
return [
id,
name,

2
src/dialogs/index.ts
View file

@ -11,6 +11,8 @@ const dialogsMap = {
heightmapSelection: "heightmap-selection",
hierarchyTree: "hierarchy-tree",
iceEditor: "ice-editor",
labelEditor: "label-editor",
lakeEditor: "lake-editor",
religionsEditor: "religions-editor",
statesEditor: "states-editor",
unitsEditor: "units-editor"

8
src/modules/dynamic/export-json.js
View file

@ -107,19 +107,19 @@ function getSettings() {
barBackColor: barBackColor.value,
barPosX: barPosX.value,
barPosY: barPosY.value,
populationRate: populationRate,
urbanization: urbanization,
populationRate,
urbanization,
mapSize: mapSizeOutput.value,
latitudeO: latitudeOutput.value,
temperatureEquator: temperatureEquatorOutput.value,
temperaturePole: temperaturePoleOutput.value,
prec: precOutput.value,
options: options,
options,
mapName: mapName.value,
hideLabels: hideLabels.checked,
stylePreset: stylePreset.value,
rescaleLabels: rescaleLabels.checked,
urbanDensity: urbanDensity
urbanDensity
};
return settings;

4
src/modules/markers-generator.js
View file

@ -5,7 +5,7 @@ import {last} from "utils/arrayUtils";
import {rn} from "utils/numberUtils";
import {rand, P, gauss, ra, rw} from "utils/probabilityUtils";
import {capitalize} from "utils/stringUtils";
import {convertTemperature, getFriendlyHeight} from "utils/unitUtils";
import {convertTemperature, getFriendlyHeight, getBurgPopulation} from "utils/unitUtils";
import {getAdjective} from "utils/languageUtils";
window.Markers = (function () {
@ -200,7 +200,7 @@ window.Markers = (function () {
const resource = rw(resources);
const burg = pack.burgs[cells.burg[cell]];
const name = `${burg.name} — ${resource} mining town`;
const population = rn(burg.population * populationRate * urbanization);
const population = getBurgPopulation(burg.population);
const legend = `${burg.name} is a mining town of ${population} people just nearby the ${resource} mine`;
notes.push({id, name, legend});
}

3
src/modules/ui/editors.js
View file

@ -7,6 +7,7 @@ import {minmax, normalize, rn} from "utils/numberUtils";
import {each} from "utils/probabilityUtils";
import {byId} from "utils/shorthands";
import {parseTransform} from "utils/stringUtils";
import {getBurgPopulation} from "utils/unitUtils";
// clear elSelected variable
export function unselect() {
@ -259,7 +260,7 @@ export function getMFCGlink(burg) {
const sizeRaw = 2.13 * Math.pow((burgPopulation * populationRate) / urbanDensity, 0.385);
const size = minmax(Math.ceil(sizeRaw), 6, 100);
const population = rn(burgPopulation * populationRate * urbanization);
const population = getBurgPopulation(burgPopulation);
const river = cells.r[cell] ? 1 : 0;
const coast = Number(burg.port > 0);

8
src/modules/ui/elevation-profile.js
View file

@ -3,7 +3,7 @@ import * as d3 from "d3";
import {findCell} from "utils/graphUtils";
import {rn} from "utils/numberUtils";
import {getColorScheme, getHeightColor} from "utils/colorUtils";
import {getHeight} from "utils/unitUtils.ts";
import {getHeight, getRuralPopulation, getBurgPopulation} from "utils/unitUtils.ts";
export function showEPForRoute(node) {
const points = [];
@ -134,10 +134,10 @@ function showElevationProfile(data, routeLen, isRiver) {
data += cell + ",";
data += getHeight(h) + ",";
data += h + ",";
data += rn(pop * populationRate) + ",";
data += getRuralPopulation(pop) + ",";
if (burg) {
data += pack.burgs[burg].name + ",";
data += pack.burgs[burg].population * populationRate * urbanization + ",";
data += getBurgPopulation(pack.burgs[burg].population) + ",";
} else {
data += ",0,";
}
@ -286,7 +286,7 @@ function showElevationProfile(data, routeLen, isRiver) {
pop += pack.burgs[chartData.burg[k]].population * urbanization;
}
const populationDesc = rn(pop * populationRate);
const populationDesc = getRuralPopulation(pop);
const provinceDesc = province ? ", " + pack.provinces[province].name : "";
const dataTip =

6
src/modules/ui/military-overview.js
View file

@ -4,7 +4,7 @@ import {tip} from "scripts/tooltips";
import {wiki} from "utils/linkUtils";
import {rn} from "utils/numberUtils";
import {capitalize} from "utils/stringUtils";
import {si} from "utils/unitUtils";
import {si, getTotalPopulation} from "utils/unitUtils";
import {closeDialogs} from "dialogs/utils";
let isLoaded = false;
@ -83,7 +83,7 @@ export function overviewMilitary() {
const states = pack.states.filter(s => s.i && !s.removed);
for (const s of states) {
const population = rn((s.rural + s.urban * urbanization) * populationRate);
const population = getTotalPopulation(s.rural, s.urban);
const getForces = u => s.military.reduce((s, r) => s + (r.u[u.name] || 0), 0);
const total = options.military.reduce((s, u) => s + getForces(u) * u.crew, 0);
const rate = (total / population) * 100;
@ -155,7 +155,7 @@ export function overviewMilitary() {
u => (line.dataset[u.name] = line.querySelector(`div[data-type='${u.name}']`).innerHTML = getForces(u))
);
const population = rn((s.rural + s.urban * urbanization) * populationRate);
const population = getTotalPopulation(s.rural, s.urban);
const total = (line.dataset.total = options.military.reduce((s, u) => s + getForces(u) * u.crew, 0));
const rate = (line.dataset.rate = (total / population) * 100);
line.querySelector("div[data-type='total']").innerHTML = si(total);

54
src/modules/ui/provinces-editor.js
View file

@ -13,7 +13,15 @@ import {rn} from "utils/numberUtils";
import {P, rand} from "utils/probabilityUtils";
import {byId} from "utils/shorthands";
import {parseTransform} from "utils/stringUtils";
import {getArea, getAreaUnit, si} from "utils/unitUtils";
import {
getArea,
getAreaUnit,
si,
getRuralPopulation,
getBurgPopulation,
getBurgPopulationPoints,
getPopulationTip
} from "utils/unitUtils";
let isLoaded = false;
@ -89,9 +97,7 @@ export function editProvinces() {
}
function collectStatistics() {
const cells = pack.cells,
provinces = pack.provinces,
burgs = pack.burgs;
const {cells, provinces, burgs} = pack;
provinces.forEach(p => {
if (!p.i || p.removed) return;
p.area = p.rural = p.urban = 0;
@ -139,12 +145,11 @@ export function editProvinces() {
for (const p of filtered) {
const area = getArea(p.area);
totalArea += area;
const rural = p.rural * populationRate;
const urban = p.urban * populationRate * urbanization;
const rural = getRuralPopulation(p.rural);
const urban = getBurgPopulation(p.urban);
const population = rn(rural + urban);
const populationTip = `Total population: ${si(population)}; Rural population: ${si(
rural
)}; Urban population: ${si(urban)}`;
const populationTip = getPopulationTip("Total", rural, urban) + ". Click to change";
totalPopulation += population;
const stateName = pack.states[p.state].name;
@ -403,8 +408,8 @@ export function editProvinces() {
tip("Province does not have any cells, cannot change population", false, "error");
return;
}
const rural = rn(p.rural * populationRate);
const urban = rn(p.urban * populationRate * urbanization);
const rural = getRuralPopulation(p.rural);
const urban = getBurgPopulation(p.urban);
const total = rural + urban;
const l = n => Number(n).toLocaleString();
@ -458,7 +463,7 @@ export function editProvinces() {
p.burgs.forEach(b => (pack.burgs[b].population = rn(pack.burgs[b].population * urbanChange, 4)));
}
if (!isFinite(urbanChange) && +urbanPop.value > 0) {
const points = urbanPop.value / populationRate / urbanization;
const points = getBurgPopulationPoints(urbanPop.value);
const population = rn(points / burgs.length, 4);
p.burgs.forEach(b => (pack.burgs[b].population = population));
}
@ -678,17 +683,18 @@ export function editProvinces() {
const state = pack.states[d.data.state].fullName;
const area = getArea(d.data.area) + " " + getAreaUnit();
const rural = rn(d.data.rural * populationRate);
const urban = rn(d.data.urban * populationRate * urbanization);
const rural = getRuralPopulation(d.data.rural);
const urban = getBurgPopulation(d.data.urban);
const value =
provincesTreeType.value === "area"
? "Area: " + area
: provincesTreeType.value === "rural"
? "Rural population: " + si(rural)
: provincesTreeType.value === "urban"
? "Urban population: " + si(urban)
: "Population: " + si(rural + urban);
const optionToLabelMap = {
area: "Area: " + area,
rural: "Rural population: " + si(rural),
urban: "Urban population: " + si(urban),
burgs: "Burgs number: " + d.data.burgs,
population: "Population: " + si(rural + urban)
};
const option = getInputValue("provincesTreeType");
const value = optionToLabelMap[option] || "";
provinceInfo.innerHTML = /* html */ `${name}. ${state}. ${value}`;
provinceHighlightOn(ev);
@ -1103,8 +1109,8 @@ export function editProvinces() {
data += el.dataset.capital + ",";
data += el.dataset.area + ",";
data += el.dataset.population + ",";
data += `${Math.round(provincePack.rural * populationRate)},`;
data += `${Math.round(provincePack.urban * populationRate * urbanization)}\n`;
data += getRuralPopulation(provincePack.rural) + ",";
data += getBurgPopulation(provincePack.urban) + "\n";
});
const name = getFileName("Provinces") + ".csv";

37
src/modules/ui/zones-editor.js
View file

@ -8,7 +8,15 @@ import {unique} from "utils/arrayUtils";
import {findAll, findCell, getPackPolygon} from "utils/graphUtils";
import {getNextId} from "utils/nodeUtils";
import {rn} from "utils/numberUtils";
import {getArea, getAreaUnit, si} from "utils/unitUtils";
import {
getArea,
getAreaUnit,
si,
getRuralPopulation,
getBurgPopulation,
getBurgPopulationPoints,
getPopulationTip
} from "utils/unitUtils";
let isLoaded = false;
@ -92,13 +100,12 @@ export function editZones() {
const type = zoneEl.dataset.type;
const fill = zoneEl.getAttribute("fill");
const area = getArea(d3.sum(c.map(i => pack.cells.area[i])));
const rural = d3.sum(c.map(i => pack.cells.pop[i])) * populationRate;
const urban =
d3.sum(c.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization;
const rural = getRuralPopulation(d3.sum(c.map(i => pack.cells.pop[i])));
const urban = getBurgPopulation(d3.sum(c.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)));
const population = rural + urban;
const populationTip = `Total population: ${si(population)}; Rural population: ${si(
rural
)}; Urban population: ${si(urban)}. Click to change`;
const populationTip = getPopulationTip("Total", rural, urban) + ". Click to change";
const inactive = zoneEl.style.display === "none";
const focused = defs.select("#fog #focus" + zoneEl.id).size();
@ -129,9 +136,11 @@ export function editZones() {
// update footer
const totalArea = getArea(graphWidth * graphHeight);
zonesFooterArea.dataset.area = totalArea;
const totalPop =
(d3.sum(pack.cells.pop) + d3.sum(pack.burgs.filter(b => !b.removed).map(b => b.population)) * urbanization) *
populationRate;
const ruralPopulation = d3.sum(pack.cells.pop);
const urbanPopulation = d3.sum(pack.burgs.filter(b => !b.removed).map(b => b.population));
const totalPop = getTotalPopulation(ruralPopulation, urbanPopulation);
zonesFooterPopulation.dataset.population = totalPop;
zonesFooterNumber.innerHTML = /* html */ `${filteredZones.length} of ${zones.length}`;
zonesFooterCells.innerHTML = pack.cells.i.length;
@ -450,10 +459,8 @@ export function editZones() {
}
const burgs = pack.burgs.filter(b => !b.removed && cells.includes(b.cell));
const rural = rn(d3.sum(cells.map(i => pack.cells.pop[i])) * populationRate);
const urban = rn(
d3.sum(cells.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization
);
const rural = getRuralPopulation(d3.sum(cells.map(i => pack.cells.pop[i])));
const urban = getBurgPopulation(d3.sum(cells.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)));
const total = rural + urban;
const l = n => Number(n).toLocaleString();
@ -507,7 +514,7 @@ export function editZones() {
burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
}
if (!isFinite(urbanChange) && +urbanPop.value > 0) {
const points = urbanPop.value / populationRate / urbanization;
const points = getBurgPopulationPoints(urbanPop.value);
const population = rn(points / burgs.length, 4);
burgs.forEach(b => (b.population = population));
}

179
src/scripts/events.js → src/scripts/events.ts
View file

@ -2,16 +2,26 @@ import * as d3 from "d3";
import {openDialog} from "dialogs";
import {layerIsOn} from "layers";
// @ts-expect-error js module
import {clearLegend, dragLegendBox} from "modules/legend";
// @ts-expect-error js module
import {updateCellInfo} from "modules/ui/cell-info";
import {debounce} from "utils/functionUtils";
import {findCell, findGridCell} from "utils/graphUtils";
import {findCell, findGridCell, isLand} from "utils/graphUtils";
import {byId} from "utils/shorthands";
import {convertTemperature, getCellIdPrecipitation, getFriendlyHeight, getPopulationTip, si} from "utils/unitUtils";
import {
convertTemperature,
getBurgPopulation,
getCellIdPrecipitation,
getFriendlyHeight,
getCellPopulation,
getPopulationTip,
si
} from "utils/unitUtils";
import {showMainTip, tip} from "./tooltips";
export function restoreDefaultEvents() {
Zoom.setZoomBehavior();
window.Zoom.setZoomBehavior();
viewbox
.style("cursor", "default")
.on(".drag", null)
@ -25,108 +35,132 @@ export function restoreDefaultEvents() {
}
// on viewbox click event - run function based on target
function handleMapClick() {
const el = d3.event.target;
if (!el || !el.parentElement || !el.parentElement.parentElement) return;
function handleMapClick(this: d3.ContainerElement) {
const el: HTMLElement = d3.event.target;
if (!el?.parentElement?.parentElement?.parentElement) return;
const parent = el.parentElement;
const grand = parent.parentElement;
const great = grand.parentElement;
const grand = parent.parentElement!;
const great = grand.parentElement!;
const greatGreat = great.parentElement;
const p = d3.mouse(this);
const i = findCell(p[0], p[1]);
if (grand.id === "emblems") openDialog("emblemEditor", null, defineEmblemData(+el.dataset.i, parent));
if (grand.id === "emblems" && defineEmblemData(el)) openDialog("emblemEditor", null, defineEmblemData(el));
else if (parent.id === "rivers") editRiver(el.id);
else if (grand.id === "routes") editRoute();
else if (el.tagName === "tspan" && grand.parentNode.parentNode.id === "labels") editLabel();
else if (grand.id === "burgLabels" || grand.id === "burgIcons") openDialog("burgEditor", null, {id: +el.dataset.id});
else if (el.tagName === "tspan" && greatGreat?.id === "labels") openDialog("labelEditor", null, {el});
else if (grand.id === "burgLabels" || grand.id === "burgIcons")
openDialog("burgEditor", null, {id: +(el.dataset.id || 0)});
else if (parent.id === "ice") openDialog("iceEditor");
else if (parent.id === "terrain") editReliefIcon();
else if (grand.id === "markers" || great.id === "markers") editMarker();
else if (grand.id === "coastline") openDialog("coastlineEditor", null, {node: d3.event.target});
else if (grand.id === "coastline") openDialog("coastlineEditor", null, {el});
else if (great.id === "armies") editRegiment();
else if (pack.cells.t[i] === 1) {
openDialog("coastlineEditor", null, {node: byId("island_" + pack.cells.f[i])});
} else if (grand.id === "lakes") editLake();
} else if (grand.id === "lakes") openDialog("lakeEditor", null, {el});
}
function defineEmblemData(i, parent) {
const [g, type] =
parent.id === "burgEmblems"
? [pack.burgs, "burg"]
: parent.id === "provinceEmblems"
? [pack.provinces, "province"]
: [pack.states, "state"];
return {type, id: type + "COA" + i, el: g[i]};
function defineEmblemData(el: HTMLElement) {
const i = +(el.dataset?.i || 0);
type TEmblemType = "state" | "burg" | "province";
type TEmblemTypeArray = IPack[`${TEmblemType}s`];
const emblemTypeMap: Dict<[TEmblemTypeArray, TEmblemType]> = {
burgEmblems: [pack.burgs, "burg"],
provinceEmblems: [pack.provinces, "province"],
stateEmblems: [pack.states, "state"]
};
const emblemType = el.parentElement?.id;
if (emblemType && emblemType in emblemTypeMap) {
const [data, type] = emblemTypeMap[emblemType];
return {type, id: type + "COA" + i, el: data[i]};
}
return undefined;
}
const onMouseMove = debounce(handleMouseMove, 100);
function handleMouseMove() {
function handleMouseMove(this: d3.ContainerElement) {
const point = d3.mouse(this);
const i = findCell(point[0], point[1]); // pack cell id
if (i === undefined) return;
showNotes(d3.event);
const gridCell = findGridCell(point[0], point[1], grid);
if (tooltip.dataset.main) showMainTip();
else showMapTooltip(point, d3.event, i, gridCell);
if (cellInfo?.offsetParent) updateCellInfo(point, i, gridCell);
if (byId("tooltip")?.dataset.main) showMainTip();
else showTooltipOnMapHover(point, d3.event, i, gridCell);
if (byId("cellInfo")?.offsetParent) updateCellInfo(point, i, gridCell);
}
// show note box on hover (if any)
function showNotes(event) {
if (notesEditor?.offsetParent) return;
let id = event.target.id || event.target.parentNode.id || event.target.parentNode.parentNode.id;
if (event.target.parentNode.parentNode.id === "burgLabels") id = "burg" + event.target.dataset.id;
else if (event.target.parentNode.parentNode.id === "burgIcons") id = "burg" + event.target.dataset.id;
function showNotes(event: Event) {
if (byId("notesEditor")?.offsetParent) return;
const el = event.target as SVGElement;
if (!el?.parentElement?.parentElement?.parentElement) return;
const parent = el.parentElement;
const grand = parent.parentElement!;
let id = el.id || parent.id || grand.id;
if (grand.id === "burgLabels") id = "burg" + el.dataset.id;
else if (grand.id === "burgIcons") id = "burg" + el.dataset.id;
const note = notes.find(note => note.id === id);
if (note !== undefined && note.legend !== "") {
byId("notes").style.display = "block";
byId("notesHeader").innerHTML = note.name;
byId("notesBody").innerHTML = note.legend;
} else if (!options.pinNotes && !markerEditor?.offsetParent) {
byId("notes").style.display = "none";
byId("notesHeader").innerHTML = "";
byId("notesBody").innerHTML = "";
byId("notes")!.style.display = "block";
byId("notesHeader")!.innerHTML = note.name;
byId("notesBody")!.innerHTML = note.legend;
} else if (!options.pinNotes && !byId("markerEditor")?.offsetParent) {
byId("notes")!.style.display = "none";
byId("notesHeader")!.innerHTML = "";
byId("notesBody")!.innerHTML = "";
}
}
// show viewbox tooltip if main tooltip is blank
function showMapTooltip(point, event, packCellId, gridCellId) {
function showTooltipOnMapHover(point: TPoint, event: Event, packCellId: number, gridCellId: number) {
tip(""); // clear tip
const path = event.composedPath();
const path = event.composedPath() as HTMLElement[];
if (!path[path.length - 8]) return;
const group = path[path.length - 7].id;
const subgroup = path[path.length - 8].id;
const land = pack.cells.h[packCellId] >= 20;
const element = event.target as HTMLElement;
const parent = element.parentElement!;
const land = isLand(packCellId);
// specific elements
if (group === "armies") return tip(event.target.parentNode.dataset.name + ". Click to edit");
if (group === "armies") return tip(parent.dataset.name + ". Click to edit");
if (group === "emblems" && event.target.tagName === "use") {
const parent = event.target.parentNode;
const [g, type] =
parent.id === "burgEmblems"
? [pack.burgs, "burg"]
: parent.id === "provinceEmblems"
? [pack.provinces, "province"]
: [pack.states, "state"];
const i = +event.target.dataset.i;
d3.select(event.target).raise();
if (group === "emblems" && element.tagName === "use") {
d3.select(element).raise();
d3.select(parent).raise();
const name = g[i].fullName || g[i].name;
const emblemData = defineEmblemData(element);
if (!emblemData) return;
const {type, el} = emblemData;
const name = ("fullName" in el && el.fullName) || el.name;
tip(`${name} ${type} emblem. Click to edit`);
return;
}
if (group === "rivers") {
const river = +event.target.id.slice(5);
const r = pack.rivers.find(r => r.i === river);
const name = r ? r.name + " " + r.type : "";
const riverId = +element.id.slice(5);
const river = pack.rivers.find(r => r.i === riverId);
const name = river ? `${river.name} ${river.type}` : "";
tip(name + ". Click to edit");
if (riversOverview?.offsetParent) highlightEditorLine(riversOverview, river, 5000);
const $riversOverview = byId("riversOverview")!;
if ($riversOverview?.offsetParent) highlightEditorLine($riversOverview, riverId, 5000);
return;
}
@ -135,11 +169,14 @@ function showMapTooltip(point, event, packCellId, gridCellId) {
if (group === "terrain") return tip("Click to edit the Relief Icon");
if (subgroup === "burgLabels" || subgroup === "burgIcons") {
const burg = +path[path.length - 10].dataset.id;
const b = pack.burgs[burg];
const population = si(b.population * populationRate * urbanization);
tip(`${b.name}. Population: ${population}. Click to edit`);
if (burgsOverview?.offsetParent) highlightEditorLine(burgsOverview, burg, 5000);
const burgId = +(path[path.length - 10].dataset.id || 0);
const burg = pack.burgs[burgId];
const population = si(getBurgPopulation(burg.population));
tip(`${burg.name}. Population: ${population}. Click to edit`);
const $burgOverview = byId("burgOverview");
if ($burgOverview?.offsetParent) highlightEditorLine($burgOverview, burgId, 5000);
return;
}
if (group === "labels") return tip("Click to edit the Label");
@ -147,8 +184,8 @@ function showMapTooltip(point, event, packCellId, gridCellId) {
if (group === "markers") return tip("Click to edit the Marker and pin the marker note");
if (group === "ruler") {
const tag = event.target.tagName;
const className = event.target.getAttribute("class");
const tag = element.tagName;
const className = element.getAttribute("class");
if (tag === "circle" && className === "edge")
return tip("Drag to adjust. Hold Ctrl and drag to add a point. Click to remove the point");
if (tag === "circle" && className === "control")
@ -164,7 +201,7 @@ function showMapTooltip(point, event, packCellId, gridCellId) {
if (subgroup === "burgLabels") return tip("Click to edit the Burg");
if (group === "lakes" && !land) {
const lakeId = +event.target.dataset.f;
const lakeId = +element.dataset.f;
const name = pack.features[lakeId]?.name;
const fullName = subgroup === "freshwater" ? name : name + " " + subgroup;
tip(`${fullName} lake. Click to edit`);
@ -183,8 +220,10 @@ function showMapTooltip(point, event, packCellId, gridCellId) {
// covering elements
if (layerIsOn("togglePrec") && land) tip("Annual Precipitation: " + getCellIdPrecipitation(packCellId));
else if (layerIsOn("togglePopulation")) tip(getPopulationTip(packCellId));
else if (layerIsOn("toggleTemp")) tip("Temperature: " + convertTemperature(grid.cells.temp[gridCellId]));
else if (layerIsOn("togglePopulation")) {
const [rural, urban] = getCellPopulation(packCellId);
tip(getPopulationTip("Cell population", rural, urban));
} else if (layerIsOn("toggleTemp")) tip("Temperature: " + convertTemperature(grid.cells.temp[gridCellId]));
else if (layerIsOn("toggleBiomes") && pack.cells.biome[packCellId]) {
const biome = pack.cells.biome[packCellId];
tip("Biome: " + biomesData.name[biome]);
@ -212,9 +251,9 @@ function showMapTooltip(point, event, packCellId, gridCellId) {
} else if (layerIsOn("toggleHeight")) tip("Height: " + getFriendlyHeight(point));
}
function highlightEditorLine(editor, id, timeout = 10000) {
Array.from(editor.getElementsByClassName("states hovered")).forEach(el => el.classList.remove("hovered")); // clear all hovered
const hovered = Array.from(editor.querySelectorAll("div")).find(el => el.dataset.id == id);
function highlightEditorLine($editor, id, timeout = 10000) {
Array.from($editor.getElementsByClassName("states hovered")).forEach(el => el.classList.remove("hovered")); // clear all hovered
const hovered = Array.from($editor.querySelectorAll("div")).find(el => el.dataset.id == id);
if (hovered) hovered.classList.add("hovered"); // add hovered class
if (timeout)
setTimeout(() => {

2
src/types/note.d.ts vendored
View file

@ -1,5 +1,5 @@
interface INote {
id: number;
id: string;
name: string;
legend: string;
}

23
src/types/pack.d.ts vendored
View file

@ -1,5 +1,3 @@
import {Numeric} from "d3";
interface IPack {
vertices: {
p: TPoints;
@ -23,16 +21,18 @@ interface IPack {
cultures: ICulture[];
provinces: IProvince[];
burgs: IBurg[];
rivers: IRiver[];
religions: IReligion[];
}
interface IFeature {
i: Numeric;
i: number;
}
interface IState {
i: number;
name: string;
fullName: string;
removed?: boolean;
}
@ -45,6 +45,7 @@ interface ICulture {
interface IProvince {
i: number;
name: string;
fullName: string;
removed?: boolean;
}
@ -63,3 +64,19 @@ interface IReligion {
name: string;
removed?: boolean;
}
interface IRiver {
i: number;
name: string;
basin: number;
parent: number;
type: string;
source: number;
mouth: number;
sourceWidth: number;
width: number;
widthFactor: number;
length: number;
discharge: number;
cells: number[];
}

27
src/utils/unitUtils.ts
View file

@ -113,10 +113,26 @@ export function getCellIdPrecipitation(gridCellId: number) {
// Population
// ***
export function getRuralPopulation(cellPopulationPoints: number) {
return rn(cellPopulationPoints * populationRate);
}
export function getBurgPopulation(burgPopulationPoints: number) {
return rn(burgPopulationPoints * populationRate * urbanization);
}
export function getTotalPopulation(cellPopulationPoints: number, burgPopulationPoints: number) {
return rn((cellPopulationPoints + burgPopulationPoints * urbanization) * populationRate);
}
export function getBurgPopulationPoints(burgPopulationValue: number) {
return rn(burgPopulationValue / populationRate / urbanization, 4);
}
export function getCellPopulation(cellId: number) {
const rural = pack.cells.pop[cellId] * populationRate;
const burg = pack.cells.burg[cellId];
const urban = burg ? pack.burgs[burg].population * populationRate * urbanization : 0;
const rural = getRuralPopulation(pack.cells.pop[cellId]);
const burgId = pack.cells.burg[cellId];
const urban = burgId ? getBurgPopulation(pack.burgs[burgId].population) : 0;
return [rural, urban];
}
@ -125,7 +141,6 @@ export function getFriendlyPopulation(cellId: number) {
return `${si(rural + urban)} (${si(rural)} rural, urban ${si(urban)})`;
}
export function getPopulationTip(cellId: number) {
const [rural, urban] = getCellPopulation(cellId);
return `Cell population: ${si(rural + urban)}; Rural: ${si(rural)}; Urban: ${si(urban)}`;
export function getPopulationTip(type = "Cell", rural: number, urban: number) {
return `${type} population: ${si(rural + urban)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}`;
}