From d3ea2df1a2570f99082069a93d8aee9202f4604d Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.com>
Date: Thu, 13 Oct 2022 00:52:49 +0300
Subject: [PATCH] feat: optimizeSpeed rendering (1.87.15)

---
 index.html              |  16 +++--
 main.js                 | 151 +++++++++++++++++++++++++++++++++++-----
 modules/ocean-layers.js |   2 +-
 modules/ui/options.js   |  12 ++++
 versioning.js           |   2 +-
 5 files changed, 157 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index fe421b92..946c53d1 100644
--- a/index.html
+++ b/index.html
@@ -1237,6 +1237,10 @@
                 <td><select id="styleStatesBodyFilter" /></td>
               </tr>
 
+              <tr style="margin-top: 1em">
+                <td><em>Halo is disabled if "Rendering" option is set to "Best performance"</em></td>
+              </tr>
+
               <tr data-tip="Set states halo effect width">
                 <td>Halo width</td>
                 <td>
@@ -1253,7 +1257,7 @@
                 </td>
               </tr>
 
-              <tr data-tip="Select halo effect power (blur). Set to 0 to make it solid line">
+              <tr data-tip="Select halo effect power (blur). Set to 0 to make it solid line" style="margin-bottom: 1em">
                 <td>Halo blur</td>
                 <td>
                   <input id="styleStatesHaloBlur" type="range" min="0" max="10" step="0.01" value="4" />
@@ -1874,9 +1878,9 @@
               </td>
             </tr>
 
-            <tr data-tip="Select shape rendering model">
+            <tr data-tip="Select rendering model. Try to set to 'optimized' if you face performance issues">
               <td></td>
-              <td>Shape rendering</td>
+              <td>Rendering</td>
               <td>
                 <select id="shapeRendering" data-stored="shapeRendering">
                   <option value="geometricPrecision" selected>Best quality</option>
@@ -7801,7 +7805,7 @@
     <script src="config/heightmap-templates.js"></script>
     <script src="config/precreated-heightmaps.js"></script>
     <script src="modules/heightmap-generator.js"></script>
-    <script src="modules/ocean-layers.js"></script>
+    <script src="modules/ocean-layers.js?v=1.87.15"></script>
     <script src="modules/river-generator.js"></script>
     <script src="modules/lakes.js"></script>
     <script src="modules/names-generator.js?v=1.87.14"></script>
@@ -7822,8 +7826,8 @@
     <script src="modules/ui/stylePresets.js"></script>
 
     <script src="modules/ui/general.js?v=1.87.00"></script>
-    <script src="modules/ui/options.js?v=1.87.11"></script>
-    <script src="main.js"></script>
+    <script src="modules/ui/options.js?v=1.87.15"></script>
+    <script src="main.js?v=1.87.15"></script>
 
     <script defer src="modules/relief-icons.js"></script>
     <script defer src="modules/ui/style.js"></script>
diff --git a/main.js b/main.js
index f443111d..36a59cae 100644
--- a/main.js
+++ b/main.js
@@ -82,7 +82,13 @@ let burgIcons = icons.append("g").attr("id", "burgIcons");
 let anchors = icons.append("g").attr("id", "anchors");
 let armies = viewbox.append("g").attr("id", "armies").style("display", "none");
 let markers = viewbox.append("g").attr("id", "markers");
-let fogging = viewbox.append("g").attr("id", "fogging-cont").attr("mask", "url(#fog)").append("g").attr("id", "fogging").style("display", "none");
+let fogging = viewbox
+  .append("g")
+  .attr("id", "fogging-cont")
+  .attr("mask", "url(#fog)")
+  .append("g")
+  .attr("id", "fogging")
+  .style("display", "none");
 let ruler = viewbox.append("g").attr("id", "ruler").style("display", "none");
 let debug = viewbox.append("g").attr("id", "debug");
 
@@ -119,11 +125,20 @@ emblems.append("g").attr("id", "stateEmblems");
 
 // fogging
 fogging.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%");
-fogging.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%").attr("fill", "#e8f0f6").attr("filter", "url(#splotch)");
+fogging
+  .append("rect")
+  .attr("x", 0)
+  .attr("y", 0)
+  .attr("width", "100%")
+  .attr("height", "100%")
+  .attr("fill", "#e8f0f6")
+  .attr("filter", "url(#splotch)");
 
 // assign events separately as not a viewbox child
 scaleBar.on("mousemove", () => tip("Click to open Units Editor")).on("click", () => editUnits());
-legend.on("mousemove", () => tip("Drag to change the position. Click to hide the legend")).on("click", () => clearLegend());
+legend
+  .on("mousemove", () => tip("Drag to change the position. Click to hide the legend"))
+  .on("click", () => clearLegend());
 
 // main data variables
 let grid = {}; // initial graph based on jittered square grid and data
@@ -189,8 +204,20 @@ let svgWidth = graphWidth;
 let svgHeight = graphHeight;
 
 landmass.append("rect").attr("x", 0).attr("y", 0).attr("width", graphWidth).attr("height", graphHeight);
-oceanPattern.append("rect").attr("fill", "url(#oceanic)").attr("x", 0).attr("y", 0).attr("width", graphWidth).attr("height", graphHeight);
-oceanLayers.append("rect").attr("id", "oceanBase").attr("x", 0).attr("y", 0).attr("width", graphWidth).attr("height", graphHeight);
+oceanPattern
+  .append("rect")
+  .attr("fill", "url(#oceanic)")
+  .attr("x", 0)
+  .attr("y", 0)
+  .attr("width", graphWidth)
+  .attr("height", graphHeight);
+oceanLayers
+  .append("rect")
+  .attr("id", "oceanBase")
+  .attr("x", 0)
+  .attr("y", 0)
+  .attr("width", graphWidth)
+  .attr("height", graphHeight);
 
 document.addEventListener("DOMContentLoaded", async () => {
   if (!location.hostname) {
@@ -421,7 +448,21 @@ function applyDefaultBiomesSystem() {
     "Glacier",
     "Wetland"
   ];
-  const color = ["#466eab", "#fbe79f", "#b5b887", "#d2d082", "#c8d68f", "#b6d95d", "#29bc56", "#7dcb35", "#409c43", "#4b6b32", "#96784b", "#d5e7eb", "#0b9131"];
+  const color = [
+    "#466eab",
+    "#fbe79f",
+    "#b5b887",
+    "#d2d082",
+    "#c8d68f",
+    "#b6d95d",
+    "#29bc56",
+    "#7dcb35",
+    "#409c43",
+    "#4b6b32",
+    "#96784b",
+    "#d5e7eb",
+    "#0b9131"
+  ];
   const habitability = [0, 4, 10, 22, 30, 50, 100, 80, 90, 12, 4, 0, 12];
   const iconsDensity = [0, 3, 2, 120, 120, 120, 120, 150, 150, 100, 5, 0, 150];
   const icons = [
@@ -509,6 +550,8 @@ function getViewBoxExtent() {
 
 // active zooming feature
 function invokeActiveZooming() {
+  const isOptimized = shapeRendering.value === "optimizeSpeed";
+
   if (coastline.select("#sea_island").size() && +coastline.select("#sea_island").attr("auto-filter")) {
     // toggle shade/blur filter for coatline on zoom
     const filter = scale > 1.5 && scale <= 2.6 ? null : scale > 2.6 ? "url(#blurFilter)" : "url(#dropShadow)";
@@ -536,7 +579,8 @@ function invokeActiveZooming() {
       const hidden = hideEmblems.checked && (size < 25 || size > 300);
       if (hidden) this.classList.add("hidden");
       else this.classList.remove("hidden");
-      if (!hidden && window.COArenderer && this.children.length && !this.children[0].getAttribute("href")) renderGroupCOAs(this);
+      if (!hidden && window.COArenderer && this.children.length && !this.children[0].getAttribute("href"))
+        renderGroupCOAs(this);
     });
   }
 
@@ -547,7 +591,7 @@ function invokeActiveZooming() {
     .attr("opacity", scale > 10 ? 0.2 : null);
 
   // change states halo width
-  if (!customization) {
+  if (!customization && !isOptimized) {
     const desired = +statesHalo.attr("data-width");
     const haloSize = rn(desired / scale ** 0.8, 2);
     statesHalo.attr("stroke-width", haloSize).style("display", haloSize > 0.1 ? "block" : "none");
@@ -575,7 +619,12 @@ function invokeActiveZooming() {
 }
 
 async function renderGroupCOAs(g) {
-  const [group, type] = g.id === "burgEmblems" ? [pack.burgs, "burg"] : g.id === "provinceEmblems" ? [pack.provinces, "province"] : [pack.states, "state"];
+  const [group, type] =
+    g.id === "burgEmblems"
+      ? [pack.burgs, "burg"]
+      : g.id === "provinceEmblems"
+      ? [pack.provinces, "province"]
+      : [pack.states, "state"];
   for (let use of g.children) {
     const i = +use.dataset.i;
     const id = type + "COA" + i;
@@ -1547,7 +1596,9 @@ function addZones(number = 1) {
     const invader = ra(atWar);
     const target = invader.diplomacy.findIndex(d => d === "Enemy");
 
-    const cell = ra(cells.i.filter(i => cells.state[i] === target && cells.c[i].some(c => cells.state[c] === invader.i)));
+    const cell = ra(
+      cells.i.filter(i => cells.state[i] === target && cells.c[i].some(c => cells.state[c] === invader.i))
+    );
     if (!cell) return;
 
     const cellsArray = [],
@@ -1589,7 +1640,9 @@ function addZones(number = 1) {
 
     const neib = ra(state.neighbors.filter(n => n && !states[n].removed));
     if (!neib) return;
-    const cell = cells.i.find(i => cells.state[i] === state.i && !state.removed && cells.c[i].some(c => cells.state[c] === neib));
+    const cell = cells.i.find(
+      i => cells.state[i] === state.i && !state.removed && cells.c[i].some(c => cells.state[c] === neib)
+    );
     const cellsArray = [];
     const queue = [];
     if (cell) queue.push(cell);
@@ -1610,7 +1663,17 @@ function addZones(number = 1) {
       });
     }
 
-    const rebels = rw({Rebels: 5, Insurgents: 2, Mutineers: 1, Rioters: 1, Separatists: 1, Secessionists: 1, Insurrection: 2, Rebellion: 1, Conspiracy: 2});
+    const rebels = rw({
+      Rebels: 5,
+      Insurgents: 2,
+      Mutineers: 1,
+      Rioters: 1,
+      Separatists: 1,
+      Secessionists: 1,
+      Insurrection: 2,
+      Rebellion: 1,
+      Conspiracy: 2
+    });
     const name = getAdjective(states[neib].name) + " " + rebels;
     zonesData.push({name, type: "Rebels", cells: cellsArray, fill: "url(#hatch3)"});
   }
@@ -1619,7 +1682,14 @@ function addZones(number = 1) {
     const organized = ra(pack.religions.filter(r => r.type === "Organized"));
     if (!organized) return;
 
-    const cell = ra(cells.i.filter(i => cells.religion[i] && cells.religion[i] !== organized.i && cells.c[i].some(c => cells.religion[c] === organized.i)));
+    const cell = ra(
+      cells.i.filter(
+        i =>
+          cells.religion[i] &&
+          cells.religion[i] !== organized.i &&
+          cells.c[i].some(c => cells.religion[c] === organized.i)
+      )
+    );
     if (!cell) return;
     const target = cells.religion[cell];
     const cellsArray = [],
@@ -1685,11 +1755,54 @@ function addZones(number = 1) {
       });
     }
 
-    const adjective = () => ra(["Great", "Silent", "Severe", "Blind", "Unknown", "Loud", "Deadly", "Burning", "Bloody", "Brutal", "Fatal"]);
-    const animal = () => ra(["Ape", "Bear", "Boar", "Cat", "Cow", "Dog", "Pig", "Fox", "Bird", "Horse", "Rat", "Raven", "Sheep", "Spider", "Wolf"]);
-    const color = () => ra(["Golden", "White", "Black", "Red", "Pink", "Purple", "Blue", "Green", "Yellow", "Amber", "Orange", "Brown", "Grey"]);
+    const adjective = () =>
+      ra(["Great", "Silent", "Severe", "Blind", "Unknown", "Loud", "Deadly", "Burning", "Bloody", "Brutal", "Fatal"]);
+    const animal = () =>
+      ra([
+        "Ape",
+        "Bear",
+        "Boar",
+        "Cat",
+        "Cow",
+        "Dog",
+        "Pig",
+        "Fox",
+        "Bird",
+        "Horse",
+        "Rat",
+        "Raven",
+        "Sheep",
+        "Spider",
+        "Wolf"
+      ]);
+    const color = () =>
+      ra([
+        "Golden",
+        "White",
+        "Black",
+        "Red",
+        "Pink",
+        "Purple",
+        "Blue",
+        "Green",
+        "Yellow",
+        "Amber",
+        "Orange",
+        "Brown",
+        "Grey"
+      ]);
 
-    const type = rw({Fever: 5, Pestilence: 2, Flu: 2, Pox: 2, Smallpox: 2, Plague: 4, Cholera: 2, Dropsy: 1, Leprosy: 2});
+    const type = rw({
+      Fever: 5,
+      Pestilence: 2,
+      Flu: 2,
+      Pox: 2,
+      Smallpox: 2,
+      Plague: 4,
+      Cholera: 2,
+      Dropsy: 1,
+      Leprosy: 2
+    });
     const name = rw({[color()]: 4, [animal()]: 2, [adjective()]: 1}) + " " + type;
     zonesData.push({name, type: "Disease", cells: cellsArray, fill: "url(#hatch12)"});
   }
@@ -1812,7 +1925,9 @@ function addZones(number = 1) {
       meanFlux = d3.mean(fl),
       maxFlux = d3.max(fl),
       flux = (maxFlux - meanFlux) / 2 + meanFlux;
-    const rivers = cells.i.filter(i => !used[i] && cells.h[i] < 50 && cells.r[i] && cells.fl[i] > flux && cells.burg[i]);
+    const rivers = cells.i.filter(
+      i => !used[i] && cells.h[i] < 50 && cells.r[i] && cells.fl[i] > flux && cells.burg[i]
+    );
     if (!rivers.length) return;
 
     const cell = +ra(rivers),
diff --git a/modules/ocean-layers.js b/modules/ocean-layers.js
index f21e4722..281fad0a 100644
--- a/modules/ocean-layers.js
+++ b/modules/ocean-layers.js
@@ -38,7 +38,7 @@ window.OceanLayers = (function () {
     for (const t of limits) {
       const layer = chains.filter(c => c[0] === t);
       let path = layer.map(c => round(lineGen(c[1]))).join("");
-      if (path) oceanLayers.append("path").attr("d", path).attr("fill", "#ecf2f9").style("opacity", opacity);
+      if (path) oceanLayers.append("path").attr("d", path).attr("fill", "#ecf2f9").attr("fill-opacity", opacity);
     }
 
     // find eligible cell vertex to start path detection
diff --git a/modules/ui/options.js b/modules/ui/options.js
index 5fd154f0..c072d1cb 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -601,6 +601,18 @@ function randomizeCultureSet() {
 
 function setRendering(value) {
   viewbox.attr("shape-rendering", value);
+
+  if (value === "optimizeSpeed") {
+    // block some styles
+    coastline.select("#sea_island").style("filter", "none");
+    statesHalo.style("display", "none");
+    emblems.style("opacity", 1);
+  } else {
+    // remove style block
+    coastline.select("#sea_island").style("filter", null);
+    statesHalo.style("display", null);
+    emblems.style("opacity", null);
+  }
 }
 
 // generate current year and era name
diff --git a/versioning.js b/versioning.js
index 6a3f6fc5..ea45eff7 100644
--- a/versioning.js
+++ b/versioning.js
@@ -1,7 +1,7 @@
 "use strict";
 
 // version and caching control
-const version = "1.87.14"; // generator version, update each time
+const version = "1.87.15"; // generator version, update each time
 
 {
   document.title += " v" + version;