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 basic

Browse source
This commit is contained in:
Azgaar 2021-05-12 10:40:54 +03:00 • committed by Peter
parent ffe6483cbe
commit 73123bae68
2 changed files with 129 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

10
.prettierrc.json Normal file
View file

@ -0,0 +1,10 @@
{
"bracketSpacing": false,
"semi": true,
"tabWidth": 2,
"useTabs": false,
"printWidth": 220,
"singleQuote": true,
"trailingComma": "none",
"endOfLine": "lf"
}

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

@ -1,60 +1,75 @@
"use strict"; 'use strict';
function editResources() { function editResources() {
if (customization) return; if (customization) return;
closeDialogs("#resourcesEditor, .stable"); closeDialogs('#resourcesEditor, .stable');
if (!layerIsOn("toggleResources")) toggleResources(); if (!layerIsOn('toggleResources')) toggleResources();
const body = document.getElementById("resourcesBody"); const body = document.getElementById('resourcesBody');
resourcesEditorAddLines(); resourcesEditorAddLines();
if (modules.editResources) return; if (modules.editResources) return;
modules.editResources = true; modules.editResources = true;
$("#resourcesEditor").dialog({ $('#resourcesEditor').dialog({
title: "Resources Editor", title: 'Resources Editor',
resizable: false, resizable: false,
width: fitContent(), width: fitContent(),
close: closeResourcesEditor, close: closeResourcesEditor,
position: {my: "right top", at: "right-10 top+10", of: "svg"} position: {my: 'right top', at: 'right-10 top+10', of: 'svg'}
}); });
// add listeners // add listeners
document.getElementById("resourcesEditorRefresh").addEventListener("click", resourcesEditorAddLines); document.getElementById('resourcesEditorRefresh').addEventListener('click', resourcesEditorAddLines);
document.getElementById("resourcesRegenerate").addEventListener("click", regenerateResources); document.getElementById('resourcesRegenerate').addEventListener('click', regenerateResources);
document.getElementById("resourcesLegend").addEventListener("click", toggleLegend); document.getElementById('resourcesLegend').addEventListener('click', toggleLegend);
document.getElementById("resourcesPercentage").addEventListener("click", togglePercentageMode); document.getElementById('resourcesPercentage').addEventListener('click', togglePercentageMode);
document.getElementById("resourcesExport").addEventListener("click", downloadResourcesData); document.getElementById('resourcesExport').addEventListener('click', downloadResourcesData);
body.addEventListener("click", function (ev) { body.addEventListener('click', function (ev) {
const el = ev.target, const el = ev.target,
cl = el.classList, cl = el.classList,
line = el.parentNode, line = el.parentNode,
i = +line.dataset.id; i = +line.dataset.id;
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);
}); });
body.addEventListener("change", function (ev) { body.addEventListener('change', function (ev) {
const el = ev.target, const el = ev.target,
cl = el.classList, cl = el.classList,
line = el.parentNode; line = el.parentNode;
const resource = Resources.get(+line.dataset.id); const resource = Resources.get(+line.dataset.id);
if (cl.contains("resourceName")) return changeName(resource, el.value, line); if (cl.contains('resourceName')) return changeName(resource, el.value, line);
if (cl.contains('resourceValue')) return changeValue(resource, el.value, line);
if (cl.contains('resourceChance')) return changeChance(resource, el.value, line);
}); });
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"/>`;
}
// add line for each resource // add line for each resource
function resourcesEditorAddLines() { function resourcesEditorAddLines() {
const addTitle = (string, max) => (string.length < max ? "" : `title="${string}"`); const addTitle = (string, max) => (string.length < max ? '' : `title="${string}"`);
let lines = ""; let lines = '';
// // {i: 33, name: "Saltpeter", icon: "resource-saltpeter", color: "#e6e3e3", value: 8, chance: 2, model: "habitability", bonus: {artillery: 3}}
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 bonusHTML = bonusArray.map((bonus) => getBonusIcon(bonus)).join('');
lines += `<div class="states resources" data-id=${r.i} data-name="${r.name}" data-color="${r.color}" lines += `<div class="states resources"
data-category="${r.category}" data-chance="${r.chance}" 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-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}"/>
@ -62,10 +77,10 @@ function editResources() {
</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" ${addTitle(r.category, 8)}">${r.category}</div>
<div data-tip="Resource spread model. Select to change" class="resourceModel" ${addTitle(model, 8)}">${model}</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>
<input data-tip="Resource basic value. Click and type to change" value="${r.value}" type="number" min=0 max=100 step=1 /> <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" 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="Number of cells with resource" class="cells">${r.cells}</div> <div data-tip="Number of cells with resource" class="cells">${r.cells}</div>
<span data-tip="Remove resource" class="icon-trash-empty hide"></span> <span data-tip="Remove resource" class="icon-trash-empty hide"></span>
@ -74,29 +89,25 @@ function editResources() {
body.innerHTML = lines; body.innerHTML = lines;
// update footer // update footer
document.getElementById("resourcesNumber").innerHTML = pack.resources.length; document.getElementById('resourcesNumber').innerHTML = pack.resources.length;
// add listeners // add listeners
// body.querySelectorAll("div.resources").forEach(el => el.addEventListener("mouseenter", ev => resourceHighlightOn(ev))); // body.querySelectorAll("div.resources").forEach(el => el.addEventListener("mouseenter", ev => resourceHighlightOn(ev)));
// body.querySelectorAll("div.resources").forEach(el => el.addEventListener("mouseleave", ev => resourceHighlightOff(ev))); // body.querySelectorAll("div.resources").forEach(el => el.addEventListener("mouseleave", ev => resourceHighlightOff(ev)));
// body.querySelectorAll("div.states").forEach(el => el.addEventListener("click", selectResourceOnLineClick)); // body.querySelectorAll("div.states").forEach(el => el.addEventListener("click", selectResourceOnLineClick));
body.querySelectorAll("svg.icon").forEach(el => el.addEventListener("click", resourceChangeColor)); body.querySelectorAll('svg.icon').forEach((el) => el.addEventListener('click', resourceChangeColor));
if (body.dataset.type === "percentage") { if (body.dataset.type === 'percentage') {
body.dataset.type = "absolute"; body.dataset.type = 'absolute';
togglePercentageMode(); togglePercentageMode();
} }
applySorting(resourcesHeader); applySorting(resourcesHeader);
$("#resourcesEditor").dialog({width: fitContent()}); $('#resourcesEditor').dialog({width: fitContent()});
}
function changeName(resource, name, line) {
resource.name = line.dataset.name = name;
} }
function changeCategory(resource, line, el) { function changeCategory(resource, line, el) {
const categories = [...new Set(pack.resources.map(r => r.category))].sort(); const categories = [...new Set(pack.resources.map((r) => r.category))].sort();
const categoryOptions = category => categories.map(c => `<option ${c === category ? "selected" : ""} value="${c}">${c}</option>`).join(""); const categoryOptions = (category) => categories.map((c) => `<option ${c === category ? 'selected' : ''} value="${c}">${c}</option>`).join('');
alertMessage.innerHTML = ` alertMessage.innerHTML = `
<div style="margin-bottom:.2em" data-tip="Select category from the list"> <div style="margin-bottom:.2em" data-tip="Select category from the list">
@ -110,23 +121,23 @@ function editResources() {
</div> </div>
`; `;
$("#alert").dialog({ $('#alert').dialog({
resizable: false, resizable: false,
title: "Change category", title: 'Change category',
buttons: { buttons: {
Cancel: function () { Cancel: function () {
$(this).dialog("close"); $(this).dialog('close');
}, },
Apply: function () { Apply: function () {
applyChanges(); applyChanges();
$(this).dialog("close"); $(this).dialog('close');
} }
} }
}); });
function applyChanges() { function applyChanges() {
const custom = document.getElementById("resouceCategoryAdd").value; const custom = document.getElementById('resouceCategoryAdd').value;
const select = document.getElementById("resouceCategorySelect").value; const select = document.getElementById('resouceCategorySelect').value;
const category = custom ? capitalize(custom) : select; const category = custom ? capitalize(custom) : select;
resource.category = line.dataset.category = el.innerHTML = category; resource.category = line.dataset.category = el.innerHTML = category;
} }
@ -135,8 +146,11 @@ function editResources() {
function changeModel(resource, line, el) { function changeModel(resource, line, el) {
const defaultModels = Resources.defaultModels; const defaultModels = Resources.defaultModels;
const model = line.dataset.model; const model = line.dataset.model;
const modelOptions = Object.keys(defaultModels).sort().map(m => `<option ${m === model ? "selected" : ""} value="${m}">${m.replaceAll("_", " ")}</option>`).join(""); const modelOptions = Object.keys(defaultModels)
const wikiURL = "https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Resources:-spread-functions"; .sort()
.map((m) => `<option ${m === model ? 'selected' : ''} value="${m}">${m.replaceAll('_', ' ')}</option>`)
.join('');
const wikiURL = 'https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Resources:-spread-functions';
const onSelect = "resouceModelFunction.innerHTML = Resources.defaultModels[this.value] || ' '; resouceModelCustomName.value = ''; resouceModelCustomFunction.value = ''"; const onSelect = "resouceModelFunction.innerHTML = Resources.defaultModels[this.value] || ' '; resouceModelCustomName.value = ''; resouceModelCustomFunction.value = ''";
alertMessage.innerHTML = ` alertMessage.innerHTML = `
@ -153,7 +167,7 @@ function editResources() {
<div style="margin-bottom:.2em"> <div style="margin-bottom:.2em">
<div style="display: inline-block; width: 6em">Function:</div> <div style="display: inline-block; width: 6em">Function:</div>
<div id="resouceModelFunction" style="display: inline-block; width: 18em; font-family: monospace; border: 1px solid #ccc; padding: 3px; font-size: .95em;vertical-align: middle"> <div id="resouceModelFunction" style="display: inline-block; width: 18em; font-family: monospace; border: 1px solid #ccc; padding: 3px; font-size: .95em;vertical-align: middle">
${defaultModels[model] || " "} ${defaultModels[model] || ' '}
</div> </div>
</div> </div>
</fieldset> </fieldset>
@ -174,13 +188,13 @@ function editResources() {
<div id="resourceModelMessage" style="color: #b20000; margin: .4em 1em 0"></div> <div id="resourceModelMessage" style="color: #b20000; margin: .4em 1em 0"></div>
`; `;
$("#alert").dialog({ $('#alert').dialog({
resizable: false, resizable: false,
title: "Change spread model", title: 'Change spread model',
buttons: { buttons: {
Help: () => openURL(wikiURL), Help: () => openURL(wikiURL),
Cancel: function () { Cancel: function () {
$(this).dialog("close"); $(this).dialog('close');
}, },
Apply: function () { Apply: function () {
applyChanges(this); applyChanges(this);
@ -189,96 +203,110 @@ function editResources() {
}); });
function applyChanges(dialog) { function applyChanges(dialog) {
const customName = document.getElementById("resouceModelCustomName").value; const customName = document.getElementById('resouceModelCustomName').value;
const customFn = document.getElementById("resouceModelCustomFunction").value; const customFn = document.getElementById('resouceModelCustomFunction').value;
const message = document.getElementById("resourceModelMessage"); const message = document.getElementById('resourceModelMessage');
if (customName && !customFn) return (message.innerHTML = "Error. Custom model function is required"); if (customName && !customFn) return (message.innerHTML = 'Error. Custom model function is required');
if (!customName && customFn) return (message.innerHTML = "Error. Custom model name is required"); if (!customName && customFn) return (message.innerHTML = 'Error. Custom model name is required');
message.innerHTML = ""; message.innerHTML = '';
if (customName && customFn) { if (customName && customFn) {
try { try {
const allMethods = "{" + Object.keys(Resources.methods).join(", ") + "}"; const allMethods = '{' + Object.keys(Resources.methods).join(', ') + '}';
const fn = new Function(allMethods, "return " + customFn); const fn = new Function(allMethods, 'return ' + customFn);
fn({...Resources.methods}); fn({...Resources.methods});
} catch (err) { } catch (err) {
message.innerHTML = "Error. " + err.message || err; message.innerHTML = 'Error. ' + err.message || err;
return; return;
} }
resource.model = line.dataset.model = el.innerHTML = customName; resource.model = line.dataset.model = el.innerHTML = customName;
resource.custom = customFn; resource.custom = customFn;
$(dialog).dialog("close"); $(dialog).dialog('close');
return; return;
} }
const model = document.getElementById("resouceModelSelect").value; const model = document.getElementById('resouceModelSelect').value;
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;
$(dialog).dialog("close"); $(dialog).dialog('close');
} }
} }
function changeName(resource, name, line) {
resource.name = line.dataset.name = name;
}
function changeValue(resource, value, line) {
resource.value = line.dataset.value = +value;
}
function changeChance(resource, chance, line) {
resource.chance = line.dataset.chance = +chance;
}
function resourceChangeColor() { function resourceChangeColor() {
const circle = this.querySelector("circle"); const circle = this.querySelector('circle');
const resource = Resources.get(+this.parentNode.dataset.id); const resource = Resources.get(+this.parentNode.dataset.id);
const callback = function (fill) { const callback = function (fill) {
const stroke = Resources.getStroke(fill); const stroke = Resources.getStroke(fill);
circle.setAttribute("fill", fill); circle.setAttribute('fill', fill);
circle.setAttribute("stroke", stroke); circle.setAttribute('stroke', stroke);
resource.color = fill; resource.color = fill;
resource.stroke = stroke; resource.stroke = stroke;
goods.selectAll(`circle[data-i='${resource.i}']`).attr("fill", fill).attr("stroke", stroke); goods.selectAll(`circle[data-i='${resource.i}']`).attr('fill', fill).attr('stroke', stroke);
}; };
openPicker(resource.color, callback, {allowHatching: false}); openPicker(resource.color, callback, {allowHatching: false});
} }
function toggleLegend() { function toggleLegend() {
if (legend.selectAll("*").size()) { if (legend.selectAll('*').size()) {
clearLegend(); clearLegend();
return; return;
} // hide legend }
const data = pack.resources const data = pack.resources
.filter(r => r.i && r.cells) .filter((r) => r.i && r.cells)
.sort((a, b) => b.cells - a.cells) .sort((a, b) => b.cells - a.cells)
.map(r => [r.i, r.color, r.name]); .map((r) => [r.i, r.color, r.name]);
drawLegend("Resources", data); drawLegend('Resources', data);
} }
function togglePercentageMode() { function togglePercentageMode() {
if (body.dataset.type === "absolute") { if (body.dataset.type === 'absolute') {
body.dataset.type = "percentage"; body.dataset.type = 'percentage';
const totalCells = pack.cells.resource.filter(r => r !== 0).length; const totalCells = pack.cells.resource.filter((r) => r !== 0).length;
body.querySelectorAll(":scope > div").forEach(function (el) { body.querySelectorAll(':scope > div').forEach(function (el) {
el.querySelector(".cells").innerHTML = rn((+el.dataset.cells / totalCells) * 100) + "%"; el.querySelector('.cells').innerHTML = rn((+el.dataset.cells / totalCells) * 100) + '%';
}); });
} else { } else {
body.dataset.type = "absolute"; body.dataset.type = 'absolute';
resourcesEditorAddLines(); resourcesEditorAddLines();
} }
} }
function downloadResourcesData() { function downloadResourcesData() {
let data = "Id,Resource,Category,Color,Icon,Value,Chance,Model,Cells\n"; // headers let data = 'Id,Resource,Color,Icon,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.category + ","; data += el.dataset.color + ',';
data += el.dataset.color + ","; data += el.dataset.icon + ',';
data += el.dataset.icon + ","; data += el.dataset.category + ',';
data += el.dataset.value + ","; data += el.dataset.value + ',';
data += el.dataset.chance + ","; data += el.dataset.bonus + ',';
data += el.dataset.model + ","; data += el.dataset.chance + ',';
data += el.dataset.cells + "\n"; data += el.dataset.model + ',';
data += el.dataset.cells + '\n';
}); });
const name = getFileName("Resources") + ".csv"; const name = getFileName('Resources') + '.csv';
downloadFile(data, name); downloadFile(data, name);
} }