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
02d0782386
commit
131c19a448
4 changed files with 188 additions and 60 deletions
|
|
@ -22,18 +22,29 @@ function editResources() {
|
|||
document.getElementById("resourcesPercentage").addEventListener("click", togglePercentageMode);
|
||||
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 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 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}"`;
|
||||
let lines = "";
|
||||
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 models = [...new Set(pack.resources.map(r => r.model))].sort();
|
||||
const modelOptions = model => models.map(m => `<option ${m === model ? "selected" : ""} value="${m}">${m.replaceAll("_", " ")}</option>`).join("");
|
||||
|
||||
// // {i: 33, name: "Saltpeter", icon: "resource-saltpeter", color: "#e6e3e3", value: 8, chance: 2, model: "habitability", bonus: {artillery: 3}}
|
||||
for (const r of pack.resources) {
|
||||
const stroke = Resources.getStroke(r.color);
|
||||
const model = r.model.replaceAll("_", " ");
|
||||
|
||||
lines += `<div class="states resources" data-id=${r.i} data-name="${r.name}" data-color="${r.color}"
|
||||
data-category="${r.category}" data-chance="${r.chance}"
|
||||
data-value="${r.value}" data-model="${r.model}" data-cells="${r.cells}">
|
||||
|
|
@ -42,8 +53,8 @@ function editResources() {
|
|||
<use href="#${r.icon}" x="10%" y="10%" width="80%" height="80%"/>
|
||||
</svg>
|
||||
<input data-tip="Resource name. Click and category to change" class="resourceName" value="${r.name}" autocorrect="off" spellcheck="false">
|
||||
<select data-tip="Resource category. Select to change">${categoryOptions(r.category)}</select>
|
||||
<select data-tip="Resource spread model. Select to change" class="model">${modelOptions(r.model)}</select>
|
||||
<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" value="${r.value}" type="number" min=0 max=100 step=1 />
|
||||
<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 />
|
||||
|
|
@ -68,6 +79,106 @@ function editResources() {
|
|||
$("#resourcesEditor").dialog({width: fitContent()});
|
||||
}
|
||||
|
||||
function changeName(resource, name, line) {
|
||||
resource.name = line.dataset.name = name;
|
||||
}
|
||||
|
||||
function changeCategory(resource, line, el) {
|
||||
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("");
|
||||
|
||||
alertMessage.innerHTML = `
|
||||
<div style="margin-bottom:.2em" data-tip="Select category from the list">
|
||||
<div style="display: inline-block; width: 9em">Select category:</div>
|
||||
<select style="width: 9em" id="resouceCategorySelect">${categoryOptions(line.dataset.category)}</select>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom:.2em" data-tip="Type new category name">
|
||||
<div style="display: inline-block; width: 9em">Custom category:</div>
|
||||
<input style="width: 9em" id="resouceCategoryAdd" placeholder="Category name" />
|
||||
</div>
|
||||
`;
|
||||
|
||||
$("#alert").dialog({resizable: false, title: "Change category",
|
||||
buttons: {
|
||||
Cancel: function() {$(this).dialog("close");},
|
||||
Apply: function() {applyChanges(); $(this).dialog("close");}
|
||||
}
|
||||
});
|
||||
|
||||
function applyChanges() {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
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 wikiURL = "https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Resources:-spread-functions";
|
||||
|
||||
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>
|
||||
</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>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-tip="Advanced option. Define custom spread model, click on 'Help' for details" style="border: 1px solid #999">
|
||||
<legend>Custom model</legend>
|
||||
<div style="margin-bottom:.2em">
|
||||
<div style="display: inline-block; width: 6em">Name:</div>
|
||||
<input style="width: 14em" id="resouceModelCustomName" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="display: inline-block; width: 6em">Function:</div>
|
||||
<input style="width: 14em" id="resouceModelCustomFunction" />
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div id="resourceModelMessage" style="color: #b20000; margin: .4em 1em 0"></div>
|
||||
`;
|
||||
|
||||
$("#alert").dialog({resizable: false, title: "Change spread model",
|
||||
buttons: {
|
||||
Help: () => openURL(wikiURL),
|
||||
Cancel: function() {$(this).dialog("close");},
|
||||
Apply: function() {applyChanges(this);}
|
||||
}
|
||||
});
|
||||
|
||||
function applyChanges(dialog) {
|
||||
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 = "";
|
||||
|
||||
if (customName && customFn) {
|
||||
resource.model = line.dataset.model = el.innerHTML = customName;
|
||||
resource.custom = customFn;
|
||||
return;
|
||||
}
|
||||
|
||||
const model = document.getElementById("resouceModelSelect").value;
|
||||
resource.model = line.dataset.model = el.innerHTML = model;
|
||||
$(dialog).dialog("close");
|
||||
}
|
||||
}
|
||||
|
||||
function resourceChangeColor() {
|
||||
const circle = this.querySelector("circle");
|
||||
const resource = Resources.get(+this.parentNode.dataset.id);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue