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

store populationRate and urbanization in memory

Browse source
This commit is contained in:
Azgaar 2021-06-27 14:24:55 +03:00
parent 3892370816
commit 5ed08e156a
19 changed files with 2870 additions and 1552 deletions
Download patch file Download diff file Expand all files Collapse all files

8
index.html
View file

@ -3114,14 +3114,14 @@
<div data-tip="Set how many people are in one population point"> <div data-tip="Set how many people are in one population point">
<div>1 population point =</div> <div>1 population point =</div>
<input id="populationRateOutput" type="range" min=10 max=9990 step=10 value=1000 style="width:6em"> <input id="populationRateOutput" data-stored="populationRate" type="range" min=10 max=9990 step=10 value=1000 style="width:6em">
<input id="populationRate" data-stored="populationRate" type="number" min=10 max=9990 step=10 value=1000 data-value=1000 style="width:4.5em"> <input id="populationRateInput" data-stored="populationRate" type="number" min=10 max=9990 step=10 value=1000 style="width:4.5em">
</div> </div>
<div data-tip="Set urbanization rate: burgs population relative to all population"> <div data-tip="Set urbanization rate: burgs population relative to all population">
<div>Urbanization rate:</div> <div>Urbanization rate:</div>
<input id="urbanizationOutput" type="range" min=.01 max=5 step=.01 value=1> <input id="urbanizationOutput" data-stored="urbanization" type="range" min=.01 max=5 step=.01 value=1 >
<input id="urbanization" data-stored="urbanization" type="number" min=.01 max=5 step=.01 value=1 data-value=1> <input id="urbanizationInput" data-stored="urbanization" type="number" min=.01 max=5 step=.01 value=1 >
</div> </div>
</div> </div>

5
main.js
View file

@ -137,6 +137,9 @@ let options = {pinNotes: false}; // options object
let mapCoordinates = {}; // map coordinates on globe let mapCoordinates = {}; // map coordinates on globe
options.winds = [225, 45, 225, 315, 135, 315]; // default wind directions options.winds = [225, 45, 225, 315, 135, 315]; // default wind directions
let populationRate = +document.getElementById("populationRateInput").value;
let urbanization = +document.getElementById("urbanizationInput").value;
applyStoredOptions(); applyStoredOptions();
let graphWidth = +mapWidthInput.value, let graphWidth = +mapWidthInput.value,
graphHeight = +mapHeightInput.value; // voronoi graph extention, cannot be changed arter generation graphHeight = +mapHeightInput.value; // voronoi graph extention, cannot be changed arter generation
@ -1480,7 +1483,7 @@ function addMarkers(number = 1) {
const resource = rw(resources); const resource = rw(resources);
const burg = pack.burgs[cells.burg[cell]]; const burg = pack.burgs[cells.burg[cell]];
const name = `${burg.name} — ${resource} mining town`; const name = `${burg.name} — ${resource} mining town`;
const population = rn(burg.population * populationRate.value * urbanization.value); const population = rn(burg.population * populationRate * urbanization);
const legend = `${burg.name} is a mining town of ${population} people just nearby the ${resource} mine`; const legend = `${burg.name} is a mining town of ${population} people just nearby the ${resource} mine`;
notes.push({id, name, legend}); notes.push({id, name, legend});
count--; count--;

4
modules/load.js
View file

@ -131,8 +131,8 @@ function parseLoadedData(data) {
if (settings[9]) barBackColor.value = settings[9]; if (settings[9]) barBackColor.value = settings[9];
if (settings[10]) barPosX.value = settings[10]; if (settings[10]) barPosX.value = settings[10];
if (settings[11]) barPosY.value = settings[11]; if (settings[11]) barPosY.value = settings[11];
if (settings[12]) populationRate.value = populationRateOutput.value = settings[12]; if (settings[12]) populationRate = populationRateInput.value = populationRateOutput.value = settings[12];
if (settings[13]) urbanization.value = urbanizationOutput.value = settings[13]; if (settings[13]) urbanization = urbanizationInput.value = urbanizationOutput.value = settings[13];
if (settings[14]) mapSizeInput.value = mapSizeOutput.value = Math.max(Math.min(settings[14], 100), 1); if (settings[14]) mapSizeInput.value = mapSizeOutput.value = Math.max(Math.min(settings[14], 100), 1);
if (settings[15]) latitudeInput.value = latitudeOutput.value = Math.max(Math.min(settings[15], 100), 0); if (settings[15]) latitudeInput.value = latitudeOutput.value = Math.max(Math.min(settings[15], 100), 0);
if (settings[16]) temperatureEquatorInput.value = temperatureEquatorOutput.value = settings[16]; if (settings[16]) temperatureEquatorInput.value = temperatureEquatorOutput.value = settings[16];

300
modules/military-generator.js
View file

@ -1,60 +1,67 @@
(function (global, factory) { (function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof exports === "object" && typeof module !== "undefined" ? (module.exports = factory()) : typeof define === "function" && define.amd ? define(factory) : (global.Military = factory());
typeof define === 'function' && define.amd ? define(factory) : })(this, function () {
(global.Military = factory()); "use strict";
}(this, (function () {'use strict';
const generate = function() { const generate = function () {
TIME && console.time("generateMilitaryForces"); TIME && console.time("generateMilitaryForces");
const cells = pack.cells, p = cells.p, states = pack.states; const cells = pack.cells,
p = cells.p,
states = pack.states;
const valid = states.filter(s => s.i && !s.removed); // valid states const valid = states.filter(s => s.i && !s.removed); // valid states
if (!options.military) options.military = getDefaultOptions(); if (!options.military) options.military = getDefaultOptions();
const expn = d3.sum(valid.map(s => s.expansionism)); // total expansion const expn = d3.sum(valid.map(s => s.expansionism)); // total expansion
const area = d3.sum(valid.map(s => s.area)); // total area const area = d3.sum(valid.map(s => s.area)); // total area
const rate = {x:0, Ally:-.2, Friendly:-.1, Neutral:0, Suspicion:.1, Enemy:1, Unknown:0, Rival:.5, Vassal:.5, Suzerain:-.5}; const rate = {x: 0, Ally: -0.2, Friendly: -0.1, Neutral: 0, Suspicion: 0.1, Enemy: 1, Unknown: 0, Rival: 0.5, Vassal: 0.5, Suzerain: -0.5};
const stateModifier = { const stateModifier = {
"melee": {"Nomadic":.5, "Highland":1.2, "Lake":1, "Naval":.7, "Hunting":1.2, "River":1.1}, melee: {Nomadic: 0.5, Highland: 1.2, Lake: 1, Naval: 0.7, Hunting: 1.2, River: 1.1},
"ranged": {"Nomadic":.9, "Highland":1.3, "Lake":1, "Naval":.8, "Hunting":2, "River":.8}, ranged: {Nomadic: 0.9, Highland: 1.3, Lake: 1, Naval: 0.8, Hunting: 2, River: 0.8},
"mounted": {"Nomadic":2.3, "Highland":.6, "Lake":.7, "Naval":.3, "Hunting":.7, "River":.8}, mounted: {Nomadic: 2.3, Highland: 0.6, Lake: 0.7, Naval: 0.3, Hunting: 0.7, River: 0.8},
"machinery":{"Nomadic":.8, "Highland":1.4, "Lake":1.1, "Naval":1.4, "Hunting":.4, "River":1.1}, machinery: {Nomadic: 0.8, Highland: 1.4, Lake: 1.1, Naval: 1.4, Hunting: 0.4, River: 1.1},
"naval": {"Nomadic":.5, "Highland":.5, "Lake":1.2, "Naval":1.8, "Hunting":.7, "River":1.2}, naval: {Nomadic: 0.5, Highland: 0.5, Lake: 1.2, Naval: 1.8, Hunting: 0.7, River: 1.2},
// non-default generic: // non-default generic:
"armored": {"Nomadic":1, "Highland":.5, "Lake":1, "Naval":1, "Hunting":.7, "River":1.1}, armored: {Nomadic: 1, Highland: 0.5, Lake: 1, Naval: 1, Hunting: 0.7, River: 1.1},
"aviation": {"Nomadic":.5, "Highland":.5, "Lake":1.2, "Naval":1.2, "Hunting":.6, "River":1.2}, aviation: {Nomadic: 0.5, Highland: 0.5, Lake: 1.2, Naval: 1.2, Hunting: 0.6, River: 1.2},
"magical": {"Nomadic":1, "Highland":2, "Lake":1, "Naval":1, "Hunting":1, "River":1} magical: {Nomadic: 1, Highland: 2, Lake: 1, Naval: 1, Hunting: 1, River: 1}
}; };
const cellTypeModifier = { const cellTypeModifier = {
"nomadic": {"melee":.2, "ranged":.5, "mounted":3, "machinery":.4, "naval":.3, "armored":1.6, "aviation":1, "magical":.5}, nomadic: {melee: 0.2, ranged: 0.5, mounted: 3, machinery: 0.4, naval: 0.3, armored: 1.6, aviation: 1, magical: 0.5},
"wetland": {"melee":.8, "ranged":2, "mounted":0.3, "machinery":1.2, "naval":1.0, "armored":0.2, "aviation":.5, "magical":0.5}, wetland: {melee: 0.8, ranged: 2, mounted: 0.3, machinery: 1.2, naval: 1.0, armored: 0.2, aviation: 0.5, magical: 0.5},
"highland": {"melee":1.2, "ranged":1.6, "mounted":0.3, "machinery":3, "naval":1.0, "armored":0.8, "aviation":.3, "magical":2} highland: {melee: 1.2, ranged: 1.6, mounted: 0.3, machinery: 3, naval: 1.0, armored: 0.8, aviation: 0.3, magical: 2}
} };
const burgTypeModifier = { const burgTypeModifier = {
"nomadic": {"melee":.3, "ranged":.8, "mounted":3, "machinery":.4, "naval":1.0, "armored":1.6, "aviation":1, "magical":0.5}, nomadic: {melee: 0.3, ranged: 0.8, mounted: 3, machinery: 0.4, naval: 1.0, armored: 1.6, aviation: 1, magical: 0.5},
"wetland": {"melee":1, "ranged":1.6, "mounted":.2, "machinery":1.2, "naval":1.0, "armored":0.2, "aviation":0.5, "magical":0.5}, wetland: {melee: 1, ranged: 1.6, mounted: 0.2, machinery: 1.2, naval: 1.0, armored: 0.2, aviation: 0.5, magical: 0.5},
"highland": {"melee":1.2, "ranged":2, "mounted":.3, "machinery":3, "naval":1.0, "armored":0.8, "aviation":0.3, "magical":2} highland: {melee: 1.2, ranged: 2, mounted: 0.3, machinery: 3, naval: 1.0, armored: 0.8, aviation: 0.3, magical: 2}
} };
valid.forEach(s => { valid.forEach(s => {
const temp = s.temp = {}, d = s.diplomacy; const temp = (s.temp = {}),
const expansionRate = Math.min(Math.max((s.expansionism / expn) / (s.area / area), .25), 4); // how much state expansionism is realized d = s.diplomacy;
const diplomacyRate = d.some(d => d === "Enemy") ? 1 : d.some(d => d === "Rival") ? .8 : d.some(d => d === "Suspicion") ? .5 : .1; // peacefulness const expansionRate = Math.min(Math.max(s.expansionism / expn / (s.area / area), 0.25), 4); // how much state expansionism is realized
const neighborsRate = Math.min(Math.max(s.neighbors.map(n => n ? pack.states[n].diplomacy[s.i] : "Suspicion").reduce((s, r) => s += rate[r], .5), .3), 3); // neighbors rate const diplomacyRate = d.some(d => d === "Enemy") ? 1 : d.some(d => d === "Rival") ? 0.8 : d.some(d => d === "Suspicion") ? 0.5 : 0.1; // peacefulness
s.alert = Math.min(Math.max(rn(expansionRate * diplomacyRate * neighborsRate, 2), .1), 5); // war alert rate (army modifier) const neighborsRate = Math.min(
Math.max(
s.neighbors.map(n => (n ? pack.states[n].diplomacy[s.i] : "Suspicion")).reduce((s, r) => (s += rate[r]), 0.5),
0.3
),
3
); // neighbors rate
s.alert = Math.min(Math.max(rn(expansionRate * diplomacyRate * neighborsRate, 2), 0.1), 5); // war alert rate (army modifier)
temp.platoons = []; temp.platoons = [];
// apply overall state modifiers for unit types based on state features // apply overall state modifiers for unit types based on state features
for (const unit of options.military) { for (const unit of options.military) {
if (!stateModifier[unit.type]) continue; if (!stateModifier[unit.type]) continue;
let modifier = stateModifier[unit.type][s.type] || 1; let modifier = stateModifier[unit.type][s.type] || 1;
if (unit.type === "mounted" && s.formName.includes("Horde")) modifier *= 2; else if (unit.type === "mounted" && s.formName.includes("Horde")) modifier *= 2;
if (unit.type === "naval" && s.form === "Republic") modifier *= 1.2; else if (unit.type === "naval" && s.form === "Republic") modifier *= 1.2;
temp[unit.name] = modifier * s.alert; temp[unit.name] = modifier * s.alert;
} }
}); });
const getType = cell => { const getType = cell => {
@ -62,7 +69,7 @@
if ([7, 8, 9, 12].includes(cells.biome[cell])) return "wetland"; if ([7, 8, 9, 12].includes(cells.biome[cell])) return "wetland";
if (cells.h[cell] >= 70) return "highland"; if (cells.h[cell] >= 70) return "highland";
return "generic"; return "generic";
} };
for (const i of cells.i) { for (const i of cells.i) {
if (!cells.pop[i]) continue; if (!cells.pop[i]) continue;
@ -79,13 +86,19 @@
const perc = +u.rural; const perc = +u.rural;
if (isNaN(perc) || perc <= 0 || !s.temp[u.name]) continue; if (isNaN(perc) || perc <= 0 || !s.temp[u.name]) continue;
const mod = type === "generic" ? 1 : cellTypeModifier[type][u.type] // cell specific modifier const mod = type === "generic" ? 1 : cellTypeModifier[type][u.type]; // cell specific modifier
const army = m * perc * mod; // rural cell army const army = m * perc * mod; // rural cell army
const t = rn(army * s.temp[u.name] * populationRate.value); // total troops const t = rn(army * s.temp[u.name] * populationRate); // total troops
if (!t) continue; if (!t) continue;
let x = p[i][0], y = p[i][1], n = 0; let x = p[i][0],
if (u.type === "naval") {let haven = cells.haven[i]; x = p[haven][0], y = p[haven][1]; n = 1}; // place naval to sea y = p[i][1],
s.temp.platoons.push({cell: i, a:t, t, x, y, u:u.name, n, s:u.separate, type:u.type}); n = 0;
if (u.type === "naval") {
let haven = cells.haven[i];
(x = p[haven][0]), (y = p[haven][1]);
n = 1;
} // place naval to sea
s.temp.platoons.push({cell: i, a: t, t, x, y, u: u.name, n, s: u.separate, type: u.type});
} }
} }
@ -93,7 +106,7 @@
if (!b.i || b.removed || !b.state || !b.population) continue; if (!b.i || b.removed || !b.state || !b.population) continue;
const s = states[b.state]; // burg state const s = states[b.state]; // burg state
let m = b.population * urbanization.value / 100; // basic urban army in percentages let m = (b.population * urbanization) / 100; // basic urban army in percentages
if (b.capital) m *= 1.2; // capital has household troops if (b.capital) m *= 1.2; // capital has household troops
if (b.culture !== s.culture) m = s.form === "Union" ? m / 1.2 : m / 2; // non-dominant culture if (b.culture !== s.culture) m = s.form === "Union" ? m / 1.2 : m / 2; // non-dominant culture
if (cells.religion[b.cell] !== cells.religion[s.center]) m = s.form === "Theocracy" ? m / 2.2 : m / 1.4; // non-dominant religion if (cells.religion[b.cell] !== cells.religion[s.center]) m = s.form === "Theocracy" ? m / 2.2 : m / 1.4; // non-dominant religion
@ -105,25 +118,31 @@
const perc = +u.urban; const perc = +u.urban;
if (isNaN(perc) || perc <= 0 || !s.temp[u.name]) continue; if (isNaN(perc) || perc <= 0 || !s.temp[u.name]) continue;
const mod = type === "generic" ? 1 : burgTypeModifier[type][u.type] // cell specific modifier const mod = type === "generic" ? 1 : burgTypeModifier[type][u.type]; // cell specific modifier
const army = m * perc * mod; // urban cell army const army = m * perc * mod; // urban cell army
const t = rn(army * s.temp[u.name] * populationRate.value); // total troops const t = rn(army * s.temp[u.name] * populationRate); // total troops
if (!t) continue; if (!t) continue;
let x = p[b.cell][0], y = p[b.cell][1], n = 0; let x = p[b.cell][0],
if (u.type === "naval") {let haven = cells.haven[b.cell]; x = p[haven][0], y = p[haven][1]; n = 1}; // place naval in sea cell y = p[b.cell][1],
s.temp.platoons.push({cell: b.cell, a:t, t, x, y, u:u.name, n, s:u.separate, type:u.type}); n = 0;
if (u.type === "naval") {
let haven = cells.haven[b.cell];
(x = p[haven][0]), (y = p[haven][1]);
n = 1;
} // place naval in sea cell
s.temp.platoons.push({cell: b.cell, a: t, t, x, y, u: u.name, n, s: u.separate, type: u.type});
} }
} }
void function removeExistingRegiments() { void (function removeExistingRegiments() {
armies.selectAll("g > g").each(function() { armies.selectAll("g > g").each(function () {
const index = notes.findIndex(n => n.id === this.id); const index = notes.findIndex(n => n.id === this.id);
if (index != -1) notes.splice(index, 1); if (index != -1) notes.splice(index, 1);
}); });
armies.selectAll("g").remove(); armies.selectAll("g").remove();
}() })();
const expected = 3 * populationRate.value; // expected regiment size const expected = 3 * populationRate; // expected regiment size
const mergeable = (n0, n1) => (!n0.s && !n1.s) || n0.type === n1.type; // check if regiments can be merged const mergeable = (n0, n1) => (!n0.s && !n1.s) || n0.type === n1.type; // check if regiments can be merged
// get regiments for each state // get regiments for each state
@ -135,33 +154,48 @@
function createRegiments(nodes, s) { function createRegiments(nodes, s) {
if (!nodes.length) return []; if (!nodes.length) return [];
nodes.sort((a,b) => a.a - b.a); // form regiments in cells with most troops nodes.sort((a, b) => a.a - b.a); // form regiments in cells with most troops
const tree = d3.quadtree(nodes, d => d.x, d => d.y); const tree = d3.quadtree(
nodes,
d => d.x,
d => d.y
);
nodes.forEach(n => { nodes.forEach(n => {
tree.remove(n); tree.remove(n);
const overlap = tree.find(n.x, n.y, 20); const overlap = tree.find(n.x, n.y, 20);
if (overlap && overlap.t && mergeable(n, overlap)) {merge(n, overlap); return;} if (overlap && overlap.t && mergeable(n, overlap)) {
merge(n, overlap);
return;
}
if (n.t > expected) return; if (n.t > expected) return;
const r = (expected - n.t) / (n.s?40:20); // search radius const r = (expected - n.t) / (n.s ? 40 : 20); // search radius
const candidates = tree.findAll(n.x, n.y, r); const candidates = tree.findAll(n.x, n.y, r);
for (const c of candidates) { for (const c of candidates) {
if (c.t < expected && mergeable(n, c)) {merge(n, c); break;} if (c.t < expected && mergeable(n, c)) {
merge(n, c);
break;
}
} }
}); });
// add n0 to n1's ultimate parent // add n0 to n1's ultimate parent
function merge(n0, n1) { function merge(n0, n1) {
if (!n1.childen) n1.childen = [n0]; else n1.childen.push(n0); if (!n1.childen) n1.childen = [n0];
else n1.childen.push(n0);
if (n0.childen) n0.childen.forEach(n => n1.childen.push(n)); if (n0.childen) n0.childen.forEach(n => n1.childen.push(n));
n1.t += n0.t; n1.t += n0.t;
n0.t = 0; n0.t = 0;
} }
// parse regiments data // parse regiments data
const regiments = nodes.filter(n => n.t).sort((a,b) => b.t - a.t).map((r, i) => { const regiments = nodes
const u = {}; u[r.u] = r.a; .filter(n => n.t)
(r.childen||[]).forEach(n => u[n.u] = u[n.u] ? u[n.u] += n.a : n.a); .sort((a, b) => b.t - a.t)
return {i, a:r.t, cell:r.cell, x:r.x, y:r.y, bx:r.x, by:r.y, u, n:r.n, name, state: s.i}; .map((r, i) => {
const u = {};
u[r.u] = r.a;
(r.childen || []).forEach(n => (u[n.u] = u[n.u] ? (u[n.u] += n.a) : n.a));
return {i, a: r.t, cell: r.cell, x: r.x, y: r.y, bx: r.x, by: r.y, u, n: r.n, name, state: s.i};
}); });
// generate name for regiments // generate name for regiments
@ -175,65 +209,109 @@
} }
TIME && console.timeEnd("generateMilitaryForces"); TIME && console.timeEnd("generateMilitaryForces");
} };
const getDefaultOptions = function() { const getDefaultOptions = function () {
return [ return [
{icon: "⚔️", name:"infantry", rural:.25, urban:.2, crew:1, power:1, type:"melee", separate:0}, {icon: "⚔️", name: "infantry", rural: 0.25, urban: 0.2, crew: 1, power: 1, type: "melee", separate: 0},
{icon: "🏹", name:"archers", rural:.12, urban:.2, crew:1, power:1, type:"ranged", separate:0}, {icon: "🏹", name: "archers", rural: 0.12, urban: 0.2, crew: 1, power: 1, type: "ranged", separate: 0},
{icon: "🐴", name:"cavalry", rural:.12, urban:.03, crew:2, power:2, type:"mounted", separate:0}, {icon: "🐴", name: "cavalry", rural: 0.12, urban: 0.03, crew: 2, power: 2, type: "mounted", separate: 0},
{icon: "💣", name:"artillery", rural:0, urban:.03, crew:8, power:12, type:"machinery", separate:0}, {icon: "💣", name: "artillery", rural: 0, urban: 0.03, crew: 8, power: 12, type: "machinery", separate: 0},
{icon: "🌊", name:"fleet", rural:0, urban:.015, crew:100, power:50, type:"naval", separate:1} {icon: "🌊", name: "fleet", rural: 0, urban: 0.015, crew: 100, power: 50, type: "naval", separate: 1}
]; ];
} };
const drawRegiments = function(regiments, s) { const drawRegiments = function (regiments, s) {
const size = +armies.attr("box-size"); const size = +armies.attr("box-size");
const w = d => d.n ? size * 4 : size * 6; const w = d => (d.n ? size * 4 : size * 6);
const h = size * 2; const h = size * 2;
const x = d => rn(d.x - w(d) / 2, 2); const x = d => rn(d.x - w(d) / 2, 2);
const y = d => rn(d.y - size, 2); const y = d => rn(d.y - size, 2);
const baseColor = pack.states[s].color[0] === "#" ? pack.states[s].color : "#999"; const baseColor = pack.states[s].color[0] === "#" ? pack.states[s].color : "#999";
const darkerColor = d3.color(baseColor).darker().hex(); const darkerColor = d3.color(baseColor).darker().hex();
const army = armies.append("g").attr("id", "army"+s).attr("fill", baseColor); const army = armies
.append("g")
.attr("id", "army" + s)
.attr("fill", baseColor);
const g = army.selectAll("g").data(regiments).enter().append("g") const g = army
.attr("id", d => "regiment"+s+"-"+d.i).attr("data-name", d => d.name).attr("data-state", s).attr("data-id", d => d.i); .selectAll("g")
g.append("rect").attr("x", d => x(d)).attr("y", d => y(d)).attr("width", d => w(d)).attr("height", h); .data(regiments)
g.append("text").attr("x", d => d.x).attr("y", d => d.y).text(d => getTotal(d)); .enter()
g.append("rect").attr("fill", darkerColor).attr("x", d => x(d)-h).attr("y", d => y(d)).attr("width", h).attr("height", h); .append("g")
g.append("text").attr("class", "regimentIcon").attr("x", d => x(d)-size).attr("y", d => d.y).text(d => d.icon); .attr("id", d => "regiment" + s + "-" + d.i)
} .attr("data-name", d => d.name)
.attr("data-state", s)
.attr("data-id", d => d.i);
g.append("rect")
.attr("x", d => x(d))
.attr("y", d => y(d))
.attr("width", d => w(d))
.attr("height", h);
g.append("text")
.attr("x", d => d.x)
.attr("y", d => d.y)
.text(d => getTotal(d));
g.append("rect")
.attr("fill", darkerColor)
.attr("x", d => x(d) - h)
.attr("y", d => y(d))
.attr("width", h)
.attr("height", h);
g.append("text")
.attr("class", "regimentIcon")
.attr("x", d => x(d) - size)
.attr("y", d => d.y)
.text(d => d.icon);
};
const drawRegiment = function(reg, s) { const drawRegiment = function (reg, s) {
const size = +armies.attr("box-size"); const size = +armies.attr("box-size");
const w = reg.n ? size * 4 : size * 6; const w = reg.n ? size * 4 : size * 6;
const h = size * 2; const h = size * 2;
const x1 = rn(reg.x - w / 2, 2); const x1 = rn(reg.x - w / 2, 2);
const y1 = rn(reg.y - size, 2); const y1 = rn(reg.y - size, 2);
let army = armies.select("g#army"+s); let army = armies.select("g#army" + s);
if (!army.size()) { if (!army.size()) {
const baseColor = pack.states[s].color[0] === "#" ? pack.states[s].color : "#999"; const baseColor = pack.states[s].color[0] === "#" ? pack.states[s].color : "#999";
army = armies.append("g").attr("id", "army"+s).attr("fill", baseColor); army = armies
.append("g")
.attr("id", "army" + s)
.attr("fill", baseColor);
} }
const darkerColor = d3.color(army.attr("fill")).darker().hex(); const darkerColor = d3.color(army.attr("fill")).darker().hex();
const g = army.append("g").attr("id", "regiment"+s+"-"+reg.i).attr("data-name", reg.name).attr("data-state", s).attr("data-id", reg.i); const g = army
.append("g")
.attr("id", "regiment" + s + "-" + reg.i)
.attr("data-name", reg.name)
.attr("data-state", s)
.attr("data-id", reg.i);
g.append("rect").attr("x", x1).attr("y", y1).attr("width", w).attr("height", h); g.append("rect").attr("x", x1).attr("y", y1).attr("width", w).attr("height", h);
g.append("text").attr("x", reg.x).attr("y", reg.y).text(getTotal(reg)); g.append("text").attr("x", reg.x).attr("y", reg.y).text(getTotal(reg));
g.append("rect").attr("fill", darkerColor).attr("x", x1-h).attr("y", y1).attr("width", h).attr("height", h); g.append("rect")
g.append("text").attr("class", "regimentIcon").attr("x", x1-size).attr("y", reg.y).text(reg.icon); .attr("fill", darkerColor)
} .attr("x", x1 - h)
.attr("y", y1)
.attr("width", h)
.attr("height", h);
g.append("text")
.attr("class", "regimentIcon")
.attr("x", x1 - size)
.attr("y", reg.y)
.text(reg.icon);
};
// move one regiment to another // move one regiment to another
const moveRegiment = function(reg, x, y) { const moveRegiment = function (reg, x, y) {
const el = armies.select("g#army"+reg.state).select("g#regiment"+reg.state+"-"+reg.i); const el = armies.select("g#army" + reg.state).select("g#regiment" + reg.state + "-" + reg.i);
if (!el.size()) return; if (!el.size()) return;
const duration = Math.hypot(reg.x - x, reg.y - y) * 8; const duration = Math.hypot(reg.x - x, reg.y - y) * 8;
reg.x = x; reg.y = y; reg.x = x;
reg.y = y;
const size = +armies.attr("box-size"); const size = +armies.attr("box-size");
const w = reg.n ? size * 4 : size * 6; const w = reg.n ? size * 4 : size * 6;
const h = size * 2; const h = size * 2;
@ -243,48 +321,54 @@
const move = d3.transition().duration(duration).ease(d3.easeSinInOut); const move = d3.transition().duration(duration).ease(d3.easeSinInOut);
el.select("rect").transition(move).attr("x", x1(x)).attr("y", y1(y)); el.select("rect").transition(move).attr("x", x1(x)).attr("y", y1(y));
el.select("text").transition(move).attr("x", x).attr("y", y); el.select("text").transition(move).attr("x", x).attr("y", y);
el.selectAll("rect:nth-of-type(2)").transition(move).attr("x", x1(x)-h).attr("y", y1(y)); el.selectAll("rect:nth-of-type(2)")
el.select(".regimentIcon").transition(move).attr("x", x1(x)-size).attr("y", y); .transition(move)
} .attr("x", x1(x) - h)
.attr("y", y1(y));
el.select(".regimentIcon")
.transition(move)
.attr("x", x1(x) - size)
.attr("y", y);
};
// utilize si function to make regiment total text fit regiment box // utilize si function to make regiment total text fit regiment box
const getTotal = reg => reg.a > (reg.n ? 999 : 99999) ? si(reg.a) : reg.a; const getTotal = reg => (reg.a > (reg.n ? 999 : 99999) ? si(reg.a) : reg.a);
const getName = function(r, regiments) { const getName = function (r, regiments) {
const cells = pack.cells; const cells = pack.cells;
const proper = r.n ? null : const proper = r.n ? null : cells.province[r.cell] && pack.provinces[cells.province[r.cell]] ? pack.provinces[cells.province[r.cell]].name : cells.burg[r.cell] && pack.burgs[cells.burg[r.cell]] ? pack.burgs[cells.burg[r.cell]].name : null;
cells.province[r.cell] && pack.provinces[cells.province[r.cell]] ? pack.provinces[cells.province[r.cell]].name : const number = nth(regiments.filter(reg => reg.n === r.n && reg.i < r.i).length + 1);
cells.burg[r.cell] && pack.burgs[cells.burg[r.cell]] ? pack.burgs[cells.burg[r.cell]].name : null
const number = nth(regiments.filter(reg => reg.n === r.n && reg.i < r.i).length+1);
const form = r.n ? "Fleet" : "Regiment"; const form = r.n ? "Fleet" : "Regiment";
return `${number}${proper?` (${proper}) `:` `}${form}`; return `${number}${proper ? ` (${proper}) ` : ` `}${form}`;
} };
// get default regiment emblem // get default regiment emblem
const getEmblem = function(r) { const getEmblem = function (r) {
if (!r.n && !Object.values(r.u).length) return "🔰"; // "Newbie" regiment without troops if (!r.n && !Object.values(r.u).length) return "🔰"; // "Newbie" regiment without troops
if (!r.n && pack.states[r.state].form === "Monarchy" && pack.cells.burg[r.cell] && pack.burgs[pack.cells.burg[r.cell]].capital) return "👑"; // "Royal" regiment based in capital if (!r.n && pack.states[r.state].form === "Monarchy" && pack.cells.burg[r.cell] && pack.burgs[pack.cells.burg[r.cell]].capital) return "👑"; // "Royal" regiment based in capital
const mainUnit = Object.entries(r.u).sort((a,b) => b[1]-a[1])[0][0]; // unit with more troops in regiment const mainUnit = Object.entries(r.u).sort((a, b) => b[1] - a[1])[0][0]; // unit with more troops in regiment
const unit = options.military.find(u => u.name === mainUnit); const unit = options.military.find(u => u.name === mainUnit);
return unit.icon; return unit.icon;
} };
const generateNote = function(r, s) { const generateNote = function (r, s) {
const cells = pack.cells; const cells = pack.cells;
const base = cells.burg[r.cell] && pack.burgs[cells.burg[r.cell]] ? pack.burgs[cells.burg[r.cell]].name : const base = cells.burg[r.cell] && pack.burgs[cells.burg[r.cell]] ? pack.burgs[cells.burg[r.cell]].name : cells.province[r.cell] && pack.provinces[cells.province[r.cell]] ? pack.provinces[cells.province[r.cell]].fullName : null;
cells.province[r.cell] && pack.provinces[cells.province[r.cell]] ? pack.provinces[cells.province[r.cell]].fullName : null;
const station = base ? `${r.name} is ${r.n ? "based" : "stationed"} in ${base}. ` : ""; const station = base ? `${r.name} is ${r.n ? "based" : "stationed"} in ${base}. ` : "";
const composition = r.a ? Object.keys(r.u).map(t => `— ${t}: ${r.u[t]}`).join("\r\n") : null; const composition = r.a
? Object.keys(r.u)
.map(t => `— ${t}: ${r.u[t]}`)
.join("\r\n")
: null;
const troops = composition ? `\r\n\r\nRegiment composition in ${options.year} ${options.eraShort}:\r\n${composition}.` : ""; const troops = composition ? `\r\n\r\nRegiment composition in ${options.year} ${options.eraShort}:\r\n${composition}.` : "";
const campaign = s.campaigns ? ra(s.campaigns) : null; const campaign = s.campaigns ? ra(s.campaigns) : null;
const year = campaign ? rand(campaign.start, campaign.end) : gauss(options.year-100, 150, 1, options.year-6); const year = campaign ? rand(campaign.start, campaign.end) : gauss(options.year - 100, 150, 1, options.year - 6);
const conflict = campaign ? ` during the ${campaign.name}` : ""; const conflict = campaign ? ` during the ${campaign.name}` : "";
const legend = `Regiment was formed in ${year} ${options.era}${conflict}. ${station}${troops}`; const legend = `Regiment was formed in ${year} ${options.era}${conflict}. ${station}${troops}`;
notes.push({id:`regiment${s.i}-${r.i}`, name:`${r.icon} ${r.name}`, legend}); notes.push({id: `regiment${s.i}-${r.i}`, name: `${r.icon} ${r.name}`, legend});
} };
return {generate, getDefaultOptions, getName, generateNote, drawRegiments, drawRegiment, moveRegiment, getTotal, getEmblem}; return {generate, getDefaultOptions, getName, generateNote, drawRegiments, drawRegiment, moveRegiment, getTotal, getEmblem};
});
})));

2
modules/save.js
View file

@ -417,7 +417,7 @@ function getMapData() {
const dateString = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate(); const dateString = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
const license = "File can be loaded in azgaar.github.io/Fantasy-Map-Generator"; const license = "File can be loaded in azgaar.github.io/Fantasy-Map-Generator";
const params = [version, license, dateString, seed, graphWidth, graphHeight, mapId].join("|"); const params = [version, license, dateString, seed, graphWidth, graphHeight, mapId].join("|");
const settings = [distanceUnitInput.value, distanceScaleInput.value, areaUnit.value, heightUnit.value, heightExponentInput.value, temperatureScale.value, barSizeInput.value, barLabel.value, barBackOpacity.value, barBackColor.value, barPosX.value, barPosY.value, populationRate.value, urbanization.value, mapSizeOutput.value, latitudeOutput.value, temperatureEquatorOutput.value, temperaturePoleOutput.value, precOutput.value, JSON.stringify(options), mapName.value, +hideLabels.checked].join("|"); const settings = [distanceUnitInput.value, distanceScaleInput.value, areaUnit.value, heightUnit.value, heightExponentInput.value, temperatureScale.value, barSizeInput.value, barLabel.value, barBackOpacity.value, barBackColor.value, barPosX.value, barPosY.value, populationRate, urbanization, mapSizeOutput.value, latitudeOutput.value, temperatureEquatorOutput.value, temperaturePoleOutput.value, precOutput.value, JSON.stringify(options), mapName.value, +hideLabels.checked].join("|");
const coords = JSON.stringify(mapCoordinates); const coords = JSON.stringify(mapCoordinates);
const biomes = [biomesData.color, biomesData.habitability, biomesData.name].join("|"); const biomes = [biomesData.color, biomesData.habitability, biomesData.name].join("|");
const notesData = JSON.stringify(notes); const notesData = JSON.stringify(notes);

358
modules/ui/battle-screen.js
View file

@ -1,6 +1,5 @@
"use strict"; "use strict";
class Battle { class Battle {
constructor(attacker, defender) { constructor(attacker, defender) {
if (customization) return; if (customization) return;
closeDialogs(".stable"); closeDialogs(".stable");
@ -11,8 +10,8 @@ class Battle {
this.x = defender.x; this.x = defender.x;
this.y = defender.y; this.y = defender.y;
this.cell = findCell(this.x, this.y); this.cell = findCell(this.x, this.y);
this.attackers = {regiments:[], distances:[], morale:100, casualties:0, power:0}; this.attackers = {regiments: [], distances: [], morale: 100, casualties: 0, power: 0};
this.defenders = {regiments:[], distances:[], morale:100, casualties:0, power:0}; this.defenders = {regiments: [], distances: [], morale: 100, casualties: 0, power: 0};
this.addHeaders(); this.addHeaders();
this.addRegiment("attackers", attacker); this.addRegiment("attackers", attacker);
@ -26,7 +25,9 @@ class Battle {
this.getInitialMorale(); this.getInitialMorale();
$("#battleScreen").dialog({ $("#battleScreen").dialog({
title: this.name, resizable: false, width: fitContent(), title: this.name,
resizable: false,
width: fitContent(),
position: {my: "center", at: "center", of: "#map"}, position: {my: "center", at: "center", of: "#map"},
close: () => Battle.prototype.context.cancelResults() close: () => Battle.prototype.context.cancelResults()
}); });
@ -38,7 +39,7 @@ class Battle {
document.getElementById("battleType").addEventListener("click", ev => this.toggleChange(ev)); document.getElementById("battleType").addEventListener("click", ev => this.toggleChange(ev));
document.getElementById("battleType").nextElementSibling.addEventListener("click", ev => Battle.prototype.context.changeType(ev)); document.getElementById("battleType").nextElementSibling.addEventListener("click", ev => Battle.prototype.context.changeType(ev));
document.getElementById("battleNameShow").addEventListener("click", () => Battle.prototype.context.showNameSection()); document.getElementById("battleNameShow").addEventListener("click", () => Battle.prototype.context.showNameSection());
document.getElementById("battleNamePlace").addEventListener("change", ev => Battle.prototype.context.place = ev.target.value); document.getElementById("battleNamePlace").addEventListener("change", ev => (Battle.prototype.context.place = ev.target.value));
document.getElementById("battleNameFull").addEventListener("change", ev => Battle.prototype.context.changeName(ev)); document.getElementById("battleNameFull").addEventListener("change", ev => Battle.prototype.context.changeName(ev));
document.getElementById("battleNameCulture").addEventListener("click", () => Battle.prototype.context.generateName("culture")); document.getElementById("battleNameCulture").addEventListener("click", () => Battle.prototype.context.generateName("culture"));
document.getElementById("battleNameRandom").addEventListener("click", () => Battle.prototype.context.generateName("random")); document.getElementById("battleNameRandom").addEventListener("click", () => Battle.prototype.context.generateName("random"));
@ -69,9 +70,9 @@ class Battle {
if (typesA.every(t => t === "aviation") && typesD.every(t => t === "aviation")) return "air"; // if attackers and defender have only aviation units if (typesA.every(t => t === "aviation") && typesD.every(t => t === "aviation")) return "air"; // if attackers and defender have only aviation units
if (attacker.n && !defender.n && typesA.some(t => t !== "naval")) return "landing"; // if attacked is naval with non-naval units and defender is not naval if (attacker.n && !defender.n && typesA.some(t => t !== "naval")) return "landing"; // if attacked is naval with non-naval units and defender is not naval
if (!defender.n && pack.burgs[pack.cells.burg[this.cell]].walls) return "siege"; // defender is in walled town if (!defender.n && pack.burgs[pack.cells.burg[this.cell]].walls) return "siege"; // defender is in walled town
if (P(.1) && [5,6,7,8,9,12].includes(pack.cells.biome[this.cell])) return "ambush"; // 20% if defenders are in forest or marshes if (P(0.1) && [5, 6, 7, 8, 9, 12].includes(pack.cells.biome[this.cell])) return "ambush"; // 20% if defenders are in forest or marshes
return "field"; return "field";
} };
this.type = getType(); this.type = getType();
this.setType(); this.setType();
@ -80,9 +81,9 @@ class Battle {
setType() { setType() {
document.getElementById("battleType").className = "icon-button-" + this.type; document.getElementById("battleType").className = "icon-button-" + this.type;
const sideSpecific = document.getElementById("battlePhases_"+this.type+"_attackers"); const sideSpecific = document.getElementById("battlePhases_" + this.type + "_attackers");
const attackers = sideSpecific ? sideSpecific.content : document.getElementById("battlePhases_"+this.type).content; const attackers = sideSpecific ? sideSpecific.content : document.getElementById("battlePhases_" + this.type).content;
const defenders = sideSpecific ? document.getElementById("battlePhases_"+this.type+"_defenders").content : attackers; const defenders = sideSpecific ? document.getElementById("battlePhases_" + this.type + "_defenders").content : attackers;
document.getElementById("battlePhase_attackers").nextElementSibling.innerHTML = ""; document.getElementById("battlePhase_attackers").nextElementSibling.innerHTML = "";
document.getElementById("battlePhase_defenders").nextElementSibling.innerHTML = ""; document.getElementById("battlePhase_defenders").nextElementSibling.innerHTML = "";
@ -91,9 +92,13 @@ class Battle {
} }
definePlace() { definePlace() {
const cells = pack.cells, i = this.cell; const cells = pack.cells,
i = this.cell;
const burg = cells.burg[i] ? pack.burgs[cells.burg[i]].name : null; const burg = cells.burg[i] ? pack.burgs[cells.burg[i]].name : null;
const getRiver = i => {const river = pack.rivers.find(r => r.i === i); return river.name + " " + river.type}; const getRiver = i => {
const river = pack.rivers.find(r => r.i === i);
return river.name + " " + river.type;
};
const river = !burg && cells.r[i] ? getRiver(cells.r[i]) : null; const river = !burg && cells.r[i] ? getRiver(cells.r[i]) : null;
const proper = burg || river ? null : Names.getCulture(cells.culture[this.cell]); const proper = burg || river ? null : Names.getCulture(cells.culture[this.cell]);
return burg ? burg : river ? river : proper; return burg ? burg : river ? river : proper;
@ -102,10 +107,10 @@ class Battle {
defineName() { defineName() {
if (this.type === "field") return "Battle of " + this.place; if (this.type === "field") return "Battle of " + this.place;
if (this.type === "naval") return "Naval Battle of " + this.place; if (this.type === "naval") return "Naval Battle of " + this.place;
if (this.type === "siege") return "Siege of "+ this.place; if (this.type === "siege") return "Siege of " + this.place;
if (this.type === "ambush") return this.place + " Ambush"; if (this.type === "ambush") return this.place + " Ambush";
if (this.type === "landing") return this.place + " Landing"; if (this.type === "landing") return this.place + " Landing";
if (this.type === "air") return `${this.place} ${P(.8) ? "Air Battle" : "Dogfight"}`; if (this.type === "air") return `${this.place} ${P(0.8) ? "Air Battle" : "Dogfight"}`;
} }
getTypeName() { getTypeName() {
@ -121,7 +126,7 @@ class Battle {
let headers = "<thead><tr><th></th><th></th>"; let headers = "<thead><tr><th></th><th></th>";
for (const u of options.military) { for (const u of options.military) {
const label = capitalize(u.name.replace(/_/g, ' ')); const label = capitalize(u.name.replace(/_/g, " "));
headers += `<th data-tip="${label}">${u.icon}</th>`; headers += `<th data-tip="${label}">${u.icon}</th>`;
} }
@ -130,11 +135,11 @@ class Battle {
} }
addRegiment(side, regiment) { addRegiment(side, regiment) {
regiment.casualties = Object.keys(regiment.u).reduce((a,b) => (a[b]=0,a), {}); regiment.casualties = Object.keys(regiment.u).reduce((a, b) => ((a[b] = 0), a), {});
regiment.survivors = Object.assign({}, regiment.u); regiment.survivors = Object.assign({}, regiment.u);
const state = pack.states[regiment.state]; const state = pack.states[regiment.state];
const distance = Math.hypot(this.y-regiment.by, this.x-regiment.bx) * distanceScaleInput.value | 0; // distance between regiment and its base const distance = (Math.hypot(this.y - regiment.by, this.x - regiment.bx) * distanceScaleInput.value) | 0; // distance between regiment and its base
const color = state.color[0] === "#" ? state.color : "#999"; const color = state.color[0] === "#" ? state.color : "#999";
const icon = `<svg width="1.4em" height="1.4em" style="margin-bottom: -.6em"> const icon = `<svg width="1.4em" height="1.4em" style="margin-bottom: -.6em">
<rect x="0" y="0" width="100%" height="100%" fill="${color}" class="fillRect"></rect> <rect x="0" y="0" width="100%" height="100%" fill="${color}" class="fillRect"></rect>
@ -146,14 +151,14 @@ class Battle {
let survivors = `<tr class="battleSurvivors"><td></td><td data-tip="Supply line length, affects morale">Distance to base: ${distance} ${distanceUnitInput.value}</td>`; let survivors = `<tr class="battleSurvivors"><td></td><td data-tip="Supply line length, affects morale">Distance to base: ${distance} ${distanceUnitInput.value}</td>`;
for (const u of options.military) { for (const u of options.military) {
initial += `<td data-tip="Initial forces" style="width: 2.5em; text-align: center">${regiment.u[u.name]||0}</td>`; initial += `<td data-tip="Initial forces" style="width: 2.5em; text-align: center">${regiment.u[u.name] || 0}</td>`;
casualties += `<td data-tip="Casualties" style="width: 2.5em; text-align: center; color: red">0</td>`; casualties += `<td data-tip="Casualties" style="width: 2.5em; text-align: center; color: red">0</td>`;
survivors += `<td data-tip="Survivors" style="width: 2.5em; text-align: center; color: green">${regiment.u[u.name]||0}</td>`; survivors += `<td data-tip="Survivors" style="width: 2.5em; text-align: center; color: green">${regiment.u[u.name] || 0}</td>`;
} }
initial += `<td data-tip="Initial forces" style="width: 2.5em; text-align: center">${regiment.a||0}</td></tr>`; initial += `<td data-tip="Initial forces" style="width: 2.5em; text-align: center">${regiment.a || 0}</td></tr>`;
casualties += `<td data-tip="Casualties" style="width: 2.5em; text-align: center; color: red">0</td></tr>`; casualties += `<td data-tip="Casualties" style="width: 2.5em; text-align: center; color: red">0</td></tr>`;
survivors += `<td data-tip="Survivors" style="width: 2.5em; text-align: center; color: green">${regiment.a||0}</td></tr>`; survivors += `<td data-tip="Survivors" style="width: 2.5em; text-align: center; color: green">${regiment.a || 0}</td></tr>`;
const div = side === "attackers" ? battleAttackers : battleDefenders; const div = side === "attackers" ? battleAttackers : battleDefenders;
div.innerHTML += body + initial + casualties + survivors + "</tbody>"; div.innerHTML += body + initial + casualties + survivors + "</tbody>";
@ -164,12 +169,18 @@ class Battle {
addSide() { addSide() {
const body = document.getElementById("regimentSelectorBody"); const body = document.getElementById("regimentSelectorBody");
const context = Battle.prototype.context; const context = Battle.prototype.context;
const regiments = pack.states.filter(s => s.military && !s.removed).map(s => s.military).flat(); const regiments = pack.states
const distance = reg => rn(Math.hypot(context.y-reg.y, context.x-reg.x) * distanceScaleInput.value) + " " + distanceUnitInput.value; .filter(s => s.military && !s.removed)
.map(s => s.military)
.flat();
const distance = reg => rn(Math.hypot(context.y - reg.y, context.x - reg.x) * distanceScaleInput.value) + " " + distanceUnitInput.value;
const isAdded = reg => context.defenders.regiments.some(r => r === reg) || context.attackers.regiments.some(r => r === reg); const isAdded = reg => context.defenders.regiments.some(r => r === reg) || context.attackers.regiments.some(r => r === reg);
body.innerHTML = regiments.map(r => { body.innerHTML = regiments
const s = pack.states[r.state], added = isAdded(r), dist = added ? "0 " + distanceUnitInput.value : distance(r); .map(r => {
const s = pack.states[r.state],
added = isAdded(r),
dist = added ? "0 " + distanceUnitInput.value : distance(r);
return `<div ${added ? "class='inactive'" : ""} data-s=${s.i} data-i=${r.i} data-state=${s.name} data-regiment=${r.name} return `<div ${added ? "class='inactive'" : ""} data-s=${s.i} data-i=${r.i} data-state=${s.name} data-regiment=${r.name}
data-total=${r.a} data-distance=${dist} data-tip="Click to select regiment"> data-total=${r.a} data-distance=${dist} data-tip="Click to select regiment">
<svg width=".9em" height=".9em" style="margin-bottom:-1px"><rect x="0" y="0" width="100%" height="100%" fill="${s.color}" class="fillRect"></svg> <svg width=".9em" height=".9em" style="margin-bottom:-1px"><rect x="0" y="0" width="100%" height="100%" fill="${s.color}" class="fillRect"></svg>
@ -179,11 +190,15 @@ class Battle {
<div style="width:4em">${r.a}</div> <div style="width:4em">${r.a}</div>
<div style="width:4em">${dist}</div> <div style="width:4em">${dist}</div>
</div>`; </div>`;
}).join(""); })
.join("");
$("#regimentSelectorScreen").dialog({ $("#regimentSelectorScreen").dialog({
resizable: false, width: fitContent(), title: "Add regiment to the battle", resizable: false,
position: {my: "left center", at: "right+10 center", of: "#battleScreen"}, close: addSideClosed, width: fitContent(),
title: "Add regiment to the battle",
position: {my: "left center", at: "right+10 center", of: "#battleScreen"},
close: addSideClosed,
buttons: { buttons: {
"Add to attackers": () => addSideClicked("attackers"), "Add to attackers": () => addSideClicked("attackers"),
"Add to defenders": () => addSideClicked("defenders"), "Add to defenders": () => addSideClicked("defenders"),
@ -195,13 +210,19 @@ class Battle {
body.addEventListener("click", selectLine); body.addEventListener("click", selectLine);
function selectLine(ev) { function selectLine(ev) {
if (ev.target.className === "inactive") {tip("Regiment is already in the battle", false, "error"); return}; if (ev.target.className === "inactive") {
tip("Regiment is already in the battle", false, "error");
return;
}
ev.target.classList.toggle("selected"); ev.target.classList.toggle("selected");
} }
function addSideClicked(side) { function addSideClicked(side) {
const selected = body.querySelectorAll(".selected"); const selected = body.querySelectorAll(".selected");
if (!selected.length) {tip("Please select a regiment first", false, "error"); return} if (!selected.length) {
tip("Please select a regiment first", false, "error");
return;
}
$("#regimentSelectorScreen").dialog("close"); $("#regimentSelectorScreen").dialog("close");
selected.forEach(line => { selected.forEach(line => {
@ -212,8 +233,9 @@ class Battle {
Battle.prototype.getInitialMorale.call(context); Battle.prototype.getInitialMorale.call(context);
// move regiment // move regiment
const defenders = context.defenders.regiments, attackers = context.attackers.regiments; const defenders = context.defenders.regiments,
const shift = side === "attackers" ? attackers.length * -8 : (defenders.length-1) * 8; attackers = context.attackers.regiments;
const shift = side === "attackers" ? attackers.length * -8 : (defenders.length - 1) * 8;
regiment.px = regiment.x; regiment.px = regiment.x;
regiment.py = regiment.y; regiment.py = regiment.y;
Military.moveRegiment(regiment, defenders[0].x, defenders[0].y + shift); Military.moveRegiment(regiment, defenders[0].x, defenders[0].y + shift);
@ -227,7 +249,7 @@ class Battle {
} }
showNameSection() { showNameSection() {
document.querySelectorAll("#battleBottom > button").forEach(el => el.style.display = "none"); document.querySelectorAll("#battleBottom > button").forEach(el => (el.style.display = "none"));
document.getElementById("battleNameSection").style.display = "inline-block"; document.getElementById("battleNameSection").style.display = "inline-block";
document.getElementById("battleNamePlace").value = this.place; document.getElementById("battleNamePlace").value = this.place;
@ -235,22 +257,20 @@ class Battle {
} }
hideNameSection() { hideNameSection() {
document.querySelectorAll("#battleBottom > button").forEach(el => el.style.display = "inline-block"); document.querySelectorAll("#battleBottom > button").forEach(el => (el.style.display = "inline-block"));
document.getElementById("battleNameSection").style.display = "none"; document.getElementById("battleNameSection").style.display = "none";
} }
changeName(ev) { changeName(ev) {
this.name = ev.target.value; this.name = ev.target.value;
$("#battleScreen").dialog({"title":this.name}); $("#battleScreen").dialog({title: this.name});
} }
generateName(type) { generateName(type) {
const place = type === "culture" const place = type === "culture" ? Names.getCulture(pack.cells.culture[this.cell], null, null, "") : Names.getBase(rand(nameBases.length - 1));
? Names.getCulture(pack.cells.culture[this.cell], null, null, "")
: Names.getBase(rand(nameBases.length-1));
document.getElementById("battleNamePlace").value = this.place = place; document.getElementById("battleNamePlace").value = this.place = place;
document.getElementById("battleNameFull").value = this.name = this.defineName(); document.getElementById("battleNameFull").value = this.name = this.defineName();
$("#battleScreen").dialog({"title":this.name}); $("#battleScreen").dialog({title: this.name});
} }
getJoinedForces(regiments) { getJoinedForces(regiments) {
@ -266,47 +286,47 @@ class Battle {
calculateStrength(side) { calculateStrength(side) {
const scheme = { const scheme = {
// field battle phases // field battle phases
"skirmish": {"melee":.2, "ranged":2.4, "mounted":.1, "machinery":3, "naval":1, "armored":.2, "aviation":1.8, "magical":1.8}, // ranged excel skirmish: {melee: 0.2, ranged: 2.4, mounted: 0.1, machinery: 3, naval: 1, armored: 0.2, aviation: 1.8, magical: 1.8}, // ranged excel
"melee": {"melee":2, "ranged":1.2, "mounted":1.5, "machinery":.5, "naval":.2, "armored":2, "aviation":.8, "magical":.8}, // melee excel melee: {melee: 2, ranged: 1.2, mounted: 1.5, machinery: 0.5, naval: 0.2, armored: 2, aviation: 0.8, magical: 0.8}, // melee excel
"pursue": {"melee":1, "ranged":1, "mounted":4, "machinery":.05, "naval":1, "armored":1, "aviation":1.5, "magical":.6}, // mounted excel pursue: {melee: 1, ranged: 1, mounted: 4, machinery: 0.05, naval: 1, armored: 1, aviation: 1.5, magical: 0.6}, // mounted excel
"retreat": {"melee":.1, "ranged":.01, "mounted":.5, "machinery":.01, "naval":.2, "armored":.1, "aviation":.8, "magical":.05}, // reduced retreat: {melee: 0.1, ranged: 0.01, mounted: 0.5, machinery: 0.01, naval: 0.2, armored: 0.1, aviation: 0.8, magical: 0.05}, // reduced
// naval battle phases // naval battle phases
"shelling": {"melee":0, "ranged":.2, "mounted":0, "machinery":2, "naval":2, "armored":0, "aviation":.1, "magical":.5}, // naval and machinery excel shelling: {melee: 0, ranged: 0.2, mounted: 0, machinery: 2, naval: 2, armored: 0, aviation: 0.1, magical: 0.5}, // naval and machinery excel
"boarding": {"melee":1, "ranged":.5, "mounted":.5, "machinery":0, "naval":.5, "armored":.4, "aviation":0, "magical":.2}, // melee excel boarding: {melee: 1, ranged: 0.5, mounted: 0.5, machinery: 0, naval: 0.5, armored: 0.4, aviation: 0, magical: 0.2}, // melee excel
"chase": {"melee":0, "ranged":.15, "mounted":0, "machinery":1, "naval":1, "armored":0, "aviation":.15, "magical":.5}, // reduced chase: {melee: 0, ranged: 0.15, mounted: 0, machinery: 1, naval: 1, armored: 0, aviation: 0.15, magical: 0.5}, // reduced
"withdrawal": {"melee":0, "ranged":.02, "mounted":0, "machinery":.5, "naval":.1, "armored":0, "aviation":.1, "magical":.3}, // reduced withdrawal: {melee: 0, ranged: 0.02, mounted: 0, machinery: 0.5, naval: 0.1, armored: 0, aviation: 0.1, magical: 0.3}, // reduced
// siege phases // siege phases
"blockade": {"melee":.25, "ranged":.25, "mounted":.2, "machinery":.5, "naval":.2, "armored":.1, "aviation":.25, "magical":.25}, // no active actions blockade: {melee: 0.25, ranged: 0.25, mounted: 0.2, machinery: 0.5, naval: 0.2, armored: 0.1, aviation: 0.25, magical: 0.25}, // no active actions
"sheltering": {"melee":.3, "ranged":.5, "mounted":.2, "machinery":.5, "naval":.2, "armored":.1, "aviation":.25, "magical":.25}, // no active actions sheltering: {melee: 0.3, ranged: 0.5, mounted: 0.2, machinery: 0.5, naval: 0.2, armored: 0.1, aviation: 0.25, magical: 0.25}, // no active actions
"sortie": {"melee":2, "ranged":.5, "mounted":1.2, "machinery":.2, "naval":.1, "armored":.5, "aviation":1, "magical":1}, // melee excel sortie: {melee: 2, ranged: 0.5, mounted: 1.2, machinery: 0.2, naval: 0.1, armored: 0.5, aviation: 1, magical: 1}, // melee excel
"bombardment": {"melee":.2, "ranged":.5, "mounted":.2, "machinery":3, "naval":1, "armored":.5, "aviation":1, "magical":1}, // machinery excel bombardment: {melee: 0.2, ranged: 0.5, mounted: 0.2, machinery: 3, naval: 1, armored: 0.5, aviation: 1, magical: 1}, // machinery excel
"storming": {"melee":1, "ranged":.6, "mounted":.5, "machinery":1, "naval":.1, "armored":.1, "aviation":.5, "magical":.5}, // melee excel storming: {melee: 1, ranged: 0.6, mounted: 0.5, machinery: 1, naval: 0.1, armored: 0.1, aviation: 0.5, magical: 0.5}, // melee excel
"defense": {"melee":2, "ranged":3, "mounted":1, "machinery":1, "naval":.1, "armored":1, "aviation":.5, "magical":1}, // ranged excel defense: {melee: 2, ranged: 3, mounted: 1, machinery: 1, naval: 0.1, armored: 1, aviation: 0.5, magical: 1}, // ranged excel
"looting": {"melee":1.6, "ranged":1.6, "mounted":.5, "machinery":.2, "naval":.02, "armored":.2, "aviation":.1, "magical":.3}, // melee excel looting: {melee: 1.6, ranged: 1.6, mounted: 0.5, machinery: 0.2, naval: 0.02, armored: 0.2, aviation: 0.1, magical: 0.3}, // melee excel
"surrendering": {"melee":.1, "ranged":.1, "mounted":.05, "machinery":.01, "naval":.01, "armored":.02, "aviation":.01, "magical":.03}, // reduced surrendering: {melee: 0.1, ranged: 0.1, mounted: 0.05, machinery: 0.01, naval: 0.01, armored: 0.02, aviation: 0.01, magical: 0.03}, // reduced
// ambush phases // ambush phases
"surprise": {"melee":2, "ranged":2.4, "mounted":1, "machinery":1, "naval":1, "armored":1, "aviation":.8, "magical":1.2}, // increased surprise: {melee: 2, ranged: 2.4, mounted: 1, machinery: 1, naval: 1, armored: 1, aviation: 0.8, magical: 1.2}, // increased
"shock": {"melee":.5, "ranged":.5, "mounted":.5, "machinery":.4, "naval":.3, "armored":.1, "aviation":.4, "magical":.5}, // reduced shock: {melee: 0.5, ranged: 0.5, mounted: 0.5, machinery: 0.4, naval: 0.3, armored: 0.1, aviation: 0.4, magical: 0.5}, // reduced
// langing phases // langing phases
"landing": {"melee":.8, "ranged":.6, "mounted":.6, "machinery":.5, "naval":.5, "armored":.5, "aviation":.5, "magical":.6}, // reduced landing: {melee: 0.8, ranged: 0.6, mounted: 0.6, machinery: 0.5, naval: 0.5, armored: 0.5, aviation: 0.5, magical: 0.6}, // reduced
"flee": {"melee":.1, "ranged":.01, "mounted":.5, "machinery":.01, "naval":.5, "armored":.1, "aviation":.2, "magical":.05}, // reduced flee: {melee: 0.1, ranged: 0.01, mounted: 0.5, machinery: 0.01, naval: 0.5, armored: 0.1, aviation: 0.2, magical: 0.05}, // reduced
"waiting": {"melee":.05, "ranged":.5, "mounted":.05, "machinery":.5, "naval":2, "armored":.05, "aviation":.5, "magical":.5}, // reduced waiting: {melee: 0.05, ranged: 0.5, mounted: 0.05, machinery: 0.5, naval: 2, armored: 0.05, aviation: 0.5, magical: 0.5}, // reduced
// air battle phases // air battle phases
"maneuvering": {"melee":0, "ranged":.1, "mounted":0, "machinery":.2, "naval":0, "armored":0, "aviation":1, "magical":.2}, // aviation maneuvering: {melee: 0, ranged: 0.1, mounted: 0, machinery: 0.2, naval: 0, armored: 0, aviation: 1, magical: 0.2}, // aviation
"dogfight": {"melee":0, "ranged":.1, "mounted":0, "machinery":.1, "naval":0, "armored":0, "aviation":2, "magical":.1} // aviation dogfight: {melee: 0, ranged: 0.1, mounted: 0, machinery: 0.1, naval: 0, armored: 0, aviation: 2, magical: 0.1} // aviation
}; };
const forces = this.getJoinedForces(this[side].regiments); const forces = this.getJoinedForces(this[side].regiments);
const phase = this[side].phase; const phase = this[side].phase;
const adjuster = Math.max(populationRate.value / 10, 10); // population adjuster, by default 100 const adjuster = Math.max(populationRate / 10, 10); // population adjuster, by default 100
this[side].power = d3.sum(options.military.map(u => (forces[u.name] || 0) * u.power * scheme[phase][u.type])) / adjuster; this[side].power = d3.sum(options.military.map(u => (forces[u.name] || 0) * u.power * scheme[phase][u.type])) / adjuster;
const UIvalue = this[side].power ? Math.max(this[side].power|0, 1) : 0; const UIvalue = this[side].power ? Math.max(this[side].power | 0, 1) : 0;
document.getElementById("battlePower_"+side).innerHTML = UIvalue; document.getElementById("battlePower_" + side).innerHTML = UIvalue;
} }
getInitialMorale() { getInitialMorale() {
@ -320,7 +340,7 @@ class Battle {
} }
updateMorale(side) { updateMorale(side) {
const morale = document.getElementById("battleMorale_"+side); const morale = document.getElementById("battleMorale_" + side);
morale.dataset.tip = morale.dataset.tip.replace(morale.value, ""); morale.dataset.tip = morale.dataset.tip.replace(morale.value, "");
morale.value = this[side].morale | 0; morale.value = this[side].morale | 0;
morale.dataset.tip += morale.value; morale.dataset.tip += morale.value;
@ -335,9 +355,11 @@ class Battle {
} }
rollDie(side) { rollDie(side) {
const el = document.getElementById("battleDie_"+side); const el = document.getElementById("battleDie_" + side);
const prev = +el.innerHTML; const prev = +el.innerHTML;
do {el.innerHTML = rand(1, 6)} while (el.innerHTML == prev) do {
el.innerHTML = rand(1, 6);
} while (el.innerHTML == prev);
this[side].die = +el.innerHTML; this[side].die = +el.innerHTML;
} }
@ -357,12 +379,18 @@ class Battle {
if (prev[0] === "skirmish" && prev[1] === "skirmish") { if (prev[0] === "skirmish" && prev[1] === "skirmish") {
const forces = this.getJoinedForces(this.attackers.regiments.concat(this.defenders.regiments)); const forces = this.getJoinedForces(this.attackers.regiments.concat(this.defenders.regiments));
const total = d3.sum(Object.values(forces)); // total forces const total = d3.sum(Object.values(forces)); // total forces
const ranged = d3.sum(options.military.filter(u => u.type === "ranged").map(u => u.name).map(u => forces[u])) / total; // ranged units const ranged =
if (P(ranged) || P(.8-i/10)) return ["skirmish", "skirmish"]; d3.sum(
options.military
.filter(u => u.type === "ranged")
.map(u => u.name)
.map(u => forces[u])
) / total; // ranged units
if (P(ranged) || P(0.8 - i / 10)) return ["skirmish", "skirmish"];
} }
return ["melee", "melee"]; // default option return ["melee", "melee"]; // default option
} };
const getNavalBattlePhase = () => { const getNavalBattlePhase = () => {
const prev = [this.attackers.phase || "shelling", this.defenders.phase || "shelling"]; // previous phase const prev = [this.attackers.phase || "shelling", this.defenders.phase || "shelling"]; // previous phase
@ -372,66 +400,66 @@ class Battle {
// withdrawal phase when power imbalanced // withdrawal phase when power imbalanced
if (!prev[0] === "boarding") { if (!prev[0] === "boarding") {
if (powerRatio < .5 || P(this.attackers.casualties) && powerRatio < 1) return ["withdrawal", "chase"]; if (powerRatio < 0.5 || (P(this.attackers.casualties) && powerRatio < 1)) return ["withdrawal", "chase"];
if (powerRatio > 2 || P(this.defenders.casualties) && powerRatio > 1) return ["chase", "withdrawal"]; if (powerRatio > 2 || (P(this.defenders.casualties) && powerRatio > 1)) return ["chase", "withdrawal"];
} }
// boarding phase can start from 2nd iteration // boarding phase can start from 2nd iteration
if (prev[0] === "boarding" || P(i/10 - .1)) return ["boarding", "boarding"]; if (prev[0] === "boarding" || P(i / 10 - 0.1)) return ["boarding", "boarding"];
return ["shelling", "shelling"]; // default option return ["shelling", "shelling"]; // default option
} };
const getSiegePhase = () => { const getSiegePhase = () => {
const prev = [this.attackers.phase || "blockade", this.defenders.phase || "sheltering"]; // previous phase const prev = [this.attackers.phase || "blockade", this.defenders.phase || "sheltering"]; // previous phase
let phase = ["blockade", "sheltering"] // default phase let phase = ["blockade", "sheltering"]; // default phase
if (prev[0] === "retreat" || prev[0] === "looting") return prev; if (prev[0] === "retreat" || prev[0] === "looting") return prev;
if (P(1 - morale[0] / 30) && powerRatio < 1) return ["retreat", "pursue"]; // attackers retreat chance if moral < 30 if (P(1 - morale[0] / 30) && powerRatio < 1) return ["retreat", "pursue"]; // attackers retreat chance if moral < 30
if (P(1 - morale[1] / 15)) return ["looting", "surrendering"]; // defenders surrendering chance if moral < 15 if (P(1 - morale[1] / 15)) return ["looting", "surrendering"]; // defenders surrendering chance if moral < 15
if (P((powerRatio-1) / 2)) return ["storming", "defense"]; // start storm if (P((powerRatio - 1) / 2)) return ["storming", "defense"]; // start storm
if (prev[0] !== "storming") { if (prev[0] !== "storming") {
const machinery = options.military.filter(u => u.type === "machinery").map(u => u.name); // machinery units const machinery = options.military.filter(u => u.type === "machinery").map(u => u.name); // machinery units
const attackers = this.getJoinedForces(this.attackers.regiments); const attackers = this.getJoinedForces(this.attackers.regiments);
const machineryA = d3.sum(machinery.map(u => attackers[u])); const machineryA = d3.sum(machinery.map(u => attackers[u]));
if (i && machineryA && P(.9)) phase[0] = "bombardment"; if (i && machineryA && P(0.9)) phase[0] = "bombardment";
const defenders = this.getJoinedForces(this.defenders.regiments); const defenders = this.getJoinedForces(this.defenders.regiments);
const machineryD = d3.sum(machinery.map(u => defenders[u])); const machineryD = d3.sum(machinery.map(u => defenders[u]));
if (machineryD && P(.9)) phase[1] = "bombardment"; if (machineryD && P(0.9)) phase[1] = "bombardment";
if (i && prev[1] !== "sortie" && machineryD < machineryA && P(.25) && P(morale[1]/70)) phase[1] = "sortie"; // defenders sortie if (i && prev[1] !== "sortie" && machineryD < machineryA && P(0.25) && P(morale[1] / 70)) phase[1] = "sortie"; // defenders sortie
} }
return phase; return phase;
} };
const getAmbushPhase = () => { const getAmbushPhase = () => {
const prev = [this.attackers.phase || "shock", this.defenders.phase || "surprise"]; // previous phase const prev = [this.attackers.phase || "shock", this.defenders.phase || "surprise"]; // previous phase
if (prev[1] === "surprise" && P(1-powerRatio*i/5)) return ["shock", "surprise"]; if (prev[1] === "surprise" && P(1 - (powerRatio * i) / 5)) return ["shock", "surprise"];
// chance if moral < 25 // chance if moral < 25
if (P(1 - morale[0] / 25)) return ["retreat", "pursue"]; if (P(1 - morale[0] / 25)) return ["retreat", "pursue"];
if (P(1 - morale[1] / 25)) return ["pursue", "retreat"]; if (P(1 - morale[1] / 25)) return ["pursue", "retreat"];
return ["melee", "melee"]; // default option return ["melee", "melee"]; // default option
} };
const getLandingPhase = () => { const getLandingPhase = () => {
const prev = [this.attackers.phase || "landing", this.defenders.phase || "defense"]; // previous phase const prev = [this.attackers.phase || "landing", this.defenders.phase || "defense"]; // previous phase
if (prev[1] === "waiting") return ["flee", "waiting"]; if (prev[1] === "waiting") return ["flee", "waiting"];
if (prev[1] === "pursue") return ["flee", P(.3) ? "pursue" : "waiting"]; if (prev[1] === "pursue") return ["flee", P(0.3) ? "pursue" : "waiting"];
if (prev[1] === "retreat") return ["pursue", "retreat"]; if (prev[1] === "retreat") return ["pursue", "retreat"];
if (prev[0] === "landing") { if (prev[0] === "landing") {
const attackers = P(i/2) ? "melee" : "landing"; const attackers = P(i / 2) ? "melee" : "landing";
const defenders = i ? prev[1] : P(.5) ? "defense" : "shock"; const defenders = i ? prev[1] : P(0.5) ? "defense" : "shock";
return [attackers, defenders]; return [attackers, defenders];
} }
@ -439,7 +467,7 @@ class Battle {
if (P(1 - morale[1] / 25)) return ["pursue", "retreat"]; // chance if moral < 25 if (P(1 - morale[1] / 25)) return ["pursue", "retreat"]; // chance if moral < 25
return ["melee", "melee"]; // default option return ["melee", "melee"]; // default option
} };
const getAirBattlePhase = () => { const getAirBattlePhase = () => {
const prev = [this.attackers.phase || "maneuvering", this.defenders.phase || "maneuvering"]; // previous phase const prev = [this.attackers.phase || "maneuvering", this.defenders.phase || "maneuvering"]; // previous phase
@ -448,53 +476,87 @@ class Battle {
if (P(1 - morale[0] / 25)) return ["retreat", "pursue"]; if (P(1 - morale[0] / 25)) return ["retreat", "pursue"];
if (P(1 - morale[1] / 25)) return ["pursue", "retreat"]; if (P(1 - morale[1] / 25)) return ["pursue", "retreat"];
if (prev[0] === "maneuvering" && P(1-i/10)) return ["maneuvering", "maneuvering"]; if (prev[0] === "maneuvering" && P(1 - i / 10)) return ["maneuvering", "maneuvering"];
return ["dogfight", "dogfight"]; // default option return ["dogfight", "dogfight"]; // default option
} };
const phase = function(type) { const phase = (function (type) {
switch (type) { switch (type) {
case "field": return getFieldBattlePhase(); case "field":
case "naval": return getNavalBattlePhase(); return getFieldBattlePhase();
case "siege": return getSiegePhase(); case "naval":
case "ambush": return getAmbushPhase(); return getNavalBattlePhase();
case "landing": return getLandingPhase(); case "siege":
case "air": return getAirBattlePhase(); return getSiegePhase();
default: getFieldBattlePhase(); case "ambush":
return getAmbushPhase();
case "landing":
return getLandingPhase();
case "air":
return getAirBattlePhase();
default:
getFieldBattlePhase();
} }
}(this.type); })(this.type);
this.attackers.phase = phase[0]; this.attackers.phase = phase[0];
this.defenders.phase = phase[1]; this.defenders.phase = phase[1];
const buttonA = document.getElementById("battlePhase_attackers"); const buttonA = document.getElementById("battlePhase_attackers");
buttonA.className = "icon-button-" + this.attackers.phase; buttonA.className = "icon-button-" + this.attackers.phase;
buttonA.dataset.tip = buttonA.nextElementSibling.querySelector("[data-phase='"+phase[0]+"']").dataset.tip; buttonA.dataset.tip = buttonA.nextElementSibling.querySelector("[data-phase='" + phase[0] + "']").dataset.tip;
const buttonD = document.getElementById("battlePhase_defenders"); const buttonD = document.getElementById("battlePhase_defenders");
buttonD.className = "icon-button-" + this.defenders.phase; buttonD.className = "icon-button-" + this.defenders.phase;
buttonD.dataset.tip = buttonD.nextElementSibling.querySelector("[data-phase='"+phase[1]+"']").dataset.tip; buttonD.dataset.tip = buttonD.nextElementSibling.querySelector("[data-phase='" + phase[1] + "']").dataset.tip;
} }
run() { run() {
// validations // validations
if (!this.attackers.power) {tip("Attackers army destroyed", false, "warn"); return} if (!this.attackers.power) {
if (!this.defenders.power) {tip("Defenders army destroyed", false, "warn"); return} tip("Attackers army destroyed", false, "warn");
return;
}
if (!this.defenders.power) {
tip("Defenders army destroyed", false, "warn");
return;
}
// calculate casualties // calculate casualties
const attack = this.attackers.power * (this.attackers.die / 10 + .4); const attack = this.attackers.power * (this.attackers.die / 10 + 0.4);
const defense = this.defenders.power * (this.defenders.die / 10 + .4); const defense = this.defenders.power * (this.defenders.die / 10 + 0.4);
// casualties modifier for phase // casualties modifier for phase
const phase = { const phase = {
"skirmish":.1, "melee":.2, "pursue":.3, "retreat":.3, "boarding":.2, "shelling":.1, "chase":.03, "withdrawal": .03, skirmish: 0.1,
"blockade":0, "sheltering":0, "sortie":.1, "bombardment":.05, "storming":.2, "defense":.2, "looting":.5, "surrendering":.5, melee: 0.2,
"surprise":.3, "shock":.3, "landing":.3, "flee":0, "waiting":0, "maneuvering":.1, "dogfight":.2}; pursue: 0.3,
retreat: 0.3,
boarding: 0.2,
shelling: 0.1,
chase: 0.03,
withdrawal: 0.03,
blockade: 0,
sheltering: 0,
sortie: 0.1,
bombardment: 0.05,
storming: 0.2,
defense: 0.2,
looting: 0.5,
surrendering: 0.5,
surprise: 0.3,
shock: 0.3,
landing: 0.3,
flee: 0,
waiting: 0,
maneuvering: 0.1,
dogfight: 0.2
};
const casualties = Math.random() * (Math.max(phase[this.attackers.phase], phase[this.defenders.phase])); // total casualties, ~10% per iteration const casualties = Math.random() * Math.max(phase[this.attackers.phase], phase[this.defenders.phase]); // total casualties, ~10% per iteration
const casualtiesA = casualties * defense / (attack + defense); // attackers casualties, ~5% per iteration const casualtiesA = (casualties * defense) / (attack + defense); // attackers casualties, ~5% per iteration
const casualtiesD = casualties * attack / (attack + defense); // defenders casualties, ~5% per iteration const casualtiesD = (casualties * attack) / (attack + defense); // defenders casualties, ~5% per iteration
this.calculateCasualties("attackers", casualtiesA); this.calculateCasualties("attackers", casualtiesA);
this.calculateCasualties("defenders", casualtiesD); this.calculateCasualties("defenders", casualtiesD);
@ -519,7 +581,7 @@ class Battle {
calculateCasualties(side, casualties) { calculateCasualties(side, casualties) {
for (const r of this[side].regiments) { for (const r of this[side].regiments) {
for (const unit in r.u) { for (const unit in r.u) {
const rand = .8 + Math.random() * .4; const rand = 0.8 + Math.random() * 0.4;
const died = Math.min(Pint(r.u[unit] * casualties * rand), r.survivors[unit]); const died = Math.min(Pint(r.u[unit] * casualties * rand), r.survivors[unit]);
r.casualties[unit] -= died; r.casualties[unit] -= died;
r.survivors[unit] -= died; r.survivors[unit] -= died;
@ -551,10 +613,16 @@ class Battle {
const button = ev.target; const button = ev.target;
const div = button.nextElementSibling; const div = button.nextElementSibling;
const hideSection = function() {button.style.opacity = 1; div.style.display = "none"} const hideSection = function () {
if (div.style.display === "block") {hideSection(); return} button.style.opacity = 1;
div.style.display = "none";
};
if (div.style.display === "block") {
hideSection();
return;
}
button.style.opacity = .5; button.style.opacity = 0.5;
div.style.display = "block"; div.style.display = "block";
document.getElementsByTagName("body")[0].addEventListener("click", hideSection, {once: true}); document.getElementsByTagName("body")[0].addEventListener("click", hideSection, {once: true});
@ -568,13 +636,13 @@ class Battle {
this.calculateStrength("attackers"); this.calculateStrength("attackers");
this.calculateStrength("defenders"); this.calculateStrength("defenders");
this.name = this.defineName(); this.name = this.defineName();
$("#battleScreen").dialog({"title":this.name}); $("#battleScreen").dialog({title: this.name});
} }
changePhase(ev, side) { changePhase(ev, side) {
if (ev.target.tagName !== "BUTTON") return; if (ev.target.tagName !== "BUTTON") return;
const phase = this[side].phase = ev.target.dataset.phase; const phase = (this[side].phase = ev.target.dataset.phase);
const button = document.getElementById("battlePhase_"+side); const button = document.getElementById("battlePhase_" + side);
button.className = "icon-button-" + phase; button.className = "icon-button-" + phase;
button.dataset.tip = ev.target.dataset.tip; button.dataset.tip = ev.target.dataset.tip;
this.calculateStrength(side); this.calculateStrength(side);
@ -587,12 +655,12 @@ class Battle {
const battleStatus = getBattleStatus(relativeCasualties, maxCasualties); const battleStatus = getBattleStatus(relativeCasualties, maxCasualties);
function getBattleStatus(relative, max) { function getBattleStatus(relative, max) {
if (isNaN(relative)) return ["standoff", "standoff"]; // if no casualties at all if (isNaN(relative)) return ["standoff", "standoff"]; // if no casualties at all
if (max < .05) return ["minor skirmishes", "minor skirmishes"]; if (max < 0.05) return ["minor skirmishes", "minor skirmishes"];
if (relative > 95) return ["attackers flawless victory", "disorderly retreat of defenders"]; if (relative > 95) return ["attackers flawless victory", "disorderly retreat of defenders"];
if (relative > .7) return ["attackers decisive victory", "defenders disastrous defeat"]; if (relative > 0.7) return ["attackers decisive victory", "defenders disastrous defeat"];
if (relative > .6) return ["attackers victory", "defenders defeat"]; if (relative > 0.6) return ["attackers victory", "defenders defeat"];
if (relative > .4) return ["stalemate", "stalemate"]; if (relative > 0.4) return ["stalemate", "stalemate"];
if (relative > .3) return ["attackers defeat", "defenders victory"]; if (relative > 0.3) return ["attackers defeat", "defenders victory"];
if (relative > 0.5) return ["attackers disastrous defeat", "decisive victory of defenders"]; if (relative > 0.5) return ["attackers disastrous defeat", "decisive victory of defenders"];
if (relative >= 0) return ["attackers disorderly retreat", "flawless victory of defenders"]; if (relative >= 0) return ["attackers disorderly retreat", "flawless victory of defenders"];
return ["stalemate", "stalemate"]; // exception return ["stalemate", "stalemate"]; // exception
@ -609,16 +677,10 @@ class Battle {
if (note) { if (note) {
const status = side === "attackers" ? battleStatus[0] : battleStatus[1]; const status = side === "attackers" ? battleStatus[0] : battleStatus[1];
const losses = r.a ? Math.abs(d3.sum(Object.values(r.casualties))) / r.a : 1; const losses = r.a ? Math.abs(d3.sum(Object.values(r.casualties))) / r.a : 1;
const regStatus = const regStatus = losses === 1 ? "is destroyed" : losses > 0.8 ? "is almost completely destroyed" : losses > 0.5 ? "suffered terrible losses" : losses > 0.3 ? "suffered severe losses" : losses > 0.2 ? "suffered heavy losses" : losses > 0.05 ? "suffered significant losses" : losses > 0 ? "suffered unsignificant losses" : "left the battle without loss";
losses === 1 ? "is destroyed" : const casualties = Object.keys(r.casualties)
losses > .8 ? "is almost completely destroyed" : .map(t => (r.casualties[t] ? `${Math.abs(r.casualties[t])} ${t}` : null))
losses > .5 ? "suffered terrible losses" : .filter(c => c);
losses > .3 ? "suffered severe losses" :
losses > .2 ? "suffered heavy losses" :
losses > .05 ? "suffered significant losses" :
losses > 0 ? "suffered unsignificant losses" :
"left the battle without loss";
const casualties = Object.keys(r.casualties).map(t => r.casualties[t] ? `${Math.abs(r.casualties[t])} ${t}` : null).filter(c => c);
const casualtiesText = casualties.length ? " Casualties: " + list(casualties) + "." : ""; const casualtiesText = casualties.length ? " Casualties: " + list(casualties) + "." : "";
const legend = `\r\n\r\n${battleName} (${options.year} ${options.eraShort}): ${status}. The regiment ${regStatus}.${casualtiesText}`; const legend = `\r\n\r\n${battleName} (${options.year} ${options.eraShort}): ${status}. The regiment ${regStatus}.${casualtiesText}`;
note.legend += legend; note.legend += legend;
@ -630,33 +692,38 @@ class Battle {
} }
// append battlefield marker // append battlefield marker
void function addMarkerSymbol() { void (function addMarkerSymbol() {
if (svg.select("#defs-markers").select("#marker_battlefield").size()) return; if (svg.select("#defs-markers").select("#marker_battlefield").size()) return;
const symbol = svg.select("#defs-markers").append("symbol").attr("id", "marker_battlefield").attr("viewBox", "0 0 30 30"); const symbol = svg.select("#defs-markers").append("symbol").attr("id", "marker_battlefield").attr("viewBox", "0 0 30 30");
symbol.append("path").attr("d", "M6,19 l9,10 L24,19").attr("fill", "#000000").attr("stroke", "none"); symbol.append("path").attr("d", "M6,19 l9,10 L24,19").attr("fill", "#000000").attr("stroke", "none");
symbol.append("circle").attr("cx", 15).attr("cy", 15).attr("r", 10).attr("fill", "#ffffff").attr("stroke", "#000000").attr("stroke-width", 1); symbol.append("circle").attr("cx", 15).attr("cy", 15).attr("r", 10).attr("fill", "#ffffff").attr("stroke", "#000000").attr("stroke-width", 1);
symbol.append("text").attr("x", "50%").attr("y", "52%").attr("fill", "#000000").attr("stroke", "#3200ff").attr("stroke-width", 0) symbol.append("text").attr("x", "50%").attr("y", "52%").attr("fill", "#000000").attr("stroke", "#3200ff").attr("stroke-width", 0).attr("font-size", "12px").attr("dominant-baseline", "central").text("⚔️");
.attr("font-size", "12px").attr("dominant-baseline", "central").text("⚔️"); })();
}()
const getSide = (regs, n) => regs.length > 1 const getSide = (regs, n) => (regs.length > 1 ? `${n ? "regiments" : "forces"} of ${list([...new Set(regs.map(r => pack.states[r.state].name))])}` : getAdjective(pack.states[regs[0].state].name) + " " + regs[0].name);
? `${n ? "regiments" : "forces"} of ${list([... new Set(regs.map(r => pack.states[r.state].name))])}`
: getAdjective(pack.states[regs[0].state].name) + " " + regs[0].name;
const getLosses = casualties => Math.min(rn(casualties * 100), 100); const getLosses = casualties => Math.min(rn(casualties * 100), 100);
const status = battleStatus[+P(.7)]; const status = battleStatus[+P(0.7)];
const result = `The ${this.getTypeName(this.type)} ended in ${status}`; const result = `The ${this.getTypeName(this.type)} ended in ${status}`;
const legend = `${this.name} took place in ${options.year} ${options.eraShort}. It was fought between ${getSide(this.attackers.regiments, 1)} and ${getSide(this.defenders.regiments, 0)}. ${result}. const legend = `${this.name} took place in ${options.year} ${options.eraShort}. It was fought between ${getSide(this.attackers.regiments, 1)} and ${getSide(this.defenders.regiments, 0)}. ${result}.
\r\nAttackers losses: ${getLosses(this.attackers.casualties)}%, defenders losses: ${getLosses(this.defenders.casualties)}%`; \r\nAttackers losses: ${getLosses(this.attackers.casualties)}%, defenders losses: ${getLosses(this.defenders.casualties)}%`;
const id = getNextId("markerElement"); const id = getNextId("markerElement");
notes.push({id, name:this.name, legend}); notes.push({id, name: this.name, legend});
tip(`${this.name} is over. ${result}`, true, "success", 4000); tip(`${this.name} is over. ${result}`, true, "success", 4000);
markers.append("use").attr("id", id) markers
.attr("xlink:href", "#marker_battlefield").attr("data-id", "#marker_battlefield") .append("use")
.attr("data-x", this.x).attr("data-y", this.y).attr("x", this.x - 15).attr("y", this.y - 30) .attr("id", id)
.attr("data-size", 1).attr("width", 30).attr("height", 30); .attr("xlink:href", "#marker_battlefield")
.attr("data-id", "#marker_battlefield")
.attr("data-x", this.x)
.attr("data-y", this.y)
.attr("x", this.x - 15)
.attr("y", this.y - 30)
.attr("data-size", 1)
.attr("width", 30)
.attr("height", 30);
$("#battleScreen").dialog("destroy"); $("#battleScreen").dialog("destroy");
this.cleanData(); this.cleanData();
@ -682,5 +749,4 @@ class Battle {
}); });
delete Battle.prototype.context; delete Battle.prototype.context;
} }
} }

168
modules/ui/biomes-editor.js
View file

@ -16,7 +16,10 @@ function editBiomes() {
modules.editBiomes = true; modules.editBiomes = true;
$("#biomesEditor").dialog({ $("#biomesEditor").dialog({
title: "Biomes Editor", resizable: false, width: fitContent(), close: closeBiomesEditor, title: "Biomes Editor",
resizable: false,
width: fitContent(),
close: closeBiomesEditor,
position: {my: "right top", at: "right-10 top+10", of: "svg"} position: {my: "right top", at: "right-10 top+10", of: "svg"}
}); });
@ -33,18 +36,20 @@ function editBiomes() {
document.getElementById("biomesRegenerateReliefIcons").addEventListener("click", regenerateIcons); document.getElementById("biomesRegenerateReliefIcons").addEventListener("click", regenerateIcons);
document.getElementById("biomesExport").addEventListener("click", downloadBiomesData); document.getElementById("biomesExport").addEventListener("click", downloadBiomesData);
body.addEventListener("click", function(ev) { body.addEventListener("click", function (ev) {
const el = ev.target, cl = el.classList; const el = ev.target,
if (cl.contains("fillRect")) biomeChangeColor(el); else cl = el.classList;
if (cl.contains("icon-info-circled")) openWiki(el); else if (cl.contains("fillRect")) biomeChangeColor(el);
if (cl.contains("icon-trash-empty")) removeCustomBiome(el); else if (cl.contains("icon-info-circled")) openWiki(el);
else if (cl.contains("icon-trash-empty")) removeCustomBiome(el);
if (customization === 6) selectBiomeOnLineClick(el); if (customization === 6) selectBiomeOnLineClick(el);
}); });
body.addEventListener("change", function(ev) { body.addEventListener("change", function (ev) {
const el = ev.target, cl = el.classList; const el = ev.target,
if (cl.contains("biomeName")) biomeChangeName(el); else cl = el.classList;
if (cl.contains("biomeHabitability")) biomeChangeHabitability(el); if (cl.contains("biomeName")) biomeChangeName(el);
else if (cl.contains("biomeHabitability")) biomeChangeHabitability(el);
}); });
function refreshBiomesEditor() { function refreshBiomesEditor() {
@ -73,13 +78,15 @@ function editBiomes() {
function biomesEditorAddLines() { function biomesEditorAddLines() {
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value; const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
const b = biomesData; const b = biomesData;
let lines = "", totalArea = 0, totalPopulation = 0;; let lines = "",
totalArea = 0,
totalPopulation = 0;
for (const i of b.i) { for (const i of b.i) {
if (!i || biomesData.name[i] === "removed") continue; // ignore water and removed biomes if (!i || biomesData.name[i] === "removed") continue; // ignore water and removed biomes
const area = b.area[i] * distanceScaleInput.value ** 2; const area = b.area[i] * distanceScaleInput.value ** 2;
const rural = b.rural[i] * populationRate.value; const rural = b.rural[i] * populationRate;
const urban = b.urban[i] * populationRate.value * urbanization.value; const urban = b.urban[i] * populationRate * urbanization;
const population = rn(rural + urban); const population = rn(rural + urban);
const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}`; const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}`;
totalArea += area; totalArea += area;
@ -98,7 +105,7 @@ function editBiomes() {
<span data-tip="${populationTip}" class="icon-male hide"></span> <span data-tip="${populationTip}" class="icon-male hide"></span>
<div data-tip="${populationTip}" class="biomePopulation hide">${si(population)}</div> <div data-tip="${populationTip}" class="biomePopulation hide">${si(population)}</div>
<span data-tip="Open Wikipedia article about the biome" class="icon-info-circled pointer hide"></span> <span data-tip="Open Wikipedia article about the biome" class="icon-info-circled pointer hide"></span>
${i>12 && !b.cells[i] ? '<span data-tip="Remove the custom biome" class="icon-trash-empty hide"></span>' : ''} ${i > 12 && !b.cells[i] ? '<span data-tip="Remove the custom biome" class="icon-trash-empty hide"></span>' : ""}
</div>`; </div>`;
} }
body.innerHTML = lines; body.innerHTML = lines;
@ -115,7 +122,10 @@ function editBiomes() {
body.querySelectorAll("div.biomes").forEach(el => el.addEventListener("mouseenter", ev => biomeHighlightOn(ev))); body.querySelectorAll("div.biomes").forEach(el => el.addEventListener("mouseenter", ev => biomeHighlightOn(ev)));
body.querySelectorAll("div.biomes").forEach(el => el.addEventListener("mouseleave", ev => biomeHighlightOff(ev))); body.querySelectorAll("div.biomes").forEach(el => el.addEventListener("mouseleave", ev => biomeHighlightOff(ev)));
if (body.dataset.type === "percentage") {body.dataset.type = "absolute"; togglePercentageMode();} if (body.dataset.type === "percentage") {
body.dataset.type = "absolute";
togglePercentageMode();
}
applySorting(biomesHeader); applySorting(biomesHeader);
$("#biomesEditor").dialog({width: fitContent()}); $("#biomesEditor").dialog({width: fitContent()});
} }
@ -123,25 +133,37 @@ function editBiomes() {
function biomeHighlightOn(event) { function biomeHighlightOn(event) {
if (customization === 6) return; if (customization === 6) return;
const biome = +event.target.dataset.id; const biome = +event.target.dataset.id;
biomes.select("#biome"+biome).raise().transition(animate).attr("stroke-width", 2).attr("stroke", "#cd4c11"); biomes
.select("#biome" + biome)
.raise()
.transition(animate)
.attr("stroke-width", 2)
.attr("stroke", "#cd4c11");
} }
function biomeHighlightOff(event) { function biomeHighlightOff(event) {
if (customization === 6) return; if (customization === 6) return;
const biome = +event.target.dataset.id; const biome = +event.target.dataset.id;
const color = biomesData.color[biome]; const color = biomesData.color[biome];
biomes.select("#biome"+biome).transition().attr("stroke-width", .7).attr("stroke", color); biomes
.select("#biome" + biome)
.transition()
.attr("stroke-width", 0.7)
.attr("stroke", color);
} }
function biomeChangeColor(el) { function biomeChangeColor(el) {
const currentFill = el.getAttribute("fill"); const currentFill = el.getAttribute("fill");
const biome = +el.parentNode.parentNode.dataset.id; const biome = +el.parentNode.parentNode.dataset.id;
const callback = function(fill) { const callback = function (fill) {
el.setAttribute("fill", fill); el.setAttribute("fill", fill);
biomesData.color[biome] = fill; biomesData.color[biome] = fill;
biomes.select("#biome"+biome).attr("fill", fill).attr("stroke", fill); biomes
} .select("#biome" + biome)
.attr("fill", fill)
.attr("stroke", fill);
};
openPicker(currentFill, callback); openPicker(currentFill, callback);
} }
@ -168,30 +190,52 @@ function editBiomes() {
function openWiki(el) { function openWiki(el) {
const name = el.parentNode.dataset.name; const name = el.parentNode.dataset.name;
if (name === "Custom" || !name) {tip("Please provide a biome name", false, "error"); return;} if (name === "Custom" || !name) {
tip("Please provide a biome name", false, "error");
return;
}
const wiki = "https://en.wikipedia.org/wiki/"; const wiki = "https://en.wikipedia.org/wiki/";
switch (name) { switch (name) {
case "Hot desert": openURL(wiki + "Desert_climate#Hot_desert_climates"); case "Hot desert":
case "Cold desert": openURL(wiki + "Desert_climate#Cold_desert_climates"); openURL(wiki + "Desert_climate#Hot_desert_climates");
case "Savanna": openURL(wiki + "Tropical_and_subtropical_grasslands,_savannas,_and_shrublands"); case "Cold desert":
case "Grassland": openURL(wiki + "Temperate_grasslands,_savannas,_and_shrublands"); openURL(wiki + "Desert_climate#Cold_desert_climates");
case "Tropical seasonal forest": openURL(wiki + "Seasonal_tropical_forest"); case "Savanna":
case "Temperate deciduous forest": openURL(wiki + "Temperate_deciduous_forest"); openURL(wiki + "Tropical_and_subtropical_grasslands,_savannas,_and_shrublands");
case "Tropical rainforest": openURL(wiki + "Tropical_rainforest"); case "Grassland":
case "Temperate rainforest": openURL(wiki + "Temperate_rainforest"); openURL(wiki + "Temperate_grasslands,_savannas,_and_shrublands");
case "Taiga": openURL(wiki + "Taiga"); case "Tropical seasonal forest":
case "Tundra": openURL(wiki + "Tundra"); openURL(wiki + "Seasonal_tropical_forest");
case "Glacier": openURL(wiki + "Glacier"); case "Temperate deciduous forest":
case "Wetland": openURL(wiki + "Wetland"); openURL(wiki + "Temperate_deciduous_forest");
default: openURL(`https://en.wikipedia.org/w/index.php?search=${name}`); case "Tropical rainforest":
openURL(wiki + "Tropical_rainforest");
case "Temperate rainforest":
openURL(wiki + "Temperate_rainforest");
case "Taiga":
openURL(wiki + "Taiga");
case "Tundra":
openURL(wiki + "Tundra");
case "Glacier":
openURL(wiki + "Glacier");
case "Wetland":
openURL(wiki + "Wetland");
default:
openURL(`https://en.wikipedia.org/w/index.php?search=${name}`);
} }
} }
function toggleLegend() { function toggleLegend() {
if (legend.selectAll("*").size()) {clearLegend(); return;}; // hide legend if (legend.selectAll("*").size()) {
clearLegend();
return;
} // hide legend
const d = biomesData; const d = biomesData;
const data = Array.from(d.i).filter(i => d.cells[i]).sort((a, b) => d.area[b] - d.area[a]).map(i => [i, d.color[i], d.name[i]]); const data = Array.from(d.i)
.filter(i => d.cells[i])
.sort((a, b) => d.area[b] - d.area[a])
.map(i => [i, d.color[i], d.name[i]]);
drawLegend("Biomes", data); drawLegend("Biomes", data);
} }
@ -202,10 +246,10 @@ function editBiomes() {
const totalArea = +biomesFooterArea.dataset.area; const totalArea = +biomesFooterArea.dataset.area;
const totalPopulation = +biomesFooterPopulation.dataset.population; const totalPopulation = +biomesFooterPopulation.dataset.population;
body.querySelectorAll(":scope> div").forEach(function(el) { body.querySelectorAll(":scope> div").forEach(function (el) {
el.querySelector(".biomeCells").innerHTML = rn(+el.dataset.cells / totalCells * 100) + "%"; el.querySelector(".biomeCells").innerHTML = rn((+el.dataset.cells / totalCells) * 100) + "%";
el.querySelector(".biomeArea").innerHTML = rn(+el.dataset.area / totalArea * 100) + "%"; el.querySelector(".biomeArea").innerHTML = rn((+el.dataset.area / totalArea) * 100) + "%";
el.querySelector(".biomePopulation").innerHTML = rn(+el.dataset.population / totalPopulation * 100) + "%"; el.querySelector(".biomePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%";
}); });
} else { } else {
body.dataset.type = "absolute"; body.dataset.type = "absolute";
@ -214,8 +258,12 @@ function editBiomes() {
} }
function addCustomBiome() { function addCustomBiome() {
const b = biomesData, i = biomesData.i.length; const b = biomesData,
if (i > 254) {tip("Maximum number of biomes reached (255), data cleansing is required", false, "error"); return;} i = biomesData.i.length;
if (i > 254) {
tip("Maximum number of biomes reached (255), data cleansing is required", false, "error");
return;
}
b.i.push(i); b.i.push(i);
b.color.push(getRandomColor()); b.color.push(getRandomColor());
@ -264,9 +312,9 @@ function editBiomes() {
function downloadBiomesData() { function downloadBiomesData() {
const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value; const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value;
let data = "Id,Biome,Color,Habitability,Cells,Area "+unit+",Population\n"; // headers let data = "Id,Biome,Color,Habitability,Cells,Area " + unit + ",Population\n"; // headers
body.querySelectorAll(":scope > div").forEach(function(el) { body.querySelectorAll(":scope > div").forEach(function (el) {
data += el.dataset.id + ","; data += el.dataset.id + ",";
data += el.dataset.name + ","; data += el.dataset.name + ",";
data += el.dataset.color + ","; data += el.dataset.color + ",";
@ -285,20 +333,17 @@ function editBiomes() {
customization = 6; customization = 6;
biomes.append("g").attr("id", "temp"); biomes.append("g").attr("id", "temp");
document.querySelectorAll("#biomesBottom > button").forEach(el => el.style.display = "none"); document.querySelectorAll("#biomesBottom > button").forEach(el => (el.style.display = "none"));
document.querySelectorAll("#biomesBottom > div").forEach(el => el.style.display = "block"); document.querySelectorAll("#biomesBottom > div").forEach(el => (el.style.display = "block"));
body.querySelector("div.biomes").classList.add("selected"); body.querySelector("div.biomes").classList.add("selected");
biomesEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden")); biomesEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden"));
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"));
biomesFooter.style.display = "none"; biomesFooter.style.display = "none";
$("#biomesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}}); $("#biomesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
tip("Click on biome to select, drag the circle to change biome", true); tip("Click on biome to select, drag the circle to change biome", true);
viewbox.style("cursor", "crosshair") viewbox.style("cursor", "crosshair").on("click", selectBiomeOnMapClick).call(d3.drag().on("start", dragBiomeBrush)).on("touchmove mousemove", moveBiomeBrush);
.on("click", selectBiomeOnMapClick)
.call(d3.drag().on("start", dragBiomeBrush))
.on("touchmove mousemove", moveBiomeBrush);
} }
function selectBiomeOnLineClick(line) { function selectBiomeOnLineClick(line) {
@ -310,13 +355,16 @@ function editBiomes() {
function selectBiomeOnMapClick() { function selectBiomeOnMapClick() {
const point = d3.mouse(this); const point = d3.mouse(this);
const i = findCell(point[0], point[1]); const i = findCell(point[0], point[1]);
if (pack.cells.h[i] < 20) {tip("You cannot reassign water via biomes. Please edit the Heightmap to change water", false, "error"); return;} if (pack.cells.h[i] < 20) {
tip("You cannot reassign water via biomes. Please edit the Heightmap to change water", false, "error");
return;
}
const assigned = biomes.select("#temp").select("polygon[data-cell='"+i+"']"); const assigned = biomes.select("#temp").select("polygon[data-cell='" + i + "']");
const biome = assigned.size() ? +assigned.attr("data-biome") : pack.cells.biome[i]; const biome = assigned.size() ? +assigned.attr("data-biome") : pack.cells.biome[i];
body.querySelector("div.selected").classList.remove("selected"); body.querySelector("div.selected").classList.remove("selected");
body.querySelector("div[data-id='"+biome+"']").classList.add("selected"); body.querySelector("div[data-id='" + biome + "']").classList.add("selected");
} }
function dragBiomeBrush() { function dragBiomeBrush() {
@ -341,8 +389,8 @@ function editBiomes() {
const biomeNew = selected.dataset.id; const biomeNew = selected.dataset.id;
const color = biomesData.color[biomeNew]; const color = biomesData.color[biomeNew];
selection.forEach(function(i) { selection.forEach(function (i) {
const exists = temp.select("polygon[data-cell='"+i+"']"); const exists = temp.select("polygon[data-cell='" + i + "']");
const biomeOld = exists.size() ? +exists.attr("data-biome") : pack.cells.biome[i]; const biomeOld = exists.size() ? +exists.attr("data-biome") : pack.cells.biome[i];
if (biomeNew === biomeOld) return; if (biomeNew === biomeOld) return;
@ -361,7 +409,7 @@ function editBiomes() {
function applyBiomesChange() { function applyBiomesChange() {
const changed = biomes.select("#temp").selectAll("polygon"); const changed = biomes.select("#temp").selectAll("polygon");
changed.each(function() { changed.each(function () {
const i = +this.dataset.cell; const i = +this.dataset.cell;
const b = +this.dataset.biome; const b = +this.dataset.biome;
pack.cells.biome[i] = b; pack.cells.biome[i] = b;
@ -379,10 +427,10 @@ function editBiomes() {
biomes.select("#temp").remove(); biomes.select("#temp").remove();
removeCircle(); removeCircle();
document.querySelectorAll("#biomesBottom > button").forEach(el => el.style.display = "inline-block"); document.querySelectorAll("#biomesBottom > button").forEach(el => (el.style.display = "inline-block"));
document.querySelectorAll("#biomesBottom > div").forEach(el => el.style.display = "none"); document.querySelectorAll("#biomesBottom > div").forEach(el => (el.style.display = "none"));
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"));
biomesEditor.querySelectorAll(".hide").forEach(el => el.classList.remove("hidden")); biomesEditor.querySelectorAll(".hide").forEach(el => el.classList.remove("hidden"));
biomesFooter.style.display = "block"; biomesFooter.style.display = "block";
if (!close) $("#biomesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}}); if (!close) $("#biomesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});

201
modules/ui/burg-editor.js
View file

@ -15,7 +15,9 @@ function editBurg(id) {
const of = id ? "svg" : d3.event.target; const of = id ? "svg" : d3.event.target;
$("#burgEditor").dialog({ $("#burgEditor").dialog({
title: "Edit Burg", resizable: false, close: closeBurgEditor, title: "Edit Burg",
resizable: false,
close: closeBurgEditor,
position: {my, at, of, collision: "fit"} position: {my, at, of, collision: "fit"}
}); });
@ -62,7 +64,7 @@ function editBurg(id) {
document.getElementById("burgName").value = b.name; document.getElementById("burgName").value = b.name;
document.getElementById("burgType").value = b.type || "Generic"; document.getElementById("burgType").value = b.type || "Generic";
document.getElementById("burgPopulation").value = rn(b.population * populationRate.value * urbanization.value); document.getElementById("burgPopulation").value = rn(b.population * populationRate * urbanization);
document.getElementById("burgEditAnchorStyle").style.display = +b.port ? "inline-block" : "none"; document.getElementById("burgEditAnchorStyle").style.display = +b.port ? "inline-block" : "none";
// update list and select culture // update list and select culture
@ -100,12 +102,12 @@ function editBurg(id) {
const select = document.getElementById("burgSelectGroup"); const select = document.getElementById("burgSelectGroup");
select.options.length = 0; // remove all options select.options.length = 0; // remove all options
burgLabels.selectAll("g").each(function() { burgLabels.selectAll("g").each(function () {
select.options.add(new Option(this.id, this.id, false, this.id === group)); select.options.add(new Option(this.id, this.id, false, this.id === group));
}); });
// set emlem image // set emlem image
const coaID = "burgCOA"+id; const coaID = "burgCOA" + id;
COArenderer.trigger(coaID, b.coa); COArenderer.trigger(coaID, b.coa);
document.getElementById("burgEmblem").setAttribute("href", "#" + coaID); document.getElementById("burgEmblem").setAttribute("href", "#" + coaID);
} }
@ -114,32 +116,67 @@ function editBurg(id) {
function getTemperatureLikeness(temperature) { function getTemperatureLikeness(temperature) {
if (temperature < -5) return "Yakutsk"; if (temperature < -5) return "Yakutsk";
const cities = [ const cities = [
"Snag (Yukon)", "Yellowknife (Canada)", "Okhotsk (Russia)", "Fairbanks (Alaska)", "Nuuk (Greenland)", "Murmansk", // -5 - 0 "Snag (Yukon)",
"Arkhangelsk", "Anchorage", "Tromsø", "Reykjavik", "Riga", "Stockholm", "Halifax", "Prague", "Copenhagen", "London", // 1 - 10 "Yellowknife (Canada)",
"Antwerp", "Paris", "Milan", "Batumi", "Rome", "Dubrovnik", "Lisbon", "Barcelona", "Marrakesh", "Alexandria", // 11 - 20 "Okhotsk (Russia)",
"Tegucigalpa", "Guangzhou", "Rio de Janeiro", "Dakar", "Miami", "Jakarta", "Mogadishu", "Bangkok", "Aden", "Khartoum"]; // 21 - 30 "Fairbanks (Alaska)",
"Nuuk (Greenland)",
"Murmansk", // -5 - 0
"Arkhangelsk",
"Anchorage",
"Tromsø",
"Reykjavik",
"Riga",
"Stockholm",
"Halifax",
"Prague",
"Copenhagen",
"London", // 1 - 10
"Antwerp",
"Paris",
"Milan",
"Batumi",
"Rome",
"Dubrovnik",
"Lisbon",
"Barcelona",
"Marrakesh",
"Alexandria", // 11 - 20
"Tegucigalpa",
"Guangzhou",
"Rio de Janeiro",
"Dakar",
"Miami",
"Jakarta",
"Mogadishu",
"Bangkok",
"Aden",
"Khartoum"
]; // 21 - 30
if (temperature > 30) return "Mecca"; if (temperature > 30) return "Mecca";
return cities[temperature+5] || null; return cities[temperature + 5] || null;
} }
function dragBurgLabel() { function dragBurgLabel() {
const tr = parseTransform(this.getAttribute("transform")); const tr = parseTransform(this.getAttribute("transform"));
const dx = +tr[0] - d3.event.x, dy = +tr[1] - d3.event.y; const dx = +tr[0] - d3.event.x,
dy = +tr[1] - d3.event.y;
d3.event.on("drag", function() { d3.event.on("drag", function () {
const x = d3.event.x, y = d3.event.y; const x = d3.event.x,
this.setAttribute("transform", `translate(${(dx+x)},${(dy+y)})`); y = d3.event.y;
this.setAttribute("transform", `translate(${dx + x},${dy + y})`);
tip('Use dragging for fine-tuning only, to actually move burg use "Relocate" button', false, "warning"); tip('Use dragging for fine-tuning only, to actually move burg use "Relocate" button', false, "warning");
}); });
} }
function showGroupSection() { function showGroupSection() {
document.querySelectorAll("#burgBottom > button").forEach(el => el.style.display = "none"); document.querySelectorAll("#burgBottom > button").forEach(el => (el.style.display = "none"));
document.getElementById("burgGroupSection").style.display = "inline-block"; document.getElementById("burgGroupSection").style.display = "inline-block";
} }
function hideGroupSection() { function hideGroupSection() {
document.querySelectorAll("#burgBottom > button").forEach(el => el.style.display = "inline-block"); document.querySelectorAll("#burgBottom > button").forEach(el => (el.style.display = "inline-block"));
document.getElementById("burgGroupSection").style.display = "none"; document.getElementById("burgGroupSection").style.display = "none";
document.getElementById("burgInputGroup").style.display = "none"; document.getElementById("burgInputGroup").style.display = "none";
document.getElementById("burgInputGroup").value = ""; document.getElementById("burgInputGroup").value = "";
@ -163,8 +200,14 @@ function editBurg(id) {
} }
function createNewGroup() { function createNewGroup() {
if (!this.value) {tip("Please provide a valid group name", false, "error"); return;} if (!this.value) {
const group = this.value.toLowerCase().replace(/ /g, "_").replace(/[^\w\s]/gi, ""); tip("Please provide a valid group name", false, "error");
return;
}
const group = this.value
.toLowerCase()
.replace(/ /g, "_")
.replace(/[^\w\s]/gi, "");
if (document.getElementById(group)) { if (document.getElementById(group)) {
tip("Element with this id already exists. Please provide a unique name", false, "error"); tip("Element with this id already exists. Please provide a unique name", false, "error");
@ -182,11 +225,14 @@ function editBurg(id) {
const label = document.querySelector("#burgLabels [data-id='" + id + "']"); const label = document.querySelector("#burgLabels [data-id='" + id + "']");
const icon = document.querySelector("#burgIcons [data-id='" + id + "']"); const icon = document.querySelector("#burgIcons [data-id='" + id + "']");
const anchor = document.querySelector("#anchors [data-id='" + id + "']"); const anchor = document.querySelector("#anchors [data-id='" + id + "']");
if (!label || !icon) {ERROR && console.error("Cannot find label or icon elements"); return;} if (!label || !icon) {
ERROR && console.error("Cannot find label or icon elements");
return;
}
const labelG = document.querySelector("#burgLabels > #"+oldGroup); const labelG = document.querySelector("#burgLabels > #" + oldGroup);
const iconG = document.querySelector("#burgIcons > #"+oldGroup); const iconG = document.querySelector("#burgIcons > #" + oldGroup);
const anchorG = document.querySelector("#anchors > #"+oldGroup); const anchorG = document.querySelector("#anchors > #" + oldGroup);
// just rename if only 1 element left // just rename if only 1 element left
const count = elSelected.node().parentNode.childElementCount; const count = elSelected.node().parentNode.childElementCount;
@ -222,7 +268,7 @@ function editBurg(id) {
const basic = group.id === "cities" || group.id === "towns"; const basic = group.id === "cities" || group.id === "towns";
const burgsInGroup = []; const burgsInGroup = [];
for (let i=0; i < group.children.length; i++) { for (let i = 0; i < group.children.length; i++) {
burgsInGroup.push(+group.children[i].dataset.id); burgsInGroup.push(+group.children[i].dataset.id);
} }
const burgsToRemove = burgsInGroup.filter(b => !(pack.burgs[b].capital || pack.burgs[b].lock)); const burgsToRemove = burgsInGroup.filter(b => !(pack.burgs[b].capital || pack.burgs[b].lock));
@ -232,9 +278,11 @@ function editBurg(id) {
${basic || capital ? "all unlocked elements in the group" : "the entire burg group"}? ${basic || capital ? "all unlocked elements in the group" : "the entire burg group"}?
<br>Please note that capital or locked burgs will not be deleted. <br>Please note that capital or locked burgs will not be deleted.
<br><br>Burgs to be removed: ${burgsToRemove.length}`; <br><br>Burgs to be removed: ${burgsToRemove.length}`;
$("#alert").dialog({resizable: false, title: "Remove route group", $("#alert").dialog({
resizable: false,
title: "Remove route group",
buttons: { buttons: {
Remove: function() { Remove: function () {
$(this).dialog("close"); $(this).dialog("close");
$("#burgEditor").dialog("close"); $("#burgEditor").dialog("close");
hideGroupSection(); hideGroupSection();
@ -242,15 +290,17 @@ function editBurg(id) {
if (!basic && !capital) { if (!basic && !capital) {
// entirely remove group // entirely remove group
const labelG = document.querySelector("#burgLabels > #"+group.id); const labelG = document.querySelector("#burgLabels > #" + group.id);
const iconG = document.querySelector("#burgIcons > #"+group.id); const iconG = document.querySelector("#burgIcons > #" + group.id);
const anchorG = document.querySelector("#anchors > #"+group.id); const anchorG = document.querySelector("#anchors > #" + group.id);
if (labelG) labelG.remove(); if (labelG) labelG.remove();
if (iconG) iconG.remove(); if (iconG) iconG.remove();
if (anchorG) anchorG.remove(); if (anchorG) anchorG.remove();
} }
}, },
Cancel: function() {$(this).dialog("close");} Cancel: function () {
$(this).dialog("close");
}
} }
}); });
} }
@ -262,7 +312,7 @@ function editBurg(id) {
} }
function generateNameRandom() { function generateNameRandom() {
const base = rand(nameBases.length-1); const base = rand(nameBases.length - 1);
burgName.value = Names.getBase(base); burgName.value = Names.getBase(base);
changeName(); changeName();
} }
@ -286,7 +336,7 @@ function editBurg(id) {
function changePopulation() { function changePopulation() {
const id = +elSelected.attr("data-id"); const id = +elSelected.attr("data-id");
pack.burgs[id].population = rn(burgPopulation.value / populationRate.value / urbanization.value, 4); pack.burgs[id].population = rn(burgPopulation.value / populationRate / urbanization, 4);
} }
function toggleFeature() { function toggleFeature() {
@ -295,7 +345,7 @@ function editBurg(id) {
const feature = this.dataset.feature; const feature = this.dataset.feature;
const turnOn = this.classList.contains("inactive"); const turnOn = this.classList.contains("inactive");
if (feature === "port") togglePort(id); if (feature === "port") togglePort(id);
else if(feature === "capital") toggleCapital(id); else if (feature === "capital") toggleCapital(id);
else b[feature] = +turnOn; else b[feature] = +turnOn;
if (b[feature]) this.classList.remove("inactive"); if (b[feature]) this.classList.remove("inactive");
else if (!b[feature]) this.classList.add("inactive"); else if (!b[feature]) this.classList.add("inactive");
@ -313,9 +363,13 @@ function editBurg(id) {
function updateBurgLockIcon() { function updateBurgLockIcon() {
const id = +elSelected.attr("data-id"); const id = +elSelected.attr("data-id");
const b = pack.burgs[id]; const b = pack.burgs[id];
if (b.lock) {document.getElementById("burgLock").classList.remove("icon-lock-open"); document.getElementById("burgLock").classList.add("icon-lock");} if (b.lock) {
else {document.getElementById("burgLock").classList.remove("icon-lock"); document.getElementById("burgLock").classList.add("icon-lock-open");} document.getElementById("burgLock").classList.remove("icon-lock-open");
document.getElementById("burgLock").classList.add("icon-lock");
} else {
document.getElementById("burgLock").classList.remove("icon-lock");
document.getElementById("burgLock").classList.add("icon-lock-open");
}
} }
function showBurgELockTip() { function showBurgELockTip() {
@ -324,12 +378,12 @@ function editBurg(id) {
} }
function showStyleSection() { function showStyleSection() {
document.querySelectorAll("#burgBottom > button").forEach(el => el.style.display = "none"); document.querySelectorAll("#burgBottom > button").forEach(el => (el.style.display = "none"));
document.getElementById("burgStyleSection").style.display = "inline-block"; document.getElementById("burgStyleSection").style.display = "inline-block";
} }
function hideStyleSection() { function hideStyleSection() {
document.querySelectorAll("#burgBottom > button").forEach(el => el.style.display = "inline-block"); document.querySelectorAll("#burgBottom > button").forEach(el => (el.style.display = "inline-block"));
document.getElementById("burgStyleSection").style.display = "none"; document.getElementById("burgStyleSection").style.display = "none";
} }
@ -353,21 +407,27 @@ function editBurg(id) {
const burg = pack.burgs[id]; const burg = pack.burgs[id];
const defSeed = +(seed + id.padStart(4, 0)); const defSeed = +(seed + id.padStart(4, 0));
if (isCtrlClick(event)) { if (isCtrlClick(event)) {
prompt(`Please provide a Medieval Fantasy City Generator seed. prompt(
`Please provide a Medieval Fantasy City Generator seed.
Seed should be a number. Default seed is FMG map seed + burg id padded to 4 chars with zeros (${defSeed}). Seed should be a number. Default seed is FMG map seed + burg id padded to 4 chars with zeros (${defSeed}).
Please note that if seed is custom, "Overworld" button from MFCG will open a different map`, Please note that if seed is custom, "Overworld" button from MFCG will open a different map`,
{default:burg.MFCG||defSeed, step:1, min:1, max:1e13-1}, v => { {default: burg.MFCG || defSeed, step: 1, min: 1, max: 1e13 - 1},
v => {
burg.MFCG = v; burg.MFCG = v;
openMFCG(v); openMFCG(v);
}); }
);
} else openMFCG(); } else openMFCG();
function openMFCG(seed) { function openMFCG(seed) {
if (!seed && burg.MFCGlink) {openURL(burg.MFCGlink); return;} if (!seed && burg.MFCGlink) {
openURL(burg.MFCGlink);
return;
}
const cells = pack.cells; const cells = pack.cells;
const name = elSelected.text(); const name = elSelected.text();
const size = Math.max(Math.min(rn(burg.population), 100), 6); // to be removed once change on MFDC is done const size = Math.max(Math.min(rn(burg.population), 100), 6); // to be removed once change on MFDC is done
const population = rn(burg.population * populationRate.value * urbanization.value); const population = rn(burg.population * populationRate * urbanization);
const s = burg.MFCG || defSeed; const s = burg.MFCG || defSeed;
const cell = burg.cell; const cell = burg.cell;
@ -385,10 +445,10 @@ function editBurg(id) {
function getSeaDirections(i) { function getSeaDirections(i) {
const p1 = cells.p[i]; const p1 = cells.p[i];
const p2 = cells.p[cells.haven[i]]; const p2 = cells.p[cells.haven[i]];
let deg = Math.atan2(p2[1] - p1[1], p2[0] - p1[0]) * 180 / Math.PI - 90; let deg = (Math.atan2(p2[1] - p1[1], p2[0] - p1[0]) * 180) / Math.PI - 90;
if (deg < 0) deg += 360; if (deg < 0) deg += 360;
const norm = rn(normalize(deg, 0, 360) * 2, 2); // 0 = south, 0.5 = west, 1 = north, 1.5 = east const norm = rn(normalize(deg, 0, 360) * 2, 2); // 0 = south, 0.5 = west, 1 = north, 1.5 = east
return "&sea="+norm; return "&sea=" + norm;
} }
const site = "http://fantasycities.watabou.ru/?random=0&continuous=0"; const site = "http://fantasycities.watabou.ru/?random=0&continuous=0";
@ -398,8 +458,9 @@ function editBurg(id) {
} }
function openEmblemEdit() { function openEmblemEdit() {
const id = +elSelected.attr("data-id"), burg = pack.burgs[id]; const id = +elSelected.attr("data-id"),
editEmblem("burg", "burgCOA"+id, burg); burg = pack.burgs[id];
editEmblem("burg", "burgCOA" + id, burg);
} }
function toggleRelocateBurg() { function toggleRelocateBurg() {
@ -408,11 +469,17 @@ function editBurg(id) {
if (document.getElementById("burgRelocate").classList.contains("pressed")) { if (document.getElementById("burgRelocate").classList.contains("pressed")) {
viewbox.style("cursor", "crosshair").on("click", relocateBurgOnClick); viewbox.style("cursor", "crosshair").on("click", relocateBurgOnClick);
tip("Click on map to relocate burg. Hold Shift for continuous move", true); tip("Click on map to relocate burg. Hold Shift for continuous move", true);
if (!layerIsOn("toggleCells")) {toggleCells(); toggler.dataset.forced = true;} if (!layerIsOn("toggleCells")) {
toggleCells();
toggler.dataset.forced = true;
}
} else { } else {
clearMainTip(); clearMainTip();
viewbox.on("click", clicked).style("cursor", "default"); viewbox.on("click", clicked).style("cursor", "default");
if (layerIsOn("toggleCells") && toggler.dataset.forced) {toggleCells(); toggler.dataset.forced = false;} if (layerIsOn("toggleCells") && toggler.dataset.forced) {
toggleCells();
toggler.dataset.forced = false;
}
} }
} }
@ -442,10 +509,19 @@ function editBurg(id) {
} }
// change UI // change UI
const x = rn(point[0], 2), y = rn(point[1], 2); const x = rn(point[0], 2),
burgIcons.select("[data-id='" + id + "']").attr("transform", null).attr("cx", x).attr("cy", y); y = rn(point[1], 2);
burgLabels.select("text[data-id='" + id + "']").attr("transform", null).attr("x", x).attr("y", y); burgIcons
const anchor = anchors.select("use[data-id='" + id+ "']"); .select("[data-id='" + id + "']")
.attr("transform", null)
.attr("cx", x)
.attr("cy", y);
burgLabels
.select("text[data-id='" + id + "']")
.attr("transform", null)
.attr("x", x)
.attr("y", y);
const anchor = anchors.select("use[data-id='" + id + "']");
if (anchor.size()) { if (anchor.size()) {
const size = anchor.attr("width"); const size = anchor.attr("width");
const xa = rn(x - size * 0.47, 2); const xa = rn(x - size * 0.47, 2);
@ -468,7 +544,7 @@ function editBurg(id) {
function editBurgLegend() { function editBurgLegend() {
const id = elSelected.attr("data-id"); const id = elSelected.attr("data-id");
const name = elSelected.text(); const name = elSelected.text();
editNotes("burg"+id, name); editNotes("burg" + id, name);
} }
function removeSelectedBurg() { function removeSelectedBurg() {
@ -476,19 +552,29 @@ function editBurg(id) {
if (pack.burgs[id].capital) { if (pack.burgs[id].capital) {
alertMessage.innerHTML = `You cannot remove the burg as it is a state capital.<br><br> alertMessage.innerHTML = `You cannot remove the burg as it is a state capital.<br><br>
You can change the capital using Burgs Editor (shift + T)`; You can change the capital using Burgs Editor (shift + T)`;
$("#alert").dialog({resizable: false, title: "Remove burg", $("#alert").dialog({
buttons: {Ok: function() {$(this).dialog("close");}} resizable: false,
title: "Remove burg",
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
}); });
} else { } else {
alertMessage.innerHTML = "Are you sure you want to remove the burg?"; alertMessage.innerHTML = "Are you sure you want to remove the burg?";
$("#alert").dialog({resizable: false, title: "Remove burg", $("#alert").dialog({
resizable: false,
title: "Remove burg",
buttons: { buttons: {
Remove: function() { Remove: function () {
$(this).dialog("close"); $(this).dialog("close");
removeBurg(id); // see Editors module removeBurg(id); // see Editors module
$("#burgEditor").dialog("close"); $("#burgEditor").dialog("close");
}, },
Cancel: function() {$(this).dialog("close");} Cancel: function () {
$(this).dialog("close");
}
} }
}); });
} }
@ -499,5 +585,4 @@ function editBurg(id) {
burgLabels.selectAll("text").call(d3.drag().on("drag", null)).classed("draggable", false); burgLabels.selectAll("text").call(d3.drag().on("drag", null)).classed("draggable", false);
unselect(); unselect();
} }
} }

249
modules/ui/burgs-overview.js
View file

@ -14,7 +14,10 @@ function overviewBurgs() {
modules.overviewBurgs = true; modules.overviewBurgs = true;
$("#burgsOverview").dialog({ $("#burgsOverview").dialog({
title: "Burgs Overview", resizable: false, width: fitContent(), close: exitAddBurgMode, title: "Burgs Overview",
resizable: false,
width: fitContent(),
close: exitAddBurgMode,
position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"} position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
}); });
@ -27,7 +30,9 @@ function overviewBurgs() {
document.getElementById("addNewBurg").addEventListener("click", enterAddBurgMode); document.getElementById("addNewBurg").addEventListener("click", enterAddBurgMode);
document.getElementById("burgsExport").addEventListener("click", downloadBurgsData); document.getElementById("burgsExport").addEventListener("click", downloadBurgsData);
document.getElementById("burgNamesImport").addEventListener("click", renameBurgsInBulk); document.getElementById("burgNamesImport").addEventListener("click", renameBurgsInBulk);
document.getElementById("burgsListToLoad").addEventListener("change", function() {uploadFile(this, importBurgNames)}); document.getElementById("burgsListToLoad").addEventListener("change", function () {
uploadFile(this, importBurgNames);
});
document.getElementById("burgsRemoveAll").addEventListener("click", triggerAllBurgsRemove); document.getElementById("burgsRemoveAll").addEventListener("click", triggerAllBurgsRemove);
function refreshBurgsEditor() { function refreshBurgsEditor() {
@ -41,7 +46,7 @@ function overviewBurgs() {
stateFilter.options.length = 0; // remove all options stateFilter.options.length = 0; // remove all options
stateFilter.options.add(new Option(`all`, -1, false, selectedState == -1)); stateFilter.options.add(new Option(`all`, -1, false, selectedState == -1));
stateFilter.options.add(new Option(pack.states[0].name, 0, false, !selectedState)); stateFilter.options.add(new Option(pack.states[0].name, 0, false, !selectedState));
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))); statesSorted.forEach(s => stateFilter.options.add(new Option(s.name, s.i, false, s.i == selectedState)));
const cultureFilter = document.getElementById("burgsFilterCulture"); const cultureFilter = document.getElementById("burgsFilterCulture");
@ -49,7 +54,7 @@ function overviewBurgs() {
cultureFilter.options.length = 0; // remove all options cultureFilter.options.length = 0; // remove all options
cultureFilter.options.add(new Option(`all`, -1, false, selectedCulture == -1)); cultureFilter.options.add(new Option(`all`, -1, false, selectedCulture == -1));
cultureFilter.options.add(new Option(pack.cultures[0].name, 0, false, !selectedCulture)); cultureFilter.options.add(new Option(pack.cultures[0].name, 0, false, !selectedCulture));
const culturesSorted = pack.cultures.filter(c => c.i && !c.removed).sort((a, b) => (a.name > b.name) ? 1 : -1); const culturesSorted = pack.cultures.filter(c => c.i && !c.removed).sort((a, b) => (a.name > b.name ? 1 : -1));
culturesSorted.forEach(c => cultureFilter.options.add(new Option(c.name, c.i, false, c.i == selectedCulture))); culturesSorted.forEach(c => cultureFilter.options.add(new Option(c.name, c.i, false, c.i == selectedCulture)));
} }
@ -62,10 +67,11 @@ function overviewBurgs() {
if (selectedCulture != -1) filtered = filtered.filter(b => b.culture === selectedCulture); // filtered by culture if (selectedCulture != -1) filtered = filtered.filter(b => b.culture === selectedCulture); // filtered by culture
body.innerHTML = ""; body.innerHTML = "";
let lines = "", totalPopulation = 0; let lines = "",
totalPopulation = 0;
for (const b of filtered) { for (const b of filtered) {
const population = b.population * populationRate.value * urbanization.value; const population = b.population * populationRate * urbanization;
totalPopulation += population; totalPopulation += population;
const type = b.capital && b.port ? "a-capital-port" : b.capital ? "c-capital" : b.port ? "p-port" : "z-burg"; 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; const state = pack.states[b.state].name;
@ -82,11 +88,11 @@ function overviewBurgs() {
<span data-tip="Burg population" class="icon-male"></span> <span data-tip="Burg population" class="icon-male"></span>
<input data-tip="Burg population. Type to change" class="burgPopulation" value=${si(population)}> <input data-tip="Burg population. Type to change" class="burgPopulation" value=${si(population)}>
<div class="burgType"> <div class="burgType">
<span data-tip="${b.capital ? ' This burg is a state capital' : 'Click to assign a capital status'}" class="icon-star-empty${b.capital ? '' : ' inactive pointer'}"></span> <span data-tip="${b.capital ? " This burg is a state capital" : "Click to assign a capital status"}" class="icon-star-empty${b.capital ? "" : " inactive pointer"}"></span>
<span data-tip="Click to toggle port status" class="icon-anchor pointer${b.port ? '' : ' inactive'}" style="font-size:.9em"></span> <span data-tip="Click to toggle port status" class="icon-anchor pointer${b.port ? "" : " inactive"}" style="font-size:.9em"></span>
</div> </div>
<span data-tip="Edit burg" class="icon-pencil"></span> <span data-tip="Edit burg" class="icon-pencil"></span>
<span class="locks pointer ${b.lock ? 'icon-lock' : 'icon-lock-open inactive'}"></span> <span class="locks pointer ${b.lock ? "icon-lock" : "icon-lock-open inactive"}"></span>
<span data-tip="Remove burg" class="icon-trash-empty"></span> <span data-tip="Remove burg" class="icon-trash-empty"></span>
</div>`; </div>`;
} }
@ -115,7 +121,7 @@ function overviewBurgs() {
function getCultureOptions(culture) { function getCultureOptions(culture) {
let options = ""; let options = "";
pack.cultures.filter(c => !c.removed).forEach(c => options += `<option ${c.i === culture ? "selected" : ""} value="${c.i}">${c.name}</option>`); pack.cultures.filter(c => !c.removed).forEach(c => (options += `<option ${c.i === culture ? "selected" : ""} value="${c.i}">${c.name}</option>`));
return options; return options;
} }
@ -130,7 +136,7 @@ function overviewBurgs() {
} }
function changeBurgName() { function changeBurgName() {
if (this.value == "")tip("Please provide a name", false, "error"); if (this.value == "") tip("Please provide a name", false, "error");
const burg = +this.parentNode.dataset.id; const burg = +this.parentNode.dataset.id;
pack.burgs[burg].name = this.value; pack.burgs[burg].name = this.value;
this.parentNode.dataset.name = this.value; this.parentNode.dataset.name = this.value;
@ -141,7 +147,8 @@ function overviewBurgs() {
function zoomIntoBurg() { function zoomIntoBurg() {
const burg = +this.parentNode.dataset.id; const burg = +this.parentNode.dataset.id;
const label = document.querySelector("#burgLabels [data-id='" + burg + "']"); const label = document.querySelector("#burgLabels [data-id='" + burg + "']");
const x = +label.getAttribute("x"), y = +label.getAttribute("y"); const x = +label.getAttribute("x"),
y = +label.getAttribute("y");
zoomTo(x, y, 8, 2000); zoomTo(x, y, 8, 2000);
} }
@ -156,10 +163,10 @@ function overviewBurgs() {
const burg = +this.parentNode.dataset.id; const burg = +this.parentNode.dataset.id;
if (this.value == "" || isNaN(+this.value)) { if (this.value == "" || isNaN(+this.value)) {
tip("Please provide an integer number (like 10000, not 10K)", false, "error"); tip("Please provide an integer number (like 10000, not 10K)", false, "error");
this.value = si(pack.burgs[burg].population * populationRate.value * urbanization.value); this.value = si(pack.burgs[burg].population * populationRate * urbanization);
return; return;
} }
pack.burgs[burg].population = this.value / populationRate.value / urbanization.value; pack.burgs[burg].population = this.value / populationRate / urbanization;
this.parentNode.dataset.population = this.value; this.parentNode.dataset.population = this.value;
this.value = si(this.value); this.value = si(this.value);
@ -184,8 +191,15 @@ function overviewBurgs() {
function toggleBurgLockStatus() { function toggleBurgLockStatus() {
const burg = +this.parentNode.dataset.id; const burg = +this.parentNode.dataset.id;
toggleBurgLock(burg); toggleBurgLock(burg);
if (this.classList.contains("icon-lock")) {this.classList.remove("icon-lock"); this.classList.add("icon-lock-open"); this.classList.add("inactive");} if (this.classList.contains("icon-lock")) {
else {this.classList.remove("icon-lock-open"); this.classList.add("icon-lock"); this.classList.remove("inactive");} this.classList.remove("icon-lock");
this.classList.add("icon-lock-open");
this.classList.add("inactive");
} else {
this.classList.remove("icon-lock-open");
this.classList.add("icon-lock");
this.classList.remove("inactive");
}
} }
function showBurgOLockTip() { function showBurgOLockTip() {
@ -200,23 +214,30 @@ function overviewBurgs() {
function triggerBurgRemove() { function triggerBurgRemove() {
const burg = +this.parentNode.dataset.id; const burg = +this.parentNode.dataset.id;
if (pack.burgs[burg].capital) {tip("You cannot remove the capital. Please change the capital first", false, "error"); return;} if (pack.burgs[burg].capital) {
tip("You cannot remove the capital. Please change the capital first", false, "error");
return;
}
alertMessage.innerHTML = "Are you sure you want to remove the burg?"; alertMessage.innerHTML = "Are you sure you want to remove the burg?";
$("#alert").dialog({resizable: false, title: "Remove burg", $("#alert").dialog({
resizable: false,
title: "Remove burg",
buttons: { buttons: {
Remove: function() { Remove: function () {
$(this).dialog("close"); $(this).dialog("close");
removeBurg(burg); removeBurg(burg);
burgsOverviewAddLines(); burgsOverviewAddLines();
}, },
Cancel: function() {$(this).dialog("close");} Cancel: function () {
$(this).dialog("close");
}
} }
}); });
} }
function regenerateNames() { function regenerateNames() {
body.querySelectorAll(":scope > div").forEach(function(el) { body.querySelectorAll(":scope > div").forEach(function (el) {
const burg = +el.dataset.id; const burg = +el.dataset.id;
//if (pack.burgs[burg].lock) return; //if (pack.burgs[burg].lock) return;
const culture = pack.burgs[burg].culture; const culture = pack.burgs[burg].culture;
@ -230,7 +251,10 @@ function overviewBurgs() {
} }
function enterAddBurgMode() { function enterAddBurgMode() {
if (this.classList.contains("pressed")) {exitAddBurgMode(); return;}; if (this.classList.contains("pressed")) {
exitAddBurgMode();
return;
}
customization = 3; customization = 3;
this.classList.add("pressed"); this.classList.add("pressed");
tip("Click on the map to create a new burg. Hold Shift to add multiple", true, "warn"); tip("Click on the map to create a new burg. Hold Shift to add multiple", true, "warn");
@ -240,8 +264,14 @@ function overviewBurgs() {
function addBurgOnClick() { function addBurgOnClick() {
const point = d3.mouse(this); const point = d3.mouse(this);
const cell = findCell(point[0], point[1]); const cell = findCell(point[0], point[1]);
if (pack.cells.h[cell] < 20) {tip("You cannot place state into the water. Please click on a land cell", false, "error"); return;} if (pack.cells.h[cell] < 20) {
if (pack.cells.burg[cell]) {tip("There is already a burg in this cell. Please select a free cell", false, "error"); return;} tip("You cannot place state into the water. Please click on a land cell", false, "error");
return;
}
if (pack.cells.burg[cell]) {
tip("There is already a burg in this cell. Please select a free cell", false, "error");
return;
}
addBurg(point); // add new burg addBurg(point); // add new burg
if (d3.event.shiftKey === false) { if (d3.event.shiftKey === false) {
@ -263,22 +293,28 @@ function overviewBurgs() {
const states = pack.states.map(s => { const states = pack.states.map(s => {
const color = s.color ? s.color : "#ccc"; const color = s.color ? s.color : "#ccc";
const name = s.fullName ? s.fullName : s.name; const name = s.fullName ? s.fullName : s.name;
return {id:s.i, state: s.i ? 0 : null, color, name} return {id: s.i, state: s.i ? 0 : null, color, name};
}); });
const burgs = pack.burgs.filter(b => b.i && !b.removed).map(b => { const burgs = pack.burgs
const id = b.i+states.length-1; .filter(b => b.i && !b.removed)
.map(b => {
const id = b.i + states.length - 1;
const population = b.population; const population = b.population;
const capital = b.capital; const capital = b.capital;
const province = pack.cells.province[b.cell]; const province = pack.cells.province[b.cell];
const parent = province ? province + states.length-1 : b.state; const parent = province ? province + states.length - 1 : b.state;
return {id, i:b.i, state:b.state, culture:b.culture, province, parent, name:b.name, population, capital, x:b.x, y:b.y} return {id, i: b.i, state: b.state, culture: b.culture, province, parent, name: b.name, population, capital, x: b.x, y: b.y};
}); });
const data = states.concat(burgs); const data = states.concat(burgs);
const root = d3.stratify().parentId(d => d.state)(data) const root = d3
.sum(d => d.population).sort((a, b) => b.value - a.value); .stratify()
.parentId(d => d.state)(data)
.sum(d => d.population)
.sort((a, b) => b.value - a.value);
const width = 150 + 200 * uiSizeOutput.value, height = 150 + 200 * uiSizeOutput.value; const width = 150 + 200 * uiSizeOutput.value,
height = 150 + 200 * uiSizeOutput.value;
const margin = {top: 0, right: -50, bottom: -10, left: -50}; const margin = {top: 0, right: -50, bottom: -10, left: -50};
const w = width - margin.left - margin.right; const w = width - margin.left - margin.right;
const h = height - margin.top - margin.bottom; const h = height - margin.top - margin.bottom;
@ -291,17 +327,27 @@ function overviewBurgs() {
<option value="parent">Group by province and state</option> <option value="parent">Group by province and state</option>
<option value="provinces">Group by province</option></select>`; <option value="provinces">Group by province</option></select>`;
alertMessage.innerHTML += `<div id='burgsInfo' class='chartInfo'>&#8205;</div>`; alertMessage.innerHTML += `<div id='burgsInfo' class='chartInfo'>&#8205;</div>`;
const svg = d3.select("#alertMessage").insert("svg", "#burgsInfo").attr("id", "burgsTree") const svg = d3
.attr("width", width).attr("height", height-10).attr("stroke-width", 2); .select("#alertMessage")
.insert("svg", "#burgsInfo")
.attr("id", "burgsTree")
.attr("width", width)
.attr("height", height - 10)
.attr("stroke-width", 2);
const graph = svg.append("g").attr("transform", `translate(-50, -10)`); const graph = svg.append("g").attr("transform", `translate(-50, -10)`);
document.getElementById("burgsTreeType").addEventListener("change", updateChart); document.getElementById("burgsTreeType").addEventListener("change", updateChart);
treeLayout(root); treeLayout(root);
const node = graph.selectAll("circle").data(root.leaves()) const node = graph
.join("circle").attr("data-id", d => d.data.i) .selectAll("circle")
.attr("r", d => d.r).attr("fill", d => d.parent.data.color) .data(root.leaves())
.attr("cx", d => d.x).attr("cy", d => d.y) .join("circle")
.attr("data-id", d => d.data.i)
.attr("r", d => d.r)
.attr("fill", d => d.parent.data.color)
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.on("mouseenter", d => showInfo(event, d)) .on("mouseenter", d => showInfo(event, d))
.on("mouseleave", d => hideInfo(event, d)) .on("mouseleave", d => hideInfo(event, d))
.on("click", d => zoomTo(d.data.x, d.data.y, 8, 2000)); .on("click", d => zoomTo(d.data.x, d.data.y, 8, 2000));
@ -310,7 +356,7 @@ function overviewBurgs() {
d3.select(ev.target).transition().duration(1500).attr("stroke", "#c13119"); d3.select(ev.target).transition().duration(1500).attr("stroke", "#c13119");
const name = d.data.name; const name = d.data.name;
const parent = d.parent.data.name; const parent = d.parent.data.name;
const population = si(d.value * populationRate.value * urbanization.value); const population = si(d.value * populationRate * urbanization);
burgsInfo.innerHTML = `${name}. ${parent}. Population: ${population}`; burgsInfo.innerHTML = `${name}. ${parent}. Population: ${population}`;
burgHighlightOn(ev); burgHighlightOn(ev);
@ -326,33 +372,38 @@ function overviewBurgs() {
} }
function updateChart() { function updateChart() {
const getStatesData = () => pack.states.map(s => { const getStatesData = () =>
pack.states.map(s => {
const color = s.color ? s.color : "#ccc"; const color = s.color ? s.color : "#ccc";
const name = s.fullName ? s.fullName : s.name; const name = s.fullName ? s.fullName : s.name;
return {id:s.i, state: s.i ? 0 : null, color, name} return {id: s.i, state: s.i ? 0 : null, color, name};
}); });
const getCulturesData = () => pack.cultures.map(c => { const getCulturesData = () =>
pack.cultures.map(c => {
const color = c.color ? c.color : "#ccc"; const color = c.color ? c.color : "#ccc";
return {id:c.i, culture: c.i ? 0 : null, color, name:c.name} return {id: c.i, culture: c.i ? 0 : null, color, name: c.name};
}); });
const getParentData = () => { const getParentData = () => {
const states = pack.states.map(s => { const states = pack.states.map(s => {
const color = s.color ? s.color : "#ccc"; const color = s.color ? s.color : "#ccc";
const name = s.fullName ? s.fullName : s.name; const name = s.fullName ? s.fullName : s.name;
return {id:s.i, parent: s.i ? 0 : null, color, name} return {id: s.i, parent: s.i ? 0 : null, color, name};
}); });
const provinces = pack.provinces.filter(p => p.i && !p.removed).map(p => { const provinces = pack.provinces
return {id:p.i + states.length-1, parent: p.state, color:p.color, name:p.fullName} .filter(p => p.i && !p.removed)
.map(p => {
return {id: p.i + states.length - 1, parent: p.state, color: p.color, name: p.fullName};
}); });
return states.concat(provinces); return states.concat(provinces);
} };
const getProvincesData = () => pack.provinces.map(p => { const getProvincesData = () =>
pack.provinces.map(p => {
const color = p.color ? p.color : "#ccc"; const color = p.color ? p.color : "#ccc";
const name = p.fullName ? p.fullName : p.name; const name = p.fullName ? p.fullName : p.name;
return {id:p.i ? p.i : 0, province: p.i ? 0 : null, color, name} return {id: p.i ? p.i : 0, province: p.i ? 0 : null, color, name};
}); });
const value = d => { const value = d => {
@ -360,33 +411,43 @@ function overviewBurgs() {
if (this.value === "cultures") return d.culture; if (this.value === "cultures") return d.culture;
if (this.value === "parent") return d.parent; if (this.value === "parent") return d.parent;
if (this.value === "provinces") return d.province; if (this.value === "provinces") return d.province;
} };
const base = this.value === "states" ? getStatesData() const base = this.value === "states" ? getStatesData() : this.value === "cultures" ? getCulturesData() : this.value === "parent" ? getParentData() : getProvincesData();
: this.value === "cultures" ? getCulturesData() burgs.forEach(b => (b.id = b.i + base.length - 1));
: this.value === "parent" ? getParentData() : getProvincesData();
burgs.forEach(b => b.id = b.i+base.length-1);
const data = base.concat(burgs); const data = base.concat(burgs);
const root = d3.stratify().parentId(d => value(d))(data) const root = d3
.sum(d => d.population).sort((a, b) => b.value - a.value); .stratify()
.parentId(d => value(d))(data)
.sum(d => d.population)
.sort((a, b) => b.value - a.value);
node.data(treeLayout(root).leaves()).transition().duration(2000) node
.attr("data-id", d => d.data.i).attr("fill", d => d.parent.data.color) .data(treeLayout(root).leaves())
.attr("cx", d => d.x).attr("cy", d => d.y).attr("r", d => d.r); .transition()
.duration(2000)
.attr("data-id", d => d.data.i)
.attr("fill", d => d.parent.data.color)
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", d => d.r);
} }
$("#alert").dialog({ $("#alert").dialog({
title: "Burgs bubble chart", width: fitContent(), title: "Burgs bubble chart",
position: {my: "left bottom", at: "left+10 bottom-10", of: "svg"}, buttons: {}, width: fitContent(),
close: () => {alertMessage.innerHTML = "";} position: {my: "left bottom", at: "left+10 bottom-10", of: "svg"},
buttons: {},
close: () => {
alertMessage.innerHTML = "";
}
}); });
} }
function downloadBurgsData() { function downloadBurgsData() {
let data = "Id,Burg,Province,State,Culture,Religion,Population,Longitude,Latitude,Elevation ("+heightUnit.value+"),Capital,Port,Citadel,Walls,Plaza,Temple,Shanty Town\n"; // headers let data = "Id,Burg,Province,State,Culture,Religion,Population,Longitude,Latitude,Elevation (" + heightUnit.value + "),Capital,Port,Citadel,Walls,Plaza,Temple,Shanty Town\n"; // headers
const valid = pack.burgs.filter(b => b.i && !b.removed); // all valid burgs const valid = pack.burgs.filter(b => b.i && !b.removed); // all valid burgs
valid.forEach(b => { valid.forEach(b => {
@ -394,10 +455,10 @@ function overviewBurgs() {
data += b.name + ","; data += b.name + ",";
const province = pack.cells.province[b.cell]; const province = pack.cells.province[b.cell];
data += province ? pack.provinces[province].fullName + "," : ","; data += province ? pack.provinces[province].fullName + "," : ",";
data += b.state ? pack.states[b.state].fullName +"," : pack.states[b.state].name + ","; data += b.state ? pack.states[b.state].fullName + "," : pack.states[b.state].name + ",";
data += pack.cultures[b.culture].name + ","; data += pack.cultures[b.culture].name + ",";
data += pack.religions[pack.cells.religion[b.cell]].name + ","; data += pack.religions[pack.cells.religion[b.cell]].name + ",";
data += rn(b.population * populationRate.value * urbanization.value) + ","; data += rn(b.population * populationRate * urbanization) + ",";
// add geography data // add geography data
data += mapCoordinates.lonW + (b.x / graphWidth) * mapCoordinates.lonT + ","; data += mapCoordinates.lonW + (b.x / graphWidth) * mapCoordinates.lonT + ",";
@ -423,44 +484,62 @@ function overviewBurgs() {
If you do not want to change the name, just leave it as is`; If you do not want to change the name, just leave it as is`;
alertMessage.innerHTML = message; alertMessage.innerHTML = message;
$("#alert").dialog({title: "Burgs bulk renaming", width:"22em", $("#alert").dialog({
title: "Burgs bulk renaming",
width: "22em",
position: {my: "center", at: "center", of: "svg"}, position: {my: "center", at: "center", of: "svg"},
buttons: { buttons: {
Download: function() { Download: function () {
const data = pack.burgs.filter(b => b.i && !b.removed).map(b => b.name).join("\r\n"); const data = pack.burgs
.filter(b => b.i && !b.removed)
.map(b => b.name)
.join("\r\n");
const name = getFileName("Burg names") + ".txt"; const name = getFileName("Burg names") + ".txt";
downloadFile(data, name); downloadFile(data, name);
}, },
Upload: () => burgsListToLoad.click(), Upload: () => burgsListToLoad.click(),
Cancel: function() {$(this).dialog("close");} Cancel: function () {
$(this).dialog("close");
}
} }
}); });
} }
function importBurgNames(dataLoaded) { function importBurgNames(dataLoaded) {
if (!dataLoaded) {tip("Cannot load the file, please check the format", false, "error"); return;} if (!dataLoaded) {
tip("Cannot load the file, please check the format", false, "error");
return;
}
const data = dataLoaded.split("\r\n"); const data = dataLoaded.split("\r\n");
if (!data.length) {tip("Cannot parse the list, please check the file format", false, "error"); return;} if (!data.length) {
tip("Cannot parse the list, please check the file format", false, "error");
return;
}
let change = [], message = `Burgs will be renamed as below. Please confirm`; let change = [],
message = `Burgs will be renamed as below. Please confirm`;
message += `<table class="overflow-table"><tr><th>Id</th><th>Current name</th><th>New Name</th></tr>`; message += `<table class="overflow-table"><tr><th>Id</th><th>Current name</th><th>New Name</th></tr>`;
const burgs = pack.burgs.filter(b => b.i && !b.removed); const burgs = pack.burgs.filter(b => b.i && !b.removed);
for (let i=0; i < data.length && i <= burgs.length; i++) { for (let i = 0; i < data.length && i <= burgs.length; i++) {
const v = data[i]; const v = data[i];
if (!v || !burgs[i] || v == burgs[i].name) continue; if (!v || !burgs[i] || v == burgs[i].name) continue;
change.push({id:burgs[i].i, name: v}); change.push({id: burgs[i].i, name: v});
message += `<tr><td style="width:20%">${burgs[i].i}</td><td style="width:40%">${burgs[i].name}</td><td style="width:40%">${v}</td></tr>`; message += `<tr><td style="width:20%">${burgs[i].i}</td><td style="width:40%">${burgs[i].name}</td><td style="width:40%">${v}</td></tr>`;
} }
message += `</tr></table>`; message += `</tr></table>`;
if (!change.length) message = "No changes found in the file. Please change some names to get a result" if (!change.length) message = "No changes found in the file. Please change some names to get a result";
alertMessage.innerHTML = message; alertMessage.innerHTML = message;
$("#alert").dialog({title: "Burgs bulk renaming", width:"22em", $("#alert").dialog({
title: "Burgs bulk renaming",
width: "22em",
position: {my: "center", at: "center", of: "svg"}, position: {my: "center", at: "center", of: "svg"},
buttons: { buttons: {
Cancel: function() {$(this).dialog("close");}, Cancel: function () {
Confirm: function() { $(this).dialog("close");
for (let i=0; i < change.length; i++) { },
Confirm: function () {
for (let i = 0; i < change.length; i++) {
const id = change[i].id; const id = change[i].id;
pack.burgs[id].name = change[i].name; pack.burgs[id].name = change[i].name;
burgLabels.select("[data-id='" + id + "']").text(change[i].name); burgLabels.select("[data-id='" + id + "']").text(change[i].name);
@ -475,13 +554,17 @@ function overviewBurgs() {
function triggerAllBurgsRemove() { function triggerAllBurgsRemove() {
alertMessage.innerHTML = `Are you sure you want to remove all unlocked burgs except for capitals? alertMessage.innerHTML = `Are you sure you want to remove all unlocked burgs except for capitals?
<br><i>To remove a capital you have to remove a state first</i>`; <br><i>To remove a capital you have to remove a state first</i>`;
$("#alert").dialog({resizable: false, title: "Remove all burgs", $("#alert").dialog({
resizable: false,
title: "Remove all burgs",
buttons: { buttons: {
Remove: function() { Remove: function () {
$(this).dialog("close"); $(this).dialog("close");
removeAllBurgs(); removeAllBurgs();
}, },
Cancel: function() {$(this).dialog("close");} Cancel: function () {
$(this).dialog("close");
}
} }
}); });
} }

369
modules/ui/cultures-editor.js
View file

@ -16,7 +16,10 @@ function editCultures() {
modules.editCultures = true; modules.editCultures = true;
$("#culturesEditor").dialog({ $("#culturesEditor").dialog({
title: "Cultures Editor", resizable: false, width: fitContent(), close: closeCulturesEditor, title: "Cultures Editor",
resizable: false,
width: fitContent(),
close: closeCulturesEditor,
position: {my: "right top", at: "right-10 top+10", of: "svg"} position: {my: "right top", at: "right-10 top+10", of: "svg"}
}); });
body.focus(); body.focus();
@ -42,8 +45,9 @@ function editCultures() {
} }
function culturesCollectStatistics() { function culturesCollectStatistics() {
const cells = pack.cells, cultures = pack.cultures; const cells = pack.cells,
cultures.forEach(c => c.cells = c.area = c.rural = c.urban = 0); cultures = pack.cultures;
cultures.forEach(c => (c.cells = c.area = c.rural = c.urban = 0));
for (const i of cells.i) { for (const i of cells.i) {
if (cells.h[i] < 20) continue; if (cells.h[i] < 20) continue;
@ -58,16 +62,18 @@ function editCultures() {
// add line for each culture // add line for each culture
function culturesEditorAddLines() { function culturesEditorAddLines() {
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value; const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
let lines = "", totalArea = 0, totalPopulation = 0; let lines = "",
totalArea = 0,
totalPopulation = 0;
const emblemShapeGroup = document.getElementById("emblemShape").selectedOptions[0].parentNode.label; const emblemShapeGroup = document.getElementById("emblemShape").selectedOptions[0].parentNode.label;
const selectShape = emblemShapeGroup === "Diversiform"; const selectShape = emblemShapeGroup === "Diversiform";
for (const c of pack.cultures) { for (const c of pack.cultures) {
if (c.removed) continue; if (c.removed) continue;
const area = c.area * (distanceScaleInput.value ** 2); const area = c.area * distanceScaleInput.value ** 2;
const rural = c.rural * populationRate.value; const rural = c.rural * populationRate;
const urban = c.urban * populationRate.value * urbanization.value; const urban = c.urban * populationRate * urbanization;
const population = rn(rural + urban); const population = rn(rural + urban);
const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}. Click to edit`; const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}. Click to edit`;
totalArea += area; totalArea += area;
@ -140,7 +146,10 @@ function editCultures() {
culturesHeader.querySelector("div[data-sortby='emblems']").style.display = selectShape ? "inline-block" : "none"; culturesHeader.querySelector("div[data-sortby='emblems']").style.display = selectShape ? "inline-block" : "none";
if (body.dataset.type === "percentage") {body.dataset.type = "absolute"; togglePercentageMode();} if (body.dataset.type === "percentage") {
body.dataset.type = "absolute";
togglePercentageMode();
}
applySorting(culturesHeader); applySorting(culturesHeader);
$("#culturesEditor").dialog({width: fitContent()}); $("#culturesEditor").dialog({width: fitContent()});
} }
@ -148,18 +157,20 @@ function editCultures() {
function getTypeOptions(type) { function getTypeOptions(type) {
let options = ""; let options = "";
const types = ["Generic", "River", "Lake", "Naval", "Nomadic", "Hunting", "Highland"]; const types = ["Generic", "River", "Lake", "Naval", "Nomadic", "Hunting", "Highland"];
types.forEach(t => options += `<option ${type === t ? "selected" : ""} value="${t}">${t}</option>`); types.forEach(t => (options += `<option ${type === t ? "selected" : ""} value="${t}">${t}</option>`));
return options; return options;
} }
function getBaseOptions(base) { function getBaseOptions(base) {
let options = ""; let options = "";
nameBases.forEach((n, i) => options += `<option ${base === i ? "selected" : ""} value="${i}">${n.name}</option>`); nameBases.forEach((n, i) => (options += `<option ${base === i ? "selected" : ""} value="${i}">${n.name}</option>`));
return options; return options;
} }
function getShapeOptions(selected) { function getShapeOptions(selected) {
const shapes = Object.keys(COA.shields.types).map(type => Object.keys(COA.shields[type])).flat(); const shapes = Object.keys(COA.shields.types)
.map(type => Object.keys(COA.shields[type]))
.flat();
return shapes.map(shape => `<option ${shape === selected ? "selected" : ""} value="${shape}">${capitalize(shape)}</option>`); return shapes.map(shape => `<option ${shape === selected ? "selected" : ""} value="${shape}">${capitalize(shape)}</option>`);
} }
@ -167,10 +178,12 @@ function editCultures() {
const culture = +event.target.dataset.id; const culture = +event.target.dataset.id;
const info = document.getElementById("cultureInfo"); const info = document.getElementById("cultureInfo");
if (info) { if (info) {
d3.select("#hierarchy").select("g[data-id='"+culture+"'] > path").classed("selected", 1); d3.select("#hierarchy")
.select("g[data-id='" + culture + "'] > path")
.classed("selected", 1);
const c = pack.cultures[culture]; const c = pack.cultures[culture];
const rural = c.rural * populationRate.value; const rural = c.rural * populationRate;
const urban = c.urban * populationRate.value * urbanization.value; const urban = c.urban * populationRate * urbanization;
const population = rural + urban > 0 ? si(rn(rural + urban)) + " people" : "Extinct"; const population = rural + urban > 0 ? si(rn(rural + urban)) + " people" : "Extinct";
info.innerHTML = `${c.name} culture. ${c.type}. ${population}`; info.innerHTML = `${c.name} culture. ${c.type}. ${population}`;
tip("Drag to change parent, drag to itself to move to the top level. Hold CTRL and click to change abbreviation"); tip("Drag to change parent, drag to itself to move to the top level. Hold CTRL and click to change abbreviation");
@ -179,22 +192,42 @@ function editCultures() {
if (!layerIsOn("toggleCultures")) return; if (!layerIsOn("toggleCultures")) return;
if (customization) return; if (customization) return;
const animate = d3.transition().duration(2000).ease(d3.easeSinIn); const animate = d3.transition().duration(2000).ease(d3.easeSinIn);
cults.select("#culture"+culture).raise().transition(animate).attr("stroke-width", 2.5).attr("stroke", "#d0240f"); cults
debug.select("#cultureCenter"+culture).raise().transition(animate).attr("r", 8).attr("stroke", "#d0240f"); .select("#culture" + culture)
.raise()
.transition(animate)
.attr("stroke-width", 2.5)
.attr("stroke", "#d0240f");
debug
.select("#cultureCenter" + culture)
.raise()
.transition(animate)
.attr("r", 8)
.attr("stroke", "#d0240f");
} }
function cultureHighlightOff(event) { function cultureHighlightOff(event) {
const culture = +event.target.dataset.id; const culture = +event.target.dataset.id;
const info = document.getElementById("cultureInfo"); const info = document.getElementById("cultureInfo");
if (info) { if (info) {
d3.select("#hierarchy").select("g[data-id='"+culture+"'] > path").classed("selected", 0); d3.select("#hierarchy")
.select("g[data-id='" + culture + "'] > path")
.classed("selected", 0);
info.innerHTML = "&#8205;"; info.innerHTML = "&#8205;";
tip(""); tip("");
} }
if (!layerIsOn("toggleCultures")) return; if (!layerIsOn("toggleCultures")) return;
cults.select("#culture"+culture).transition().attr("stroke-width", null).attr("stroke", null); cults
debug.select("#cultureCenter"+culture).transition().attr("r", 6).attr("stroke", null); .select("#culture" + culture)
.transition()
.attr("stroke-width", null)
.attr("stroke", null);
debug
.select("#cultureCenter" + culture)
.transition()
.attr("r", 6)
.attr("stroke", null);
} }
function cultureChangeColor() { function cultureChangeColor() {
@ -202,12 +235,15 @@ function editCultures() {
const currentFill = el.getAttribute("fill"); const currentFill = el.getAttribute("fill");
const culture = +el.parentNode.parentNode.dataset.id; const culture = +el.parentNode.parentNode.dataset.id;
const callback = function(fill) { const callback = function (fill) {
el.setAttribute("fill", fill); el.setAttribute("fill", fill);
pack.cultures[culture].color = fill; pack.cultures[culture].color = fill;
cults.select("#culture"+culture).attr("fill", fill).attr("stroke", fill); cults
debug.select("#cultureCenter"+culture).attr("fill", fill); .select("#culture" + culture)
} .attr("fill", fill)
.attr("stroke", fill);
debug.select("#cultureCenter" + culture).attr("fill", fill);
};
openPicker(currentFill, callback); openPicker(currentFill, callback);
} }
@ -216,7 +252,10 @@ function editCultures() {
const culture = +this.parentNode.dataset.id; const culture = +this.parentNode.dataset.id;
this.parentNode.dataset.name = this.value; this.parentNode.dataset.name = this.value;
pack.cultures[culture].name = this.value; pack.cultures[culture].name = this.value;
pack.cultures[culture].code = abbreviate(this.value, pack.cultures.map(c => c.code)); pack.cultures[culture].code = abbreviate(
this.value,
pack.cultures.map(c => c.code)
);
} }
function cultureChangeExpansionism() { function cultureChangeExpansionism() {
@ -249,7 +288,7 @@ function editCultures() {
if (!coaEl) return; // not rendered if (!coaEl) return; // not rendered
coaEl.remove(); coaEl.remove();
COArenderer.trigger(id, coa); COArenderer.trigger(id, coa);
} };
pack.states.forEach(state => { pack.states.forEach(state => {
if (state.culture !== culture || !state.i || state.removed || !state.coa || state.coa === "custom") return; if (state.culture !== culture || !state.i || state.removed || !state.coa || state.coa === "custom") return;
@ -268,7 +307,7 @@ function editCultures() {
pack.burgs.forEach(burg => { pack.burgs.forEach(burg => {
if (burg.culture !== culture || !burg.i || burg.removed || !burg.coa || burg.coa === "custom") return; if (burg.culture !== culture || !burg.i || burg.removed || !burg.coa || burg.coa === "custom") return;
if (shape === burg.coa.shield) return; if (shape === burg.coa.shield) return;
burg.coa.shield = shape burg.coa.shield = shape;
rerenderCOA("burgCOA" + burg.i, burg.coa); rerenderCOA("burgCOA" + burg.i, burg.coa);
}); });
} }
@ -276,61 +315,72 @@ function editCultures() {
function changePopulation() { function changePopulation() {
const culture = +this.parentNode.dataset.id; const culture = +this.parentNode.dataset.id;
const c = pack.cultures[culture]; const c = pack.cultures[culture];
if (!c.cells) {tip("Culture does not have any cells, cannot change population", false, "error"); return;} if (!c.cells) {
const rural = rn(c.rural * populationRate.value); tip("Culture does not have any cells, cannot change population", false, "error");
const urban = rn(c.urban * populationRate.value * urbanization.value); return;
}
const rural = rn(c.rural * populationRate);
const urban = rn(c.urban * populationRate * urbanization);
const total = rural + urban; const total = rural + urban;
const l = n => Number(n).toLocaleString(); const l = n => Number(n).toLocaleString();
const burgs = pack.burgs.filter(b => !b.removed && b.culture === culture); const burgs = pack.burgs.filter(b => !b.removed && b.culture === culture);
alertMessage.innerHTML = ` alertMessage.innerHTML = `
Rural: <input type="number" min=0 step=1 id="ruralPop" value=${rural} style="width:6em"> Rural: <input type="number" min=0 step=1 id="ruralPop" value=${rural} style="width:6em">
Urban: <input type="number" min=0 step=1 id="urbanPop" value=${urban} style="width:6em" ${burgs.length?'':"disabled"}> Urban: <input type="number" min=0 step=1 id="urbanPop" value=${urban} style="width:6em" ${burgs.length ? "" : "disabled"}>
<p>Total population: ${l(total)} ⇒ <span id="totalPop">${l(total)}</span> (<span id="totalPopPerc">100</span>%)</p>`; <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; const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
if (isNaN(totalNew)) return; if (isNaN(totalNew)) return;
totalPop.innerHTML = l(totalNew); totalPop.innerHTML = l(totalNew);
totalPopPerc.innerHTML = rn(totalNew / total * 100); totalPopPerc.innerHTML = rn((totalNew / total) * 100);
} };
ruralPop.oninput = () => update(); ruralPop.oninput = () => update();
urbanPop.oninput = () => update(); urbanPop.oninput = () => update();
$("#alert").dialog({ $("#alert").dialog({
resizable: false, title: "Change culture population", width: "24em", buttons: { resizable: false,
Apply: function() {applyPopulationChange(); $(this).dialog("close");}, title: "Change culture population",
Cancel: function() {$(this).dialog("close");} width: "24em",
}, position: {my: "center", at: "center", of: "svg"} buttons: {
Apply: function () {
applyPopulationChange();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
position: {my: "center", at: "center", of: "svg"}
}); });
function applyPopulationChange() { function applyPopulationChange() {
const ruralChange = ruralPop.value / rural; const ruralChange = ruralPop.value / rural;
if (isFinite(ruralChange) && ruralChange !== 1) { if (isFinite(ruralChange) && ruralChange !== 1) {
const cells = pack.cells.i.filter(i => pack.cells.culture[i] === culture); const cells = pack.cells.i.filter(i => pack.cells.culture[i] === culture);
cells.forEach(i => pack.cells.pop[i] *= ruralChange); cells.forEach(i => (pack.cells.pop[i] *= ruralChange));
} }
if (!isFinite(ruralChange) && +ruralPop.value > 0) { if (!isFinite(ruralChange) && +ruralPop.value > 0) {
const points = ruralPop.value / populationRate.value; const points = ruralPop.value / populationRate;
const cells = pack.cells.i.filter(i => pack.cells.culture[i] === culture); const cells = pack.cells.i.filter(i => pack.cells.culture[i] === culture);
const pop = rn(points / cells.length); 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; const urbanChange = urbanPop.value / urban;
if (isFinite(urbanChange) && urbanChange !== 1) { if (isFinite(urbanChange) && urbanChange !== 1) {
burgs.forEach(b => b.population = rn(b.population * urbanChange, 4)); burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
} }
if (!isFinite(urbanChange) && +urbanPop.value > 0) { 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); const population = rn(points / burgs.length, 4);
burgs.forEach(b => b.population = population); burgs.forEach(b => (b.population = population));
} }
refreshCulturesEditor(); refreshCulturesEditor();
} }
} }
function cultureRegenerateBurgs() { function cultureRegenerateBurgs() {
@ -339,7 +389,7 @@ function editCultures() {
const cBurgs = pack.burgs.filter(b => b.culture === culture && !b.lock); const cBurgs = pack.burgs.filter(b => b.culture === culture && !b.lock);
cBurgs.forEach(b => { cBurgs.forEach(b => {
b.name = Names.getCulture(culture); b.name = Names.getCulture(culture);
labels.select("[data-id='" + b.i +"']").text(b.name); labels.select("[data-id='" + b.i + "']").text(b.name);
}); });
tip(`Names for ${cBurgs.length} burgs are regenerated`, false, "success"); tip(`Names for ${cBurgs.length} burgs are regenerated`, false, "success");
} }
@ -349,40 +399,64 @@ function editCultures() {
const culture = +this.parentNode.dataset.id; const culture = +this.parentNode.dataset.id;
alertMessage.innerHTML = "Are you sure you want to remove the culture? <br>This action cannot be reverted"; alertMessage.innerHTML = "Are you sure you want to remove the culture? <br>This action cannot be reverted";
$("#alert").dialog({resizable: false, title: "Remove culture", $("#alert").dialog({
resizable: false,
title: "Remove culture",
buttons: { buttons: {
Remove: function() { Remove: function () {
cults.select("#culture"+culture).remove(); cults.select("#culture" + culture).remove();
debug.select("#cultureCenter"+culture).remove(); debug.select("#cultureCenter" + culture).remove();
pack.burgs.filter(b => b.culture == culture).forEach(b => b.culture = 0); pack.burgs.filter(b => b.culture == culture).forEach(b => (b.culture = 0));
pack.states.forEach((s, i) => {if(s.culture === culture) s.culture = 0;}); pack.states.forEach((s, i) => {
pack.cells.culture.forEach((c, i) => {if(c === culture) pack.cells.culture[i] = 0;}); if (s.culture === culture) s.culture = 0;
});
pack.cells.culture.forEach((c, i) => {
if (c === culture) pack.cells.culture[i] = 0;
});
pack.cultures[culture].removed = true; pack.cultures[culture].removed = true;
const origin = pack.cultures[culture].origin; const origin = pack.cultures[culture].origin;
pack.cultures.forEach(c => {if(c.origin === culture) c.origin = origin;}); pack.cultures.forEach(c => {
if (c.origin === culture) c.origin = origin;
});
refreshCulturesEditor(); refreshCulturesEditor();
$(this).dialog("close"); $(this).dialog("close");
}, },
Cancel: function() {$(this).dialog("close");} Cancel: function () {
$(this).dialog("close");
}
} }
}); });
} }
function drawCultureCenters() { function drawCultureCenters() {
const tooltip = 'Drag to move the culture center (ancestral home)'; const tooltip = "Drag to move the culture center (ancestral home)";
debug.select("#cultureCenters").remove(); debug.select("#cultureCenters").remove();
const cultureCenters = debug.append("g").attr("id", "cultureCenters") const cultureCenters = debug.append("g").attr("id", "cultureCenters").attr("stroke-width", 2).attr("stroke", "#444444").style("cursor", "move");
.attr("stroke-width", 2).attr("stroke", "#444444").style("cursor", "move");
const data = pack.cultures.filter(c => c.i && !c.removed); const data = pack.cultures.filter(c => c.i && !c.removed);
cultureCenters.selectAll("circle").data(data).enter().append("circle") cultureCenters
.attr("id", d => "cultureCenter"+d.i).attr("data-id", d => d.i) .selectAll("circle")
.attr("r", 6).attr("fill", d => d.color) .data(data)
.attr("cx", d => pack.cells.p[d.center][0]).attr("cy", d => pack.cells.p[d.center][1]) .enter()
.on("mouseenter", d => {tip(tooltip, true); body.querySelector(`div[data-id='${d.i}']`).classList.add("selected"); cultureHighlightOn(event);}) .append("circle")
.on("mouseleave", d => {tip('', true); body.querySelector(`div[data-id='${d.i}']`).classList.remove("selected"); cultureHighlightOff(event);}) .attr("id", d => "cultureCenter" + d.i)
.attr("data-id", d => d.i)
.attr("r", 6)
.attr("fill", d => d.color)
.attr("cx", d => pack.cells.p[d.center][0])
.attr("cy", d => pack.cells.p[d.center][1])
.on("mouseenter", d => {
tip(tooltip, true);
body.querySelector(`div[data-id='${d.i}']`).classList.add("selected");
cultureHighlightOn(event);
})
.on("mouseleave", d => {
tip("", true);
body.querySelector(`div[data-id='${d.i}']`).classList.remove("selected");
cultureHighlightOff(event);
})
.call(d3.drag().on("start", cultureCenterDrag)); .call(d3.drag().on("start", cultureCenterDrag));
} }
@ -399,8 +473,14 @@ function editCultures() {
} }
function toggleLegend() { function toggleLegend() {
if (legend.selectAll("*").size()) {clearLegend(); return;}; // hide legend if (legend.selectAll("*").size()) {
const data = pack.cultures.filter(c => c.i && !c.removed && c.cells).sort((a, b) => b.area - a.area).map(c => [c.i, c.color, c.name]); clearLegend();
return;
} // hide legend
const data = pack.cultures
.filter(c => c.i && !c.removed && c.cells)
.sort((a, b) => b.area - a.area)
.map(c => [c.i, c.color, c.name]);
drawLegend("Cultures", data); drawLegend("Cultures", data);
} }
@ -411,10 +491,10 @@ function editCultures() {
const totalArea = +culturesFooterArea.dataset.area; const totalArea = +culturesFooterArea.dataset.area;
const totalPopulation = +culturesFooterPopulation.dataset.population; const totalPopulation = +culturesFooterPopulation.dataset.population;
body.querySelectorAll(":scope > div").forEach(function(el) { body.querySelectorAll(":scope > div").forEach(function (el) {
el.querySelector(".stateCells").innerHTML = rn(+el.dataset.cells / totalCells * 100) + "%"; el.querySelector(".stateCells").innerHTML = rn((+el.dataset.cells / totalCells) * 100) + "%";
el.querySelector(".biomeArea").innerHTML = rn(+el.dataset.area / totalArea * 100) + "%"; el.querySelector(".biomeArea").innerHTML = rn((+el.dataset.area / totalArea) * 100) + "%";
el.querySelector(".culturePopulation").innerHTML = rn(+el.dataset.population / totalPopulation * 100) + "%"; el.querySelector(".culturePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%";
}); });
} else { } else {
body.dataset.type = "absolute"; body.dataset.type = "absolute";
@ -426,11 +506,18 @@ function editCultures() {
// build hierarchy tree // build hierarchy tree
pack.cultures[0].origin = null; pack.cultures[0].origin = null;
const cultures = pack.cultures.filter(c => !c.removed); const cultures = pack.cultures.filter(c => !c.removed);
if (cultures.length < 3) {tip("Not enough cultures to show hierarchy", false, "error"); return;} if (cultures.length < 3) {
const root = d3.stratify().id(d => d.i).parentId(d => d.origin)(cultures); tip("Not enough cultures to show hierarchy", false, "error");
return;
}
const root = d3
.stratify()
.id(d => d.i)
.parentId(d => d.origin)(cultures);
const treeWidth = root.leaves().length; const treeWidth = root.leaves().length;
const treeHeight = root.height; const treeHeight = root.height;
const width = treeWidth * 40, height = treeHeight * 60; const width = treeWidth * 40,
height = treeHeight * 60;
const margin = {top: 10, right: 10, bottom: -5, left: 10}; const margin = {top: 10, right: 10, bottom: -5, left: 10};
const w = width - margin.left - margin.right; const w = width - margin.left - margin.right;
@ -439,8 +526,7 @@ function editCultures() {
// prepare svg // prepare svg
alertMessage.innerHTML = "<div id='cultureInfo' class='chartInfo'>&#8205;</div>"; alertMessage.innerHTML = "<div id='cultureInfo' class='chartInfo'>&#8205;</div>";
const svg = d3.select("#alertMessage").insert("svg", "#cultureInfo").attr("id", "hierarchy") const svg = d3.select("#alertMessage").insert("svg", "#cultureInfo").attr("id", "hierarchy").attr("width", width).attr("height", height).style("text-anchor", "middle");
.attr("width", width).attr("height", height).style("text-anchor", "middle");
const graph = svg.append("g").attr("transform", `translate(10, -45)`); const graph = svg.append("g").attr("transform", `translate(10, -45)`);
const links = graph.append("g").attr("fill", "none").attr("stroke", "#aaaaaa"); const links = graph.append("g").attr("fill", "none").attr("stroke", "#aaaaaa");
const nodes = graph.append("g"); const nodes = graph.append("g");
@ -448,49 +534,74 @@ function editCultures() {
renderTree(); renderTree();
function renderTree() { function renderTree() {
treeLayout(root); treeLayout(root);
links.selectAll('path').data(root.links()).enter() links
.append('path').attr("d", d => {return "M" + d.source.x + "," + d.source.y .selectAll("path")
+ "C" + d.source.x + "," + (d.source.y * 3 + d.target.y) / 4 .data(root.links())
+ " " + d.target.x + "," + (d.source.y * 2 + d.target.y) / 3 .enter()
+ " " + d.target.x + "," + d.target.y;}); .append("path")
.attr("d", d => {
return "M" + d.source.x + "," + d.source.y + "C" + d.source.x + "," + (d.source.y * 3 + d.target.y) / 4 + " " + d.target.x + "," + (d.source.y * 2 + d.target.y) / 3 + " " + d.target.x + "," + d.target.y;
});
const node = nodes.selectAll('g').data(root.descendants()).enter() const node = nodes
.append('g').attr("data-id", d => d.data.i).attr("stroke", "#333333") .selectAll("g")
.data(root.descendants())
.enter()
.append("g")
.attr("data-id", d => d.data.i)
.attr("stroke", "#333333")
.attr("transform", d => `translate(${d.x}, ${d.y})`) .attr("transform", d => `translate(${d.x}, ${d.y})`)
.on("mouseenter", () => cultureHighlightOn(event)) .on("mouseenter", () => cultureHighlightOn(event))
.on("mouseleave", () => cultureHighlightOff(event)) .on("mouseleave", () => cultureHighlightOff(event))
.call(d3.drag().on("start", d => dragToReorigin(d))); .call(d3.drag().on("start", d => dragToReorigin(d)));
node.append("path").attr("d", d => { node
if (!d.data.i) return "M5,0A5,5,0,1,1,-5,0A5,5,0,1,1,5,0"; else // small circle .append("path")
if (d.data.type === "Generic") return "M11.3,0A11.3,11.3,0,1,1,-11.3,0A11.3,11.3,0,1,1,11.3,0"; else // circle .attr("d", d => {
if (d.data.type === "River") return "M0,-14L14,0L0,14L-14,0Z"; else // diamond if (!d.data.i) return "M5,0A5,5,0,1,1,-5,0A5,5,0,1,1,5,0";
if (d.data.type === "Lake") return "M-6.5,-11.26l13,0l6.5,11.26l-6.5,11.26l-13,0l-6.5,-11.26Z"; else // hexagon // small circle
if (d.data.type === "Naval") return "M-11,-11h22v22h-22Z"; // square else if (d.data.type === "Generic") return "M11.3,0A11.3,11.3,0,1,1,-11.3,0A11.3,11.3,0,1,1,11.3,0";
// circle
else if (d.data.type === "River") return "M0,-14L14,0L0,14L-14,0Z";
// diamond
else if (d.data.type === "Lake") return "M-6.5,-11.26l13,0l6.5,11.26l-6.5,11.26l-13,0l-6.5,-11.26Z";
// hexagon
else if (d.data.type === "Naval") return "M-11,-11h22v22h-22Z"; // square
if (d.data.type === "Highland") return "M-11,-11l11,2l11,-2l-2,11l2,11l-11,-2l-11,2l2,-11Z"; // concave square if (d.data.type === "Highland") return "M-11,-11l11,2l11,-2l-2,11l2,11l-11,-2l-11,2l2,-11Z"; // concave square
if (d.data.type === "Nomadic") return "M-4.97,-12.01 l9.95,0 l7.04,7.04 l0,9.95 l-7.04,7.04 l-9.95,0 l-7.04,-7.04 l0,-9.95Z"; // octagon if (d.data.type === "Nomadic") return "M-4.97,-12.01 l9.95,0 l7.04,7.04 l0,9.95 l-7.04,7.04 l-9.95,0 l-7.04,-7.04 l0,-9.95Z"; // octagon
if (d.data.type === "Hunting") return "M0,-14l14,11l-6,14h-16l-6,-14Z"; // pentagon if (d.data.type === "Hunting") return "M0,-14l14,11l-6,14h-16l-6,-14Z"; // pentagon
return "M-11,-11h22v22h-22Z"; // square return "M-11,-11h22v22h-22Z"; // square
}).attr("fill", d => d.data.i ? d.data.color : "#ffffff") })
.attr("stroke-dasharray", d => d.data.cells ? "null" : "1"); .attr("fill", d => (d.data.i ? d.data.color : "#ffffff"))
.attr("stroke-dasharray", d => (d.data.cells ? "null" : "1"));
node.append("text").attr("dy", ".35em").text(d => d.data.i ? d.data.code : ''); node
.append("text")
.attr("dy", ".35em")
.text(d => (d.data.i ? d.data.code : ""));
} }
$("#alert").dialog({ $("#alert").dialog({
title: "Cultures tree", width: fitContent(), resizable: false, title: "Cultures tree",
position: {my: "left center", at: "left+10 center", of: "svg"}, buttons: {}, width: fitContent(),
close: () => {alertMessage.innerHTML = "";} resizable: false,
position: {my: "left center", at: "left+10 center", of: "svg"},
buttons: {},
close: () => {
alertMessage.innerHTML = "";
}
}); });
function dragToReorigin(d) { function dragToReorigin(d) {
if (isCtrlClick(d3.event.sourceEvent)) {changeCode(d); return;} if (isCtrlClick(d3.event.sourceEvent)) {
changeCode(d);
return;
}
const originLine = graph.append("path") const originLine = graph.append("path").attr("class", "dragLine").attr("d", `M${d.x},${d.y}L${d.x},${d.y}`);
.attr("class", "dragLine").attr("d", `M${d.x},${d.y}L${d.x},${d.y}`);
d3.event.on("drag", () => { d3.event.on("drag", () => {
originLine.attr("d", `M${d.x},${d.y}L${d3.event.x},${d3.event.y}`) originLine.attr("d", `M${d.x},${d.y}L${d3.event.x},${d3.event.y}`);
}); });
d3.event.on("end", () => { d3.event.on("end", () => {
@ -504,14 +615,17 @@ function editCultures() {
if (newOrigin == culture) newOrigin = 0; // move to top if (newOrigin == culture) newOrigin = 0; // move to top
if (newOrigin && d.descendants().some(node => node.id == newOrigin)) return; // cannot be a child of its own child if (newOrigin && d.descendants().some(node => node.id == newOrigin)) return; // cannot be a child of its own child
pack.cultures[culture].origin = d.data.origin = newOrigin; // change data pack.cultures[culture].origin = d.data.origin = newOrigin; // change data
showHierarchy() // update hierarchy showHierarchy(); // update hierarchy
}); });
} }
function changeCode(d) { function changeCode(d) {
prompt(`Please provide an abbreviation for culture: ${d.data.name}`, {default:d.data.code}, v => { prompt(`Please provide an abbreviation for culture: ${d.data.name}`, {default: d.data.code}, v => {
pack.cultures[d.data.i].code = v; pack.cultures[d.data.i].code = v;
nodes.select("g[data-id='"+d.data.i+"']").select("text").text(v); nodes
.select("g[data-id='" + d.data.i + "']")
.select("text")
.text(v);
}); });
} }
} }
@ -520,13 +634,13 @@ function editCultures() {
if (!must && !culturesAutoChange.checked) return; if (!must && !culturesAutoChange.checked) return;
pack.cells.culture = new Uint16Array(pack.cells.i.length); pack.cells.culture = new Uint16Array(pack.cells.i.length);
pack.cultures.forEach(function(c) { pack.cultures.forEach(function (c) {
if (!c.i || c.removed) return; if (!c.i || c.removed) return;
pack.cells.culture[c.center] = c.i; pack.cells.culture[c.center] = c.i;
}); });
Cultures.expand(); Cultures.expand();
drawCultures(); drawCultures();
pack.burgs.forEach(b => b.culture = pack.cells.culture[b.cell]); pack.burgs.forEach(b => (b.culture = pack.cells.culture[b.cell]));
refreshCulturesEditor(); refreshCulturesEditor();
document.querySelector("input.statePower").focus(); // to not trigger hotkeys document.querySelector("input.statePower").focus(); // to not trigger hotkeys
} }
@ -535,7 +649,7 @@ function editCultures() {
if (!layerIsOn("toggleCultures")) toggleCultures(); if (!layerIsOn("toggleCultures")) toggleCultures();
customization = 4; customization = 4;
cults.append("g").attr("id", "temp"); cults.append("g").attr("id", "temp");
document.querySelectorAll("#culturesBottom > *").forEach(el => el.style.display = "none"); document.querySelectorAll("#culturesBottom > *").forEach(el => (el.style.display = "none"));
document.getElementById("culturesManuallyButtons").style.display = "inline-block"; document.getElementById("culturesManuallyButtons").style.display = "inline-block";
debug.select("#cultureCenters").style("display", "none"); debug.select("#cultureCenters").style("display", "none");
@ -543,14 +657,11 @@ function editCultures() {
culturesHeader.querySelector("div[data-sortby='type']").style.left = "8.8em"; culturesHeader.querySelector("div[data-sortby='type']").style.left = "8.8em";
culturesHeader.querySelector("div[data-sortby='base']").style.left = "13.6em"; culturesHeader.querySelector("div[data-sortby='base']").style.left = "13.6em";
culturesFooter.style.display = "none"; culturesFooter.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"));
$("#culturesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}}); $("#culturesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
tip("Click on culture to select, drag the circle to change culture", true); tip("Click on culture to select, drag the circle to change culture", true);
viewbox.style("cursor", "crosshair") viewbox.style("cursor", "crosshair").on("click", selectCultureOnMapClick).call(d3.drag().on("start", dragCultureBrush)).on("touchmove mousemove", moveCultureBrush);
.on("click", selectCultureOnMapClick)
.call(d3.drag().on("start", dragCultureBrush))
.on("touchmove mousemove", moveCultureBrush);
body.querySelector("div").classList.add("selected"); body.querySelector("div").classList.add("selected");
} }
@ -566,11 +677,11 @@ function editCultures() {
const i = findCell(point[0], point[1]); const i = findCell(point[0], point[1]);
if (pack.cells.h[i] < 20) return; if (pack.cells.h[i] < 20) return;
const assigned = cults.select("#temp").select("polygon[data-cell='"+i+"']"); const assigned = cults.select("#temp").select("polygon[data-cell='" + i + "']");
const culture = assigned.size() ? +assigned.attr("data-culture") : pack.cells.culture[i]; const culture = assigned.size() ? +assigned.attr("data-culture") : pack.cells.culture[i];
body.querySelector("div.selected").classList.remove("selected"); body.querySelector("div.selected").classList.remove("selected");
body.querySelector("div[data-id='"+culture+"']").classList.add("selected"); body.querySelector("div[data-id='" + culture + "']").classList.add("selected");
} }
function dragCultureBrush() { function dragCultureBrush() {
@ -594,8 +705,8 @@ function editCultures() {
const cultureNew = +selected.dataset.id; const cultureNew = +selected.dataset.id;
const color = pack.cultures[cultureNew].color || "#ffffff"; const color = pack.cultures[cultureNew].color || "#ffffff";
selection.forEach(function(i) { selection.forEach(function (i) {
const exists = temp.select("polygon[data-cell='"+i+"']"); const exists = temp.select("polygon[data-cell='" + i + "']");
const cultureOld = exists.size() ? +exists.attr("data-culture") : pack.cells.culture[i]; const cultureOld = exists.size() ? +exists.attr("data-culture") : pack.cells.culture[i];
if (cultureNew === cultureOld) return; if (cultureNew === cultureOld) return;
@ -614,7 +725,7 @@ function editCultures() {
function applyCultureManualAssignent() { function applyCultureManualAssignent() {
const changed = cults.select("#temp").selectAll("polygon"); const changed = cults.select("#temp").selectAll("polygon");
changed.each(function() { changed.each(function () {
const i = +this.dataset.cell; const i = +this.dataset.cell;
const c = +this.dataset.culture; const c = +this.dataset.culture;
pack.cells.culture[i] = c; pack.cells.culture[i] = c;
@ -632,15 +743,15 @@ function editCultures() {
customization = 0; customization = 0;
cults.select("#temp").remove(); cults.select("#temp").remove();
removeCircle(); removeCircle();
document.querySelectorAll("#culturesBottom > *").forEach(el => el.style.display = "inline-block"); document.querySelectorAll("#culturesBottom > *").forEach(el => (el.style.display = "inline-block"));
document.getElementById("culturesManuallyButtons").style.display = "none"; document.getElementById("culturesManuallyButtons").style.display = "none";
culturesEditor.querySelectorAll(".hide").forEach(el => el.classList.remove("hidden")); culturesEditor.querySelectorAll(".hide").forEach(el => el.classList.remove("hidden"));
culturesHeader.querySelector("div[data-sortby='type']").style.left = "18.6em"; culturesHeader.querySelector("div[data-sortby='type']").style.left = "18.6em";
culturesHeader.querySelector("div[data-sortby='base']").style.left = "35.8em"; culturesHeader.querySelector("div[data-sortby='base']").style.left = "35.8em";
culturesFooter.style.display = "block"; culturesFooter.style.display = "block";
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(!close) $("#culturesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}}); if (!close) $("#culturesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
debug.select("#cultureCenters").style("display", null); debug.select("#cultureCenters").style("display", null);
restoreDefaultEvents(); restoreDefaultEvents();
@ -650,28 +761,37 @@ function editCultures() {
} }
function enterAddCulturesMode() { function enterAddCulturesMode() {
if (this.classList.contains("pressed")) {exitAddCultureMode(); return;}; if (this.classList.contains("pressed")) {
exitAddCultureMode();
return;
}
customization = 9; customization = 9;
this.classList.add("pressed"); this.classList.add("pressed");
tip("Click on the map to add a new culture", true); tip("Click on the map to add a new culture", true);
viewbox.style("cursor", "crosshair").on("click", addCulture); viewbox.style("cursor", "crosshair").on("click", addCulture);
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 exitAddCultureMode() { function exitAddCultureMode() {
customization = 0; customization = 0;
restoreDefaultEvents(); restoreDefaultEvents();
clearMainTip(); 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 (culturesAdd.classList.contains("pressed")) culturesAdd.classList.remove("pressed"); if (culturesAdd.classList.contains("pressed")) culturesAdd.classList.remove("pressed");
} }
function addCulture() { function addCulture() {
const point = d3.mouse(this); const point = d3.mouse(this);
const center = findCell(point[0], point[1]); const center = findCell(point[0], point[1]);
if (pack.cells.h[center] < 20) {tip("You cannot place culture center into the water. Please click on a land cell", false, "error"); return;} if (pack.cells.h[center] < 20) {
tip("You cannot place culture center into the water. Please click on a land cell", false, "error");
return;
}
const occupied = pack.cultures.some(c => !c.removed && c.center === center); const occupied = pack.cultures.some(c => !c.removed && c.center === center);
if (occupied) {tip("This cell is already a culture center. Please select a different cell", false, "error"); return;} if (occupied) {
tip("This cell is already a culture center. Please select a different cell", false, "error");
return;
}
if (d3.event.shiftKey === false) exitAddCultureMode(); if (d3.event.shiftKey === false) exitAddCultureMode();
Cultures.add(center); Cultures.add(center);
@ -682,9 +802,9 @@ function editCultures() {
function downloadCulturesData() { function downloadCulturesData() {
const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value; const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value;
let data = "Id,Culture,Color,Cells,Expansionism,Type,Area "+unit+",Population,Namesbase,Emblems Shape\n"; // headers let data = "Id,Culture,Color,Cells,Expansionism,Type,Area " + unit + ",Population,Namesbase,Emblems Shape\n"; // headers
body.querySelectorAll(":scope > div").forEach(function(el) { body.querySelectorAll(":scope > div").forEach(function (el) {
data += el.dataset.id + ","; data += el.dataset.id + ",";
data += el.dataset.name + ","; data += el.dataset.name + ",";
data += el.dataset.color + ","; data += el.dataset.color + ",";
@ -705,7 +825,6 @@ function editCultures() {
function closeCulturesEditor() { function closeCulturesEditor() {
debug.select("#cultureCenters").remove(); debug.select("#cultureCenters").remove();
exitCulturesManualAssignment("close"); exitCulturesManualAssignment("close");
exitAddCultureMode() exitAddCultureMode();
} }
} }

181
modules/ui/elevation-profile.js
View file

@ -2,7 +2,10 @@
function showEPForRoute(node) { function showEPForRoute(node) {
const points = []; const points = [];
debug.select("#controlPoints").selectAll("circle").each(function() { debug
.select("#controlPoints")
.selectAll("circle")
.each(function () {
const i = findCell(this.getAttribute("cx"), this.getAttribute("cy")); const i = findCell(this.getAttribute("cx"), this.getAttribute("cy"));
points.push(i); points.push(i);
}); });
@ -13,7 +16,10 @@ function showEPForRoute(node) {
function showEPForRiver(node) { function showEPForRiver(node) {
const points = []; const points = [];
debug.select("#controlPoints").selectAll("circle").each(function() { debug
.select("#controlPoints")
.selectAll("circle")
.each(function () {
const i = findCell(this.getAttribute("cx"), this.getAttribute("cy")); const i = findCell(this.getAttribute("cx"), this.getAttribute("cy"));
points.push(i); points.push(i);
}); });
@ -29,7 +35,9 @@ function showElevationProfile(data, routeLen, isRiver) {
document.getElementById("epSave").addEventListener("click", downloadCSV); document.getElementById("epSave").addEventListener("click", downloadCSV);
$("#elevationProfile").dialog({ $("#elevationProfile").dialog({
title: "Elevation profile", resizable: false, width: window.width, title: "Elevation profile",
resizable: false,
width: window.width,
close: closeElevationProfile, close: closeElevationProfile,
position: {my: "left top", at: "left+20 bottom-500", of: window, collision: "fit"} position: {my: "left top", at: "left+20 bottom-500", of: window, collision: "fit"}
}); });
@ -37,27 +45,30 @@ function showElevationProfile(data, routeLen, isRiver) {
// prevent river graphs from showing rivers as flowing uphill - remember the general slope // prevent river graphs from showing rivers as flowing uphill - remember the general slope
let slope = 0; let slope = 0;
if (isRiver) { if (isRiver) {
if (pack.cells.h[data[0]] < pack.cells.h[data[data.length-1]]) { if (pack.cells.h[data[0]] < pack.cells.h[data[data.length - 1]]) {
slope = 1; // up-hill slope = 1; // up-hill
} else if (pack.cells.h[data[0]] > pack.cells.h[data[data.length-1]]) { } else if (pack.cells.h[data[0]] > pack.cells.h[data[data.length - 1]]) {
slope = -1; // down-hill slope = -1; // down-hill
} }
} }
const chartWidth = window.innerWidth-180, chartHeight = 300; // height of our land/sea profile, excluding the biomes data below const chartWidth = window.innerWidth - 180,
const xOffset = 80, yOffset = 80; // this is our drawing starting point from top-left (y = 0) of SVG chartHeight = 300; // height of our land/sea profile, excluding the biomes data below
const xOffset = 80,
yOffset = 80; // this is our drawing starting point from top-left (y = 0) of SVG
const biomesHeight = 40; const biomesHeight = 40;
let lastBurgIndex = 0; let lastBurgIndex = 0;
let lastBurgCell = 0; let lastBurgCell = 0;
let burgCount = 0; let burgCount = 0;
let chartData = {biome:[], burg:[], cell:[], height:[], mi:1000000, ma:0, mih: 100, mah: 0, points:[]}; let chartData = {biome: [], burg: [], cell: [], height: [], mi: 1000000, ma: 0, mih: 100, mah: 0, points: []};
for (let i = 0, prevB = 0, prevH = -1; i < data.length; i++) { for (let i = 0, prevB = 0, prevH = -1; i < data.length; i++) {
let cell = data[i]; let cell = data[i];
let h = pack.cells.h[cell]; let h = pack.cells.h[cell];
if (h < 20) { if (h < 20) {
const f = pack.features[pack.cells.f[cell]]; const f = pack.features[pack.cells.f[cell]];
if (f.type === "lake") h = f.height; else h = 20; if (f.type === "lake") h = f.height;
else h = 20;
} }
// check for river up-hill // check for river up-hill
@ -73,21 +84,25 @@ function showElevationProfile(data, routeLen, isRiver) {
let b = pack.cells.burg[cell]; let b = pack.cells.burg[cell];
if (b == prevB) b = 0; if (b == prevB) b = 0;
else prevB = b; else prevB = b;
if (b) { burgCount++; lastBurgIndex = i; lastBurgCell = cell; } if (b) {
burgCount++;
lastBurgIndex = i;
lastBurgCell = cell;
}
chartData.biome[i] = pack.cells.biome[cell]; chartData.biome[i] = pack.cells.biome[cell];
chartData.burg[i] = b; chartData.burg[i] = b;
chartData.cell[i] = cell; chartData.cell[i] = cell;
let sh = getHeight(h); let sh = getHeight(h);
chartData.height[i] = parseInt(sh.substr(0, sh.indexOf(' '))); chartData.height[i] = parseInt(sh.substr(0, sh.indexOf(" ")));
chartData.mih = Math.min(chartData.mih, h); chartData.mih = Math.min(chartData.mih, h);
chartData.mah = Math.max(chartData.mah, h); chartData.mah = Math.max(chartData.mah, h);
chartData.mi = Math.min(chartData.mi, chartData.height[i]); chartData.mi = Math.min(chartData.mi, chartData.height[i]);
chartData.ma = Math.max(chartData.ma, chartData.height[i]); chartData.ma = Math.max(chartData.ma, chartData.height[i]);
} }
if (lastBurgIndex != 0 && lastBurgCell == chartData.cell[data.length-1] && lastBurgIndex < data.length-1) { if (lastBurgIndex != 0 && lastBurgCell == chartData.cell[data.length - 1] && lastBurgIndex < data.length - 1) {
chartData.burg[data.length-1] = chartData.burg[lastBurgIndex]; chartData.burg[data.length - 1] = chartData.burg[lastBurgIndex];
chartData.burg[lastBurgIndex] = 0; chartData.burg[lastBurgIndex] = 0;
} }
@ -96,7 +111,7 @@ function showElevationProfile(data, routeLen, isRiver) {
function downloadCSV() { function downloadCSV() {
let data = "Point,X,Y,Cell,Height,Height value,Population,Burg,Burg population,Biome,Biome color,Culture,Culture color,Religion,Religion color,Province,Province color,State,State color\n"; // headers let data = "Point,X,Y,Cell,Height,Height value,Population,Burg,Burg population,Biome,Biome color,Culture,Culture color,Religion,Religion color,Province,Province color,State,State color\n"; // headers
for (let k=0; k < chartData.points.length; k++) { for (let k = 0; k < chartData.points.length; k++) {
let cell = chartData.cell[k]; let cell = chartData.cell[k];
let burg = pack.cells.burg[cell]; let burg = pack.cells.burg[cell];
let biome = pack.cells.biome[cell]; let biome = pack.cells.biome[cell];
@ -107,16 +122,16 @@ function showElevationProfile(data, routeLen, isRiver) {
let pop = pack.cells.pop[cell]; let pop = pack.cells.pop[cell];
let h = pack.cells.h[cell]; let h = pack.cells.h[cell];
data += k+1 + ","; data += k + 1 + ",";
data += chartData.points[k][0] + ","; data += chartData.points[k][0] + ",";
data += chartData.points[k][1] + ","; data += chartData.points[k][1] + ",";
data += cell + ","; data += cell + ",";
data += getHeight(h) + ","; data += getHeight(h) + ",";
data += h + ","; data += h + ",";
data += rn(pop * populationRate.value) + ","; data += rn(pop * populationRate) + ",";
if (burg) { if (burg) {
data += pack.burgs[burg].name + ","; data += pack.burgs[burg].name + ",";
data += (pack.burgs[burg].population * populationRate.value * urbanization.value) + ","; data += pack.burgs[burg].population * populationRate * urbanization + ",";
} else { } else {
data += ",0,"; data += ",0,";
} }
@ -142,18 +157,27 @@ function showElevationProfile(data, routeLen, isRiver) {
chartData.points = []; chartData.points = [];
let heightScale = 100 / parseInt(epScaleRange.value); let heightScale = 100 / parseInt(epScaleRange.value);
heightScale *= .9; // curves cause the heights to go slightly higher, adjust here heightScale *= 0.9; // curves cause the heights to go slightly higher, adjust here
const xscale = d3.scaleLinear().domain([0, data.length]).range([0, chartWidth]); const xscale = d3.scaleLinear().domain([0, data.length]).range([0, chartWidth]);
const yscale = d3.scaleLinear().domain([0, chartData.ma * heightScale]).range([chartHeight, 0]); const yscale = d3
.scaleLinear()
.domain([0, chartData.ma * heightScale])
.range([chartHeight, 0]);
for (let i=0; i<data.length; i++) { for (let i = 0; i < data.length; i++) {
chartData.points.push([xscale(i) + xOffset, yscale(chartData.height[i]) + yOffset]); chartData.points.push([xscale(i) + xOffset, yscale(chartData.height[i]) + yOffset]);
} }
document.getElementById("elevationGraph").innerHTML = ""; document.getElementById("elevationGraph").innerHTML = "";
const chart = d3.select("#elevationGraph").append("svg").attr("width", chartWidth+120).attr("height", chartHeight+yOffset+biomesHeight).attr("id", "elevationSVG").attr("class", "epbackground"); const chart = d3
.select("#elevationGraph")
.append("svg")
.attr("width", chartWidth + 120)
.attr("height", chartHeight + yOffset + biomesHeight)
.attr("id", "elevationSVG")
.attr("class", "epbackground");
// arrow-head definition // arrow-head definition
chart.append("defs").append("marker").attr("id", "arrowhead").attr("orient", "auto").attr("markerWidth", "2").attr("markerHeight", "4").attr("refX", "0.1").attr("refY", "2").append("path").attr("d", "M0,0 V4 L2,2 Z").attr("fill", "darkgray"); chart.append("defs").append("marker").attr("id", "arrowhead").attr("orient", "auto").attr("markerWidth", "2").attr("markerHeight", "4").attr("refX", "0.1").attr("refY", "2").append("path").attr("d", "M0,0 V4 L2,2 Z").attr("fill", "darkgray");
@ -161,41 +185,62 @@ function showElevationProfile(data, routeLen, isRiver) {
const landdef = chart.select("defs").append("linearGradient").attr("id", "landdef").attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%"); const landdef = chart.select("defs").append("linearGradient").attr("id", "landdef").attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%");
if (chartData.mah == chartData.mih) { if (chartData.mah == chartData.mih) {
landdef.append("stop").attr("offset", "0%").attr("style", "stop-color:" + getColor(chartData.mih, colors) + ";stop-opacity:1"); landdef
landdef.append("stop").attr("offset", "100%").attr("style", "stop-color:" + getColor(chartData.mah, colors) + ";stop-opacity:1"); .append("stop")
.attr("offset", "0%")
.attr("style", "stop-color:" + getColor(chartData.mih, colors) + ";stop-opacity:1");
landdef
.append("stop")
.attr("offset", "100%")
.attr("style", "stop-color:" + getColor(chartData.mah, colors) + ";stop-opacity:1");
} else { } else {
for (let k=chartData.mah; k >= chartData.mih; k--) { for (let k = chartData.mah; k >= chartData.mih; k--) {
let perc = 1 - (k - chartData.mih) / (chartData.mah - chartData.mih); let perc = 1 - (k - chartData.mih) / (chartData.mah - chartData.mih);
landdef.append("stop").attr("offset", perc*100 + "%").attr("style", "stop-color:" + getColor(k, colors) + ";stop-opacity:1"); landdef
.append("stop")
.attr("offset", perc * 100 + "%")
.attr("style", "stop-color:" + getColor(k, colors) + ";stop-opacity:1");
} }
} }
// land // land
let curve = d3.line().curve(d3.curveBasis); // see https://github.com/d3/d3-shape#curves let curve = d3.line().curve(d3.curveBasis); // see https://github.com/d3/d3-shape#curves
let epCurveIndex = parseInt(epCurve.selectedIndex); let epCurveIndex = parseInt(epCurve.selectedIndex);
switch(epCurveIndex) { switch (epCurveIndex) {
case 0 : curve = d3.line().curve(d3.curveLinear); break; case 0:
case 1 : curve = d3.line().curve(d3.curveBasis); break; curve = d3.line().curve(d3.curveLinear);
case 2 : curve = d3.line().curve(d3.curveBundle.beta(1)); break; break;
case 3 : curve = d3.line().curve(d3.curveCatmullRom.alpha(0.5)); break; case 1:
case 4 : curve = d3.line().curve(d3.curveMonotoneX); break; curve = d3.line().curve(d3.curveBasis);
case 5 : curve = d3.line().curve(d3.curveNatural); break; break;
case 2:
curve = d3.line().curve(d3.curveBundle.beta(1));
break;
case 3:
curve = d3.line().curve(d3.curveCatmullRom.alpha(0.5));
break;
case 4:
curve = d3.line().curve(d3.curveMonotoneX);
break;
case 5:
curve = d3.line().curve(d3.curveNatural);
break;
} }
// copy the points so that we can add extra straight pieces, else we get curves at the ends of the chart // copy the points so that we can add extra straight pieces, else we get curves at the ends of the chart
let extra = chartData.points.slice(); let extra = chartData.points.slice();
let path = curve(extra); let path = curve(extra);
// this completes the right-hand side and bottom of our land "polygon" // this completes the right-hand side and bottom of our land "polygon"
path += " L" + parseInt(xscale(extra.length) + +xOffset) + "," + parseInt(extra[extra.length-1][1]); path += " L" + parseInt(xscale(extra.length) + +xOffset) + "," + parseInt(extra[extra.length - 1][1]);
path += " L" + parseInt(xscale(extra.length) + +xOffset) + "," + parseInt(yscale(0) + +yOffset); path += " L" + parseInt(xscale(extra.length) + +xOffset) + "," + parseInt(yscale(0) + +yOffset);
path += " L" + parseInt(xscale(0) + +xOffset) +"," + parseInt(yscale(0) + +yOffset); path += " L" + parseInt(xscale(0) + +xOffset) + "," + parseInt(yscale(0) + +yOffset);
path += "Z"; path += "Z";
chart.append("g").attr("id", "epland").append("path").attr("d", path).attr("stroke", "purple").attr("stroke-width", "0").attr("fill", "url(#landdef)"); chart.append("g").attr("id", "epland").append("path").attr("d", path).attr("stroke", "purple").attr("stroke-width", "0").attr("fill", "url(#landdef)");
// biome / heights // biome / heights
let g = chart.append("g").attr("id", "epbiomes"); let g = chart.append("g").attr("id", "epbiomes");
const hu = heightUnit.value; const hu = heightUnit.value;
for(let k=0; k < chartData.points.length; k++) { for (let k = 0; k < chartData.points.length; k++) {
const x = chartData.points[k][0]; const x = chartData.points[k][0];
const y = yOffset + chartHeight; const y = yOffset + chartHeight;
const c = biomesData.color[chartData.biome[k]]; const c = biomesData.color[chartData.biome[k]];
@ -207,45 +252,53 @@ function showElevationProfile(data, routeLen, isRiver) {
const state = pack.cells.state[cell]; const state = pack.cells.state[cell];
let pop = pack.cells.pop[cell]; let pop = pack.cells.pop[cell];
if (chartData.burg[k]) { if (chartData.burg[k]) {
pop += pack.burgs[chartData.burg[k]].population * urbanization.value; pop += pack.burgs[chartData.burg[k]].population * urbanization;
} }
const populationDesc = rn(pop * populationRate.value); const populationDesc = rn(pop * populationRate);
const provinceDesc = province ? ", " + pack.provinces[province].name : ""; const provinceDesc = province ? ", " + pack.provinces[province].name : "";
const dataTip = biomesData.name[chartData.biome[k]] + const dataTip = biomesData.name[chartData.biome[k]] + provinceDesc + ", " + pack.states[state].name + ", " + pack.religions[religion].name + ", " + pack.cultures[culture].name + " (height: " + chartData.height[k] + " " + hu + ", population " + populationDesc + ", cell " + chartData.cell[k] + ")";
provinceDesc +
", " + pack.states[state].name +
", " + pack.religions[religion].name +
", " + pack.cultures[culture].name +
" (height: " + chartData.height[k] + " " + hu + ", population " + populationDesc + ", cell " + chartData.cell[k] + ")";
g.append("rect").attr("stroke", c).attr("fill", c).attr("x", x).attr("y", y).attr("width", xscale(1)).attr("height", 15).attr("data-tip", dataTip); g.append("rect").attr("stroke", c).attr("fill", c).attr("x", x).attr("y", y).attr("width", xscale(1)).attr("height", 15).attr("data-tip", dataTip);
} }
const xAxis = d3.axisBottom(xscale).ticks(10).tickFormat(function(d){ return (rn(d / chartData.points.length * routeLen) + " " + distanceUnitInput.value);}); const xAxis = d3
const yAxis = d3.axisLeft(yscale).ticks(5).tickFormat(function(d) { return d + " " + hu; }); .axisBottom(xscale)
.ticks(10)
.tickFormat(function (d) {
return rn((d / chartData.points.length) * routeLen) + " " + distanceUnitInput.value;
});
const yAxis = d3
.axisLeft(yscale)
.ticks(5)
.tickFormat(function (d) {
return d + " " + hu;
});
const xGrid = d3.axisBottom(xscale).ticks(10).tickSize(-chartHeight).tickFormat(""); const xGrid = d3.axisBottom(xscale).ticks(10).tickSize(-chartHeight).tickFormat("");
const yGrid = d3.axisLeft(yscale).ticks(5).tickSize(-chartWidth).tickFormat(""); const yGrid = d3.axisLeft(yscale).ticks(5).tickSize(-chartWidth).tickFormat("");
chart.append("g") chart
.append("g")
.attr("id", "epxaxis") .attr("id", "epxaxis")
.attr("transform", "translate(" + xOffset + "," + parseInt(chartHeight + +yOffset + 20) + ")") .attr("transform", "translate(" + xOffset + "," + parseInt(chartHeight + +yOffset + 20) + ")")
.call(xAxis) .call(xAxis)
.selectAll("text") .selectAll("text")
.style("text-anchor", "center") .style("text-anchor", "center")
.attr("transform", function(d) { .attr("transform", function (d) {
return "rotate(0)" // used to rotate labels, - anti-clockwise, + clockwise return "rotate(0)"; // used to rotate labels, - anti-clockwise, + clockwise
}); });
chart.append("g") chart
.append("g")
.attr("id", "epyaxis") .attr("id", "epyaxis")
.attr("transform", "translate(" + parseInt(+xOffset-10) + "," + parseInt(+yOffset) + ")") .attr("transform", "translate(" + parseInt(+xOffset - 10) + "," + parseInt(+yOffset) + ")")
.call(yAxis); .call(yAxis);
// add the X gridlines // add the X gridlines
chart.append("g") chart
.append("g")
.attr("id", "epxgrid") .attr("id", "epxgrid")
.attr("class", "epgrid") .attr("class", "epgrid")
.attr("stroke-dasharray", "4 1") .attr("stroke-dasharray", "4 1")
@ -253,7 +306,8 @@ function showElevationProfile(data, routeLen, isRiver) {
.call(xGrid); .call(xGrid);
// add the Y gridlines // add the Y gridlines
chart.append("g") chart
.append("g")
.attr("id", "epygrid") .attr("id", "epygrid")
.attr("class", "epgrid") .attr("class", "epgrid")
.attr("stroke-dasharray", "4 1") .attr("stroke-dasharray", "4 1")
@ -266,22 +320,33 @@ function showElevationProfile(data, routeLen, isRiver) {
const add = 15; const add = 15;
let xwidth = chartData.points[1][0] - chartData.points[0][0]; let xwidth = chartData.points[1][0] - chartData.points[0][0];
for (let k=0; k<chartData.points.length; k++) { for (let k = 0; k < chartData.points.length; k++) {
if (chartData.burg[k] > 0) { if (chartData.burg[k] > 0) {
let b = chartData.burg[k]; let b = chartData.burg[k];
let x1 = chartData.points[k][0]; // left side of graph by default let x1 = chartData.points[k][0]; // left side of graph by default
if (k > 0) x1 += xwidth/2; // center it if not first if (k > 0) x1 += xwidth / 2; // center it if not first
if (k == chartData.points.length-1) x1 = chartWidth + xOffset; // right part of graph if (k == chartData.points.length - 1) x1 = chartWidth + xOffset; // right part of graph
y1+=add; y1 += add;
if (y1 >= yOffset) y1 = add; if (y1 >= yOffset) y1 = add;
// burg name // burg name
g.append("text").attr("id", "ep" + b).attr("class", "epburglabel").attr("x", x1).attr("y", y1).attr("text-anchor", "middle"); g.append("text")
.attr("id", "ep" + b)
.attr("class", "epburglabel")
.attr("x", x1)
.attr("y", y1)
.attr("text-anchor", "middle");
document.getElementById("ep" + b).innerHTML = pack.burgs[b].name; document.getElementById("ep" + b).innerHTML = pack.burgs[b].name;
// arrow from burg name to graph line // arrow from burg name to graph line
g.append("path").attr("id", "eparrow" + b).attr("d", "M" + x1.toString() + "," + (y1+3).toString() + "L" + x1.toString() + "," + parseInt(chartData.points[k][1]-3).toString()).attr("stroke", "darkgray").attr("fill", "lightgray").attr("stroke-width", "1").attr("marker-end", "url(#arrowhead)"); g.append("path")
.attr("id", "eparrow" + b)
.attr("d", "M" + x1.toString() + "," + (y1 + 3).toString() + "L" + x1.toString() + "," + parseInt(chartData.points[k][1] - 3).toString())
.attr("stroke", "darkgray")
.attr("fill", "lightgray")
.attr("stroke-width", "1")
.attr("marker-end", "url(#arrowhead)");
} }
} }
} }

6
modules/ui/general.js
View file

@ -134,7 +134,7 @@ function showMapTooltip(point, e, i, g) {
if (subgroup === "burgLabels" || subgroup === "burgIcons") { if (subgroup === "burgLabels" || subgroup === "burgIcons") {
const burg = +path[path.length - 10].dataset.id; const burg = +path[path.length - 10].dataset.id;
const b = pack.burgs[burg]; const b = pack.burgs[burg];
const population = si(b.population * populationRate.value * urbanization.value); const population = si(b.population * populationRate * urbanization);
tip(`${b.name}. Population: ${population}. Click to edit`); tip(`${b.name}. Population: ${population}. Click to edit`);
if (burgsOverview.offsetParent) highlightEditorLine(burgsOverview, burg, 5000); if (burgsOverview.offsetParent) highlightEditorLine(burgsOverview, burg, 5000);
return; return;
@ -339,8 +339,8 @@ function getRiverInfo(id) {
} }
function getCellPopulation(i) { function getCellPopulation(i) {
const rural = pack.cells.pop[i] * populationRate.value; const rural = pack.cells.pop[i] * populationRate;
const urban = pack.cells.burg[i] ? pack.burgs[pack.cells.burg[i]].population * populationRate.value * urbanization.value : 0; const urban = pack.cells.burg[i] ? pack.burgs[pack.cells.burg[i]].population * populationRate * urbanization : 0;
return [rural, urban]; return [rural, urban];
} }

754
modules/ui/layers.js
View file

File diff suppressed because it is too large Load diff

133
modules/ui/military-overview.js
View file

@ -15,7 +15,9 @@ function overviewMilitary() {
updateHeaders(); updateHeaders();
$("#militaryOverview").dialog({ $("#militaryOverview").dialog({
title: "Military Overview", resizable: false, width: fitContent(), title: "Military Overview",
resizable: false,
width: fitContent(),
position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"} position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
}); });
@ -28,13 +30,17 @@ function overviewMilitary() {
document.getElementById("militaryExport").addEventListener("click", downloadMilitaryData); document.getElementById("militaryExport").addEventListener("click", downloadMilitaryData);
document.getElementById("militaryWiki").addEventListener("click", () => wiki("Military-Forces")); document.getElementById("militaryWiki").addEventListener("click", () => wiki("Military-Forces"));
body.addEventListener("change", function(ev) { body.addEventListener("change", function (ev) {
const el = ev.target, line = el.parentNode, state = +line.dataset.id; const el = ev.target,
line = el.parentNode,
state = +line.dataset.id;
changeAlert(state, line, +el.value); changeAlert(state, line, +el.value);
}); });
body.addEventListener("click", function(ev) { body.addEventListener("click", function (ev) {
const el = ev.target, line = el.parentNode, state = +line.dataset.id; const el = ev.target,
line = el.parentNode,
state = +line.dataset.id;
if (el.tagName === "SPAN") overviewRegiments(state); if (el.tagName === "SPAN") overviewRegiments(state);
}); });
@ -44,11 +50,13 @@ function overviewMilitary() {
header.querySelectorAll(".removable").forEach(el => el.remove()); header.querySelectorAll(".removable").forEach(el => el.remove());
const insert = html => document.getElementById("militaryTotal").insertAdjacentHTML("beforebegin", html); const insert = html => document.getElementById("militaryTotal").insertAdjacentHTML("beforebegin", html);
for (const u of options.military) { for (const u of options.military) {
const label = capitalize(u.name.replace(/_/g, ' ')); const label = capitalize(u.name.replace(/_/g, " "));
insert(`<div data-tip="State ${u.name} units number. Click to sort" class="sortable removable" data-sortby="${u.name}">${label}&nbsp;</div>`); insert(`<div data-tip="State ${u.name} units number. Click to sort" class="sortable removable" data-sortby="${u.name}">${label}&nbsp;</div>`);
} }
header.querySelectorAll(".removable").forEach(function(e) { header.querySelectorAll(".removable").forEach(function (e) {
e.addEventListener("click", function() {sortLines(this);}); e.addEventListener("click", function () {
sortLines(this);
});
}); });
} }
@ -59,10 +67,10 @@ function overviewMilitary() {
const states = pack.states.filter(s => s.i && !s.removed); const states = pack.states.filter(s => s.i && !s.removed);
for (const s of states) { for (const s of states) {
const population = rn((s.rural + s.urban * urbanization.value) * populationRate.value); const population = rn((s.rural + s.urban * urbanization) * populationRate);
const getForces = u => s.military.reduce((s, r) => s+(r.u[u.name]||0), 0); 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 total = options.military.reduce((s, u) => s + getForces(u) * u.crew, 0);
const rate = total / population * 100; const rate = (total / population) * 100;
const sortData = options.military.map(u => `data-${u.name}="${getForces(u)}"`).join(" "); const sortData = options.military.map(u => `data-${u.name}="${getForces(u)}"`).join(" ");
const lineData = options.military.map(u => `<div data-type="${u.name}" data-tip="State ${u.name} units number">${getForces(u)}</div>`).join(" "); const lineData = options.military.map(u => `<div data-type="${u.name}" data-tip="State ${u.name} units number">${getForces(u)}</div>`).join(" ");
@ -85,7 +93,10 @@ function overviewMilitary() {
body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseenter", ev => stateHighlightOn(ev))); body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseenter", ev => stateHighlightOn(ev)));
body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseleave", ev => stateHighlightOff(ev))); body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseleave", ev => stateHighlightOff(ev)));
if (body.dataset.type === "percentage") {body.dataset.type = "absolute"; togglePercentageMode();} if (body.dataset.type === "percentage") {
body.dataset.type = "absolute";
togglePercentageMode();
}
applySorting(militaryHeader); applySorting(militaryHeader);
} }
@ -95,17 +106,17 @@ function overviewMilitary() {
s.alert = line.dataset.alert = alert; s.alert = line.dataset.alert = alert;
s.military.forEach(r => { s.military.forEach(r => {
Object.keys(r.u).forEach(u => r.u[u] = rn(r.u[u] * dif)); // change units value Object.keys(r.u).forEach(u => (r.u[u] = rn(r.u[u] * dif))); // change units value
r.a = d3.sum(Object.values(r.u)); // change total r.a = d3.sum(Object.values(r.u)); // change total
armies.select(`g>g#regiment${s.i}-${r.i}>text`).text(Military.getTotal(r)); // change icon text armies.select(`g>g#regiment${s.i}-${r.i}>text`).text(Military.getTotal(r)); // change icon text
}); });
const getForces = u => s.military.reduce((s, r) => s+(r.u[u.name]||0), 0); const getForces = u => s.military.reduce((s, r) => s + (r.u[u.name] || 0), 0);
options.military.forEach(u => line.dataset[u.name] = line.querySelector(`div[data-type='${u.name}']`).innerHTML = getForces(u)); options.military.forEach(u => (line.dataset[u.name] = line.querySelector(`div[data-type='${u.name}']`).innerHTML = getForces(u)));
const population = rn((s.rural + s.urban * urbanization.value) * populationRate.value); const population = rn((s.rural + s.urban * urbanization) * populationRate);
const total = line.dataset.total = options.military.reduce((s, u) => s + getForces(u) * u.crew, 0); const total = (line.dataset.total = options.military.reduce((s, u) => s + getForces(u) * u.crew, 0));
const rate = line.dataset.rate = total / population * 100; const rate = (line.dataset.rate = (total / population) * 100);
line.querySelector("div[data-type='total']").innerHTML = si(total); line.querySelector("div[data-type='total']").innerHTML = si(total);
line.querySelector("div[data-type='rate']").innerHTML = rn(rate, 2) + "%"; line.querySelector("div[data-type='rate']").innerHTML = rn(rate, 2) + "%";
@ -114,7 +125,7 @@ function overviewMilitary() {
function updateFooter() { function updateFooter() {
const lines = Array.from(body.querySelectorAll(":scope > div")); const lines = Array.from(body.querySelectorAll(":scope > div"));
const statesNumber = militaryFooterStates.innerHTML = pack.states.filter(s => s.i && !s.removed).length; const statesNumber = (militaryFooterStates.innerHTML = pack.states.filter(s => s.i && !s.removed).length);
const total = d3.sum(lines.map(el => el.dataset.total)); const total = d3.sum(lines.map(el => el.dataset.total));
militaryFooterForcesTotal.innerHTML = si(total); militaryFooterForcesTotal.innerHTML = si(total);
militaryFooterForces.innerHTML = si(total / statesNumber); militaryFooterForces.innerHTML = si(total / statesNumber);
@ -125,46 +136,59 @@ function overviewMilitary() {
function stateHighlightOn(event) { function stateHighlightOn(event) {
const state = +event.target.dataset.id; const state = +event.target.dataset.id;
if (customization || !state) return; if (customization || !state) return;
armies.select("#army"+state).transition().duration(2000).style("fill", "#ff0000"); armies
.select("#army" + state)
.transition()
.duration(2000)
.style("fill", "#ff0000");
if (!layerIsOn("toggleStates")) return; if (!layerIsOn("toggleStates")) return;
const d = regions.select("#state"+state).attr("d"); const d = regions.select("#state" + state).attr("d");
const path = debug.append("path").attr("class", "highlight").attr("d", d) const path = debug.append("path").attr("class", "highlight").attr("d", d).attr("fill", "none").attr("stroke", "red").attr("stroke-width", 1).attr("opacity", 1).attr("filter", "url(#blur1)");
.attr("fill", "none").attr("stroke", "red").attr("stroke-width", 1).attr("opacity", 1)
.attr("filter", "url(#blur1)");
const l = path.node().getTotalLength(), dur = (l + 5000) / 2; const l = path.node().getTotalLength(),
dur = (l + 5000) / 2;
const i = d3.interpolateString("0," + l, l + "," + l); const i = d3.interpolateString("0," + l, l + "," + l);
path.transition().duration(dur).attrTween("stroke-dasharray", function() {return t => i(t)}); path
.transition()
.duration(dur)
.attrTween("stroke-dasharray", function () {
return t => i(t);
});
} }
function stateHighlightOff(event) { function stateHighlightOff(event) {
debug.selectAll(".highlight").each(function() { debug.selectAll(".highlight").each(function () {
d3.select(this).transition().duration(1000).attr("opacity", 0).remove(); d3.select(this).transition().duration(1000).attr("opacity", 0).remove();
}); });
const state = +event.target.dataset.id; const state = +event.target.dataset.id;
armies.select("#army"+state).transition().duration(1000).style("fill", null); armies
.select("#army" + state)
.transition()
.duration(1000)
.style("fill", null);
} }
function togglePercentageMode() { function togglePercentageMode() {
if (body.dataset.type === "absolute") { if (body.dataset.type === "absolute") {
body.dataset.type = "percentage"; body.dataset.type = "percentage";
const lines = body.querySelectorAll(":scope > div"); const lines = body.querySelectorAll(":scope > div");
const array = Array.from(lines), cache = []; const array = Array.from(lines),
cache = [];
const total = function(type) { const total = function (type) {
if (cache[type]) cache[type]; if (cache[type]) cache[type];
cache[type] = d3.sum(array.map(el => +el.dataset[type])); cache[type] = d3.sum(array.map(el => +el.dataset[type]));
return cache[type]; return cache[type];
} };
lines.forEach(function(el) { lines.forEach(function (el) {
el.querySelectorAll("div").forEach(function(div) { el.querySelectorAll("div").forEach(function (div) {
const type = div.dataset.type; const type = div.dataset.type;
if (type === "rate") return; if (type === "rate") return;
div.textContent = total(type) ? rn(+el.dataset[type] / total(type) * 100) + "%" : "0%"; div.textContent = total(type) ? rn((+el.dataset[type] / total(type)) * 100) + "%" : "0%";
}); });
}); });
} else { } else {
@ -180,14 +204,19 @@ function overviewMilitary() {
options.military.map(u => addUnitLine(u)); options.military.map(u => addUnitLine(u));
$("#militaryOptions").dialog({ $("#militaryOptions").dialog({
title: "Edit Military Units", resizable: false, width: fitContent(), title: "Edit Military Units",
resizable: false,
width: fitContent(),
position: {my: "center", at: "center", of: "svg"}, position: {my: "center", at: "center", of: "svg"},
buttons: { buttons: {
Apply: applyMilitaryOptions, Apply: applyMilitaryOptions,
Add: () => addUnitLine({icon: "🛡️", name: "custom"+militaryOptionsTable.rows.length, rural: .2, urban: .5, crew: 1, power: 1, type: "melee"}), Add: () => addUnitLine({icon: "🛡️", name: "custom" + militaryOptionsTable.rows.length, rural: 0.2, urban: 0.5, crew: 1, power: 1, type: "melee"}),
Restore: restoreDefaultUnits, Restore: restoreDefaultUnits,
Cancel: function() {$(this).dialog("close");} Cancel: function () {
}, open: function() { $(this).dialog("close");
}
},
open: function () {
const buttons = $(this).dialog("widget").find(".ui-dialog-buttonset > button"); const buttons = $(this).dialog("widget").find(".ui-dialog-buttonset > button");
buttons[0].addEventListener("mousemove", () => tip("Apply military units settings. <span style='color:#cb5858'>All forces will be recalculated!</span>")); buttons[0].addEventListener("mousemove", () => tip("Apply military units settings. <span style='color:#cb5858'>All forces will be recalculated!</span>"));
buttons[1].addEventListener("mousemove", () => tip("Add new military unit to the table")); buttons[1].addEventListener("mousemove", () => tip("Add new military unit to the table"));
@ -202,7 +231,7 @@ function overviewMilitary() {
function addUnitLine(u) { function addUnitLine(u) {
const row = document.createElement("tr"); const row = document.createElement("tr");
row.innerHTML = `<td><button type="button" data-tip="Click to select unit icon">${u.icon||" "}</button></td> row.innerHTML = `<td><button type="button" data-tip="Click to select unit icon">${u.icon || " "}</button></td>
<td><input data-tip="Type unit name. If name is changed for existing unit, old unit will be replaced" value="${u.name}"></td> <td><input data-tip="Type unit name. If name is changed for existing unit, old unit will be replaced" value="${u.name}"></td>
<td><input data-tip="Enter conscription percentage for rural population" type="number" min=0 max=100 step=.01 value="${u.rural}"></td> <td><input data-tip="Enter conscription percentage for rural population" type="number" min=0 max=100 step=.01 value="${u.rural}"></td>
<td><input data-tip="Enter conscription percentage for urban population" type="number" min=0 max=100 step=.01 value="${u.urban}"></td> <td><input data-tip="Enter conscription percentage for urban population" type="number" min=0 max=100 step=.01 value="${u.urban}"></td>
@ -213,7 +242,9 @@ function overviewMilitary() {
<input id="${u.name}Separate" type="checkbox" class="checkbox" ${u.separate ? "checked" : ""}> <input id="${u.name}Separate" type="checkbox" class="checkbox" ${u.separate ? "checked" : ""}>
<label for="${u.name}Separate" class="checkbox-label"></label></td> <label for="${u.name}Separate" class="checkbox-label"></label></td>
<td data-tip="Remove the unit"><span data-tip="Remove unit type" class="icon-trash-empty pointer" onclick="this.parentElement.parentElement.remove();"></span></td>`; <td data-tip="Remove the unit"><span data-tip="Remove unit type" class="icon-trash-empty pointer" onclick="this.parentElement.parentElement.remove();"></span></td>`;
row.querySelector("button").addEventListener("click", function(e) {selectIcon(this.innerHTML, v => this.innerHTML = v)}); row.querySelector("button").addEventListener("click", function (e) {
selectIcon(this.innerHTML, v => (this.innerHTML = v));
});
table.appendChild(row); table.appendChild(row);
} }
@ -224,7 +255,7 @@ function overviewMilitary() {
function applyMilitaryOptions() { function applyMilitaryOptions() {
const unitLines = Array.from(table.querySelectorAll("tr")); const unitLines = Array.from(table.querySelectorAll("tr"));
const names = unitLines.map(r => r.querySelector("input").value.replace(/[&\/\\#, +()$~%.'":*?<>{}]/g, '_')); const names = unitLines.map(r => r.querySelector("input").value.replace(/[&\/\\#, +()$~%.'":*?<>{}]/g, "_"));
if (new Set(names).size !== names.length) { if (new Set(names).size !== names.length) {
tip("All units should have unique names", false, "error"); tip("All units should have unique names", false, "error");
return; return;
@ -239,46 +270,48 @@ function overviewMilitary() {
if (d.type === "button") value = d.innerHTML || "⠀"; if (d.type === "button") value = d.innerHTML || "⠀";
return value; return value;
}); });
return {icon, name:names[i], rural, urban, crew, power, type, separate}; return {icon, name: names[i], rural, urban, crew, power, type, separate};
}); });
localStorage.setItem("military", JSON.stringify(options.military)); localStorage.setItem("military", JSON.stringify(options.military));
Military.generate(); Military.generate();
updateHeaders(); updateHeaders();
addLines(); addLines();
} }
} }
function militaryRecalculate() { function militaryRecalculate() {
alertMessage.innerHTML = "Are you sure you want to recalculate military forces for all states?<br>Regiments for all states will be regenerated"; alertMessage.innerHTML = "Are you sure you want to recalculate military forces for all states?<br>Regiments for all states will be regenerated";
$("#alert").dialog({resizable: false, title: "Remove regiment", $("#alert").dialog({
resizable: false,
title: "Remove regiment",
buttons: { buttons: {
Recalculate: function() { Recalculate: function () {
$(this).dialog("close"); $(this).dialog("close");
Military.generate(); Military.generate();
addLines(); addLines();
}, },
Cancel: function() {$(this).dialog("close");} Cancel: function () {
$(this).dialog("close");
}
} }
}); });
} }
function downloadMilitaryData() { function downloadMilitaryData() {
const units = options.military.map(u => u.name); const units = options.military.map(u => u.name);
let data = "Id,State,"+units.map(u => capitalize(u)).join(",")+",Total,Population,Rate,War Alert\n"; // headers let data = "Id,State," + units.map(u => capitalize(u)).join(",") + ",Total,Population,Rate,War Alert\n"; // headers
body.querySelectorAll(":scope > div").forEach(function(el) { body.querySelectorAll(":scope > div").forEach(function (el) {
data += el.dataset.id + ","; data += el.dataset.id + ",";
data += el.dataset.state + ","; data += el.dataset.state + ",";
data += units.map(u => el.dataset[u]).join(",") + ","; data += units.map(u => el.dataset[u]).join(",") + ",";
data += el.dataset.total + ","; data += el.dataset.total + ",";
data += el.dataset.population + ","; data += el.dataset.population + ",";
data += rn(el.dataset.rate,2) + "%,"; data += rn(el.dataset.rate, 2) + "%,";
data += el.dataset.alert + "\n"; data += el.dataset.alert + "\n";
}); });
const name = getFileName("Military") + ".csv"; const name = getFileName("Military") + ".csv";
downloadFile(data, name); downloadFile(data, name);
} }
} }

487
modules/ui/provinces-editor.js
View file

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

350
modules/ui/religions-editor.js
View file

@ -17,7 +17,10 @@ function editReligions() {
modules.editReligions = true; modules.editReligions = true;
$("#religionsEditor").dialog({ $("#religionsEditor").dialog({
title: "Religions Editor", resizable: false, width: fitContent(), close: closeReligionsEditor, title: "Religions Editor",
resizable: false,
width: fitContent(),
close: closeReligionsEditor,
position: {my: "right top", at: "right-10 top+10", of: "svg"} position: {my: "right top", at: "right-10 top+10", of: "svg"}
}); });
@ -40,8 +43,9 @@ function editReligions() {
} }
function religionsCollectStatistics() { function religionsCollectStatistics() {
const cells = pack.cells, religions = pack.religions; const cells = pack.cells,
religions.forEach(r => r.cells = r.area = r.rural = r.urban = 0); religions = pack.religions;
religions.forEach(r => (r.cells = r.area = r.rural = r.urban = 0));
for (const i of cells.i) { for (const i of cells.i) {
if (cells.h[i] < 20) continue; if (cells.h[i] < 20) continue;
@ -56,14 +60,16 @@ function editReligions() {
// add line for each religion // add line for each religion
function religionsEditorAddLines() { function religionsEditorAddLines() {
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value; const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
let lines = "", totalArea = 0, totalPopulation = 0; let lines = "",
totalArea = 0,
totalPopulation = 0;
for (const r of pack.religions) { for (const r of pack.religions) {
if (r.removed) continue; if (r.removed) continue;
const area = r.area * (distanceScaleInput.value ** 2); const area = r.area * distanceScaleInput.value ** 2;
const rural = r.rural * populationRate.value; const rural = r.rural * populationRate;
const urban = r.urban * populationRate.value * urbanization.value; const urban = r.urban * populationRate * urbanization;
const population = rn(rural + urban); const population = rn(rural + urban);
if (r.i && !r.cells && body.dataset.extinct !== "show") continue; // hide extinct religions if (r.i && !r.cells && body.dataset.extinct !== "show") continue; // hide extinct religions
const populationTip = `Believers: ${si(population)}; Rural areas: ${si(rural)}; Urban areas: ${si(urban)}. Click to change`; const populationTip = `Believers: ${si(population)}; Rural areas: ${si(rural)}; Urban areas: ${si(urban)}. Click to change`;
@ -72,13 +78,13 @@ function editReligions() {
if (r.i) { if (r.i) {
lines += `<div class="states religions" data-id=${r.i} data-name="${r.name}" data-color="${r.color}" data-area=${area} lines += `<div class="states religions" data-id=${r.i} data-name="${r.name}" data-color="${r.color}" data-area=${area}
data-population=${population} data-type=${r.type} data-form=${r.form} data-deity="${r.deity?r.deity:''}" data-expansionism=${r.expansionism}> data-population=${population} data-type=${r.type} data-form=${r.form} data-deity="${r.deity ? r.deity : ""}" data-expansionism=${r.expansionism}>
<svg data-tip="Religion fill style. Click to change" width=".9em" height=".9em" style="margin-bottom:-1px"><rect x="0" y="0" width="100%" height="100%" fill="${r.color}" class="fillRect pointer"></svg> <svg data-tip="Religion fill style. Click to change" width=".9em" height=".9em" style="margin-bottom:-1px"><rect x="0" y="0" width="100%" height="100%" fill="${r.color}" class="fillRect pointer"></svg>
<input data-tip="Religion name. Click and type to change" class="religionName" value="${r.name}" autocorrect="off" spellcheck="false"> <input data-tip="Religion name. Click and type to change" class="religionName" value="${r.name}" autocorrect="off" spellcheck="false">
<select data-tip="Religion type" class="religionType">${getTypeOptions(r.type)}</select> <select data-tip="Religion type" class="religionType">${getTypeOptions(r.type)}</select>
<input data-tip="Religion form" class="religionForm hide" value="${r.form}" autocorrect="off" spellcheck="false"> <input data-tip="Religion form" class="religionForm hide" value="${r.form}" autocorrect="off" spellcheck="false">
<span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw hide"></span> <span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw hide"></span>
<input data-tip="Religion supreme deity" class="religionDeity hide" value="${r.deity?r.deity:''}" autocorrect="off" spellcheck="false"> <input data-tip="Religion supreme deity" class="religionDeity hide" value="${r.deity ? r.deity : ""}" autocorrect="off" spellcheck="false">
<span data-tip="Religion area" style="padding-right: 4px" class="icon-map-o hide"></span> <span data-tip="Religion area" style="padding-right: 4px" class="icon-map-o hide"></span>
<div data-tip="Religion area" class="biomeArea hide">${si(area) + unit}</div> <div data-tip="Religion area" class="biomeArea hide">${si(area) + unit}</div>
<span data-tip="${populationTip}" class="icon-male hide"></span> <span data-tip="${populationTip}" class="icon-male hide"></span>
@ -127,7 +133,10 @@ function editReligions() {
body.querySelectorAll("div > div.culturePopulation").forEach(el => el.addEventListener("click", changePopulation)); body.querySelectorAll("div > div.culturePopulation").forEach(el => el.addEventListener("click", changePopulation));
body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.addEventListener("click", religionRemove)); body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.addEventListener("click", religionRemove));
if (body.dataset.type === "percentage") {body.dataset.type = "absolute"; togglePercentageMode();} if (body.dataset.type === "percentage") {
body.dataset.type = "absolute";
togglePercentageMode();
}
applySorting(religionsHeader); applySorting(religionsHeader);
$("#religionsEditor").dialog({width: fitContent()}); $("#religionsEditor").dialog({width: fitContent()});
} }
@ -135,7 +144,7 @@ function editReligions() {
function getTypeOptions(type) { function getTypeOptions(type) {
let options = ""; let options = "";
const types = ["Folk", "Organized", "Cult", "Heresy"]; const types = ["Folk", "Organized", "Cult", "Heresy"];
types.forEach(t => options += `<option ${type === t ? "selected" : ""} value="${t}">${t}</option>`); types.forEach(t => (options += `<option ${type === t ? "selected" : ""} value="${t}">${t}</option>`));
return options; return options;
} }
@ -143,14 +152,14 @@ function editReligions() {
const religion = +event.target.dataset.id; const religion = +event.target.dataset.id;
const info = document.getElementById("religionInfo"); const info = document.getElementById("religionInfo");
if (info) { if (info) {
d3.select("#hierarchy").select("g[data-id='"+religion+"'] > path").classed("selected", 1); d3.select("#hierarchy")
.select("g[data-id='" + religion + "'] > path")
.classed("selected", 1);
const r = pack.religions[religion]; const r = pack.religions[religion];
const type = r.name.includes(r.type) ? "" const type = r.name.includes(r.type) ? "" : r.type === "Folk" || r.type === "Organized" ? ". " + r.type + " religion" : ". " + r.type;
: r.type === "Folk" || r.type === "Organized"
? ". " + r.type + " religion" : ". " + r.type;
const form = r.form === r.type || r.name.includes(r.form) ? "" : ". " + r.form; const form = r.form === r.type || r.name.includes(r.form) ? "" : ". " + r.form;
const rural = r.rural * populationRate.value; const rural = r.rural * populationRate;
const urban = r.urban * populationRate.value * urbanization.value; const urban = r.urban * populationRate * urbanization;
const population = rural + urban > 0 ? ". " + si(rn(rural + urban)) + " believers" : ". Extinct"; const population = rural + urban > 0 ? ". " + si(rn(rural + urban)) + " believers" : ". Extinct";
info.innerHTML = `${r.name}${type}${form}${population}`; info.innerHTML = `${r.name}${type}${form}${population}`;
tip("Drag to change parent, drag to itself to move to the top level. Hold CTRL and click to change abbreviation"); tip("Drag to change parent, drag to itself to move to the top level. Hold CTRL and click to change abbreviation");
@ -161,24 +170,46 @@ function editReligions() {
if (!layerIsOn("toggleReligions")) return; if (!layerIsOn("toggleReligions")) return;
if (customization) return; if (customization) return;
relig.select("#religion"+religion).raise().transition(animate).attr("stroke-width", 2.5).attr("stroke", "#c13119"); relig
debug.select("#religionsCenter"+religion).raise().transition(animate).attr("r", 8).attr("stroke-width", 2).attr("stroke", "#c13119"); .select("#religion" + religion)
.raise()
.transition(animate)
.attr("stroke-width", 2.5)
.attr("stroke", "#c13119");
debug
.select("#religionsCenter" + religion)
.raise()
.transition(animate)
.attr("r", 8)
.attr("stroke-width", 2)
.attr("stroke", "#c13119");
} }
function religionHighlightOff(event) { function religionHighlightOff(event) {
const religion = +event.target.dataset.id; const religion = +event.target.dataset.id;
const info = document.getElementById("religionInfo"); const info = document.getElementById("religionInfo");
if (info) { if (info) {
d3.select("#hierarchy").select("g[data-id='"+religion+"'] > path").classed("selected", 0); d3.select("#hierarchy")
.select("g[data-id='" + religion + "'] > path")
.classed("selected", 0);
info.innerHTML = "&#8205;"; info.innerHTML = "&#8205;";
tip(""); tip("");
} }
const el = body.querySelector(`div[data-id='${religion}']`) const el = body.querySelector(`div[data-id='${religion}']`);
if (el) el.classList.remove("active"); if (el) el.classList.remove("active");
relig.select("#religion"+religion).transition().attr("stroke-width", null).attr("stroke", null); relig
debug.select("#religionsCenter"+religion).transition().attr("r", 4).attr("stroke-width", 1.2).attr("stroke", null); .select("#religion" + religion)
.transition()
.attr("stroke-width", null)
.attr("stroke", null);
debug
.select("#religionsCenter" + religion)
.transition()
.attr("r", 4)
.attr("stroke-width", 1.2)
.attr("stroke", null);
} }
function religionChangeColor() { function religionChangeColor() {
@ -186,12 +217,12 @@ function editReligions() {
const currentFill = el.getAttribute("fill"); const currentFill = el.getAttribute("fill");
const religion = +el.parentNode.parentNode.dataset.id; const religion = +el.parentNode.parentNode.dataset.id;
const callback = function(fill) { const callback = function (fill) {
el.setAttribute("fill", fill); el.setAttribute("fill", fill);
pack.religions[religion].color = fill; pack.religions[religion].color = fill;
relig.select("#religion"+religion).attr("fill", fill); relig.select("#religion" + religion).attr("fill", fill);
debug.select("#religionsCenter"+religion).attr("fill", fill); debug.select("#religionsCenter" + religion).attr("fill", fill);
} };
openPicker(currentFill, callback); openPicker(currentFill, callback);
} }
@ -200,7 +231,10 @@ function editReligions() {
const religion = +this.parentNode.dataset.id; const religion = +this.parentNode.dataset.id;
this.parentNode.dataset.name = this.value; this.parentNode.dataset.name = this.value;
pack.religions[religion].name = this.value; pack.religions[religion].name = this.value;
pack.religions[religion].code = abbreviate(this.value, pack.religions.map(c => c.code)); pack.religions[religion].code = abbreviate(
this.value,
pack.religions.map(c => c.code)
);
} }
function religionChangeType() { function religionChangeType() {
@ -233,9 +267,12 @@ function editReligions() {
function changePopulation() { function changePopulation() {
const religion = +this.parentNode.dataset.id; const religion = +this.parentNode.dataset.id;
const r = pack.religions[religion]; const r = pack.religions[religion];
if (!r.cells) {tip("Religion does not have any cells, cannot change population", false, "error"); return;} if (!r.cells) {
const rural = rn(r.rural * populationRate.value); tip("Religion does not have any cells, cannot change population", false, "error");
const urban = rn(r.urban * populationRate.value * urbanization.value); return;
}
const rural = rn(r.rural * populationRate);
const urban = rn(r.urban * populationRate * urbanization);
const total = rural + urban; const total = rural + urban;
const l = n => Number(n).toLocaleString(); const l = n => Number(n).toLocaleString();
const burgs = pack.burgs.filter(b => !b.removed && pack.cells.religion[b.cell] === religion); const burgs = pack.burgs.filter(b => !b.removed && pack.cells.religion[b.cell] === religion);
@ -243,52 +280,60 @@ function editReligions() {
alertMessage.innerHTML = `<p><i>Please note all population of religion territory is considered alertMessage.innerHTML = `<p><i>Please note all population of religion territory is considered
believers of this religion. It means believers number change will directly change population</i></p> believers of this religion. It means believers number change will directly change population</i></p>
Rural: <input type="number" min=0 step=1 id="ruralPop" value=${rural} style="width:6em"> Rural: <input type="number" min=0 step=1 id="ruralPop" value=${rural} style="width:6em">
Urban: <input type="number" min=0 step=1 id="urbanPop" value=${urban} style="width:6em" ${burgs.length?'':"disabled"}> Urban: <input type="number" min=0 step=1 id="urbanPop" value=${urban} style="width:6em" ${burgs.length ? "" : "disabled"}>
<p>Total believers: ${l(total)} ⇒ <span id="totalPop">${l(total)}</span> (<span id="totalPopPerc">100</span>%)</p>`; <p>Total believers: ${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; const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
if (isNaN(totalNew)) return; if (isNaN(totalNew)) return;
totalPop.innerHTML = l(totalNew); totalPop.innerHTML = l(totalNew);
totalPopPerc.innerHTML = rn(totalNew / total * 100); totalPopPerc.innerHTML = rn((totalNew / total) * 100);
} };
ruralPop.oninput = () => update(); ruralPop.oninput = () => update();
urbanPop.oninput = () => update(); urbanPop.oninput = () => update();
$("#alert").dialog({ $("#alert").dialog({
resizable: false, title: "Change believers number", width: "24em", buttons: { resizable: false,
Apply: function() {applyPopulationChange(); $(this).dialog("close");}, title: "Change believers number",
Cancel: function() {$(this).dialog("close");} width: "24em",
}, position: {my: "center", at: "center", of: "svg"} buttons: {
Apply: function () {
applyPopulationChange();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
position: {my: "center", at: "center", of: "svg"}
}); });
function applyPopulationChange() { function applyPopulationChange() {
const ruralChange = ruralPop.value / rural; const ruralChange = ruralPop.value / rural;
if (isFinite(ruralChange) && ruralChange !== 1) { if (isFinite(ruralChange) && ruralChange !== 1) {
const cells = pack.cells.i.filter(i => pack.cells.religion[i] === religion); const cells = pack.cells.i.filter(i => pack.cells.religion[i] === religion);
cells.forEach(i => pack.cells.pop[i] *= ruralChange); cells.forEach(i => (pack.cells.pop[i] *= ruralChange));
} }
if (!isFinite(ruralChange) && +ruralPop.value > 0) { if (!isFinite(ruralChange) && +ruralPop.value > 0) {
const points = ruralPop.value / populationRate.value; const points = ruralPop.value / populationRate;
const cells = pack.cells.i.filter(i => pack.cells.religion[i] === religion); const cells = pack.cells.i.filter(i => pack.cells.religion[i] === religion);
const pop = rn(points / cells.length); 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; const urbanChange = urbanPop.value / urban;
if (isFinite(urbanChange) && urbanChange !== 1) { if (isFinite(urbanChange) && urbanChange !== 1) {
burgs.forEach(b => b.population = rn(b.population * urbanChange, 4)); burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
} }
if (!isFinite(urbanChange) && +urbanPop.value > 0) { 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); const population = rn(points / burgs.length, 4);
burgs.forEach(b => b.population = population); burgs.forEach(b => (b.population = population));
} }
refreshReligionsEditor(); refreshReligionsEditor();
} }
} }
function religionRemove() { function religionRemove() {
@ -296,43 +341,59 @@ function editReligions() {
const religion = +this.parentNode.dataset.id; const religion = +this.parentNode.dataset.id;
alertMessage.innerHTML = "Are you sure you want to remove the religion? <br>This action cannot be reverted"; alertMessage.innerHTML = "Are you sure you want to remove the religion? <br>This action cannot be reverted";
$("#alert").dialog({resizable: false, title: "Remove religion", $("#alert").dialog({
resizable: false,
title: "Remove religion",
buttons: { buttons: {
Remove: function() { Remove: function () {
relig.select("#religion"+religion).remove(); relig.select("#religion" + religion).remove();
relig.select("#religion-gap"+religion).remove(); relig.select("#religion-gap" + religion).remove();
debug.select("#religionsCenter"+religion).remove(); debug.select("#religionsCenter" + religion).remove();
pack.cells.religion.forEach((r, i) => {if(r === religion) pack.cells.religion[i] = 0;}); pack.cells.religion.forEach((r, i) => {
if (r === religion) pack.cells.religion[i] = 0;
});
pack.religions[religion].removed = true; pack.religions[religion].removed = true;
const origin = pack.religions[religion].origin; const origin = pack.religions[religion].origin;
pack.religions.forEach(r => {if(r.origin === religion) r.origin = origin;}); pack.religions.forEach(r => {
if (r.origin === religion) r.origin = origin;
});
refreshReligionsEditor(); refreshReligionsEditor();
$(this).dialog("close"); $(this).dialog("close");
}, },
Cancel: function() {$(this).dialog("close");} Cancel: function () {
$(this).dialog("close");
}
} }
}); });
} }
function drawReligionCenters() { function drawReligionCenters() {
debug.select("#religionCenters").remove(); debug.select("#religionCenters").remove();
const religionCenters = debug.append("g").attr("id", "religionCenters") const religionCenters = debug.append("g").attr("id", "religionCenters").attr("stroke-width", 1.2).attr("stroke", "#444444").style("cursor", "move");
.attr("stroke-width", 1.2).attr("stroke", "#444444").style("cursor", "move");
const data = pack.religions.filter(r => r.i && r.center && r.cells && !r.removed); const data = pack.religions.filter(r => r.i && r.center && r.cells && !r.removed);
religionCenters.selectAll("circle").data(data).enter().append("circle") religionCenters
.attr("id", d => "religionsCenter"+d.i).attr("data-id", d => d.i) .selectAll("circle")
.attr("r", 4).attr("fill", d => d.color) .data(data)
.attr("cx", d => pack.cells.p[d.center][0]).attr("cy", d => pack.cells.p[d.center][1]) .enter()
.append("circle")
.attr("id", d => "religionsCenter" + d.i)
.attr("data-id", d => d.i)
.attr("r", 4)
.attr("fill", d => d.color)
.attr("cx", d => pack.cells.p[d.center][0])
.attr("cy", d => pack.cells.p[d.center][1])
.on("mouseenter", d => { .on("mouseenter", d => {
tip(d.name+ ". Drag to move the religion center", true); tip(d.name + ". Drag to move the religion center", true);
religionHighlightOn(event); religionHighlightOn(event);
}).on("mouseleave", d => { })
tip('', true); .on("mouseleave", d => {
tip("", true);
religionHighlightOff(event); religionHighlightOff(event);
}).call(d3.drag().on("start", religionCenterDrag)); })
.call(d3.drag().on("start", religionCenterDrag));
} }
function religionCenterDrag() { function religionCenterDrag() {
@ -347,8 +408,14 @@ function editReligions() {
} }
function toggleLegend() { function toggleLegend() {
if (legend.selectAll("*").size()) {clearLegend(); return;}; // hide legend if (legend.selectAll("*").size()) {
const data = pack.religions.filter(r => r.i && !r.removed && r.area).sort((a, b) => b.area - a.area).map(r => [r.i, r.color, r.name]); clearLegend();
return;
} // hide legend
const data = pack.religions
.filter(r => r.i && !r.removed && r.area)
.sort((a, b) => b.area - a.area)
.map(r => [r.i, r.color, r.name]);
drawLegend("Religions", data); drawLegend("Religions", data);
} }
@ -358,9 +425,9 @@ function editReligions() {
const totalArea = +religionsFooterArea.dataset.area; const totalArea = +religionsFooterArea.dataset.area;
const totalPopulation = +religionsFooterPopulation.dataset.population; const totalPopulation = +religionsFooterPopulation.dataset.population;
body.querySelectorAll(":scope > div").forEach(function(el) { body.querySelectorAll(":scope > div").forEach(function (el) {
el.querySelector(".biomeArea").innerHTML = rn(+el.dataset.area / totalArea * 100) + "%"; el.querySelector(".biomeArea").innerHTML = rn((+el.dataset.area / totalArea) * 100) + "%";
el.querySelector(".culturePopulation").innerHTML = rn(+el.dataset.population / totalPopulation * 100) + "%"; el.querySelector(".culturePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%";
}); });
} else { } else {
body.dataset.type = "absolute"; body.dataset.type = "absolute";
@ -372,11 +439,18 @@ function editReligions() {
// build hierarchy tree // build hierarchy tree
pack.religions[0].origin = null; pack.religions[0].origin = null;
const religions = pack.religions.filter(r => !r.removed); const religions = pack.religions.filter(r => !r.removed);
if (religions.length < 3) {tip("Not enough religions to show hierarchy", false, "error"); return;} if (religions.length < 3) {
const root = d3.stratify().id(d => d.i).parentId(d => d.origin)(religions); tip("Not enough religions to show hierarchy", false, "error");
return;
}
const root = d3
.stratify()
.id(d => d.i)
.parentId(d => d.origin)(religions);
const treeWidth = root.leaves().length; const treeWidth = root.leaves().length;
const treeHeight = root.height; const treeHeight = root.height;
const width = treeWidth * 40, height = treeHeight * 60; const width = treeWidth * 40,
height = treeHeight * 60;
const margin = {top: 10, right: 10, bottom: -5, left: 10}; const margin = {top: 10, right: 10, bottom: -5, left: 10};
const w = width - margin.left - margin.right; const w = width - margin.left - margin.right;
@ -385,8 +459,7 @@ function editReligions() {
// prepare svg // prepare svg
alertMessage.innerHTML = "<div id='religionInfo' class='chartInfo'>&#8205;</div>"; alertMessage.innerHTML = "<div id='religionInfo' class='chartInfo'>&#8205;</div>";
const svg = d3.select("#alertMessage").insert("svg", "#religionInfo").attr("id", "hierarchy") const svg = d3.select("#alertMessage").insert("svg", "#religionInfo").attr("id", "hierarchy").attr("width", width).attr("height", height).style("text-anchor", "middle");
.attr("width", width).attr("height", height).style("text-anchor", "middle");
const graph = svg.append("g").attr("transform", `translate(10, -45)`); const graph = svg.append("g").attr("transform", `translate(10, -45)`);
const links = graph.append("g").attr("fill", "none").attr("stroke", "#aaaaaa"); const links = graph.append("g").attr("fill", "none").attr("stroke", "#aaaaaa");
const nodes = graph.append("g"); const nodes = graph.append("g");
@ -394,45 +467,70 @@ function editReligions() {
renderTree(); renderTree();
function renderTree() { function renderTree() {
treeLayout(root); treeLayout(root);
links.selectAll('path').data(root.links()).enter() links
.append('path').attr("d", d => {return "M" + d.source.x + "," + d.source.y .selectAll("path")
+ "C" + d.source.x + "," + (d.source.y * 3 + d.target.y) / 4 .data(root.links())
+ " " + d.target.x + "," + (d.source.y * 2 + d.target.y) / 3 .enter()
+ " " + d.target.x + "," + d.target.y;}); .append("path")
.attr("d", d => {
return "M" + d.source.x + "," + d.source.y + "C" + d.source.x + "," + (d.source.y * 3 + d.target.y) / 4 + " " + d.target.x + "," + (d.source.y * 2 + d.target.y) / 3 + " " + d.target.x + "," + d.target.y;
});
const node = nodes.selectAll('g').data(root.descendants()).enter() const node = nodes
.append('g').attr("data-id", d => d.data.i).attr("stroke", "#333333") .selectAll("g")
.data(root.descendants())
.enter()
.append("g")
.attr("data-id", d => d.data.i)
.attr("stroke", "#333333")
.attr("transform", d => `translate(${d.x}, ${d.y})`) .attr("transform", d => `translate(${d.x}, ${d.y})`)
.on("mouseenter", () => religionHighlightOn(event)) .on("mouseenter", () => religionHighlightOn(event))
.on("mouseleave", () => religionHighlightOff(event)) .on("mouseleave", () => religionHighlightOff(event))
.call(d3.drag().on("start", d => dragToReorigin(d))); .call(d3.drag().on("start", d => dragToReorigin(d)));
node.append("path").attr("d", d => { node
if (d.data.type === "Folk") return "M11.3,0A11.3,11.3,0,1,1,-11.3,0A11.3,11.3,0,1,1,11.3,0"; else // circle .append("path")
if (d.data.type === "Heresy") return "M0,-14L14,0L0,14L-14,0Z"; else // diamond .attr("d", d => {
if (d.data.type === "Cult") return "M-6.5,-11.26l13,0l6.5,11.26l-6.5,11.26l-13,0l-6.5,-11.26Z"; else // hex if (d.data.type === "Folk") return "M11.3,0A11.3,11.3,0,1,1,-11.3,0A11.3,11.3,0,1,1,11.3,0";
if (!d.data.i) return "M5,0A5,5,0,1,1,-5,0A5,5,0,1,1,5,0"; else // small circle // circle
return "M-11,-11h22v22h-22Z"; // square else if (d.data.type === "Heresy") return "M0,-14L14,0L0,14L-14,0Z";
}).attr("fill", d => d.data.i ? d.data.color : "#ffffff") // diamond
.attr("stroke-dasharray", d => d.data.cells ? "null" : "1"); else if (d.data.type === "Cult") return "M-6.5,-11.26l13,0l6.5,11.26l-6.5,11.26l-13,0l-6.5,-11.26Z";
// hex
else if (!d.data.i) return "M5,0A5,5,0,1,1,-5,0A5,5,0,1,1,5,0";
// small circle
else return "M-11,-11h22v22h-22Z"; // square
})
.attr("fill", d => (d.data.i ? d.data.color : "#ffffff"))
.attr("stroke-dasharray", d => (d.data.cells ? "null" : "1"));
node.append("text").attr("dy", ".35em").text(d => d.data.i ? d.data.code : ''); node
.append("text")
.attr("dy", ".35em")
.text(d => (d.data.i ? d.data.code : ""));
} }
$("#alert").dialog({ $("#alert").dialog({
title: "Religions tree", width: fitContent(), resizable: false, title: "Religions tree",
position: {my: "left center", at: "left+10 center", of: "svg"}, buttons: {}, width: fitContent(),
close: () => {alertMessage.innerHTML = "";} resizable: false,
position: {my: "left center", at: "left+10 center", of: "svg"},
buttons: {},
close: () => {
alertMessage.innerHTML = "";
}
}); });
function dragToReorigin(d) { function dragToReorigin(d) {
if (isCtrlClick(d3.event.sourceEvent)) {changeCode(d); return;} if (isCtrlClick(d3.event.sourceEvent)) {
changeCode(d);
return;
}
const originLine = graph.append("path") const originLine = graph.append("path").attr("class", "dragLine").attr("d", `M${d.x},${d.y}L${d.x},${d.y}`);
.attr("class", "dragLine").attr("d", `M${d.x},${d.y}L${d.x},${d.y}`);
d3.event.on("drag", () => { d3.event.on("drag", () => {
originLine.attr("d", `M${d.x},${d.y}L${d3.event.x},${d3.event.y}`) originLine.attr("d", `M${d.x},${d.y}L${d3.event.x},${d3.event.y}`);
}); });
d3.event.on("end", () => { d3.event.on("end", () => {
@ -446,14 +544,17 @@ function editReligions() {
if (newOrigin == religion) newOrigin = 0; // move to top if (newOrigin == religion) newOrigin = 0; // move to top
if (newOrigin && d.descendants().some(node => node.id == newOrigin)) return; // cannot be a child of its own child if (newOrigin && d.descendants().some(node => node.id == newOrigin)) return; // cannot be a child of its own child
pack.religions[religion].origin = d.data.origin = newOrigin; // change data pack.religions[religion].origin = d.data.origin = newOrigin; // change data
showHierarchy() // update hierarchy showHierarchy(); // update hierarchy
}); });
} }
function changeCode(d) { function changeCode(d) {
prompt(`Please provide an abbreviation for ${d.data.name}`, {default:d.data.code}, v => { prompt(`Please provide an abbreviation for ${d.data.name}`, {default: d.data.code}, v => {
pack.religions[d.data.i].code = v; pack.religions[d.data.i].code = v;
nodes.select("g[data-id='"+d.data.i+"']").select("text").text(v); nodes
.select("g[data-id='" + d.data.i + "']")
.select("text")
.text(v);
}); });
} }
} }
@ -467,20 +568,17 @@ function editReligions() {
if (!layerIsOn("toggleReligions")) toggleReligions(); if (!layerIsOn("toggleReligions")) toggleReligions();
customization = 7; customization = 7;
relig.append("g").attr("id", "temp"); relig.append("g").attr("id", "temp");
document.querySelectorAll("#religionsBottom > button").forEach(el => el.style.display = "none"); document.querySelectorAll("#religionsBottom > button").forEach(el => (el.style.display = "none"));
document.getElementById("religionsManuallyButtons").style.display = "inline-block"; document.getElementById("religionsManuallyButtons").style.display = "inline-block";
debug.select("#religionCenters").style("display", "none"); debug.select("#religionCenters").style("display", "none");
religionsEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden")); religionsEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden"));
religionsFooter.style.display = "none"; religionsFooter.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"));
$("#religionsEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}}); $("#religionsEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
tip("Click on religion to select, drag the circle to change religion", true); tip("Click on religion to select, drag the circle to change religion", true);
viewbox.style("cursor", "crosshair") viewbox.style("cursor", "crosshair").on("click", selectReligionOnMapClick).call(d3.drag().on("start", dragReligionBrush)).on("touchmove mousemove", moveReligionBrush);
.on("click", selectReligionOnMapClick)
.call(d3.drag().on("start", dragReligionBrush))
.on("touchmove mousemove", moveReligionBrush);
body.querySelector("div").classList.add("selected"); body.querySelector("div").classList.add("selected");
} }
@ -496,11 +594,11 @@ function editReligions() {
const i = findCell(point[0], point[1]); const i = findCell(point[0], point[1]);
if (pack.cells.h[i] < 20) return; if (pack.cells.h[i] < 20) return;
const assigned = relig.select("#temp").select("polygon[data-cell='"+i+"']"); const assigned = relig.select("#temp").select("polygon[data-cell='" + i + "']");
const religion = assigned.size() ? +assigned.attr("data-religion") : pack.cells.religion[i]; const religion = assigned.size() ? +assigned.attr("data-religion") : pack.cells.religion[i];
body.querySelector("div.selected").classList.remove("selected"); body.querySelector("div.selected").classList.remove("selected");
body.querySelector("div[data-id='"+religion+"']").classList.add("selected"); body.querySelector("div[data-id='" + religion + "']").classList.add("selected");
} }
function dragReligionBrush() { function dragReligionBrush() {
@ -524,8 +622,8 @@ function editReligions() {
const r = +selected.dataset.id; // religionNew const r = +selected.dataset.id; // religionNew
const color = pack.religions[r].color || "#ffffff"; const color = pack.religions[r].color || "#ffffff";
selection.forEach(function(i) { selection.forEach(function (i) {
const exists = temp.select("polygon[data-cell='"+i+"']"); const exists = temp.select("polygon[data-cell='" + i + "']");
const religionOld = exists.size() ? +exists.attr("data-religion") : pack.cells.religion[i]; const religionOld = exists.size() ? +exists.attr("data-religion") : pack.cells.religion[i];
if (r === religionOld) return; if (r === religionOld) return;
@ -544,7 +642,7 @@ function editReligions() {
function applyReligionsManualAssignent() { function applyReligionsManualAssignent() {
const changed = relig.select("#temp").selectAll("polygon"); const changed = relig.select("#temp").selectAll("polygon");
changed.each(function() { changed.each(function () {
const i = +this.dataset.cell; const i = +this.dataset.cell;
const r = +this.dataset.religion; const r = +this.dataset.religion;
pack.cells.religion[i] = r; pack.cells.religion[i] = r;
@ -562,13 +660,13 @@ function editReligions() {
customization = 0; customization = 0;
relig.select("#temp").remove(); relig.select("#temp").remove();
removeCircle(); removeCircle();
document.querySelectorAll("#religionsBottom > button").forEach(el => el.style.display = "inline-block"); document.querySelectorAll("#religionsBottom > button").forEach(el => (el.style.display = "inline-block"));
document.getElementById("religionsManuallyButtons").style.display = "none"; document.getElementById("religionsManuallyButtons").style.display = "none";
religionsEditor.querySelectorAll(".hide").forEach(el => el.classList.remove("hidden")); religionsEditor.querySelectorAll(".hide").forEach(el => el.classList.remove("hidden"));
religionsFooter.style.display = "block"; religionsFooter.style.display = "block";
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(!close) $("#religionsEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}}); if (!close) $("#religionsEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
debug.select("#religionCenters").style("display", null); debug.select("#religionCenters").style("display", null);
restoreDefaultEvents(); restoreDefaultEvents();
@ -578,28 +676,37 @@ function editReligions() {
} }
function enterAddReligionMode() { function enterAddReligionMode() {
if (this.classList.contains("pressed")) {exitAddReligionMode(); return;}; if (this.classList.contains("pressed")) {
exitAddReligionMode();
return;
}
customization = 8; customization = 8;
this.classList.add("pressed"); this.classList.add("pressed");
tip("Click on the map to add a new religion", true); tip("Click on the map to add a new religion", true);
viewbox.style("cursor", "crosshair").on("click", addReligion); viewbox.style("cursor", "crosshair").on("click", addReligion);
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 exitAddReligionMode() { function exitAddReligionMode() {
customization = 0; customization = 0;
restoreDefaultEvents(); restoreDefaultEvents();
clearMainTip(); 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 (religionsAdd.classList.contains("pressed")) religionsAdd.classList.remove("pressed"); if (religionsAdd.classList.contains("pressed")) religionsAdd.classList.remove("pressed");
} }
function addReligion() { function addReligion() {
const point = d3.mouse(this); const point = d3.mouse(this);
const center = findCell(point[0], point[1]); const center = findCell(point[0], point[1]);
if (pack.cells.h[center] < 20) {tip("You cannot place religion center into the water. Please click on a land cell", false, "error"); return;} if (pack.cells.h[center] < 20) {
tip("You cannot place religion center into the water. Please click on a land cell", false, "error");
return;
}
const occupied = pack.religions.some(r => !r.removed && r.center === center); const occupied = pack.religions.some(r => !r.removed && r.center === center);
if (occupied) {tip("This cell is already a religion center. Please select a different cell", false, "error"); return;} if (occupied) {
tip("This cell is already a religion center. Please select a different cell", false, "error");
return;
}
if (d3.event.shiftKey === false) exitAddReligionMode(); if (d3.event.shiftKey === false) exitAddReligionMode();
Religions.add(center); Religions.add(center);
@ -611,9 +718,9 @@ function editReligions() {
function downloadReligionsData() { function downloadReligionsData() {
const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value; const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value;
let data = "Id,Religion,Color,Type,Form,Deity,Area "+unit+",Believers\n"; // headers let data = "Id,Religion,Color,Type,Form,Deity,Area " + unit + ",Believers\n"; // headers
body.querySelectorAll(":scope > div").forEach(function(el) { body.querySelectorAll(":scope > div").forEach(function (el) {
data += el.dataset.id + ","; data += el.dataset.id + ",";
data += el.dataset.name + ","; data += el.dataset.name + ",";
data += el.dataset.color + ","; data += el.dataset.color + ",";
@ -633,5 +740,4 @@ function editReligions() {
exitReligionsManualAssignment("close"); exitReligionsManualAssignment("close");
exitAddReligionMode(); exitAddReligionMode();
} }
} }

487
modules/ui/states-editor.js
View file

@ -15,7 +15,10 @@ function editStates() {
modules.editStates = true; modules.editStates = true;
$("#statesEditor").dialog({ $("#statesEditor").dialog({
title: "States Editor", resizable: false, width: fitContent(), close: closeStatesEditor, title: "States Editor",
resizable: false,
width: fitContent(),
close: closeStatesEditor,
position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"} position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
}); });
@ -37,26 +40,35 @@ function editStates() {
document.getElementById("statesAdd").addEventListener("click", enterAddStateMode); document.getElementById("statesAdd").addEventListener("click", enterAddStateMode);
document.getElementById("statesExport").addEventListener("click", downloadStatesData); document.getElementById("statesExport").addEventListener("click", downloadStatesData);
body.addEventListener("click", function(ev) { body.addEventListener("click", function (ev) {
const el = ev.target, cl = el.classList, line = el.parentNode, state = +line.dataset.id; const el = ev.target,
if (cl.contains("fillRect")) stateChangeFill(el); else cl = el.classList,
if (cl.contains("name")) editStateName(state); else line = el.parentNode,
if (cl.contains("coaIcon")) editEmblem("state", "stateCOA"+state, pack.states[state]); else state = +line.dataset.id;
if (cl.contains("icon-star-empty")) stateCapitalZoomIn(state); else if (cl.contains("fillRect")) stateChangeFill(el);
if (cl.contains("culturePopulation")) changePopulation(state); else else if (cl.contains("name")) editStateName(state);
if (cl.contains("icon-pin")) toggleFog(state, cl); else else if (cl.contains("coaIcon")) editEmblem("state", "stateCOA" + state, pack.states[state]);
if (cl.contains("icon-trash-empty")) stateRemovePrompt(state); else if (cl.contains("icon-star-empty")) stateCapitalZoomIn(state);
else if (cl.contains("culturePopulation")) changePopulation(state);
else if (cl.contains("icon-pin")) toggleFog(state, cl);
else if (cl.contains("icon-trash-empty")) stateRemovePrompt(state);
}); });
body.addEventListener("input", function(ev) { body.addEventListener("input", function (ev) {
const el = ev.target, cl = el.classList, line = el.parentNode, state = +line.dataset.id; const el = ev.target,
if (cl.contains("stateCapital")) stateChangeCapitalName(state, line, el.value); else cl = el.classList,
if (cl.contains("cultureType")) stateChangeType(state, line, el.value); else line = el.parentNode,
if (cl.contains("statePower")) stateChangeExpansionism(state, line, el.value); state = +line.dataset.id;
if (cl.contains("stateCapital")) stateChangeCapitalName(state, line, el.value);
else if (cl.contains("cultureType")) stateChangeType(state, line, el.value);
else if (cl.contains("statePower")) stateChangeExpansionism(state, line, el.value);
}); });
body.addEventListener("change", function(ev) { body.addEventListener("change", function (ev) {
const el = ev.target, cl = el.classList, line = el.parentNode, state = +line.dataset.id; const el = ev.target,
cl = el.classList,
line = el.parentNode,
state = +line.dataset.id;
if (cl.contains("stateCulture")) stateChangeCulture(state, line, el.value); if (cl.contains("stateCulture")) stateChangeCulture(state, line, el.value);
}); });
@ -69,19 +81,22 @@ function editStates() {
function statesEditorAddLines() { function statesEditorAddLines() {
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value; const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
const hidden = statesRegenerateButtons.style.display === "block" ? "" : "hidden"; // show/hide regenerate columns const hidden = statesRegenerateButtons.style.display === "block" ? "" : "hidden"; // show/hide regenerate columns
let lines = "", totalArea = 0, totalPopulation = 0, totalBurgs = 0; let lines = "",
totalArea = 0,
totalPopulation = 0,
totalBurgs = 0;
for (const s of pack.states) { for (const s of pack.states) {
if (s.removed) continue; if (s.removed) continue;
const area = s.area * (distanceScaleInput.value ** 2); const area = s.area * distanceScaleInput.value ** 2;
const rural = s.rural * populationRate.value; const rural = s.rural * populationRate;
const urban = s.urban * populationRate.value * urbanization.value; const urban = s.urban * populationRate * urbanization;
const population = rn(rural + urban); const population = rn(rural + urban);
const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}. Click to change`; const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}. Click to change`;
totalArea += area; totalArea += area;
totalPopulation += population; totalPopulation += population;
totalBurgs += s.burgs; totalBurgs += s.burgs;
const focused = defs.select("#fog #focusState"+s.i).size(); const focused = defs.select("#fog #focusState" + s.i).size();
if (!s.i) { if (!s.i) {
// Neutral line // Neutral line
@ -110,7 +125,7 @@ function editStates() {
} }
const capital = pack.burgs[s.capital].name; const capital = pack.burgs[s.capital].name;
COArenderer.trigger("stateCOA"+s.i, s.coa); COArenderer.trigger("stateCOA" + s.i, s.coa);
lines += `<div class="states" data-id=${s.i} data-name="${s.name}" data-form="${s.formName}" data-capital="${capital}" data-color="${s.color}" data-cells=${s.cells} lines += `<div class="states" data-id=${s.i} data-name="${s.name}" data-form="${s.formName}" data-capital="${capital}" data-color="${s.color}" data-cells=${s.cells}
data-area=${area} data-population=${population} data-burgs=${s.burgs} data-culture=${pack.cultures[s.culture].name} data-type=${s.type} data-expansionism=${s.expansionism}> data-area=${area} data-population=${population} data-burgs=${s.burgs} data-culture=${pack.cultures[s.culture].name} data-type=${s.type} data-expansionism=${s.expansionism}>
<svg data-tip="State fill style. Click to change" width=".9em" height=".9em" style="margin-bottom:-1px"><rect x="0" y="0" width="100%" height="100%" fill="${s.color}" class="fillRect pointer"></svg> <svg data-tip="State fill style. Click to change" width=".9em" height=".9em" style="margin-bottom:-1px"><rect x="0" y="0" width="100%" height="100%" fill="${s.color}" class="fillRect pointer"></svg>
@ -131,7 +146,7 @@ function editStates() {
<input data-tip="Expansionism (defines competitive size). Change to re-calculate states based on new value" class="statePower ${hidden} show hide" type="number" min=0 max=99 step=.1 value=${s.expansionism}> <input data-tip="Expansionism (defines competitive size). Change to re-calculate states based on new value" class="statePower ${hidden} show hide" type="number" min=0 max=99 step=.1 value=${s.expansionism}>
<span data-tip="Cells count" class="icon-check-empty ${hidden} show hide"></span> <span data-tip="Cells count" class="icon-check-empty ${hidden} show hide"></span>
<div data-tip="Cells count" class="stateCells ${hidden} show hide">${s.cells}</div> <div data-tip="Cells count" class="stateCells ${hidden} show hide">${s.cells}</div>
<span data-tip="Toggle state focus" class="icon-pin ${focused?'':' inactive'} hide"></span> <span data-tip="Toggle state focus" class="icon-pin ${focused ? "" : " inactive"} hide"></span>
<span data-tip="Remove the state" class="icon-trash-empty hide"></span> <span data-tip="Remove the state" class="icon-trash-empty hide"></span>
</div>`; </div>`;
} }
@ -152,21 +167,28 @@ function editStates() {
el.addEventListener("mouseleave", ev => stateHighlightOff(ev)); el.addEventListener("mouseleave", ev => stateHighlightOff(ev));
}); });
if (body.dataset.type === "percentage") {body.dataset.type = "absolute"; togglePercentageMode();} if (body.dataset.type === "percentage") {
body.dataset.type = "absolute";
togglePercentageMode();
}
applySorting(statesHeader); applySorting(statesHeader);
$("#statesEditor").dialog({width: fitContent()}); $("#statesEditor").dialog({width: fitContent()});
} }
function getCultureOptions(culture) { function getCultureOptions(culture) {
let options = ""; let options = "";
pack.cultures.forEach(c => {if (!c.removed) { options += `<option ${c.i === culture ? "selected" : ""} value="${c.i}">${c.name}</option>` }}); pack.cultures.forEach(c => {
if (!c.removed) {
options += `<option ${c.i === culture ? "selected" : ""} value="${c.i}">${c.name}</option>`;
}
});
return options; return options;
} }
function getTypeOptions(type) { function getTypeOptions(type) {
let options = ""; let options = "";
const types = ["Generic", "River", "Lake", "Naval", "Nomadic", "Hunting", "Highland"]; const types = ["Generic", "River", "Lake", "Naval", "Nomadic", "Hunting", "Highland"];
types.forEach(t => options += `<option ${type === t ? "selected" : ""} value="${t}">${t}</option>`); types.forEach(t => (options += `<option ${type === t ? "selected" : ""} value="${t}">${t}</option>`));
return options; return options;
} }
@ -176,19 +198,23 @@ function editStates() {
const state = +event.target.dataset.id; const state = +event.target.dataset.id;
if (customization || !state) return; if (customization || !state) return;
const d = regions.select("#state"+state).attr("d"); const d = regions.select("#state" + state).attr("d");
const path = debug.append("path").attr("class", "highlight").attr("d", d) const path = debug.append("path").attr("class", "highlight").attr("d", d).attr("fill", "none").attr("stroke", "red").attr("stroke-width", 1).attr("opacity", 1).attr("filter", "url(#blur1)");
.attr("fill", "none").attr("stroke", "red").attr("stroke-width", 1).attr("opacity", 1)
.attr("filter", "url(#blur1)");
const l = path.node().getTotalLength(), dur = (l + 5000) / 2; const l = path.node().getTotalLength(),
dur = (l + 5000) / 2;
const i = d3.interpolateString("0," + l, l + "," + l); const i = d3.interpolateString("0," + l, l + "," + l);
path.transition().duration(dur).attrTween("stroke-dasharray", function() {return t => i(t)}); path
.transition()
.duration(dur)
.attrTween("stroke-dasharray", function () {
return t => i(t);
});
} }
function stateHighlightOff() { function stateHighlightOff() {
debug.selectAll(".highlight").each(function() { debug.selectAll(".highlight").each(function () {
d3.select(this).transition().duration(1000).attr("opacity", 0).remove(); d3.select(this).transition().duration(1000).attr("opacity", 0).remove();
}); });
} }
@ -197,20 +223,23 @@ function editStates() {
const currentFill = el.getAttribute("fill"); const currentFill = el.getAttribute("fill");
const state = +el.parentNode.parentNode.dataset.id; const state = +el.parentNode.parentNode.dataset.id;
const callback = function(fill) { const callback = function (fill) {
el.setAttribute("fill", fill); el.setAttribute("fill", fill);
pack.states[state].color = fill; pack.states[state].color = fill;
statesBody.select("#state"+state).attr("fill", fill); statesBody.select("#state" + state).attr("fill", fill);
statesBody.select("#state-gap"+state).attr("stroke", fill); statesBody.select("#state-gap" + state).attr("stroke", fill);
const halo = d3.color(fill) ? d3.color(fill).darker().hex() : "#666666"; const halo = d3.color(fill) ? d3.color(fill).darker().hex() : "#666666";
statesHalo.select("#state-border"+state).attr("stroke", halo); statesHalo.select("#state-border" + state).attr("stroke", halo);
// recolor regiments // recolor regiments
const solidColor = fill[0] === "#" ? fill : "#999"; const solidColor = fill[0] === "#" ? fill : "#999";
const darkerColor = d3.color(solidColor).darker().hex(); const darkerColor = d3.color(solidColor).darker().hex();
armies.select("#army"+state).attr("fill", solidColor); armies.select("#army" + state).attr("fill", solidColor);
armies.select("#army"+state).selectAll("g > rect:nth-of-type(2)").attr("fill", darkerColor); armies
} .select("#army" + state)
.selectAll("g > rect:nth-of-type(2)")
.attr("fill", darkerColor);
};
openPicker(currentFill, callback); openPicker(currentFill, callback);
} }
@ -231,10 +260,18 @@ function editStates() {
document.getElementById("stateNameEditorFull").value = s.fullName || ""; document.getElementById("stateNameEditorFull").value = s.fullName || "";
$("#stateNameEditor").dialog({ $("#stateNameEditor").dialog({
resizable: false, title: "Change state name", buttons: { resizable: false,
Apply: function() {applyNameChange(s); $(this).dialog("close");}, title: "Change state name",
Cancel: function() {$(this).dialog("close");} buttons: {
}, position: {my: "center", at: "center", of: "svg"} Apply: function () {
applyNameChange(s);
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
position: {my: "center", at: "center", of: "svg"}
}); });
if (modules.editStateName) return; if (modules.editStateName) return;
@ -255,7 +292,7 @@ function editStates() {
} }
function regenerateShortNameRandom() { function regenerateShortNameRandom() {
const base = rand(nameBases.length-1); const base = rand(nameBases.length - 1);
const name = Names.getState(Names.getBase(base), undefined, base); const name = Names.getState(Names.getBase(base), undefined, base);
document.getElementById("stateNameEditorShort").value = name; document.getElementById("stateNameEditorShort").value = name;
} }
@ -278,8 +315,8 @@ function editStates() {
if (!form) return short; if (!form) return short;
if (!short && form) return "The " + form; if (!short && form) return "The " + form;
const tick = +stateNameEditorFullRegenerate.dataset.tick; const tick = +stateNameEditorFullRegenerate.dataset.tick;
stateNameEditorFullRegenerate.dataset.tick = tick+1; stateNameEditorFullRegenerate.dataset.tick = tick + 1;
return tick%2 ? getAdjective(short) + " " + form : form + " of " + short; return tick % 2 ? getAdjective(short) + " " + form : form + " of " + short;
} }
} }
@ -312,73 +349,85 @@ function editStates() {
const capital = pack.states[state].capital; const capital = pack.states[state].capital;
if (!capital) return; if (!capital) return;
pack.burgs[capital].name = value; pack.burgs[capital].name = value;
document.querySelector("#burgLabel"+capital).textContent = value; document.querySelector("#burgLabel" + capital).textContent = value;
} }
function changePopulation(state) { function changePopulation(state) {
const s = pack.states[state]; const s = pack.states[state];
if (!s.cells) {tip("State does not have any cells, cannot change population", false, "error"); return;} if (!s.cells) {
const rural = rn(s.rural * populationRate.value); tip("State does not have any cells, cannot change population", false, "error");
const urban = rn(s.urban * populationRate.value * urbanization.value); return;
}
const rural = rn(s.rural * populationRate);
const urban = rn(s.urban * populationRate * urbanization);
const total = rural + urban; const total = rural + urban;
const l = n => Number(n).toLocaleString(); const l = n => Number(n).toLocaleString();
alertMessage.innerHTML = ` alertMessage.innerHTML = `
Rural: <input type="number" min=0 step=1 id="ruralPop" value=${rural} style="width:6em"> 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" ${s.burgs?'':"disabled"}> Urban: <input type="number" min=0 step=1 id="urbanPop" value=${urban} style="width:6em" ${s.burgs ? "" : "disabled"}>
<p>Total population: ${l(total)} ⇒ <span id="totalPop">${l(total)}</span> (<span id="totalPopPerc">100</span>%)</p>`; <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; const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
if (isNaN(totalNew)) return; if (isNaN(totalNew)) return;
totalPop.innerHTML = l(totalNew); totalPop.innerHTML = l(totalNew);
totalPopPerc.innerHTML = rn(totalNew / total * 100); totalPopPerc.innerHTML = rn((totalNew / total) * 100);
} };
ruralPop.oninput = () => update(); ruralPop.oninput = () => update();
urbanPop.oninput = () => update(); urbanPop.oninput = () => update();
$("#alert").dialog({ $("#alert").dialog({
resizable: false, title: "Change state population", width: "24em", buttons: { resizable: false,
Apply: function() {applyPopulationChange(); $(this).dialog("close");}, title: "Change state population",
Cancel: function() {$(this).dialog("close");} width: "24em",
}, position: {my: "center", at: "center", of: "svg"} buttons: {
Apply: function () {
applyPopulationChange();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
position: {my: "center", at: "center", of: "svg"}
}); });
function applyPopulationChange() { function applyPopulationChange() {
const ruralChange = ruralPop.value / rural; const ruralChange = ruralPop.value / rural;
if (isFinite(ruralChange) && ruralChange !== 1) { if (isFinite(ruralChange) && ruralChange !== 1) {
const cells = pack.cells.i.filter(i => pack.cells.state[i] === state); const cells = pack.cells.i.filter(i => pack.cells.state[i] === state);
cells.forEach(i => pack.cells.pop[i] *= ruralChange); cells.forEach(i => (pack.cells.pop[i] *= ruralChange));
} }
if (!isFinite(ruralChange) && +ruralPop.value > 0) { if (!isFinite(ruralChange) && +ruralPop.value > 0) {
const points = ruralPop.value / populationRate.value; const points = ruralPop.value / populationRate;
const cells = pack.cells.i.filter(i => pack.cells.state[i] === state); const cells = pack.cells.i.filter(i => pack.cells.state[i] === state);
const pop = points / cells.length; const pop = points / cells.length;
cells.forEach(i => pack.cells.pop[i] = pop); cells.forEach(i => (pack.cells.pop[i] = pop));
} }
const urbanChange = urbanPop.value / urban; const urbanChange = urbanPop.value / urban;
if (isFinite(urbanChange) && urbanChange !== 1) { if (isFinite(urbanChange) && urbanChange !== 1) {
const burgs = pack.burgs.filter(b => !b.removed && b.state === state); const burgs = pack.burgs.filter(b => !b.removed && b.state === state);
burgs.forEach(b => b.population = rn(b.population * urbanChange, 4)); burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
} }
if (!isFinite(urbanChange) && +urbanPop.value > 0) { if (!isFinite(urbanChange) && +urbanPop.value > 0) {
const points = urbanPop.value / populationRate.value / urbanization.value; const points = urbanPop.value / populationRate / urbanization;
const burgs = pack.burgs.filter(b => !b.removed && b.state === state); const burgs = pack.burgs.filter(b => !b.removed && b.state === state);
const population = rn(points / burgs.length, 4); const population = rn(points / burgs.length, 4);
burgs.forEach(b => b.population = population); burgs.forEach(b => (b.population = population));
} }
refreshStatesEditor(); refreshStatesEditor();
} }
} }
function stateCapitalZoomIn(state) { function stateCapitalZoomIn(state) {
const capital = pack.states[state].capital; const capital = pack.states[state].capital;
const l = burgLabels.select("[data-id='" + capital + "']"); 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); zoomTo(x, y, 8, 2000);
} }
@ -398,7 +447,8 @@ function editStates() {
function toggleFog(state, cl) { function toggleFog(state, cl) {
if (customization) return; if (customization) return;
const path = statesBody.select("#state"+state).attr("d"), id = "focusState"+state; const path = statesBody.select("#state" + state).attr("d"),
id = "focusState" + state;
cl.contains("inactive") ? fog(id, path) : unfog(id); cl.contains("inactive") ? fog(id, path) : unfog(id);
cl.toggle("inactive"); cl.toggle("inactive");
} }
@ -407,27 +457,35 @@ function editStates() {
if (customization) return; if (customization) return;
alertMessage.innerHTML = "Are you sure you want to remove the state? <br>This action cannot be reverted"; alertMessage.innerHTML = "Are you sure you want to remove the state? <br>This action cannot be reverted";
$("#alert").dialog({resizable: false, title: "Remove state", $("#alert").dialog({
resizable: false,
title: "Remove state",
buttons: { buttons: {
Remove: function() { Remove: function () {
$(this).dialog("close"); $(this).dialog("close");
stateRemove(state); stateRemove(state);
}, },
Cancel: function() {$(this).dialog("close");} Cancel: function () {
$(this).dialog("close");
}
} }
}); });
} }
function stateRemove(state) { function stateRemove(state) {
statesBody.select("#state"+state).remove(); statesBody.select("#state" + state).remove();
statesBody.select("#state-gap"+state).remove(); statesBody.select("#state-gap" + state).remove();
statesHalo.select("#state-border"+state).remove(); statesHalo.select("#state-border" + state).remove();
labels.select("#stateLabel"+state).remove(); labels.select("#stateLabel" + state).remove();
defs.select("#textPath_stateLabel"+state).remove(); defs.select("#textPath_stateLabel" + state).remove();
unfog("focusState"+state); unfog("focusState" + state);
pack.burgs.forEach(b => {if(b.state === state) b.state = 0;}); pack.burgs.forEach(b => {
pack.cells.state.forEach((s, i) => {if(s === state) pack.cells.state[i] = 0;}); if (b.state === state) b.state = 0;
});
pack.cells.state.forEach((s, i) => {
if (s === state) pack.cells.state[i] = 0;
});
// remove emblem // remove emblem
const coaId = "stateCOA" + state; const coaId = "stateCOA" + state;
@ -437,13 +495,15 @@ function editStates() {
// remove provinces // remove provinces
pack.states[state].provinces.forEach(p => { pack.states[state].provinces.forEach(p => {
pack.provinces[p] = {i: p, removed: true}; pack.provinces[p] = {i: p, removed: true};
pack.cells.province.forEach((pr, i) => {if(pr === p) pack.cells.province[i] = 0;}); pack.cells.province.forEach((pr, i) => {
if (pr === p) pack.cells.province[i] = 0;
});
const coaId = "provinceCOA" + p; const coaId = "provinceCOA" + p;
if (document.getElementById(coaId)) document.getElementById(coaId).remove(); if (document.getElementById(coaId)) document.getElementById(coaId).remove();
emblems.select(`#provinceEmblems > use[data-i='${p}']`).remove(); emblems.select(`#provinceEmblems > use[data-i='${p}']`).remove();
const g = provs.select("#provincesBody"); const g = provs.select("#provincesBody");
g.select("#province"+p).remove(); g.select("#province" + p).remove();
g.select("#province-gap"+p).remove(); g.select("#province-gap" + p).remove();
}); });
// remove military // remove military
@ -452,7 +512,7 @@ function editStates() {
const index = notes.findIndex(n => n.id === id); const index = notes.findIndex(n => n.id === id);
if (index != -1) notes.splice(index, 1); if (index != -1) notes.splice(index, 1);
}); });
armies.select("g#army"+state).remove(); armies.select("g#army" + state).remove();
const capital = pack.states[state].capital; const capital = pack.states[state].capital;
pack.burgs[capital].capital = 0; pack.burgs[capital].capital = 0;
@ -462,15 +522,23 @@ function editStates() {
pack.states[state] = {i: state, removed: true}; pack.states[state] = {i: state, removed: true};
debug.selectAll(".highlight").remove(); debug.selectAll(".highlight").remove();
if (!layerIsOn("toggleStates")) toggleStates(); else drawStates(); if (!layerIsOn("toggleStates")) toggleStates();
if (!layerIsOn("toggleBorders")) toggleBorders(); else drawBorders(); else drawStates();
if (!layerIsOn("toggleBorders")) toggleBorders();
else drawBorders();
if (layerIsOn("toggleProvinces")) drawProvinces(); if (layerIsOn("toggleProvinces")) drawProvinces();
refreshStatesEditor(); refreshStatesEditor();
} }
function toggleLegend() { function toggleLegend() {
if (legend.selectAll("*").size()) {clearLegend(); return;}; // hide legend if (legend.selectAll("*").size()) {
const data = pack.states.filter(s => s.i && !s.removed && s.cells).sort((a, b) => b.area - a.area).map(s => [s.i, s.color, s.name]); clearLegend();
return;
} // hide legend
const data = pack.states
.filter(s => s.i && !s.removed && s.cells)
.sort((a, b) => b.area - a.area)
.map(s => [s.i, s.color, s.name]);
drawLegend("States", data); drawLegend("States", data);
} }
@ -482,11 +550,11 @@ function editStates() {
const totalArea = +statesFooterArea.dataset.area; const totalArea = +statesFooterArea.dataset.area;
const totalPopulation = +statesFooterPopulation.dataset.population; const totalPopulation = +statesFooterPopulation.dataset.population;
body.querySelectorAll(":scope > div").forEach(function(el) { body.querySelectorAll(":scope > div").forEach(function (el) {
el.querySelector(".stateCells").innerHTML = rn(+el.dataset.cells / totalCells * 100) + "%"; el.querySelector(".stateCells").innerHTML = rn((+el.dataset.cells / totalCells) * 100) + "%";
el.querySelector(".stateBurgs").innerHTML = rn(+el.dataset.burgs / totalBurgs * 100) + "%"; el.querySelector(".stateBurgs").innerHTML = rn((+el.dataset.burgs / totalBurgs) * 100) + "%";
el.querySelector(".biomeArea").innerHTML = rn(+el.dataset.area / totalArea * 100) + "%"; el.querySelector(".biomeArea").innerHTML = rn((+el.dataset.area / totalArea) * 100) + "%";
el.querySelector(".culturePopulation").innerHTML = rn(+el.dataset.population / totalPopulation * 100) + "%"; el.querySelector(".culturePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%";
}); });
} else { } else {
body.dataset.type = "absolute"; body.dataset.type = "absolute";
@ -497,10 +565,15 @@ function editStates() {
function showStatesChart() { function showStatesChart() {
// build hierarchy tree // build hierarchy tree
const data = pack.states.filter(s => !s.removed); const data = pack.states.filter(s => !s.removed);
const root = d3.stratify().id(d => d.i).parentId(d => d.i ? 0 : null)(data) const root = d3
.sum(d => d.area).sort((a, b) => b.value - a.value); .stratify()
.id(d => d.i)
.parentId(d => (d.i ? 0 : null))(data)
.sum(d => d.area)
.sort((a, b) => b.value - a.value);
const width = 150 + 200 * uiSizeOutput.value, height = 150 + 200 * uiSizeOutput.value; const width = 150 + 200 * uiSizeOutput.value,
height = 150 + 200 * uiSizeOutput.value;
const margin = {top: 0, right: -50, bottom: 0, left: -50}; const margin = {top: 0, right: -50, bottom: 0, left: -50};
const w = width - margin.left - margin.right; const w = width - margin.left - margin.right;
const h = height - margin.top - margin.bottom; const h = height - margin.top - margin.bottom;
@ -515,46 +588,51 @@ function editStates() {
<option value="burgs">Burgs number</option> <option value="burgs">Burgs number</option>
</select>`; </select>`;
alertMessage.innerHTML += `<div id='statesInfo' class='chartInfo'>&#8205;</div>`; alertMessage.innerHTML += `<div id='statesInfo' class='chartInfo'>&#8205;</div>`;
const svg = d3.select("#alertMessage").insert("svg", "#statesInfo").attr("id", "statesTree") const svg = d3.select("#alertMessage").insert("svg", "#statesInfo").attr("id", "statesTree").attr("width", width).attr("height", height).style("font-family", "Almendra SC").attr("text-anchor", "middle").attr("dominant-baseline", "central");
.attr("width", width).attr("height", height).style("font-family", "Almendra SC")
.attr("text-anchor", "middle").attr("dominant-baseline", "central");
const graph = svg.append("g").attr("transform", `translate(-50, 0)`); const graph = svg.append("g").attr("transform", `translate(-50, 0)`);
document.getElementById("statesTreeType").addEventListener("change", updateChart); document.getElementById("statesTreeType").addEventListener("change", updateChart);
treeLayout(root); treeLayout(root);
const node = graph.selectAll("g").data(root.leaves()).enter() const node = graph
.append("g").attr("transform", d => `translate(${d.x},${d.y})`) .selectAll("g")
.data(root.leaves())
.enter()
.append("g")
.attr("transform", d => `translate(${d.x},${d.y})`)
.attr("data-id", d => d.data.i) .attr("data-id", d => d.data.i)
.on("mouseenter", d => showInfo(event, d)) .on("mouseenter", d => showInfo(event, d))
.on("mouseleave", d => hideInfo(event, d)); .on("mouseleave", d => hideInfo(event, d));
node.append("circle").attr("fill", d => d.data.color).attr("r", d => d.r); node
.append("circle")
.attr("fill", d => d.data.color)
.attr("r", d => d.r);
const exp = /(?=[A-Z][^A-Z])/g; const exp = /(?=[A-Z][^A-Z])/g;
const lp = n => d3.max(n.split(exp).map(p => p.length)) + 1; // longest name part + 1 const lp = n => d3.max(n.split(exp).map(p => p.length)) + 1; // longest name part + 1
node.append("text") node
.style("font-size", d => rn(d.r ** .97 * 4 / lp(d.data.name), 2) + "px") .append("text")
.selectAll("tspan").data(d => d.data.name.split(exp)) .style("font-size", d => rn((d.r ** 0.97 * 4) / lp(d.data.name), 2) + "px")
.join("tspan").attr("x", 0).text(d => d) .selectAll("tspan")
.attr("dy", (d, i, n) => `${i ? 1 : (n.length-1) / -2}em`); .data(d => d.data.name.split(exp))
.join("tspan")
.attr("x", 0)
.text(d => d)
.attr("dy", (d, i, n) => `${i ? 1 : (n.length - 1) / -2}em`);
function showInfo(ev, d) { function showInfo(ev, d) {
d3.select(ev.target).select("circle").classed("selected", 1); d3.select(ev.target).select("circle").classed("selected", 1);
const state = d.data.fullName; const state = d.data.fullName;
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value; const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
const area = d.data.area * (distanceScaleInput.value ** 2) + unit; const area = d.data.area * distanceScaleInput.value ** 2 + unit;
const rural = rn(d.data.rural * populationRate.value); const rural = rn(d.data.rural * populationRate);
const urban = rn(d.data.urban * populationRate.value * urbanization.value); const urban = rn(d.data.urban * populationRate * urbanization);
const option = statesTreeType.value; const option = statesTreeType.value;
const value = option === "area" ? "Area: " + area 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);
: option === "rural" ? "Rural population: " + si(rural)
: option === "urban" ? "Urban population: " + si(urban)
: option === "burgs" ? "Burgs number: " + d.data.burgs
: "Population: " + si(rural + urban);
statesInfo.innerHTML = `${state}. ${value}`; statesInfo.innerHTML = `${state}. ${value}`;
stateHighlightOn(ev); stateHighlightOn(ev);
@ -568,30 +646,40 @@ function editStates() {
} }
function updateChart() { function updateChart() {
const value = this.value === "area" ? d => d.area const value = this.value === "area" ? d => d.area : this.value === "rural" ? d => d.rural : this.value === "urban" ? d => d.urban : this.value === "burgs" ? d => d.burgs : d => d.rural + d.urban;
: this.value === "rural" ? d => d.rural
: this.value === "urban" ? d => d.urban
: this.value === "burgs" ? d => d.burgs
: d => d.rural + d.urban;
root.sum(value); root.sum(value);
node.data(treeLayout(root).leaves()); node.data(treeLayout(root).leaves());
node.transition().duration(1500).attr("transform", d => `translate(${d.x},${d.y})`) node
node.select("circle").transition().duration(1500).attr("r", d => d.r); .transition()
node.select("text").transition().duration(1500) .duration(1500)
.style("font-size", d => rn(d.r ** .97 * 4 / lp(d.data.name), 2) + "px"); .attr("transform", d => `translate(${d.x},${d.y})`);
node
.select("circle")
.transition()
.duration(1500)
.attr("r", d => d.r);
node
.select("text")
.transition()
.duration(1500)
.style("font-size", d => rn((d.r ** 0.97 * 4) / lp(d.data.name), 2) + "px");
} }
$("#alert").dialog({ $("#alert").dialog({
title: "States bubble chart", width: fitContent(), title: "States bubble chart",
position: {my: "left bottom", at: "left+10 bottom-10", of: "svg"}, buttons: {}, width: fitContent(),
close: () => {alertMessage.innerHTML = "";} position: {my: "left bottom", at: "left+10 bottom-10", of: "svg"},
buttons: {},
close: () => {
alertMessage.innerHTML = "";
}
}); });
} }
function openRegenerationMenu() { function openRegenerationMenu() {
statesBottom.querySelectorAll(":scope > button").forEach(el => el.style.display = "none"); statesBottom.querySelectorAll(":scope > button").forEach(el => (el.style.display = "none"));
statesRegenerateButtons.style.display = "block"; statesRegenerateButtons.style.display = "block";
statesEditor.querySelectorAll(".show").forEach(el => el.classList.remove("hidden")); statesEditor.querySelectorAll(".show").forEach(el => el.classList.remove("hidden"));
@ -603,8 +691,10 @@ function editStates() {
BurgsAndStates.expandStates(); BurgsAndStates.expandStates();
BurgsAndStates.generateProvinces(); BurgsAndStates.generateProvinces();
if (!layerIsOn("toggleStates")) toggleStates(); else drawStates(); if (!layerIsOn("toggleStates")) toggleStates();
if (!layerIsOn("toggleBorders")) toggleBorders(); else drawBorders(); else drawStates();
if (!layerIsOn("toggleBorders")) toggleBorders();
else drawBorders();
if (layerIsOn("toggleProvinces")) drawProvinces(); if (layerIsOn("toggleProvinces")) drawProvinces();
if (adjustLabels.checked) BurgsAndStates.drawStateLabels(); if (adjustLabels.checked) BurgsAndStates.drawStateLabels();
refreshStatesEditor(); refreshStatesEditor();
@ -615,13 +705,13 @@ function editStates() {
if (!s.i || s.removed) return; if (!s.i || s.removed) return;
const expansionism = rn(Math.random() * 4 + 1, 1); const expansionism = rn(Math.random() * 4 + 1, 1);
s.expansionism = expansionism; s.expansionism = expansionism;
body.querySelector("div.states[data-id='"+s.i+"'] > input.statePower").value = expansionism; body.querySelector("div.states[data-id='" + s.i + "'] > input.statePower").value = expansionism;
}); });
recalculateStates(true, true); recalculateStates(true, true);
} }
function exitRegenerationMenu() { function exitRegenerationMenu() {
statesBottom.querySelectorAll(":scope > button").forEach(el => el.style.display = "inline-block"); statesBottom.querySelectorAll(":scope > button").forEach(el => (el.style.display = "inline-block"));
statesRegenerateButtons.style.display = "none"; statesRegenerateButtons.style.display = "none";
statesEditor.querySelectorAll(".show").forEach(el => el.classList.add("hidden")); statesEditor.querySelectorAll(".show").forEach(el => el.classList.add("hidden"));
$("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}}); $("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
@ -631,20 +721,17 @@ function editStates() {
if (!layerIsOn("toggleStates")) toggleStates(); if (!layerIsOn("toggleStates")) toggleStates();
customization = 2; customization = 2;
statesBody.append("g").attr("id", "temp"); statesBody.append("g").attr("id", "temp");
document.querySelectorAll("#statesBottom > button").forEach(el => el.style.display = "none"); document.querySelectorAll("#statesBottom > button").forEach(el => (el.style.display = "none"));
document.getElementById("statesManuallyButtons").style.display = "inline-block"; document.getElementById("statesManuallyButtons").style.display = "inline-block";
document.getElementById("statesHalo").style.display = "none"; document.getElementById("statesHalo").style.display = "none";
statesEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden")); statesEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden"));
statesFooter.style.display = "none"; statesFooter.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"));
$("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}}); $("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
tip("Click on state to select, drag the circle to change state", true); tip("Click on state to select, drag the circle to change state", true);
viewbox.style("cursor", "crosshair") viewbox.style("cursor", "crosshair").on("click", selectStateOnMapClick).call(d3.drag().on("start", dragStateBrush)).on("touchmove mousemove", moveStateBrush);
.on("click", selectStateOnMapClick)
.call(d3.drag().on("start", dragStateBrush))
.on("touchmove mousemove", moveStateBrush);
body.querySelector("div").classList.add("selected"); body.querySelector("div").classList.add("selected");
} }
@ -661,11 +748,11 @@ function editStates() {
const i = findCell(point[0], point[1]); const i = findCell(point[0], point[1]);
if (pack.cells.h[i] < 20) return; if (pack.cells.h[i] < 20) return;
const assigned = statesBody.select("#temp").select("polygon[data-cell='"+i+"']"); const assigned = statesBody.select("#temp").select("polygon[data-cell='" + i + "']");
const state = assigned.size() ? +assigned.attr("data-state") : pack.cells.state[i]; const state = assigned.size() ? +assigned.attr("data-state") : pack.cells.state[i];
body.querySelector("div.selected").classList.remove("selected"); body.querySelector("div.selected").classList.remove("selected");
body.querySelector("div[data-id='"+state+"']").classList.add("selected"); body.querySelector("div[data-id='" + state + "']").classList.add("selected");
} }
function dragStateBrush() { function dragStateBrush() {
@ -690,8 +777,8 @@ function editStates() {
const stateNew = +selected.dataset.id; const stateNew = +selected.dataset.id;
const color = pack.states[stateNew].color || "#ffffff"; const color = pack.states[stateNew].color || "#ffffff";
selection.forEach(function(i) { selection.forEach(function (i) {
const exists = temp.select("polygon[data-cell='"+i+"']"); const exists = temp.select("polygon[data-cell='" + i + "']");
const stateOld = exists.size() ? +exists.attr("data-state") : pack.cells.state[i]; const stateOld = exists.size() ? +exists.attr("data-state") : pack.cells.state[i];
if (stateNew === stateOld) return; if (stateNew === stateOld) return;
if (i === pack.states[stateOld].center) return; if (i === pack.states[stateOld].center) return;
@ -710,9 +797,14 @@ function editStates() {
} }
function applyStatesManualAssignent() { function applyStatesManualAssignent() {
const cells = pack.cells, affectedStates = [], affectedProvinces = []; const cells = pack.cells,
affectedStates = [],
affectedProvinces = [];
statesBody.select("#temp").selectAll("polygon").each(function() { statesBody
.select("#temp")
.selectAll("polygon")
.each(function () {
const i = +this.dataset.cell; const i = +this.dataset.cell;
const c = +this.dataset.state; const c = +this.dataset.state;
affectedStates.push(cells.state[i], c); affectedStates.push(cells.state[i], c);
@ -723,18 +815,22 @@ function editStates() {
if (affectedStates.length) { if (affectedStates.length) {
refreshStatesEditor(); refreshStatesEditor();
if (!layerIsOn("toggleStates")) toggleStates(); else drawStates(); if (!layerIsOn("toggleStates")) toggleStates();
else drawStates();
if (adjustLabels.checked) BurgsAndStates.drawStateLabels([...new Set(affectedStates)]); if (adjustLabels.checked) BurgsAndStates.drawStateLabels([...new Set(affectedStates)]);
adjustProvinces([...new Set(affectedProvinces)]); adjustProvinces([...new Set(affectedProvinces)]);
if (!layerIsOn("toggleBorders")) toggleBorders(); else drawBorders(); if (!layerIsOn("toggleBorders")) toggleBorders();
else drawBorders();
if (layerIsOn("toggleProvinces")) drawProvinces(); if (layerIsOn("toggleProvinces")) drawProvinces();
} }
exitStatesManualAssignment(); exitStatesManualAssignment();
} }
function adjustProvinces(affectedProvinces) { function adjustProvinces(affectedProvinces) {
const cells = pack.cells, provinces = pack.provinces, states = pack.states; const cells = pack.cells,
const form = {"Zone":1, "Area":1, "Territory":2, "Province":1}; provinces = pack.provinces,
states = pack.states;
const form = {Zone: 1, Area: 1, Territory: 2, Province: 1};
affectedProvinces.forEach(p => { affectedProvinces.forEach(p => {
// do nothing if neutral lands are captured // do nothing if neutral lands are captured
@ -757,7 +853,7 @@ function editStates() {
const part = states[owner].provinces.find(n => name.includes(provinces[n].name)); const part = states[owner].provinces.find(n => name.includes(provinces[n].name));
if (part) { if (part) {
provinces[p].removed = true; provinces[p].removed = true;
provCells.filter(i => cells.state[i] === owner).forEach(i => cells.province[i] = part); provCells.filter(i => cells.state[i] === owner).forEach(i => (cells.province[i] = part));
} else { } else {
provinces[p].state = owner; provinces[p].state = owner;
states[owner].provinces.push(p); states[owner].provinces.push(p);
@ -765,43 +861,49 @@ function editStates() {
} }
} else { } else {
provinces[p].removed = true; provinces[p].removed = true;
provCells.filter(i => !cells.state[i]).forEach(i => cells.province[i] = 0); provCells.filter(i => !cells.state[i]).forEach(i => (cells.province[i] = 0));
} }
// create new provinces for non-main part // create new provinces for non-main part
provStates.filter(s => s && s !== owner).forEach(s => createProvince(p, s, provCells.filter(i => cells.state[i] === s))); provStates
.filter(s => s && s !== owner)
.forEach(s =>
createProvince(
p,
s,
provCells.filter(i => cells.state[i] === s)
)
);
}); });
function createProvince(initProv, state, provCells) { function createProvince(initProv, state, provCells) {
const province = provinces.length; const province = provinces.length;
provCells.forEach(i => cells.province[i] = province); provCells.forEach(i => (cells.province[i] = province));
const burgCell = provCells.find(i => cells.burg[i]); const burgCell = provCells.find(i => cells.burg[i]);
const center = burgCell ? burgCell : provCells[0]; const center = burgCell ? burgCell : provCells[0];
const burg = burgCell ? cells.burg[burgCell] : 0; const burg = burgCell ? cells.burg[burgCell] : 0;
const name = burgCell && P(.7) ? getAdjective(pack.burgs[burg].name) const name = burgCell && P(0.7) ? getAdjective(pack.burgs[burg].name) : getAdjective(states[state].name) + " " + provinces[initProv].name.split(" ").slice(-1)[0];
: getAdjective(states[state].name) + " " + provinces[initProv].name.split(" ").slice(-1)[0];
const formName = name.split(" ").length > 1 ? provinces[initProv].formName : rw(form); const formName = name.split(" ").length > 1 ? provinces[initProv].formName : rw(form);
const fullName = name + " " + formName; const fullName = name + " " + formName;
const color = getMixedColor(states[state].color); const color = getMixedColor(states[state].color);
provinces.push({i:province, state, center, burg, name, formName, fullName, color}); provinces.push({i: province, state, center, burg, name, formName, fullName, color});
} }
} }
function exitStatesManualAssignment(close) { function exitStatesManualAssignment(close) {
customization = 0; customization = 0;
statesBody.select("#temp").remove(); statesBody.select("#temp").remove();
removeCircle(); removeCircle();
document.querySelectorAll("#statesBottom > button").forEach(el => el.style.display = "inline-block"); document.querySelectorAll("#statesBottom > button").forEach(el => (el.style.display = "inline-block"));
document.getElementById("statesManuallyButtons").style.display = "none"; document.getElementById("statesManuallyButtons").style.display = "none";
document.getElementById("statesHalo").style.display = "block"; document.getElementById("statesHalo").style.display = "block";
statesEditor.querySelectorAll(".hide:not(.show)").forEach(el => el.classList.remove("hidden")); statesEditor.querySelectorAll(".hide:not(.show)").forEach(el => el.classList.remove("hidden"));
statesFooter.style.display = "block"; statesFooter.style.display = "block";
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(!close) $("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}}); if (!close) $("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
restoreDefaultEvents(); restoreDefaultEvents();
clearMainTip(); clearMainTip();
@ -810,21 +912,32 @@ function editStates() {
} }
function enterAddStateMode() { function enterAddStateMode() {
if (this.classList.contains("pressed")) {exitAddStateMode(); return;}; if (this.classList.contains("pressed")) {
exitAddStateMode();
return;
}
customization = 3; customization = 3;
this.classList.add("pressed"); this.classList.add("pressed");
tip("Click on the map to create a new capital or promote an existing burg", true); tip("Click on the map to create a new capital or promote an existing burg", true);
viewbox.style("cursor", "crosshair").on("click", addState); viewbox.style("cursor", "crosshair").on("click", addState);
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 addState() { function addState() {
const states = pack.states, burgs = pack.burgs, cells = pack.cells; const states = pack.states,
burgs = pack.burgs,
cells = pack.cells;
const point = d3.mouse(this); const point = d3.mouse(this);
const center = findCell(point[0], point[1]); const center = findCell(point[0], point[1]);
if (cells.h[center] < 20) {tip("You cannot place state into the water. Please click on a land cell", false, "error"); return;} if (cells.h[center] < 20) {
tip("You cannot place state into the water. Please click on a land cell", false, "error");
return;
}
let burg = cells.burg[center]; let burg = cells.burg[center];
if (burg && burgs[burg].capital) {tip("Existing capital cannot be selected as a new state capital! Select other cell", false, "error"); return;} if (burg && burgs[burg].capital) {
tip("Existing capital cannot be selected as a new state capital! Select other cell", false, "error");
return;
}
if (!burg) burg = addBurg(point); // add new burg if (!burg) burg = addBurg(point); // add new burg
const oldState = cells.state[center]; const oldState = cells.state[center];
@ -838,14 +951,14 @@ function editStates() {
if (d3.event.shiftKey === false) exitAddStateMode(); if (d3.event.shiftKey === false) exitAddStateMode();
const culture = cells.culture[center]; const culture = cells.culture[center];
const basename = center%5 === 0 ? burgs[burg].name : Names.getCulture(culture); const basename = center % 5 === 0 ? burgs[burg].name : Names.getCulture(culture);
const name = Names.getState(basename, culture); const name = Names.getState(basename, culture);
const color = getRandomColor(); const color = getRandomColor();
const pole = cells.p[center]; const pole = cells.p[center];
// generate emblem // generate emblem
const cultureType = pack.cultures[culture].type; const cultureType = pack.cultures[culture].type;
const coa = COA.generate(burgs[burg].coa, .4, null, cultureType); const coa = COA.generate(burgs[burg].coa, 0.4, null, cultureType);
coa.shield = COA.getShield(culture, null); coa.shield = COA.getShield(culture, null);
// update diplomacy and reverse relations // update diplomacy and reverse relations
@ -857,7 +970,8 @@ function editStates() {
} }
let relations = states[oldState].diplomacy[s.i]; // relations between Nth state and old overlord 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 === "Ally") relations = "Suspicion";
else if (relations === "Friendly") relations = "Suspicion"; else if (relations === "Friendly") relations = "Suspicion";
else if (relations === "Suspicion") relations = "Neutral"; else if (relations === "Suspicion") relations = "Neutral";
@ -874,21 +988,34 @@ function editStates() {
cells.state[center] = newState; cells.state[center] = newState;
cells.province[center] = 0; cells.province[center] = 0;
states.push({i:newState, name, diplomacy, provinces:[], color, expansionism:.5, capital:burg, type:"Generic", center, culture, military:[], alert:1, coa, pole}); states.push({i: newState, name, diplomacy, provinces: [], color, expansionism: 0.5, capital: burg, type: "Generic", center, culture, military: [], alert: 1, coa, pole});
BurgsAndStates.collectStatistics(); BurgsAndStates.collectStatistics();
BurgsAndStates.defineStateForms([newState]); BurgsAndStates.defineStateForms([newState]);
adjustProvinces([cells.province[center]]); adjustProvinces([cells.province[center]]);
if (layerIsOn("toggleProvinces")) toggleProvinces(); if (layerIsOn("toggleProvinces")) toggleProvinces();
if (!layerIsOn("toggleStates")) toggleStates(); else drawStates(); if (!layerIsOn("toggleStates")) toggleStates();
if (!layerIsOn("toggleBorders")) toggleBorders(); else drawBorders(); else drawStates();
if (!layerIsOn("toggleBorders")) toggleBorders();
else drawBorders();
// add label // add label
defs.select("#textPaths").append("path").attr("d", `M${pole[0]-50},${pole[1]+6}h${100}`).attr("id", "textPath_stateLabel"+newState); defs
labels.select("#states") .select("#textPaths")
.append("text").attr("id", "stateLabel"+newState) .append("path")
.append("textPath").attr("xlink:href", "#textPath_stateLabel"+newState).attr("startOffset", "50%").attr("font-size", "50%") .attr("d", `M${pole[0] - 50},${pole[1] + 6}h${100}`)
.append("tspan").attr("x", name.length * -3).text(name); .attr("id", "textPath_stateLabel" + newState);
labels
.select("#states")
.append("text")
.attr("id", "stateLabel" + newState)
.append("textPath")
.attr("xlink:href", "#textPath_stateLabel" + newState)
.attr("startOffset", "50%")
.attr("font-size", "50%")
.append("tspan")
.attr("x", name.length * -3)
.text(name);
COArenderer.add("state", newState, coa, states[newState].pole[0], states[newState].pole[1]); COArenderer.add("state", newState, coa, states[newState].pole[0], states[newState].pole[1]);
statesEditorAddLines(); statesEditorAddLines();
@ -898,15 +1025,15 @@ function editStates() {
customization = 0; customization = 0;
restoreDefaultEvents(); restoreDefaultEvents();
clearMainTip(); 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 (statesAdd.classList.contains("pressed")) statesAdd.classList.remove("pressed"); if (statesAdd.classList.contains("pressed")) statesAdd.classList.remove("pressed");
} }
function downloadStatesData() { function downloadStatesData() {
const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value; const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value;
let data = "Id,State,Form,Color,Capital,Culture,Type,Expansionism,Cells,Burgs,Area "+unit+",Total Population,Rural Population,Urban Population\n"; // headers let data = "Id,State,Form,Color,Capital,Culture,Type,Expansionism,Cells,Burgs,Area " + unit + ",Total Population,Rural Population,Urban Population\n"; // headers
body.querySelectorAll(":scope > div").forEach(function(el) { body.querySelectorAll(":scope > div").forEach(function (el) {
const key = parseInt(el.dataset.id); const key = parseInt(el.dataset.id);
data += el.dataset.id + ","; data += el.dataset.id + ",";
data += el.dataset.name + ","; data += el.dataset.name + ",";
@ -920,8 +1047,8 @@ function editStates() {
data += el.dataset.burgs + ","; data += el.dataset.burgs + ",";
data += el.dataset.area + ","; data += el.dataset.area + ",";
data += el.dataset.population + ","; data += el.dataset.population + ",";
data += `${Math.round(pack.states[key].rural*populationRate.value)},`; data += `${Math.round(pack.states[key].rural * populationRate)},`;
data += `${Math.round(pack.states[key].urban*populationRate.value * urbanization.value)}\n`; data += `${Math.round(pack.states[key].urban * populationRate * urbanization)}\n`;
}); });
const name = getFileName("States") + ".csv"; const name = getFileName("States") + ".csv";

14
modules/ui/units-editor.js
View file

@ -28,9 +28,9 @@ function editUnits() {
document.getElementById("barBackColor").addEventListener("input", changeScaleBarColor); document.getElementById("barBackColor").addEventListener("input", changeScaleBarColor);
document.getElementById("populationRateOutput").addEventListener("input", changePopulationRate); document.getElementById("populationRateOutput").addEventListener("input", changePopulationRate);
document.getElementById("populationRate").addEventListener("change", changePopulationRate); document.getElementById("populationRateInput").addEventListener("change", changePopulationRate);
document.getElementById("urbanizationOutput").addEventListener("input", changeUrbanizationRate); document.getElementById("urbanizationOutput").addEventListener("input", changeUrbanizationRate);
document.getElementById("urbanization").addEventListener("change", changeUrbanizationRate); document.getElementById("urbanizationInput").addEventListener("change", changeUrbanizationRate);
document.getElementById("addLinearRuler").addEventListener("click", addRuler); document.getElementById("addLinearRuler").addEventListener("click", addRuler);
document.getElementById("addOpisometer").addEventListener("click", toggleOpisometerMode); document.getElementById("addOpisometer").addEventListener("click", toggleOpisometerMode);
@ -86,13 +86,11 @@ function editUnits() {
} }
function changePopulationRate() { function changePopulationRate() {
document.getElementById("populationRateOutput").value = this.value; populationRate = +this.value;
document.getElementById("populationRate").value = this.value;
} }
function changeUrbanizationRate() { function changeUrbanizationRate() {
document.getElementById("urbanizationOutput").value = this.value; urbanization = +this.value;
document.getElementById("urbanization").value = this.value;
} }
function restoreDefaultUnits() { function restoreDefaultUnits() {
@ -135,8 +133,8 @@ function editUnits() {
drawScaleBar(); drawScaleBar();
// population // population
populationRateOutput.value = populationRate.value = 1000; populationRate = populationRateOutput.value = populationRateInput.value = 1000;
urbanizationOutput.value = urbanization.value = 1; urbanization = urbanizationOutput.value = urbanizationInput.value = 1;
localStorage.removeItem("populationRate"); localStorage.removeItem("populationRate");
localStorage.removeItem("urbanization"); localStorage.removeItem("urbanization");
} }

228
modules/ui/zones-editor.js
View file

@ -9,7 +9,10 @@ function editZones() {
modules.editZones = true; modules.editZones = true;
$("#zonesEditor").dialog({ $("#zonesEditor").dialog({
title: "Zones Editor", resizable: false, width: fitContent(), close: () => exitZonesManualAssignment("close"), title: "Zones Editor",
resizable: false,
width: fitContent(),
close: () => exitZonesManualAssignment("close"),
position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"} position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
}); });
@ -25,19 +28,37 @@ function editZones() {
document.getElementById("zonesExport").addEventListener("click", downloadZonesData); document.getElementById("zonesExport").addEventListener("click", downloadZonesData);
document.getElementById("zonesRemove").addEventListener("click", toggleEraseMode); document.getElementById("zonesRemove").addEventListener("click", toggleEraseMode);
body.addEventListener("click", function(ev) { body.addEventListener("click", function (ev) {
const el = ev.target, cl = el.classList, zone = el.parentNode.dataset.id; const el = ev.target,
if (cl.contains("culturePopulation")) {changePopulation(zone); return;} cl = el.classList,
if (cl.contains("icon-trash-empty")) {zoneRemove(zone); return;} zone = el.parentNode.dataset.id;
if (cl.contains("icon-eye")) {toggleVisibility(el); return;} if (cl.contains("culturePopulation")) {
if (cl.contains("icon-pin")) {toggleFog(zone, cl); return;} changePopulation(zone);
if (cl.contains("fillRect")) {changeFill(el); return;} return;
}
if (cl.contains("icon-trash-empty")) {
zoneRemove(zone);
return;
}
if (cl.contains("icon-eye")) {
toggleVisibility(el);
return;
}
if (cl.contains("icon-pin")) {
toggleFog(zone, cl);
return;
}
if (cl.contains("fillRect")) {
changeFill(el);
return;
}
if (customization) selectZone(el); if (customization) selectZone(el);
}); });
body.addEventListener("input", function(ev) { body.addEventListener("input", function (ev) {
const el = ev.target, zone = el.parentNode.dataset.id; const el = ev.target,
if (el.classList.contains("religionName")) zones.select("#"+zone).attr("data-description", el.value); zone = el.parentNode.dataset.id;
if (el.classList.contains("religionName")) zones.select("#" + zone).attr("data-description", el.value);
}); });
// add line for each zone // add line for each zone
@ -45,17 +66,17 @@ function editZones() {
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value; const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
let lines = ""; let lines = "";
zones.selectAll("g").each(function() { zones.selectAll("g").each(function () {
const c = this.dataset.cells ? this.dataset.cells.split(",").map(c => +c) : []; const c = this.dataset.cells ? this.dataset.cells.split(",").map(c => +c) : [];
const description = this.dataset.description; const description = this.dataset.description;
const fill = this.getAttribute("fill"); const fill = this.getAttribute("fill");
const area = d3.sum(c.map(i => pack.cells.area[i])) * (distanceScaleInput.value ** 2); const area = d3.sum(c.map(i => pack.cells.area[i])) * distanceScaleInput.value ** 2;
const rural = d3.sum(c.map(i => pack.cells.pop[i])) * populationRate.value; 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.value * urbanization.value; const urban = d3.sum(c.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization;
const population = rural + urban; const population = rural + urban;
const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}. Click to change`; const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}. Click to change`;
const inactive = this.style.display === "none"; const inactive = this.style.display === "none";
const focused = defs.select("#fog #focus"+this.id).size(); const focused = defs.select("#fog #focus" + this.id).size();
lines += `<div class="states" data-id="${this.id}" data-fill="${fill}" data-description="${description}" data-cells=${c.length} data-area=${area} data-population=${population}> lines += `<div class="states" data-id="${this.id}" data-fill="${fill}" data-description="${description}" data-cells=${c.length} data-area=${area} data-population=${population}>
<svg data-tip="Zone fill style. Click to change" width=".9em" height=".9em" style="margin-bottom:-1px"><rect x="0" y="0" width="100%" height="100%" fill="${fill}" class="fillRect pointer"></svg> <svg data-tip="Zone fill style. Click to change" width=".9em" height=".9em" style="margin-bottom:-1px"><rect x="0" y="0" width="100%" height="100%" fill="${fill}" class="fillRect pointer"></svg>
@ -67,8 +88,8 @@ function editZones() {
<span data-tip="${populationTip}" class="icon-male hide"></span> <span data-tip="${populationTip}" class="icon-male hide"></span>
<div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div> <div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
<span data-tip="Drag to raise or lower the zone" class="icon-resize-vertical hide"></span> <span data-tip="Drag to raise or lower the zone" class="icon-resize-vertical hide"></span>
<span data-tip="Toggle zone focus" class="icon-pin ${focused?'':' inactive'} hide ${c.length?'':' placeholder'}"></span> <span data-tip="Toggle zone focus" class="icon-pin ${focused ? "" : " inactive"} hide ${c.length ? "" : " placeholder"}"></span>
<span data-tip="Toggle zone visibility" class="icon-eye ${inactive?' inactive':''} hide ${c.length?'':' placeholder'}"></span> <span data-tip="Toggle zone visibility" class="icon-eye ${inactive ? " inactive" : ""} hide ${c.length ? "" : " placeholder"}"></span>
<span data-tip="Remove zone" class="icon-trash-empty hide"></span> <span data-tip="Remove zone" class="icon-trash-empty hide"></span>
</div>`; </div>`;
}); });
@ -76,8 +97,8 @@ function editZones() {
body.innerHTML = lines; body.innerHTML = lines;
// update footer // update footer
const totalArea = zonesFooterArea.dataset.area = graphWidth * graphHeight * (distanceScaleInput.value ** 2); const totalArea = (zonesFooterArea.dataset.area = graphWidth * graphHeight * distanceScaleInput.value ** 2);
const totalPop = (d3.sum(pack.cells.pop) + d3.sum(pack.burgs.filter(b => !b.removed).map(b => b.population)) * urbanization.value) * populationRate.value; const totalPop = (d3.sum(pack.cells.pop) + d3.sum(pack.burgs.filter(b => !b.removed).map(b => b.population)) * urbanization) * populationRate;
zonesFooterPopulation.dataset.population = totalPop; zonesFooterPopulation.dataset.population = totalPop;
zonesFooterNumber.innerHTML = zones.selectAll("g").size(); zonesFooterNumber.innerHTML = zones.selectAll("g").size();
zonesFooterCells.innerHTML = pack.cells.i.length; zonesFooterCells.innerHTML = pack.cells.i.length;
@ -88,48 +109,53 @@ function editZones() {
body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseenter", ev => zoneHighlightOn(ev))); body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseenter", ev => zoneHighlightOn(ev)));
body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseleave", ev => zoneHighlightOff(ev))); body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseleave", ev => zoneHighlightOff(ev)));
if (body.dataset.type === "percentage") {body.dataset.type = "absolute"; togglePercentageMode();} if (body.dataset.type === "percentage") {
body.dataset.type = "absolute";
togglePercentageMode();
}
$("#zonesEditor").dialog({width: fitContent()}); $("#zonesEditor").dialog({width: fitContent()});
} }
function zoneHighlightOn(event) { function zoneHighlightOn(event) {
const zone = event.target.dataset.id; const zone = event.target.dataset.id;
zones.select("#"+zone).style("outline", "1px solid red"); zones.select("#" + zone).style("outline", "1px solid red");
} }
function zoneHighlightOff(event) { function zoneHighlightOff(event) {
const zone = event.target.dataset.id; const zone = event.target.dataset.id;
zones.select("#"+zone).style("outline", null); zones.select("#" + zone).style("outline", null);
} }
$(body).sortable({items: "div.states", handle: ".icon-resize-vertical", containment: "parent", axis: "y", update: movezone}); $(body).sortable({items: "div.states", handle: ".icon-resize-vertical", containment: "parent", axis: "y", update: movezone});
function movezone(ev, ui) { function movezone(ev, ui) {
const zone = $("#"+ui.item.attr("data-id")); const zone = $("#" + ui.item.attr("data-id"));
const prev = $("#"+ui.item.prev().attr("data-id")); const prev = $("#" + ui.item.prev().attr("data-id"));
if (prev) {zone.insertAfter(prev); return;} if (prev) {
const next = $("#"+ui.item.next().attr("data-id")); zone.insertAfter(prev);
return;
}
const next = $("#" + ui.item.next().attr("data-id"));
if (next) zone.insertBefore(next); if (next) zone.insertBefore(next);
} }
function enterZonesManualAssignent() { function enterZonesManualAssignent() {
if (!layerIsOn("toggleZones")) toggleZones(); if (!layerIsOn("toggleZones")) toggleZones();
customization = 10; customization = 10;
document.querySelectorAll("#zonesBottom > button").forEach(el => el.style.display = "none"); document.querySelectorAll("#zonesBottom > button").forEach(el => (el.style.display = "none"));
document.getElementById("zonesManuallyButtons").style.display = "inline-block"; document.getElementById("zonesManuallyButtons").style.display = "inline-block";
zonesEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden")); zonesEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden"));
zonesFooter.style.display = "none"; zonesFooter.style.display = "none";
body.querySelectorAll("div > input, select, svg").forEach(e => e.style.pointerEvents = "none"); body.querySelectorAll("div > input, select, svg").forEach(e => (e.style.pointerEvents = "none"));
$("#zonesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}}); $("#zonesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
tip("Click to select a zone, drag to paint a zone", true); tip("Click to select a zone, drag to paint a zone", true);
viewbox.style("cursor", "crosshair") viewbox.style("cursor", "crosshair").on("click", selectZoneOnMapClick).call(d3.drag().on("start", dragZoneBrush)).on("touchmove mousemove", moveZoneBrush);
.on("click", selectZoneOnMapClick)
.call(d3.drag().on("start", dragZoneBrush))
.on("touchmove mousemove", moveZoneBrush);
body.querySelector("div").classList.add("selected"); body.querySelector("div").classList.add("selected");
zones.selectAll("g").each(function() {this.setAttribute("data-init", this.getAttribute("data-cells"));}); zones.selectAll("g").each(function () {
this.setAttribute("data-init", this.getAttribute("data-cells"));
});
} }
function selectZone(el) { function selectZone(el) {
@ -156,7 +182,7 @@ function editZones() {
if (!selection) return; if (!selection) return;
const selected = body.querySelector("div.selected"); const selected = body.querySelector("div.selected");
const zone = zones.select("#"+selected.dataset.id); const zone = zones.select("#" + selected.dataset.id);
const base = zone.attr("id") + "_"; // id generic part const base = zone.attr("id") + "_"; // id generic part
const dataCells = zone.attr("data-cells"); const dataCells = zone.attr("data-cells");
let cells = dataCells ? dataCells.split(",").map(i => +i) : []; let cells = dataCells ? dataCells.split(",").map(i => +i) : [];
@ -175,7 +201,10 @@ function editZones() {
selection.forEach(i => { selection.forEach(i => {
if (cells.includes(i)) return; if (cells.includes(i)) return;
cells.push(i); cells.push(i);
zone.append("polygon").attr("points", getPackPolygon(i)).attr("id", base + i); zone
.append("polygon")
.attr("points", getPackPolygon(i))
.attr("id", base + i);
}); });
} }
@ -191,10 +220,10 @@ function editZones() {
} }
function applyZonesManualAssignent() { function applyZonesManualAssignent() {
zones.selectAll("g").each(function() { zones.selectAll("g").each(function () {
if (this.dataset.cells) return; if (this.dataset.cells) return;
// all zone cells are removed // all zone cells are removed
unfog("focusZone"+this.id); unfog("focusZone" + this.id);
this.style.display = "block"; this.style.display = "block";
}); });
@ -204,15 +233,20 @@ function editZones() {
// restore initial zone cells // restore initial zone cells
function cancelZonesManualAssignent() { function cancelZonesManualAssignent() {
zones.selectAll("g").each(function() { zones.selectAll("g").each(function () {
const zone = d3.select(this); const zone = d3.select(this);
const dataCells = zone.attr("data-init"); const dataCells = zone.attr("data-init");
const cells = dataCells ? dataCells.split(",").map(i => +i) : []; const cells = dataCells ? dataCells.split(",").map(i => +i) : [];
zone.attr("data-cells", cells); zone.attr("data-cells", cells);
zone.selectAll("*").remove(); zone.selectAll("*").remove();
const base = zone.attr("id") + "_"; // id generic part const base = zone.attr("id") + "_"; // id generic part
zone.selectAll("*").data(cells).enter().append("polygon") zone
.attr("points", d => getPackPolygon(d)).attr("id", d => base + d); .selectAll("*")
.data(cells)
.enter()
.append("polygon")
.attr("points", d => getPackPolygon(d))
.attr("id", d => base + d);
}); });
exitZonesManualAssignment(); exitZonesManualAssignment();
@ -221,56 +255,68 @@ function editZones() {
function exitZonesManualAssignment(close) { function exitZonesManualAssignment(close) {
customization = 0; customization = 0;
removeCircle(); removeCircle();
document.querySelectorAll("#zonesBottom > button").forEach(el => el.style.display = "inline-block"); document.querySelectorAll("#zonesBottom > button").forEach(el => (el.style.display = "inline-block"));
document.getElementById("zonesManuallyButtons").style.display = "none"; document.getElementById("zonesManuallyButtons").style.display = "none";
zonesEditor.querySelectorAll(".hide:not(.show)").forEach(el => el.classList.remove("hidden")); zonesEditor.querySelectorAll(".hide:not(.show)").forEach(el => el.classList.remove("hidden"));
zonesFooter.style.display = "block"; zonesFooter.style.display = "block";
body.querySelectorAll("div > input, select, svg").forEach(e => e.style.pointerEvents = "all"); body.querySelectorAll("div > input, select, svg").forEach(e => (e.style.pointerEvents = "all"));
if(!close) $("#zonesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}}); if (!close) $("#zonesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
restoreDefaultEvents(); restoreDefaultEvents();
clearMainTip(); clearMainTip();
zones.selectAll("g").each(function() {this.removeAttribute("data-init");}); zones.selectAll("g").each(function () {
this.removeAttribute("data-init");
});
const selected = body.querySelector("div.selected"); const selected = body.querySelector("div.selected");
if (selected) selected.classList.remove("selected"); if (selected) selected.classList.remove("selected");
} }
function changeFill(el) { function changeFill(el) {
const fill = el.getAttribute("fill"); const fill = el.getAttribute("fill");
const callback = function(fill) { const callback = function (fill) {
el.setAttribute("fill", fill); el.setAttribute("fill", fill);
document.getElementById(el.parentNode.parentNode.dataset.id).setAttribute("fill", fill); document.getElementById(el.parentNode.parentNode.dataset.id).setAttribute("fill", fill);
} };
openPicker(fill, callback); openPicker(fill, callback);
} }
function toggleVisibility(el) { function toggleVisibility(el) {
const zone = zones.select("#"+el.parentNode.dataset.id); const zone = zones.select("#" + el.parentNode.dataset.id);
const inactive = zone.style("display") === "none"; const inactive = zone.style("display") === "none";
inactive ? zone.style("display", "block") : zone.style("display", "none"); inactive ? zone.style("display", "block") : zone.style("display", "none");
el.classList.toggle("inactive"); el.classList.toggle("inactive");
} }
function toggleFog(z, cl) { function toggleFog(z, cl) {
const dataCells = zones.select("#"+z).attr("data-cells"); const dataCells = zones.select("#" + z).attr("data-cells");
if (!dataCells) return; if (!dataCells) return;
const path = "M" + dataCells.split(",").map(c => getPackPolygon(+c)).join("M") + "Z", id = "focusZone"+z; const path =
"M" +
dataCells
.split(",")
.map(c => getPackPolygon(+c))
.join("M") +
"Z",
id = "focusZone" + z;
cl.contains("inactive") ? fog(id, path) : unfog(id); cl.contains("inactive") ? fog(id, path) : unfog(id);
cl.toggle("inactive"); cl.toggle("inactive");
} }
function toggleLegend() { function toggleLegend() {
if (legend.selectAll("*").size()) {clearLegend(); return;}; // hide legend if (legend.selectAll("*").size()) {
clearLegend();
return;
} // hide legend
const data = []; const data = [];
zones.selectAll("g").each(function() { zones.selectAll("g").each(function () {
const id = this.dataset.id; const id = this.dataset.id;
const description = this.dataset.description; const description = this.dataset.description;
const fill = this.getAttribute("fill"); const fill = this.getAttribute("fill");
data.push([id, fill, description]) data.push([id, fill, description]);
}); });
drawLegend("Zones", data); drawLegend("Zones", data);
@ -283,12 +329,11 @@ function editZones() {
const totalArea = +zonesFooterArea.dataset.area; const totalArea = +zonesFooterArea.dataset.area;
const totalPopulation = +zonesFooterPopulation.dataset.population; const totalPopulation = +zonesFooterPopulation.dataset.population;
body.querySelectorAll(":scope > div").forEach(function(el) { body.querySelectorAll(":scope > div").forEach(function (el) {
el.querySelector(".stateCells").innerHTML = rn(+el.dataset.cells / totalCells * 100, 2) + "%"; el.querySelector(".stateCells").innerHTML = rn((+el.dataset.cells / totalCells) * 100, 2) + "%";
el.querySelector(".biomeArea").innerHTML = rn(+el.dataset.area / totalArea * 100, 2) + "%"; el.querySelector(".biomeArea").innerHTML = rn((+el.dataset.area / totalArea) * 100, 2) + "%";
el.querySelector(".culturePopulation").innerHTML = rn(+el.dataset.population / totalPopulation * 100, 2) + "%"; el.querySelector(".culturePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100, 2) + "%";
}); });
} else { } else {
body.dataset.type = "absolute"; body.dataset.type = "absolute";
zonesEditorAddLines(); zonesEditorAddLines();
@ -298,7 +343,7 @@ function editZones() {
function addZonesLayer() { function addZonesLayer() {
const id = getNextId("zone"); const id = getNextId("zone");
const description = "Unknown zone"; const description = "Unknown zone";
const fill = "url(#hatch" + id.slice(4)%14 + ")"; const fill = "url(#hatch" + (id.slice(4) % 14) + ")";
zones.append("g").attr("id", id).attr("data-description", description).attr("data-cells", "").attr("fill", fill); zones.append("g").attr("id", id).attr("data-description", description).attr("data-cells", "").attr("fill", fill);
const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value; const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
@ -323,9 +368,9 @@ function editZones() {
function downloadZonesData() { function downloadZonesData() {
const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value; const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value;
let data = "Id,Fill,Description,Cells,Area "+unit+",Population\n"; // headers let data = "Id,Fill,Description,Cells,Area " + unit + ",Population\n"; // headers
body.querySelectorAll(":scope > div").forEach(function(el) { body.querySelectorAll(":scope > div").forEach(function (el) {
data += el.dataset.id + ","; data += el.dataset.id + ",";
data += el.dataset.fill + ","; data += el.dataset.fill + ",";
data += el.dataset.description + ","; data += el.dataset.description + ",";
@ -343,68 +388,83 @@ function editZones() {
} }
function changePopulation(zone) { function changePopulation(zone) {
const dataCells = zones.select("#"+zone).attr("data-cells"); const dataCells = zones.select("#" + zone).attr("data-cells");
const cells = dataCells ? dataCells.split(",").map(i => +i).filter(i => pack.cells.h[i] >= 20) : []; const cells = dataCells
if (!cells.length) {tip("Zone does not have any land cells, cannot change population", false, "error"); return;} ? dataCells
.split(",")
.map(i => +i)
.filter(i => pack.cells.h[i] >= 20)
: [];
if (!cells.length) {
tip("Zone does not have any land cells, cannot change population", false, "error");
return;
}
const burgs = pack.burgs.filter(b => !b.removed && cells.includes(b.cell)); 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.value); 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.value * urbanization.value); const urban = rn(d3.sum(cells.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization);
const total = rural + urban; const total = rural + urban;
const l = n => Number(n).toLocaleString(); const l = n => Number(n).toLocaleString();
alertMessage.innerHTML = ` alertMessage.innerHTML = `
Rural: <input type="number" min=0 step=1 id="ruralPop" value=${rural} style="width:6em"> Rural: <input type="number" min=0 step=1 id="ruralPop" value=${rural} style="width:6em">
Urban: <input type="number" min=0 step=1 id="urbanPop" value=${urban} style="width:6em" ${burgs.length?'':"disabled"}> Urban: <input type="number" min=0 step=1 id="urbanPop" value=${urban} style="width:6em" ${burgs.length ? "" : "disabled"}>
<p>Total population: ${l(total)} ⇒ <span id="totalPop">${l(total)}</span> (<span id="totalPopPerc">100</span>%)</p>`; <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; const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
if (isNaN(totalNew)) return; if (isNaN(totalNew)) return;
totalPop.innerHTML = l(totalNew); totalPop.innerHTML = l(totalNew);
totalPopPerc.innerHTML = rn(totalNew / total * 100); totalPopPerc.innerHTML = rn((totalNew / total) * 100);
} };
ruralPop.oninput = () => update(); ruralPop.oninput = () => update();
urbanPop.oninput = () => update(); urbanPop.oninput = () => update();
$("#alert").dialog({ $("#alert").dialog({
resizable: false, title: "Change zone population", width: "24em", buttons: { resizable: false,
Apply: function() {applyPopulationChange(); $(this).dialog("close");}, title: "Change zone population",
Cancel: function() {$(this).dialog("close");} width: "24em",
}, position: {my: "center", at: "center", of: "svg"} buttons: {
Apply: function () {
applyPopulationChange();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
position: {my: "center", at: "center", of: "svg"}
}); });
function applyPopulationChange() { function applyPopulationChange() {
const ruralChange = ruralPop.value / rural; const ruralChange = ruralPop.value / rural;
if (isFinite(ruralChange) && ruralChange !== 1) { 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) { if (!isFinite(ruralChange) && +ruralPop.value > 0) {
const points = ruralPop.value / populationRate.value; const points = ruralPop.value / populationRate;
const pop = rn(points / cells.length); 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; const urbanChange = urbanPop.value / urban;
if (isFinite(urbanChange) && urbanChange !== 1) { if (isFinite(urbanChange) && urbanChange !== 1) {
burgs.forEach(b => b.population = rn(b.population * urbanChange, 4)); burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
} }
if (!isFinite(urbanChange) && +urbanPop.value > 0) { 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); const population = rn(points / burgs.length, 4);
burgs.forEach(b => b.population = population); burgs.forEach(b => (b.population = population));
} }
zonesEditorAddLines(); zonesEditorAddLines();
} }
} }
function zoneRemove(zone) { function zoneRemove(zone) {
zones.select("#"+zone).remove(); zones.select("#" + zone).remove();
unfog("focusZone"+zone); unfog("focusZone" + zone);
zonesEditorAddLines(); zonesEditorAddLines();
} }
} }