feat(1.89.19): google translate support

index.css

@@ -4,6 +4,21 @@
   --sans-serif: Helvetica, Arial, sans-serif;
 }
 
+/* hide Google translate header */
+body > .skiptranslate {
+  display: none;
+}
+
+/* hide Google translate in-progress widget */
+body > .skiptranslate + div {
+  display: none;
+}
+
+/* make translated text wrapper non-blocking */
+font {
+  pointer-events: none;
+}
+
 input,
 select,
 button {
@@ -597,6 +612,11 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   width: 100%;
 }
 
+#loadGoogleTranslateButton {
+  font-size: smaller;
+  padding: 0.4em 0.5em;
+}
+
 #options input[type="color"] {
   width: 2em;
   padding: 1px;
@@ -697,6 +717,11 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   margin: 0.35em 0;
   transition: 0.1s;
   font-size: 1em;
+  text-transform: capitalize;
+
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .tabcontent button.pressed {
@@ -750,6 +775,11 @@ fieldset {
   float: left;
   width: 28%;
   text-align: center;
+  text-transform: capitalize;
+
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .tabcontent .buttonoff {

index.html

@@ -40,6 +40,7 @@
     <style type="text/css">
       body {
         margin: 0;
+        top: 0 !important;
         font-size: 10px;
         overflow: hidden;
       }
@@ -362,10 +363,10 @@
         <use href="#rose" x="50%" y="50%" />
       </svg>
       <div id="loading-typography">
-        <div id="titleName"><t data-t="titleName">Azgaar's</t></div>
+        <div id="titleName">Azgaar's</div>
-        <div id="title"><t data-t="title">Fantasy Map Generator</t></div>
+        <div id="title">Fantasy Map Generator</div>
-        <div id="versionText"><t data-t="version">v</t><span id="version"></span></div>
+        <div id="versionText">v<span id="version"></span></div>
-        <p id="loading-text"><t data-t="loading">LOADING</t><span>.</span><span>.</span><span>.</span></p>
+        <p id="loading-text">LOADING<span>.</span><span>.</span><span>.</span></p>
       </div>
     </div>
 
@@ -373,7 +374,6 @@
       <div id="collapsible">
         <button
           id="optionsTrigger"
-          data-t="tipOptionsTrigger"
           data-tip="Click to show the Menu"
           data-shortcut="Tab"
           class="options glow"
@@ -383,24 +383,22 @@
         </button>
         <button
           id="regenerate"
-          data-t="tipRegenerate"
           data-tip="Click to generate a new map"
           data-shortcut="F2"
           onclick="regeneratePrompt()"
           class="options"
           style="display: none"
         >
-          <t data-t="newMap">New Map!</t>
+          New Map!
         </button>
       </div>
 
       <div id="options" style="display: none">
-        <div class="drag-trigger" data-t="optionsDragTrigger" data-tip="Drag to move the Menu"></div>
+        <div class="drag-trigger" data-tip="Drag to move the Menu"></div>
 
         <div class="tab">
           <button
             id="optionsHide"
-            data-t="optionsHide"
             data-tip="Click to hide the Menu"
             data-shortcut="Tab or Esc"
             class="options"
@@ -408,26 +406,11 @@
           >
             ◄
           </button>
-          <button id="layersTab" data-t="layersTab" data-tip="Click to change map layers" class="options active">
+          <button id="layersTab" data-tip="Click to change map layers" class="options active">Layers</button>
-            <t data-t="layers">Layers</t>
+          <button id="styleTab" data-tip="Click to open style editor" class="options">Style</button>
-          </button>
+          <button id="optionsTab" data-tip="Click to change generation and UI options" class="options">Options</button>
-          <button id="styleTab" data-t="styleTab" data-tip="Click to open style editor" class="options">
+          <button id="toolsTab" data-tip="Click to open tools menu" class="options">Tools</button>
-            <t data-t="style">Style</t>
+          <button id="aboutTab" data-tip="Click to see Generator info" class="options">About</button>
-          </button>
-          <button
-            id="optionsTab"
-            data-t="optionsTab"
-            data-tip="Click to change generation and UI options"
-            class="options"
-          >
-            <t data-t="options">Options</t>
-          </button>
-          <button id="toolsTab" data-t="toolsTab" data-tip="Click to open tools menu" class="options">
-            <t data-t="tools">Tools</t>
-          </button>
-          <button id="aboutTab" data-t="aboutTab" data-tip="Click to see Generator info" class="options">
-            <t data-t="about">About</t>
-          </button>
         </div>
 
         <div id="layersContent" class="tabcontent" style="display: block">
@@ -1905,17 +1888,19 @@
               <td></td>
             </tr>
 
-            <!-- <tr data-tip="Select language (not all languages are fully supported). Reload the page to apply">
+            <tr
-            <td></td>
+              data-tip="Load Google Translate and select language. Note that automatic translation can break some page functional. In this case reset the language back to English or refresh the page"
-            <td>Language</td>
+            >
-            <td>
+              <td>
-              <select id="selectLanguage" data-stored="lang">
+                <i data-tip="Reset language to English" id="resetLanguage" class="icon-ccw"></i>
-                <option value="en" selected>English (100%)</option>
+              </td>
-                <option value="ru">Русский (1%)</option>
+              <td>Language</td>
-              </select>
+              <td>
-            </td>
+                <button id="loadGoogleTranslateButton">Init Google Translate</button>
-            <td></td>
+                <div id="google_translate_element"></div>
-          </tr> -->
+              </td>
+              <td></td>
+            </tr>
           </table>
 
           <div>
@@ -7877,7 +7862,7 @@
     <script src="modules/ui/stylePresets.js?v=1.89.11"></script>
 
     <script src="modules/ui/general.js?v=1.87.03"></script>
-    <script src="modules/ui/options.js?v=1.89.15"></script>
+    <script src="modules/ui/options.js?v=1.89.19"></script>
     <script src="main.js?v=1.89.15"></script>
 
     <script defer src="modules/relief-icons.js"></script>

modules/ui/options.js

@@ -157,6 +157,8 @@ optionsContent.addEventListener("click", function (event) {
   else if (id === "translateExtent") toggleTranslateExtent(event.target);
   else if (id === "speakerTest") testSpeaker();
   else if (id === "themeColorRestore") restoreDefaultThemeColor();
+  else if (id === "loadGoogleTranslateButton") loadGoogleTranslate();
+  else if (id === "resetLanguage") resetLanguage();
 });
 
 function mapSizeInputChange() {
@@ -474,6 +476,44 @@ function changeDialogsTheme(themeColor, transparency) {
   });
 }
 
+function loadGoogleTranslate() {
+  const script = document.createElement("script");
+  script.src = "https://translate.google.com/translate_a/element.js?cb=initGoogleTranslate";
+  script.onload = () => {
+    document.getElementById("loadGoogleTranslateButton")?.remove();
+
+    // replace mapLayers underline <u> with bare text to avoid translation issue
+    document
+      .getElementById("mapLayers")
+      .querySelectorAll("li")
+      .forEach(el => {
+        const text = el.innerHTML.replace(/<u>(.+)<\/u>/g, "$1");
+        el.innerHTML = text;
+      });
+  };
+
+  document.head.appendChild(script);
+}
+
+function initGoogleTranslate() {
+  new google.translate.TranslateElement(
+    {pageLanguage: "en", layout: google.translate.TranslateElement.InlineLayout.VERTICAL},
+    "google_translate_element"
+  );
+}
+
+function resetLanguage() {
+  const languageSelect = document.querySelector("#google_translate_element select");
+  if (!languageSelect.value) return;
+
+  languageSelect.value = "en";
+  languageSelect.dispatchEvent(new Event("change"));
+
+  // do once again to actually reset the language
+  languageSelect.value = "en";
+  languageSelect.dispatchEvent(new Event("change"));
+}
+
 function changeZoomExtent(value) {
   if (+zoomExtentMin.value > +zoomExtentMax.value) {
     [zoomExtentMin.value, zoomExtentMax.value] = [zoomExtentMax.value, zoomExtentMin.value];

versioning.js

@@ -1,7 +1,7 @@
 "use strict";
 
 // version and caching control
-const version = "1.89.18"; // generator version, update each time
+const version = "1.89.19"; // generator version, update each time
 
 {
   document.title += " v" + version;
@@ -28,6 +28,7 @@ const version = "1.89.18"; // generator version, update each time
 
       <ul>
         <strong>Latest changes:</strong>
+        <li>Google translation support (in Options)</li>
         <li>Religions can be edited and redrawn like cultures</li>
         <li>Lock states, provinces, cultures, and religions from regeneration</li>
         <li>Heightmap brushes: linear edit option</li>
@@ -36,7 +37,6 @@ const version = "1.89.18"; // generator version, update each time
         <li>Heightmap selection screen</li>
         <li>Dialogs optimization for mobile</li>
         <li>New heightmap template: Fractious</li>
-        <li>Template Editor: mask and invert tools</li>
       </ul>
 
       <p>Join our <a href="${discord}" target="_blank">Discord server</a> and <a href="${reddit}" target="_blank">Reddit community</a> to ask questions, share maps, discuss the Generator and Worlbuilding, report bugs and propose new features.</p>