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

feat: burg group editor - form

Browse source
This commit is contained in:
Azgaar 2024-10-07 23:44:17 +02:00
parent 511d8f37d8
commit b6708bf698
11 changed files with 274 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

211
modules/ui/burg-group-editor.js
View file

@ -31,22 +31,23 @@ function editBurgGroups() {
// add listeners
byId("burgGroupsForm").on("change", validateForm).on("submit", submitForm);
byId("burgGroupsBody").on("click", ev => {
const line = ev.target.closest("tr");
if (line && ev.target.classList.contains("removeGroup")) {
const lines = byId("burgGroupsBody").children;
if (lines.length < 2) return tip("At least one group should be defined", false, "error");
const el = ev.target;
const line = el.closest("tr");
if (!line) return;
confirmationDialog({
title: this.dataset.tip,
message:
"Are you sure you want to remove the group? <br>This WON'T change the burgs unless the changes are applied",
confirm: "Remove",
onConfirm: () => {
line.remove();
validateForm();
}
});
if (el.name === "biomes") {
const biomes = Array(biomesData.i.length)
.fill(null)
.map((_, i) => ({i, name: biomesData.name[i], color: biomesData.color[i]}));
return selectLimitation(el, biomes);
}
if (el.name === "states") return selectLimitation(el, pack.states);
if (el.name === "cultures") return selectLimitation(el, pack.cultures);
if (el.name === "religions") return selectLimitation(el, pack.religions);
if (el.name === "features") return selectFeaturesLimitation(el);
if (el.name === "up") return line.parentNode.insertBefore(line, line.previousElementSibling);
if (el.name === "down") return line.parentNode.insertBefore(line.nextElementSibling, line);
if (el.name === "remove") return removeLine(line);
});
function addLines() {
@ -58,22 +59,183 @@ function editBurgGroups() {
const count = pack.burgs.filter(burg => !burg.removed && burg.group === group.name).length;
// prettier-ignore
return /* html */ `<tr name="${group.name}">
<td data-tip="Rendering order: higher values are rendered on top"><input type="number" name="order" min="1" max="999" step="1" required value="${group.order || ''}" /></td>
<td data-tip="Type group name. It can contain only text, digits and underscore"><input type="text" name="name" value="${group.name}" required pattern="\\w+" /></td>
<td data-tip="Set min population constraint"><input type="number" name="min" min="0" step="any" value="${group.min || ''}" /></td>
<td data-tip="Set max population constraint"><input type="number" name="max" min="0" step="any" value="${group.max || ''}" /></td>
<td data-tip="Set population percentile"><input type="number" name="percentile" min="0" max="100" step="any" value="${group.percentile || ''}" /></td>
<td data-tip="Select allowed biomes"><button type="button" name="biomes">${group.biomes ? "some" : "all"}</button></td>
<td data-tip="Select allowed states"><button type="button" name="states">${group.states ? "some" : "all"}</button></td>
<td data-tip="Select allowed cultures"><button type="button" name="cultures">${group.cultures ? "some" : "all"}</button></td>
<td data-tip="Select allowed religions"><button type="button" name="religions">${group.religions ? "some" : "all"}</button></td>
<td data-tip="Select allowed features" ><button type="button" name="features">${group.features ? "some" : "all"}</button></td>
<td data-tip="Select allowed biomes">
<input type="hidden" name="biomes" value="${group.biomes || ""}">
<button type="button" name="biomes">${group.biomes ? "some" : "all"}</button>
</td>
<td data-tip="Select allowed states">
<input type="hidden" name="states" value="${group.states || ""}">
<button type="button" name="states">${group.states ? "some" : "all"}</button>
</td>
<td data-tip="Select allowed cultures">
<input type="hidden" name="cultures" value="${group.cultures || ""}">
<button type="button" name="cultures">${group.cultures ? "some" : "all"}</button>
</td>
<td data-tip="Select allowed religions">
<input type="hidden" name="religions" value="${group.religions || ""}">
<button type="button" name="religions">${group.religions ? "some" : "all"}</button>
</td>
<td data-tip="Select allowed features" >
<input type="hidden" name="features" value='${JSON.stringify(group.features || {})}'>
<button type="button" name="features">${Object.keys(group.features || {}).length ? "some" : "any"}</button>
</td>
<td data-tip="Number of burgs in group">${count}</td>
<td data-tip="Activate/deactivate group"><input type="checkbox" name="active" class="native" ${group.active && "checked"} /></td>
<td data-tip="Select group to be assigned if other groups are not passed"><input type="radio" name="isDefault" ${group.isDefault && "checked"}></td>
<td data-tip="Remove group"><button type="button" class="icon-trash-empty removeGroup"></button></td>
<td data-tip="Assignment order: move group up"><button type="button" name="up" class="icon-up-big"></button></td>
<td data-tip="Assignment order: move group down"><button type="button" name="down" class="icon-down-big"></button></td>
<td data-tip="Remove group"><button type="button" name="remove" class="icon-trash"></button></td>
</tr>`;
}
function selectLimitation(el, data) {
const value = el.previousElementSibling.value;
const initial = value ? value.split(",").map(v => +v) : [];
const filtered = data.filter(datum => datum.i && !datum.removed);
const lines = filtered.map(
({i, name, fullName, color}) => /* html */ `
<tr data-tip="${name}">
<td>
<span style="color:${color}">⬤</span>
</td>
<td>
<input data-i="${i}" id="el${i}" type="checkbox" class="checkbox" ${
!initial.length || initial.includes(i) ? "checked" : ""
} >
<label for="el${i}" class="checkbox-label">${fullName || name}</label>
</td>
</tr>`
);
alertMessage.innerHTML = /* html */ `<b>Limit group by ${el.name}:</b>
<table style="margin-top:.3em">
<tbody>
${lines.join("")}
</tbody>
</table>`;
$("#alert").dialog({
width: fitContent(),
title: "Limit group",
buttons: {
Invert: function () {
alertMessage.querySelectorAll("input").forEach(el => (el.checked = !el.checked));
},
Apply: function () {
const inputs = Array.from(alertMessage.querySelectorAll("input"));
const selected = inputs.reduce((acc, input) => {
if (input.checked) acc.push(input.dataset.i);
return acc;
}, []);
if (!selected.length) return tip("Select at least one element", false, "error");
const allAreSelected = selected.length === inputs.length;
el.previousElementSibling.value = allAreSelected ? "" : selected.join(",");
el.innerHTML = allAreSelected ? "all" : "some";
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
function selectFeaturesLimitation(el) {
const value = el.previousElementSibling.value;
const initial = value ? JSON.parse(value) : {};
const features = [
{name: "capital", icon: "icon-star"},
{name: "port", icon: "icon-anchor"},
{name: "citadel", icon: "icon-chess-rook"},
{name: "walls", icon: "icon-fort-awesome"},
{name: "plaza", icon: "icon-store"},
{name: "temple", icon: "icon-chess-bishop"},
{name: "shanty", icon: "icon-campground"}
];
const lines = features.map(
// prettier-ignore
({name, icon}) => /* html */ `
<tr data-tip="Select limitation for burg feature: ${name}">
<td>
<span class="${icon}"></span>
<span style="margin-left:.2em">${name}</span>
</td>
<td>
<input type="radio" name="${name}" value="true" ${initial[name] === true ? "checked" : ""} style="margin:0" >
</td>
<td>
<input type="radio" name="${name}" value="false" ${initial[name] === false ? "checked" : ""} style="margin:0">
</td>
<td>
<input type="radio" name="${name}" value="undefined" ${initial[name] === undefined ? "checked" : ""} style="margin:0">
</td>
</tr>`
);
alertMessage.innerHTML = /* html */ `
<form id="featuresLimitationForm">
<table>
<thead style="font-weight:bold">
<td style="width:6em">Features</td>
<td style="width:3em">True</td>
<td style="width:3em">False</td>
<td style="width:3em">Any</td>
</thead>
<tbody>
${lines.join("")}
</tbody>
</table>
</form>`;
$("#alert").dialog({
width: fitContent(),
title: "Limit group by features",
buttons: {
Apply: function () {
const form = byId("featuresLimitationForm");
const values = features.reduce((acc, {name}) => {
const value = form[name].value;
if (value !== "undefined") acc[name] = value === "true";
return acc;
}, {});
el.previousElementSibling.value = JSON.stringify(values);
el.innerHTML = Object.keys(values).length ? "some" : "any";
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
function removeLine(line) {
const lines = byId("burgGroupsBody").children;
if (lines.length < 2) return tip("At least one group should be defined", false, "error");
confirmationDialog({
title: this.dataset.tip,
message:
"Are you sure you want to remove the group? <br>This WON'T change the burgs unless the changes are applied",
confirm: "Remove",
onConfirm: () => {
line.remove();
validateForm();
}
});
}
function validateForm() {
const form = byId("burgGroupsForm");
@ -116,6 +278,13 @@ function editBurgGroups() {
function parseInput(input) {
if (input.name === "name") return sanitizeId(input.value);
if (input.name === "features") {
const isValid = JSON.isValid(input.value);
const parsed = isValid ? JSON.parse(input.value) : {};
if (Object.keys(parsed).length) return parsed;
return null;
}
if (input.type === "hidden") return input.value || null;
if (input.type === "radio") return input.checked;
if (input.type === "checkbox") return input.checked;
if (input.type === "number") {
@ -123,7 +292,7 @@ function editBurgGroups() {
if (value === 0 || isNaN(value)) return null;
return value;
}
return input.value;
return input.value || null;
}
options.burgs.groups = lines.map(line => {

7
modules/ui/heightmap-editor.js
View file

@ -238,8 +238,8 @@ function editHeightmap(options) {
}
Biomes.define();
rankCells();
rankCells();
Cultures.generate();
Cultures.expand();
@ -247,10 +247,13 @@ function editHeightmap(options) {
States.generate();
Routes.generate();
Religions.generate();
Burgs.specify();
States.collectStatistics();
States.defineStateForms();
Provinces.generate();
Provinces.getPoles();
Burgs.specify();
Rivers.specify();
Features.specify();

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

@ -368,14 +368,17 @@ function overviewMilitary() {
const filtered = data.filter(datum => datum.i && !datum.removed);
const lines = filtered.map(
({i, name, fullName, color}) =>
`<tr data-tip="${name}"><td><span style="color:${color}">⬤</span></td>
<td><input data-i="${i}" id="el${i}" type="checkbox" class="checkbox" ${
!initial.length || initial.includes(i) ? "checked" : ""
} >
<label for="el${i}" class="checkbox-label">${fullName || name}</label>
</td></tr>`
({i, name, fullName, color}) => /* html */ `
<tr data-tip="${name}">
<td><span style="color:${color}">⬤</span></td>
<td>
<input data-i="${i}" id="el${i}" type="checkbox" class="checkbox"
${!initial.length || initial.includes(i) ? "checked" : ""} >
<label for="el${i}" class="checkbox-label">${fullName || name}</label>
</td>
</tr>`
);
alertMessage.innerHTML = /* html */ `<b>Limit unit by ${type}:</b>
<table style="margin-top:.3em">
<tbody>
@ -385,7 +388,7 @@ function overviewMilitary() {
$("#alert").dialog({
width: fitContent(),
title: `Limit unit`,
title: "Limit unit",
buttons: {
Invert: function () {
alertMessage.querySelectorAll("input").forEach(el => (el.checked = !el.checked));

1
modules/ui/provinces-editor.js
View file

@ -371,6 +371,7 @@ function editProvinces() {
layerIsOn("toggleStates") ? drawStates() : toggleStates();
layerIsOn("toggleBorders") ? drawBorders() : toggleBorders();
States.findNeighbors();
States.collectStatistics();
States.defineStateForms(newStates);
drawStateLabels(allStates);

4
modules/ui/tools.js
View file

@ -155,13 +155,15 @@ function regenerateStates() {
pack.states = newStates;
States.expandStates();
States.normalizeStates();
States.normalize();
States.getPoles();
States.findNeighbors();
States.collectStatistics();
States.assignColors();
States.generateCampaigns();
States.generateDiplomacy();
States.defineStateForms();
Provinces.generate(true);
Provinces.getPoles();