basic resource editor screen

index.html

@@ -1302,8 +1302,9 @@
           <button id="editNamesBaseButton" data-tip="Click to open Namesbase Editor. Shortcut: Shift + N">Namesbase</button>
           <button id="editZonesButton" data-tip="Click to open Zones Editor. Shortcut: Shift + Z">Zones</button>
           <button id="editReligions" data-tip="Click to open Religions Editor. Shortcut: Shift + R">Religions</button>
+          <button id="editResources" data-tip="Click to open Resources Editor. Shortcut: Shift + Q">Resources</button>
           <button id="editEmblemButton" data-tip="Click to open Emblem Editor. Shortcut: Shift + Y">Emblems</button>
-          <button id="editUnitsButton" data-tip="Click to open Units Editor. Shortcut: Shift + Q">Units</button>
+          <button id="editUnitsButton" data-tip="Click to open Units Editor. Shortcut: Shift + W">Units</button>
           <button id="editNotesButton" data-tip="Click to open Notes Editor. Shortcut: Shift + O">Notes</button>
         </div>
 
@@ -3000,6 +3001,31 @@
       </div>
     </div>
 
+    <div id="resourcesEditor" class="dialog stable" style="display: none">
+      <div id="resourcesHeader" class="header">
+        <div style="left:1.8em" data-tip="Click to sort by resource name" class="sortable alphabetically" data-sortby="name">Resource&nbsp;</div>
+        <div style="left:12.6em" data-tip="Click to sort by resource type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
+        <div style="left:18em" data-tip="Click to sort by resource basic value" class="sortable" data-sortby="value">Value&nbsp;</div>
+        <div style="left:25.1em" data-tip="Click to sort by generation chance" class="sortable" data-sortby="chance">Chance&nbsp;</div>
+        <div style="left:42.1em" data-tip="Click to sort spread model" class="sortable alphabetically" data-sortby="model">Model&nbsp;</div>
+        <div style="left:47em" data-tip="Click to sort by number of cells" class="sortable icon-sort-number-down" data-sortby="cells">Cells&nbsp;</div>
+      </div>
+      <div id="resourcesBody" class="table" data-type="absolute"></div>
+
+      <div id="resourcesFooter" class="totalLine">
+        <div data-tip="Number of resources" style="margin-left: 12px">Resources:&nbsp;<span id="resourcesNumber">0</span></div>
+      </div>
+    
+      <div id="resourcesBottom">
+        <button id="resourcesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
+        <button id="resourcesEditStyle" data-tip="Edit resources style in Style Editor" class="icon-adjust"></button>
+        <button id="resourcesLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
+        <button id="resourcesPercentage" data-tip="Toggle percentage / absolute values display mode" class="icon-percent"></button>
+        <button id="resourcesAdd" data-tip="Add a new resource" class="icon-plus"></button>
+        <button id="resourcesExport" data-tip="Download resources-related data" class="icon-download"></button>
+      </div>
+    </div>
+    
     <div id="unitsEditor" class="dialog stable" style="display: none">
       <div id="unitsBody" style="margin-left:1.1em">
         <div class="unitsHeader" style="margin-top:.4em">
@@ -4361,6 +4387,7 @@
   <script defer src="modules/ui/regiment-editor.js"></script>
   <script defer src="modules/ui/battle-screen.js"></script>
   <script defer src="modules/coa-renderer.js"></script>
+  <script defer src="modules/ui/resources-editor.js"></script>
   <script defer src="modules/ui/emblems-editor.js"></script>
   <script defer src="modules/ui/editors.js"></script>
   <script defer src="modules/ui/3d.js"></script>

modules/ui/general.js

