backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-22 12:01:23 +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 • committed by Peter
parent 6bcd0d3aad
commit c3f102656d
2 changed files with 83 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

56
index.css
View file

@ -470,17 +470,17 @@ input[type="color"] {
border: 1px solid #a9a9a9; border: 1px solid #a9a9a9;
} }
input[type="color"]::-webkit-color-swatch-wrapper { input[type='color']::-webkit-color-swatch-wrapper {
padding: 0; padding: 0;
} }
#options input[type="color"] { #options input[type='color'] {
width: 4.5em; width: 4.5em;
height: 1em; height: 1em;
border: 0; border: 0;
} }
#convertImageDialog input[type="color"] { #convertImageDialog input[type='color'] {
width: 38px; width: 38px;
padding: 0; padding: 0;
border: 0; border: 0;
@ -495,7 +495,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
font-size: smaller; font-size: smaller;
} }
#options input[type="range"] { #options input[type='range'] {
height: 8px; height: 8px;
background: 0; background: 0;
appearance: none; appearance: none;
@ -504,7 +504,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0; padding: 0;
} }
#options input[type="range"]::-webkit-slider-thumb { #options input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
border-radius: 15%; border-radius: 15%;
width: 0.91em; width: 0.91em;
@ -516,7 +516,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
box-shadow: 0.5px 0.5px 0px var(--dark-solid); box-shadow: 0.5px 0.5px 0px var(--dark-solid);
} }
#options input[type="range"]::-moz-range-thumb { #options input[type='range']::-moz-range-thumb {
-moz-appearance: none; -moz-appearance: none;
border-radius: 15%; border-radius: 15%;
width: 0.73em; width: 0.73em;
@ -527,22 +527,22 @@ input[type="color"]::-webkit-color-swatch-wrapper {
box-shadow: 0.5px 0.5px 0px var(--dark-solid); box-shadow: 0.5px 0.5px 0px var(--dark-solid);
} }
#options input[type="range"]::-webkit-slider-runnable-track { #options input[type='range']::-webkit-slider-runnable-track {
height: 2px; height: 2px;
background: #ffffff; background: #ffffff;
} }
#options input[type="range"]::-moz-range-track { #options input[type='range']::-moz-range-track {
-moz-appearance: none; -moz-appearance: none;
background-color: #ffffff; background-color: #ffffff;
height: 2px; height: 2px;
} }
#options input[type="number"] { #options input[type='number'] {
font-size: 0.8em; font-size: 0.8em;
} }
#options input[type="text"] { #options input[type='text'] {
border: 0px; border: 0px;
width: 62%; width: 62%;
font-size: smaller; font-size: smaller;
@ -553,7 +553,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
font-size: smaller; font-size: smaller;
} }
#optionsContent input[type="number"] { #optionsContent input[type='number'] {
border: 0; border: 0;
text-align: right; text-align: right;
background-color: transparent; background-color: transparent;
@ -561,8 +561,8 @@ input[type="color"]::-webkit-color-swatch-wrapper {
-moz-appearance: textfield; -moz-appearance: textfield;
} }
#optionsContent input[type="number"]::-webkit-inner-spin-button, #optionsContent input[type='number']::-webkit-inner-spin-button,
#optionsContent input[type="number"]::-webkit-outer-spin-button { #optionsContent input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
margin: 0; margin: 0;
} }
@ -582,7 +582,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
text-align: left; text-align: left;
} }
#optionsContent input[type="range"] { #optionsContent input[type='range'] {
width: 100%; width: 100%;
} }
@ -606,7 +606,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
transform: translate(0px, 1px); transform: translate(0px, 1px);
} }
#styleElements input[type="range"] { #styleElements input[type='range'] {
width: 64%; width: 64%;
} }
@ -1216,7 +1216,7 @@ i.resetButton:active {
border-radius: 10%; border-radius: 10%;
} }
.ui-dialog input[type="range"] { .ui-dialog input[type='range'] {
padding: 0; padding: 0;
height: 2px; height: 2px;
background: #d4d4d4; background: #d4d4d4;
@ -1226,7 +1226,7 @@ i.resetButton:active {
-webkit-appearance: none; -webkit-appearance: none;
} }
.ui-dialog input[type="range"]::-webkit-slider-thumb { .ui-dialog input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
border-radius: 15%; border-radius: 15%;
width: 1em; width: 1em;
@ -1236,7 +1236,7 @@ i.resetButton:active {
cursor: pointer; cursor: pointer;
} }
.ui-dialog input[type="range"]::-moz-range-thumb { .ui-dialog input[type='range']::-moz-range-thumb {
appearance: none; appearance: none;
border-radius: 15%; border-radius: 15%;
width: 1em; width: 1em;
@ -1452,7 +1452,7 @@ div.states .icon-resize-vertical {
font-size: 0.9em; font-size: 0.9em;
} }
div.states > [class^="icon-"] { div.states > [class^='icon-'] {
color: #6e5e66; color: #6e5e66;
padding: 0; padding: 0;
} }
@ -1681,7 +1681,7 @@ div.states > div.resourceBonus > span.icon-male {
width: 5em; width: 5em;
} }
#regimentBody input[type="number"] { #regimentBody input[type='number'] {
width: 5em; width: 5em;
} }
@ -1892,7 +1892,7 @@ div.editorLine {
width: 9em; width: 9em;
} }
#unitsBody > div > input[type="range"] { #unitsBody > div > input[type='range'] {
width: 7em; width: 7em;
} }
@ -1950,7 +1950,7 @@ div.editorLine {
} }
#ruler text { #ruler text {
font-family: "Georgia"; font-family: 'Georgia';
fill: #3d3d3d; fill: #3d3d3d;
text-anchor: middle; text-anchor: middle;
text-shadow: 0 0 4px white; text-shadow: 0 0 4px white;
@ -1985,7 +1985,7 @@ div.editorLine {
border: 1px solid #d4d4d4; border: 1px solid #d4d4d4;
} }
#militaryOptionsTable input[type="number"] { #militaryOptionsTable input[type='number'] {
width: 4em; width: 4em;
} }
@ -2022,7 +2022,7 @@ ul.share-buttons img {
width: 2em; width: 2em;
} }
input[type="checkbox"] { input[type='checkbox'] {
display: none; display: none;
} }
@ -2032,7 +2032,7 @@ input[type="checkbox"] {
} }
.checkbox + .checkbox-label:before { .checkbox + .checkbox-label:before {
content: ""; content: '';
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: 0.6em; width: 0.6em;
@ -2047,7 +2047,7 @@ input[type="checkbox"] {
.checkbox:checked + .checkbox-label:before { .checkbox:checked + .checkbox-label:before {
line-height: 0.8em; line-height: 0.8em;
font-weight: bold; font-weight: bold;
content: "✓"; content: '✓';
color: #333333; color: #333333;
} }
@ -2156,7 +2156,7 @@ svg.button {
width: 4em; width: 4em;
} }
#reliefEditor input[type="range"] { #reliefEditor input[type='range'] {
width: 16em; width: 16em;
} }
@ -2238,7 +2238,7 @@ svg.button {
padding: 2px 0; padding: 2px 0;
} }
#worldControls input[type="number"] { #worldControls input[type='number'] {
border: 1px solid #e5e5e5; border: 1px solid #e5e5e5;
padding: 0px; padding: 0px;
width: 3.2em; width: 3.2em;

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

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