custom spread models

modules/resources-generator.js

@@ -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};
 });

modules/ui/resources-editor.js

@@ -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"}
   });
 
@@ -22,22 +25,27 @@ function editResources() {
   document.getElementById("resourcesPercentage").addEventListener("click", togglePercentageMode);
   document.getElementById("resourcesExport").addEventListener("click", downloadResourcesData);
 
-  body.addEventListener("click", function(ev) {
+  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) {
+  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");},
+        Cancel: function () {
-        Apply: function() {applyChanges(); $(this).dialog("close");}
+          $(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");},
+        Cancel: function () {
-        Apply: function() {applyChanges(this);}
+          $(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 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 = "";
 
       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");
     }
@@ -183,21 +225,27 @@ function editResources() {
     const circle = this.querySelector("circle");
     const resource = Resources.get(+this.parentNode.dataset.id);
 
-    const callback = function(fill) {
+    const callback = function (fill) {
       const stroke = Resources.getStroke(fill);
       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);
-    }
+    };
 
     openPicker(resource.color, callback, {allowHatching: false});
   }
 
   function toggleLegend() {
-    if (legend.selectAll("*").size()) {clearLegend(); return;}; // hide legend
+    if (legend.selectAll("*").size()) {
-    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]);
+      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);
   }
 
@@ -206,8 +254,8 @@ function editResources() {
       body.dataset.type = "percentage";
       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 {
       body.dataset.type = "absolute";
@@ -218,7 +266,7 @@ function editResources() {
   function downloadResourcesData() {
     let data = "Id,Resource,Category,Color,Icon,Value,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.name + ",";
       data += el.dataset.category + ",";
@@ -233,9 +281,6 @@ function editResources() {
     const name = getFileName("Resources") + ".csv";
     downloadFile(data, name);
   }
-  
-  function closeResourcesEditor() {
-
-  }
 
+  function closeResourcesEditor() {}
 }