backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-17 09:41:24 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

limit units - continue

Browse source
This commit is contained in:
Azgaar 2021-10-10 17:36:17 +03:00
parent 01904f21af
commit b202a58db9
1 changed files with 61 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

90
modules/ui/military-overview.js
View file

@ -255,29 +255,48 @@ function overviewMilitary() {
const {i, name, color} = biomesData; const {i, name, color} = biomesData;
const biomesArray = Array(i.length).fill(null); const biomesArray = Array(i.length).fill(null);
const biomes = biomesArray.map((_, i) => ({i, name: name[i], color: color[i]})); 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 === "states") return selectLimitation(el, pack.states);
if (type === "cultures") return selectLimitation(el, pack.cultures, v => (el.dataset.value = v)); if (type === "cultures") return selectLimitation(el, pack.cultures);
if (type === "religions") return selectLimitation(el, pack.religions, v => (el.dataset.value = v)); if (type === "religions") return selectLimitation(el, pack.religions);
}); });
function removeUnitLines() { function removeUnitLines() {
tableBody.querySelectorAll("tr").forEach(el => el.remove()); 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) { function addUnitLine(unit) {
const row = document.createElement("tr"); const row = document.createElement("tr");
const typeOptions = types.map(t => `<option ${unit.type === t ? "selected" : ""} value="${t}">${t}</option>`).join(" "); const typeOptions = types.map(t => `<option ${unit.type === t ? "selected" : ""} value="${t}">${t}</option>`).join(" ");
const getLimitCell = limitBy => const getLimitButton = attr =>
`<td><button data-type="${limitBy}" data-value="${unit[limitBy]?.join(",") || ""}">${unit[limitBy]?.length ? "some" : "all"}</button></td>`; `<button
data-tip="Select allowed ${attr}"
data-type="${attr}"
title="${getLimitTip(unit[attr], pack[attr])}"
data-value="${getLimitValue(unit[attr])}">
${getLimitText(unit[attr])}
</button>`;
row.innerHTML = `<td><button data-type="icon" data-tip="Click to select unit icon">${unit.icon || " "}</button></td> row.innerHTML = `<td><button data-type="icon" data-tip="Click to select unit icon">${unit.icon || " "}</button></td>
<td><input data-tip="Type unit name. If name is changed for existing unit, old unit will be replaced" value="${unit.name}"></td> <td><input data-tip="Type unit name. If name is changed for existing unit, old unit will be replaced" value="${unit.name}"></td>
${getLimitCell("biomes")} <td>${getLimitButton("biomes")}</td>
${getLimitCell("states")} <td>${getLimitButton("states")}</td>
${getLimitCell("cultures")} <td>${getLimitButton("cultures")}</td>
${getLimitCell("religions")} <td>${getLimitButton("religions")}</td>
<td><input data-tip="Enter conscription percentage for rural population" type="number" min=0 max=100 step=.01 value="${unit.rural}"></td> <td><input data-tip="Enter conscription percentage for rural population" type="number" min=0 max=100 step=.01 value="${unit.rural}"></td>
<td><input data-tip="Enter conscription percentage for urban population" type="number" min=0 max=100 step=.01 value="${unit.urban}"></td> <td><input data-tip="Enter conscription percentage for urban population" type="number" min=0 max=100 step=.01 value="${unit.urban}"></td>
<td><input data-tip="Enter average number of people in crew (for total personnel calculation)" type="number" min=1 step=1 value="${unit.crew}"></td> <td><input data-tip="Enter average number of people in crew (for total personnel calculation)" type="number" min=1 step=1 value="${unit.crew}"></td>
@ -295,30 +314,43 @@ function overviewMilitary() {
Military.getDefaultOptions().map(unit => addUnitLine(unit)); Military.getDefaultOptions().map(unit => addUnitLine(unit));
} }
function selectLimitation(el, data, callback) { function selectLimitation(el, data) {
const limitBy = el.dataset.type; const type = el.dataset.type;
const initial = el.dataset.value ? el.dataset.value.split(",").map(v => +v) : []; const value = el.dataset.value;
const initial = value ? value.split(",").map(v => +v) : [];
const lines = data.slice(1).map( const lines = data.slice(1).map(
({i, name, fullName, color}) => ({i, name, fullName, color}) =>
`<tr><td><span style="color:${color}">⬤</span></td> `<tr><td><span style="color:${color}">⬤</span></td>
<td><input id="el${i}" type="checkbox" class="checkbox" checked=${initial.includes(i)} > <td><input id="el${i}" type="checkbox" class="checkbox" ${!initial.length || initial.includes(i) ? "checked" : ""} >
<label for="el${i}" class="checkbox-label">${fullName || name}</label> <label for="el${i}" class="checkbox-label">${fullName || name}</label>
</td></tr>` </td></tr>`
); );
alertMessage.innerHTML = `<b>Limit unit by ${limitBy}:</b> alertMessage.innerHTML = `<b>Limit unit by ${type}:</b><div style="margin-top:.3em" class="table"><table><tbody>${lines.join("")}</tbody></table></div>`;
<div style="margin-top:.3em" class="table"><table><tbody>${lines.join("")}</tbody></table></div>`;
$("#alert").dialog({ $("#alert").dialog({
width: fitContent(), width: fitContent(),
title: `Limit unit`, title: `Limit unit`,
buttons: { buttons: {
Invert: function () {
alertMessage.querySelectorAll("input").forEach(el => (el.checked = !el.checked));
},
Apply: function () { 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"); $(this).dialog("close");
}, },
Close: function () { Cancel: function () {
callback(initial.join(","));
$(this).dialog("close"); $(this).dialog("close");
} }
} }
@ -337,19 +369,19 @@ function overviewMilitary() {
options.military = unitLines.map((r, i) => { options.military = unitLines.map((r, i) => {
const elements = Array.from(r.querySelectorAll("input, button, select")); 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 => { const [icon, name, biomes, states, cultures, religions, rural, urban, crew, power, type, separate] = elements.map(el => {
let value = el.value; const {type, value} = el.dataset || {};
if (el.dataset.type === "icon") value = el.innerHTML || "⠀"; if (type === "icon") return el.innerHTML || "⠀";
else if (el.dataset.type) value = el.dataset.value ? el.dataset.value.split(",").map(v => parseInt(v)) : []; if (type) return value ? value.split(",").map(v => parseInt(v)) : null;
else if (el.type === "number") value = +el.value || 0; if (el.type === "number") return +el.value || 0;
else if (el.type === "checkbox") value = +el.checked || 0; if (el.type === "checkbox") return +el.checked || 0;
return value; return el.value;
}); });
const unit = {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 (biomes) unit.biomes = biomes;
if (states.length) unit.states = states; if (states) unit.states = states;
if (cultures.length) unit.cultures = cultures; if (cultures) unit.cultures = cultures;
if (religions.length) unit.religions = religions; if (religions) unit.religions = religions;
return unit; return unit;
}); });
localStorage.setItem("military", JSON.stringify(options.military)); localStorage.setItem("military", JSON.stringify(options.military));