refactor(es modules): dissolve general.js

src/scripts/events.js

@@ -1,8 +1,10 @@
-import {dragLegendBox} from "../modules/legend";
-import {findCell, findGridCell} from "../utils/graphUtils";
-import {tip, showMainTip} from "./tooltips";
-import {si, convertTemperature} from "../utils/unitUtils";
-import {debounce} from "../utils/functionUtils";
+import {dragLegendBox} from "modules/legend";
+import {debounce} from "utils/functionUtils";
+import {findCell, findGridCell} from "utils/graphUtils";
+import {byId} from "utils/shorthands";
+import {convertTemperature, si, getFriendlyHeight, getCellIdPrecipitation, getPopulationTip} from "utils/unitUtils";
+import {showMainTip, tip} from "./tooltips";
+import {updateCellInfo} from "modules/ui/cell-info";
 
 export function restoreDefaultEvents() {
   Zoom.setZoomBehavior();
@@ -59,13 +61,13 @@ function showNotes(event) {
 
   const note = notes.find(note => note.id === id);
   if (note !== undefined && note.legend !== "") {
-    document.getElementById("notes").style.display = "block";
-    document.getElementById("notesHeader").innerHTML = note.name;
-    document.getElementById("notesBody").innerHTML = note.legend;
+    byId("notes").style.display = "block";
+    byId("notesHeader").innerHTML = note.name;
+    byId("notesBody").innerHTML = note.legend;
   } else if (!options.pinNotes && !markerEditor?.offsetParent) {
-    document.getElementById("notes").style.display = "none";
-    document.getElementById("notesHeader").innerHTML = "";
-    document.getElementById("notesBody").innerHTML = "";
+    byId("notes").style.display = "none";
+    byId("notesHeader").innerHTML = "";
+    byId("notesBody").innerHTML = "";
   }
 }
 
@@ -90,13 +92,12 @@ function showMapTooltip(point, event, packCellId, gridCellId) {
         ? [pack.provinces, "province"]
         : [pack.states, "state"];
     const i = +event.target.dataset.i;
-    if (event.shiftKey) highlightEmblemElement(type, g[i]);
 
     d3.select(event.target).raise();
     d3.select(parent).raise();
 
     const name = g[i].fullName || g[i].name;
-    tip(`${name} ${type} emblem. Click to edit. Hold Shift to show associated area or place`);
+    tip(`${name} ${type} emblem. Click to edit`);
     return;
   }
 
@@ -161,7 +162,7 @@ function showMapTooltip(point, event, packCellId, gridCellId) {
   if (group === "ice") return tip("Click to edit the Ice");
 
   // covering elements
-  if (layerIsOn("togglePrec") && land) tip("Annual Precipitation: " + getFriendlyPrecipitation(packCellId));
+  if (layerIsOn("togglePrec") && land) tip("Annual Precipitation: " + getCellIdPrecipitation(packCellId));
   else if (layerIsOn("togglePopulation")) tip(getPopulationTip(packCellId));
   else if (layerIsOn("toggleTemp")) tip("Temperature: " + convertTemperature(grid.cells.temp[gridCellId]));
   else if (layerIsOn("toggleBiomes") && pack.cells.biome[packCellId]) {
@@ -180,13 +181,23 @@ function showMapTooltip(point, event, packCellId, gridCellId) {
     const province = pack.cells.province[packCellId];
     const prov = province ? pack.provinces[province].fullName + ", " : "";
     tip(prov + stateName);
-    if (document.getElementById("statesEditor")?.offsetParent) highlightEditorLine(statesEditor, state);
-    if (document.getElementById("diplomacyEditor")?.offsetParent) highlightEditorLine(diplomacyEditor, state);
-    if (document.getElementById("militaryOverview")?.offsetParent) highlightEditorLine(militaryOverview, state);
-    if (document.getElementById("provincesEditor")?.offsetParent) highlightEditorLine(provincesEditor, province);
+    if (byId("statesEditor")?.offsetParent) highlightEditorLine(statesEditor, state);
+    if (byId("diplomacyEditor")?.offsetParent) highlightEditorLine(diplomacyEditor, state);
+    if (byId("militaryOverview")?.offsetParent) highlightEditorLine(militaryOverview, state);
+    if (byId("provincesEditor")?.offsetParent) highlightEditorLine(provincesEditor, province);
   } else if (layerIsOn("toggleCultures") && pack.cells.culture[packCellId]) {
     const culture = pack.cells.culture[packCellId];
     tip("Culture: " + pack.cultures[culture].name);
-    if (document.getElementById("culturesEditor")?.offsetParent) highlightEditorLine(culturesEditor, culture);
+    if (byId("culturesEditor")?.offsetParent) highlightEditorLine(culturesEditor, culture);
   } else if (layerIsOn("toggleHeight")) tip("Height: " + getFriendlyHeight(point));
 }
+
+function highlightEditorLine(editor, id, timeout = 10000) {
+  Array.from(editor.getElementsByClassName("states hovered")).forEach(el => el.classList.remove("hovered")); // clear all hovered
+  const hovered = Array.from(editor.querySelectorAll("div")).find(el => el.dataset.id == id);
+  if (hovered) hovered.classList.add("hovered"); // add hovered class
+  if (timeout)
+    setTimeout(() => {
+      hovered && hovered.classList.remove("hovered");
+    }, timeout);
+}

src/scripts/listeners.ts

@@ -1,12 +1,20 @@
 import {PRODUCTION} from "../constants";
 import {assignLockBehavior} from "./options/lock";
 import {addTooptipListers} from "./tooltips";
+import {assignSpeakerBehavior} from "./speaker";
+// @ts-ignore
+import {addResizeListener} from "modules/ui/options";
 
 export function addGlobalListeners() {
-  PRODUCTION && registerServiceWorker();
-  PRODUCTION && addInstallationPrompt();
+  if (PRODUCTION) {
+    registerServiceWorker();
+    addInstallationPrompt();
+    addBeforeunloadListener();
+  }
   assignLockBehavior();
   addTooptipListers();
+  addResizeListener();
+  assignSpeakerBehavior();
 }
 
 function registerServiceWorker() {
@@ -30,3 +38,7 @@ function addInstallationPrompt() {
     {once: true}
   );
 }
+
+function addBeforeunloadListener() {
+  window.onbeforeunload = () => "Are you sure you want to navigate away?";
+}

src/scripts/options/about.js

@@ -0,0 +1,49 @@
+// show info about the generator in a popup
+export function showAboutDialog() {
+  const Discord = link("https://discordapp.com/invite/X7E84HU", "Discord");
+  const Reddit = link("https://www.reddit.com/r/FantasyMapGenerator", "Reddit");
+  const Patreon = link("https://www.patreon.com/azgaar", "Patreon");
+  const Armoria = link("https://azgaar.github.io/Armoria", "Armoria");
+  const QuickStart = link(
+    "https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Quick-Start-Tutorial",
+    "Quick start tutorial"
+  );
+  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 = /* 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 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>
+
+    <ul style="columns:2">
+      <li>${link("https://github.com/Azgaar/Fantasy-Map-Generator", "GitHub repository")}</li>
+      <li>${link("https://github.com/Azgaar/Fantasy-Map-Generator/blob/master/LICENSE", "License")}</li>
+      <li>${link("https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Changelog", "Changelog")}</li>
+      <li>${link("https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Hotkeys", "Hotkeys")}</li>
+      <li>${link("https://trello.com/b/7x832DG4/fantasy-map-generator", "Devboard")}</li>
+      <li><a href="mailto:azgaar.fmg@yandex.by" target="_blank">Contact Azgaar</a></li>
+    </ul>`;
+
+  $("#alert").dialog({
+    resizable: false,
+    title: document.title,
+    width: "28em",
+    buttons: {
+      OK: function () {
+        $(this).dialog("close");
+      }
+    },
+    position: {my: "center", at: "center", of: "svg"}
+  });
+}

src/scripts/options/lock.ts

@@ -29,8 +29,8 @@ function showTooltip(this: Element, event: Event) {
 // lock option from regeneration on page refresh
 export function lock(id: string) {
   const $input = document.querySelector('[data-stored="' + id + '"]');
-  if ($input && $input instanceof HTMLInputElement === false) {
-    store(id, ($input as HTMLInputElement).value);
+  if ($input && $input instanceof HTMLInputElement) {
+    store(id, $input.value);
   }
 
   const $lock = document.getElementById("lock_" + id);

src/scripts/speaker.ts

@@ -0,0 +1,22 @@
+import {getInputNumber} from "utils/nodeUtils";
+
+export function assignSpeakerBehavior() {
+  Array.from(document.getElementsByClassName("speaker")).forEach($speaker => {
+    const $sibling = $speaker.previousElementSibling;
+    $speaker.addEventListener("click", () => {
+      if ($sibling instanceof HTMLInputElement) {
+        speak($sibling.value);
+      }
+    });
+  });
+}
+
+function speak(str: string) {
+  const speaker = new SpeechSynthesisUtterance(str);
+  const voices = speechSynthesis.getVoices();
+  if (voices.length) {
+    const voiceId = getInputNumber("speakerVoice");
+    speaker.voice = voices[voiceId];
+  }
+  speechSynthesis.speak(speaker);
+}