mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-18 10:01:23 +01:00
refactor: population utils
This commit is contained in:
Azgaar
parent
3125366944
commit
3c850d8d46
22 changed files with 443 additions and 330 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 =
|
||||
|
|
|
|||
|
|
@ -1,414 +0,0 @@
|
|||
import {findCell} from "utils/graphUtils";
|
||||
import {tip, showMainTip} from "scripts/tooltips";
|
||||
import {round, parseTransform} from "utils/stringUtils";
|
||||
import {closeDialogs} from "dialogs/utils";
|
||||
|
||||
let isLoaded = false;
|
||||
|
||||
export function editLabel() {
|
||||
if (customization) return;
|
||||
closeDialogs();
|
||||
if (!layerIsOn("toggleLabels")) toggleLabels();
|
||||
|
||||
const tspan = d3.event.target;
|
||||
const textPath = tspan.parentNode;
|
||||
const text = textPath.parentNode;
|
||||
elSelected = d3.select(text).call(d3.drag().on("start", dragLabel)).classed("draggable", true);
|
||||
viewbox.on("touchmove mousemove", showEditorTips);
|
||||
|
||||
$("#labelEditor").dialog({
|
||||
title: "Edit Label",
|
||||
resizable: false,
|
||||
width: "fit-content",
|
||||
position: {my: "center top+10", at: "bottom", of: text, collision: "fit"},
|
||||
close: closeLabelEditor
|
||||
});
|
||||
|
||||
drawControlPointsAndLine();
|
||||
selectLabelGroup(text);
|
||||
updateValues(textPath);
|
||||
|
||||
if (isLoaded) return;
|
||||
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);
|
||||
|
||||
document.getElementById("labelTextShow").addEventListener("click", showTextSection);
|
||||
document.getElementById("labelTextHide").addEventListener("click", hideTextSection);
|
||||
document.getElementById("labelText").addEventListener("input", changeText);
|
||||
document.getElementById("labelTextRandom").addEventListener("click", generateRandomName);
|
||||
|
||||
document.getElementById("labelEditStyle").addEventListener("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);
|
||||
|
||||
document.getElementById("labelAlign").addEventListener("click", editLabelAlign);
|
||||
document.getElementById("labelLegend").addEventListener("click", editLabelLegend);
|
||||
document.getElementById("labelRemoveSingle").addEventListener("click", removeLabel);
|
||||
|
||||
function showEditorTips() {
|
||||
showMainTip();
|
||||
if (d3.event.target.parentNode.parentNode.id === elSelected.attr("id")) tip("Drag to shift the label");
|
||||
else if (d3.event.target.parentNode.id === "controlPoints") {
|
||||
if (d3.event.target.tagName === "circle") tip("Drag to move, click to delete the control point");
|
||||
if (d3.event.target.tagName === "path") tip("Click to add a control point");
|
||||
}
|
||||
}
|
||||
|
||||
function selectLabelGroup(text) {
|
||||
const group = text.parentNode.id;
|
||||
|
||||
if (group === "states" || group === "burgLabels") {
|
||||
document.getElementById("labelGroupShow").style.display = "none";
|
||||
return;
|
||||
}
|
||||
|
||||
hideGroupSection();
|
||||
const select = document.getElementById("labelGroupSelect");
|
||||
select.options.length = 0; // remove all options
|
||||
|
||||
labels.selectAll(":scope > g").each(function () {
|
||||
if (this.id === "states") return;
|
||||
if (this.id === "burgLabels") return;
|
||||
select.options.add(new Option(this.id, this.id, false, this.id === group));
|
||||
});
|
||||
}
|
||||
|
||||
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"));
|
||||
}
|
||||
|
||||
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"));
|
||||
debug.select("#controlPoints").append("path").attr("d", path.getAttribute("d")).on("click", addInterimControlPoint);
|
||||
const l = path.getTotalLength();
|
||||
if (!l) return;
|
||||
const increment = l / Math.max(Math.ceil(l / 200), 2);
|
||||
for (let i = 0; i <= l; i += increment) {
|
||||
addControlPoint(path.getPointAtLength(i));
|
||||
}
|
||||
}
|
||||
|
||||
function addControlPoint(point) {
|
||||
debug
|
||||
.select("#controlPoints")
|
||||
.append("circle")
|
||||
.attr("cx", point.x)
|
||||
.attr("cy", point.y)
|
||||
.attr("r", 2.5)
|
||||
.attr("stroke-width", 0.8)
|
||||
.call(d3.drag().on("drag", dragControlPoint))
|
||||
.on("click", clickControlPoint);
|
||||
}
|
||||
|
||||
function dragControlPoint() {
|
||||
this.setAttribute("cx", d3.event.x);
|
||||
this.setAttribute("cy", d3.event.y);
|
||||
redrawLabelPath();
|
||||
}
|
||||
|
||||
const lineGen = d3.line().curve(d3.curveBundle.beta(1));
|
||||
|
||||
function redrawLabelPath() {
|
||||
const path = document.getElementById("textPath_" + elSelected.attr("id"));
|
||||
const points = [];
|
||||
debug
|
||||
.select("#controlPoints")
|
||||
.selectAll("circle")
|
||||
.each(function () {
|
||||
points.push([this.getAttribute("cx"), this.getAttribute("cy")]);
|
||||
});
|
||||
const d = round(lineGen(points));
|
||||
path.setAttribute("d", d);
|
||||
debug.select("#controlPoints > path").attr("d", d);
|
||||
}
|
||||
|
||||
function clickControlPoint() {
|
||||
this.remove();
|
||||
redrawLabelPath();
|
||||
}
|
||||
|
||||
function addInterimControlPoint() {
|
||||
const point = d3.mouse(this);
|
||||
|
||||
const dists = [];
|
||||
debug
|
||||
.select("#controlPoints")
|
||||
.selectAll("circle")
|
||||
.each(function () {
|
||||
const x = +this.getAttribute("cx");
|
||||
const y = +this.getAttribute("cy");
|
||||
dists.push((point[0] - x) ** 2 + (point[1] - y) ** 2);
|
||||
});
|
||||
|
||||
let index = dists.length;
|
||||
if (dists.length > 1) {
|
||||
const sorted = dists.slice(0).sort((a, b) => a - b);
|
||||
const closest = dists.indexOf(sorted[0]);
|
||||
const next = dists.indexOf(sorted[1]);
|
||||
if (closest <= next) index = closest + 1;
|
||||
else index = next + 1;
|
||||
}
|
||||
|
||||
const before = ":nth-child(" + (index + 2) + ")";
|
||||
debug
|
||||
.select("#controlPoints")
|
||||
.insert("circle", before)
|
||||
.attr("cx", point[0])
|
||||
.attr("cy", point[1])
|
||||
.attr("r", 2.5)
|
||||
.attr("stroke-width", 0.8)
|
||||
.call(d3.drag().on("drag", dragControlPoint))
|
||||
.on("click", clickControlPoint);
|
||||
|
||||
redrawLabelPath();
|
||||
}
|
||||
|
||||
function dragLabel() {
|
||||
const tr = parseTransform(elSelected.attr("transform"));
|
||||
const dx = +tr[0] - d3.event.x,
|
||||
dy = +tr[1] - d3.event.y;
|
||||
|
||||
d3.event.on("drag", function () {
|
||||
const x = d3.event.x,
|
||||
y = d3.event.y;
|
||||
const transform = `translate(${dx + x},${dy + y})`;
|
||||
elSelected.attr("transform", transform);
|
||||
debug.select("#controlPoints").attr("transform", transform);
|
||||
});
|
||||
}
|
||||
|
||||
function showGroupSection() {
|
||||
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
|
||||
document.getElementById("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";
|
||||
}
|
||||
|
||||
function changeGroup() {
|
||||
document.getElementById(this.value).appendChild(elSelected.node());
|
||||
}
|
||||
|
||||
function toggleNewGroupInput() {
|
||||
if (labelGroupInput.style.display === "none") {
|
||||
labelGroupInput.style.display = "inline-block";
|
||||
labelGroupInput.focus();
|
||||
labelGroupSelect.style.display = "none";
|
||||
} else {
|
||||
labelGroupInput.style.display = "none";
|
||||
labelGroupSelect.style.display = "inline-block";
|
||||
}
|
||||
}
|
||||
|
||||
function createNewGroup() {
|
||||
if (!this.value) {
|
||||
tip("Please provide a valid group name");
|
||||
return;
|
||||
}
|
||||
const group = this.value
|
||||
.toLowerCase()
|
||||
.replace(/ /g, "_")
|
||||
.replace(/[^\w\s]/gi, "");
|
||||
|
||||
if (document.getElementById(group)) {
|
||||
tip("Element with this id already exists. Please provide a unique name", false, "error");
|
||||
return;
|
||||
}
|
||||
|
||||
if (Number.isFinite(+group.charAt(0))) {
|
||||
tip("Group name should start with a letter", false, "error");
|
||||
return;
|
||||
}
|
||||
|
||||
// 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));
|
||||
oldGroup.id = group;
|
||||
toggleNewGroupInput();
|
||||
document.getElementById("labelGroupInput").value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const newGroup = elSelected.node().parentNode.cloneNode(false);
|
||||
document.getElementById("labels").appendChild(newGroup);
|
||||
newGroup.id = group;
|
||||
document.getElementById("labelGroupSelect").options.add(new Option(group, group, false, true));
|
||||
document.getElementById(group).appendChild(elSelected.node());
|
||||
|
||||
toggleNewGroupInput();
|
||||
document.getElementById("labelGroupInput").value = "";
|
||||
}
|
||||
|
||||
function removeLabelsGroup() {
|
||||
const group = elSelected.node().parentNode.id;
|
||||
const basic = group === "states" || group === "addedLabels";
|
||||
const count = elSelected.node().parentNode.childElementCount;
|
||||
alertMessage.innerHTML = /* html */ `Are you sure you want to remove ${
|
||||
basic ? "all elements in the group" : "the entire label group"
|
||||
}? <br /><br />Labels to be
|
||||
removed: ${count}`;
|
||||
$("#alert").dialog({
|
||||
resizable: false,
|
||||
title: "Remove route group",
|
||||
buttons: {
|
||||
Remove: function () {
|
||||
$(this).dialog("close");
|
||||
$("#labelEditor").dialog("close");
|
||||
hideGroupSection();
|
||||
labels
|
||||
.select("#" + group)
|
||||
.selectAll("text")
|
||||
.each(function () {
|
||||
document.getElementById("textPath_" + this.id).remove();
|
||||
this.remove();
|
||||
});
|
||||
if (!basic) labels.select("#" + group).remove();
|
||||
},
|
||||
Cancel: function () {
|
||||
$(this).dialog("close");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showTextSection() {
|
||||
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
|
||||
document.getElementById("labelTextSection").style.display = "inline-block";
|
||||
}
|
||||
|
||||
function hideTextSection() {
|
||||
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
|
||||
document.getElementById("labelTextSection").style.display = "none";
|
||||
}
|
||||
|
||||
function changeText() {
|
||||
const input = document.getElementById("labelText").value;
|
||||
const el = elSelected.select("textPath").node();
|
||||
const example = d3
|
||||
.select(elSelected.node().parentNode)
|
||||
.append("text")
|
||||
.attr("x", 0)
|
||||
.attr("x", 0)
|
||||
.attr("font-size", el.getAttribute("font-size"))
|
||||
.node();
|
||||
|
||||
const lines = input.split("|");
|
||||
const top = (lines.length - 1) / -2; // y offset
|
||||
const inner = lines
|
||||
.map((l, d) => {
|
||||
example.innerHTML = l;
|
||||
const left = example.getBBox().width / -2; // x offset
|
||||
return `<tspan x="${left}px" dy="${d ? 1 : top}em">${l}</tspan>`;
|
||||
})
|
||||
.join("");
|
||||
|
||||
el.innerHTML = inner;
|
||||
example.remove();
|
||||
|
||||
if (elSelected.attr("id").slice(0, 10) === "stateLabel")
|
||||
tip("Use States Editor to change an actual state name, not just a label", false, "warning");
|
||||
}
|
||||
|
||||
function generateRandomName() {
|
||||
let name = "";
|
||||
if (elSelected.attr("id").slice(0, 10) === "stateLabel") {
|
||||
const id = +elSelected.attr("id").slice(10);
|
||||
const culture = pack.states[id].culture;
|
||||
name = Names.getState(Names.getCulture(culture, 4, 7, ""), culture);
|
||||
} else {
|
||||
const box = elSelected.node().getBBox();
|
||||
const cell = findCell((box.x + box.width) / 2, (box.y + box.height) / 2);
|
||||
const culture = pack.cells.culture[cell];
|
||||
name = Names.getCulture(culture);
|
||||
}
|
||||
document.getElementById("labelText").value = name;
|
||||
changeText();
|
||||
}
|
||||
|
||||
function editGroupStyle() {
|
||||
const g = elSelected.node().parentNode.id;
|
||||
editStyle("labels", g);
|
||||
}
|
||||
|
||||
function showSizeSection() {
|
||||
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
|
||||
document.getElementById("labelSizeSection").style.display = "inline-block";
|
||||
}
|
||||
|
||||
function hideSizeSection() {
|
||||
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
|
||||
document.getElementById("labelSizeSection").style.display = "none";
|
||||
}
|
||||
|
||||
function changeStartOffset() {
|
||||
elSelected.select("textPath").attr("startOffset", this.value + "%");
|
||||
tip("Label offset: " + this.value + "%");
|
||||
}
|
||||
|
||||
function changeRelativeSize() {
|
||||
elSelected.select("textPath").attr("font-size", this.value + "%");
|
||||
tip("Label relative size: " + this.value + "%");
|
||||
changeText();
|
||||
}
|
||||
|
||||
function editLabelAlign() {
|
||||
const bbox = elSelected.node().getBBox();
|
||||
const c = [bbox.x + bbox.width / 2, bbox.y + bbox.height / 2];
|
||||
const path = defs.select("#textPath_" + elSelected.attr("id"));
|
||||
path.attr("d", `M${c[0] - bbox.width},${c[1]}h${bbox.width * 2}`);
|
||||
drawControlPointsAndLine();
|
||||
}
|
||||
|
||||
function editLabelLegend() {
|
||||
const id = elSelected.attr("id");
|
||||
const name = elSelected.text();
|
||||
editNotes(id, name);
|
||||
}
|
||||
|
||||
function removeLabel() {
|
||||
alertMessage.innerHTML = "Are you sure you want to remove the label?";
|
||||
$("#alert").dialog({
|
||||
resizable: false,
|
||||
title: "Remove label",
|
||||
buttons: {
|
||||
Remove: function () {
|
||||
$(this).dialog("close");
|
||||
defs.select("#textPath_" + elSelected.attr("id")).remove();
|
||||
elSelected.remove();
|
||||
$("#labelEditor").dialog("close");
|
||||
},
|
||||
Cancel: function () {
|
||||
$(this).dialog("close");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function closeLabelEditor() {
|
||||
debug.select("#controlPoints").remove();
|
||||
unselect();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,267 +0,0 @@
|
|||
import * as d3 from "d3";
|
||||
|
||||
import {closeDialogs} from "dialogs/utils";
|
||||
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";
|
||||
|
||||
let isLoaded = false;
|
||||
|
||||
export function editLake() {
|
||||
if (customization) return;
|
||||
closeDialogs(".stable");
|
||||
if (layerIsOn("toggleCells")) toggleCells();
|
||||
|
||||
$("#lakeEditor").dialog({
|
||||
title: "Edit Lake",
|
||||
resizable: false,
|
||||
position: {my: "center top+20", at: "top", of: d3.event, collision: "fit"},
|
||||
close: closeLakesEditor
|
||||
});
|
||||
|
||||
const node = d3.event.target;
|
||||
debug.append("g").attr("id", "vertices");
|
||||
elSelected = d3.select(node);
|
||||
updateLakeValues();
|
||||
selectLakeGroup(node);
|
||||
drawLakeVertices();
|
||||
viewbox.on("touchmove mousemove", null);
|
||||
|
||||
if (isLoaded) return;
|
||||
isLoaded = true;
|
||||
|
||||
// add listeners
|
||||
document.getElementById("lakeName").addEventListener("input", changeName);
|
||||
document.getElementById("lakeNameCulture").addEventListener("click", generateNameCulture);
|
||||
document.getElementById("lakeNameRandom").addEventListener("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);
|
||||
|
||||
document.getElementById("lakeEditStyle").addEventListener("click", editGroupStyle);
|
||||
document.getElementById("lakeLegend").addEventListener("click", editLakeLegend);
|
||||
|
||||
function getLake() {
|
||||
const lakeId = +elSelected.attr("data-f");
|
||||
return pack.features.find(feature => feature.i === lakeId);
|
||||
}
|
||||
|
||||
function updateLakeValues() {
|
||||
const cells = pack.cells;
|
||||
|
||||
const l = getLake();
|
||||
document.getElementById("lakeName").value = l.name;
|
||||
document.getElementById("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;
|
||||
|
||||
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);
|
||||
|
||||
document.getElementById("lakeFlux").value = l.flux;
|
||||
document.getElementById("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;
|
||||
}
|
||||
|
||||
function drawLakeVertices() {
|
||||
const v = getLake().vertices; // lake outer vertices
|
||||
|
||||
const c = [...new Set(v.map(v => pack.vertices.c[v]).flat())];
|
||||
debug
|
||||
.select("#vertices")
|
||||
.selectAll("polygon")
|
||||
.data(c)
|
||||
.enter()
|
||||
.append("polygon")
|
||||
.attr("points", d => getPackPolygon(d))
|
||||
.attr("data-c", d => d);
|
||||
|
||||
debug
|
||||
.select("#vertices")
|
||||
.selectAll("circle")
|
||||
.data(v)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("cx", d => pack.vertices.p[d][0])
|
||||
.attr("cy", d => pack.vertices.p[d][1])
|
||||
.attr("r", 0.4)
|
||||
.attr("data-v", d => d)
|
||||
.call(d3.drag().on("drag", dragVertex))
|
||||
.on("mousemove", () =>
|
||||
tip("Drag to move the vertex, please use for fine-tuning only. Edit heightmap to change actual cell heights")
|
||||
);
|
||||
}
|
||||
|
||||
function dragVertex() {
|
||||
const x = rn(d3.event.x, 2),
|
||||
y = rn(d3.event.y, 2);
|
||||
this.setAttribute("cx", x);
|
||||
this.setAttribute("cy", y);
|
||||
const v = +this.dataset.v;
|
||||
pack.vertices.p[v] = [x, y];
|
||||
debug
|
||||
.select("#vertices")
|
||||
.selectAll("polygon")
|
||||
.attr("points", d => getPackPolygon(d));
|
||||
redrawLake();
|
||||
}
|
||||
|
||||
const lineGen = d3.line().curve(d3.curveBasisClosed);
|
||||
|
||||
function redrawLake() {
|
||||
const feature = getLake();
|
||||
const points = feature.vertices.map(v => pack.vertices.p[v]);
|
||||
const d = round(lineGen(points));
|
||||
elSelected.attr("d", d);
|
||||
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();
|
||||
}
|
||||
|
||||
function changeName() {
|
||||
getLake().name = this.value;
|
||||
}
|
||||
|
||||
function generateNameCulture() {
|
||||
const lake = getLake();
|
||||
lake.name = lakeName.value = Lakes.getName(lake);
|
||||
}
|
||||
|
||||
function generateNameRandom() {
|
||||
const lake = getLake();
|
||||
lake.name = lakeName.value = Names.getBase(rand(nameBases.length - 1));
|
||||
}
|
||||
|
||||
function selectLakeGroup(node) {
|
||||
const group = node.parentNode.id;
|
||||
const select = document.getElementById("lakeGroup");
|
||||
select.options.length = 0; // remove all options
|
||||
|
||||
lakes.selectAll("g").each(function () {
|
||||
select.options.add(new Option(this.id, this.id, false, this.id === group));
|
||||
});
|
||||
}
|
||||
|
||||
function changeLakeGroup() {
|
||||
document.getElementById(this.value).appendChild(elSelected.node());
|
||||
getLake().group = this.value;
|
||||
}
|
||||
|
||||
function toggleNewGroupInput() {
|
||||
if (lakeGroupName.style.display === "none") {
|
||||
lakeGroupName.style.display = "inline-block";
|
||||
lakeGroupName.focus();
|
||||
lakeGroup.style.display = "none";
|
||||
} else {
|
||||
lakeGroupName.style.display = "none";
|
||||
lakeGroup.style.display = "inline-block";
|
||||
}
|
||||
}
|
||||
|
||||
function createNewGroup() {
|
||||
if (!this.value) {
|
||||
tip("Please provide a valid group name");
|
||||
return;
|
||||
}
|
||||
const group = this.value
|
||||
.toLowerCase()
|
||||
.replace(/ /g, "_")
|
||||
.replace(/[^\w\s]/gi, "");
|
||||
|
||||
if (document.getElementById(group)) {
|
||||
tip("Element with this id already exists. Please provide a unique name", false, "error");
|
||||
return;
|
||||
}
|
||||
|
||||
if (Number.isFinite(+group.charAt(0))) {
|
||||
tip("Group name should start with a letter", false, "error");
|
||||
return;
|
||||
}
|
||||
|
||||
// just rename if only 1 element left
|
||||
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));
|
||||
oldGroup.id = group;
|
||||
toggleNewGroupInput();
|
||||
document.getElementById("lakeGroupName").value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
// create a new group
|
||||
const newGroup = elSelected.node().parentNode.cloneNode(false);
|
||||
document.getElementById("lakes").appendChild(newGroup);
|
||||
newGroup.id = group;
|
||||
document.getElementById("lakeGroup").options.add(new Option(group, group, false, true));
|
||||
document.getElementById(group).appendChild(elSelected.node());
|
||||
|
||||
toggleNewGroupInput();
|
||||
document.getElementById("lakeGroupName").value = "";
|
||||
}
|
||||
|
||||
function removeLakeGroup() {
|
||||
const group = elSelected.node().parentNode.id;
|
||||
if (["freshwater", "salt", "sinkhole", "frozen", "lava", "dry"].includes(group)) {
|
||||
tip("This is one of the default groups, it cannot be removed", false, "error");
|
||||
return;
|
||||
}
|
||||
|
||||
const count = elSelected.node().parentNode.childElementCount;
|
||||
alertMessage.innerHTML = /* html */ `Are you sure you want to remove the group? All lakes of the group (${count}) will be turned into Freshwater`;
|
||||
$("#alert").dialog({
|
||||
resizable: false,
|
||||
title: "Remove lake group",
|
||||
width: "26em",
|
||||
buttons: {
|
||||
Remove: function () {
|
||||
$(this).dialog("close");
|
||||
const freshwater = document.getElementById("freshwater");
|
||||
const groupEl = document.getElementById(group);
|
||||
while (groupEl.childNodes.length) {
|
||||
freshwater.appendChild(groupEl.childNodes[0]);
|
||||
}
|
||||
groupEl.remove();
|
||||
document.getElementById("lakeGroup").selectedOptions[0].remove();
|
||||
document.getElementById("lakeGroup").value = "freshwater";
|
||||
},
|
||||
Cancel: function () {
|
||||
$(this).dialog("close");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function editGroupStyle() {
|
||||
const g = elSelected.node().parentNode.id;
|
||||
editStyle("lakes", g);
|
||||
}
|
||||
|
||||
function editLakeLegend() {
|
||||
const id = elSelected.attr("id");
|
||||
editNotes(id, getLake().name + " " + lakeGroup.value + " lake");
|
||||
}
|
||||
|
||||
function closeLakesEditor() {
|
||||
debug.select("#vertices").remove();
|
||||
unselect();
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue