refactor: start files migration nightmare

modules/ui/military-overview.js

@@ -10,8 +10,8 @@ function overviewMilitary() {
   addLines();
   $("#militaryOverview").dialog();
 
-  if (modules.overviewMilitary) return;
-  modules.overviewMilitary = true;
+  if (fmg.modules.overviewMilitary) return;
+  fmg.modules.overviewMilitary = true;
   updateHeaders();
 
   $("#militaryOverview").dialog({
@@ -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");
@@ -254,8 +274,8 @@ function overviewMilitary() {
       }
     });
 
-    if (modules.overviewMilitaryCustomize) return;
-    modules.overviewMilitaryCustomize = true;
+    if (fmg.modules.overviewMilitaryCustomize) return;
+    fmg.modules.overviewMilitaryCustomize = true;
 
     tableBody.addEventListener("click", event => {
       const el = event.target;
@@ -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>`
       );
@@ -395,14 +421,15 @@ function overviewMilitary() {
       $("#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 {type, value} = el.dataset || {};
-          if (type === "icon") return el.innerHTML || "⠀";
-          if (type) return value ? value.split(",").map(v => parseInt(v)) : null;
-          if (el.type === "number") return +el.value || 0;
-          if (el.type === "checkbox") return +el.checked || 0;
-          return el.value;
-        });
+        const [icon, name, biomes, states, cultures, religions, rural, urban, crew, power, type, separate] =
+          elements.map(el => {
+            const {type, value} = el.dataset || {};
+            if (type === "icon") return el.innerHTML || "⠀";
+            if (type) return value ? value.split(",").map(v => parseInt(v)) : null;
+            if (el.type === "number") return +el.value || 0;
+            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 +446,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",