mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 09:41:24 +01:00
resource bonus UI
This commit is contained in:
Azgaar
parent
0e2a80256a
commit
37cd3a241c
3 changed files with 125 additions and 60 deletions
|
|
@ -33,6 +33,7 @@ function editResources() {
|
|||
const resource = Resources.get(+line.dataset.id);
|
||||
if (cl.contains('resourceCategory')) return changeCategory(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) {
|
||||
|
|
@ -46,14 +47,14 @@ function editResources() {
|
|||
});
|
||||
|
||||
function getBonusIcon(bonus) {
|
||||
if (bonus === 'fleet') return `<span data-tip="Fleet bonus" class="icon-anchor"/>`;
|
||||
if (bonus === 'defence') return `<span data-tip="Defence bonus" class="icon-chess-rook"/>`;
|
||||
if (bonus === 'prestige') return `<span data-tip="Prestige bonus" class="icon-star"/>`;
|
||||
if (bonus === 'artillery') return `<span data-tip="Artillery bonus" class="icon-rocket"/>`;
|
||||
if (bonus === 'infantry') return `<span data-tip="Infantry bonus" class="icon-pawn"/>`;
|
||||
if (bonus === 'population') return `<span data-tip="Population bonus" class="icon-male"/>`;
|
||||
if (bonus === 'archers') return `<span data-tip="Archers bonus" class="icon-dot-circled"/>`;
|
||||
if (bonus === 'cavalry') return `<span data-tip="Cavalry bonus" class="icon-knight"/>`;
|
||||
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"></span>`;
|
||||
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"></span>`;
|
||||
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"></span>`;
|
||||
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"></span>`;
|
||||
}
|
||||
|
||||
// add line for each resource
|
||||
|
|
@ -64,25 +65,26 @@ function editResources() {
|
|||
for (const r of pack.resources) {
|
||||
const stroke = Resources.getStroke(r.color);
|
||||
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 bonusString = Object.entries(r.bonus).map((e) => e.join(': ')).join('; '); //prettier-ignore
|
||||
|
||||
lines += `<div class="states resources"
|
||||
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}">
|
||||
<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}"/>
|
||||
<use href="#${r.icon}" x="10%" y="10%" width="80%" height="80%"/>
|
||||
</svg>
|
||||
<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>
|
||||
<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>
|
||||
<div data-tip="Resource category. Select to change" class="resourceCategory">${r.category}</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 />
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</div>`;
|
||||
}
|
||||
|
|
@ -222,6 +224,7 @@ function editResources() {
|
|||
}
|
||||
|
||||
resource.model = line.dataset.model = el.innerHTML = customName;
|
||||
el.setAttribute('title', customName.length > 7 ? customName : '');
|
||||
resource.custom = customFn;
|
||||
$(dialog).dialog('close');
|
||||
return;
|
||||
|
|
@ -231,10 +234,55 @@ function editResources() {
|
|||
if (!model) return (message.innerHTML = 'Error. Model is not set');
|
||||
|
||||
resource.model = line.dataset.model = el.innerHTML = model;
|
||||
el.setAttribute('title', model.length > 7 ? model : '');
|
||||
$(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) {
|
||||
resource.name = line.dataset.name = name;
|
||||
}
|
||||
|
|
@ -291,13 +339,12 @@ function editResources() {
|
|||
}
|
||||
|
||||
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) {
|
||||
data += el.dataset.id + ',';
|
||||
data += el.dataset.name + ',';
|
||||
data += el.dataset.color + ',';
|
||||
data += el.dataset.icon + ',';
|
||||
data += el.dataset.category + ',';
|
||||
data += el.dataset.value + ',';
|
||||
data += el.dataset.bonus + ',';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue