mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-22 12:01:23 +01:00
resource bonus UI
This commit is contained in:
Azgaar
Peter
parent
6bcd0d3aad
commit
c3f102656d
2 changed files with 83 additions and 36 deletions
56
index.css
56
index.css
|
|
@ -470,17 +470,17 @@ input[type="color"] {
|
|||
border: 1px solid #a9a9a9;
|
||||
}
|
||||
|
||||
input[type="color"]::-webkit-color-swatch-wrapper {
|
||||
input[type='color']::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#options input[type="color"] {
|
||||
#options input[type='color'] {
|
||||
width: 4.5em;
|
||||
height: 1em;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#convertImageDialog input[type="color"] {
|
||||
#convertImageDialog input[type='color'] {
|
||||
width: 38px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
|
@ -495,7 +495,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
|
|||
font-size: smaller;
|
||||
}
|
||||
|
||||
#options input[type="range"] {
|
||||
#options input[type='range'] {
|
||||
height: 8px;
|
||||
background: 0;
|
||||
appearance: none;
|
||||
|
|
@ -504,7 +504,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
#options input[type="range"]::-webkit-slider-thumb {
|
||||
#options input[type='range']::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
border-radius: 15%;
|
||||
width: 0.91em;
|
||||
|
|
@ -516,7 +516,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
|
|||
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;
|
||||
border-radius: 15%;
|
||||
width: 0.73em;
|
||||
|
|
@ -527,22 +527,22 @@ input[type="color"]::-webkit-color-swatch-wrapper {
|
|||
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;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
#options input[type="range"]::-moz-range-track {
|
||||
#options input[type='range']::-moz-range-track {
|
||||
-moz-appearance: none;
|
||||
background-color: #ffffff;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
#options input[type="number"] {
|
||||
#options input[type='number'] {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
#options input[type="text"] {
|
||||
#options input[type='text'] {
|
||||
border: 0px;
|
||||
width: 62%;
|
||||
font-size: smaller;
|
||||
|
|
@ -553,7 +553,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
|
|||
font-size: smaller;
|
||||
}
|
||||
|
||||
#optionsContent input[type="number"] {
|
||||
#optionsContent input[type='number'] {
|
||||
border: 0;
|
||||
text-align: right;
|
||||
background-color: transparent;
|
||||
|
|
@ -561,8 +561,8 @@ input[type="color"]::-webkit-color-swatch-wrapper {
|
|||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
#optionsContent input[type="number"]::-webkit-inner-spin-button,
|
||||
#optionsContent input[type="number"]::-webkit-outer-spin-button {
|
||||
#optionsContent input[type='number']::-webkit-inner-spin-button,
|
||||
#optionsContent input[type='number']::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -582,7 +582,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
#optionsContent input[type="range"] {
|
||||
#optionsContent input[type='range'] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -606,7 +606,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
|
|||
transform: translate(0px, 1px);
|
||||
}
|
||||
|
||||
#styleElements input[type="range"] {
|
||||
#styleElements input[type='range'] {
|
||||
width: 64%;
|
||||
}
|
||||
|
||||
|
|
@ -1216,7 +1216,7 @@ i.resetButton:active {
|
|||
border-radius: 10%;
|
||||
}
|
||||
|
||||
.ui-dialog input[type="range"] {
|
||||
.ui-dialog input[type='range'] {
|
||||
padding: 0;
|
||||
height: 2px;
|
||||
background: #d4d4d4;
|
||||
|
|
@ -1226,7 +1226,7 @@ i.resetButton:active {
|
|||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.ui-dialog input[type="range"]::-webkit-slider-thumb {
|
||||
.ui-dialog input[type='range']::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
border-radius: 15%;
|
||||
width: 1em;
|
||||
|
|
@ -1236,7 +1236,7 @@ i.resetButton:active {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui-dialog input[type="range"]::-moz-range-thumb {
|
||||
.ui-dialog input[type='range']::-moz-range-thumb {
|
||||
appearance: none;
|
||||
border-radius: 15%;
|
||||
width: 1em;
|
||||
|
|
@ -1452,7 +1452,7 @@ div.states .icon-resize-vertical {
|
|||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
div.states > [class^="icon-"] {
|
||||
div.states > [class^='icon-'] {
|
||||
color: #6e5e66;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -1681,7 +1681,7 @@ div.states > div.resourceBonus > span.icon-male {
|
|||
width: 5em;
|
||||
}
|
||||
|
||||
#regimentBody input[type="number"] {
|
||||
#regimentBody input[type='number'] {
|
||||
width: 5em;
|
||||
}
|
||||
|
||||
|
|
@ -1892,7 +1892,7 @@ div.editorLine {
|
|||
width: 9em;
|
||||
}
|
||||
|
||||
#unitsBody > div > input[type="range"] {
|
||||
#unitsBody > div > input[type='range'] {
|
||||
width: 7em;
|
||||
}
|
||||
|
||||
|
|
@ -1950,7 +1950,7 @@ div.editorLine {
|
|||
}
|
||||
|
||||
#ruler text {
|
||||
font-family: "Georgia";
|
||||
font-family: 'Georgia';
|
||||
fill: #3d3d3d;
|
||||
text-anchor: middle;
|
||||
text-shadow: 0 0 4px white;
|
||||
|
|
@ -1985,7 +1985,7 @@ div.editorLine {
|
|||
border: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
#militaryOptionsTable input[type="number"] {
|
||||
#militaryOptionsTable input[type='number'] {
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
|
|
@ -2022,7 +2022,7 @@ ul.share-buttons img {
|
|||
width: 2em;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
input[type='checkbox'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -2032,7 +2032,7 @@ input[type="checkbox"] {
|
|||
}
|
||||
|
||||
.checkbox + .checkbox-label:before {
|
||||
content: "";
|
||||
content: '';
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 0.6em;
|
||||
|
|
@ -2047,7 +2047,7 @@ input[type="checkbox"] {
|
|||
.checkbox:checked + .checkbox-label:before {
|
||||
line-height: 0.8em;
|
||||
font-weight: bold;
|
||||
content: "✓";
|
||||
content: '✓';
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
|
|
@ -2156,7 +2156,7 @@ svg.button {
|
|||
width: 4em;
|
||||
}
|
||||
|
||||
#reliefEditor input[type="range"] {
|
||||
#reliefEditor input[type='range'] {
|
||||
width: 16em;
|
||||
}
|
||||
|
||||
|
|
@ -2238,7 +2238,7 @@ svg.button {
|
|||
padding: 2px 0;
|
||||
}
|
||||
|
||||
#worldControls input[type="number"] {
|
||||
#worldControls input[type='number'] {
|
||||
border: 1px solid #e5e5e5;
|
||||
padding: 0px;
|
||||
width: 3.2em;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue