refactor(es modules): continue migration

index.html

@@ -7767,9 +7767,7 @@
     <script src="libs/priority-queue.min.js"></script>
     <script src="libs/delaunator.min.js"></script>
 
-    <script src="utils/shorthands.js"></script>
     <script src="utils/commonUtils.js"></script>
-    <script src="utils/arrayUtils.js"></script>
     <script src="utils/colorUtils.js"></script>
     <script src="utils/nodeUtils.js"></script>
     <script src="utils/numberUtils.js"></script>
@@ -7851,7 +7849,7 @@
     <script type="module" src="modules/coa-renderer.js"></script>
     <script defer src="libs/rgbquant.min.js"></script>
     <script defer src="libs/jquery.ui.touch-punch.min.js"></script>
-
+    number[][]
     <script type="module" src="modules/io/save.js"></script>
     <script type="module" src="modules/io/load.js?v=1.87.00"></script>
     <script type="module" src="modules/io/cloud.js"></script>

modules/io/load.js

@@ -1,4 +1,5 @@
 import {calculateVoronoi, findCell} from "/src/utils/graphUtils";
+import {last} from "/src/utils/arrayUtils";
 
 function quickLoad() {
   ldb.get("lastMap", blob => {

modules/markers-generator.js

@@ -1,5 +1,6 @@
 import {TIME} from "/src/config/logging";
 import {getFriendlyHeight} from "./ui/general";
+import {last} from "/src/utils/arrayUtils";
 
 window.Markers = (function () {
   let config = [];

modules/names-generator.js

@@ -1,3 +1,5 @@
+import {last} from "/src/utils/arrayUtils";
+
 window.Names = (function () {
   let chains = [];
 

modules/river-generator.js

@@ -1,4 +1,5 @@
 import {TIME} from "/src/config/logging";
+import {last} from "/src/utils/arrayUtils";
 
 window.Rivers = (function () {
   const generate = function (allowErosion = true) {

modules/routes-generator.js

@@ -1,5 +1,6 @@
 import {TIME} from "/src/config/logging";
 import {findCell} from "/src/utils/graphUtils";
+import {last} from "/src/utils/arrayUtils";
 
 window.Routes = (function () {
   const getRoads = function () {

modules/ui/battle-screen.js

@@ -1,5 +1,6 @@
-"use strict";
-class Battle {
+import {last} from "/src/utils/arrayUtils";
+
+export class Battle {
   constructor(attacker, defender) {
     if (customization) return;
     closeDialogs(".stable");

modules/ui/heightmap-editor.js

@@ -1,4 +1,5 @@
 import {findGridCell, findGridAll, findCell, getPackPolygon, getGridPolygon} from "/src/utils/graphUtils";
+import {last} from "/src/utils/arrayUtils";
 
 export function editHeightmap(options) {
   const {mode, tool} = options || {};

modules/ui/layers.js

@@ -1,6 +1,7 @@
 import {TIME} from "/src/config/logging";
 import {invokeActiveZooming} from "../activeZooming";
 import {getGridPolygon} from "/src/utils/graphUtils";
+import {last} from "/src/utils/arrayUtils";
 
 let presets = {}; // global object
 restoreCustomPresets(); // run on-load

modules/ui/options.js

@@ -1,4 +1,7 @@
 import {stored, lock, locked, applyOption} from "./general";
+import {last} from "/src/utils/arrayUtils";
+import {byId} from "/src/utils/shorthands";
+import {last} from "/src/utils/arrayUtils";
 
 $("#optionsContainer").draggable({handle: ".drag-trigger", snap: "svg", snapMode: "both"});
 $("#exitCustomization").draggable({handle: "div"});

modules/ui/regiment-editor.js

@@ -1,4 +1,5 @@
 import {findCell} from "/src/utils/graphUtils";
+import {last} from "/src/utils/arrayUtils";
 
 export function editRegiment(selector) {
   if (customization) return;

modules/ui/regiments-overview.js

@@ -1,4 +1,5 @@
 import {findCell} from "/src/utils/graphUtils";
+import {last} from "/src/utils/arrayUtils";
 
 export function overviewRegiments(state) {
   if (customization) return;

modules/ui/rivers-creator.js

@@ -1,4 +1,5 @@
 import {getPackPolygon, findCell} from "/src/utils/graphUtils";
+import {last} from "/src/utils/arrayUtils";
 
 export function createRiver() {
   if (customization) return;

modules/ui/submap.js

@@ -1,5 +1,4 @@
-"use strict";
-// UI elements for submap generation
+import {byId} from "/src/utils/shorthands";
 
 window.UISubmap = (function () {
   byId("submapPointsInput").addEventListener("input", function () {

modules/ui/tools.js

@@ -1,4 +1,5 @@
 import {findCell} from "/src/utils/graphUtils";
+import {last} from "/src/utils/arrayUtils";
 
 // module to control the Tools options (click to edit, to re-geenerate, tp add)
 

src/main.ts

@@ -17,6 +17,7 @@ import {invokeActiveZooming} from "../modules/activeZooming";
 import {applyStoredOptions, applyMapSize, randomizeOptions} from "../modules/ui/options";
 import {locked} from "../modules/ui/general";
 import {Rulers, Ruler, drawScaleBar} from "./modules/measurers";
+import {byId} from "./utils/shorthands";
 
 window.fmg = {
   modules: {}
@@ -223,8 +224,8 @@ function focusOn() {
 
 // find burg for MFCG and focus on it
 function findBurgForMFCG(params) {
-  const cells = pack.cells,
-    burgs = pack.burgs;
+  const {cells, burgs} = pack;
+
   if (pack.burgs.length < 2) {
     ERROR && console.error("Cannot select a burg for MFCG");
     return;
@@ -305,18 +306,18 @@ void (function addDragToUpload() {
   document.addEventListener("dragover", function (e) {
     e.stopPropagation();
     e.preventDefault();
-    document.getElementById("mapOverlay").style.display = null;
+    byId("mapOverlay").style.display = null;
   });
 
   document.addEventListener("dragleave", function (e) {
-    document.getElementById("mapOverlay").style.display = "none";
+    byId("mapOverlay").style.display = "none";
   });
 
   document.addEventListener("drop", function (e) {
     e.stopPropagation();
     e.preventDefault();
 
-    const overlay = document.getElementById("mapOverlay");
+    const overlay = byId("mapOverlay");
     overlay.style.display = "none";
     if (e.dataTransfer.items == null || e.dataTransfer.items.length !== 1) return; // no files or more than one
     const file = e.dataTransfer.items[0].getAsFile();
@@ -523,7 +524,7 @@ function addLakesInDeepDepressions() {
   TIME && console.time("addLakesInDeepDepressions");
   const {cells, features} = grid;
   const {c, h, b} = cells;
-  const ELEVATION_LIMIT = +document.getElementById("lakeElevationLimitOutput").value;
+  const ELEVATION_LIMIT = +byId("lakeElevationLimitOutput").value;
   if (ELEVATION_LIMIT === 80) return;
 
   for (const i of cells.i) {
@@ -677,8 +678,8 @@ function defineMapSize() {
 
 // calculate map position on globe
 function calculateMapCoordinates() {
-  const size = +document.getElementById("mapSizeOutput").value;
-  const latShift = +document.getElementById("latitudeOutput").value;
+  const size = +byId("mapSizeOutput").value;
+  const latShift = +byId("latitudeOutput").value;
 
   const latT = rn((size / 100) * 180, 1);
   const latN = rn(90 - ((180 - latT) * latShift) / 100, 1);
@@ -1506,7 +1507,7 @@ function addZones(number = 1) {
   }
 
   function addEruption() {
-    const volcano = document.getElementById("markers").querySelector("use[data-id='#marker_volcano']");
+    const volcano = byId("markers").querySelector("use[data-id='#marker_volcano']");
     if (!volcano) return;
 
     const x = +volcano.dataset.x,
@@ -1722,7 +1723,7 @@ function undraw() {
     .getElementById("deftemp")
     .querySelectorAll("path, clipPath, svg")
     .forEach(el => el.remove());
-  document.getElementById("coas").innerHTML = ""; // remove auto-generated emblems
+  byId("coas").innerHTML = ""; // remove auto-generated emblems
   notes = [];
   rulers = new Rulers();
   unfog();

src/modules/measurers.js

@@ -1,4 +1,5 @@
 import {findCell} from "/src/utils/graphUtils";
+import {last} from "/src/utils/arrayUtils";
 
 export class Rulers {
   constructor() {

src/types/global.d.ts

@@ -10,6 +10,13 @@ interface Window {
       [key: string]: boolean;
     };
   };
+  pack: IPack;
+  grig: IGrid;
+}
+
+interface Node {
+  on: (name: string, fn: EventListenerOrEventListenerObject, options?: AddEventListenerOptions) => void;
+  off: (name: string, fn: EventListenerOrEventListenerObject) => void;
 }
 
 type UnknownObject = {[key: string]: unknown};

src/utils/arrayUtils.ts

@@ -23,7 +23,7 @@ function getTypedArray(maxValue: number) {
 interface ICreateTypedArray {
   maxValue: number;
   length: number;
-  from: ArrayLike<number>;
+  from?: ArrayLike<number>;
 }
 
 export function createTypedArray({maxValue, length, from}: ICreateTypedArray) {

src/utils/graphUtils.ts

@@ -1,5 +1,6 @@
 import {TIME} from "../config/logging";
 import {createTypedArray} from "./arrayUtils";
+import {byId} from "./shorthands";
 
 // check if new grid graph should be generated or we can use the existing one
 export function shouldRegenerateGrid(grid) {
@@ -36,7 +37,7 @@ function placePoints() {
 }
 
 // calculate Delaunay and then Voronoi diagram
-export function calculateVoronoi(points, boundary) {
+export function calculateVoronoi(points: number[][], boundary: number[][]) {
   TIME && console.time("calculateDelaunay");
   const allPoints = points.concat(boundary);
   const delaunay = Delaunator.from(allPoints);
@@ -54,7 +55,7 @@ export function calculateVoronoi(points, boundary) {
 }
 
 // add points along map edge to pseudo-clip voronoi cells
-function getBoundaryPoints(width, height, spacing) {
+function getBoundaryPoints(width: number, height: number, spacing: number) {
   const offset = rn(-1 * spacing);
   const bSpacing = spacing * 2;
   const w = width - offset * 2;
@@ -77,7 +78,7 @@ function getBoundaryPoints(width, height, spacing) {
 }
 
 // get points on a regular square grid and jitter them a bit
-function getJitteredGrid(width, height, spacing) {
+function getJitteredGrid(width: number, height: number, spacing: number) {
   const radius = spacing / 2; // square radius
   const jittering = radius * 0.9; // max deviation
   const doubleJittering = jittering * 2;
@@ -95,7 +96,7 @@ function getJitteredGrid(width, height, spacing) {
 }
 
 // return cell index on a regular square grid
-export function findGridCell(x, y, grid) {
+export function findGridCell(x: number, y: number, grid) {
   return (
     Math.floor(Math.min(y / grid.spacing, grid.cellsY - 1)) * grid.cellsX +
     Math.floor(Math.min(x / grid.spacing, grid.cellsX - 1))
@@ -103,7 +104,7 @@ export function findGridCell(x, y, grid) {
 }
 
 // return array of cell indexes in radius on a regular square grid
-export function findGridAll(x, y, radius) {
+export function findGridAll(x: number, y: number, radius: number) {
   const c = grid.cells.c;
   let r = Math.floor(radius / grid.spacing);
   let found = [findGridCell(x, y, grid)];
@@ -129,34 +130,34 @@ export function findGridAll(x, y, radius) {
 }
 
 // return array of cell indexes in radius
-export function findAll(x, y, radius) {
+export function findAll(x: number, y: number, radius: number) {
   const found = pack.cells.q.findAll(x, y, radius);
   return found.map(r => r[2]);
 }
 
 // get polygon points for packed cells knowing cell id
-export function getPackPolygon(i) {
+export function getPackPolygon(i: number) {
   return pack.cells.v[i].map(v => pack.vertices.p[v]);
 }
 
 // return closest cell index
-export function findCell(x, y, radius = Infinity) {
+export function findCell(x: number, y: number, radius = Infinity) {
   const found = pack.cells.q.find(x, y, radius);
   return found ? found[2] : undefined;
 }
 
 // get polygon points for initial cells knowing cell id
-export function getGridPolygon(i) {
+export function getGridPolygon(i: number) {
   return grid.cells.v[i].map(v => grid.vertices.p[v]);
 }
 
 // filter land cells
-export function isLand(i) {
+export function isLand(i: number) {
   return pack.cells.h[i] >= 20;
 }
 
 // filter water cells
-export function isWater(i) {
+export function isWater(i: number) {
   return pack.cells.h[i] < 20;
 }
 

src/utils/shorthands.ts

@@ -1,4 +1,4 @@
-const byId = document.getElementById.bind(document);
+export const byId = document.getElementById.bind(document);
 
 Node.prototype.on = function (name, fn, options) {
   this.addEventListener(name, fn, options);

utils/arrayUtils.js

@@ -1,9 +0,0 @@
-"use strict";
-
-function last(array) {
-  return array[array.length - 1];
-}
-
-function unique(array) {
-  return [...new Set(array)];
-}

utils/commonUtils.js

@@ -94,7 +94,7 @@ function parseError(error) {
   const isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
   const errorString = isFirefox ? error.toString() + " " + error.stack : error.stack;
   const regex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;
-  const errorNoURL = errorString.replace(regex, url => "<i>" + last(url.split("/")) + "</i>");
+  const errorNoURL = errorString.replace(regex, url => "<i>" + url.split("/").at(-1) + "</i>");
   const errorParsed = errorNoURL.replace(/at /gi, "<br>&nbsp;&nbsp;at ");
   return errorParsed;
 }
@@ -134,7 +134,11 @@ function isCtrlClick(event) {
 }
 
 function generateDate(from = 100, to = 1000) {
-  return new Date(rand(from, to), rand(12), rand(31)).toLocaleDateString("en", {year: "numeric", month: "long", day: "numeric"});
+  return new Date(rand(from, to), rand(12), rand(31)).toLocaleDateString("en", {
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  });
 }
 
 function getLongitude(x, decimals = 2) {
@@ -158,7 +162,8 @@ void (function () {
   const defaultOptions = {default: 1, step: 0.01, min: 0, max: 100, required: true};
 
   window.prompt = function (promptText = defaultText, options = defaultOptions, callback) {
-    if (options.default === undefined) return ERROR && console.error("Prompt: options object does not have default value defined");
+    if (options.default === undefined)
+      return ERROR && console.error("Prompt: options object does not have default value defined");
 
     const input = prompt.querySelector("#promptInput");
     prompt.querySelector("#promptText").innerHTML = promptText;