From 030caec6e81e2154744a6ea44ea1ff98d6f1d8f7 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sat, 25 Jun 2022 17:59:03 +0300 Subject: [PATCH] refactor(es modules): continue migration --- index.html | 4 +--- modules/io/load.js | 1 + modules/markers-generator.js | 1 + modules/names-generator.js | 2 ++ modules/river-generator.js | 1 + modules/routes-generator.js | 1 + modules/ui/battle-screen.js | 5 ++-- modules/ui/heightmap-editor.js | 1 + modules/ui/layers.js | 1 + modules/ui/options.js | 3 +++ modules/ui/regiment-editor.js | 1 + modules/ui/regiments-overview.js | 1 + modules/ui/rivers-creator.js | 1 + modules/ui/submap.js | 3 +-- modules/ui/tools.js | 1 + src/main.ts | 21 +++++++++-------- src/modules/measurers.js | 1 + src/types/global.d.ts | 7 ++++++ src/utils/arrayUtils.ts | 2 +- src/utils/graphUtils.ts | 23 ++++++++++--------- .../shorthands.js => src/utils/shorthands.ts | 2 +- utils/arrayUtils.js | 9 -------- utils/commonUtils.js | 11 ++++++--- 23 files changed, 61 insertions(+), 42 deletions(-) rename utils/shorthands.js => src/utils/shorthands.ts (75%) delete mode 100644 utils/arrayUtils.js diff --git a/index.html b/index.html index 9c174912..eb17ea52 100644 --- a/index.html +++ b/index.html @@ -7767,9 +7767,7 @@ - - @@ -7851,7 +7849,7 @@ - + number[][] diff --git a/modules/io/load.js b/modules/io/load.js index debc27a8..19ce7e0a 100644 --- a/modules/io/load.js +++ b/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 => { diff --git a/modules/markers-generator.js b/modules/markers-generator.js index 04d8e187..01d1eacb 100644 --- a/modules/markers-generator.js +++ b/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 = []; diff --git a/modules/names-generator.js b/modules/names-generator.js index 8d80437b..3646a0c3 100644 --- a/modules/names-generator.js +++ b/modules/names-generator.js @@ -1,3 +1,5 @@ +import {last} from "/src/utils/arrayUtils"; + window.Names = (function () { let chains = []; diff --git a/modules/river-generator.js b/modules/river-generator.js index af1f81a8..13df194d 100644 --- a/modules/river-generator.js +++ b/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) { diff --git a/modules/routes-generator.js b/modules/routes-generator.js index 86b5ce69..d4c61874 100644 --- a/modules/routes-generator.js +++ b/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 () { diff --git a/modules/ui/battle-screen.js b/modules/ui/battle-screen.js index a2ad9cb9..3c7b2d22 100644 --- a/modules/ui/battle-screen.js +++ b/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"); diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js index 4a5e7260..0b622441 100644 --- a/modules/ui/heightmap-editor.js +++ b/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 || {}; diff --git a/modules/ui/layers.js b/modules/ui/layers.js index 1d0d90b9..7547cff7 100644 --- a/modules/ui/layers.js +++ b/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 diff --git a/modules/ui/options.js b/modules/ui/options.js index 2a65efed..224734b8 100644 --- a/modules/ui/options.js +++ b/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"}); diff --git a/modules/ui/regiment-editor.js b/modules/ui/regiment-editor.js index 8c0b089b..7e22f488 100644 --- a/modules/ui/regiment-editor.js +++ b/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; diff --git a/modules/ui/regiments-overview.js b/modules/ui/regiments-overview.js index 1c2d7a7e..a45dee58 100644 --- a/modules/ui/regiments-overview.js +++ b/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; diff --git a/modules/ui/rivers-creator.js b/modules/ui/rivers-creator.js index 630b5c45..3bdcad93 100644 --- a/modules/ui/rivers-creator.js +++ b/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; diff --git a/modules/ui/submap.js b/modules/ui/submap.js index b2a27506..ef88e580 100644 --- a/modules/ui/submap.js +++ b/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 () { diff --git a/modules/ui/tools.js b/modules/ui/tools.js index bd48d307..fc68cbaf 100644 --- a/modules/ui/tools.js +++ b/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) diff --git a/src/main.ts b/src/main.ts index 665b0d97..98d4745d 100644 --- a/src/main.ts +++ b/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(); diff --git a/src/modules/measurers.js b/src/modules/measurers.js index 15456485..e31aba1b 100644 --- a/src/modules/measurers.js +++ b/src/modules/measurers.js @@ -1,4 +1,5 @@ import {findCell} from "/src/utils/graphUtils"; +import {last} from "/src/utils/arrayUtils"; export class Rulers { constructor() { diff --git a/src/types/global.d.ts b/src/types/global.d.ts index 102e7b3e..3c51dde4 100644 --- a/src/types/global.d.ts +++ b/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}; diff --git a/src/utils/arrayUtils.ts b/src/utils/arrayUtils.ts index 74e1623c..17a11f74 100644 --- a/src/utils/arrayUtils.ts +++ b/src/utils/arrayUtils.ts @@ -23,7 +23,7 @@ function getTypedArray(maxValue: number) { interface ICreateTypedArray { maxValue: number; length: number; - from: ArrayLike; + from?: ArrayLike; } export function createTypedArray({maxValue, length, from}: ICreateTypedArray) { diff --git a/src/utils/graphUtils.ts b/src/utils/graphUtils.ts index 2510357a..e282bcf7 100644 --- a/src/utils/graphUtils.ts +++ b/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; } diff --git a/utils/shorthands.js b/src/utils/shorthands.ts similarity index 75% rename from utils/shorthands.js rename to src/utils/shorthands.ts index 043599fc..9a45d053 100644 --- a/utils/shorthands.js +++ b/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); diff --git a/utils/arrayUtils.js b/utils/arrayUtils.js deleted file mode 100644 index cc1e325b..00000000 --- a/utils/arrayUtils.js +++ /dev/null @@ -1,9 +0,0 @@ -"use strict"; - -function last(array) { - return array[array.length - 1]; -} - -function unique(array) { - return [...new Set(array)]; -} diff --git a/utils/commonUtils.js b/utils/commonUtils.js index 49ab7754..b8b35352 100644 --- a/utils/commonUtils.js +++ b/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 => "" + last(url.split("/")) + ""); + const errorNoURL = errorString.replace(regex, url => "" + url.split("/").at(-1) + ""); const errorParsed = errorNoURL.replace(/at /gi, "
  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;