mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 01:41:22 +01:00
store populationRate and urbanization in memory
This commit is contained in:
Azgaar
parent
3892370816
commit
5ed08e156a
19 changed files with 2870 additions and 1552 deletions
|
|
@ -15,7 +15,10 @@ function editProvinces() {
|
|||
modules.editProvinces = true;
|
||||
|
||||
$("#provincesEditor").dialog({
|
||||
title: "Provinces Editor", resizable: false, width: fitContent(), close: closeProvincesEditor,
|
||||
title: "Provinces Editor",
|
||||
resizable: false,
|
||||
width: fitContent(),
|
||||
close: closeProvincesEditor,
|
||||
position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
|
||||
});
|
||||
|
||||
|
|
@ -34,21 +37,27 @@ function editProvinces() {
|
|||
document.getElementById("provincesAdd").addEventListener("click", enterAddProvinceMode);
|
||||
document.getElementById("provincesRecolor").addEventListener("click", recolorProvinces);
|
||||
|
||||
body.addEventListener("click", function(ev) {
|
||||
body.addEventListener("click", function (ev) {
|
||||
if (customization) return;
|
||||
const el = ev.target, cl = el.classList, line = el.parentNode, p = +line.dataset.id;
|
||||
if (cl.contains("fillRect")) changeFill(el); else
|
||||
if (cl.contains("name")) editProvinceName(p); else
|
||||
if (cl.contains("coaIcon")) editEmblem("province", "provinceCOA"+p, pack.provinces[p]); else
|
||||
if (cl.contains("icon-star-empty")) capitalZoomIn(p); else
|
||||
if (cl.contains("icon-flag-empty")) triggerIndependencePromps(p); else
|
||||
if (cl.contains("culturePopulation")) changePopulation(p); else
|
||||
if (cl.contains("icon-pin")) toggleFog(p, cl); else
|
||||
if (cl.contains("icon-trash-empty")) removeProvince(p);
|
||||
const el = ev.target,
|
||||
cl = el.classList,
|
||||
line = el.parentNode,
|
||||
p = +line.dataset.id;
|
||||
if (cl.contains("fillRect")) changeFill(el);
|
||||
else if (cl.contains("name")) editProvinceName(p);
|
||||
else if (cl.contains("coaIcon")) editEmblem("province", "provinceCOA" + p, pack.provinces[p]);
|
||||
else if (cl.contains("icon-star-empty")) capitalZoomIn(p);
|
||||
else if (cl.contains("icon-flag-empty")) triggerIndependencePromps(p);
|
||||
else if (cl.contains("culturePopulation")) changePopulation(p);
|
||||
else if (cl.contains("icon-pin")) toggleFog(p, cl);
|
||||
else if (cl.contains("icon-trash-empty")) removeProvince(p);
|
||||
});
|
||||
|
||||
body.addEventListener("change", function(ev) {
|
||||
const el = ev.target, cl = el.classList, line = el.parentNode, p = +line.dataset.id;
|
||||
body.addEventListener("change", function (ev) {
|
||||
const el = ev.target,
|
||||
cl = el.classList,
|
||||
line = el.parentNode,
|
||||
p = +line.dataset.id;
|
||||
if (cl.contains("cultureBase")) changeCapital(p, line, el.value);
|
||||
});
|
||||
|
||||
|
|
@ -59,12 +68,14 @@ function editProvinces() {
|
|||
}
|
||||
|
||||
function collectStatistics() {
|
||||
const cells = pack.cells, provinces = pack.provinces, burgs = pack.burgs;
|
||||
const cells = pack.cells,
|
||||
provinces = pack.provinces,
|
||||
burgs = pack.burgs;
|
||||
provinces.forEach(p => {
|
||||
if (!p.i || p.removed) return;
|
||||
p.area = p.rural = p.urban = 0;
|
||||
p.burgs = [];
|
||||
if (p.burg && !burgs[p.burg] || burgs[p.burg].removed) p.burg = 0;
|
||||
if ((p.burg && !burgs[p.burg]) || burgs[p.burg].removed) p.burg = 0;
|
||||
});
|
||||
|
||||
for (const i of cells.i) {
|
||||
|
|
@ -89,7 +100,7 @@ function editProvinces() {
|
|||
const selectedState = stateFilter.value || 1;
|
||||
stateFilter.options.length = 0; // remove all options
|
||||
stateFilter.options.add(new Option(`all`, -1, false, selectedState == -1));
|
||||
const statesSorted = pack.states.filter(s => s.i && !s.removed).sort((a, b) => (a.name > b.name) ? 1 : -1);
|
||||
const statesSorted = pack.states.filter(s => s.i && !s.removed).sort((a, b) => (a.name > b.name ? 1 : -1));
|
||||
statesSorted.forEach(s => stateFilter.options.add(new Option(s.name, s.i, false, s.i == selectedState)));
|
||||
}
|
||||
|
||||
|
|
@ -100,36 +111,38 @@ function editProvinces() {
|
|||
let filtered = pack.provinces.filter(p => p.i && !p.removed); // all valid burgs
|
||||
if (selectedState != -1) filtered = filtered.filter(p => p.state === selectedState); // filtered by state
|
||||
body.innerHTML = "";
|
||||
let lines = "", totalArea = 0, totalPopulation = 0;
|
||||
let lines = "",
|
||||
totalArea = 0,
|
||||
totalPopulation = 0;
|
||||
|
||||
for (const p of filtered) {
|
||||
const area = p.area * (distanceScaleInput.value ** 2);
|
||||
const area = p.area * distanceScaleInput.value ** 2;
|
||||
totalArea += area;
|
||||
const rural = p.rural * populationRate.value;
|
||||
const urban = p.urban * populationRate.value * urbanization.value;
|
||||
const rural = p.rural * populationRate;
|
||||
const urban = p.urban * populationRate * urbanization;
|
||||
const population = rn(rural + urban);
|
||||
const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}`;
|
||||
totalPopulation += population;
|
||||
|
||||
const stateName = pack.states[p.state].name;
|
||||
const capital = p.burg ? pack.burgs[p.burg].name : '';
|
||||
const capital = p.burg ? pack.burgs[p.burg].name : "";
|
||||
const separable = p.burg && p.burg !== pack.states[p.state].capital;
|
||||
const focused = defs.select("#fog #focusProvince"+p.i).size();
|
||||
COArenderer.trigger("provinceCOA"+p.i, p.coa);
|
||||
const focused = defs.select("#fog #focusProvince" + p.i).size();
|
||||
COArenderer.trigger("provinceCOA" + p.i, p.coa);
|
||||
lines += `<div class="states" data-id=${p.i} data-name="${p.name}" data-form="${p.formName}" data-color="${p.color}" data-capital="${capital}" data-state="${stateName}" data-area=${area} data-population=${population}>
|
||||
<svg data-tip="Province fill style. Click to change" width=".9em" height=".9em" style="margin-bottom:-1px"><rect x="0" y="0" width="100%" height="100%" fill="${p.color}" class="fillRect pointer"></svg>
|
||||
<input data-tip="Province name. Click to change" class="name pointer" value="${p.name}" readonly>
|
||||
<svg data-tip="Click to show and edit province emblem" class="coaIcon hide" viewBox="0 0 200 200"><use href="#provinceCOA${p.i}"></use></svg>
|
||||
<input data-tip="Province form name. Click to change" class="name pointer hide" value="${p.formName}" readonly>
|
||||
<span data-tip="Province capital. Click to zoom into view" class="icon-star-empty pointer hide ${p.burg?'':'placeholder'}"></span>
|
||||
<select data-tip="Province capital. Click to select from burgs within the state. No capital means the province is governed from the state capital" class="cultureBase hide ${p.burgs.length?'':'placeholder'}">${p.burgs.length ? getCapitalOptions(p.burgs, p.burg) : ''}</select>
|
||||
<span data-tip="Province capital. Click to zoom into view" class="icon-star-empty pointer hide ${p.burg ? "" : "placeholder"}"></span>
|
||||
<select data-tip="Province capital. Click to select from burgs within the state. No capital means the province is governed from the state capital" class="cultureBase hide ${p.burgs.length ? "" : "placeholder"}">${p.burgs.length ? getCapitalOptions(p.burgs, p.burg) : ""}</select>
|
||||
<input data-tip="Province owner" class="provinceOwner" value="${stateName}" disabled">
|
||||
<span data-tip="Province area" style="padding-right: 4px" class="icon-map-o hide"></span>
|
||||
<div data-tip="Province area" class="biomeArea hide">${si(area) + unit}</div>
|
||||
<span data-tip="${populationTip}" class="icon-male hide"></span>
|
||||
<div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
|
||||
<span data-tip="Declare province independence (turn non-capital province with burgs into a new state)" class="icon-flag-empty ${separable ? '' : 'placeholder'} hide"></span>
|
||||
<span data-tip="Toggle province focus" class="icon-pin ${focused?'':' inactive'} hide"></span>
|
||||
<span data-tip="Declare province independence (turn non-capital province with burgs into a new state)" class="icon-flag-empty ${separable ? "" : "placeholder"} hide"></span>
|
||||
<span data-tip="Toggle province focus" class="icon-pin ${focused ? "" : " inactive"} hide"></span>
|
||||
<span data-tip="Remove the province" class="icon-trash-empty hide"></span>
|
||||
</div>`;
|
||||
}
|
||||
|
|
@ -148,14 +161,17 @@ function editProvinces() {
|
|||
el.addEventListener("mouseleave", ev => provinceHighlightOff(ev));
|
||||
});
|
||||
|
||||
if (body.dataset.type === "percentage") {body.dataset.type = "absolute"; togglePercentageMode();}
|
||||
if (body.dataset.type === "percentage") {
|
||||
body.dataset.type = "absolute";
|
||||
togglePercentageMode();
|
||||
}
|
||||
applySorting(provincesHeader);
|
||||
$("#provincesEditor").dialog({width: fitContent()});
|
||||
}
|
||||
|
||||
function getCapitalOptions(burgs, capital) {
|
||||
let options = "";
|
||||
burgs.forEach(b => options += `<option ${b === capital ? "selected" : ""} value="${b}">${pack.burgs[b].name}</option>`);
|
||||
burgs.forEach(b => (options += `<option ${b === capital ? "selected" : ""} value="${b}">${pack.burgs[b].name}</option>`));
|
||||
return options;
|
||||
}
|
||||
|
||||
|
|
@ -167,7 +183,12 @@ function editProvinces() {
|
|||
if (!layerIsOn("toggleProvinces")) return;
|
||||
if (customization) return;
|
||||
const animate = d3.transition().duration(2000).ease(d3.easeSinIn);
|
||||
provs.select("#province"+province).raise().transition(animate).attr("stroke-width", 2.5).attr("stroke", "#d0240f");
|
||||
provs
|
||||
.select("#province" + province)
|
||||
.raise()
|
||||
.transition(animate)
|
||||
.attr("stroke-width", 2.5)
|
||||
.attr("stroke", "#d0240f");
|
||||
}
|
||||
|
||||
function provinceHighlightOff(event) {
|
||||
|
|
@ -176,20 +197,24 @@ function editProvinces() {
|
|||
if (el) el.classList.remove("active");
|
||||
|
||||
if (!layerIsOn("toggleProvinces")) return;
|
||||
provs.select("#province"+province).transition().attr("stroke-width", null).attr("stroke", null);
|
||||
provs
|
||||
.select("#province" + province)
|
||||
.transition()
|
||||
.attr("stroke-width", null)
|
||||
.attr("stroke", null);
|
||||
}
|
||||
|
||||
function changeFill(el) {
|
||||
const currentFill = el.getAttribute("fill");
|
||||
const p = +el.parentNode.parentNode.dataset.id;
|
||||
|
||||
const callback = function(fill) {
|
||||
const callback = function (fill) {
|
||||
el.setAttribute("fill", fill);
|
||||
pack.provinces[p].color = fill;
|
||||
const g = provs.select("#provincesBody");
|
||||
g.select("#province"+p).attr("fill", fill);
|
||||
g.select("#province-gap"+p).attr("stroke", fill);
|
||||
}
|
||||
g.select("#province" + p).attr("fill", fill);
|
||||
g.select("#province-gap" + p).attr("stroke", fill);
|
||||
};
|
||||
|
||||
openPicker(currentFill, callback);
|
||||
}
|
||||
|
|
@ -197,26 +222,36 @@ function editProvinces() {
|
|||
function capitalZoomIn(p) {
|
||||
const capital = pack.provinces[p].burg;
|
||||
const l = burgLabels.select("[data-id='" + capital + "']");
|
||||
const x = +l.attr("x"), y = +l.attr("y");
|
||||
const x = +l.attr("x"),
|
||||
y = +l.attr("y");
|
||||
zoomTo(x, y, 8, 2000);
|
||||
}
|
||||
|
||||
function triggerIndependencePromps(p) {
|
||||
alertMessage.innerHTML = "Are you sure you want to declare province independence? <br>It will turn province into a new state";
|
||||
$("#alert").dialog({resizable: false, title: "Declare independence",
|
||||
$("#alert").dialog({
|
||||
resizable: false,
|
||||
title: "Declare independence",
|
||||
buttons: {
|
||||
Declare: function() {
|
||||
Declare: function () {
|
||||
declareProvinceIndependence(p);
|
||||
$(this).dialog("close");
|
||||
},
|
||||
Cancel: function() {$(this).dialog("close");}
|
||||
Cancel: function () {
|
||||
$(this).dialog("close");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function declareProvinceIndependence(p) {
|
||||
const states = pack.states, provinces = pack.provinces, cells = pack.cells;
|
||||
if (provinces[p].burgs.some(b => pack.burgs[b].capital)) {tip("Cannot declare independence of a province having capital burg. Please change capital first", false, "error"); return;}
|
||||
const states = pack.states,
|
||||
provinces = pack.provinces,
|
||||
cells = pack.cells;
|
||||
if (provinces[p].burgs.some(b => pack.burgs[b].capital)) {
|
||||
tip("Cannot declare independence of a province having capital burg. Please change capital first", false, "error");
|
||||
return;
|
||||
}
|
||||
|
||||
const oldState = pack.provinces[p].state;
|
||||
const newState = pack.states.length;
|
||||
|
|
@ -228,7 +263,7 @@ function editProvinces() {
|
|||
moveBurgToGroup(burg, "cities");
|
||||
|
||||
// move all burgs to a new state
|
||||
provinces[p].burgs.forEach(b => pack.burgs[b].state = newState);
|
||||
provinces[p].burgs.forEach(b => (pack.burgs[b].state = newState));
|
||||
|
||||
// difine new state attributes
|
||||
const center = pack.burgs[burg].cell;
|
||||
|
|
@ -237,21 +272,24 @@ function editProvinces() {
|
|||
const color = getRandomColor();
|
||||
|
||||
const coa = provinces[p].coa;
|
||||
const coaEl = document.getElementById("provinceCOA"+p);
|
||||
if (coaEl) coaEl.id = "stateCOA"+newState;
|
||||
const coaEl = document.getElementById("provinceCOA" + p);
|
||||
if (coaEl) coaEl.id = "stateCOA" + newState;
|
||||
emblems.select(`#provinceEmblems > use[data-i='${p}']`).remove();
|
||||
|
||||
// update cells
|
||||
cells.i.filter(i => cells.province[i] === p).forEach(i => {
|
||||
cells.province[i] = 0;
|
||||
cells.state[i] = newState;
|
||||
});
|
||||
cells.i
|
||||
.filter(i => cells.province[i] === p)
|
||||
.forEach(i => {
|
||||
cells.province[i] = 0;
|
||||
cells.state[i] = newState;
|
||||
});
|
||||
|
||||
// update diplomacy and reverse relations
|
||||
const diplomacy = states.map(s => {
|
||||
if (!s.i || s.removed) return "x";
|
||||
let relations = states[oldState].diplomacy[s.i]; // relations between Nth state and old overlord
|
||||
if (s.i === oldState) relations = "Enemy"; // new state is Enemy to its old overlord
|
||||
if (s.i === oldState) relations = "Enemy";
|
||||
// new state is Enemy to its old overlord
|
||||
else if (relations === "Ally") relations = "Suspicion";
|
||||
else if (relations === "Friendly") relations = "Suspicion";
|
||||
else if (relations === "Suspicion") relations = "Neutral";
|
||||
|
|
@ -266,19 +304,21 @@ function editProvinces() {
|
|||
states[0].diplomacy.push([`Independance declaration`, `${name} declared its independance from ${states[oldState].name}`]);
|
||||
|
||||
// create new state
|
||||
states.push({i:newState, name, diplomacy, provinces:[], color, expansionism:.5, capital:burg, type:"Generic", center, culture, military:[], alert:1, coa});
|
||||
states.push({i: newState, name, diplomacy, provinces: [], color, expansionism: 0.5, capital: burg, type: "Generic", center, culture, military: [], alert: 1, coa});
|
||||
BurgsAndStates.collectStatistics();
|
||||
BurgsAndStates.defineStateForms([newState]);
|
||||
|
||||
if (layerIsOn("toggleProvinces")) toggleProvinces();
|
||||
if (!layerIsOn("toggleStates")) toggleStates(); else drawStates();
|
||||
if (!layerIsOn("toggleBorders")) toggleBorders(); else drawBorders();
|
||||
if (!layerIsOn("toggleStates")) toggleStates();
|
||||
else drawStates();
|
||||
if (!layerIsOn("toggleBorders")) toggleBorders();
|
||||
else drawBorders();
|
||||
BurgsAndStates.drawStateLabels([newState, oldState]);
|
||||
|
||||
// remove old province
|
||||
unfog("focusProvince"+p);
|
||||
unfog("focusProvince" + p);
|
||||
if (states[oldState].provinces.includes(p)) states[oldState].provinces.splice(states[oldState].provinces.indexOf(p), 1);
|
||||
provinces[p] = {i:p, removed: true};
|
||||
provinces[p] = {i: p, removed: true};
|
||||
|
||||
// draw emblem
|
||||
COArenderer.add("state", newState, coa, pack.states[newState].pole[0], pack.states[newState].pole[1]);
|
||||
|
|
@ -290,53 +330,65 @@ function editProvinces() {
|
|||
function changePopulation(province) {
|
||||
const p = pack.provinces[province];
|
||||
const cells = pack.cells.i.filter(i => pack.cells.province[i] === province);
|
||||
if (!cells.length) {tip("Province does not have any cells, cannot change population", false, "error"); return;}
|
||||
const rural = rn(p.rural * populationRate.value);
|
||||
const urban = rn(p.urban * populationRate.value * urbanization.value);
|
||||
if (!cells.length) {
|
||||
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 total = rural + urban;
|
||||
const l = n => Number(n).toLocaleString();
|
||||
|
||||
alertMessage.innerHTML = `
|
||||
Rural: <input type="number" min=0 step=1 id="ruralPop" value=${rural} style="width:6em">
|
||||
Urban: <input type="number" min=0 step=1 id="urbanPop" value=${urban} style="width:6em" ${p.burgs.length?'':"disabled"}>
|
||||
Urban: <input type="number" min=0 step=1 id="urbanPop" value=${urban} style="width:6em" ${p.burgs.length ? "" : "disabled"}>
|
||||
<p>Total population: ${l(total)} ⇒ <span id="totalPop">${l(total)}</span> (<span id="totalPopPerc">100</span>%)</p>`;
|
||||
|
||||
const update = function() {
|
||||
const update = function () {
|
||||
const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
|
||||
if (isNaN(totalNew)) return;
|
||||
totalPop.innerHTML = l(totalNew);
|
||||
totalPopPerc.innerHTML = rn(totalNew / total * 100);
|
||||
}
|
||||
totalPopPerc.innerHTML = rn((totalNew / total) * 100);
|
||||
};
|
||||
|
||||
ruralPop.oninput = () => update();
|
||||
urbanPop.oninput = () => update();
|
||||
|
||||
$("#alert").dialog({
|
||||
resizable: false, title: "Change province population", width: "24em", buttons: {
|
||||
Apply: function() {applyPopulationChange(); $(this).dialog("close");},
|
||||
Cancel: function() {$(this).dialog("close");}
|
||||
}, position: {my: "center", at: "center", of: "svg"}
|
||||
resizable: false,
|
||||
title: "Change province population",
|
||||
width: "24em",
|
||||
buttons: {
|
||||
Apply: function () {
|
||||
applyPopulationChange();
|
||||
$(this).dialog("close");
|
||||
},
|
||||
Cancel: function () {
|
||||
$(this).dialog("close");
|
||||
}
|
||||
},
|
||||
position: {my: "center", at: "center", of: "svg"}
|
||||
});
|
||||
|
||||
function applyPopulationChange() {
|
||||
const ruralChange = ruralPop.value / rural;
|
||||
if (isFinite(ruralChange) && ruralChange !== 1) {
|
||||
cells.forEach(i => pack.cells.pop[i] *= ruralChange);
|
||||
cells.forEach(i => (pack.cells.pop[i] *= ruralChange));
|
||||
}
|
||||
if (!isFinite(ruralChange) && +ruralPop.value > 0) {
|
||||
const points = ruralPop.value / populationRate.value;
|
||||
const points = ruralPop.value / populationRate;
|
||||
const pop = rn(points / cells.length);
|
||||
cells.forEach(i => pack.cells.pop[i] = pop);
|
||||
cells.forEach(i => (pack.cells.pop[i] = pop));
|
||||
}
|
||||
|
||||
const urbanChange = urbanPop.value / urban;
|
||||
if (isFinite(urbanChange) && urbanChange !== 1) {
|
||||
p.burgs.forEach(b => pack.burgs[b].population = rn(pack.burgs[b].population * urbanChange, 4));
|
||||
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.value / urbanization.value;
|
||||
const points = urbanPop.value / populationRate / urbanization;
|
||||
const population = rn(points / burgs.length, 4);
|
||||
p.burgs.forEach(b => pack.burgs[b].population = population);
|
||||
p.burgs.forEach(b => (pack.burgs[b].population = population));
|
||||
}
|
||||
|
||||
refreshProvincesEditor();
|
||||
|
|
@ -344,23 +396,27 @@ function editProvinces() {
|
|||
}
|
||||
|
||||
function toggleFog(p, cl) {
|
||||
const path = provs.select("#province"+p).attr("d"), id = "focusProvince"+p;
|
||||
const path = provs.select("#province" + p).attr("d"),
|
||||
id = "focusProvince" + p;
|
||||
cl.contains("inactive") ? fog(id, path) : unfog(id);
|
||||
cl.toggle("inactive");
|
||||
}
|
||||
|
||||
function removeProvince(p) {
|
||||
alertMessage.innerHTML = `Are you sure you want to remove the province? <br>This action cannot be reverted`;
|
||||
$("#alert").dialog({resizable: false, title: "Remove province",
|
||||
$("#alert").dialog({
|
||||
resizable: false,
|
||||
title: "Remove province",
|
||||
buttons: {
|
||||
Remove: function() {
|
||||
Remove: function () {
|
||||
pack.cells.province.forEach((province, i) => {
|
||||
if(province === p) pack.cells.province[i] = 0;
|
||||
if (province === p) pack.cells.province[i] = 0;
|
||||
});
|
||||
const s = pack.provinces[p].state, state = pack.states[s];
|
||||
const s = pack.provinces[p].state,
|
||||
state = pack.states[s];
|
||||
if (state.provinces.includes(p)) state.provinces.splice(state.provinces.indexOf(p), 1);
|
||||
|
||||
unfog("focusProvince"+p);
|
||||
unfog("focusProvince" + p);
|
||||
|
||||
const coaId = "provinceCOA" + p;
|
||||
if (document.getElementById(coaId)) document.getElementById(coaId).remove();
|
||||
|
|
@ -369,13 +425,16 @@ function editProvinces() {
|
|||
pack.provinces[p] = {i: p, removed: true};
|
||||
|
||||
const g = provs.select("#provincesBody");
|
||||
g.select("#province"+p).remove();
|
||||
g.select("#province-gap"+p).remove();
|
||||
if (!layerIsOn("toggleBorders")) toggleBorders(); else drawBorders();
|
||||
g.select("#province" + p).remove();
|
||||
g.select("#province-gap" + p).remove();
|
||||
if (!layerIsOn("toggleBorders")) toggleBorders();
|
||||
else drawBorders();
|
||||
refreshProvincesEditor();
|
||||
$(this).dialog("close");
|
||||
},
|
||||
Cancel: function() {$(this).dialog("close");}
|
||||
Cancel: function () {
|
||||
$(this).dialog("close");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -384,14 +443,22 @@ function editProvinces() {
|
|||
const p = pack.provinces[province];
|
||||
document.getElementById("provinceNameEditor").dataset.province = province;
|
||||
document.getElementById("provinceNameEditorShort").value = p.name;
|
||||
applyOption(provinceNameEditorSelectForm, p.formName)
|
||||
applyOption(provinceNameEditorSelectForm, p.formName);
|
||||
document.getElementById("provinceNameEditorFull").value = p.fullName;
|
||||
|
||||
$("#provinceNameEditor").dialog({
|
||||
resizable: false, title: "Change province name", buttons: {
|
||||
Apply: function() {applyNameChange(p); $(this).dialog("close");},
|
||||
Cancel: function() {$(this).dialog("close");}
|
||||
}, position: {my: "center", at: "center", of: "svg"}
|
||||
resizable: false,
|
||||
title: "Change province name",
|
||||
buttons: {
|
||||
Apply: function () {
|
||||
applyNameChange(p);
|
||||
$(this).dialog("close");
|
||||
},
|
||||
Cancel: function () {
|
||||
$(this).dialog("close");
|
||||
}
|
||||
},
|
||||
position: {my: "center", at: "center", of: "svg"}
|
||||
});
|
||||
|
||||
if (modules.editProvinceName) return;
|
||||
|
|
@ -411,7 +478,7 @@ function editProvinces() {
|
|||
}
|
||||
|
||||
function regenerateShortNameRandom() {
|
||||
const base = rand(nameBases.length-1);
|
||||
const base = rand(nameBases.length - 1);
|
||||
const name = Names.getState(Names.getBase(base), undefined, base);
|
||||
document.getElementById("provinceNameEditorShort").value = name;
|
||||
}
|
||||
|
|
@ -440,7 +507,7 @@ function editProvinces() {
|
|||
p.name = document.getElementById("provinceNameEditorShort").value;
|
||||
p.formName = document.getElementById("provinceNameEditorSelectForm").value;
|
||||
p.fullName = document.getElementById("provinceNameEditorFull").value;
|
||||
provs.select("#provinceLabel"+p.i).text(p.name);
|
||||
provs.select("#provinceLabel" + p.i).text(p.name);
|
||||
refreshProvincesEditor();
|
||||
}
|
||||
}
|
||||
|
|
@ -457,9 +524,9 @@ function editProvinces() {
|
|||
const totalArea = +provincesFooterArea.dataset.area;
|
||||
const totalPopulation = +provincesFooterPopulation.dataset.population;
|
||||
|
||||
body.querySelectorAll(":scope > div").forEach(function(el) {
|
||||
el.querySelector(".biomeArea").innerHTML = rn(+el.dataset.area / totalArea * 100) + "%";
|
||||
el.querySelector(".culturePopulation").innerHTML = rn(+el.dataset.population / totalPopulation * 100) + "%";
|
||||
body.querySelectorAll(":scope > div").forEach(function (el) {
|
||||
el.querySelector(".biomeArea").innerHTML = rn((+el.dataset.area / totalArea) * 100) + "%";
|
||||
el.querySelector(".culturePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%";
|
||||
});
|
||||
} else {
|
||||
body.dataset.type = "absolute";
|
||||
|
|
@ -469,16 +536,21 @@ function editProvinces() {
|
|||
|
||||
function showChart() {
|
||||
// build hierarchy tree
|
||||
const getColor = (s) => !s.i || s.removed || s.color[0] !== "#" ? "#666" : d3.color(s.color).darker();
|
||||
const getColor = s => (!s.i || s.removed || s.color[0] !== "#" ? "#666" : d3.color(s.color).darker());
|
||||
const states = pack.states.map(s => ({id: s.i, state: s.i ? 0 : null, color: getColor(s)}));
|
||||
const provinces = pack.provinces.filter(p => p.i && !p.removed).map(p => {
|
||||
return {id:p.i+states.length-1, i:p.i, state:p.state, color:p.color,
|
||||
name:p.name, fullName:p.fullName, area:p.area, urban:p.urban, rural:p.rural}
|
||||
});
|
||||
const provinces = pack.provinces
|
||||
.filter(p => p.i && !p.removed)
|
||||
.map(p => {
|
||||
return {id: p.i + states.length - 1, i: p.i, state: p.state, color: p.color, name: p.name, fullName: p.fullName, area: p.area, urban: p.urban, rural: p.rural};
|
||||
});
|
||||
const data = states.concat(provinces);
|
||||
const root = d3.stratify().parentId(d => d.state)(data).sum(d => d.area);
|
||||
const root = d3
|
||||
.stratify()
|
||||
.parentId(d => d.state)(data)
|
||||
.sum(d => d.area);
|
||||
|
||||
const width = 300 + 300 * uiSizeOutput.value, height = 90 + 90 * uiSizeOutput.value;
|
||||
const width = 300 + 300 * uiSizeOutput.value,
|
||||
height = 90 + 90 * uiSizeOutput.value;
|
||||
const margin = {top: 10, right: 10, bottom: 0, left: 10};
|
||||
const w = width - margin.left - margin.right;
|
||||
const h = height - margin.top - margin.bottom;
|
||||
|
|
@ -492,15 +564,18 @@ function editProvinces() {
|
|||
<option value="urban">Urban population</option>
|
||||
</select>`;
|
||||
alertMessage.innerHTML += `<div id='provinceInfo' class='chartInfo'>‍</div>`;
|
||||
const svg = d3.select("#alertMessage").insert("svg", "#provinceInfo").attr("id", "provincesTree")
|
||||
.attr("width", width).attr("height", height).attr("font-size", "10px");
|
||||
const svg = d3.select("#alertMessage").insert("svg", "#provinceInfo").attr("id", "provincesTree").attr("width", width).attr("height", height).attr("font-size", "10px");
|
||||
const graph = svg.append("g").attr("transform", `translate(10, 0)`);
|
||||
document.getElementById("provincesTreeType").addEventListener("change", updateChart);
|
||||
|
||||
treeLayout(root);
|
||||
|
||||
const node = graph.selectAll("g").data(root.leaves()).enter()
|
||||
.append("g").attr("data-id", d => d.data.i)
|
||||
const node = graph
|
||||
.selectAll("g")
|
||||
.data(root.leaves())
|
||||
.enter()
|
||||
.append("g")
|
||||
.attr("data-id", d => d.data.i)
|
||||
.on("mouseenter", d => showInfo(event, d))
|
||||
.on("mouseleave", d => hideInfo(event, d));
|
||||
|
||||
|
|
@ -510,14 +585,11 @@ function editProvinces() {
|
|||
const state = pack.states[d.data.state].fullName;
|
||||
|
||||
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
|
||||
const area = d.data.area * (distanceScaleInput.value ** 2) + unit;
|
||||
const rural = rn(d.data.rural * populationRate.value);
|
||||
const urban = rn(d.data.urban * populationRate.value * urbanization.value);
|
||||
const area = d.data.area * distanceScaleInput.value ** 2 + unit;
|
||||
const rural = rn(d.data.rural * populationRate);
|
||||
const urban = rn(d.data.urban * populationRate * urbanization);
|
||||
|
||||
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 value = provincesTreeType.value === "area" ? "Area: " + area : provincesTreeType.value === "rural" ? "Rural population: " + si(rural) : provincesTreeType.value === "urban" ? "Urban population: " + si(urban) : "Population: " + si(rural + urban);
|
||||
|
||||
provinceInfo.innerHTML = `${name}. ${state}. ${value}`;
|
||||
provinceHighlightOn(ev);
|
||||
|
|
@ -530,52 +602,73 @@ function editProvinces() {
|
|||
d3.select(ev.target).select("rect").classed("selected", 0);
|
||||
}
|
||||
|
||||
node.append("rect").attr("stroke", d => d.parent.data.color)
|
||||
.attr("stroke-width", 1).attr("fill", d => d.data.color)
|
||||
.attr("x", d => d.x0).attr("y", d => d.y0)
|
||||
.attr("width", d => d.x1 - d.x0).attr("height", d => d.y1 - d.y0);
|
||||
node
|
||||
.append("rect")
|
||||
.attr("stroke", d => d.parent.data.color)
|
||||
.attr("stroke-width", 1)
|
||||
.attr("fill", d => d.data.color)
|
||||
.attr("x", d => d.x0)
|
||||
.attr("y", d => d.y0)
|
||||
.attr("width", d => d.x1 - d.x0)
|
||||
.attr("height", d => d.y1 - d.y0);
|
||||
|
||||
node.append("text").attr("dx", ".2em").attr("dy", "1em")
|
||||
.attr("x", d => d.x0).attr("y", d => d.y0);
|
||||
node
|
||||
.append("text")
|
||||
.attr("dx", ".2em")
|
||||
.attr("dy", "1em")
|
||||
.attr("x", d => d.x0)
|
||||
.attr("y", d => d.y0);
|
||||
|
||||
function hideNonfittingLabels() {
|
||||
node.select("text").each(function(d) {
|
||||
node.select("text").each(function (d) {
|
||||
this.innerHTML = d.data.name;
|
||||
let b = this.getBBox();
|
||||
if (b.y + b.height > d.y1 + 1) this.innerHTML = "";
|
||||
|
||||
for(let i=0; i < 15 && b.width > 0 && b.x + b.width > d.x1; i++) {
|
||||
if (this.innerHTML.length < 3) {this.innerHTML = ""; break;}
|
||||
for (let i = 0; i < 15 && b.width > 0 && b.x + b.width > d.x1; i++) {
|
||||
if (this.innerHTML.length < 3) {
|
||||
this.innerHTML = "";
|
||||
break;
|
||||
}
|
||||
this.innerHTML = this.innerHTML.slice(0, -2) + "…";
|
||||
b = this.getBBox();
|
||||
}
|
||||
})
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function updateChart() {
|
||||
const value = this.value === "area" ? d => d.area
|
||||
: this.value === "rural" ? d => d.rural
|
||||
: this.value === "urban" ? d => d.urban
|
||||
: d => d.rural + d.urban;
|
||||
const value = this.value === "area" ? d => d.area : this.value === "rural" ? d => d.rural : this.value === "urban" ? d => d.urban : d => d.rural + d.urban;
|
||||
|
||||
root.sum(value);
|
||||
node.data(treeLayout(root).leaves());
|
||||
|
||||
node.select("rect").transition().duration(1500)
|
||||
.attr("x", d => d.x0).attr("y", d => d.y0)
|
||||
.attr("width", d => d.x1 - d.x0).attr("height", d => d.y1 - d.y0);
|
||||
node
|
||||
.select("rect")
|
||||
.transition()
|
||||
.duration(1500)
|
||||
.attr("x", d => d.x0)
|
||||
.attr("y", d => d.y0)
|
||||
.attr("width", d => d.x1 - d.x0)
|
||||
.attr("height", d => d.y1 - d.y0);
|
||||
|
||||
node.select("text").transition().duration(1500)
|
||||
.attr("x", d => d.x0).attr("y", d => d.y0);
|
||||
node
|
||||
.select("text")
|
||||
.transition()
|
||||
.duration(1500)
|
||||
.attr("x", d => d.x0)
|
||||
.attr("y", d => d.y0);
|
||||
|
||||
setTimeout(hideNonfittingLabels, 2000);
|
||||
}
|
||||
|
||||
$("#alert").dialog({
|
||||
title: "Provinces chart", width: fitContent(),
|
||||
position: {my: "left bottom", at: "left+10 bottom-10", of: "svg"}, buttons: {},
|
||||
close: () => {alertMessage.innerHTML = "";}
|
||||
title: "Provinces chart",
|
||||
width: fitContent(),
|
||||
position: {my: "left bottom", at: "left+10 bottom-10", of: "svg"},
|
||||
buttons: {},
|
||||
close: () => {
|
||||
alertMessage.innerHTML = "";
|
||||
}
|
||||
});
|
||||
|
||||
hideNonfittingLabels();
|
||||
|
|
@ -593,28 +686,24 @@ function editProvinces() {
|
|||
if (!layerIsOn("toggleBorders")) toggleBorders();
|
||||
|
||||
// make province and state borders more visible
|
||||
provinceBorders.select("path").attr("stroke", "#000").attr("stroke-width", .5);
|
||||
provinceBorders.select("path").attr("stroke", "#000").attr("stroke-width", 0.5);
|
||||
stateBorders.select("path").attr("stroke", "#000").attr("stroke-width", 1.2);
|
||||
|
||||
customization = 11;
|
||||
provs.select("g#provincesBody").append("g").attr("id", "temp");
|
||||
provs.select("g#provincesBody").append("g").attr("id", "centers")
|
||||
.attr("fill", "none").attr("stroke", "#ff0000").attr("stroke-width", 1);
|
||||
provs.select("g#provincesBody").append("g").attr("id", "centers").attr("fill", "none").attr("stroke", "#ff0000").attr("stroke-width", 1);
|
||||
|
||||
document.querySelectorAll("#provincesBottom > *").forEach(el => el.style.display = "none");
|
||||
document.querySelectorAll("#provincesBottom > *").forEach(el => (el.style.display = "none"));
|
||||
document.getElementById("provincesManuallyButtons").style.display = "inline-block";
|
||||
|
||||
provincesEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden"));
|
||||
provincesHeader.querySelector("div[data-sortby='state']").style.left = "7.7em";
|
||||
provincesFooter.style.display = "none";
|
||||
body.querySelectorAll("div > input, select, span, svg").forEach(e => e.style.pointerEvents = "none");
|
||||
body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
|
||||
$("#provincesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
|
||||
|
||||
tip("Click on a province to select, drag the circle to change province", true);
|
||||
viewbox.style("cursor", "crosshair")
|
||||
.on("click", selectProvinceOnMapClick)
|
||||
.call(d3.drag().on("start", dragBrush))
|
||||
.on("touchmove mousemove", moveBrush);
|
||||
viewbox.style("cursor", "crosshair").on("click", selectProvinceOnMapClick).call(d3.drag().on("start", dragBrush)).on("touchmove mousemove", moveBrush);
|
||||
|
||||
body.querySelector("div").classList.add("selected");
|
||||
selectProvince(+body.querySelector("div").dataset.id);
|
||||
|
|
@ -633,11 +722,14 @@ function editProvinces() {
|
|||
const i = findCell(point[0], point[1]);
|
||||
if (pack.cells.h[i] < 20 || !pack.cells.state[i]) return;
|
||||
|
||||
const assigned = provs.select("g#temp").select("polygon[data-cell='"+i+"']");
|
||||
const assigned = provs.select("g#temp").select("polygon[data-cell='" + i + "']");
|
||||
const province = assigned.size() ? +assigned.attr("data-province") : pack.cells.province[i];
|
||||
|
||||
const editorLine = body.querySelector("div[data-id='"+province+"']");
|
||||
if (!editorLine) {tip("You cannot select a province if it is not in the Editor list", false, "error"); return;}
|
||||
const editorLine = body.querySelector("div[data-id='" + province + "']");
|
||||
if (!editorLine) {
|
||||
tip("You cannot select a province if it is not in the Editor list", false, "error");
|
||||
return;
|
||||
}
|
||||
|
||||
body.querySelector("div.selected").classList.remove("selected");
|
||||
editorLine.classList.add("selected");
|
||||
|
|
@ -646,7 +738,7 @@ function editProvinces() {
|
|||
|
||||
function selectProvince(p) {
|
||||
debug.selectAll("path.selected").remove();
|
||||
const path = provs.select("#province"+p).attr("d");
|
||||
const path = provs.select("#province" + p).attr("d");
|
||||
debug.append("path").attr("class", "selected").attr("d", path);
|
||||
}
|
||||
|
||||
|
|
@ -666,7 +758,8 @@ function editProvinces() {
|
|||
|
||||
// change province within selection
|
||||
function changeForSelection(selection) {
|
||||
const temp = provs.select("#temp"), centers = provs.select("#centers");
|
||||
const temp = provs.select("#temp"),
|
||||
centers = provs.select("#centers");
|
||||
const selected = body.querySelector("div.selected");
|
||||
|
||||
const provinceNew = +selected.dataset.id;
|
||||
|
|
@ -675,13 +768,13 @@ function editProvinces() {
|
|||
|
||||
selection.forEach(i => {
|
||||
if (!pack.cells.state[i] || pack.cells.state[i] !== state) return;
|
||||
const exists = temp.select("polygon[data-cell='"+i+"']");
|
||||
const exists = temp.select("polygon[data-cell='" + i + "']");
|
||||
const provinceOld = exists.size() ? +exists.attr("data-province") : pack.cells.province[i];
|
||||
if (provinceNew === provinceOld) return;
|
||||
if (i === pack.provinces[provinceOld].center) {
|
||||
const center = centers.select("polygon[data-center='"+i+"']");
|
||||
const center = centers.select("polygon[data-center='" + i + "']");
|
||||
if (!center.size()) centers.append("polygon").attr("data-center", i).attr("points", getPackPolygon(i));
|
||||
tip("Province center cannot be assigned to a different region. Please remove the province first", false, "error");
|
||||
tip("Province center cannot be assigned to a different region. Please remove the province first", false, "error");
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -690,9 +783,7 @@ function editProvinces() {
|
|||
if (pack.cells.province[i] === provinceNew) exists.remove();
|
||||
else exists.attr("data-province", provinceNew).attr("fill", fill);
|
||||
} else {
|
||||
temp.append("polygon").attr("points", getPackPolygon(i))
|
||||
.attr("data-cell", i).attr("data-province", provinceNew)
|
||||
.attr("fill", fill).attr("stroke", "#555");
|
||||
temp.append("polygon").attr("points", getPackPolygon(i)).attr("data-cell", i).attr("data-province", provinceNew).attr("fill", fill).attr("stroke", "#555");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -705,13 +796,18 @@ function editProvinces() {
|
|||
}
|
||||
|
||||
function applyProvincesManualAssignent() {
|
||||
provs.select("#temp").selectAll("polygon").each(function() {
|
||||
const i = +this.dataset.cell;
|
||||
pack.cells.province[i] = +this.dataset.province;;
|
||||
});
|
||||
provs
|
||||
.select("#temp")
|
||||
.selectAll("polygon")
|
||||
.each(function () {
|
||||
const i = +this.dataset.cell;
|
||||
pack.cells.province[i] = +this.dataset.province;
|
||||
});
|
||||
|
||||
if (!layerIsOn("toggleBorders")) toggleBorders(); else drawBorders();
|
||||
if (!layerIsOn("toggleProvinces")) toggleProvinces(); else drawProvinces();
|
||||
if (!layerIsOn("toggleBorders")) toggleBorders();
|
||||
else drawBorders();
|
||||
if (!layerIsOn("toggleProvinces")) toggleProvinces();
|
||||
else drawProvinces();
|
||||
exitProvincesManualAssignment();
|
||||
refreshProvincesEditor();
|
||||
}
|
||||
|
|
@ -727,14 +823,14 @@ function editProvinces() {
|
|||
stateBorders.select("path").attr("stroke", null).attr("stroke-width", null);
|
||||
debug.selectAll("path.selected").remove();
|
||||
|
||||
document.querySelectorAll("#provincesBottom > *").forEach(el => el.style.display = "inline-block");
|
||||
document.querySelectorAll("#provincesBottom > *").forEach(el => (el.style.display = "inline-block"));
|
||||
document.getElementById("provincesManuallyButtons").style.display = "none";
|
||||
|
||||
provincesEditor.querySelectorAll(".hide:not(.show)").forEach(el => el.classList.remove("hidden"));
|
||||
provincesHeader.querySelector("div[data-sortby='state']").style.left = "22em";
|
||||
provincesFooter.style.display = "block";
|
||||
body.querySelectorAll("div > input, select, span, svg").forEach(e => e.style.pointerEvents = "all");
|
||||
if(!close) $("#provincesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
|
||||
body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
|
||||
if (!close) $("#provincesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
|
||||
|
||||
restoreDefaultEvents();
|
||||
clearMainTip();
|
||||
|
|
@ -743,23 +839,36 @@ function editProvinces() {
|
|||
}
|
||||
|
||||
function enterAddProvinceMode() {
|
||||
if (this.classList.contains("pressed")) {exitAddProvinceMode(); return;};
|
||||
if (this.classList.contains("pressed")) {
|
||||
exitAddProvinceMode();
|
||||
return;
|
||||
}
|
||||
customization = 12;
|
||||
this.classList.add("pressed");
|
||||
tip("Click on the map to place a new province center", true);
|
||||
viewbox.style("cursor", "crosshair").on("click", addProvince);
|
||||
body.querySelectorAll("div > input, select, span, svg").forEach(e => e.style.pointerEvents = "none");
|
||||
body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
|
||||
}
|
||||
|
||||
function addProvince() {
|
||||
const cells = pack.cells, provinces = pack.provinces;
|
||||
const cells = pack.cells,
|
||||
provinces = pack.provinces;
|
||||
const point = d3.mouse(this);
|
||||
const center = findCell(point[0], point[1]);
|
||||
if (cells.h[center] < 20) {tip("You cannot place province into the water. Please click on a land cell", false, "error"); return;}
|
||||
if (cells.h[center] < 20) {
|
||||
tip("You cannot place province into the water. Please click on a land cell", false, "error");
|
||||
return;
|
||||
}
|
||||
const oldProvince = cells.province[center];
|
||||
if (oldProvince && provinces[oldProvince].center === center) {tip("The cell is already a center of a different province. Select other cell", false, "error"); return;}
|
||||
if (oldProvince && provinces[oldProvince].center === center) {
|
||||
tip("The cell is already a center of a different province. Select other cell", false, "error");
|
||||
return;
|
||||
}
|
||||
const state = cells.state[center];
|
||||
if (!state) {tip("You cannot create a province in neutral lands. Please assign this land to a state first", false, "error"); return;}
|
||||
if (!state) {
|
||||
tip("You cannot create a province in neutral lands. Please assign this land to a state first", false, "error");
|
||||
return;
|
||||
}
|
||||
|
||||
if (d3.event.shiftKey === false) exitAddProvinceMode();
|
||||
|
||||
|
|
@ -770,18 +879,19 @@ function editProvinces() {
|
|||
const name = burg ? pack.burgs[burg].name : Names.getState(Names.getCultureShort(c), c);
|
||||
const formName = oldProvince ? provinces[oldProvince].formName : "Province";
|
||||
const fullName = name + " " + formName;
|
||||
const stateColor = pack.states[state].color, rndColor = getRandomColor();
|
||||
const color = stateColor[0] === "#" ? d3.color(d3.interpolate(stateColor, rndColor)(.2)).hex() : rndColor;
|
||||
const stateColor = pack.states[state].color,
|
||||
rndColor = getRandomColor();
|
||||
const color = stateColor[0] === "#" ? d3.color(d3.interpolate(stateColor, rndColor)(0.2)).hex() : rndColor;
|
||||
|
||||
// generate emblem
|
||||
const kinship = burg ? .8 : .4;
|
||||
const kinship = burg ? 0.8 : 0.4;
|
||||
const parent = burg ? pack.burgs[burg].coa : pack.states[state].coa;
|
||||
const type = BurgsAndStates.getType(center, parent.port);
|
||||
const coa = COA.generate(parent, kinship, P(.1), type);
|
||||
const coa = COA.generate(parent, kinship, P(0.1), type);
|
||||
coa.shield = COA.getShield(c, state);
|
||||
COArenderer.add("province", province, coa, point[0], point[1]);
|
||||
|
||||
provinces.push({i:province, state, center, burg, name, formName, fullName, color, coa});
|
||||
provinces.push({i: province, state, center, burg, name, formName, fullName, color, coa});
|
||||
|
||||
cells.province[center] = province;
|
||||
cells.c[center].forEach(c => {
|
||||
|
|
@ -790,8 +900,10 @@ function editProvinces() {
|
|||
cells.province[c] = province;
|
||||
});
|
||||
|
||||
if (!layerIsOn("toggleBorders")) toggleBorders(); else drawBorders();
|
||||
if (!layerIsOn("toggleProvinces")) toggleProvinces(); else drawProvinces();
|
||||
if (!layerIsOn("toggleBorders")) toggleBorders();
|
||||
else drawBorders();
|
||||
if (!layerIsOn("toggleProvinces")) toggleProvinces();
|
||||
else drawProvinces();
|
||||
collectStatistics();
|
||||
document.getElementById("provincesFilterState").value = state;
|
||||
provincesEditorAddLines();
|
||||
|
|
@ -801,7 +913,7 @@ function editProvinces() {
|
|||
customization = 0;
|
||||
restoreDefaultEvents();
|
||||
clearMainTip();
|
||||
body.querySelectorAll("div > input, select, span, svg").forEach(e => e.style.pointerEvents = "all");
|
||||
body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
|
||||
if (provincesAdd.classList.contains("pressed")) provincesAdd.classList.remove("pressed");
|
||||
}
|
||||
|
||||
|
|
@ -813,18 +925,19 @@ function editProvinces() {
|
|||
if (state !== -1 && p.state !== state) return;
|
||||
const stateColor = pack.states[p.state].color;
|
||||
const rndColor = getRandomColor();
|
||||
p.color = stateColor[0] === "#" ? d3.color(d3.interpolate(stateColor, rndColor)(.2)).hex() : rndColor;
|
||||
p.color = stateColor[0] === "#" ? d3.color(d3.interpolate(stateColor, rndColor)(0.2)).hex() : rndColor;
|
||||
});
|
||||
|
||||
if (!layerIsOn("toggleProvinces")) toggleProvinces(); else drawProvinces();
|
||||
if (!layerIsOn("toggleProvinces")) toggleProvinces();
|
||||
else drawProvinces();
|
||||
}
|
||||
|
||||
function downloadProvincesData() {
|
||||
const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value;
|
||||
let data = "Id,Province,Form,State,Color,Capital,Area "+unit+",Total Population,Rural Population,Urban Population\n"; // headers
|
||||
let data = "Id,Province,Form,State,Color,Capital,Area " + unit + ",Total Population,Rural Population,Urban Population\n"; // headers
|
||||
|
||||
body.querySelectorAll(":scope > div").forEach(function(el) {
|
||||
let key = parseInt(el.dataset.id)
|
||||
body.querySelectorAll(":scope > div").forEach(function (el) {
|
||||
let key = parseInt(el.dataset.id);
|
||||
data += el.dataset.id + ",";
|
||||
data += el.dataset.name + ",";
|
||||
data += el.dataset.form + ",";
|
||||
|
|
@ -833,8 +946,8 @@ function editProvinces() {
|
|||
data += el.dataset.capital + ",";
|
||||
data += el.dataset.area + ",";
|
||||
data += el.dataset.population + ",";
|
||||
data += `${Math.round(pack.provinces[key].rural*populationRate.value)},`
|
||||
data += `${Math.round(pack.provinces[key].urban*populationRate.value * urbanization.value)}\n`
|
||||
data += `${Math.round(pack.provinces[key].rural * populationRate)},`;
|
||||
data += `${Math.round(pack.provinces[key].urban * populationRate * urbanization)}\n`;
|
||||
});
|
||||
|
||||
const name = getFileName("Provinces") + ".csv";
|
||||
|
|
@ -843,9 +956,11 @@ function editProvinces() {
|
|||
|
||||
function removeAllProvinces() {
|
||||
alertMessage.innerHTML = `Are you sure you want to remove all provinces? <br>This action cannot be reverted`;
|
||||
$("#alert").dialog({resizable: false, title: "Remove all provinces",
|
||||
$("#alert").dialog({
|
||||
resizable: false,
|
||||
title: "Remove all provinces",
|
||||
buttons: {
|
||||
Remove: function() {
|
||||
Remove: function () {
|
||||
$(this).dialog("close");
|
||||
|
||||
// remove emblems
|
||||
|
|
@ -855,26 +970,30 @@ function editProvinces() {
|
|||
// remove data
|
||||
pack.provinces = [0];
|
||||
pack.cells.province = new Uint16Array(pack.cells.i.length);
|
||||
pack.states.forEach(s => s.provinces = []);
|
||||
pack.states.forEach(s => (s.provinces = []));
|
||||
|
||||
unfog();
|
||||
if (!layerIsOn("toggleBorders")) toggleBorders(); else drawBorders();
|
||||
if (!layerIsOn("toggleBorders")) toggleBorders();
|
||||
else drawBorders();
|
||||
provs.select("#provincesBody").remove();
|
||||
turnButtonOff("toggleProvinces");
|
||||
|
||||
provincesEditorAddLines();
|
||||
},
|
||||
Cancel: function() {$(this).dialog("close");}
|
||||
Cancel: function () {
|
||||
$(this).dialog("close");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function dragLabel() {
|
||||
const tr = parseTransform(this.getAttribute("transform"));
|
||||
const x = +tr[0] - d3.event.x, y = +tr[1] - d3.event.y;
|
||||
const x = +tr[0] - d3.event.x,
|
||||
y = +tr[1] - d3.event.y;
|
||||
|
||||
d3.event.on("drag", function() {
|
||||
const transform = `translate(${(x + d3.event.x)},${(y + d3.event.y)})`;
|
||||
d3.event.on("drag", function () {
|
||||
const transform = `translate(${x + d3.event.x},${y + d3.event.y})`;
|
||||
this.setAttribute("transform", transform);
|
||||
});
|
||||
}
|
||||
|
|
@ -884,6 +1003,4 @@ function editProvinces() {
|
|||
if (customization === 11) exitProvincesManualAssignment("close");
|
||||
if (customization === 12) exitAddProvinceMode();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue