From 1573fad58d3ddbc9051cd4ba8d44782af2157220 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Sun, 8 May 2022 19:22:15 +0300
Subject: [PATCH] annotate template strings for syntax hightlight and format

---
 components/fill-box.js           |  10 +-
 main.js                          |  14 +-
 modules/burgs-and-states.js      |   4 +-
 modules/cultures-generator.js    |  10 +-
 modules/io/auto-update.js        |   4 +-
 modules/io/load.js               |  14 +-
 modules/ui/biomes-editor.js      |  49 ++++--
 modules/ui/burg-editor.js        |  10 +-
 modules/ui/burgs-overview.js     |  46 +++---
 modules/ui/coastline-editor.js   |  79 ++++++---
 modules/ui/cultures-editor.js    |  81 +++++++---
 modules/ui/diplomacy-editor.js   |   6 +-
 modules/ui/editors.js            |  50 +++---
 modules/ui/emblems-editor.js     | 264 ++++++++++++++++++++-----------
 modules/ui/general.js            |  19 ++-
 modules/ui/heightmap-editor.js   |  21 ++-
 modules/ui/ice-editor.js         |  41 +++--
 modules/ui/labels-editor.js      |   7 +-
 modules/ui/lakes-editor.js       |  73 ++++++---
 modules/ui/military-overview.js  |  60 ++++---
 modules/ui/namesbase-editor.js   |   8 +-
 modules/ui/options.js            |  16 +-
 modules/ui/provinces-editor.js   |  49 +++---
 modules/ui/regiments-overview.js |   8 +-
 modules/ui/relief-editor.js      |   2 +-
 modules/ui/religions-editor.js   |  65 +++++---
 modules/ui/rivers-overview.js    |  18 ++-
 modules/ui/routes-editor.js      | 130 +++++++++------
 modules/ui/states-editor.js      |  87 +++++++---
 modules/ui/style.js              |   4 +-
 modules/ui/submap.js             |   3 +-
 modules/ui/tools.js              |   2 +-
 modules/ui/units-editor.js       |   5 +-
 modules/ui/world-configurator.js |   8 +-
 modules/ui/zones-editor.js       |   9 +-
 35 files changed, 816 insertions(+), 460 deletions(-)

diff --git a/components/fill-box.js b/components/fill-box.js
index 02912f3b..b4d075c3 100644
--- a/components/fill-box.js
+++ b/components/fill-box.js
@@ -1,7 +1,5 @@
-// fill-box cannot use Shadow DOM as it needs access to svg hatches
-// append stylesheet
 {
-  const style = `
+  const style = /* css */ `
     fill-box:not([disabled]) {
       cursor: pointer;
     }
@@ -14,7 +12,8 @@
     fill-box > svg > rect {
       stroke: #666666;
       stroke-width: 2;
-    }`;
+    }
+  `;
 
   const styleElement = document.createElement("style");
   styleElement.setAttribute("type", "text/css");
@@ -24,7 +23,7 @@
 
 {
   const template = document.createElement("template");
-  template.innerHTML = `
+  template.innerHTML = /* html */ `
     <svg>
       <rect x="0" y="0" width="100%" height="100%">
     </svg>
@@ -70,5 +69,6 @@
     }
   }
 
+  // cannot use Shadow DOM here as need an access to svg hatches
   customElements.define("fill-box", FillBox);
 }
