+
@@ -143,7 +149,9 @@ function editStates() {
${si(population)}
-
+
${s.cells}
@@ -200,7 +208,15 @@ function editStates() {
if (customization || !state) return;
const d = regions.select("#state" + state).attr("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)");
+ 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)");
const l = path.node().getTotalLength(),
dur = (l + 5000) / 2;
@@ -564,19 +580,20 @@ function editStates() {
function showStatesChart() {
// build hierarchy tree
- const data = pack.states.filter(s => !s.removed);
+ const statesData = pack.states.filter(s => !s.removed);
+ if (statesData.length < 2) return tip("There are no states to show", false, "error");
+
const root = d3
.stratify()
.id(d => d.i)
- .parentId(d => (d.i ? 0 : null))(data)
+ .parentId(d => (d.i ? 0 : null))(statesData)
.sum(d => d.area)
.sort((a, b) => b.value - a.value);
- const width = 150 + 200 * uiSizeOutput.value,
- height = 150 + 200 * uiSizeOutput.value;
+ const size = 150 + 200 * uiSizeOutput.value;
const margin = {top: 0, right: -50, bottom: 0, left: -50};
- const w = width - margin.left - margin.right;
- const h = height - margin.top - margin.bottom;
+ const w = size - margin.left - margin.right;
+ const h = size - margin.top - margin.bottom;
const treeLayout = d3.pack().size([w, h]).padding(3);
// prepare svg
@@ -588,7 +605,16 @@ function editStates() {
`;
alertMessage.innerHTML += `
`;
- 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");
+
+ const svg = d3
+ .select("#alertMessage")
+ .insert("svg", "#statesInfo")
+ .attr("id", "statesTree")
+ .attr("width", size)
+ .attr("height", size)
+ .style("font-family", "Almendra SC")
+ .attr("text-anchor", "middle")
+ .attr("dominant-baseline", "central");
const graph = svg.append("g").attr("transform", `translate(-50, 0)`);
document.getElementById("statesTreeType").addEventListener("change", updateChart);
@@ -632,7 +658,16 @@ function editStates() {
const urban = rn(d.data.urban * populationRate * urbanization);
const option = statesTreeType.value;
- const value = option === "area" ? "Area: " + area : option === "rural" ? "Rural population: " + si(rural) : option === "urban" ? "Urban population: " + si(urban) : option === "burgs" ? "Burgs number: " + d.data.burgs : "Population: " + si(rural + urban);
+ const 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);
statesInfo.innerHTML = `${state}. ${value}`;
stateHighlightOn(ev);
@@ -646,7 +681,16 @@ function editStates() {
}
function updateChart() {
- 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;
+ 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;
root.sum(value);
node.data(treeLayout(root).leaves());
@@ -731,7 +775,11 @@ function editStates() {
$("#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);
- viewbox.style("cursor", "crosshair").on("click", selectStateOnMapClick).call(d3.drag().on("start", dragStateBrush)).on("touchmove mousemove", moveStateBrush);
+ viewbox
+ .style("cursor", "crosshair")
+ .on("click", selectStateOnMapClick)
+ .call(d3.drag().on("start", dragStateBrush))
+ .on("touchmove mousemove", moveStateBrush);
body.querySelector("div").classList.add("selected");
}
@@ -881,7 +929,8 @@ function editStates() {
const center = burgCell ? burgCell : provCells[0];
const burg = burgCell ? cells.burg[burgCell] : 0;
- const name = burgCell && P(0.7) ? getAdjective(pack.burgs[burg].name) : getAdjective(states[state].name) + " " + provinces[initProv].name.split(" ").slice(-1)[0];
+ const name =
+ burgCell && P(0.7) ? getAdjective(pack.burgs[burg].name) : getAdjective(states[state].name) + " " + provinces[initProv].name.split(" ").slice(-1)[0];
const formName = name.split(" ").length > 1 ? provinces[initProv].formName : rw(form);
const fullName = name + " " + formName;
const color = getMixedColor(states[state].color);
@@ -985,7 +1034,22 @@ function editStates() {
cells.state[center] = newState;
cells.province[center] = 0;
- states.push({i: newState, name, diplomacy, provinces: [], color, expansionism: 0.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.defineStateForms([newState]);
adjustProvinces([cells.province[center]]);
@@ -1028,7 +1092,8 @@ function editStates() {
function downloadStatesData() {
const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value;
- let data = "Id,State,Full Name,Form,Color,Capital,Culture,Type,Expansionism,Cells,Burgs,Area " + unit + ",Total Population,Rural Population,Urban Population\n"; // headers
+ let data =
+ "Id,State,Full Name,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) {
const key = parseInt(el.dataset.id);
const statePack = pack.states[key];