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

resource bonus UI

Browse source
This commit is contained in:
Azgaar 2021-05-13 00:29:56 +03:00
parent 0e2a80256a
commit 37cd3a241c
3 changed files with 125 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

96
index.css
View file

File diff suppressed because one or more lines are too long

10
index.html
View file

@ -3006,11 +3006,11 @@
<div id="resourcesHeader" class="header"> <div id="resourcesHeader" class="header">
<div style="left:2.8em" data-tip="Click to sort by resource name" class="sortable alphabetically" data-sortby="name">Resource&nbsp;</div> <div style="left:2.8em" data-tip="Click to sort by resource name" class="sortable alphabetically" data-sortby="name">Resource&nbsp;</div>
<div style="left:8.8em" data-tip="Click to sort by resource category" class="sortable alphabetically" data-sortby="category">Category&nbsp;</div> <div style="left:8.8em" data-tip="Click to sort by resource category" class="sortable alphabetically" data-sortby="category">Category&nbsp;</div>
<div style="left:14em" data-tip="Click to sort by resource basic value" class="sortable" data-sortby="value">Value&nbsp;</div> <div style="left:15em" data-tip="Click to sort by generation chance" class="sortable" data-sortby="chance">Chance&nbsp;</div>
<div style="left:21em" data-tip="Click to sort bonuses" class="sortable alphabetically" data-sortby="bonuses">Bonuses&nbsp;</div> <div style="left:20em" data-tip="Click to sort by spread model" class="sortable alphabetically" data-sortby="model">Model&nbsp;</div>
<div style="left:26em" data-tip="Click to sort spread model" class="sortable alphabetically" data-sortby="model">Spread model&nbsp;</div> <div style="left:27em" data-tip="Click to sort by number of cells" class="sortable icon-sort-number-down" data-sortby="cells">Cells&nbsp;</div>
<div style="left:28em" data-tip="Click to sort by generation chance" class="sortable" data-sortby="chance">Chance&nbsp;</div> <div style="left:30.8em" data-tip="Click to sort by resource basic value" class="sortable" data-sortby="value">Value&nbsp;</div>
<div style="left:33em" data-tip="Click to sort by number of cells" class="sortable icon-sort-number-down" data-sortby="cells">Cells&nbsp;</div> <div style="left:34.5em" data-tip="Click to sort by bonuses" class="sortable alphabetically" data-sortby="bonuses">Bonuses&nbsp;</div>
</div> </div>
<div id="resourcesBody" class="table" data-type="absolute"></div> <div id="resourcesBody" class="table" data-type="absolute"></div>

79
modules/ui/resources-editor.js
View file