diff --git a/main.js b/main.js
index cdb329af..39a70d29 100644
--- a/main.js
+++ b/main.js
@@ -176,8 +176,8 @@ oceanLayers.append("rect").attr("id", "oceanBase").attr("x", 0).attr("y", 0).att
 document.addEventListener("DOMContentLoaded", async () => {
   if (!location.hostname) {
     const wiki = "https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Run-FMG-locally";
-    alertMessage.innerHTML = `Fantasy Map Generator cannot run serverless.
-    Follow the <a href="${wiki}" target="_blank">instructions</a> on how you can easily run a local web-server`;
+    alertMessage.innerHTML = /* html */ `Fantasy Map Generator cannot run serverless. Follow the <a href="${wiki}" target="_blank">instructions</a> on how you can
+      easily run a local web-server`;
 
     $("#alert").dialog({
       resizable: false,
@@ -455,9 +455,10 @@ function showWelcomeMessage() {
   const discord = link("https://discordapp.com/invite/X7E84HU", "Discord server");
   const patreon = link("https://www.patreon.com/azgaar", "Patreon");
 
-  alertMessage.innerHTML = `The Fantasy Map Generator is updated up to version <strong>${version}</strong>.
-    This version is compatible with ${changelog}, loaded <i>.map</i> files will be auto-updated.
-    <ul><strong>Latest changes:</strong>
+  alertMessage.innerHTML = /* html */ `The Fantasy Map Generator is updated up to version <strong>${version}</strong>. This version is compatible with ${changelog},
+    loaded <i>.map</i> files will be auto-updated.
+    <ul>
+      <strong>Latest changes:</strong>
       <li>Submap tool by Goteguru</li>
       <li>Resample tool by Goteguru</li>
       <li>Pre-defined heightmaps</li>
@@ -713,8 +714,7 @@ async function generate() {
     const parsedError = parseError(error);
     clearMainTip();
 
-    alertMessage.innerHTML = `An error has occurred on map generation. Please retry.
-      <br>If error is critical, clear the stored data and try again.
+    alertMessage.innerHTML = /* html */ `An error has occurred on map generation. Please retry. <br />If error is critical, clear the stored data and try again.
       <p id="errorBox">${parsedError}</p>`;
     $("#alert").dialog({
       resizable: false,
diff --git a/modules/burgs-and-states.js b/modules/burgs-and-states.js
index e64e3e77..f3f5164e 100644
--- a/modules/burgs-and-states.js
+++ b/modules/burgs-and-states.js
@@ -41,7 +41,7 @@ window.BurgsAndStates = (function () {
       if (sorted.length < count * 10) {
         count = Math.floor(sorted.length / 10);
         if (!count) {
-          WARN && console.warn(`There is no populated cells. Cannot generate states`);
+          WARN && console.warn("There is no populated cells. Cannot generate states");
           return burgs;
         } else {
           WARN && console.warn(`Not enough populated cells (${sorted.length}). Will generate only ${count} states`);
@@ -883,7 +883,7 @@ window.BurgsAndStates = (function () {
       dd.forEach((r, d) => {
         if (r !== "Ally" || states[d].diplomacy.includes("Vassal")) return;
         if (states[d].diplomacy[attacker] !== "Rival" && ap / dp > 2 * gauss(1.6, 0.8, 0, 10, 2)) {
-          const reason = states[d].diplomacy.includes("Enemy") ? `Being already at war,` : `Frightened by ${an},`;
+          const reason = states[d].diplomacy.includes("Enemy") ? "Being already at war," : `Frightened by ${an},`;
           war.push(`${reason} ${states[d].name} severed the defense pact with ${dn}`);
           dd[d] = states[d].diplomacy[defender] = "Suspicion";
           return;
diff --git a/modules/cultures-generator.js b/modules/cultures-generator.js
index b4733260..37f5bc93 100644
--- a/modules/cultures-generator.js
+++ b/modules/cultures-generator.js
@@ -15,9 +15,8 @@ window.Cultures = (function () {
       if (!count) {
         WARN && console.warn(`There are no populated cells. Cannot generate cultures`);
         pack.cultures = [{name: "Wildlands", i: 0, base: 1, shield: "round"}];
-        alertMessage.innerHTML = `
-          The climate is harsh and people cannot live in this world.<br>
-          No cultures, states and burgs will be created.<br>
+        alertMessage.innerHTML = /* html */ ` The climate is harsh and people cannot live in this world.<br />
+          No cultures, states and burgs will be created.<br />
           Please consider changing climate settings in the World Configurator`;
         $("#alert").dialog({
           resizable: false,
@@ -31,9 +30,8 @@ window.Cultures = (function () {
         return;
       } else {
         WARN && console.warn(`Not enough populated cells (${populated.length}). Will generate only ${count} cultures`);
-        alertMessage.innerHTML = `
-          There are only ${populated.length} populated cells and it's insufficient livable area.<br>
-          Only ${count} out of ${culturesInput.value} requested cultures will be generated.<br>
+        alertMessage.innerHTML = /* html */ ` There are only ${populated.length} populated cells and it's insufficient livable area.<br />
+          Only ${count} out of ${culturesInput.value} requested cultures will be generated.<br />
           Please consider changing climate settings in the World Configurator`;
         $("#alert").dialog({
           resizable: false,
diff --git a/modules/io/auto-update.js b/modules/io/auto-update.js
index 064af0ad..08b9c056 100644
--- a/modules/io/auto-update.js
+++ b/modules/io/auto-update.js
@@ -69,7 +69,7 @@ export function resolveVersionConflicts(version) {
     labels.selectAll("textPath").each(function () {
       const text = this.textContent;
       const shift = this.getComputedTextLength() / -1.5;
-      this.innerHTML = `<tspan x="${shift}">${text}</tspan>`;
+      this.innerHTML = /* html */ `<tspan x="${shift}">${text}</tspan>`;
     });
 
     // v1.0 added new biome - Wetland
@@ -362,7 +362,7 @@ export function resolveVersionConflicts(version) {
     const pattern = document.getElementById("oceanic");
     const filter = pattern.firstElementChild.getAttribute("filter");
     const href = filter ? "./images/" + filter.replace("url(#", "").replace(")", "") + ".png" : "";
-    pattern.innerHTML = `<image id="oceanicPattern" href=${href} width="100" height="100" opacity="0.2"></image>`;
+    pattern.innerHTML = /* html */ `<image id="oceanicPattern" href=${href} width="100" height="100" opacity="0.2"></image>`;
   }
 
   if (version < 1.62) {
diff --git a/modules/io/load.js b/modules/io/load.js
index 75687c05..f031e69f 100644
--- a/modules/io/load.js
+++ b/modules/io/load.js
@@ -50,8 +50,8 @@ function loadMapPrompt(blob) {
     return;
   }
 
-  alertMessage.innerHTML = `Are you sure you want to load saved map?<br>
-  All unsaved changes made to the current map will be lost`;
+  alertMessage.innerHTML = /* html */ `Are you sure you want to load saved map?<br />
+    All unsaved changes made to the current map will be lost`;
   $("#alert").dialog({
     resizable: false,
     title: "Load saved map",
@@ -94,9 +94,10 @@ function loadMapFromURL(maplink, random) {
 
 function showUploadErrorMessage(error, URL, random) {
   ERROR && console.error(error);
-  alertMessage.innerHTML = `Cannot load map from the ${link(URL, "link provided")}.
-    ${random ? `A new random map is generated. ` : ""}
-    Please ensure the linked file is reachable and CORS is allowed on server side`;
+  alertMessage.innerHTML = /* html */ `Cannot load map from the ${link(URL, "link provided")}. ${
+    random ? `A new random map is generated. ` : ""
+  } Please ensure the
+  linked file is reachable and CORS is allowed on server side`;
   $("#alert").dialog({
     title: "Loading error",
     width: "32em",
@@ -563,8 +564,7 @@ async function parseLoadedData(data) {
     ERROR && console.error(error);
     clearMainTip();
 
-    alertMessage.innerHTML = `An error is occured on map loading. Select a different file to load,
-      <br>generate a new random map or cancel the loading
+    alertMessage.innerHTML = /* html */ `An error is occured on map loading. Select a different file to load, <br />generate a new random map or cancel the loading
       <p id="errorBox">${parseError(error)}</p>`;
 
     $("#alert").dialog({
diff --git a/modules/ui/biomes-editor.js b/modules/ui/biomes-editor.js
index 527e0b08..868a2505 100644
--- a/modules/ui/biomes-editor.js
+++ b/modules/ui/biomes-editor.js
@@ -92,23 +92,38 @@ function editBiomes() {
       totalArea += area;
       totalPopulation += population;
 
-      lines += `<div class="states biomes" data-id="${i}" data-name="${b.name[i]}" data-habitability="${b.habitability[i]}"
-      data-cells=${b.cells[i]} data-area=${area} data-population=${population} data-color=${b.color[i]}>
-        <fill-box fill="${b.color[i]}"></fill-box>
-        <input data-tip="Biome name. Click and type to change" class="biomeName" value="${b.name[i]}" autocorrect="off" spellcheck="false">
-        <span data-tip="Biome habitability percent" class="hide">%</span>
-        <input data-tip="Biome habitability percent. Click and set new value to change" type="number" min=0 max=9999 class="biomeHabitability hide" value=${
-          b.habitability[i]
-        }>
-        <span data-tip="Cells count" class="icon-check-empty hide"></span>
-        <div data-tip="Cells count" class="biomeCells hide">${b.cells[i]}</div>
-        <span data-tip="Biome area" style="padding-right: 4px" class="icon-map-o hide"></span>
-        <div data-tip="Biome area" class="biomeArea hide">${si(area) + unit}</div>
-        <span data-tip="${populationTip}" class="icon-male hide"></span>
-        <div data-tip="${populationTip}" class="biomePopulation hide">${si(population)}</div>
-        <span data-tip="Open Wikipedia article about the biome" class="icon-info-circled pointer hide"></span>
-        ${i > 12 && !b.cells[i] ? '<span data-tip="Remove the custom biome" class="icon-trash-empty hide"></span>' : ""}
-      </div>`;
+      lines += /* html */ `
+        <div
+          class="states biomes"
+          data-id="${i}"
+          data-name="${b.name[i]}"
+          data-habitability="${b.habitability[i]}"
+          data-cells=${b.cells[i]}
+          data-area=${area}
+          data-population=${population}
+          data-color=${b.color[i]}
+        >
+          <fill-box fill="${b.color[i]}"></fill-box>
+          <input data-tip="Biome name. Click and type to change" class="biomeName" value="${b.name[i]}" autocorrect="off" spellcheck="false" />
+          <span data-tip="Biome habitability percent" class="hide">%</span>
+          <input
+            data-tip="Biome habitability percent. Click and set new value to change"
+            type="number"
+            min="0"
+            max="9999"
+            class="biomeHabitability hide"
+            value=${b.habitability[i]}
+          />
+          <span data-tip="Cells count" class="icon-check-empty hide"></span>
+          <div data-tip="Cells count" class="biomeCells hide">${b.cells[i]}</div>
+          <span data-tip="Biome area" style="padding-right: 4px" class="icon-map-o hide"></span>
+          <div data-tip="Biome area" class="biomeArea hide">${si(area) + unit}</div>
+          <span data-tip="${populationTip}" class="icon-male hide"></span>
+          <div data-tip="${populationTip}" class="biomePopulation hide">${si(population)}</div>
+          <span data-tip="Open Wikipedia article about the biome" class="icon-info-circled pointer hide"></span>
+          ${i > 12 && !b.cells[i] ? '<span data-tip="Remove the custom biome" class="icon-trash-empty hide"></span>' : ""}
+        </div>
+      `;
     }
     body.innerHTML = lines;
 
diff --git a/modules/ui/burg-editor.js b/modules/ui/burg-editor.js
index 0e7aacf0..ea3a76f2 100644
--- a/modules/ui/burg-editor.js
+++ b/modules/ui/burg-editor.js
@@ -281,10 +281,10 @@ function editBurg(id) {
     const burgsToRemove = burgsInGroup.filter(b => !(pack.burgs[b].capital || pack.burgs[b].lock));
     const capital = burgsToRemove.length < burgsInGroup.length;
 
-    alertMessage.innerHTML = `Are you sure you want to remove
-      ${basic || capital ? "all unlocked elements in the burg group" : "the entire burg group"}?
-      <br>Please note that capital or locked burgs will not be deleted.
-      <br><br>Burgs to be removed: ${burgsToRemove.length}`;
+    alertMessage.innerHTML = /* html */ `Are you sure you want to remove ${
+      basic || capital ? "all unlocked elements in the burg group" : "the entire burg group"
+    }?
+      <br />Please note that capital or locked burgs will not be deleted. <br /><br />Burgs to be removed: ${burgsToRemove.length}`;
     $("#alert").dialog({
       resizable: false,
       title: "Remove burg group",
@@ -545,7 +545,7 @@ function editBurg(id) {
   function removeSelectedBurg() {
     const id = +elSelected.attr("data-id");
     if (pack.burgs[id].capital) {
-      alertMessage.innerHTML = `You cannot remove the burg as it is a state capital.<br><br>
+      alertMessage.innerHTML = /* html */ `You cannot remove the burg as it is a state capital.<br /><br />
         You can change the capital using Burgs Editor (shift + T)`;
       $("#alert").dialog({
         resizable: false,
diff --git a/modules/ui/burgs-overview.js b/modules/ui/burgs-overview.js
index 454671cb..bf819465 100644
--- a/modules/ui/burgs-overview.js
+++ b/modules/ui/burgs-overview.js
@@ -82,22 +82,30 @@ function overviewBurgs() {
       const province = prov ? pack.provinces[prov].name : "";
       const culture = pack.cultures[b.culture].name;
 
-      lines += `<div class="states" data-id=${b.i} data-name="${
-        b.name
-      }" data-state="${state}" data-province="${province}" data-culture="${culture}" data-population=${population} data-type="${type}">
+      lines += /* html */ `<div
+        class="states"
+        data-id=${b.i}
+        data-name="${b.name}"
+        data-state="${state}"
+        data-province="${province}"
+        data-culture="${culture}"
+        data-population=${population}
+        data-type="${type}"
+      >
         <span data-tip="Click to zoom into view" class="icon-dot-circled pointer"></span>
-        <input data-tip="Burg name. Click and type to change" class="burgName" value="${b.name}" autocorrect="off" spellcheck="false">
-        <input data-tip="Burg province" class="burgState" value="${province}" disabled>
-        <input data-tip="Burg state" class="burgState" value="${state}" disabled>
-        <select data-tip="Dominant culture. Click to change burg culture (to change cell culture use Cultures Editor)" class="stateCulture">${getCultureOptions(
-          b.culture
-        )}</select>
+        <input data-tip="Burg name. Click and type to change" class="burgName" value="${b.name}" autocorrect="off" spellcheck="false" />
+        <input data-tip="Burg province" class="burgState" value="${province}" disabled />
+        <input data-tip="Burg state" class="burgState" value="${state}" disabled />
+        <select data-tip="Dominant culture. Click to change burg culture (to change cell culture use Cultures Editor)" class="stateCulture">
+          ${getCultureOptions(b.culture)}
+        </select>
         <span data-tip="Burg population" class="icon-male"></span>
-        <input data-tip="Burg population. Type to change" class="burgPopulation" value=${si(population)}>
+        <input data-tip="Burg population. Type to change" class="burgPopulation" value=${si(population)} />
         <div class="burgType">
-          <span data-tip="${b.capital ? " This burg is a state capital" : "Click to assign a capital status"}" class="icon-star-empty${
-        b.capital ? "" : " inactive pointer"
-      }"></span>
+          <span
+            data-tip="${b.capital ? " This burg is a state capital" : "Click to assign a capital status"}"
+            class="icon-star-empty${b.capital ? "" : " inactive pointer"}"
+          ></span>
           <span data-tip="Click to toggle port status" class="icon-anchor pointer${b.port ? "" : " inactive"}" style="font-size:.9em"></span>
         </div>
         <span data-tip="Edit burg" class="icon-pencil"></span>
@@ -312,11 +320,12 @@ function overviewBurgs() {
     const treeLayout = d3.pack().size([w, h]).padding(3);
 
     // prepare svg
-    alertMessage.innerHTML = `<select id="burgsTreeType" style="display:block; margin-left:13px; font-size:11px">
+    alertMessage.innerHTML = /* html */ `<select id="burgsTreeType" style="display:block; margin-left:13px; font-size:11px">
       <option value="states" selected>Group by state</option>
       <option value="cultures">Group by culture</option>
       <option value="parent">Group by province and state</option>
-      <option value="provinces">Group by province</option></select>`;
+      <option value="provinces">Group by province</option>
+    </select>`;
     alertMessage.innerHTML += `<div id='burgsInfo' class='chartInfo'>&#8205;</div>`;
     const svg = d3
       .select("#alertMessage")
@@ -349,7 +358,7 @@ function overviewBurgs() {
       const parent = d.parent.data.name;
       const population = si(d.value * populationRate * urbanization);
 
-      burgsInfo.innerHTML = `${name}. ${parent}. Population: ${population}`;
+      burgsInfo.innerHTML = /* html */ `${name}. ${parent}. Population: ${population}`;
       burgHighlightOn(ev);
       tip("Click to zoom into view");
     }
@@ -483,9 +492,8 @@ function overviewBurgs() {
   }
 
   function renameBurgsInBulk() {
-    alertMessage.innerHTML = `Download burgs list as a text file, make changes and re-upload the file.
-    Make sure the file is a plain text document with each name on its own line (the dilimiter is CRLF).
-    If you do not want to change the name, just leave it as is`;
+    alertMessage.innerHTML = /* html */ `Download burgs list as a text file, make changes and re-upload the file. Make sure the file is a plain text document with each
+    name on its own line (the dilimiter is CRLF). If you do not want to change the name, just leave it as is`;
 
     $("#alert").dialog({
       title: "Burgs bulk renaming",
diff --git a/modules/ui/coastline-editor.js b/modules/ui/coastline-editor.js
index b1c357a9..faa50b8d 100644
--- a/modules/ui/coastline-editor.js
+++ b/modules/ui/coastline-editor.js
@@ -5,7 +5,8 @@ function editCoastline(node = d3.event.target) {
   if (layerIsOn("toggleCells")) toggleCells();
 
   $("#coastlineEditor").dialog({
-    title: "Edit Coastline", resizable: false,
+    title: "Edit Coastline",
+    resizable: false,
     position: {my: "center top+20", at: "top", of: d3.event, collision: "fit"},
     close: closeCoastlineEditor
   });
@@ -33,13 +34,27 @@ function editCoastline(node = d3.event.target) {
     const v = pack.features[f].vertices; // coastline outer vertices
 
     const l = pack.cells.i.length;
-    const c = [... new Set(v.map(v => pack.vertices.c[v]).flat())].filter(c => c < l);
-    debug.select("#vertices").selectAll("polygon").data(c).enter().append("polygon")
-      .attr("points", d => getPackPolygon(d)).attr("data-c", d => d);
+    const c = [...new Set(v.map(v => pack.vertices.c[v]).flat())].filter(c => c < l);
+    debug
+      .select("#vertices")
+      .selectAll("polygon")
+      .data(c)
+      .enter()
+      .append("polygon")
+      .attr("points", d => getPackPolygon(d))
+      .attr("data-c", d => d);
 
-    debug.select("#vertices").selectAll("circle").data(v).enter().append("circle")
-      .attr("cx", d => pack.vertices.p[d][0]).attr("cy", d => pack.vertices.p[d][1])
-      .attr("r", .4).attr("data-v", d => d).call(d3.drag().on("drag", dragVertex))
+    debug
+      .select("#vertices")
+      .selectAll("circle")
+      .data(v)
+      .enter()
+      .append("circle")
+      .attr("cx", d => pack.vertices.p[d][0])
+      .attr("cy", d => pack.vertices.p[d][1])
+      .attr("r", 0.4)
+      .attr("data-v", d => d)
+      .call(d3.drag().on("drag", dragVertex))
       .on("mousemove", () => tip("Drag to move the vertex, please use for fine-tuning only. Edit heightmap to change actual cell heights"));
 
     const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
@@ -48,12 +63,16 @@ function editCoastline(node = d3.event.target) {
   }
 
   function dragVertex() {
-    const x = rn(d3.event.x, 2), y = rn(d3.event.y, 2);
+    const x = rn(d3.event.x, 2),
+      y = rn(d3.event.y, 2);
     this.setAttribute("cx", x);
     this.setAttribute("cy", y);
     const v = +this.dataset.v;
     pack.vertices.p[v] = [x, y];
-    debug.select("#vertices").selectAll("polygon").attr("points", d => getPackPolygon(d));
+    debug
+      .select("#vertices")
+      .selectAll("polygon")
+      .attr("points", d => getPackPolygon(d));
     redrawCoastline();
   }
 
@@ -61,11 +80,14 @@ function editCoastline(node = d3.event.target) {
     lineGen.curve(d3.curveBasisClosed);
     const f = +elSelected.attr("data-f");
     const vertices = pack.features[f].vertices;
-    const points = clipPoly(vertices.map(v => pack.vertices.p[v]), 1);
+    const points = clipPoly(
+      vertices.map(v => pack.vertices.p[v]),
+      1
+    );
     const d = round(lineGen(points));
     elSelected.attr("d", d);
-    defs.select("mask#land > path#land_"+f).attr("d", d); // update land mask
-    defs.select("mask#water > path#water_"+f).attr("d", d); // update water mask
+    defs.select("mask#land > path#land_" + f).attr("d", d); // update land mask
+    defs.select("mask#water > path#water_" + f).attr("d", d); // update water mask
 
     const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
     const area = Math.abs(d3.polygonArea(points));
@@ -73,12 +95,12 @@ function editCoastline(node = d3.event.target) {
   }
 
   function showGroupSection() {
-    document.querySelectorAll("#coastlineEditor > button").forEach(el => el.style.display = "none");
+    document.querySelectorAll("#coastlineEditor > button").forEach(el => (el.style.display = "none"));
     document.getElementById("coastlineGroupsSelection").style.display = "inline-block";
   }
 
   function hideGroupSection() {
-    document.querySelectorAll("#coastlineEditor > button").forEach(el => el.style.display = "inline-block");
+    document.querySelectorAll("#coastlineEditor > button").forEach(el => (el.style.display = "inline-block"));
     document.getElementById("coastlineGroupsSelection").style.display = "none";
     document.getElementById("coastlineGroupName").style.display = "none";
     document.getElementById("coastlineGroupName").value = "";
@@ -90,7 +112,7 @@ function editCoastline(node = d3.event.target) {
     const select = document.getElementById("coastlineGroup");
     select.options.length = 0; // remove all options
 
-    coastline.selectAll("g").each(function() {
+    coastline.selectAll("g").each(function () {
       select.options.add(new Option(this.id, this.id, false, this.id === group));
     });
   }
@@ -111,8 +133,14 @@ function editCoastline(node = d3.event.target) {
   }
 
   function createNewGroup() {
-    if (!this.value) {tip("Please provide a valid group name"); return;}
-    const group = this.value.toLowerCase().replace(/ /g, "_").replace(/[^\w\s]/gi, "");
+    if (!this.value) {
+      tip("Please provide a valid group name");
+      return;
+    }
+    const group = this.value
+      .toLowerCase()
+      .replace(/ /g, "_")
+      .replace(/[^\w\s]/gi, "");
 
     if (document.getElementById(group)) {
       tip("Element with this id already exists. Please provide a unique name", false, "error");
@@ -155,11 +183,14 @@ function editCoastline(node = d3.event.target) {
     }
 
     const count = elSelected.node().parentNode.childElementCount;
-    alertMessage.innerHTML = `Are you sure you want to remove the group?
-      All coastline elements of the group (${count}) will be moved under <i>sea_island</i> group`;
-    $("#alert").dialog({resizable: false, title: "Remove coastline group", width:"26em",
+    alertMessage.innerHTML = /* html */ `Are you sure you want to remove the group? All coastline elements of the group (${count}) will be moved under
+      <i>sea_island</i> group`;
+    $("#alert").dialog({
+      resizable: false,
+      title: "Remove coastline group",
+      width: "26em",
       buttons: {
-        Remove: function() {
+        Remove: function () {
           $(this).dialog("close");
           const sea = document.getElementById("sea_island");
           const groupEl = document.getElementById(group);
@@ -170,7 +201,9 @@ function editCoastline(node = d3.event.target) {
           document.getElementById("coastlineGroup").selectedOptions[0].remove();
           document.getElementById("coastlineGroup").value = "sea_island";
         },
-        Cancel: function() {$(this).dialog("close");}
+        Cancel: function () {
+          $(this).dialog("close");
+        }
       }
     });
   }
@@ -184,4 +217,4 @@ function editCoastline(node = d3.event.target) {
     debug.select("#vertices").remove();
     unselect();
   }
-}
\ No newline at end of file
+}
diff --git a/modules/ui/cultures-editor.js b/modules/ui/cultures-editor.js
index d87d935f..1b869c78 100644
--- a/modules/ui/cultures-editor.js
+++ b/modules/ui/cultures-editor.js
@@ -84,22 +84,37 @@ function editCultures() {
 
       if (!c.i) {
         // Uncultured (neutral) line
-        lines += `<div class="states" data-id=${c.i} data-name="${c.name}" data-color="" data-cells=${c.cells}
-        data-area=${area} data-population=${population} data-base=${c.base} data-type="" data-expansionism="" data-emblems="${c.shield}">
+        lines += /* html */ `<div
+          class="states"
+          data-id=${c.i}
+          data-name="${c.name}"
+          data-color=""
+          data-cells=${c.cells}
+          data-area=${area}
+          data-population=${population}
+          data-base=${c.base}
+          data-type=""
+          data-expansionism=""
+          data-emblems="${c.shield}"
+        >
           <svg width="9" height="9" class="placeholder"></svg>
-          <input data-tip="Neutral culture name. Click and type to change" class="cultureName italic" value="${c.name}" autocorrect="off" spellcheck="false">
+          <input data-tip="Neutral culture name. Click and type to change" class="cultureName italic" value="${c.name}" autocorrect="off" spellcheck="false" />
           <span class="icon-cw placeholder"></span>
           <span data-tip="Cells count" class="icon-check-empty hide"></span>
           <div data-tip="Cells count" class="stateCells hide">${c.cells}</div>
           <span class="icon-resize-full placeholder hide"></span>
-          <input class="statePower placeholder hide" type="number">
-          <select class="cultureType placeholder">${getTypeOptions(c.type)}</select>
+          <input class="statePower placeholder hide" type="number" />
+          <select class="cultureType placeholder">
+            ${getTypeOptions(c.type)}
+          </select>
           <span data-tip="Culture area" style="padding-right: 4px" class="icon-map-o hide"></span>
           <div data-tip="Culture area" class="biomeArea hide">${si(area) + unit}</div>
           <span data-tip="${populationTip}" class="icon-male hide"></span>
           <div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
           <span data-tip="Click to re-generate names for burgs with this culture assigned" class="icon-arrows-cw hide"></span>
-          <select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names" class="cultureBase">${getBaseOptions(c.base)}</select>
+          <select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names" class="cultureBase">
+            ${getBaseOptions(c.base)}
+          </select>
           ${
             selectShape
               ? `<select data-tip="Emblem shape associated with culture. Click to change" class="cultureShape hide">${getShapeOptions(c.shield)}</select>`
@@ -109,24 +124,45 @@ function editCultures() {
         continue;
       }
 
-      lines += `<div class="states cultures" data-id=${c.i} data-name="${c.name}" data-color="${c.color}" data-cells=${c.cells}
-      data-area=${area} data-population=${population} data-base=${c.base} data-type=${c.type} data-expansionism=${c.expansionism} data-emblems="${c.shield}">
+      lines += /* html */ `<div
+        class="states cultures"
+        data-id=${c.i}
+        data-name="${c.name}"
+        data-color="${c.color}"
+        data-cells=${c.cells}
+        data-area=${area}
+        data-population=${population}
+        data-base=${c.base}
+        data-type=${c.type}
+        data-expansionism=${c.expansionism}
+        data-emblems="${c.shield}"
+      >
         <fill-box fill="${c.color}"></fill-box>
-        <input data-tip="Culture name. Click and type to change" class="cultureName" value="${c.name}" autocorrect="off" spellcheck="false">
+        <input data-tip="Culture name. Click and type to change" class="cultureName" value="${c.name}" autocorrect="off" spellcheck="false" />
         <span data-tip="Regenerate culture name" class="icon-cw hiddenIcon" style="visibility: hidden"></span>
         <span data-tip="Cells count" class="icon-check-empty hide"></span>
         <div data-tip="Cells count" class="stateCells hide">${c.cells}</div>
         <span data-tip="Culture expansionism. Defines competitive size" class="icon-resize-full hide"></span>
-        <input data-tip="Culture expansionism. Defines competitive size. Click to change, then click Recalculate to apply change" class="statePower hide" type="number" min=0 max=99 step=.1 value=${
-          c.expansionism
-        }>
-        <select data-tip="Culture type. Defines growth model. Click to change" class="cultureType">${getTypeOptions(c.type)}</select>
+        <input
+          data-tip="Culture expansionism. Defines competitive size. Click to change, then click Recalculate to apply change"
+          class="statePower hide"
+          type="number"
+          min="0"
+          max="99"
+          step=".1"
+          value=${c.expansionism}
+        />
+        <select data-tip="Culture type. Defines growth model. Click to change" class="cultureType">
+          ${getTypeOptions(c.type)}
+        </select>
         <span data-tip="Culture area" style="padding-right: 4px" class="icon-map-o hide"></span>
         <div data-tip="Culture area" class="biomeArea hide">${si(area) + unit}</div>
         <span data-tip="${populationTip}" class="icon-male hide"></span>
         <div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
         <span data-tip="Click to re-generate names for burgs with this culture assigned" class="icon-arrows-cw hide"></span>
-        <select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names" class="cultureBase">${getBaseOptions(c.base)}</select>
+        <select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names" class="cultureBase">
+          ${getBaseOptions(c.base)}
+        </select>
         ${
           selectShape
             ? `<select data-tip="Emblem shape associated with culture. Click to change" class="cultureShape hide">${getShapeOptions(c.shield)}</select>`
@@ -200,7 +236,7 @@ function editCultures() {
       const rural = c.rural * populationRate;
       const urban = c.urban * populationRate * urbanization;
       const population = rural + urban > 0 ? si(rn(rural + urban)) + " people" : "Extinct";
-      info.innerHTML = `${c.name} culture. ${c.type}. ${population}`;
+      info.innerHTML = /* html */ `${c.name} culture. ${c.type}. ${population}`;
       tip("Drag to change parent, drag to itself to move to the top level. Hold CTRL and click to change abbreviation");
     }
 
@@ -347,10 +383,9 @@ function editCultures() {
     const l = n => Number(n).toLocaleString();
     const burgs = pack.burgs.filter(b => !b.removed && b.culture === culture);
 
-    alertMessage.innerHTML = `
-    Rural: <input type="number" min=0 step=1 id="ruralPop" value=${rural} style="width:6em">
-    Urban: <input type="number" min=0 step=1 id="urbanPop" value=${urban} style="width:6em" ${burgs.length ? "" : "disabled"}>
-    <p>Total population: ${l(total)} ⇒ <span id="totalPop">${l(total)}</span> (<span id="totalPopPerc">100</span>%)</p>`;
+    alertMessage.innerHTML = /* html */ ` Rural: <input type="number" min="0" step="1" id="ruralPop" value=${rural} style="width:6em" /> Urban:
+      <input type="number" min="0" step="1" id="urbanPop" value=${urban} style="width:6em" ${burgs.length ? "" : "disabled"} />
+      <p>Total population: ${l(total)} ⇒ <span id="totalPop">${l(total)}</span> (<span id="totalPopPerc">100</span>%)</p>`;
 
     const update = function () {
       const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
@@ -898,8 +933,10 @@ function editCultures() {
     const shapes = Object.keys(COA.shields.types)
       .map(type => Object.keys(COA.shields[type]))
       .flat();
-    const populated = pack.cells.pop.map((c, i) => c? i: null).filter(c => c);
-    cultures.forEach((item) => {if (item.i) item.removed = true});
+    const populated = pack.cells.pop.map((c, i) => (c ? i : null)).filter(c => c);
+    cultures.forEach(item => {
+      if (item.i) item.removed = true;
+    });
     for (const c of csv.iterator((a, b) => +a[0] > +b[0])) {
       let current;
       if (+c.id < cultures.length) {
@@ -934,7 +971,7 @@ function editCultures() {
       current.base = nameBaseIndex === -1 ? 0 : nameBaseIndex;
     }
 
-    cultures.filter(c => c.removed).forEach(c => removeCultureModel(c.i))
+    cultures.filter(c => c.removed).forEach(c => removeCultureModel(c.i));
 
     drawCultures();
     refreshCulturesEditor();
diff --git a/modules/ui/diplomacy-editor.js b/modules/ui/diplomacy-editor.js
index bed60a3b..c4e546c7 100644
--- a/modules/ui/diplomacy-editor.js
+++ b/modules/ui/diplomacy-editor.js
@@ -81,7 +81,7 @@ function editDiplomacy() {
     const selectedName = states[selectedId].name;
 
     COArenderer.trigger("stateCOA" + selectedId, states[selectedId].coa);
-    let lines = `<div class="states Self" data-id=${selectedId} data-tip="List below shows relations to ${selectedName}">
+    let lines = /* html */ `<div class="states Self" data-id=${selectedId} data-tip="List below shows relations to ${selectedName}">
       <div style="width: max-content">${states[selectedId].fullName}</div>
       <svg class="coaIcon" viewBox="0 0 200 200"><use href="#stateCOA${selectedId}"></use></svg>
     </div>`;
@@ -98,7 +98,7 @@ function editDiplomacy() {
       const name = state.fullName.length < 23 ? state.fullName : state.name;
       COArenderer.trigger("stateCOA" + state.i, state.coa);
 
-      lines += `<div class="states" data-id=${state.i} data-name="${name}" data-relations="${relation}">
+      lines += /* html */ `<div class="states" data-id=${state.i} data-name="${name}" data-relations="${relation}">
         <svg data-tip="${tipSelect}" class="coaIcon" viewBox="0 0 200 200"><use href="#stateCOA${state.i}"></use></svg>
         <div data-tip="${tipSelect}" style="width: 12em">${name}</div>
         <div data-tip="${tipChange}" class="changeRelations" style="width: 6em">
@@ -202,7 +202,7 @@ function editDiplomacy() {
     const object = states[objectId];
     const footer = `<div style="margin-top: 0.7em"><svg class="coaIcon" viewBox="0 0 200 200"><use href="#stateCOA${object.i}"></use></svg> <b>${object.fullName}</b></div>`;
 
-    alertMessage.innerHTML = `<div style="overflow: hidden">${header} ${options} ${footer}</div>`;
+    alertMessage.innerHTML = /* html */ `<div style="overflow: hidden">${header} ${options} ${footer}</div>`;
 
     $("#alert").dialog({
       width: fitContent(),
diff --git a/modules/ui/editors.js b/modules/ui/editors.js
index 819a2637..aef76a8b 100644
--- a/modules/ui/editors.js
+++ b/modules/ui/editors.js
@@ -60,7 +60,7 @@ function closeDialogs(except = "#except") {
 function moveCircle(x, y, r = 20) {
   let circle = document.getElementById("brushCircle");
   if (!circle) {
-    const html = `<circle id="brushCircle" cx=${x} cy=${y} r=${r}></circle>`;
+    const html = /* html */ `<circle id="brushCircle" cx=${x} cy=${y} r=${r}></circle>`;
     document.getElementById("debug").insertAdjacentHTML("afterBegin", html);
   } else {
     circle.setAttribute("cx", x);
@@ -192,9 +192,9 @@ function moveBurgToGroup(id, g) {
 
 function moveAllBurgsToGroup(fromGroup, toGroup) {
   const groupToMove = document.querySelector(`#burgIcons #${fromGroup}`);
-  const burgsToMove = Array.from(groupToMove.children).map(x=>x.dataset.id);
-  addBurgsGroup(toGroup)
-  burgsToMove.forEach(x=>moveBurgToGroup(x, toGroup));
+  const burgsToMove = Array.from(groupToMove.children).map(x => x.dataset.id);
+  addBurgsGroup(toGroup);
+  burgsToMove.forEach(x => moveBurgToGroup(x, toGroup));
 }
 
 function addBurgsGroup(group) {
@@ -495,18 +495,17 @@ function createPicker() {
     .attr("width", 303)
     .attr("height", 20)
     .on("mousemove", () => tip("Color value in different color spaces. Edit to change"));
-  const html = `
-  <label style="margin-right: 6px">HSL:
-    <input type="number" id="pickerHSL_H" data-space="hsl" min=0 max=360 value="231">,
-    <input type="number" id="pickerHSL_S" data-space="hsl" min=0 max=100 value="70">,
-    <input type="number" id="pickerHSL_L" data-space="hsl" min=0 max=100 value="70">
-  </label>
-  <label style="margin-right: 6px">RGB:
-    <input type="number" id="pickerRGB_R" data-space="rgb" min=0 max=255 value="125">,
-    <input type="number" id="pickerRGB_G" data-space="rgb" min=0 max=255 value="142">,
-    <input type="number" id="pickerRGB_B" data-space="rgb" min=0 max=255 value="232">
-  </label>
-  <label>HEX: <input type="text" id="pickerHEX" data-space="hex" style="width:42px" autocorrect="off" spellcheck="false" value="#7d8ee8"></label>`;
+  const html = /* html */ ` <label style="margin-right: 6px"
+      >HSL: <input type="number" id="pickerHSL_H" data-space="hsl" min="0" max="360" value="231" />,
+      <input type="number" id="pickerHSL_S" data-space="hsl" min="0" max="100" value="70" />,
+      <input type="number" id="pickerHSL_L" data-space="hsl" min="0" max="100" value="70" />
+    </label>
+    <label style="margin-right: 6px"
+      >RGB: <input type="number" id="pickerRGB_R" data-space="rgb" min="0" max="255" value="125" />,
+      <input type="number" id="pickerRGB_G" data-space="rgb" min="0" max="255" value="142" />,
+      <input type="number" id="pickerRGB_B" data-space="rgb" min="0" max="255" value="232" />
+    </label>
+    <label>HEX: <input type="text" id="pickerHEX" data-space="hex" style="width:42px" autocorrect="off" spellcheck="false" value="#7d8ee8" /></label>`;
   spaces.node().insertAdjacentHTML("beforeend", html);
   spaces.selectAll("input").on("change", changePickerSpace);
 
@@ -523,7 +522,7 @@ function createPicker() {
       .attr("fill", d)
       .attr("class", i ? "" : "selected")
       .attr("x", (i % 14) * 22 + 4)
-      .attr("y", 40 + Math.floor(i / 14)*20)
+      .attr("y", 40 + Math.floor(i / 14) * 20)
       .attr("width", 16)
       .attr("height", 16);
   });
@@ -534,9 +533,9 @@ function createPicker() {
       .attr("id", "picker_" + this.id)
       .attr("fill", "url(#" + this.id + ")")
       .attr("x", (i % 14) * 22 + 4)
-      .attr("y", Math.floor(i / 14)*20 + 20 + (number * 2))
+      .attr("y", Math.floor(i / 14) * 20 + 20 + number * 2)
       .attr("width", 16)
-      .attr("height", 16)
+      .attr("height", 16);
   });
 
   colors
@@ -546,7 +545,9 @@ function createPicker() {
   hatches
     .selectAll("rect")
     .on("click", pickerFillClicked)
-	.on("mouseover", function() { tip("Click to fill with the hatching " + this.id) });
+    .on("mouseover", function () {
+      tip("Click to fill with the hatching " + this.id);
+    });
 
   // append box
   const bbox = picker.node().getBBox();
@@ -562,10 +563,15 @@ function createPicker() {
     .attr("fill", "#ffffff")
     .attr("stroke", "#5d4651")
     .on("mousemove", pos);
-  picker.insert("text", ":first-child").attr("x", width-20).attr("y", -10).attr("id", "pickerCloseText").text("✕");
+  picker
+    .insert("text", ":first-child")
+    .attr("x", width - 20)
+    .attr("y", -10)
+    .attr("id", "pickerCloseText")
+    .text("✕");
   picker
     .insert("rect", ":first-child")
-    .attr("x", width-23)
+    .attr("x", width - 23)
     .attr("y", -21)
     .attr("id", "pickerCloseRect")
     .attr("width", 14)
diff --git a/modules/ui/emblems-editor.js b/modules/ui/emblems-editor.js
index 5b74f58a..3ab3335a 100644
--- a/modules/ui/emblems-editor.js
+++ b/modules/ui/emblems-editor.js
@@ -13,7 +13,10 @@ function editEmblem(type, id, el) {
   updateElementSelectors(type, id, el);
 
   $("#emblemEditor").dialog({
-    title: "Edit Emblem", resizable: true, width: "18.2em", height: "auto",
+    title: "Edit Emblem",
+    resizable: true,
+    width: "18.2em",
+    height: "auto",
     position: {my: "left top", at: "left+10 top+10", of: "svg", collision: "fit"},
     close: closeEmblemEditor
   });
@@ -41,17 +44,17 @@ function editEmblem(type, id, el) {
 
   function defineEmblemData(e) {
     const parent = e.target.parentNode;
-    const [g, t] = parent.id === "burgEmblems" ? [pack.burgs, "burg"] :
-                      parent.id === "provinceEmblems" ? [pack.provinces, "province"] :
-                      [pack.states, "state"];
+    const [g, t] = parent.id === "burgEmblems" ? [pack.burgs, "burg"] : parent.id === "provinceEmblems" ? [pack.provinces, "province"] : [pack.states, "state"];
     const i = +e.target.dataset.i;
     type = t;
-    id = type+"COA"+i;
+    id = type + "COA" + i;
     el = g[i];
   }
 
   function updateElementSelectors(type, id, el) {
-    let state = 0, province = 0, burg = 0;
+    let state = 0,
+      province = 0,
+      burg = 0;
 
     // set active type
     emblemStates.parentElement.className = type === "state" ? "active" : "";
@@ -61,7 +64,7 @@ function editEmblem(type, id, el) {
     // define selected values
     if (type === "state") state = el.i;
     else if (type === "province") {
-      province = el.i
+      province = el.i;
       state = pack.states[el.state].i;
     } else {
       burg = el.i;
@@ -85,7 +88,7 @@ function editEmblem(type, id, el) {
 
     emblemBurgs.options.length = 0;
     emblemBurgs.options.add(new Option("", 0, false, !burg));
-    const burgList = validBurgs.filter(burg => province ? pack.cells.province[burg.cell] === province : burg.state === state);
+    const burgList = validBurgs.filter(burg => (province ? pack.cells.province[burg.cell] === province : burg.state === state));
     burgList.forEach(b => emblemBurgs.options.add(new Option(b.capital ? "👑 " + b.name : b.name, b.i, false, b.i === burg)));
     emblemBurgs.options[0].disabled = true;
 
@@ -116,14 +119,14 @@ function editEmblem(type, id, el) {
     if (state) {
       type = "state";
       el = pack.states[state];
-      id = "stateCOA"+ state;
+      id = "stateCOA" + state;
     } else {
       // select neutral burg if state is changed to Neutrals
       const neutralBurgs = pack.burgs.filter(burg => burg.i && !burg.removed && !burg.state);
       if (!neutralBurgs.length) return;
       type = "burg";
       el = neutralBurgs[0];
-      id = "burgCOA"+ neutralBurgs[0].i;
+      id = "burgCOA" + neutralBurgs[0].i;
     }
     updateElementSelectors(type, id, el);
   }
@@ -134,13 +137,13 @@ function editEmblem(type, id, el) {
     if (province) {
       type = "province";
       el = pack.provinces[province];
-      id = "provinceCOA"+ province;
+      id = "provinceCOA" + province;
     } else {
       // select state if province is changed to null value
       const state = +emblemStates.value;
       type = "state";
       el = pack.states[state];
-      id = "stateCOA"+ state;
+      id = "stateCOA" + state;
     }
 
     updateElementSelectors(type, id, el);
@@ -150,7 +153,7 @@ function editEmblem(type, id, el) {
     const burg = +this.value;
     type = "burg";
     el = pack.burgs[burg];
-    id = "burgCOA"+ burg;
+    id = "burgCOA" + burg;
     updateElementSelectors(type, id, el);
   }
 
@@ -166,23 +169,26 @@ function editEmblem(type, id, el) {
   }
 
   function changeSize() {
-    const size = el.coaSize = +this.value;
+    const size = (el.coaSize = +this.value);
     document.getElementById("emblemSizeSlider").value = size;
     document.getElementById("emblemSizeNumber").value = size;
 
-    const g = emblems.select("#"+type+"Emblems");
-    g.select("[data-i='"+el.i+"']").remove();
+    const g = emblems.select("#" + type + "Emblems");
+    g.select("[data-i='" + el.i + "']").remove();
     if (!size) return;
 
     // re-append use element
     const categotySize = +g.attr("font-size");
-    const shift = categotySize * size / 2;
+    const shift = (categotySize * size) / 2;
     const x = el.x || el.pole[0];
     const y = el.y || el.pole[1];
-    g.append("use").attr("data-i", el.i)
-      .attr("x", rn(x - shift), 2).attr("y", rn(y - shift), 2)
-      .attr("width", size+"em").attr("height", size+"em")
-      .attr("href", "#"+id);
+    g.append("use")
+      .attr("data-i", el.i)
+      .attr("x", rn(x - shift), 2)
+      .attr("y", rn(y - shift), 2)
+      .attr("width", size + "em")
+      .attr("height", size + "em")
+      .attr("href", "#" + id);
   }
 
   function regenerate() {
@@ -194,7 +200,7 @@ function editEmblem(type, id, el) {
     }
 
     const shield = el.coa.shield || COA.getShield(el.culture || parent?.culture || 0, el.state);
-    el.coa = COA.generate(parent ? parent.coa : null, .3, .1, null);
+    el.coa = COA.generate(parent ? parent.coa : null, 0.3, 0.1, null);
     el.coa.shield = shield;
     emblemShapeSelector.disabled = false;
     emblemShapeSelector.value = el.coa.shield;
@@ -228,8 +234,8 @@ function editEmblem(type, id, el) {
     }
 
     const reader = new FileReader();
-    
-    reader.onload = function(readerEvent) {
+
+    reader.onload = function (readerEvent) {
       const result = readerEvent.target.result;
       const defs = document.getElementById("defs-emblems");
       const coa = document.getElementById(id); // old emblem
@@ -240,7 +246,7 @@ function editEmblem(type, id, el) {
       } else {
         const el = document.createElement("html");
         el.innerHTML = result;
-  
+
         // remove sodipodi and inkscape attributes
         el.querySelectorAll("*").forEach(el => {
           const attributes = el.getAttributeNames();
@@ -266,7 +272,8 @@ function editEmblem(type, id, el) {
       emblemShapeSelector.disabled = true;
     };
 
-    if (type === "image") reader.readAsDataURL(file); else reader.readAsText(file);
+    if (type === "image") reader.readAsDataURL(file);
+    else reader.readAsText(file);
   }
 
   function toggleDownload() {
@@ -282,7 +289,8 @@ function editEmblem(type, id, el) {
     const link = document.createElement("a");
     link.download = getFileName(`Emblem ${el.fullName || el.name}`) + "." + format;
 
-    if (format === "svg") downloadSVG(url, link); else downloadRaster(format, url, link, size);
+    if (format === "svg") downloadSVG(url, link);
+    else downloadRaster(format, url, link, size);
     document.getElementById("emblemDownloadControl").classList.add("hidden");
   }
 
@@ -299,22 +307,22 @@ function editEmblem(type, id, el) {
 
     const img = new Image();
     img.src = url;
-    img.onload = function() {
+    img.onload = function () {
       if (format === "jpeg") {
         ctx.fillStyle = "#fff";
         ctx.fillRect(0, 0, canvas.width, canvas.height);
       }
       ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-      const dataURL = canvas.toDataURL("image/" + format, .92);
+      const dataURL = canvas.toDataURL("image/" + format, 0.92);
       link.href = dataURL;
       link.click();
       window.setTimeout(() => window.URL.revokeObjectURL(dataURL), 6000);
-    }
+    };
   }
 
   async function getURL(svg, size) {
     const serialized = getSVG(svg, size);
-    const blob = new Blob([serialized], {type: 'image/svg+xml;charset=utf-8'});
+    const blob = new Blob([serialized], {type: "image/svg+xml;charset=utf-8"});
     const url = window.URL.createObjectURL(blob);
     window.setTimeout(() => window.URL.revokeObjectURL(url), 6000);
     return url;
@@ -324,7 +332,7 @@ function editEmblem(type, id, el) {
     const clone = svg.cloneNode(true);
     clone.setAttribute("width", size);
     clone.setAttribute("height", size);
-    return (new XMLSerializer()).serializeToString(clone);
+    return new XMLSerializer().serializeToString(clone);
   }
 
   async function downloadGallery() {
@@ -338,70 +346,135 @@ function editEmblem(type, id, el) {
     function runDownload() {
       const back = `<a href="javascript:history.back()">Go Back</a>`;
 
-      const stateSection = `<div><h2>States</h2>` + validStates.map(state => {
-        const el = document.getElementById("stateCOA"+state.i);
-        return `<figure id="state_${state.i}"><a href="#provinces_${state.i}"><figcaption>${state.fullName}</figcaption>${getSVG(el, 200)}</a></figure>`;
-      }).join("") + `</div>`;
+      const stateSection =
+        `<div><h2>States</h2>` +
+        validStates
+          .map(state => {
+            const el = document.getElementById("stateCOA" + state.i);
+            return `<figure id="state_${state.i}"><a href="#provinces_${state.i}"><figcaption>${state.fullName}</figcaption>${getSVG(el, 200)}</a></figure>`;
+          })
+          .join("") +
+        `</div>`;
 
-      const provinceSections = validStates.map(state => {
-        const stateProvinces = validProvinces.filter(p => p.state === state.i);
-        const figures = stateProvinces.map(province => {
-          const el = document.getElementById("provinceCOA"+province.i);
-          return `<figure id="province_${province.i}"><a href="#burgs_${province.i}"><figcaption>${province.fullName}</figcaption>${getSVG(el, 200)}</a></figure>`;
-        }).join("");
-        return stateProvinces.length ? `<div id="provinces_${state.i}">${back}<h2>${state.fullName} provinces</h2>${figures}</div>` : "";
-      }).join("");
+      const provinceSections = validStates
+        .map(state => {
+          const stateProvinces = validProvinces.filter(p => p.state === state.i);
+          const figures = stateProvinces
+            .map(province => {
+              const el = document.getElementById("provinceCOA" + province.i);
+              return `<figure id="province_${province.i}"><a href="#burgs_${province.i}"><figcaption>${province.fullName}</figcaption>${getSVG(
+                el,
+                200
+              )}</a></figure>`;
+            })
+            .join("");
+          return stateProvinces.length ? `<div id="provinces_${state.i}">${back}<h2>${state.fullName} provinces</h2>${figures}</div>` : "";
+        })
+        .join("");
 
-      const burgSections = validStates.map(state => {
-        const stateBurgs = validBurgs.filter(b => b.state === state.i);
-        let stateBurgSections = validProvinces.filter(p => p.state === state.i).map(province => {
-          const provinceBurgs = stateBurgs.filter(b => pack.cells.province[b.cell] === province.i);
-          const provinceBurgFigures = provinceBurgs.map(burg => {
-            const el = document.getElementById("burgCOA"+burg.i);
-            return `<figure id="burg_${burg.i}"><figcaption>${burg.name}</figcaption>${getSVG(el, 200)}</figure>`;
-          }).join("");
-          return provinceBurgs.length ? `<div id="burgs_${province.i}">${back}<h2>${province.fullName} burgs</h2>${provinceBurgFigures}</div>` : "";
-        }).join("");
+      const burgSections = validStates
+        .map(state => {
+          const stateBurgs = validBurgs.filter(b => b.state === state.i);
+          let stateBurgSections = validProvinces
+            .filter(p => p.state === state.i)
+            .map(province => {
+              const provinceBurgs = stateBurgs.filter(b => pack.cells.province[b.cell] === province.i);
+              const provinceBurgFigures = provinceBurgs
+                .map(burg => {
+                  const el = document.getElementById("burgCOA" + burg.i);
+                  return `<figure id="burg_${burg.i}"><figcaption>${burg.name}</figcaption>${getSVG(el, 200)}</figure>`;
+                })
+                .join("");
+              return provinceBurgs.length ? `<div id="burgs_${province.i}">${back}<h2>${province.fullName} burgs</h2>${provinceBurgFigures}</div>` : "";
+            })
+            .join("");
 
-        const stateBurgOutOfProvinces = stateBurgs.filter(b => !pack.cells.province[b.cell]);
-        const stateBurgOutOfProvincesFigures = stateBurgOutOfProvinces.map(burg => {
-          const el = document.getElementById("burgCOA"+burg.i);
-          return `<figure id="burg_${burg.i}"><figcaption>${burg.name}</figcaption>${getSVG(el, 200)}</figure>`;
-        }).join("");
-        if (stateBurgOutOfProvincesFigures) stateBurgSections += `<div><h2>${state.fullName} burgs under direct control</h2>${stateBurgOutOfProvincesFigures}</div>`;
-        return stateBurgSections;
-      }).join("");
+          const stateBurgOutOfProvinces = stateBurgs.filter(b => !pack.cells.province[b.cell]);
+          const stateBurgOutOfProvincesFigures = stateBurgOutOfProvinces
+            .map(burg => {
+              const el = document.getElementById("burgCOA" + burg.i);
+              return `<figure id="burg_${burg.i}"><figcaption>${burg.name}</figcaption>${getSVG(el, 200)}</figure>`;
+            })
+            .join("");
+          if (stateBurgOutOfProvincesFigures)
+            stateBurgSections += `<div><h2>${state.fullName} burgs under direct control</h2>${stateBurgOutOfProvincesFigures}</div>`;
+          return stateBurgSections;
+        })
+        .join("");
 
       const neutralBurgs = validBurgs.filter(b => !b.state);
-      const neutralsSection = neutralBurgs.length ? "<div><h2>Independent burgs</h2>" + neutralBurgs.map(burg => {
-        const el = document.getElementById("burgCOA"+burg.i);
-        return `<figure id="burg_${burg.i}"><figcaption>${burg.name}</figcaption>${getSVG(el, 200)}</figure>`;
-      }).join("") + "</div>" : "";
+      const neutralsSection = neutralBurgs.length
+        ? "<div><h2>Independent burgs</h2>" +
+          neutralBurgs
+            .map(burg => {
+              const el = document.getElementById("burgCOA" + burg.i);
+              return `<figure id="burg_${burg.i}"><figcaption>${burg.name}</figcaption>${getSVG(el, 200)}</figure>`;
+            })
+            .join("") +
+          "</div>"
+        : "";
 
       const FMG = `<a href="https://azgaar.github.io/Fantasy-Map-Generator" target="_blank">Azgaar's Fantasy Map Generator</a>`;
       const license = `<a target="_blank" href="https://github.com/Azgaar/Armoria#license">the license</a>`;
-      const html = `<!DOCTYPE html><html><head><title>${mapName.value} Emblems Gallery</title></head>
-        <style type="text/css">
-          body { margin: 0; padding: 1em; font-family: serif; }
-          h1, h2 { font-family: 'Forum'; }
-          div { width: 100%; max-width: 1018px; margin: 0 auto; border-bottom: 1px solid #ddd; }
-          figure { margin: 0 0 2em; display: inline-block; transition: .2s; }
-          figure:hover { background-color: #f6f6f6; }
-          figcaption { text-align: center; margin: .4em 0; width: 200px; font-family: 'Overlock SC' }
-          address { width: 100%; max-width: 1018px; margin: 0 auto; }
-          a { color: black; }
-          figure > a { text-decoration: none; }
-          div > a { float: right; font-family: monospace; margin-top: .8em; }
-        </style>
-        <link href="https://fonts.googleapis.com/css2?family=Forum&family=Overlock+SC" rel="stylesheet">
-        <body>
-          <div><h1>${mapName.value} Emblems Gallery</h1></div>
-          ${stateSection}
-          ${provinceSections}
-          ${burgSections}
-          ${neutralsSection}
-          <address>Generated by ${FMG}. The tool is free, but images may be copyrighted, see ${license}</address>
-        </body></html>`;
+      const html = /* html */ `<!DOCTYPE html>
+        <html>
+          <head>
+            <title>${mapName.value} Emblems Gallery</title>
+          </head>
+          <style type="text/css">
+            body {
+              margin: 0;
+              padding: 1em;
+              font-family: serif;
+            }
+            h1,
+            h2 {
+              font-family: "Forum";
+            }
+            div {
+              width: 100%;
+              max-width: 1018px;
+              margin: 0 auto;
+              border-bottom: 1px solid #ddd;
+            }
+            figure {
+              margin: 0 0 2em;
+              display: inline-block;
+              transition: 0.2s;
+            }
+            figure:hover {
+              background-color: #f6f6f6;
+            }
+            figcaption {
+              text-align: center;
+              margin: 0.4em 0;
+              width: 200px;
+              font-family: "Overlock SC";
+            }
+            address {
+              width: 100%;
+              max-width: 1018px;
+              margin: 0 auto;
+            }
+            a {
+              color: black;
+            }
+            figure > a {
+              text-decoration: none;
+            }
+            div > a {
+              float: right;
+              font-family: monospace;
+              margin-top: 0.8em;
+            }
+          </style>
+          <link href="https://fonts.googleapis.com/css2?family=Forum&family=Overlock+SC" rel="stylesheet" />
+          <body>
+            <div><h1>${mapName.value} Emblems Gallery</h1></div>
+            ${stateSection} ${provinceSections} ${burgSections} ${neutralsSection}
+            <address>Generated by ${FMG}. The tool is free, but images may be copyrighted, see ${license}</address>
+          </body>
+        </html>`;
       downloadFile(html, name + ".html", "text/plain");
     }
   }
@@ -409,9 +482,9 @@ function editEmblem(type, id, el) {
   async function renderAllEmblems(states, provinces, burgs) {
     tip("Preparing for download...", true, "warn");
 
-    const statePromises = states.map(state => COArenderer.trigger("stateCOA"+state.i, state.coa));
-    const provincePromises = provinces.map(province => COArenderer.trigger("provinceCOA"+province.i, province.coa));
-    const burgPromises = burgs.map(burg => COArenderer.trigger("burgCOA"+burg.i, burg.coa));
+    const statePromises = states.map(state => COArenderer.trigger("stateCOA" + state.i, state.coa));
+    const provincePromises = provinces.map(province => COArenderer.trigger("provinceCOA" + province.i, province.coa));
+    const burgPromises = burgs.map(burg => COArenderer.trigger("burgCOA" + burg.i, burg.coa));
     const promises = [...statePromises, ...provincePromises, ...burgPromises];
 
     return Promise.allSettled(promises).then(res => clearMainTip());
@@ -419,10 +492,11 @@ function editEmblem(type, id, el) {
 
   function dragEmblem() {
     const tr = parseTransform(this.getAttribute("transform"));
-    const x = +tr[0] - d3.event.x, y = +tr[1] - d3.event.y;
+    const x = +tr[0] - d3.event.x,
+      y = +tr[1] - d3.event.y;
 
-    d3.event.on("drag", function() {
-      const transform = `translate(${(x + d3.event.x)},${(y + d3.event.y)})`;
+    d3.event.on("drag", function () {
+      const transform = `translate(${x + d3.event.x},${y + d3.event.y})`;
       this.setAttribute("transform", transform);
     });
   }
@@ -430,4 +504,4 @@ function editEmblem(type, id, el) {
   function closeEmblemEditor() {
     emblems.selectAll("use").call(d3.drag().on("drag", null)).attr("class", null);
   }
-}
\ No newline at end of file
+}
diff --git a/modules/ui/general.js b/modules/ui/general.js
index 91605161..db08473e 100644
--- a/modules/ui/general.js
+++ b/modules/ui/general.js
@@ -405,7 +405,7 @@ document.querySelectorAll("[data-locked]").forEach(function (e) {
 
 // lock option
 function lock(id) {
-  const input = document.querySelector("[data-stored=\"" + id + "\"]");
+  const input = document.querySelector('[data-stored="' + id + '"]');
   if (input) localStorage.setItem(id, input.value);
   const el = document.getElementById("lock_" + id);
   if (!el) return;
@@ -467,15 +467,18 @@ function showInfo() {
   const QAA = link("https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Q&A", "Q&A page");
   const VideoTutorial = link("https://youtube.com/playlist?list=PLtgiuDC8iVR2gIG8zMTRn7T_L0arl9h1C", "Video tutorial");
 
-  alertMessage.innerHTML = `
-    <b>Fantasy Map Generator</b> (FMG) is a free open-source application.
-    It means that you own all created maps and can use them as you wish.
+  alertMessage.innerHTML = /* html */ `<b>Fantasy Map Generator</b> (FMG) is a free open-source application. It means that you own all created maps and can use them as
+    you wish.
 
-    <p>The development is community-backed, you can donate on ${Patreon}.
-    You can also help creating overviews, tutorials and spreding the word about the Generator.</p>
+    <p>
+      The development is community-backed, you can donate on ${Patreon}. You can also help creating overviews, tutorials and spreding the word about the
+      Generator.
+    </p>
 
-    <p>The best way to get help is to contact the community on ${Discord} and ${Reddit}.
-    Before asking questions, please check out the ${QuickStart}, the ${QAA}, and ${VideoTutorial}.</p>
+    <p>
+      The best way to get help is to contact the community on ${Discord} and ${Reddit}. Before asking questions, please check out the ${QuickStart}, the ${QAA},
+      and ${VideoTutorial}.
+    </p>
 
     <p>Check out our another project: ${Armoria} — heraldry generator and editor.</p>
 
diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js
index effb81c7..fae944f3 100644
--- a/modules/ui/heightmap-editor.js
+++ b/modules/ui/heightmap-editor.js
@@ -2,12 +2,14 @@
 
 function editHeightmap() {
   void (function selectEditMode() {
-    alertMessage.innerHTML = `Heightmap is a core element on which all other data (rivers, burgs, states etc) is based.
-      So the best edit approach is to <i>erase</i> the secondary data and let the system automatically regenerate it on edit completion.
+    alertMessage.innerHTML = /* html */ `Heightmap is a core element on which all other data (rivers, burgs, states etc) is based. So the best edit approach is to
+      <i>erase</i> the secondary data and let the system automatically regenerate it on edit completion.
       <p><i>Erase</i> mode also allows you Convert an Image into a heightmap or use Template Editor.</p>
       <p>You can <i>keep</i> the data, but you won't be able to change the coastline.</p>
-      <p>Try <i>risk</i> mode to change the coastline and keep the data. The data will be restored as much as possible, but it can cause unpredictable errors.</p>
-      <p>Please <span class="pseudoLink" onclick=dowloadMap(); editHeightmap();>save the map</span> before editing the heightmap!</p>
+      <p>
+        Try <i>risk</i> mode to change the coastline and keep the data. The data will be restored as much as possible, but it can cause unpredictable errors.
+      </p>
+      <p>Please <span class="pseudoLink" onclick="dowloadMap();" editHeightmap();>save the map</span> before editing the heightmap!</p>
       <p style="margin-bottom: 0">Check out ${link("https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Heightmap-customization", "wiki")} for guidance.</p>`;
 
     $("#alert").dialog({
@@ -107,7 +109,7 @@ function editHeightmap() {
     heightmapInfoX.innerHTML = rn(p[0]);
     heightmapInfoY.innerHTML = rn(p[1]);
     heightmapInfoCell.innerHTML = cell;
-    heightmapInfoHeight.innerHTML = `${grid.cells.h[cell]} (${getHeight(grid.cells.h[cell])})`;
+    heightmapInfoHeight.innerHTML = /* html */ `${grid.cells.h[cell]} (${getHeight(grid.cells.h[cell])})`;
     if (tooltip.dataset.main) showMainTip();
 
     // move radius circle if drag mode is active
@@ -485,7 +487,7 @@ function editHeightmap() {
 
   function updateStatistics() {
     const landCells = grid.cells.h.reduce((s, h) => (h >= 20 ? s + 1 : s));
-    landmassCounter.innerHTML = `${landCells} (${rn((landCells / grid.cells.i.length) * 100)}%)`;
+    landmassCounter.innerHTML = /* html */ `${landCells} (${rn((landCells / grid.cells.i.length) * 100)}%)`;
     landmassAverage.innerHTML = rn(d3.mean(grid.cells.h));
   }
 
@@ -1247,11 +1249,8 @@ function editHeightmap() {
     function closeImageConverter(event) {
       event.preventDefault();
       event.stopPropagation();
-      alertMessage.innerHTML = `
-        Are you sure you want to close the Image Converter? 
-        Click "Cancel" to geck back to convertion. 
-        Click "Complete" to apply the conversion. 
-        Click "Close" to exit conversion mode and restore previous heightmap`;
+      alertMessage.innerHTML = /* html */ ` Are you sure you want to close the Image Converter? Click "Cancel" to geck back to convertion. Click "Complete" to apply
+      the conversion. Click "Close" to exit conversion mode and restore previous heightmap`;
 
       $("#alert").dialog({
         resizable: false,
diff --git a/modules/ui/ice-editor.js b/modules/ui/ice-editor.js
index f6648f48..5951e7aa 100644
--- a/modules/ui/ice-editor.js
+++ b/modules/ui/ice-editor.js
@@ -12,7 +12,8 @@ function editIce() {
   ice.selectAll("*").classed("draggable", true).call(d3.drag().on("drag", dragElement));
 
   $("#iceEditor").dialog({
-    title: "Edit "+type, resizable: false,
+    title: "Edit " + type,
+    resizable: false,
     position: {my: "center top+60", at: "top", of: d3.event, collision: "fit"},
     close: closeEditor
   });
@@ -30,8 +31,9 @@ function editIce() {
   function randomizeShape() {
     const c = grid.points[+elSelected.attr("cell")];
     const s = +elSelected.attr("size");
-    const i = ra(grid.cells.i), cn = grid.points[i];
-    const poly = getGridPolygon(i).map(p => [p[0]-cn[0], p[1]-cn[1]]);
+    const i = ra(grid.cells.i),
+      cn = grid.points[i];
+    const poly = getGridPolygon(i).map(p => [p[0] - cn[0], p[1] - cn[1]]);
     const points = poly.map(p => [rn(c[0] + p[0] * s, 2), rn(c[1] + p[1] * s, 2)]);
     elSelected.attr("points", points);
   }
@@ -39,10 +41,13 @@ function editIce() {
   function changeSize() {
     const c = grid.points[+elSelected.attr("cell")];
     const s = +elSelected.attr("size");
-    const flat = elSelected.attr("points").split(",").map(el => +el);
+    const flat = elSelected
+      .attr("points")
+      .split(",")
+      .map(el => +el);
     const pairs = [];
-    while (flat.length) pairs.push(flat.splice(0,2));
-    const poly = pairs.map(p => [(p[0]-c[0]) / s, (p[1]-c[1]) / s]);
+    while (flat.length) pairs.push(flat.splice(0, 2));
+    const poly = pairs.map(p => [(p[0] - c[0]) / s, (p[1] - c[1]) / s]);
     const size = +this.value;
     const points = poly.map(p => [rn(c[0] + p[0] * size, 2), rn(c[1] + p[1] * size, 2)]);
     elSelected.attr("points", points).attr("size", size);
@@ -65,7 +70,7 @@ function editIce() {
     const c = grid.points[i];
     const s = +document.getElementById("iceSize").value;
 
-    const points = getGridPolygon(i).map(p => [(p[0] + (c[0]-p[0]) / s)|0, (p[1] + (c[1]-p[1]) / s)|0]);
+    const points = getGridPolygon(i).map(p => [(p[0] + (c[0] - p[0]) / s) | 0, (p[1] + (c[1] - p[1]) / s) | 0]);
     const iceberg = ice.append("polygon").attr("points", points).attr("cell", i).attr("size", s);
     iceberg.call(d3.drag().on("drag", dragElement));
     if (d3.event.shiftKey === false) toggleAdd();
@@ -73,26 +78,32 @@ function editIce() {
 
   function removeIce() {
     const type = elSelected.attr("type") ? "Glacier" : "Iceberg";
-    alertMessage.innerHTML = `Are you sure you want to remove the ${type}?`;
-    $("#alert").dialog({resizable: false, title: "Remove "+type,
+    alertMessage.innerHTML = /* html */ `Are you sure you want to remove the ${type}?`;
+    $("#alert").dialog({
+      resizable: false,
+      title: "Remove " + type,
       buttons: {
-        Remove: function() {
+        Remove: function () {
           $(this).dialog("close");
           elSelected.remove();
           $("#iceEditor").dialog("close");
         },
-        Cancel: function() {$(this).dialog("close");}
+        Cancel: function () {
+          $(this).dialog("close");
+        }
       }
     });
   }
 
   function dragElement() {
     const tr = parseTransform(this.getAttribute("transform"));
-    const dx = +tr[0] - d3.event.x, dy = +tr[1] - d3.event.y;
+    const dx = +tr[0] - d3.event.x,
+      dy = +tr[1] - d3.event.y;
 
-    d3.event.on("drag", function() {
-      const x = d3.event.x, y = d3.event.y;
-      this.setAttribute("transform", `translate(${(dx+x)},${(dy+y)})`);
+    d3.event.on("drag", function () {
+      const x = d3.event.x,
+        y = d3.event.y;
+      this.setAttribute("transform", `translate(${dx + x},${dy + y})`);
     });
   }
 
diff --git a/modules/ui/labels-editor.js b/modules/ui/labels-editor.js
index 3d7a3b7f..8bd04cdd 100644
--- a/modules/ui/labels-editor.js
+++ b/modules/ui/labels-editor.js
@@ -257,9 +257,10 @@ function editLabel() {
     const group = elSelected.node().parentNode.id;
     const basic = group === "states" || group === "addedLabels";
     const count = elSelected.node().parentNode.childElementCount;
-    alertMessage.innerHTML = `Are you sure you want to remove 
-      ${basic ? "all elements in the group" : "the entire label group"}?
-      <br><br>Labels to be removed: ${count}`;
+    alertMessage.innerHTML = /* html */ `Are you sure you want to remove ${
+      basic ? "all elements in the group" : "the entire label group"
+    }? <br /><br />Labels to be
+      removed: ${count}`;
     $("#alert").dialog({
       resizable: false,
       title: "Remove route group",
diff --git a/modules/ui/lakes-editor.js b/modules/ui/lakes-editor.js
index 3f1e4d60..eba1bd0d 100644
--- a/modules/ui/lakes-editor.js
+++ b/modules/ui/lakes-editor.js
@@ -5,7 +5,8 @@ function editLake() {
   if (layerIsOn("toggleCells")) toggleCells();
 
   $("#lakeEditor").dialog({
-    title: "Edit Lake", resizable: false,
+    title: "Edit Lake",
+    resizable: false,
     position: {my: "center top+20", at: "top", of: d3.event, collision: "fit"},
     close: closeLakesEditor
   });
@@ -71,23 +72,41 @@ function editLake() {
   function drawLakeVertices() {
     const v = getLake().vertices; // lake outer vertices
 
-    const c = [... new Set(v.map(v => pack.vertices.c[v]).flat())];
-    debug.select("#vertices").selectAll("polygon").data(c).enter().append("polygon")
-      .attr("points", d => getPackPolygon(d)).attr("data-c", d => d);
+    const c = [...new Set(v.map(v => pack.vertices.c[v]).flat())];
+    debug
+      .select("#vertices")
+      .selectAll("polygon")
+      .data(c)
+      .enter()
+      .append("polygon")
+      .attr("points", d => getPackPolygon(d))
+      .attr("data-c", d => d);
 
-    debug.select("#vertices").selectAll("circle").data(v).enter().append("circle")
-      .attr("cx", d => pack.vertices.p[d][0]).attr("cy", d => pack.vertices.p[d][1])
-      .attr("r", .4).attr("data-v", d => d).call(d3.drag().on("drag", dragVertex))
+    debug
+      .select("#vertices")
+      .selectAll("circle")
+      .data(v)
+      .enter()
+      .append("circle")
+      .attr("cx", d => pack.vertices.p[d][0])
+      .attr("cy", d => pack.vertices.p[d][1])
+      .attr("r", 0.4)
+      .attr("data-v", d => d)
+      .call(d3.drag().on("drag", dragVertex))
       .on("mousemove", () => tip("Drag to move the vertex, please use for fine-tuning only. Edit heightmap to change actual cell heights"));
   }
 
   function dragVertex() {
-    const x = rn(d3.event.x, 2), y = rn(d3.event.y, 2);
+    const x = rn(d3.event.x, 2),
+      y = rn(d3.event.y, 2);
     this.setAttribute("cx", x);
     this.setAttribute("cy", y);
     const v = +this.dataset.v;
     pack.vertices.p[v] = [x, y];
-    debug.select("#vertices").selectAll("polygon").attr("points", d => getPackPolygon(d));
+    debug
+      .select("#vertices")
+      .selectAll("polygon")
+      .attr("points", d => getPackPolygon(d));
     redrawLake();
   }
 
@@ -97,7 +116,7 @@ function editLake() {
     const points = feature.vertices.map(v => pack.vertices.p[v]);
     const d = round(lineGen(points));
     elSelected.attr("d", d);
-    defs.select("mask#land > path#land_"+feature.i).attr("d", d); // update land mask
+    defs.select("mask#land > path#land_" + feature.i).attr("d", d); // update land mask
 
     const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
     feature.area = Math.abs(d3.polygonArea(points));
@@ -115,7 +134,7 @@ function editLake() {
 
   function generateNameRandom() {
     const lake = getLake();
-    lake.name = lakeName.value = Names.getBase(rand(nameBases.length-1));
+    lake.name = lakeName.value = Names.getBase(rand(nameBases.length - 1));
   }
 
   function selectLakeGroup(node) {
@@ -123,7 +142,7 @@ function editLake() {
     const select = document.getElementById("lakeGroup");
     select.options.length = 0; // remove all options
 
-    lakes.selectAll("g").each(function() {
+    lakes.selectAll("g").each(function () {
       select.options.add(new Option(this.id, this.id, false, this.id === group));
     });
   }
@@ -141,12 +160,18 @@ function editLake() {
     } else {
       lakeGroupName.style.display = "none";
       lakeGroup.style.display = "inline-block";
-    }   
+    }
   }
 
   function createNewGroup() {
-    if (!this.value) {tip("Please provide a valid group name"); return;}
-    const group = this.value.toLowerCase().replace(/ /g, "_").replace(/[^\w\s]/gi, "");
+    if (!this.value) {
+      tip("Please provide a valid group name");
+      return;
+    }
+    const group = this.value
+      .toLowerCase()
+      .replace(/ /g, "_")
+      .replace(/[^\w\s]/gi, "");
 
     if (document.getElementById(group)) {
       tip("Element with this id already exists. Please provide a unique name", false, "error");
@@ -180,7 +205,7 @@ function editLake() {
     toggleNewGroupInput();
     document.getElementById("lakeGroupName").value = "";
   }
-  
+
   function removeLakeGroup() {
     const group = elSelected.node().parentNode.id;
     if (["freshwater", "salt", "sinkhole", "frozen", "lava", "dry"].includes(group)) {
@@ -189,11 +214,13 @@ function editLake() {
     }
 
     const count = elSelected.node().parentNode.childElementCount;
-    alertMessage.innerHTML = `Are you sure you want to remove the group? 
-      All lakes of the group (${count}) will be turned into Freshwater`;
-    $("#alert").dialog({resizable: false, title: "Remove lake group", width:"26em",
+    alertMessage.innerHTML = /* html */ `Are you sure you want to remove the group? All lakes of the group (${count}) will be turned into Freshwater`;
+    $("#alert").dialog({
+      resizable: false,
+      title: "Remove lake group",
+      width: "26em",
       buttons: {
-        Remove: function() {
+        Remove: function () {
           $(this).dialog("close");
           const freshwater = document.getElementById("freshwater");
           const groupEl = document.getElementById(group);
@@ -204,7 +231,9 @@ function editLake() {
           document.getElementById("lakeGroup").selectedOptions[0].remove();
           document.getElementById("lakeGroup").value = "freshwater";
         },
-        Cancel: function() {$(this).dialog("close");}
+        Cancel: function () {
+          $(this).dialog("close");
+        }
       }
     });
   }
@@ -223,4 +252,4 @@ function editLake() {
     debug.select("#vertices").remove();
     unselect();
   }
-}
\ No newline at end of file
+}
diff --git a/modules/ui/military-overview.js b/modules/ui/military-overview.js
index 0d244314..24cf9367 100644
--- a/modules/ui/military-overview.js
+++ b/modules/ui/military-overview.js
@@ -75,18 +75,30 @@ function overviewMilitary() {
       const sortData = options.military.map(u => `data-${u.name}="${getForces(u)}"`).join(" ");
       const lineData = options.military.map(u => `<div data-type="${u.name}" data-tip="State ${u.name} units number">${getForces(u)}</div>`).join(" ");
 
-      lines += `<div class="states" data-id=${s.i} data-state="${s.name}" ${sortData} data-total="${total}"
-        data-population="${population}" data-rate="${rate}" data-alert="${s.alert}">
+      lines += /* html */ `<div
+        class="states"
+        data-id=${s.i}
+        data-state="${s.name}"
+        ${sortData}
+        data-total="${total}"
+        data-population="${population}"
+        data-rate="${rate}"
+        data-alert="${s.alert}"
+      >
         <fill-box data-tip="${s.fullName}" fill="${s.color}" disabled></fill-box>
-        <input data-tip="${s.fullName}" style="width:6em" value="${s.name}" readonly>
+        <input data-tip="${s.fullName}" style="width:6em" value="${s.name}" readonly />
         ${lineData}
         <div data-type="total" data-tip="Total state military personnel (considering crew)" style="font-weight: bold">${si(total)}</div>
         <div data-type="population" data-tip="State population">${si(population)}</div>
         <div data-type="rate" data-tip="Military personnel rate (% of state population). Depends on war alert">${rn(rate, 2)}%</div>
-        <input data-tip="War Alert. Editable modifier to military forces number, depends of political situation" style="width:4.1em" type="number" min=0 step=.01 value="${rn(
-          s.alert,
-          2
-        )}">
+        <input
+          data-tip="War Alert. Editable modifier to military forces number, depends of political situation"
+          style="width:4.1em"
+          type="number"
+          min="0"
+          step=".01"
+          value="${rn(s.alert, 2)}"
+        />
         <span data-tip="Show regiments list" class="icon-list-bullet pointer"></span>
       </div>`;
     }
@@ -290,21 +302,28 @@ function overviewMilitary() {
           ${getLimitText(unit[attr])}
         </button>`;
 
-      row.innerHTML = `<td><button data-type="icon" data-tip="Click to select unit icon">${icon || " "}</button></td>
-        <td><input data-tip="Type unit name. If name is changed for existing unit, old unit will be replaced" value="${name}"></td>
+      row.innerHTML = /* html */ `<td><button data-type="icon" data-tip="Click to select unit icon">${icon || " "}</button></td>
+        <td><input data-tip="Type unit name. If name is changed for existing unit, old unit will be replaced" value="${name}" /></td>
         <td>${getLimitButton("biomes")}</td>
         <td>${getLimitButton("states")}</td>
         <td>${getLimitButton("cultures")}</td>
         <td>${getLimitButton("religions")}</td>
-        <td><input data-tip="Enter conscription percentage for rural population" type="number" min=0 max=100 step=.01 value="${rural}"></td>
-        <td><input data-tip="Enter conscription percentage for urban population" type="number" min=0 max=100 step=.01 value="${urban}"></td>
-        <td><input data-tip="Enter average number of people in crew (for total personnel calculation)" type="number" min=1 step=1 value="${crew}"></td>
-        <td><input data-tip="Enter military power (used for battle simulation)" type="number" min=0 step=.1 value="${power}"></td>
-        <td><select data-tip="Select unit type to apply special rules on forces recalculation">${typeOptions}</select></td>
+        <td><input data-tip="Enter conscription percentage for rural population" type="number" min="0" max="100" step=".01" value="${rural}" /></td>
+        <td><input data-tip="Enter conscription percentage for urban population" type="number" min="0" max="100" step=".01" value="${urban}" /></td>
+        <td><input data-tip="Enter average number of people in crew (for total personnel calculation)" type="number" min="1" step="1" value="${crew}" /></td>
+        <td><input data-tip="Enter military power (used for battle simulation)" type="number" min="0" step=".1" value="${power}" /></td>
+        <td>
+          <select data-tip="Select unit type to apply special rules on forces recalculation">
+            ${typeOptions}
+          </select>
+        </td>
         <td data-tip="Check if unit is <b>separate</b> and can be stacked only with the same units">
-          <input id="${name}Separate" type="checkbox" class="checkbox" ${separate ? "checked" : ""}>
-          <label for="${name}Separate" class="checkbox-label"></label></td>
-        <td data-tip="Remove the unit"><span data-tip="Remove unit type" class="icon-trash-empty pointer" onclick="this.parentElement.parentElement.remove();"></span></td>`;
+          <input id="${name}Separate" type="checkbox" class="checkbox" ${separate ? "checked" : ""} />
+          <label for="${name}Separate" class="checkbox-label"></label>
+        </td>
+        <td data-tip="Remove the unit">
+          <span data-tip="Remove unit type" class="icon-trash-empty pointer" onclick="this.parentElement.parentElement.remove();"></span>
+        </td>`;
       tableBody.appendChild(row);
     }
 
@@ -326,7 +345,12 @@ function overviewMilitary() {
             <label for="el${i}" class="checkbox-label">${fullName || name}</label>
           </td></tr>`
       );
-      alertMessage.innerHTML = `<b>Limit unit by ${type}:</b><table style="margin-top:.3em"><tbody>${lines.join("")}</tbody></table>`;
+      alertMessage.innerHTML = /* html */ `<b>Limit unit by ${type}:</b>
+        <table style="margin-top:.3em">
+          <tbody>
+            ${lines.join("")}
+          </tbody>
+        </table>`;
 
       $("#alert").dialog({
         width: fitContent(),
diff --git a/modules/ui/namesbase-editor.js b/modules/ui/namesbase-editor.js
index d347c498..74ddb793 100644
--- a/modules/ui/namesbase-editor.js
+++ b/modules/ui/namesbase-editor.js
@@ -154,15 +154,15 @@ function editNamesbase() {
       return "<span data-tip='Namesbase variety is good' style='color:green'>[good]</span>";
     };
 
-    alertMessage.innerHTML = `<div style="line-height: 1.6em; max-width: 20em">
+    alertMessage.innerHTML = /* html */ `<div style="line-height: 1.6em; max-width: 20em">
       <div data-tip="Number of names provided">Namesbase length: ${length} ${getLengthQuality()}</div>
       <div data-tip="Average number of generation variants for each key in the chain">Namesbase variety: ${variety} ${getVarietyLevel()}</div>
-      <hr>
+      <hr />
       <div data-tip="The shortest name length">Min name length: ${d3.min(wordsLength)}</div>
       <div data-tip="The longest name length">Max name length: ${d3.max(wordsLength)}</div>
       <div data-tip="Average name length">Mean name length: ${rn(d3.mean(wordsLength), 1)}</div>
       <div data-tip="Common name length">Median name length: ${d3.median(wordsLength)}</div>
-      <hr>
+      <hr />
       <div data-tip="Characters outside of Basic Latin have bad font support">Non-basic chars: ${nonBasicLatinChars}</div>
       <div data-tip="Characters that are frequently (more than 3 times) doubled">Doubled chars: ${doubled.join("")}</div>
       <div data-tip="Names used more than one time">Duplicates: ${duplicates}</div>
@@ -196,7 +196,7 @@ function editNamesbase() {
   }
 
   function namesbaseRestoreDefault() {
-    alertMessage.innerHTML = `Are you sure you want to restore default namesbase?`;
+    alertMessage.innerHTML = /* html */ `Are you sure you want to restore default namesbase?`;
     $("#alert").dialog({
       resizable: false,
       title: "Restore default data",
diff --git a/modules/ui/options.js b/modules/ui/options.js
index 09f5bee9..3ce6e00c 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -296,7 +296,9 @@ function showSeedHistoryDialog() {
     const button = `<i data-tip="Click to generate a map with this seed" onclick="restoreSeed(${i})" class="icon-history optionsSeedRestore"></i>`;
     return `<li>Seed: ${h.seed} ${button}. Size: ${h.width}x${h.height}. Template: ${h.template}. Created: ${created}</li>`;
   });
-  alertMessage.innerHTML = `<ol style="margin: 0; padding-left: 1.5em">${lines.join("")}</ol>`;
+  alertMessage.innerHTML = /* html */ `<ol style="margin: 0; padding-left: 1.5em">
+    ${lines.join("")}
+  </ol>`;
 
   $("#alert").dialog({
     resizable: false,
@@ -677,8 +679,8 @@ function regeneratePrompt(source) {
   const workingTime = (Date.now() - last(mapHistory).created) / 60000; // minutes
   if (workingTime < 5) return regenerateMap(source);
 
-  alertMessage.innerHTML = `Are you sure you want to generate a new map?<br>
-  All unsaved changes made to the current map will be lost`;
+  alertMessage.innerHTML = /* html */ `Are you sure you want to generate a new map?<br />
+    All unsaved changes made to the current map will be lost`;
   $("#alert").dialog({
     resizable: false,
     title: "Generate new map",
@@ -752,13 +754,13 @@ async function showLoadPane() {
     document.getElementById("loadFromDropboxSelect").style.display = "block";
     const loadFromDropboxButtons = document.getElementById("loadFromDropboxButtons");
     const fileSelect = document.getElementById("loadFromDropboxSelect");
-    fileSelect.innerHTML = `<option value="" disabled selected>Loading...</option>`;
+    fileSelect.innerHTML = /* html */ `<option value="" disabled selected>Loading...</option>`;
 
     const files = await Cloud.providers.dropbox.list();
 
     if (!files) {
       loadFromDropboxButtons.style.display = "none";
-      fileSelect.innerHTML = `<option value="" disabled selected>Save files to Dropbox first</option>`;
+      fileSelect.innerHTML = /* html */ `<option value="" disabled selected>Save files to Dropbox first</option>`;
       return;
     }
 
@@ -841,7 +843,7 @@ function openSaveTiles() {
         loading = setInterval(() => (status.innerHTML += "."), 1000);
         saveTiles().then(() => {
           clearInterval(loading);
-          status.innerHTML = `Done. Check file in "Downloads" (crtl + J)`;
+          status.innerHTML = /* html */ `Done. Check file in "Downloads" (crtl + J)`;
           setTimeout(() => (status.innerHTML = ""), 8000);
         });
       },
@@ -874,7 +876,7 @@ function updateTilesOptions() {
   const sizeY = graphHeight * scale * tilesY;
   const totalSize = sizeX * sizeY;
 
-  tileSize.innerHTML = `${sizeX} x ${sizeY} px`;
+  tileSize.innerHTML = /* html */ `${sizeX} x ${sizeY} px`;
   tileSize.style.color = totalSize > 1e9 ? "#d00b0b" : totalSize > 1e8 ? "#9e6409" : "#1a941a";
 
   // draw tiles
diff --git a/modules/ui/provinces-editor.js b/modules/ui/provinces-editor.js
index 045505ee..33ef6dc2 100644
--- a/modules/ui/provinces-editor.js
+++ b/modules/ui/provinces-editor.js
@@ -131,25 +131,37 @@ function editProvinces() {
       const separable = p.burg && p.burg !== pack.states[p.state].capital;
       const focused = defs.select("#fog #focusProvince" + p.i).size();
       COArenderer.trigger("provinceCOA" + p.i, p.coa);
-      lines += `<div class="states" data-id=${p.i} data-name="${p.name}" data-form="${p.formName}" data-color="${
-        p.color
-      }" data-capital="${capital}" data-state="${stateName}" data-area=${area} data-population=${population}>
+      lines += /* html */ `<div
+        class="states"
+        data-id=${p.i}
+        data-name="${p.name}"
+        data-form="${p.formName}"
+        data-color="${p.color}"
+        data-capital="${capital}"
+        data-state="${stateName}"
+        data-area=${area}
+        data-population=${population}
+      >
         <fill-box fill="${p.color}"></fill-box>
-        <input data-tip="Province name. Click to change" class="name pointer" value="${p.name}" readonly>
+        <input data-tip="Province name. Click to change" class="name pointer" value="${p.name}" readonly />
         <svg data-tip="Click to show and edit province emblem" class="coaIcon pointer hide" viewBox="0 0 200 200"><use href="#provinceCOA${p.i}"></use></svg>
-        <input data-tip="Province form name. Click to change" class="name pointer hide" value="${p.formName}" readonly>
+        <input data-tip="Province form name. Click to change" class="name pointer hide" value="${p.formName}" readonly />
         <span data-tip="Province capital. Click to zoom into view" class="icon-star-empty pointer hide ${p.burg ? "" : "placeholder"}"></span>
-        <select data-tip="Province capital. Click to select from burgs within the state. No capital means the province is governed from the state capital" class="cultureBase hide ${
-          p.burgs.length ? "" : "placeholder"
-        }">${p.burgs.length ? getCapitalOptions(p.burgs, p.burg) : ""}</select>
+        <select
+          data-tip="Province capital. Click to select from burgs within the state. No capital means the province is governed from the state capital"
+          class="cultureBase hide ${p.burgs.length ? "" : "placeholder"}"
+        >
+          ${p.burgs.length ? getCapitalOptions(p.burgs, p.burg) : ""}
+        </select>
         <input data-tip="Province owner" class="provinceOwner" value="${stateName}" disabled">
         <span data-tip="Province area" style="padding-right: 4px" class="icon-map-o hide"></span>
         <div data-tip="Province area" class="biomeArea hide">${si(area) + unit}</div>
         <span data-tip="${populationTip}" class="icon-male hide"></span>
         <div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
-        <span data-tip="Declare province independence (turn non-capital province with burgs into a new state)" class="icon-flag-empty ${
-          separable ? "" : "placeholder"
-        } hide"></span>
+        <span
+          data-tip="Declare province independence (turn non-capital province with burgs into a new state)"
+          class="icon-flag-empty ${separable ? "" : "placeholder"} hide"
+        ></span>
         <span data-tip="Toggle province focus" class="icon-pin ${focused ? "" : " inactive"} hide"></span>
         <span data-tip="Remove the province" class="icon-trash-empty hide"></span>
       </div>`;
@@ -360,10 +372,9 @@ function editProvinces() {
     const total = rural + urban;
     const l = n => Number(n).toLocaleString();
 
-    alertMessage.innerHTML = `
-    Rural: <input type="number" min=0 step=1 id="ruralPop" value=${rural} style="width:6em">
-    Urban: <input type="number" min=0 step=1 id="urbanPop" value=${urban} style="width:6em" ${p.burgs.length ? "" : "disabled"}>
-    <p>Total population: ${l(total)} ⇒ <span id="totalPop">${l(total)}</span> (<span id="totalPopPerc">100</span>%)</p>`;
+    alertMessage.innerHTML = /* html */ ` Rural: <input type="number" min="0" step="1" id="ruralPop" value=${rural} style="width:6em" /> Urban:
+      <input type="number" min="0" step="1" id="urbanPop" value=${urban} style="width:6em" ${p.burgs.length ? "" : "disabled"} />
+      <p>Total population: ${l(total)} ⇒ <span id="totalPop">${l(total)}</span> (<span id="totalPopPerc">100</span>%)</p>`;
 
     const update = function () {
       const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
@@ -424,7 +435,7 @@ function editProvinces() {
   }
 
   function removeProvince(p) {
-    alertMessage.innerHTML = `Are you sure you want to remove the province? <br>This action cannot be reverted`;
+    alertMessage.innerHTML = /* html */ `Are you sure you want to remove the province? <br />This action cannot be reverted`;
     $("#alert").dialog({
       resizable: false,
       title: "Remove province",
@@ -588,7 +599,7 @@ function editProvinces() {
     const treeLayout = d3.treemap().size([w, h]).padding(2);
 
     // prepare svg
-    alertMessage.innerHTML = `<select id="provincesTreeType" style="display:block; margin-left:13px; font-size:11px">
+    alertMessage.innerHTML = /* html */ `<select id="provincesTreeType" style="display:block; margin-left:13px; font-size:11px">
       <option value="area" selected>Area</option>
       <option value="population">Total population</option>
       <option value="rural">Rural population</option>
@@ -635,7 +646,7 @@ function editProvinces() {
           ? "Urban population: " + si(urban)
           : "Population: " + si(rural + urban);
 
-      provinceInfo.innerHTML = `${name}. ${state}. ${value}`;
+      provinceInfo.innerHTML = /* html */ `${name}. ${state}. ${value}`;
       provinceHighlightOn(ev);
     }
 
@@ -1027,7 +1038,7 @@ function editProvinces() {
   }
 
   function removeAllProvinces() {
-    alertMessage.innerHTML = `Are you sure you want to remove all provinces? <br>This action cannot be reverted`;
+    alertMessage.innerHTML = /* html */ `Are you sure you want to remove all provinces? <br />This action cannot be reverted`;
     $("#alert").dialog({
       resizable: false,
       title: "Remove all provinces",
diff --git a/modules/ui/regiments-overview.js b/modules/ui/regiments-overview.js
index 42a9f4e0..d243b34d 100644
--- a/modules/ui/regiments-overview.js
+++ b/modules/ui/regiments-overview.js
@@ -60,11 +60,11 @@ function overviewRegiments(state) {
           .map(u => `<div data-type="${u.name}" data-tip="${capitalize(u.name)} units number">${r.u[u.name] || 0}</div>`)
           .join(" ");
 
-        lines += `<div class="states" data-id=${r.i} data-s="${s.i}" data-state="${s.name}" data-name="${r.name}" ${sortData} data-total="${r.a}">
+        lines += /* html */ `<div class="states" data-id=${r.i} data-s="${s.i}" data-state="${s.name}" data-name="${r.name}" ${sortData} data-total="${r.a}">
           <fill-box data-tip="${s.fullName}" fill="${s.color}" disabled></fill-box>
-          <input data-tip="${s.fullName}" style="width:6em" value="${s.name}" readonly>
+          <input data-tip="${s.fullName}" style="width:6em" value="${s.name}" readonly />
           <span data-tip="Regiment's emblem" style="width:1em">${r.icon}</span>
-          <input data-tip="Regiment's name" style="width:13em" value="${r.name}" readonly>
+          <input data-tip="Regiment's name" style="width:13em" value="${r.name}" readonly />
           ${lineData}
           <div data-type="total" data-tip="Total military personnel (not considering crew)" style="font-weight: bold">${r.a}</div>
           <span data-tip="Edit regiment" onclick="editRegiment('#regiment${s.i}-${r.i}')" class="icon-pencil pointer"></span>
@@ -74,7 +74,7 @@ function overviewRegiments(state) {
       }
     }
 
-    lines += `<div id="regimentsTotalLine" class="totalLine" data-tip="Total of all displayed regiments">
+    lines += /* html */ `<div id="regimentsTotalLine" class="totalLine" data-tip="Total of all displayed regiments">
       <div style="width: 21em; margin-left: 1em">Regiments: ${regiments.length}</div>
       ${options.military.map(u => `<div style="width:5em">${si(d3.sum(regiments.map(r => r.u[u.name] || 0)))}</div>`).join(" ")}
       <div style="width:5em">${si(d3.sum(regiments.map(r => r.a)))}</div>
diff --git a/modules/ui/relief-editor.js b/modules/ui/relief-editor.js
index ae924d49..abb800cd 100644
--- a/modules/ui/relief-editor.js
+++ b/modules/ui/relief-editor.js
@@ -254,7 +254,7 @@ function editReliefIcon() {
     let selection = null;
     const pressed = reliefTools.querySelector("button.pressed");
     if (pressed.id === "reliefIndividual") {
-      alertMessage.innerHTML = `Are you sure you want to remove the icon?`;
+      alertMessage.innerHTML = "Are you sure you want to remove the icon?";
       selection = elSelected;
     } else {
       const type = reliefIconsDiv.querySelector("svg.pressed")?.dataset.type;
diff --git a/modules/ui/religions-editor.js b/modules/ui/religions-editor.js
index 98a4d40d..f0f55921 100644
--- a/modules/ui/religions-editor.js
+++ b/modules/ui/religions-editor.js
@@ -77,14 +77,26 @@ function editReligions() {
       totalPopulation += population;
 
       if (r.i) {
-        lines += `<div class="states religions" data-id=${r.i} data-name="${r.name}" data-color="${r.color}" data-area=${area} 
-          data-population=${population} data-type=${r.type} data-form=${r.form} data-deity="${r.deity ? r.deity : ""}" data-expansionism=${r.expansionism}>
+        lines += /* html */ `<div
+          class="states religions"
+          data-id=${r.i}
+          data-name="${r.name}"
+          data-color="${r.color}"
+          data-area=${area}
+          data-population=${population}
+          data-type=${r.type}
+          data-form=${r.form}
+          data-deity="${r.deity ? r.deity : ""}"
+          data-expansionism=${r.expansionism}
+        >
           <fill-box fill="${r.color}"></fill-box>
-          <input data-tip="Religion name. Click and type to change" class="religionName" value="${r.name}" autocorrect="off" spellcheck="false">
-          <select data-tip="Religion type" class="religionType">${getTypeOptions(r.type)}</select>
-          <input data-tip="Religion form" class="religionForm hide" value="${r.form}" autocorrect="off" spellcheck="false">
+          <input data-tip="Religion name. Click and type to change" class="religionName" value="${r.name}" autocorrect="off" spellcheck="false" />
+          <select data-tip="Religion type" class="religionType">
+            ${getTypeOptions(r.type)}
+          </select>
+          <input data-tip="Religion form" class="religionForm hide" value="${r.form}" autocorrect="off" spellcheck="false" />
           <span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw hide"></span>
-          <input data-tip="Religion supreme deity" class="religionDeity hide" value="${r.deity ? r.deity : ""}" autocorrect="off" spellcheck="false">
+          <input data-tip="Religion supreme deity" class="religionDeity hide" value="${r.deity ? r.deity : ""}" autocorrect="off" spellcheck="false" />
           <span data-tip="Religion area" style="padding-right: 4px" class="icon-map-o hide"></span>
           <div data-tip="Religion area" class="biomeArea hide">${si(area) + unit}</div>
           <span data-tip="${populationTip}" class="icon-male hide"></span>
@@ -93,15 +105,26 @@ function editReligions() {
         </div>`;
       } else {
         // No religion (neutral) line
-        lines += `<div class="states" data-id=${r.i} data-name="${
-          r.name
-        }" data-color="" data-area=${area} data-population=${population} data-type="" data-form="" data-deity="" data-expansionism="">
+        lines += /* html */ `<div
+          class="states"
+          data-id=${r.i}
+          data-name="${r.name}"
+          data-color=""
+          data-area=${area}
+          data-population=${population}
+          data-type=""
+          data-form=""
+          data-deity=""
+          data-expansionism=""
+        >
           <svg width="9" height="9" class="placeholder"></svg>
-          <input data-tip="Religion name. Click and type to change" class="religionName italic" value="${r.name}" autocorrect="off" spellcheck="false">
-          <select data-tip="Religion type" class="religionType placeholder">${getTypeOptions(r.type)}</select>
-          <input data-tip="Religion form" class="religionForm placeholder hide" value="" autocorrect="off" spellcheck="false">
+          <input data-tip="Religion name. Click and type to change" class="religionName italic" value="${r.name}" autocorrect="off" spellcheck="false" />
+          <select data-tip="Religion type" class="religionType placeholder">
+            ${getTypeOptions(r.type)}
+          </select>
+          <input data-tip="Religion form" class="religionForm placeholder hide" value="" autocorrect="off" spellcheck="false" />
           <span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw placeholder hide"></span>
-          <input data-tip="Religion supreme deity" class="religionDeity placeholder hide" value="" autocorrect="off" spellcheck="false">
+          <input data-tip="Religion supreme deity" class="religionDeity placeholder hide" value="" autocorrect="off" spellcheck="false" />
           <span data-tip="Religion area" style="padding-right: 4px" class="icon-map-o hide"></span>
           <div data-tip="Religion area" class="biomeArea hide">${si(area) + unit}</div>
           <span data-tip="${populationTip}" class="icon-male hide"></span>
@@ -163,7 +186,7 @@ function editReligions() {
       const rural = r.rural * populationRate;
       const urban = r.urban * populationRate * urbanization;
       const population = rural + urban > 0 ? ". " + si(rn(rural + urban)) + " believers" : ". Extinct";
-      info.innerHTML = `${r.name}${type}${form}${population}`;
+      info.innerHTML = /* html */ `${r.name}${type}${form}${population}`;
       tip("Drag to change parent, drag to itself to move to the top level. Hold CTRL and click to change abbreviation");
     }
 
@@ -279,11 +302,15 @@ function editReligions() {
     const l = n => Number(n).toLocaleString();
     const burgs = pack.burgs.filter(b => !b.removed && pack.cells.religion[b.cell] === religion);
 
-    alertMessage.innerHTML = `<p><i>Please note all population of religion territory is considered 
-    believers of this religion. It means believers number change will directly change population</i></p>
-    Rural: <input type="number" min=0 step=1 id="ruralPop" value=${rural} style="width:6em">
-    Urban: <input type="number" min=0 step=1 id="urbanPop" value=${urban} style="width:6em" ${burgs.length ? "" : "disabled"}>
-    <p>Total believers: ${l(total)} ⇒ <span id="totalPop">${l(total)}</span> (<span id="totalPopPerc">100</span>%)</p>`;
+    alertMessage.innerHTML = /* html */ `<p>
+        <i
+          >Please note all population of religion territory is considered believers of this religion. It means believers number change will directly change
+          population</i
+        >
+      </p>
+      Rural: <input type="number" min="0" step="1" id="ruralPop" value=${rural} style="width:6em" /> Urban:
+      <input type="number" min="0" step="1" id="urbanPop" value=${urban} style="width:6em" ${burgs.length ? "" : "disabled"} />
+      <p>Total believers: ${l(total)} ⇒ <span id="totalPop">${l(total)}</span> (<span id="totalPopPerc">100</span>%)</p>`;
 
     const update = function () {
       const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
diff --git a/modules/ui/rivers-overview.js b/modules/ui/rivers-overview.js
index 4c19bf35..e9045fd5 100644
--- a/modules/ui/rivers-overview.js
+++ b/modules/ui/rivers-overview.js
@@ -38,14 +38,23 @@ function overviewRivers() {
       const width = rn(r.width * distanceScaleInput.value, 3) + " " + unit;
       const basin = pack.rivers.find(river => river.i === r.basin)?.name;
 
-      lines += `<div class="states" data-id=${r.i} data-name="${r.name}" data-type="${r.type}" data-discharge="${r.discharge}" data-length="${r.length}" data-width="${r.width}" data-basin="${basin}">
+      lines += /* html */ `<div
+        class="states"
+        data-id=${r.i}
+        data-name="${r.name}"
+        data-type="${r.type}"
+        data-discharge="${r.discharge}"
+        data-length="${r.length}"
+        data-width="${r.width}"
+        data-basin="${basin}"
+      >
         <span data-tip="Click to focus on river" class="icon-dot-circled pointer"></span>
         <div data-tip="River name" class="riverName">${r.name}</div>
         <div data-tip="River type name" class="riverType">${r.type}</div>
         <div data-tip="River discharge (flux power)" class="biomeArea">${discharge}</div>
         <div data-tip="River length from source to mouth" class="biomeArea">${length}</div>
         <div data-tip="River mouth width" class="biomeArea">${width}</div>
-        <input data-tip="River basin (name of the main stem)" class="stateName" value="${basin}" disabled>
+        <input data-tip="River basin (name of the main stem)" class="stateName" value="${basin}" disabled />
         <span data-tip="Edit river" class="icon-pencil"></span>
         <span data-tip="Remove river" class="icon-trash-empty"></span>
       </div>`;
@@ -136,8 +145,7 @@ function overviewRivers() {
 
   function triggerRiverRemove() {
     const river = +this.parentNode.dataset.id;
-    alertMessage.innerHTML = `Are you sure you want to remove the river? 
-      All tributaries will be auto-removed`;
+    alertMessage.innerHTML = /* html */ `Are you sure you want to remove the river? All tributaries will be auto-removed`;
 
     $("#alert").dialog({
       resizable: false,
@@ -157,7 +165,7 @@ function overviewRivers() {
   }
 
   function triggerAllRiversRemove() {
-    alertMessage.innerHTML = `Are you sure you want to remove all rivers?`;
+    alertMessage.innerHTML = /* html */ `Are you sure you want to remove all rivers?`;
     $("#alert").dialog({
       resizable: false,
       title: "Remove all rivers",
diff --git a/modules/ui/routes-editor.js b/modules/ui/routes-editor.js
index 0b743652..785c22a9 100644
--- a/modules/ui/routes-editor.js
+++ b/modules/ui/routes-editor.js
@@ -6,7 +6,8 @@ function editRoute(onClick) {
   if (!layerIsOn("toggleRoutes")) toggleRoutes();
 
   $("#routeEditor").dialog({
-    title: "Edit Route", resizable: false,
+    title: "Edit Route",
+    resizable: false,
     position: {my: "center top+60", at: "top", of: d3.event, collision: "fit"},
     close: closeRoutesEditor
   });
@@ -41,23 +42,27 @@ function editRoute(onClick) {
   function showEditorTips() {
     showMainTip();
     if (routeNew.classList.contains("pressed")) return;
-    if (d3.event.target.id === elSelected.attr("id")) tip("Click to add a control point"); else
-    if (d3.event.target.parentNode.id === "controlPoints") tip("Drag to move, click to delete the control point");
+    if (d3.event.target.id === elSelected.attr("id")) tip("Click to add a control point");
+    else if (d3.event.target.parentNode.id === "controlPoints") tip("Drag to move, click to delete the control point");
   }
 
   function drawControlPoints(node) {
     const l = node.getTotalLength();
     const increment = l / Math.ceil(l / 4);
-    for (let i=0; i <= l; i += increment) {
+    for (let i = 0; i <= l; i += increment) {
       const point = node.getPointAtLength(i);
       addControlPoint([point.x, point.y]);
     }
     routeLength.innerHTML = rn(l * distanceScaleInput.value) + " " + distanceUnitInput.value;
   }
-  
+
   function addControlPoint(point, before = null) {
-    debug.select("#controlPoints").insert("circle", before)
-      .attr("cx", point[0]).attr("cy", point[1]).attr("r", .6)
+    debug
+      .select("#controlPoints")
+      .insert("circle", before)
+      .attr("cx", point[0])
+      .attr("cy", point[1])
+      .attr("r", 0.6)
       .call(d3.drag().on("drag", dragControlPoint))
       .on("click", clickControlPoint);
   }
@@ -67,11 +72,11 @@ function editRoute(onClick) {
     const controls = document.getElementById("controlPoints").querySelectorAll("circle");
     const points = Array.from(controls).map(circle => [+circle.getAttribute("cx"), +circle.getAttribute("cy")]);
     const index = getSegmentId(points, point, 2);
-    addControlPoint(point, ":nth-child(" + (index+1) + ")");
+    addControlPoint(point, ":nth-child(" + (index + 1) + ")");
 
     redrawRoute();
   }
-  
+
   function dragControlPoint() {
     this.setAttribute("cx", d3.event.x);
     this.setAttribute("cy", d3.event.y);
@@ -79,11 +84,14 @@ function editRoute(onClick) {
   }
 
   function redrawRoute() {
-    lineGen.curve(d3.curveCatmullRom.alpha(.1));
+    lineGen.curve(d3.curveCatmullRom.alpha(0.1));
     const points = [];
-    debug.select("#controlPoints").selectAll("circle").each(function() {
-      points.push([this.getAttribute("cx"), this.getAttribute("cy")]);
-    });
+    debug
+      .select("#controlPoints")
+      .selectAll("circle")
+      .each(function () {
+        points.push([this.getAttribute("cx"), this.getAttribute("cy")]);
+      });
 
     elSelected.attr("d", round(lineGen(points)));
     const l = elSelected.node().getTotalLength();
@@ -98,16 +106,16 @@ function editRoute(onClick) {
   }
 
   function showGroupSection() {
-    document.querySelectorAll("#routeEditor > button").forEach(el => el.style.display = "none");
+    document.querySelectorAll("#routeEditor > button").forEach(el => (el.style.display = "none"));
     document.getElementById("routeGroupsSelection").style.display = "inline-block";
   }
 
   function hideGroupSection() {
-    document.querySelectorAll("#routeEditor > button").forEach(el => el.style.display = "inline-block");
+    document.querySelectorAll("#routeEditor > button").forEach(el => (el.style.display = "inline-block"));
     document.getElementById("routeGroupsSelection").style.display = "none";
     document.getElementById("routeGroupName").style.display = "none";
     document.getElementById("routeGroupName").value = "";
-    document.getElementById("routeGroup").style.display = "inline-block"; 
+    document.getElementById("routeGroup").style.display = "inline-block";
   }
 
   function selectRouteGroup(node) {
@@ -115,15 +123,15 @@ function editRoute(onClick) {
     const select = document.getElementById("routeGroup");
     select.options.length = 0; // remove all options
 
-    routes.selectAll("g").each(function() {
+    routes.selectAll("g").each(function () {
       select.options.add(new Option(this.id, this.id, false, this.id === group));
     });
   }
-  
+
   function changeRouteGroup() {
     document.getElementById(this.value).appendChild(elSelected.node());
   }
-  
+
   function toggleNewGroupInput() {
     if (routeGroupName.style.display === "none") {
       routeGroupName.style.display = "inline-block";
@@ -132,12 +140,18 @@ function editRoute(onClick) {
     } else {
       routeGroupName.style.display = "none";
       routeGroup.style.display = "inline-block";
-    }   
+    }
   }
-  
+
   function createNewGroup() {
-    if (!this.value) {tip("Please provide a valid group name"); return;}
-    const group = this.value.toLowerCase().replace(/ /g, "_").replace(/[^\w\s]/gi, "");
+    if (!this.value) {
+      tip("Please provide a valid group name");
+      return;
+    }
+    const group = this.value
+      .toLowerCase()
+      .replace(/ /g, "_")
+      .replace(/[^\w\s]/gi, "");
 
     if (document.getElementById(group)) {
       tip("Element with this id already exists. Please provide a unique name", false, "error");
@@ -152,11 +166,11 @@ function editRoute(onClick) {
     const oldGroup = elSelected.node().parentNode;
     const basic = ["roads", "trails", "searoutes"].includes(oldGroup.id);
     if (!basic && oldGroup.childElementCount === 1) {
-      document.getElementById("routeGroup").selectedOptions[0].remove();      
+      document.getElementById("routeGroup").selectedOptions[0].remove();
       document.getElementById("routeGroup").options.add(new Option(group, group, false, true));
       oldGroup.id = group;
       toggleNewGroupInput();
-      document.getElementById("routeGroupName").value = "";      
+      document.getElementById("routeGroupName").value = "";
       return;
     }
 
@@ -169,24 +183,33 @@ function editRoute(onClick) {
     toggleNewGroupInput();
     document.getElementById("routeGroupName").value = "";
   }
-  
+
   function removeRouteGroup() {
     const group = elSelected.node().parentNode.id;
     const basic = ["roads", "trails", "searoutes"].includes(group);
     const count = elSelected.node().parentNode.childElementCount;
-    alertMessage.innerHTML = `Are you sure you want to remove 
-      ${basic ? "all elements in the group" : "the entire route group"}?
-      <br><br>Routes to be removed: ${count}`;
-    $("#alert").dialog({resizable: false, title: "Remove route group",
+    alertMessage.innerHTML = /* html */ `Are you sure you want to remove ${
+      basic ? "all elements in the group" : "the entire route group"
+    }? <br /><br />Routes to be
+      removed: ${count}`;
+    $("#alert").dialog({
+      resizable: false,
+      title: "Remove route group",
       buttons: {
-        Remove: function() {
+        Remove: function () {
           $(this).dialog("close");
           $("#routeEditor").dialog("close");
           hideGroupSection();
-          if (basic) routes.select("#"+group).selectAll("path").remove();
-          else routes.select("#"+group).remove();
+          if (basic)
+            routes
+              .select("#" + group)
+              .selectAll("path")
+              .remove();
+          else routes.select("#" + group).remove();
         },
-        Cancel: function() {$(this).dialog("close");}
+        Cancel: function () {
+          $(this).dialog("close");
+        }
       }
     });
   }
@@ -203,24 +226,31 @@ function editRoute(onClick) {
 
   function clickControlPoint() {
     if (routeSplit.classList.contains("pressed")) splitRoute(this);
-    else {this.remove(); redrawRoute();}
+    else {
+      this.remove();
+      redrawRoute();
+    }
   }
-  
+
   function splitRoute(clicked) {
-    lineGen.curve(d3.curveCatmullRom.alpha(.1));
+    lineGen.curve(d3.curveCatmullRom.alpha(0.1));
     const group = d3.select(elSelected.node().parentNode);
     routeSplit.classList.remove("pressed");
 
-    const points1 = [], points2 = [];
+    const points1 = [],
+      points2 = [];
     let points = points1;
-    debug.select("#controlPoints").selectAll("circle").each(function() {
-      points.push([this.getAttribute("cx"), this.getAttribute("cy")]);
-      if (this === clicked) {
-        points = points2;
+    debug
+      .select("#controlPoints")
+      .selectAll("circle")
+      .each(function () {
         points.push([this.getAttribute("cx"), this.getAttribute("cy")]);
-      }
-      this.remove();
-    });
+        if (this === clicked) {
+          points = points2;
+          points.push([this.getAttribute("cx"), this.getAttribute("cy")]);
+        }
+        this.remove();
+      });
 
     elSelected.attr("d", round(lineGen(points1)));
     const id = getNextId("route");
@@ -263,14 +293,18 @@ function editRoute(onClick) {
 
   function removeRoute() {
     alertMessage.innerHTML = "Are you sure you want to remove the route?";
-    $("#alert").dialog({resizable: false, title: "Remove route",
+    $("#alert").dialog({
+      resizable: false,
+      title: "Remove route",
       buttons: {
-        Remove: function() {
+        Remove: function () {
           $(this).dialog("close");
           elSelected.remove();
           $("#routeEditor").dialog("close");
         },
-        Cancel: function() {$(this).dialog("close");}
+        Cancel: function () {
+          $(this).dialog("close");
+        }
       }
     });
   }
diff --git a/modules/ui/states-editor.js b/modules/ui/states-editor.js
index d7909614..8fd12945 100644
--- a/modules/ui/states-editor.js
+++ b/modules/ui/states-editor.js
@@ -100,24 +100,41 @@ function editStates() {
 
       if (!s.i) {
         // Neutral line
-        lines += `<div class="states" data-id=${s.i} data-name="${s.name}" data-cells=${s.cells} data-area=${area} 
-        data-population=${population} data-burgs=${s.burgs} data-color="" data-form="" data-capital="" data-culture="" data-type="" data-expansionism="">
+        lines += /* html */ `<div
+          class="states"
+          data-id=${s.i}
+          data-name="${s.name}"
+          data-cells=${s.cells}
+          data-area=${area}
+          data-population=${population}
+          data-burgs=${s.burgs}
+          data-color=""
+          data-form=""
+          data-capital=""
+          data-culture=""
+          data-type=""
+          data-expansionism=""
+        >
           <svg width="1em" height="1em" class="placeholder"></svg>
-          <input data-tip="Neutral lands name. Click to change" class="stateName name pointer italic" value="${s.name}" readonly>
+          <input data-tip="Neutral lands name. Click to change" class="stateName name pointer italic" value="${s.name}" readonly />
           <svg class="coaIcon placeholder hide"></svg>
-          <input class="stateForm placeholder" value="none">
+          <input class="stateForm placeholder" value="none" />
           <span class="icon-star-empty placeholder hide"></span>
-          <input class="stateCapital placeholder hide">
-          <select class="stateCulture placeholder hide">${getCultureOptions(0)}</select>
+          <input class="stateCapital placeholder hide" />
+          <select class="stateCulture placeholder hide">
+            ${getCultureOptions(0)}
+          </select>
           <span data-tip="Burgs count" style="padding-right: 1px" class="icon-dot-circled hide"></span>
           <div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
           <span data-tip="Neutral lands area" style="padding-right: 4px" class="icon-map-o hide"></span>
           <div data-tip="Neutral lands area" class="biomeArea hide">${si(area) + unit}</div>
           <span data-tip="${populationTip}" class="icon-male hide"></span>
           <div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
-          <select class="cultureType ${hidden} placeholder show hide">${getTypeOptions(0)}</select>
+          <select class="cultureType ${hidden} placeholder show hide">
+            ${getTypeOptions(0)}
+          </select>
           <span class="icon-resize-full ${hidden} placeholder show hide"></span>
-          <input class="statePower ${hidden} placeholder show hide" type="number" value=0>
+          <input class="statePower ${hidden} placeholder show hide" type="number" value="0" />
           <span data-tip="Cells count" class="icon-check-empty ${hidden} show hide"></span>
           <div data-tip="Cells count" class="stateCells ${hidden} show hide">${s.cells}</div>
         </div>`;
@@ -126,26 +143,49 @@ function editStates() {
 
       const capital = pack.burgs[s.capital].name;
       COArenderer.trigger("stateCOA" + s.i, s.coa);
-      lines += `<div class="states" data-id=${s.i} data-name="${s.name}" data-form="${s.formName}" data-capital="${capital}"
-        data-color="${s.color}" data-cells=${s.cells} data-area=${area} data-population=${population} data-burgs=${s.burgs}
-        data-culture=${pack.cultures[s.culture].name} data-type=${s.type} data-expansionism=${s.expansionism}>
+      lines += /* html */ `<div
+        class="states"
+        data-id=${s.i}
+        data-name="${s.name}"
+        data-form="${s.formName}"
+        data-capital="${capital}"
+        data-color="${s.color}"
+        data-cells=${s.cells}
+        data-area=${area}
+        data-population=${population}
+        data-burgs=${s.burgs}
+        data-culture=${pack.cultures[s.culture].name}
+        data-type=${s.type}
+        data-expansionism=${s.expansionism}
+      >
         <fill-box fill="${s.color}"></fill-box>
-        <input data-tip="State name. Click to change" class="stateName name pointer" value="${s.name}" readonly>
+        <input data-tip="State name. Click to change" class="stateName name pointer" value="${s.name}" readonly />
         <svg data-tip="Click to show and edit state emblem" class="coaIcon pointer hide" viewBox="0 0 200 200"><use href="#stateCOA${s.i}"></use></svg>
-        <input data-tip="State form name. Click to change" class="stateForm name pointer" value="${s.formName}" readonly>
+        <input data-tip="State form name. Click to change" class="stateForm name pointer" value="${s.formName}" readonly />
         <span data-tip="State capital. Click to zoom into view" class="icon-star-empty pointer hide"></span>
-        <input data-tip="Capital name. Click and type to rename" class="stateCapital hide" value="${capital}" autocorrect="off" spellcheck="false"/>
-        <select data-tip="Dominant culture. Click to change" class="stateCulture hide">${getCultureOptions(s.culture)}</select>
+        <input data-tip="Capital name. Click and type to rename" class="stateCapital hide" value="${capital}" autocorrect="off" spellcheck="false" />
+        <select data-tip="Dominant culture. Click to change" class="stateCulture hide">
+          ${getCultureOptions(s.culture)}
+        </select>
         <span data-tip="Burgs count" style="padding-right: 1px" class="icon-dot-circled hide"></span>
         <div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
         <span data-tip="State area" style="padding-right: 4px" class="icon-map-o hide"></span>
         <div data-tip="State area" class="biomeArea hide">${si(area) + unit}</div>
         <span data-tip="${populationTip}" class="icon-male hide"></span>
         <div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
-        <select data-tip="State type. Defines growth model. Click to change" class="cultureType ${hidden} show hide">${getTypeOptions(s.type)}</select>
+        <select data-tip="State type. Defines growth model. Click to change" class="cultureType ${hidden} show hide">
+          ${getTypeOptions(s.type)}
+        </select>
         <span data-tip="State expansionism" class="icon-resize-full ${hidden} show hide"></span>
-        <input data-tip="Expansionism (defines competitive size). Change to re-calculate states based on new value"
-          class="statePower ${hidden} show hide" type="number" min=0 max=99 step=.1 value=${s.expansionism}>
+        <input
+          data-tip="Expansionism (defines competitive size). Change to re-calculate states based on new value"
+          class="statePower ${hidden} show hide"
+          type="number"
+          min="0"
+          max="99"
+          step=".1"
+          value=${s.expansionism}
+        />
         <span data-tip="Cells count" class="icon-check-empty ${hidden} show hide"></span>
         <div data-tip="Cells count" class="stateCells ${hidden} show hide">${s.cells}</div>
         <span data-tip="Toggle state focus" class="icon-pin ${focused ? "" : " inactive"} hide"></span>
@@ -373,10 +413,9 @@ function editStates() {
     const total = rural + urban;
     const l = n => Number(n).toLocaleString();
 
-    alertMessage.innerHTML = `
-    Rural: <input type="number" min=0 step=1 id="ruralPop" value=${rural} style="width:6em">
-    Urban: <input type="number" min=0 step=1 id="urbanPop" value=${urban} style="width:6em" ${s.burgs ? "" : "disabled"}>
-    <p>Total population: ${l(total)} ⇒ <span id="totalPop">${l(total)}</span> (<span id="totalPopPerc">100</span>%)</p>`;
+    alertMessage.innerHTML = /* html */ ` Rural: <input type="number" min="0" step="1" id="ruralPop" value=${rural} style="width:6em" /> Urban:
+      <input type="number" min="0" step="1" id="urbanPop" value=${urban} style="width:6em" ${s.burgs ? "" : "disabled"} />
+      <p>Total population: ${l(total)} ⇒ <span id="totalPop">${l(total)}</span> (<span id="totalPopPerc">100</span>%)</p>`;
 
     const update = function () {
       const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
@@ -592,7 +631,7 @@ function editStates() {
     const treeLayout = d3.pack().size([w, h]).padding(3);
 
     // prepare svg
-    alertMessage.innerHTML = `<select id="statesTreeType" style="display:block; margin-left:13px; font-size:11px">
+    alertMessage.innerHTML = /* html */ `<select id="statesTreeType" style="display:block; margin-left:13px; font-size:11px">
       <option value="area" selected>Area</option>
       <option value="population">Total population</option>
       <option value="rural">Rural population</option>
@@ -664,7 +703,7 @@ function editStates() {
           ? "Burgs number: " + d.data.burgs
           : "Population: " + si(rural + urban);
 
-      statesInfo.innerHTML = `${state}. ${value}`;
+      statesInfo.innerHTML = /* html */ `${state}. ${value}`;
       stateHighlightOn(ev);
     }
 
diff --git a/modules/ui/style.js b/modules/ui/style.js
index f1586f35..9e39ae6f 100644
--- a/modules/ui/style.js
+++ b/modules/ui/style.js
@@ -712,8 +712,8 @@ emblemsBurgSizeInput.addEventListener("change", drawEmblems);
 
 // request a URL to image to be used as a texture
 function textureProvideURL() {
-  alertMessage.innerHTML = `Provide an image URL to be used as a texture:
-    <input id="textureURL" type="url" style="width: 100%" placeholder="http://www.example.com/image.jpg" oninput="fetchTextureURL(this.value)">
+  alertMessage.innerHTML = /* html */ `Provide an image URL to be used as a texture:
+    <input id="textureURL" type="url" style="width: 100%" placeholder="http://www.example.com/image.jpg" oninput="fetchTextureURL(this.value)" />
     <canvas id="texturePreview" width="256px" height="144px"></canvas>`;
   $("#alert").dialog({
     resizable: false,
diff --git a/modules/ui/submap.js b/modules/ui/submap.js
index a2fae5f7..e987cba0 100644
--- a/modules/ui/submap.js
+++ b/modules/ui/submap.js
@@ -203,8 +203,7 @@ window.UISubmap = (function () {
     ERROR && console.error(error);
     clearMainTip();
 
-    alertMessage.innerHTML = `Map resampling failed:
-      <br>You may retry after clearing stored data or contact us at discord.
+    alertMessage.innerHTML = /* html */ `Map resampling failed: <br />You may retry after clearing stored data or contact us at discord.
       <p id="errorBox">${parseError(error)}</p>`;
     $("#alert").dialog({
       resizable: false,
diff --git a/modules/ui/tools.js b/modules/ui/tools.js
index ea297ddd..46e75586 100644
--- a/modules/ui/tools.js
+++ b/modules/ui/tools.js
@@ -35,7 +35,7 @@ toolsContent.addEventListener("click", function (event) {
       return;
     }
 
-    alertMessage.innerHTML = `Regeneration will remove all the custom changes for the element.<br><br>Are you sure you want to proceed?`;
+    alertMessage.innerHTML = /* html */ `Regeneration will remove all the custom changes for the element.<br /><br />Are you sure you want to proceed?`;
     $("#alert").dialog({
       resizable: false,
       title: "Regenerate element",
diff --git a/modules/ui/units-editor.js b/modules/ui/units-editor.js
index 0f1345e0..37645978 100644
--- a/modules/ui/units-editor.js
+++ b/modules/ui/units-editor.js
@@ -277,9 +277,8 @@ function editUnits() {
 
   function removeAllRulers() {
     if (!rulers.data.length) return;
-    alertMessage.innerHTML = `
-      Are you sure you want to remove all placed rulers?
-      <br>If you just want to hide rulers, toggle the Rulers layer off in Menu`;
+    alertMessage.innerHTML = /* html */ ` Are you sure you want to remove all placed rulers?
+      <br />If you just want to hide rulers, toggle the Rulers layer off in Menu`;
     $("#alert").dialog({
       resizable: false,
       title: "Remove all rulers",
diff --git a/modules/ui/world-configurator.js b/modules/ui/world-configurator.js
index 22dccacb..bfd28964 100644
--- a/modules/ui/world-configurator.js
+++ b/modules/ui/world-configurator.js
@@ -77,12 +77,12 @@ function editWorld() {
     const scale = +distanceScaleInput.value,
       unit = distanceUnitInput.value;
     const meridian = toKilometer(eqD * 2 * scale);
-    document.getElementById("mapSize").innerHTML = `${graphWidth}x${graphHeight}`;
-    document.getElementById("mapSizeFriendly").innerHTML = `${rn(graphWidth * scale)}x${rn(graphHeight * scale)} ${unit}`;
+    document.getElementById("mapSize").innerHTML = /* html */ `${graphWidth}x${graphHeight}`;
+    document.getElementById("mapSizeFriendly").innerHTML = /* html */ `${rn(graphWidth * scale)}x${rn(graphHeight * scale)} ${unit}`;
     document.getElementById("meridianLength").innerHTML = rn(eqD * 2);
-    document.getElementById("meridianLengthFriendly").innerHTML = `${rn(eqD * 2 * scale)} ${unit}`;
+    document.getElementById("meridianLengthFriendly").innerHTML = /* html */ `${rn(eqD * 2 * scale)} ${unit}`;
     document.getElementById("meridianLengthEarth").innerHTML = meridian ? " = " + rn(meridian / 200) + "%🌏" : "";
-    document.getElementById("mapCoordinates").innerHTML = `${lat(mc.latN)} ${Math.abs(rn(mc.lonW))}°W; ${lat(mc.latS)} ${rn(mc.lonE)}°E`;
+    document.getElementById("mapCoordinates").innerHTML = /* html */ `${lat(mc.latN)} ${Math.abs(rn(mc.lonW))}°W; ${lat(mc.latS)} ${rn(mc.lonE)}°E`;
 
     function toKilometer(v) {
       if (unit === "km") return v;
diff --git a/modules/ui/zones-editor.js b/modules/ui/zones-editor.js
index 122ea083..bd27840c 100644
--- a/modules/ui/zones-editor.js
+++ b/modules/ui/zones-editor.js
@@ -110,7 +110,7 @@ function editZones() {
     const totalArea = (zonesFooterArea.dataset.area = graphWidth * graphHeight * distanceScaleInput.value ** 2);
     const totalPop = (d3.sum(pack.cells.pop) + d3.sum(pack.burgs.filter(b => !b.removed).map(b => b.population)) * urbanization) * populationRate;
     zonesFooterPopulation.dataset.population = totalPop;
-    zonesFooterNumber.innerHTML = `${filteredZones.length} of ${zones.length}`;
+    zonesFooterNumber.innerHTML = /* html */ `${filteredZones.length} of ${zones.length}`;
     zonesFooterCells.innerHTML = pack.cells.i.length;
     zonesFooterArea.innerHTML = si(totalArea) + unit;
     zonesFooterPopulation.innerHTML = si(totalPop);
@@ -414,10 +414,9 @@ function editZones() {
     const total = rural + urban;
     const l = n => Number(n).toLocaleString();
 
-    alertMessage.innerHTML = `
-    Rural: <input type="number" min=0 step=1 id="ruralPop" value=${rural} style="width:6em">
-    Urban: <input type="number" min=0 step=1 id="urbanPop" value=${urban} style="width:6em" ${burgs.length ? "" : "disabled"}>
-    <p>Total population: ${l(total)} ⇒ <span id="totalPop">${l(total)}</span> (<span id="totalPopPerc">100</span>%)</p>`;
+    alertMessage.innerHTML = /* html */ `Rural: <input type="number" min="0" step="1" id="ruralPop" value=${rural} style="width:6em" /> Urban:
+      <input type="number" min="0" step="1" id="urbanPop" value=${urban} style="width:6em" ${burgs.length ? "" : "disabled"} />
+      <p>Total population: ${l(total)} ⇒ <span id="totalPop">${l(total)}</span> (<span id="totalPopPerc">100</span>%)</p>`;
 
     const update = function () {
       const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;