mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 09:41:24 +01:00
custom spread models
This commit is contained in:
Azgaar
parent
131c19a448
commit
b59e69aa7c
2 changed files with 78 additions and 33 deletions
|
|
@ -136,7 +136,7 @@
|
|||
break;
|
||||
}
|
||||
}
|
||||
pack.resources.sort((a, b) => (a.i > b.i ? 1 : -1));
|
||||
pack.resources.sort((a, b) => (a.i > b.i ? 1 : -1)).forEach(r => delete r.fn);
|
||||
|
||||
console.timeEnd("generateResources");
|
||||
};
|
||||
|
|
@ -144,5 +144,5 @@
|
|||
const getStroke = color => d3.color(color).darker(2).hex();
|
||||
const get = i => pack.resources.find(resource => resource.i === i);
|
||||
|
||||
return {generate, getDefault, defaultModels, getStroke, get};
|
||||
return {generate, getDefault, defaultModels, methods, getStroke, get};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,7 +11,10 @@ function editResources() {
|
|||
modules.editResources = true;
|
||||
|
||||
$("#resourcesEditor").dialog({
|
||||
title: "Resources Editor", resizable: false, width: fitContent(), close: closeResourcesEditor,
|
||||
title: "Resources Editor",
|
||||
resizable: false,
|
||||
width: fitContent(),
|
||||
close: closeResourcesEditor,
|
||||
position: {my: "right top", at: "right-10 top+10", of: "svg"}
|
||||
});
|
||||
|
||||
|
|
@ -23,21 +26,26 @@ function editResources() {
|
|||
document.getElementById("resourcesExport").addEventListener("click", downloadResourcesData);
|
||||
|
||||
body.addEventListener("click", function (ev) {
|
||||
const el = ev.target, cl = el.classList, line = el.parentNode, i = +line.dataset.id;
|
||||
const el = ev.target,
|
||||
cl = el.classList,
|
||||
line = el.parentNode,
|
||||
i = +line.dataset.id;
|
||||
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);
|
||||
});
|
||||
|
||||
body.addEventListener("change", function (ev) {
|
||||
const el = ev.target, cl = el.classList, line = el.parentNode;
|
||||
const el = ev.target,
|
||||
cl = el.classList,
|
||||
line = el.parentNode;
|
||||
const resource = Resources.get(+line.dataset.id);
|
||||
if (cl.contains("resourceName")) return changeName(resource, el.value, line);
|
||||
});
|
||||
|
||||
// add line for each resource
|
||||
function resourcesEditorAddLines() {
|
||||
const addTitle = (string, max) => string.length < max ? "" : `title="${string}"`;
|
||||
const addTitle = (string, max) => (string.length < max ? "" : `title="${string}"`);
|
||||
let lines = "";
|
||||
|
||||
// // {i: 33, name: "Saltpeter", icon: "resource-saltpeter", color: "#e6e3e3", value: 8, chance: 2, model: "habitability", bonus: {artillery: 3}}
|
||||
|
|
@ -74,7 +82,10 @@ function editResources() {
|
|||
// body.querySelectorAll("div.states").forEach(el => el.addEventListener("click", selectResourceOnLineClick));
|
||||
body.querySelectorAll("svg.icon").forEach(el => el.addEventListener("click", resourceChangeColor));
|
||||
|
||||
if (body.dataset.type === "percentage") {body.dataset.type = "absolute"; togglePercentageMode();}
|
||||
if (body.dataset.type === "percentage") {
|
||||
body.dataset.type = "absolute";
|
||||
togglePercentageMode();
|
||||
}
|
||||
applySorting(resourcesHeader);
|
||||
$("#resourcesEditor").dialog({width: fitContent()});
|
||||
}
|
||||
|
|
@ -99,10 +110,17 @@ function editResources() {
|
|||
</div>
|
||||
`;
|
||||
|
||||
$("#alert").dialog({resizable: false, title: "Change category",
|
||||
$("#alert").dialog({
|
||||
resizable: false,
|
||||
title: "Change category",
|
||||
buttons: {
|
||||
Cancel: function() {$(this).dialog("close");},
|
||||
Apply: function() {applyChanges(); $(this).dialog("close");}
|
||||
Cancel: function () {
|
||||
$(this).dialog("close");
|
||||
},
|
||||
Apply: function () {
|
||||
applyChanges();
|
||||
$(this).dialog("close");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -117,20 +135,26 @@ function editResources() {
|
|||
function changeModel(resource, line, el) {
|
||||
const defaultModels = Resources.defaultModels;
|
||||
const model = line.dataset.model;
|
||||
const modelOptions = Object.keys(defaultModels).map(m => `<option ${m === model ? "selected" : ""} value="${m}">${m.replaceAll("_", " ")}</option>`).join("");
|
||||
const modelOptions = Object.keys(defaultModels).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 = ''";
|
||||
|
||||
alertMessage.innerHTML = `
|
||||
<fieldset data-tip="Select one of the predefined spread models from the list" style="border: 1px solid #999; margin-bottom: 1em">
|
||||
<legend>Predefined models</legend>
|
||||
<div style="margin-bottom:.2em">
|
||||
<div style="display: inline-block; width: 6em">Name:</div>
|
||||
<select onchange="resouceModelFunction.innerHTML = Resources.defaultModels[this.value]" style="width: 14em" id="resouceModelSelect">${modelOptions}</select>
|
||||
<select onchange="${onSelect}" style="width: 18em" id="resouceModelSelect">
|
||||
<option value=""><i>Custom</i></option>
|
||||
${modelOptions}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom:.2em">
|
||||
<div style="display: inline-block; width: 6em">Function:</div>
|
||||
<div style="display: inline-block; width: 14em; font-family: monospace" id="resouceModelFunction">${defaultModels[model]}</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">
|
||||
${defaultModels[model] || " "}
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
|
|
@ -138,23 +162,29 @@ function editResources() {
|
|||
<legend>Custom model</legend>
|
||||
<div style="margin-bottom:.2em">
|
||||
<div style="display: inline-block; width: 6em">Name:</div>
|
||||
<input style="width: 14em" id="resouceModelCustomName" />
|
||||
<input style="width: 18em" id="resouceModelCustomName" value="${resource.custom ? resource.model : ''}" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="display: inline-block; width: 6em">Function:</div>
|
||||
<input style="width: 14em" id="resouceModelCustomFunction" />
|
||||
<input style="width: 18.75em; font-family: monospace; font-size: .95em" id="resouceModelCustomFunction" spellcheck="false" value="${resource.custom || ''}"/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div id="resourceModelMessage" style="color: #b20000; margin: .4em 1em 0"></div>
|
||||
`;
|
||||
|
||||
$("#alert").dialog({resizable: false, title: "Change spread model",
|
||||
$("#alert").dialog({
|
||||
resizable: false,
|
||||
title: "Change spread model",
|
||||
buttons: {
|
||||
Help: () => openURL(wikiURL),
|
||||
Cancel: function() {$(this).dialog("close");},
|
||||
Apply: function() {applyChanges(this);}
|
||||
Cancel: function () {
|
||||
$(this).dialog("close");
|
||||
},
|
||||
Apply: function () {
|
||||
applyChanges(this);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -163,17 +193,29 @@ function editResources() {
|
|||
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";
|
||||
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);
|
||||
fn({...Resources.methods});
|
||||
} catch (err) {
|
||||
message.innerHTML = "Error. " + err.message || err;
|
||||
return;
|
||||
}
|
||||
|
||||
resource.model = line.dataset.model = el.innerHTML = customName;
|
||||
resource.custom = customFn;
|
||||
$(dialog).dialog("close");
|
||||
return;
|
||||
}
|
||||
|
||||
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");
|
||||
}
|
||||
|
|
@ -190,14 +232,20 @@ function editResources() {
|
|||
resource.color = fill;
|
||||
resource.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()) {clearLegend(); return;}; // hide legend
|
||||
const data = pack.resources.filter(r => r.i && r.cells).sort((a, b) => b.cells - a.cells).map(r => [r.i, r.color, r.name]);
|
||||
if (legend.selectAll("*").size()) {
|
||||
clearLegend();
|
||||
return;
|
||||
} // hide legend
|
||||
const data = pack.resources
|
||||
.filter(r => r.i && r.cells)
|
||||
.sort((a, b) => b.cells - a.cells)
|
||||
.map(r => [r.i, r.color, r.name]);
|
||||
drawLegend("Resources", data);
|
||||
}
|
||||
|
||||
|
|
@ -207,7 +255,7 @@ function editResources() {
|
|||
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) + "%";
|
||||
el.querySelector(".cells").innerHTML = rn((+el.dataset.cells / totalCells) * 100) + "%";
|
||||
});
|
||||
} else {
|
||||
body.dataset.type = "absolute";
|
||||
|
|
@ -234,8 +282,5 @@ function editResources() {
|
|||
downloadFile(data, name);
|
||||
}
|
||||
|
||||
function closeResourcesEditor() {
|
||||
|
||||
}
|
||||
|
||||
function closeResourcesEditor() {}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue