fix: icons - use textContent insteod of innerHTML to avoid Google translate issues

index.html

@@ -5597,7 +5597,9 @@
                 <th data-tip="Average number of people in crew (used for total personnel calculation)">Crew</th>
                 <th data-tip="Unit military power (used for battle simulation)">Power</th>
                 <th data-tip="Unit type to apply special rules on forces recalculation">Type</th>
-                <th data-tip="Check if unit is separate and can be stacked only with units of the same type">Sep.</th>
+                <th data-tip="Check if unit is separate and can be stacked only with units of the same type">
+                  Separate
+                </th>
               </tr>
             </thead>
             <tbody></tbody>
@@ -5763,7 +5765,7 @@
         <table id="iconTable" class="table pointer" style="font-size: 2em; text-align: center; width: 100%"></table>
         <div style="font-style: italic; font-size: 1.2em; margin: 0.4em 0 0 0.4em">
           <span>Select from the list or paste a Unicode character here: </span>
-          <input id="iconInput" style="width: 2em" />
+          <input id="iconInput" style="width: 2.5em" />
           <span>. See <a href="https://emojipedia.org" target="_blank">Emojipedia</a> for reference</span>
         </div>
       </div>
@@ -8063,7 +8065,7 @@
 
     <script defer src="modules/relief-icons.js"></script>
     <script defer src="modules/ui/style.js?v=1.96.00"></script>
-    <script defer src="modules/ui/editors.js?v=1.96.06"></script>
+    <script defer src="modules/ui/editors.js?v=1.96.07"></script>
     <script defer src="modules/ui/tools.js?v=1.96.03"></script>
     <script defer src="modules/ui/world-configurator.js?v=1.91.05"></script>
     <script defer src="modules/ui/heightmap-editor.js?v=1.96.00"></script>
@@ -8087,7 +8089,7 @@
     <script defer src="modules/ui/zones-editor.js"></script>
     <script defer src="modules/ui/burgs-overview.js?v=1.96.00"></script>
     <script defer src="modules/ui/rivers-overview.js"></script>
-    <script defer src="modules/ui/military-overview.js"></script>
+    <script defer src="modules/ui/military-overview.js?v=1.96.07"></script>
     <script defer src="modules/ui/regiments-overview.js?v=1.89.20"></script>
     <script defer src="modules/ui/markers-overview.js?v=1.89.38"></script>
     <script defer src="modules/ui/regiment-editor.js"></script>

modules/ui/editors.js

@@ -1093,12 +1093,12 @@ function selectIcon(initial, callback) {
   input.oninput = e => callback(input.value);
   table.onclick = e => {
     if (e.target.tagName === "TD") {
-      input.value = e.target.innerHTML;
+      input.value = e.target.textContent;
       callback(input.value);
     }
   };
   table.onmouseover = e => {
-    if (e.target.tagName === "TD") tip(`Click to select ${e.target.innerHTML} icon`);
+    if (e.target.tagName === "TD") tip(`Click to select ${e.target.textContent} icon`);
   };
 
   $("#iconSelector").dialog({

modules/ui/military-overview.js

@@ -54,7 +54,9 @@ function overviewMilitary() {
     const insert = html => document.getElementById("militaryTotal").insertAdjacentHTML("beforebegin", html);
     for (const u of options.military) {
       const label = capitalize(u.name.replace(/_/g, " "));
-      insert(`<div data-tip="State ${u.name} units number. Click to sort" class="sortable removable" data-sortby="${u.name}">${label}&nbsp;</div>`);
+      insert(
+        `<div data-tip="State ${u.name} units number. Click to sort" class="sortable removable" data-sortby="${u.name}">${label}&nbsp;</div>`
+      );
     }
     header.querySelectorAll(".removable").forEach(function (e) {
       e.addEventListener("click", function () {
@@ -76,7 +78,9 @@ function overviewMilitary() {
       const rate = (total / population) * 100;
 
       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(" ");
+      const lineData = options.military
+        .map(u => `<div data-type="${u.name}" data-tip="State ${u.name} units number">${getForces(u)}</div>`)
+        .join(" ");
 
       lines += /* html */ `<div
         class="states"
@@ -91,9 +95,14 @@ function overviewMilitary() {
         <fill-box data-tip="${s.fullName}" fill="${s.color}" disabled></fill-box>
         <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="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>
+        <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"
@@ -131,7 +140,9 @@ function overviewMilitary() {
     });
 
     const getForces = u => s.military.reduce((s, r) => s + (r.u[u.name] || 0), 0);
-    options.military.forEach(u => (line.dataset[u.name] = line.querySelector(`div[data-type='${u.name}']`).innerHTML = getForces(u)));
+    options.military.forEach(
+      u => (line.dataset[u.name] = line.querySelector(`div[data-type='${u.name}']`).innerHTML = getForces(u))
+    );
 
     const population = rn((s.rural + s.urban * urbanization) * populationRate);
     const total = (line.dataset.total = options.military.reduce((s, u) => s + getForces(u) * u.crew, 0));
@@ -237,7 +248,16 @@ function overviewMilitary() {
       position: {my: "center", at: "center", of: "svg"},
       buttons: {
         Apply: applyMilitaryOptions,
-        Add: () => addUnitLine({icon: "🛡️", name: "custom" + militaryOptionsTable.rows.length, rural: 0.2, urban: 0.5, crew: 1, power: 1, type: "melee"}),
+        Add: () =>
+          addUnitLine({
+            icon: "🛡️",
+            name: "custom" + militaryOptionsTable.rows.length,
+            rural: 0.2,
+            urban: 0.5,
+            crew: 1,
+            power: 1,
+            type: "melee"
+          }),
         Restore: restoreDefaultUnits,
         Cancel: function () {
           $(this).dialog("close");
@@ -262,7 +282,7 @@ function overviewMilitary() {
       if (el.tagName !== "BUTTON") return;
       const type = el.dataset.type;
 
-      if (type === "icon") return selectIcon(el.innerHTML, v => (el.innerHTML = v));
+      if (type === "icon") return selectIcon(el.textContent, v => (el.textContent = v));
       if (type === "biomes") {
         const {i, name, color} = biomesData;
         const biomesArray = Array(i.length).fill(null);
@@ -294,7 +314,9 @@ function overviewMilitary() {
     function addUnitLine(unit) {
       const {type, icon, name, rural, urban, power, crew, separate} = unit;
       const row = document.createElement("tr");
-      const typeOptions = types.map(t => `<option ${type === t ? "selected" : ""} value="${t}">${t}</option>`).join(" ");
+      const typeOptions = types
+        .map(t => `<option ${type === t ? "selected" : ""} value="${t}">${t}</option>`)
+        .join(" ");
 
       const getLimitButton = attr =>
         `<button 
@@ -305,7 +327,9 @@ function overviewMilitary() {
           ${getLimitText(unit[attr])}
         </button>`;
 
-      row.innerHTML = /* html */ `<td><button data-type="icon" data-tip="Click to select unit icon">${icon || " "}</button></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>
@@ -344,7 +368,9 @@ function overviewMilitary() {
       const lines = filtered.map(
         ({i, name, fullName, color}) =>
           `<tr data-tip="${name}"><td><span style="color:${color}">⬤</span></td>
-            <td><input data-i="${i}" id="el${i}" type="checkbox" class="checkbox" ${!initial.length || initial.includes(i) ? "checked" : ""} >
+            <td><input data-i="${i}" id="el${i}" type="checkbox" class="checkbox" ${
+            !initial.length || initial.includes(i) ? "checked" : ""
+          } >
             <label for="el${i}" class="checkbox-label">${fullName || name}</label>
           </td></tr>`
       );
@@ -387,22 +413,21 @@ function overviewMilitary() {
     function applyMilitaryOptions() {
       const unitLines = Array.from(tableBody.querySelectorAll("tr"));
       const names = unitLines.map(r => r.querySelector("input").value.replace(/[&\/\\#, +()$~%.'":*?<>{}]/g, "_"));
-      if (new Set(names).size !== names.length) {
+      if (new Set(names).size !== names.length) return tip("All units should have unique names", false, "error");
-        tip("All units should have unique names", false, "error");
-        return;
-      }
 
       $("#militaryOptions").dialog("close");
+
       options.military = unitLines.map((r, i) => {
         const elements = Array.from(r.querySelectorAll("input, button, select"));
-        const [icon, name, biomes, states, cultures, religions, rural, urban, crew, power, type, separate] = elements.map(el => {
+        const [icon, name, biomes, states, cultures, religions, rural, urban, crew, power, type, separate] =
-          const {type, value} = el.dataset || {};
+          elements.map(el => {
-          if (type === "icon") return el.innerHTML || "⠀";
+            const {type, value} = el.dataset || {};
-          if (type) return value ? value.split(",").map(v => parseInt(v)) : null;
+            if (type === "icon") return el.textContent || "⠀";
-          if (el.type === "number") return +el.value || 0;
+            if (type) return value ? value.split(",").map(v => parseInt(v)) : null;
-          if (el.type === "checkbox") return +el.checked || 0;
+            if (el.type === "number") return +el.value || 0;
-          return el.value;
+            if (el.type === "checkbox") return +el.checked || 0;
-        });
+            return el.value;
+          });
 
         const unit = {icon, name: names[i], rural, urban, crew, power, type, separate};
         if (biomes) unit.biomes = biomes;
@@ -419,7 +444,8 @@ function overviewMilitary() {
   }
 
   function militaryRecalculate() {
-    alertMessage.innerHTML = "Are you sure you want to recalculate military forces for all states?<br>Regiments for all states will be regenerated";
+    alertMessage.innerHTML =
+      "Are you sure you want to recalculate military forces for all states?<br>Regiments for all states will be regenerated";
     $("#alert").dialog({
       resizable: false,
       title: "Remove regiment",

versioning.js

@@ -1,7 +1,7 @@
 "use strict";
 
 // version and caching control
-const version = "1.96.06"; // generator version, update each time
+const version = "1.96.07"; // generator version, update each time
 
 {
   document.title += " v" + version;