resource bonus UI

This commit is contained in:
Azgaar 2021-05-13 00:29:56 +03:00 committed by Peter
parent 6bcd0d3aad
commit c3f102656d
2 changed files with 83 additions and 36 deletions

View file

@ -71,6 +71,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) {
@ -84,14 +85,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
@ -603,6 +604,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;
@ -612,10 +614,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;
}