${r.category}
-
${model}
-
-
-
+
+
${bonusHTML}
+
${model}
+
${r.cells}
@@ -74,29 +89,25 @@ function editResources() {
body.innerHTML = lines;
// update footer
- document.getElementById("resourcesNumber").innerHTML = pack.resources.length;
+ document.getElementById('resourcesNumber').innerHTML = pack.resources.length;
// add listeners
// 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.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") {
- body.dataset.type = "absolute";
+ if (body.dataset.type === 'percentage') {
+ body.dataset.type = 'absolute';
togglePercentageMode();
}
applySorting(resourcesHeader);
- $("#resourcesEditor").dialog({width: fitContent()});
- }
-
- function changeName(resource, name, line) {
- resource.name = line.dataset.name = name;
+ $('#resourcesEditor').dialog({width: fitContent()});
}
function changeCategory(resource, line, el) {
- const categories = [...new Set(pack.resources.map(r => r.category))].sort();
- const categoryOptions = category => categories.map(c => `
`).join("");
+ const categories = [...new Set(pack.resources.map((r) => r.category))].sort();
+ const categoryOptions = (category) => categories.map((c) => `
`).join('');
alertMessage.innerHTML = `
@@ -110,23 +121,23 @@ function editResources() {
`;
- $("#alert").dialog({
+ $('#alert').dialog({
resizable: false,
- title: "Change category",
+ title: 'Change category',
buttons: {
Cancel: function () {
- $(this).dialog("close");
+ $(this).dialog('close');
},
Apply: function () {
applyChanges();
- $(this).dialog("close");
+ $(this).dialog('close');
}
}
});
function applyChanges() {
- const custom = document.getElementById("resouceCategoryAdd").value;
- const select = document.getElementById("resouceCategorySelect").value;
+ const custom = document.getElementById('resouceCategoryAdd').value;
+ const select = document.getElementById('resouceCategorySelect').value;
const category = custom ? capitalize(custom) : select;
resource.category = line.dataset.category = el.innerHTML = category;
}
@@ -135,8 +146,11 @@ function editResources() {
function changeModel(resource, line, el) {
const defaultModels = Resources.defaultModels;
const model = line.dataset.model;
- const modelOptions = Object.keys(defaultModels).sort().map(m => `
`).join("");
- const wikiURL = "https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Resources:-spread-functions";
+ const modelOptions = Object.keys(defaultModels)
+ .sort()
+ .map((m) => `
`)
+ .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 = ''";
alertMessage.innerHTML = `
@@ -153,7 +167,7 @@ function editResources() {
Function:
- ${defaultModels[model] || " "}
+ ${defaultModels[model] || ' '}
@@ -174,13 +188,13 @@ function editResources() {
`;
- $("#alert").dialog({
+ $('#alert').dialog({
resizable: false,
- title: "Change spread model",
+ title: 'Change spread model',
buttons: {
Help: () => openURL(wikiURL),
Cancel: function () {
- $(this).dialog("close");
+ $(this).dialog('close');
},
Apply: function () {
applyChanges(this);
@@ -189,96 +203,110 @@ function editResources() {
});
function applyChanges(dialog) {
- const customName = document.getElementById("resouceModelCustomName").value;
- const customFn = document.getElementById("resouceModelCustomFunction").value;
+ const customName = document.getElementById('resouceModelCustomName').value;
+ const customFn = document.getElementById('resouceModelCustomFunction').value;
- 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 name is required");
- message.innerHTML = "";
+ 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 name is required');
+ message.innerHTML = '';
if (customName && customFn) {
try {
- const allMethods = "{" + Object.keys(Resources.methods).join(", ") + "}";
- const fn = new Function(allMethods, "return " + customFn);
+ const allMethods = '{' + Object.keys(Resources.methods).join(', ') + '}';
+ const fn = new Function(allMethods, 'return ' + customFn);
fn({...Resources.methods});
} catch (err) {
- message.innerHTML = "Error. " + err.message || err;
+ message.innerHTML = 'Error. ' + err.message || err;
return;
}
resource.model = line.dataset.model = el.innerHTML = customName;
resource.custom = customFn;
- $(dialog).dialog("close");
+ $(dialog).dialog('close');
return;
}
- const model = document.getElementById("resouceModelSelect").value;
- if (!model) return (message.innerHTML = "Error. Model is not set");
+ const model = document.getElementById('resouceModelSelect').value;
+ if (!model) return (message.innerHTML = 'Error. Model is not set');
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() {
- const circle = this.querySelector("circle");
+ const circle = this.querySelector('circle');
const resource = Resources.get(+this.parentNode.dataset.id);
const callback = function (fill) {
const stroke = Resources.getStroke(fill);
- circle.setAttribute("fill", fill);
- circle.setAttribute("stroke", stroke);
+ circle.setAttribute('fill', fill);
+ circle.setAttribute('stroke', stroke);
resource.color = fill;
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});
}
function toggleLegend() {
- if (legend.selectAll("*").size()) {
+ if (legend.selectAll('*').size()) {
clearLegend();
return;
- } // hide legend
+ }
+
const data = pack.resources
- .filter(r => r.i && r.cells)
+ .filter((r) => r.i && r.cells)
.sort((a, b) => b.cells - a.cells)
- .map(r => [r.i, r.color, r.name]);
- drawLegend("Resources", data);
+ .map((r) => [r.i, r.color, r.name]);
+ drawLegend('Resources', data);
}
function togglePercentageMode() {
- if (body.dataset.type === "absolute") {
- body.dataset.type = "percentage";
- const totalCells = pack.cells.resource.filter(r => r !== 0).length;
+ if (body.dataset.type === 'absolute') {
+ body.dataset.type = 'percentage';
+ const totalCells = pack.cells.resource.filter((r) => r !== 0).length;
- body.querySelectorAll(":scope > div").forEach(function (el) {
- el.querySelector(".cells").innerHTML = rn((+el.dataset.cells / totalCells) * 100) + "%";
+ body.querySelectorAll(':scope > div').forEach(function (el) {
+ el.querySelector('.cells').innerHTML = rn((+el.dataset.cells / totalCells) * 100) + '%';
});
} else {
- body.dataset.type = "absolute";
+ body.dataset.type = 'absolute';
resourcesEditorAddLines();
}
}
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) {
- data += el.dataset.id + ",";
- data += el.dataset.name + ",";
- data += el.dataset.category + ",";
- data += el.dataset.color + ",";
- data += el.dataset.icon + ",";
- data += el.dataset.value + ",";
- data += el.dataset.chance + ",";
- data += el.dataset.model + ",";
- data += el.dataset.cells + "\n";
+ 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 + ',';
+ data += el.dataset.chance + ',';
+ data += el.dataset.model + ',';
+ data += el.dataset.cells + '\n';
});
- const name = getFileName("Resources") + ".csv";
+ const name = getFileName('Resources') + '.csv';
downloadFile(data, name);
}