resources ("goods") layers

index.html

@@ -268,6 +268,7 @@
           <option value="heightmap">Heightmap</option>
           <option value="physical">Physical map</option>
           <option value="poi">Places of interest</option>
+          <option value="economical">Economical map</option>
           <option value="military">Military map</option>
           <option value="emblems">Emblems</option>
           <option value="landmass">Pure landmass</option>
@@ -298,6 +299,7 @@
           <li id="togglePopulation" data-tip="Population map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: N" class="buttonoff" onclick="togglePopulation(event)">Populatio<u>n</u></li>
           <li id="toggleIce" data-tip="Icebergs and glaciers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: J" class="buttonoff" onclick="toggleIce(event)">Ice</li>
           <li id="togglePrec" data-tip="Precipitation map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: A" class="buttonoff" onclick="togglePrec(event)">Precipit<u>a</u>tion</li>
+          <li id="toggleResources" data-tip="Resources: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: Q" class="buttonoff" onclick="toggleResources(event)">Resources</li>
           <li id="toggleEmblems" data-tip="Emblems: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: Y" class="buttonoff" onclick="toggleEmblems(event)">Emblems</li>
           <li id="toggleLabels" data-tip="Labels: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: L" onclick="toggleLabels(event)"><u>L</u>abels</li>
           <li id="toggleIcons" data-tip="Burg icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: I" onclick="toggleIcons(event)"><u>I</u>cons</li>

main.js

@@ -57,8 +57,8 @@ let coastline = viewbox.append("g").attr("id", "coastline");
 let ice = viewbox.append("g").attr("id", "ice").style("display", "none");
 let prec = viewbox.append("g").attr("id", "prec").style("display", "none");
 let population = viewbox.append("g").attr("id", "population");
-let emblems = viewbox.append("g").attr("id", "emblems").style("display", "none");
 let goods = viewbox.append("g").attr("id", "goods");
+let emblems = viewbox.append("g").attr("id", "emblems").style("display", "none");
 let labels = viewbox.append("g").attr("id", "labels");
 let icons = viewbox.append("g").attr("id", "icons");
 let burgIcons = icons.append("g").attr("id", "burgIcons");
@@ -557,7 +557,6 @@ function generate() {
     defineBiomes();
 
     Resources.generate();
-    Resources.draw();
 
     rankCells();
     Cultures.generate();

modules/resources-generator.js

@@ -6,8 +6,10 @@
 
   // TO-DO
   // apply logic on heightmap edit
-  // apply logic on burgs regenearation
+  // apply logic on burgs regeneration
   // apply logic on population recalculation
+  // apply logic on save
+  // apply logic on load
 
   let cells;
 
@@ -57,15 +59,6 @@
     ]
   }
 
-  const chance = v => {
-    if (v < .01) return false;
-    if (v > 99.99) return true;
-    return v / 100 > Math.random();
-  }
-
-  const temp = i => grid.cells.temp[pack.cells.g[i]];
-  const group = i => pack.features[cells.f[i]].group;
-
   const models = {
     forest: i => [6, 7, 8].includes(cells.biome[i]),
     forestAndTaiga: i => [5, 6, 7, 8, 9].includes(cells.biome[i]),
@@ -95,9 +88,14 @@
     colderWaters: i => cells.t[i] < 0 && temp(i) < 8,
   }
 
-  // Biomes: 0: Marine, 1: Hot desert, 2: Cold desert, 3: Savanna, 4: Grassland,
-  //         5: Tropical seasonal forest, 6: Temperate deciduous forest, 7: Tropical rainforest,
-  //         8: Temperate rainforest, 9: Taiga, 10: Tundra, 11: Glacier, 12: Wetland
+  const chance = v => {
+    if (v < .01) return false;
+    if (v > 99.99) return true;
+    return v / 100 > Math.random();
+  }
+
+  const temp = i => grid.cells.temp[pack.cells.g[i]];
+  const group = i => pack.features[cells.f[i]].group;
 
   const generate = function() {
     console.time("generateResources");
@@ -133,23 +131,6 @@
     console.table(pack.resources);
   }
 
-  const draw = function() {
-    console.time("drawResources");
-    let resourcesHTML = "";
-    for (const i of cells.i) {
-      if (!cells.resource[i]) continue;
-      const resource = pack.resources.find(resource => resource.i === cells.resource[i]);
-      const [x, y] = cells.p[i];
-      resourcesHTML += `<g>
-        <circle data-i="${resource.i}" cx=${x} cy=${y} r="3" fill="${resource.color}" stroke="${resource.stroke}" />
-        <use href="#${resource.icon}" x="${x-3}" y="${y-3}" width="6" height="6"/>
-      </g>`;
-    }
-
-    goods.html(resourcesHTML);
-    console.timeEnd("drawResources");
-  }
-
-return {generate, getDefault, draw};
+return {generate, getDefault};
 
 })));

