-
+ lines += `
`;
}
@@ -145,7 +152,15 @@ function overviewMilitary() {
if (!layerIsOn("toggleStates")) 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;
@@ -199,9 +214,9 @@ function overviewMilitary() {
function militaryCustomize() {
const types = ["melee", "ranged", "mounted", "machinery", "naval", "armored", "aviation", "magical"];
- const table = document.getElementById("militaryOptions").querySelector("tbody");
+ const tableBody = document.getElementById("militaryOptions").querySelector("tbody");
removeUnitLines();
- options.military.map(u => addUnitLine(u));
+ options.military.map(unit => addUnitLine(unit));
$("#militaryOptions").dialog({
title: "Edit Military Units",
@@ -218,43 +233,100 @@ function overviewMilitary() {
},
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[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"));
}
});
+ if (modules.overviewMilitaryCustomize) return;
+ modules.overviewMilitaryCustomize = true;
+
+ tableBody.addEventListener("click", event => {
+ const el = event.target;
+ if (el.tagName !== "BUTTON") return;
+ const type = el.dataset.type;
+
+ if (type === "icon") return selectIcon(el.innerHTML, v => (el.innerHTML = v));
+ if (type === "biomes") {
+ const {i, name, color} = biomesData;
+ const biomesArray = Array(i.length).fill(null);
+ const biomes = biomesArray.map((_, i) => ({i, name: name[i], color: color[i]}));
+ return selectLimitation(el, biomes, v => (el.dataset.value = v));
+ }
+ if (type === "states") return selectLimitation(el, pack.states, v => (el.dataset.value = v));
+ if (type === "cultures") return selectLimitation(el, pack.cultures, v => (el.dataset.value = v));
+ if (type === "religions") return selectLimitation(el, pack.religions, v => (el.dataset.value = v));
+ });
+
function removeUnitLines() {
- table.querySelectorAll("tr").forEach(el => el.remove());
+ tableBody.querySelectorAll("tr").forEach(el => el.remove());
}
- function addUnitLine(u) {
+ function addUnitLine(unit) {
const row = document.createElement("tr");
- row.innerHTML = `
|
-
|
-
|
-
|
-
|
-
|
-
|
+ const typeOptions = types.map(t => `
`).join(" ");
+ const getLimitCell = limitBy =>
+ `
| `;
+
+ row.innerHTML = `
|
+
|
+ ${getLimitCell("biomes")}
+ ${getLimitCell("states")}
+ ${getLimitCell("cultures")}
+ ${getLimitCell("religions")}
+
|
+
|
+
|
+
|
+
|
-
- |
+
+
| `;
- row.querySelector("button").addEventListener("click", function (e) {
- selectIcon(this.innerHTML, v => (this.innerHTML = v));
- });
- table.appendChild(row);
+ tableBody.appendChild(row);
}
function restoreDefaultUnits() {
removeUnitLines();
- Military.getDefaultOptions().map(u => addUnitLine(u));
+ Military.getDefaultOptions().map(unit => addUnitLine(unit));
+ }
+
+ function selectLimitation(el, data, callback) {
+ const limitBy = el.dataset.type;
+ const initial = el.dataset.value ? el.dataset.value.split(",").map(v => +v) : [];
+
+ const lines = data.slice(1).map(
+ ({i, name, fullName, color}) =>
+ `
| ⬤ |
+
+
+ |
`
+ );
+ alertMessage.innerHTML = `
Limit unit by ${limitBy}:
+
`;
+
+ $("#alert").dialog({
+ width: fitContent(),
+ title: `Limit unit`,
+ buttons: {
+ Apply: function () {
+ callback(selected.join(","));
+ $(this).dialog("close");
+ },
+ Close: function () {
+ callback(initial.join(","));
+ $(this).dialog("close");
+ }
+ }
+ });
}
function applyMilitaryOptions() {
- const unitLines = Array.from(table.querySelectorAll("tr"));
+ const unitLines = Array.from(tableBody.querySelectorAll("tr"));
const names = unitLines.map(r => r.querySelector("input").value.replace(/[&\/\\#, +()$~%.'":*?<>{}]/g, "_"));
if (new Set(names).size !== names.length) {
tip("All units should have unique names", false, "error");
@@ -263,14 +335,22 @@ function overviewMilitary() {
$("#militaryOptions").dialog("close");
options.military = unitLines.map((r, i) => {
- const [icon, name, rural, urban, crew, power, type, separate] = Array.from(r.querySelectorAll("input, select, button")).map(d => {
- let value = d.value;
- if (d.type === "number") value = +d.value || 0;
- if (d.type === "checkbox") value = +d.checked || 0;
- if (d.type === "button") value = d.innerHTML || "⠀";
+ const elements = Array.from(r.querySelectorAll("input, button, select"));
+ const [icon, name, biomes, states, cultures, religions, rural, urban, crew, power, type, separate] = elements.map(el => {
+ let value = el.value;
+ if (el.dataset.type === "icon") value = el.innerHTML || "⠀";
+ else if (el.dataset.type) value = el.dataset.value ? el.dataset.value.split(",").map(v => parseInt(v)) : [];
+ else if (el.type === "number") value = +el.value || 0;
+ else if (el.type === "checkbox") value = +el.checked || 0;
return value;
});
- return {icon, name: names[i], rural, urban, crew, power, type, separate};
+
+ const unit = {icon, name: names[i], rural, urban, crew, power, type, separate};
+ if (biomes.length) unit.biomes = biomes;
+ if (states.length) unit.states = states;
+ if (cultures.length) unit.cultures = cultures;
+ if (religions.length) unit.religions = religions;
+ return unit;
});
localStorage.setItem("military", JSON.stringify(options.military));
Military.generate();