@@ -491,8 +491,9 @@ document.addEventListener("keyup", event => {
   else if (shift && key === 78) editNamesbase(); // Shift + "N" to edit Namesbase
   else if (shift && key === 90) editZones(); // Shift + "Z" to edit Zones
   else if (shift && key === 82) editReligions(); // Shift + "R" to edit Religions
+  else if (shift && key === 81) editResources(); // Shift + "Q" to edit Resources
   else if (shift && key === 89) openEmblemEditor(); // Shift + "Y" to edit Emblems
-  else if (shift && key === 81) editUnits(); // Shift + "Q" to edit Units
+  else if (shift && key === 87) editUnits(); // Shift + "W" to edit Units
   else if (shift && key === 79) editNotes(); // Shift + "O" to edit Notes
   else if (shift && key === 84) overviewBurgs(); // Shift + "T" to open Burgs overview
   else if (shift && key === 86) overviewRivers(); // Shift + "V" to open Rivers overview

modules/ui/resources-editor.js

@@ -0,0 +1,103 @@
+"use strict";
+function editResources() {
+  if (customization) return;
+  closeDialogs("#resourcesEditor, .stable");
+  if (!layerIsOn("toggleResources")) toggleResources();
+  const body = document.getElementById("resourcesBody");
+
+  resourcesEditorAddLines();
+
+  if (modules.editResources) return;
+  modules.editResources = true;
+
+  $("#resourcesEditor").dialog({
+    title: "Resources Editor", resizable: false, width: fitContent(), close: closeResourcesEditor,
+    position: {my: "right top", at: "right-10 top+10", of: "svg"}
+  });
+
+  // add listeners
+  document.getElementById("resourcesEditorRefresh").addEventListener("click", resourcesEditorAddLines);
+  document.getElementById("resourcesEditStyle").addEventListener("click", () => editStyle("goods"));
+  document.getElementById("resourcesLegend").addEventListener("click", toggleLegend);
+  document.getElementById("resourcesPercentage").addEventListener("click", togglePercentageMode);
+  document.getElementById("resourcesExport").addEventListener("click", downloadResourcesData);
+
+  // add line for each resource
+  function resourcesEditorAddLines() {
+    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) {
+      lines += `<div class="states resources" data-id=${r.i} data-name="${r.name}" data-color="${r.color}" data-chance="${r.chance}" data-value="${r.value}" data-model="${r.model}" data-cells="${r.cells}">
+        <svg data-tip="Resource background color. Click to change" width=".9em" height=".9em" style="margin-bottom:-1px"><rect x="0" y="0" width="100%" height="100%" fill="${r.color}" class="fillRect pointer"></svg>
+        <input data-tip="Resource name. Click and type to change" class="resourceName" value="${r.name}" autocorrect="off" spellcheck="false">
+        <select data-tip="Resource type. Select to change" class="resourceType">No data</select>
+
+        <input data-tip="Resource basic value. Click and type to change" value="${r.value}" type="number">
+        <input data-tip="Resource generation chance in eligible cell. Click and type to change" value="${r.chance}" type="number">
+        <input data-tip="Resource spread model. Select to change" value="${r.model}">
+        <div data-tip="Number of cells with resource" class="cells">${r.cells}</div>
+
+        <span data-tip="Remove resource" class="icon-trash-empty hide"></span>
+      </div>`;
+    }
+    body.innerHTML = lines;
+
+    // update footer
+    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("rect.fillRect").forEach(el => el.addEventListener("click", resourceChangeColor));
+
+    if (body.dataset.type === "percentage") {body.dataset.type = "absolute"; togglePercentageMode();}
+    applySorting(resourcesHeader);
+    $("#resourcesEditor").dialog({width: fitContent()});
+  }
+
+  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]);
+    drawLegend("Resources", data);
+  }
+
+  function togglePercentageMode() {
+    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) + "%";
+      });
+    } else {
+      body.dataset.type = "absolute";
+      resourcesEditorAddLines();
+    }
+  }
+
+  function downloadResourcesData() {
+    let data = "Id,Resource,Type,Color,Icon,Value,Chance,Model,Cells\n"; // headers
+
+    body.querySelectorAll(":scope > div").forEach(function(el) {
+      data += el.dataset.id + ",";
+      data += el.dataset.name + ",";
+      data += el.dataset.type + ",";
+      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";
+    });
+
+    const name = getFileName("Resources") + ".csv";
+    downloadFile(data, name);
+  }
+  
+  function closeResourcesEditor() {
+
+  }
+
+}

modules/ui/tools.js

@@ -14,6 +14,7 @@ toolsContent.addEventListener("click", function(event) {
   if (button === "editDiplomacyButton") editDiplomacy(); else
   if (button === "editCulturesButton") editCultures(); else
   if (button === "editReligions") editReligions(); else
+  if (button === "editResources") editResources(); else
   if (button === "editEmblemButton") openEmblemEditor(); else
   if (button === "editNamesBaseButton") editNamesbase(); else
   if (button === "editUnitsButton") editUnits(); else