modules/save-and-load.js

@@ -739,6 +739,7 @@ function parseLoadedData(data) {
       coastline = viewbox.select("#coastline");
       prec = viewbox.select("#prec");
       population = viewbox.select("#population");
+      goods = viewbox.select("#goods");
       emblems = viewbox.select("#emblems");
       labels = viewbox.select("#labels");
       icons = viewbox.select("#icons");
@@ -830,6 +831,7 @@ function parseLoadedData(data) {
       if (hasChild(population, "line")) turnOn("togglePopulation");
       if (hasChildren(ice)) turnOn("toggleIce");
       if (hasChild(prec, "circle")) turnOn("togglePrec");
+      if (hasChildren(goods)) turnOn("toggleResources");
       if (notHidden(emblems) && hasChild(emblems, "use")) turnOn("toggleEmblems");
       if (notHidden(labels)) turnOn("toggleLabels");
       if (notHidden(icons)) turnOn("toggleIcons");
@@ -1202,6 +1204,11 @@ function parseLoadedData(data) {
       gridOverlay.attr("size", null);
     }
 
+    if (version < 1.7) {
+      // v 1.7 added resources layer
+      goods = viewbox.append("g").attr("id", "goods");
+    }
+
     void function checkDataIntegrity() {
       const cells = pack.cells;
 

modules/ui/general.js

@@ -531,6 +531,7 @@ document.addEventListener("keyup", event => {
   else if (key === 78) togglePopulation(); // "N" to toggle Population layer
   else if (key === 74) toggleIce(); // "J" to toggle Ice layer
   else if (key === 65) togglePrec(); // "A" to toggle Precipitation layer
+  else if (key === 81) toggleResources(); // "Q" to toggle Resources layer
   else if (key === 89) toggleEmblems(); // "Y" to toggle Emblems layer
   else if (key === 76) toggleLabels(); // "L" to toggle Labels layer
   else if (key === 73) toggleIcons(); // "I" to toggle Icons layer

modules/ui/layers.js

@@ -14,6 +14,7 @@ function getDefaultPresets() {
     "heightmap": ["toggleHeight", "toggleRivers"],
     "physical": ["toggleCoordinates", "toggleHeight", "toggleIce", "toggleRivers", "toggleScaleBar"],
     "poi": ["toggleBorders", "toggleHeight", "toggleIce", "toggleIcons", "toggleMarkers", "toggleRivers", "toggleRoutes", "toggleScaleBar"],
+    "economical": ["toggleResources", "toggleBiomes", "toggleBorders", "toggleIcons", "toggleIce", "toggleLabels", "toggleRivers", "toggleRoutes", "toggleScaleBar"],
     "military": ["toggleBorders", "toggleIcons", "toggleLabels", "toggleMilitary", "toggleRivers", "toggleRoutes", "toggleScaleBar", "toggleStates"],
     "emblems": ["toggleBorders", "toggleIcons", "toggleIce", "toggleEmblems", "toggleRivers", "toggleRoutes", "toggleScaleBar", "toggleStates"],
     "landmass": ["toggleScaleBar"]
@@ -1311,6 +1312,35 @@ function drawEmblems() {
   TIME && console.timeEnd("drawEmblems");
 }
 
+function toggleResources(event) {
+  if (!layerIsOn("toggleResources")) {
+    turnButtonOn("toggleResources");
+    $('#goods').fadeIn();
+    if (!goods.selectAll("*").size()) drawResources();
+    if (event && isCtrlClick(event)) editStyle("goods");
+  } else {
+    if (event && isCtrlClick(event)) {editStyle("goods"); return;}
+    $('#goods').fadeOut();
+    turnButtonOff("toggleResources");
+  }
+}
+
+function drawResources() {
+  console.time("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 [x, y] = pack.cells.p[i];
+    resourcesHTML += `<g>
+      <circle data-i="${resource.i}" cx=${x} cy=${y} r="3" fill="${resource.color}" stroke="${resource.stroke}" />
+      <use href="#${resource.icon}" x="${x-3}" y="${y-3}" width="6" height="6"/>
+    </g>`;
+  }
+  goods.html(resourcesHTML);
+  console.timeEnd("drawResources");
+}
+
 function layerIsOn(el) {
   const buttonoff = document.getElementById(el).classList.contains("buttonoff");
   return !buttonoff;
@@ -1356,6 +1386,7 @@ function getLayer(id) {
   if (id === "togglePopulation") return $("#population");
   if (id === "toggleIce") return $("#ice");
   if (id === "toggleTexture") return $("#texture");
+  if (id === "toggleResources") return $("#goods");
   if (id === "toggleEmblems") return $("#emblems");
   if (id === "toggleLabels") return $("#labels");
   if (id === "toggleIcons") return $("#icons");