From 01904f21af5988725683d29e3b4b570e14bc6e40 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sun, 10 Oct 2021 00:59:51 +0300 Subject: [PATCH] limit units - start --- index.html | 4 + modules/ui/military-overview.js | 140 +++++++++++++++++++++++++------- 2 files changed, 114 insertions(+), 30 deletions(-) diff --git a/index.html b/index.html index 6765f8b0..2e22a55c 100644 --- a/index.html +++ b/index.html @@ -3352,6 +3352,10 @@ Icon Unit name + Biomes + States + Cultures + Religions Rural Urban Crew diff --git a/modules/ui/military-overview.js b/modules/ui/military-overview.js index 95f897cb..8512e58d 100644 --- a/modules/ui/military-overview.js +++ b/modules/ui/military-overview.js @@ -75,14 +75,21 @@ function overviewMilitary() { const sortData = options.military.map(u => `data-${u.name}="${getForces(u)}"`).join(" "); const lineData = options.military.map(u => `
${getForces(u)}
`).join(" "); - lines += `
- + lines += `
+ ${lineData}
${si(total)}
${si(population)}
${rn(rate, 2)}%
- +
`; } @@ -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}: +
${lines.join("")}
`; + + $("#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();