color picker behavior update

index.html

@@ -3018,7 +3018,6 @@
     
       <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>

modules/resources-generator.js

@@ -102,17 +102,14 @@
     cells = pack.cells;
     cells.resource = new Uint8Array(cells.i.length); // resources array [0, 255]
     const resourceMaxCells = Math.ceil(200 * cells.i.length / 5000);
+    pack.resources = getDefault();
+    pack.resources.forEach(r => r.cells = 0);
     
-    pack.resources = getDefault().map(resource => {
+    const skipGlaciers = biomesData.habitability[11] === 0;
-      resource.cells = 0;
-      resource.stroke = d3.color(resource.color).darker(2).hex();
-      return resource;
-    });
-
     const shuffledCells = d3.shuffle(cells.i.slice());
     for (const i of shuffledCells) {
       if (!(i%10)) d3.shuffle(pack.resources);
-      if (cells.biome[i] === 11) continue; // ignore glaciers
+      if (skipGlaciers && cells.biome[i] === 11) continue;
       const rnd = Math.random() * 100;
 
       for (const resource of pack.resources) {
@@ -131,6 +128,9 @@
     console.table(pack.resources);
   }
 
-return {generate, getDefault};
+  const getStroke = color => d3.color(color).darker(2).hex();
+  const get = i => pack.resources.find(resource => resource.i === i);
+
+return {generate, getDefault, getStroke, get};
 
 })));

modules/ui/editors.js

@@ -324,15 +324,14 @@ function clearLegend() {
 }
 
 // draw color (fill) picker
-function createPicker() {
+function createPicker(hatching) {
+  const COLORS_IN_ROW = 14;
   const pos = () => tip("Drag to change the picker position");
   const cl = () => tip("Click to close the picker");
-  const closePicker = () => contaiter.style("display", "none");
+  const closePicker = () => container.remove();
 
-  const contaiter = d3.select("body").append("svg").attr("id", "pickerContainer").attr("width", "100%").attr("height", "100%");
+  const container = d3.select("body").append("svg").attr("id", "pickerContainer").attr("width", "100%").attr("height", "100%");
-  contaiter.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%").attr("opacity", .2)
+  const picker = container.append("g").attr("id", "picker").call(d3.drag().filter(() => event.target.tagName !== "INPUT").on("start", dragPicker));
-    .on("mousemove", cl).on("click", closePicker);
-  const picker = contaiter.append("g").attr("id", "picker").call(d3.drag().filter(() => event.target.tagName !== "INPUT").on("start", dragPicker));
 
   const controls = picker.append("g").attr("id", "pickerControls");
   const h = controls.append("g");
@@ -375,23 +374,21 @@ function createPicker() {
   spaces.selectAll("input").on("change", changePickerSpace);
 
   const colors = picker.append("g").attr("id", "pickerColors").attr("stroke", "#333333");
-  const hatches = picker.append("g").attr("id", "pickerHatches").attr("stroke", "#333333");
+  const clr = d3.range(COLORS_IN_ROW).map(i => d3.hsl(i/COLORS_IN_ROW*360, .7, .7).hex());
-  const hatching = d3.selectAll("g#hatching > pattern");
-  const number = hatching.size();
-
-  const clr = d3.range(number).map(i => d3.hsl(i/number*360, .7, .7).hex());
   clr.forEach(function(d, i) {
     colors.append("rect").attr("id", "picker_" + d).attr("fill", d).attr("class", i?"":"selected")
       .attr("x", i*22+4).attr("y", 40).attr("width", 16).attr("height", 16);
   });
+  colors.selectAll("rect").on("click", pickerFillClicked).on("mousemove", () => tip("Click to fill with the color"));
 
-  hatching.each(function(d, i) {
+  if (hatching) {
+    const hatches = picker.append("g").attr("id", "pickerHatches").attr("stroke", "#333333");
+    d3.selectAll("g#hatching > pattern").each(function(d, i) {
       hatches.append("rect").attr("id", "picker_" + this.id).attr("fill", "url(#" + this.id + ")")
         .attr("x", i*22+4).attr("y", 61).attr("width", 16).attr("height", 16);
     });
-
-  colors.selectAll("rect").on("click", pickerFillClicked).on("mousemove", () => tip("Click to fill with the color"));
     hatches.selectAll("rect").on("click", pickerFillClicked).on("mousemove", () => tip("Click to fill with the hatching"));
+  }
 
   // append box
   const bbox = picker.node().getBBox();
@@ -445,10 +442,8 @@ function updatePickerColors() {
   });
 }
 
-function openPicker(fill, callback) {
+function openPicker(fill, callback, options = {allowHatching: true}) {
-  const picker = d3.select("#picker");
+  createPicker(options.allowHatching);
-  if (!picker.size()) createPicker();
-  d3.select("#pickerContainer").style("display", "block");
 
   if (fill[0] === "#") {
     const hsl = d3.hsl(fill);

modules/ui/layers.js

@@ -1330,10 +1330,12 @@ function drawResources() {
   let resourcesHTML = "";
   for (const i of pack.cells.i) {
     if (!pack.cells.resource[i]) continue;
-    const resource = pack.resources.find(resource => resource.i === pack.cells.resource[i]);
+    const resource = Resources.get(pack.cells.resource[i]);
     const [x, y] = pack.cells.p[i];
+    const stroke = Resources.getStroke(resource.color);
+
     resourcesHTML += `<g>
-      <circle data-i="${resource.i}" cx=${x} cy=${y} r="3" fill="${resource.color}" stroke="${resource.stroke}" />
+      <circle data-i="${resource.i}" cx=${x} cy=${y} r="3" fill="${resource.color}" stroke="${stroke}" />
       <use href="#${resource.icon}" x="${x-3}" y="${y-3}" width="6" height="6"/>
     </g>`;
   }

modules/ui/resources-editor.js

@@ -17,7 +17,6 @@ function editResources() {
 
   // 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);
@@ -28,9 +27,10 @@ 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) {
+      const stroke = Resources.getStroke(r.color);
       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 icon. Click to change" width="2em" height="2em" class="icon">
-          <circle cx="50%" cy="50%" r="42%" fill="${r.color}" stroke="${r.stroke}"/>
+          <circle cx="50%" cy="50%" r="42%" fill="${r.color}" stroke="${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">
@@ -53,13 +53,29 @@ function editResources() {
     // 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));
+    body.querySelectorAll("svg.icon").forEach(el => el.addEventListener("click", resourceChangeColor));
 
     if (body.dataset.type === "percentage") {body.dataset.type = "absolute"; togglePercentageMode();}
     applySorting(resourcesHeader);
     $("#resourcesEditor").dialog({width: fitContent()});
   }
 
+  function resourceChangeColor() {
+    const circle = this.querySelector("circle");
+    const resource = Resources.get(+this.parentNode.dataset.id);
+
+    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
     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]);

modules/ui/style.js

@@ -62,7 +62,7 @@ function selectStyleElement() {
   }
 
   // stroke color and width
-  if (["armies", "routes", "lakes", "borders", "cults", "relig", "cells", "coastline", "prec", "ice", "icons", "coordinates", "zones", "gridOverlay", "goods"].includes(sel)) {
+  if (["armies", "routes", "lakes", "borders", "cults", "relig", "cells", "coastline", "prec", "ice", "icons", "coordinates", "zones", "gridOverlay"].includes(sel)) {
     styleStroke.style.display = "block";
     styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke");
     styleStrokeWidth.style.display = "block";