@ -33,6 +33,7 @@ function editResources() {
const resource = Resources.get(+line.dataset.id); const resource = Resources.get(+line.dataset.id);
if (cl.contains('resourceCategory')) return changeCategory(resource, line, el); if (cl.contains('resourceCategory')) return changeCategory(resource, line, el);
if (cl.contains('resourceModel')) return changeModel(resource, line, el); if (cl.contains('resourceModel')) return changeModel(resource, line, el);
if (cl.contains('resourceBonus')) return changeBonus(resource, line, el);
}); });
body.addEventListener('change', function (ev) { body.addEventListener('change', function (ev) {
@ -46,14 +47,14 @@ function editResources() {
}); });
function getBonusIcon(bonus) { function getBonusIcon(bonus) {
if (bonus === 'fleet') return `<span data-tip="Fleet bonus" class="icon-anchor"/>`; if (bonus === 'fleet') return `<span data-tip="Fleet bonus" class="icon-anchor"></span>`;
if (bonus === 'defence') return `<span data-tip="Defence bonus" class="icon-chess-rook"/>`; if (bonus === 'defence') return `<span data-tip="Defence bonus" class="icon-chess-rook"></span>`;
if (bonus === 'prestige') return `<span data-tip="Prestige bonus" class="icon-star"/>`; if (bonus === 'prestige') return `<span data-tip="Prestige bonus" class="icon-star"></span>`;
if (bonus === 'artillery') return `<span data-tip="Artillery bonus" class="icon-rocket"/>`; if (bonus === 'artillery') return `<span data-tip="Artillery bonus" class="icon-rocket"></span>`;
if (bonus === 'infantry') return `<span data-tip="Infantry bonus" class="icon-pawn"/>`; if (bonus === 'infantry') return `<span data-tip="Infantry bonus" class="icon-pawn"></span>`;
if (bonus === 'population') return `<span data-tip="Population bonus" class="icon-male"/>`; if (bonus === 'population') return `<span data-tip="Population bonus" class="icon-male"></span>`;
if (bonus === 'archers') return `<span data-tip="Archers bonus" class="icon-dot-circled"/>`; if (bonus === 'archers') return `<span data-tip="Archers bonus" class="icon-dot-circled"></span>`;
if (bonus === 'cavalry') return `<span data-tip="Cavalry bonus" class="icon-knight"/>`; if (bonus === 'cavalry') return `<span data-tip="Cavalry bonus" class="icon-knight"></span>`;
} }
// add line for each resource // add line for each resource
@ -64,25 +65,26 @@ function editResources() {
for (const r of pack.resources) { for (const r of pack.resources) {
const stroke = Resources.getStroke(r.color); const stroke = Resources.getStroke(r.color);
const model = r.model.replaceAll('_', ' '); const model = r.model.replaceAll('_', ' ');
const bonusArray = Object.entries(r.bonus).map((e) => Array(e[1]).fill(e[0])).flat(); //prettier-ignore const bonusArray = Object.entries(r.bonus).map(e => Array(e[1]).fill(e[0])).flat(); //prettier-ignore
const bonusHTML = bonusArray.map((bonus) => getBonusIcon(bonus)).join(''); const bonusHTML = bonusArray.map((bonus) => getBonusIcon(bonus)).join('');
const bonusString = Object.entries(r.bonus).map((e) => e.join(': ')).join('; '); //prettier-ignore
lines += `<div class="states resources" lines += `<div class="states resources"
data-id=${r.i} data-name="${r.name}" data-color="${r.color}" data-id=${r.i} data-name="${r.name}" data-color="${r.color}"
data-category="${r.category}" data-chance="${r.chance}" data-bonus="${bonusArray.join(', ')}" data-category="${r.category}" data-chance="${r.chance}" data-bonus="${bonusString}"
data-value="${r.value}" data-model="${r.model}" data-cells="${r.cells}"> data-value="${r.value}" data-model="${r.model}" data-cells="${r.cells}">
<svg data-tip="Resource icon. Click to change" width="2em" height="2em" class="icon"> <svg data-tip="Resource icon. Click to change" width="2em" height="2em" class="icon">
<circle cx="50%" cy="50%" r="42%" fill="${r.color}" stroke="${stroke}"/> <circle cx="50%" cy="50%" r="42%" fill="${r.color}" stroke="${stroke}"/>
<use href="#${r.icon}" x="10%" y="10%" width="80%" height="80%"/> <use href="#${r.icon}" x="10%" y="10%" width="80%" height="80%"/>
</svg> </svg>
<input data-tip="Resource name. Click and category to change" class="resourceName" value="${r.name}" autocorrect="off" spellcheck="false"> <input data-tip="Resource name. Click and category to change" class="resourceName" value="${r.name}" autocorrect="off" spellcheck="false">
<div data-tip="Resource category. Select to change" class="resourceCategory" ${addTitle(r.category, 8)}">${r.category}</div> <div data-tip="Resource category. Select to change" class="resourceCategory">${r.category}</div>
<input data-tip="Resource basic value. Click and type to change" class="resourceValue" value="${r.value}" type="number" min=0 max=100 step=1 />
<div data-tip="Resource bonus. Click to change" class="resourceBonus">${bonusHTML}</div>
<div data-tip="Resource spread model. Click to change" class="resourceModel" ${addTitle(model, 8)}">${model}</div>
<input data-tip="Resource generation chance in eligible cell. Click and type to change" class="resourceChance" value="${r.chance}" type="number" min=0 max=100 step=.1 /> <input data-tip="Resource generation chance in eligible cell. Click and type to change" class="resourceChance" value="${r.chance}" type="number" min=0 max=100 step=.1 />
<div data-tip="Resource spread model. Click to change" class="resourceModel" ${addTitle(model, 8)}">${model}</div>
<div data-tip="Number of cells with resource" class="cells">${r.cells}</div> <div data-tip="Number of cells with resource" class="cells">${r.cells}</div>
<input data-tip="Resource basic value. Click and type to change" class="resourceValue" value="${r.value}" type="number" min=0 max=100 step=1 />
<div data-tip="Resource bonus. Click to change" class="resourceBonus" title="${bonusString}">${bonusHTML}</div>
<span data-tip="Remove resource" class="icon-trash-empty hide"></span> <span data-tip="Remove resource" class="icon-trash-empty hide"></span>
</div>`; </div>`;
} }
@ -222,6 +224,7 @@ function editResources() {
} }
resource.model = line.dataset.model = el.innerHTML = customName; resource.model = line.dataset.model = el.innerHTML = customName;
el.setAttribute('title', customName.length > 7 ? customName : '');
resource.custom = customFn; resource.custom = customFn;
$(dialog).dialog('close'); $(dialog).dialog('close');
return; return;
@ -231,10 +234,55 @@ function editResources() {
if (!model) return (message.innerHTML = 'Error. Model is not set'); if (!model) return (message.innerHTML = 'Error. Model is not set');
resource.model = line.dataset.model = el.innerHTML = model; resource.model = line.dataset.model = el.innerHTML = model;
el.setAttribute('title', model.length > 7 ? model : '');
$(dialog).dialog('close'); $(dialog).dialog('close');
} }
} }
function changeBonus(resource, line, el) {
const bonuses = [...new Set(pack.resources.map((r) => Object.keys(r.bonus)).flat())].sort();
const inputs = bonuses.map(
(bonus) => `<div style="margin-bottom:.2em">
<div style="display: inline-block; width: 7em">${capitalize(bonus)}</div>
<input id="resourceBonus_${bonus}" style="width: 4em" type="number" step="1" min="0" max="9" value="${resource.bonus[bonus] || 0}" />
</div>`
);
alertMessage.innerHTML = inputs.join('');
$('#alert').dialog({
resizable: false,
title: 'Change bonus',
buttons: {
Cancel: function () {
$(this).dialog('close');
},
Apply: function () {
applyChanges();
$(this).dialog('close');
}
}
});
function applyChanges() {
const bonusObj = {};
bonuses.forEach((bonus) => {
const el = document.getElementById('resourceBonus_' + bonus);
const value = parseInt(el.value);
if (isNaN(value) || !value) return;
bonusObj[bonus] = value;
});
const bonusArray = Object.entries(bonusObj).map(e => Array(e[1]).fill(e[0])).flat(); //prettier-ignore
const bonusHTML = bonusArray.map((bonus) => getBonusIcon(bonus)).join('');
const bonusString = Object.entries(bonusObj).map((e) => e.join(': ')).join('; '); //prettier-ignore
resource.bonus = bonusObj;
el.innerHTML = bonusHTML;
line.dataset.bonus = bonusString;
el.setAttribute('title', bonusString);
}
}
function changeName(resource, name, line) { function changeName(resource, name, line) {
resource.name = line.dataset.name = name; resource.name = line.dataset.name = name;
} }
@ -291,13 +339,12 @@ function editResources() {
} }
function downloadResourcesData() { function downloadResourcesData() {
let data = 'Id,Resource,Color,Icon,Category,Value,Bonus,Chance,Model,Cells\n'; // headers let data = 'Id,Resource,Color,Category,Value,Bonus,Chance,Model,Cells\n'; // headers
body.querySelectorAll(':scope > div').forEach(function (el) { body.querySelectorAll(':scope > div').forEach(function (el) {
data += el.dataset.id + ','; data += el.dataset.id + ',';
data += el.dataset.name + ','; data += el.dataset.name + ',';
data += el.dataset.color + ','; data += el.dataset.color + ',';
data += el.dataset.icon + ',';
data += el.dataset.category + ','; data += el.dataset.category + ',';
data += el.dataset.value + ','; data += el.dataset.value + ',';
data += el.dataset.bonus + ','; data += el.dataset.bonus + ',';