diff --git a/modules/ui/military-overview.js b/modules/ui/military-overview.js index 8512e58d..a11fecb1 100644 --- a/modules/ui/military-overview.js +++ b/modules/ui/military-overview.js @@ -255,29 +255,48 @@ function overviewMilitary() { 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)); + return selectLimitation(el, biomes); } - 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)); + if (type === "states") return selectLimitation(el, pack.states); + if (type === "cultures") return selectLimitation(el, pack.cultures); + if (type === "religions") return selectLimitation(el, pack.religions); }); function removeUnitLines() { tableBody.querySelectorAll("tr").forEach(el => el.remove()); } + function getLimitValue(attr) { + return attr?.join(",") || ""; + } + + function getLimitText(attr) { + return attr?.length ? "some" : "all"; + } + + function getLimitTip(attr, data) { + if (!attr || !attr.length) return ""; + return attr.map(i => data?.[i]?.name || "").join(", "); + } + function addUnitLine(unit) { const row = document.createElement("tr"); const typeOptions = types.map(t => ``).join(" "); - const getLimitCell = limitBy => - ``; + const getLimitButton = attr => + ``; row.innerHTML = ` - ${getLimitCell("biomes")} - ${getLimitCell("states")} - ${getLimitCell("cultures")} - ${getLimitCell("religions")} + ${getLimitButton("biomes")} + ${getLimitButton("states")} + ${getLimitButton("cultures")} + ${getLimitButton("religions")} @@ -295,30 +314,43 @@ function overviewMilitary() { 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) : []; + function selectLimitation(el, data) { + const type = el.dataset.type; + const value = el.dataset.value; + const initial = value ? value.split(",").map(v => +v) : []; const lines = data.slice(1).map( ({i, name, fullName, color}) => ` - + ` ); - alertMessage.innerHTML = `Limit unit by ${limitBy}: -
${lines.join("")}
`; + alertMessage.innerHTML = `Limit unit by ${type}:
${lines.join("")}
`; $("#alert").dialog({ width: fitContent(), title: `Limit unit`, buttons: { + Invert: function () { + alertMessage.querySelectorAll("input").forEach(el => (el.checked = !el.checked)); + }, Apply: function () { - callback(selected.join(",")); + const inputs = Array.from(alertMessage.querySelectorAll("input")); + const selected = inputs.reduce((acc, input, index) => { + if (input.checked) acc.push(index + 1); + return acc; + }, []); + + if (!selected.length) return tip("Select at least one element", false, "error"); + + const allAreSelected = selected.length === inputs.length; + el.dataset.value = allAreSelected ? "" : selected.join(","); + el.innerHTML = allAreSelected ? "all" : "some"; + el.setAttribute("title", getLimitTip(selected, data)); $(this).dialog("close"); }, - Close: function () { - callback(initial.join(",")); + Cancel: function () { $(this).dialog("close"); } } @@ -337,19 +369,19 @@ function overviewMilitary() { options.military = unitLines.map((r, i) => { 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; + const {type, value} = el.dataset || {}; + if (type === "icon") return el.innerHTML || "⠀"; + if (type) return value ? value.split(",").map(v => parseInt(v)) : null; + if (el.type === "number") return +el.value || 0; + if (el.type === "checkbox") return +el.checked || 0; + return el.value; }); 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; + if (biomes) unit.biomes = biomes; + if (states) unit.states = states; + if (cultures) unit.cultures = cultures; + if (religions) unit.religions = religions; return unit; }); localStorage.setItem("military", JSON.stringify(options.military));