From 4d7408182138250fd183c4ddc82d692b25abc162 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Wed, 5 May 2021 00:19:51 +0300
Subject: [PATCH] basic resource editor screen - icons

---
 index.css                      | 14 ++++++++++++++
 index.html                     | 12 ++++++------
 modules/ui/resources-editor.js |  9 ++++++---
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/index.css b/index.css
index e44c49da..9d2bab2b 100644
--- a/index.css
+++ b/index.css
@@ -1448,6 +1448,20 @@ div.states > .coaIcon > use {
   pointer-events: none;
 }
 
+div.states > .icon {
+  margin: 0;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+div.states > .model {
+  width: 7em;
+}
+
+div.states > .icon > * {
+  pointer-events: none;
+}
+
 #diplomacyBodySection > div {
   cursor: pointer;
 }
diff --git a/index.html b/index.html
index 8cbd97f1..592dd2b7 100644
--- a/index.html
+++ b/index.html
@@ -3003,12 +3003,12 @@
 
     <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 style="left:2.8em" data-tip="Click to sort by resource name" class="sortable alphabetically" data-sortby="name">Resource&nbsp;</div>
+        <div style="left:8.8em" data-tip="Click to sort by resource type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
+        <div style="left:14em" data-tip="Click to sort spread model" class="sortable alphabetically" data-sortby="model">Model&nbsp;</div>
+        <div style="left:20em" data-tip="Click to sort by resource basic value" class="sortable" data-sortby="value">Value&nbsp;</div>
+        <div style="left:23.6em" data-tip="Click to sort by generation chance" class="sortable" data-sortby="chance">Chance&nbsp;</div>
+        <div style="left:28em" 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>
 
diff --git a/modules/ui/resources-editor.js b/modules/ui/resources-editor.js
index 1a9018cb..2de21aa7 100644
--- a/modules/ui/resources-editor.js
+++ b/modules/ui/resources-editor.js
@@ -29,13 +29,16 @@ function editResources() {
     // // {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>
+        <svg data-tip="Resource icon. Click to change" width="2em" height="2em" class="icon">
+          <circle cx="50%" cy="50%" r="42%" fill="${r.color}" stroke="${r.stroke}"/>
+          <use href="#${r.icon}" x="10%" y="10%" width="80%" height="80%"/>
+        </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>
+        <select data-tip="Resource type. Select to change" class="resourceType"><option selected>No data</option></select>
+        <input data-tip="Resource spread model. Select to change" value="${r.model}" class="model"/>
 
         <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>