-
diff --git a/modules/resources-generator.js b/modules/resources-generator.js
index 89505fb6..38384d7f 100644
--- a/modules/resources-generator.js
+++ b/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().map(resource => {
- resource.cells = 0;
- resource.stroke = d3.color(resource.color).darker(2).hex();
- return resource;
- });
-
+ pack.resources = getDefault();
+ pack.resources.forEach(r => r.cells = 0);
+
+ const skipGlaciers = biomesData.habitability[11] === 0;
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};
})));
diff --git a/modules/ui/editors.js b/modules/ui/editors.js
index cac16d4c..815efaf8 100644
--- a/modules/ui/editors.js
+++ b/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%");
- contaiter.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%").attr("opacity", .2)
- .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 container = d3.select("body").append("svg").attr("id", "pickerContainer").attr("width", "100%").attr("height", "100%");
+ const picker = container.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 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());
+ const clr = d3.range(COLORS_IN_ROW).map(i => d3.hsl(i/COLORS_IN_ROW*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);
});
-
- hatching.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"));
+
+ 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);
+ });
+ 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) {
- const picker = d3.select("#picker");
- if (!picker.size()) createPicker();
- d3.select("#pickerContainer").style("display", "block");
+function openPicker(fill, callback, options = {allowHatching: true}) {
+ createPicker(options.allowHatching);
if (fill[0] === "#") {
const hsl = d3.hsl(fill);
diff --git a/modules/ui/layers.js b/modules/ui/layers.js
index a373c0fd..b158b778 100644
--- a/modules/ui/layers.js
+++ b/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 += `
-
+
`;
}
diff --git a/modules/ui/resources-editor.js b/modules/ui/resources-editor.js
index 2de21aa7..a9ddaf84 100644
--- a/modules/ui/resources-editor.js
+++ b/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 += `
@@ -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]);
diff --git a/modules/ui/style.js b/modules/ui/style.js
index be11202c..9386efe4 100644
--- a/modules/ui/style.js
+++ b/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";