Burgs to be removed: ${
- burgsToRemove.length
- }. This action cannot be reverted`,
- confirm: "Remove",
- onConfirm: () => {
- $("#burgEditor").dialog("close");
- hideGroupSection();
- burgsToRemove.forEach(b => removeBurg(b));
-
- if (!basic && !capital) {
- const labelG = document.querySelector("#burgLabels > #" + group.id);
- const iconG = document.querySelector("#burgIcons > #" + group.id);
- const anchorG = document.querySelector("#anchors > #" + group.id);
- if (labelG) labelG.remove();
- if (iconG) iconG.remove();
- if (anchorG) anchorG.remove();
- }
- }
- });
- }
-
function changeName() {
const id = +elSelected.attr("data-id");
pack.burgs[id].name = burgName.value;
@@ -266,6 +138,12 @@ function editBurg(id) {
changeName();
}
+ function changeGroup() {
+ const id = +elSelected.attr("data-id");
+ pack.burgs[id].group = this.value;
+ moveBurgToGroup(id, this.value);
+ }
+
function changeType() {
const id = +elSelected.attr("data-id");
pack.burgs[id].type = this.value;
diff --git a/modules/ui/burg-group-editor.js b/modules/ui/burg-group-editor.js
new file mode 100644
index 00000000..bcdb5d80
--- /dev/null
+++ b/modules/ui/burg-group-editor.js
@@ -0,0 +1,84 @@
+"use strict";
+
+function editBurgGroups() {
+ if (customization) return;
+ if (!layerIsOn("toggleBurgs")) toggleBurgs();
+
+ addLines();
+
+ $("#burgGroupsEditor").dialog({
+ title: "Edit Burg groups",
+ resizable: false,
+ position: {my: "left top", at: "left+10 top+140", of: "#map"}
+ });
+
+ if (modules.editBurgGroups) return;
+ modules.editBurgGroups = true;
+
+ // add listeners
+ byId("burgGroupsEditorAdd").addEventListener("click", addGroup);
+ byId("burgGroupsEditorBody").on("click", ev => {
+ const group = ev.target.closest(".states")?.dataset.id;
+ if (ev.target.classList.contains("editStyle")) editStyle("burgs", group);
+ else if (ev.target.classList.contains("removeGroup")) removeGroup(group);
+ });
+
+ function addLines() {
+ byId("burgGroupsEditorBody").innerHTML = "";
+
+ const lines = Array.from(burgs.selectAll("g")._groups[0]).map(el => {
+ const count = el.children.length;
+ return /* html */ `
+ ${el.id} (${count})
+
+
+
+
+
`;
+ });
+
+ byId("burgGroupsEditorBody").innerHTML = lines.join("");
+ }
+
+ const DEFAULT_GROUPS = ["roads", "trails", "seaburgs"];
+
+ function addGroup() {
+ prompt("Type group name", {default: "burg-group-new"}, v => {
+ let group = v
+ .toLowerCase()
+ .replace(/ /g, "_")
+ .replace(/[^\w\s]/gi, "");
+
+ if (!group) return tip("Invalid group name", false, "error");
+ if (!group.startsWith("burg-")) group = "burg-" + group;
+ if (byId(group)) return tip("Element with this name already exists. Provide a unique name", false, "error");
+ if (Number.isFinite(+group.charAt(0))) return tip("Group name should start with a letter", false, "error");
+
+ burgs
+ .append("g")
+ .attr("id", group)
+ .attr("stroke", "#000000")
+ .attr("stroke-width", 0.5)
+ .attr("stroke-dasharray", "1 0.5")
+ .attr("stroke-linecap", "butt");
+ byId("burgGroup")?.options.add(new Option(group, group));
+ addLines();
+
+ byId("burgCreatorGroupSelect").options.add(new Option(group, group));
+ });
+ }
+
+ function removeGroup(group) {
+ confirmationDialog({
+ title: "Remove burg group",
+ message:
+ "Are you sure you want to remove the entire burg group? All burgs in this group will be removed. This action can't be reverted",
+ confirm: "Remove",
+ onConfirm: () => {
+ pack.burgs.filter(r => r.group === group).forEach(Burgs.remove);
+ if (!DEFAULT_GROUPS.includes(group)) burgs.select(`#${group}`).remove();
+ addLines();
+ }
+ });
+ }
+}
diff --git a/modules/ui/burgs-overview.js b/modules/ui/burgs-overview.js
index a13bcc02..f3747da7 100644
--- a/modules/ui/burgs-overview.js
+++ b/modules/ui/burgs-overview.js
@@ -24,7 +24,7 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
// add listeners
byId("burgsOverviewRefresh").addEventListener("click", refreshBurgsEditor);
- byId("burgsGroupsEditorButton").addEventListener("click", openBurgGroupsEditor);
+ byId("burgsGroupsEditorButton").addEventListener("click", editBurgGroups);
byId("burgsChart").addEventListener("click", showBurgsChart);
byId("burgsFilterState").addEventListener("change", burgsOverviewAddLines);
byId("burgsFilterCulture").addEventListener("change", burgsOverviewAddLines);
@@ -89,29 +89,24 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
data-state="${state}"
data-province="${province}"
data-culture="${culture}"
+ data-group="${b.group}"
data-population=${population}
data-features="${features}"
>
-
-
-
-
+
+
+
+
+
-
+
-
+ data-tip="${b.capital ? " This burg is a state capital" : "This burg is a NOT state capital"}"
+ class="icon-star-empty${b.capital ? "" : " inactive"}" style="padding: 0 1px;">
+
el.addEventListener("mouseenter", ev => burgHighlightOn(ev)));
body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseleave", ev => burgHighlightOff(ev)));
- body.querySelectorAll("div > input.burgName").forEach(el => el.addEventListener("input", changeBurgName));
body.querySelectorAll("div > span.icon-dot-circled").forEach(el => el.addEventListener("click", zoomIntoBurg));
- body.querySelectorAll("div > select.stateCulture").forEach(el => el.addEventListener("change", changeBurgCulture));
- body
- .querySelectorAll("div > input.burgPopulation")
- .forEach(el => el.addEventListener("change", changeBurgPopulation));
- body
- .querySelectorAll("div > span.icon-star-empty")
- .forEach(el => el.addEventListener("click", toggleCapitalStatus));
- body.querySelectorAll("div > span.icon-anchor").forEach(el => el.addEventListener("click", togglePortStatus));
body.querySelectorAll("div > span.locks").forEach(el => el.addEventListener("click", toggleBurgLockStatus));
body.querySelectorAll("div > span.icon-pencil").forEach(el => el.addEventListener("click", openBurgEditor));
body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.addEventListener("click", triggerBurgRemove));
@@ -165,15 +151,6 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
burgLabels.selectAll("text.drag").classed("drag", false);
}
- function changeBurgName() {
- if (this.value == "") tip("Please provide a name", false, "error");
- const burg = +this.parentNode.dataset.id;
- pack.burgs[burg].name = this.value;
- this.parentNode.dataset.name = this.value;
- const label = document.querySelector("#burgLabels [data-id='" + burg + "']");
- if (label) label.innerHTML = this.value;
- }
-
function zoomIntoBurg() {
const burg = +this.parentNode.dataset.id;
const label = document.querySelector("#burgLabels [data-id='" + burg + "']");
@@ -182,42 +159,6 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
zoomTo(x, y, 8, 2000);
}
- function changeBurgCulture() {
- const burg = +this.parentNode.dataset.id;
- const v = +this.value;
- pack.burgs[burg].culture = v;
- this.parentNode.dataset.culture = pack.cultures[v].name;
- }
-
- function changeBurgPopulation() {
- const burg = +this.parentNode.dataset.id;
- if (this.value == "" || isNaN(+this.value)) {
- tip("Please provide an integer number (like 10000, not 10K)", false, "error");
- this.value = si(pack.burgs[burg].population * populationRate * urbanization);
- return;
- }
- pack.burgs[burg].population = this.value / populationRate / urbanization;
- this.parentNode.dataset.population = this.value;
- this.value = si(this.value);
-
- const population = [];
- body.querySelectorAll(":scope > div").forEach(el => population.push(+getInteger(el.dataset.population)));
- burgsFooterPopulation.innerHTML = si(d3.mean(population));
- }
-
- function toggleCapitalStatus() {
- const burg = +this.parentNode.parentNode.dataset.id;
- toggleCapital(burg);
- burgsOverviewAddLines();
- }
-
- function togglePortStatus() {
- const burg = +this.parentNode.parentNode.dataset.id;
- togglePort(burg);
- if (this.classList.contains("inactive")) this.classList.remove("inactive");
- else this.classList.add("inactive");
- }
-
function toggleBurgLockStatus() {
const burgId = +this.parentNode.dataset.id;
@@ -303,30 +244,6 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
if (addNewBurg.classList.contains("pressed")) addNewBurg.classList.remove("pressed");
}
- function openBurgGroupsEditor() {
- $("#burgGroupsEditor").dialog({
- title: "Edit Burgs Groups",
- resizable: false,
- position: {my: "center", at: "center", of: "svg"},
- buttons: {
- Apply: applyMilitaryOptions,
- Restore: restoreDefaultUnits,
- Cancel: function () {
- $(this).dialog("close");
- }
- },
- open: function () {
- const buttons = $(this).dialog("widget").find(".ui-dialog-buttonset > button");
- buttons[0].addEventListener("mousemove", () =>
- tip("Apply military units settings. All forces will be recalculated!")
- );
- buttons[1].addEventListener("mousemove", () => tip("Add new military unit to the table"));
- buttons[2].addEventListener("mousemove", () => tip("Restore default military units and settings"));
- buttons[3].addEventListener("mousemove", () => tip("Close the window without saving the changes"));
- }
- });
- }
-
function showBurgsChart() {
// build hierarchy tree
const states = pack.states.map(s => {
@@ -506,7 +423,7 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
}
function downloadBurgsData() {
- let data = `Id,Burg,Province,Province Full Name,State,State Full Name,Culture,Religion,Population,X,Y,Latitude,Longitude,Elevation (${heightUnit.value}),Temperature,Temperature likeness,Capital,Port,Citadel,Walls,Plaza,Temple,Shanty Town,Emblem,City Generator Link\n`; // headers
+ let data = `Id,Burg,Province,Province Full Name,State,State Full Name,Culture,Religion,Group,Population,X,Y,Latitude,Longitude,Elevation (${heightUnit.value}),Temperature,Temperature likeness,Capital,Port,Citadel,Walls,Plaza,Temple,Shanty Town,Emblem,City Generator Link\n`; // headers
const valid = pack.burgs.filter(b => b.i && !b.removed); // all valid burgs
valid.forEach(b => {
@@ -519,6 +436,7 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
data += pack.states[b.state].fullName + ",";
data += pack.cultures[b.culture].name + ",";
data += pack.religions[pack.cells.religion[b.cell]].name + ",";
+ data += b.group + ",";
data += rn(b.population * populationRate * urbanization) + ",";
// add geography data
@@ -633,7 +551,7 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
const activeBurgs = pack.burgs.filter(b => b.i && !b.removed);
const allLocked = activeBurgs.every(burg => burg.lock);
- pack.burgs.forEach(burg => {
+ activeBurgs.forEach(burg => {
burg.lock = !allLocked;
});