update options file 80%

src/modules/io/cloudTypes.ts

@@ -0,0 +1,6 @@
+export type DropboxFile = {
+    name: string,
+    updated: any, // MARKER: Type unclear
+    size: number,
+    path: string
+  };

src/modules/ui/options.ts

@@ -9,7 +9,7 @@ import {applyDropdownOption, byId } from "utils/nodeUtils";
 import {minmax, rn} from "utils/numberUtils";
 import {gauss, P, rand, rw} from "utils/probabilityUtils";
 import {stored} from "utils/shorthands";
-import {regenerateMap} from "scripts/generation/generation";
+import {IGenerationOptions, regenerateMap} from "scripts/generation/generation";
 // @ts-expect-error js file
 import {fitScaleBar} from "modules/measurers.js";
 import {openDialog} from "dialogs";
@@ -21,24 +21,27 @@ import {fitLegendBox} from "modules/legend.js";
 // @ts-expect-error js file
 import {COArenderer} from "modules/coa-renderer.js";
 import { isBurg, isCulture, isProvince, isState } from "utils/typeUtils.js";
+import { DropboxFile } from "modules/io/cloudTypes.js";
 
 $("#optionsContainer").draggable({handle: ".drag-trigger", snap: "svg", snapMode: "both"});
 $("#exitCustomization").draggable({handle: "div"});
 $("#mapLayers").disableSelection();
 
 // add listeners to options pane
-byId<'button'>("#optionsTrigger").on("click", showOptions);
+byId<'button'>("optionsTrigger").on("click", showOptions);
-byId<'button'>("#optionsHide").on("click", hideOptions);
+byId<'button'>("optionsHide").on("click", hideOptions);
 
 // Window Objects
 const Zoom = window.Zoom;
 const COA = window.COA;
+const Cloud = window.Cloud;
+const ThreeD = window.ThreeD;
 
 // DIV elements
 const tooltip = byId<'div'>("tooltip");
 
 // Options pane elements
-const optionsTrigger = byId<'button'>("optionsTriggerr");
+const optionsTrigger = byId<'button'>("optionsTrigger");
 const regenerate = byId<'button'>("regenerate");
 const optionsDiv = byId<'div'>("optionsContainer");
 const collapsible = byId<'div'>("collapsible");
@@ -100,6 +103,9 @@ const temperaturePoleOutput = byId<'input'>("temperaturePoleOutput");
 const distanceScaleInput = byId<'input'>("distanceScaleInput");
 const distanceScaleOutput = byId<'input'>("distanceScaleOutput");
 
+const yearInput = byId<'input'>("yearInput");
+const eraInput = byId<'input'>("eraInput");
+
 // Text inputs
 const mapName = byId<"input">("mapName");
 const templateInput = byId<'select'>("templateInput")
@@ -112,7 +118,7 @@ const shapeRendering = byId<'select'>("shapeRendering");
 const stateLabelsModeInput = byId<'select'>("stateLabelsModeInput");
 
 const distanceUnitInput = byId<'select'>("distanceUnitInput");
-const heightUnitInput = byId<'select'>("heightUnitInput");
+// const heightUnitInput = byId<'select'>("heightUnitInput");
 const heightUnit = byId<'select'>("heightUnit");
 const temperatureScale = byId<'select'>("temperatureScale");
 
@@ -121,6 +127,27 @@ const manorsOutput = byId<'output'>("manorsOutput");
 const pointsOutputFormatted = byId<'output'>("pointsOutputFormatted");
 const religionsOutput = byId<'output'>("religionsOutput");
 
+// 3D options
+const options3dMesh = byId<'div'>("options3dMesh");
+const options3dGlobe = byId<'div'>("options3dGlobe");
+const options3dOBJSave = byId<'button'>("options3dOBJSave");
+const options3dScaleRange = byId<'input'>("options3dScaleRange");
+const options3dScaleNumber = byId<'input'>("options3dScaleNumber");
+const options3dLightnessRange = byId<'input'>("options3dLightnessRange");
+const options3dLightnessNumber = byId<'input'>("options3dLightnessNumber");
+const options3dSunX = byId<'input'>("options3dSunX");
+const options3dSunY = byId<'input'>("options3dSunY");
+const options3dSunZ = byId<'input'>("options3dSunZ");
+const options3dMeshRotationRange = byId<'input'>("options3dMeshRotationRange");
+const options3dMeshRotationNumber = byId<'input'>("options3dMeshRotationNumber");
+const options3dGlobeRotationRange = byId<'input'>("options3dGlobeRotationRange");
+const options3dGlobeRotationNumber = byId<'input'>("options3dGlobeRotationNumber");
+const options3dMeshLabels3d = byId<'input'>("options3dMeshLabels3d");
+const options3dMeshSkyMode = byId<'input'>("options3dMeshSkyMode");
+const options3dColorSection = byId<'div'>("options3dColorSection");
+const options3dMeshSky = byId<'input'>("options3dMeshSky");
+const options3dMeshWater = byId<'input'>("options3dMeshWater");
+const options3dGlobeResolution = byId<'select'>("options3dGlobeResolution");
 
 // remove glow if tip is aknowledged
 if (stored("disable_click_arrow_tooltip")) {
@@ -620,14 +647,14 @@ export function applyStoredOptions() {
   }
   
   if (stored("distanceUnit")) applyDropdownOption(distanceUnitInput, stored("distanceUnit")!); // MARKER: !
-  if (stored("heightUnit")) applyDropdownOption(heightUnitInput, stored("heightUnit")!); // MARKER: !
+  if (stored("heightUnit")) applyDropdownOption(heightUnit, stored("heightUnit")!); // MARKER: !
 
   for (let i = 0; i < localStorage.length; i++) {
     const key = localStorage.key(i)!; // MARKER: !
 
     if (key === "speakerVoice") continue;
-    const input = byId<'input'>(key + "Input", {throwOnNull: false}) || byId<'input'>(key)!; // MARKER: !
+    const input = byId<'input'>(key + "Input", {throwOnNull: false}) || byId<'input'>(key, {throwOnNull: false}); // MARKER: !
-    const output = byId<'input'>(key + "Output")!; // MARKER: !
+    const output = byId<'input'>(key + "Output", {throwOnNull: false}); // MARKER: !
 
     const value = stored(key);
     if (input) input.value = value!; // MARKER: !
@@ -740,10 +767,10 @@ function setRendering(value: string) {
 
 // generate current year and era name
 function generateEra() {
-  if (!stored("year")) yearInput.value = rand(100, 2000); // current year
+  if (!stored("year")) yearInput.valueAsNumber = rand(100, 2000); // current year
   if (!stored("era")) eraInput.value = Names.getBaseShort(P(0.7) ? 1 : rand(nameBases.length)) + " Era";
-  options.year = +yearInput.value;
+  options.year = yearInput.valueAsNumber;
-  options.era = eraInput.value;
+  options.era = eraInput.valueAsNumber;
   options.eraShort = options.era
     .split(" ")
     .map(w => w[0].toUpperCase())
@@ -760,18 +787,18 @@ function regenerateEra() {
 }
 
 function changeYear() {
-  if (!yearInput.value) return;
+  if (!yearInput.valueAsNumber) return;
-  if (isNaN(+yearInput.value)) {
+  if (isNaN(yearInput.valueAsNumber)) {
     tip("Current year should be a number", false, "error");
     return;
   }
-  options.year = +yearInput.value;
+  options.year = yearInput.valueAsNumber;
 }
 
 function changeEra() {
-  if (!eraInput.value) return;
+  if (!eraInput.valueAsNumber) return;
   lock("era");
-  options.era = eraInput.value;
+  options.era = eraInput.valueAsNumber;
 }
 
 // remove all saved data from LocalStorage and reload the page
@@ -781,8 +808,8 @@ function restoreDefaultOptions() {
 }
 
 // Sticked menu Options listeners
-byId("sticked").on("click", function (event) {
+byId("sticked").on("click", function (event: any) {
-  const id = event.target.id;
+  const id = event.target.id; // MARKER: any
   if (id === "newMapButton") regeneratePrompt();
   else if (id === "saveButton") showSavePane();
   else if (id === "exportButton") showExportPane();
@@ -790,9 +817,9 @@ byId("sticked").on("click", function (event) {
   else if (id === "zoomReset") Zoom.reset(1000);
 });
 
-byId("regenerate").on("click", regeneratePrompt);
+byId("regenerate").on("click", () => regeneratePrompt);
 
-export function regeneratePrompt(options) {
+export function regeneratePrompt(options? : IGenerationOptions) {
   if (customization)
     return tip("New map cannot be generated when edit mode is active, please exit the mode and retry", false, "error");
   const workingTime = (Date.now() - last(mapHistory).created) / 60000; // minutes
@@ -837,13 +864,13 @@ byId("saveToDropbox").on("click", saveToDropbox);
 byId("quickSave").on("click", quickSave);
 
 function copyLinkToClickboard() {
-  const shrableLink = byId("sharableLink");
+  const shrableLink = byId<'a'>("sharableLink");
-  const link = shrableLink.getAttribute("href");
+  const link = shrableLink.href;
   navigator.clipboard.writeText(link).then(() => tip("Link is copied to the clipboard", true, "success", 8000));
 }
 
 function showExportPane() {
-  byId("showLabels").checked = !hideLabels.checked;
+  byId<'input'>("showLabels").checked = !byId<'input'>("hideLabels").checked;
 
   $("#exportMapData").dialog({
     title: "Export map data",
@@ -893,13 +920,16 @@ async function showLoadPane() {
 
   // already connected to Dropbox: list saved maps
   if (Cloud.providers.dropbox.api) {
-    byId("dropboxConnectButton").style.display = "none";
+    const dropboxConnectButton = byId<'button'>("dropboxConnectButton");
-    byId("loadFromDropboxSelect").style.display = "block";
+    const loadFromDropboxSelect = byId<'select'>("loadFromDropboxSelect");
-    const loadFromDropboxButtons = byId("loadFromDropboxButtons");
+    const loadFromDropboxButtons = byId<'button'>("loadFromDropboxButtons");
-    const fileSelect = byId("loadFromDropboxSelect");
+    const fileSelect = byId<'select'>("loadFromDropboxSelect");
+
+    dropboxConnectButton.style.display = "none";
+    loadFromDropboxSelect.style.display = "block";
     fileSelect.innerHTML = /* html */ `<option value="" disabled selected>Loading...</option>`;
 
-    const files = await Cloud.providers.dropbox.list();
+    const files: DropboxFile[] = await Cloud.providers.dropbox.list();
 
     if (!files) {
       loadFromDropboxButtons.style.display = "none";
@@ -952,7 +982,7 @@ function loadURL() {
     width: "27em",
     buttons: {
       Load: function () {
-        const value = mapURL.value;
+        const value = byId<'input'>("mapURL").value;
         if (!pattern.test(value)) {
           tip("Please provide a valid URL", false, "error");
           return;
@@ -968,7 +998,7 @@ function loadURL() {
 }
 
 // load map
-byId("mapToLoad").on("change", function () {
+byId<'input'>("mapToLoad").on("change", function () {
   const fileToLoad = this.files[0];
   this.value = "";
   closeDialogs();
@@ -980,7 +1010,7 @@ function openSaveTiles() {
   updateTilesOptions();
   const status = byId("tileStatus");
   status.innerHTML = "";
-  let loading = null;
+  let loading: NodeJS.Timer;
 
   const inputs = byId("saveTilesScreen").querySelectorAll("input");
   inputs.forEach(input => input.on("input", updateTilesOptions));
@@ -1020,9 +1050,9 @@ function updateTilesOptions() {
   }
 
   const tileSize = byId("tileSize");
-  const tilesX = +byId("tileColsOutput").value;
+  const tilesX = byId<'input'>("tileColsOutput").valueAsNumber;
-  const tilesY = +byId("tileRowsOutput").value;
+  const tilesY = byId<'input'>("tileRowsOutput").valueAsNumber;
-  const scale = +byId("tileScaleOutput").value;
+  const scale = byId<'input'>("tileScaleOutput").valueAsNumber;
 
   // calculate size
   const sizeX = graphWidth * scale * tilesX;
@@ -1052,30 +1082,30 @@ function updateTilesOptions() {
 }
 
 // View mode
-viewMode.on("click", changeViewMode);
+byId<'div'>("viewMode").on("click", changeViewMode);
-export function changeViewMode(event) {
+export function changeViewMode(event: any) { // MARKER: any
   const button = event.target;
   if (button.tagName !== "BUTTON") return;
   const pressed = button.classList.contains("pressed");
   enterStandardView();
 
   if (!pressed && button.id !== "viewStandard") {
-    viewStandard.classList.remove("pressed");
+    byId("viewStandard").classList.remove("pressed");
     button.classList.add("pressed");
     enter3dView(button.id);
   }
 }
 
 function enterStandardView() {
-  viewMode.querySelectorAll(".pressed").forEach(button => button.classList.remove("pressed"));
+  byId<'div'>("viewMode").querySelectorAll(".pressed").forEach(button => button.classList.remove("pressed"));
-  heightmap3DView.classList.remove("pressed");
+  byId("heightmap3DView").classList.remove("pressed");
-  viewStandard.classList.add("pressed");
+  byId("viewStandard").classList.add("pressed");
 
   if (!byId("canvas3d")) return;
   ThreeD.stop();
   byId("canvas3d").remove();
-  if (options3dUpdate.offsetParent) $("#options3d").dialog("close");
+  if (byId("options3dUpdate").offsetParent) $("#options3d").dialog("close");
-  if (preview3d.offsetParent) $("#preview3d").dialog("close");
+  if (byId("preview3d").offsetParent) $("#preview3d").dialog("close");
 }
 
 async function enter3dView(type) {
@@ -1084,7 +1114,7 @@ async function enter3dView(type) {
   canvas.dataset.type = type;
 
   if (type === "heightmap3DView") {
-    canvas.width = parseFloat(preview3d.style.width) || graphWidth / 3;
+    canvas.width = parseFloat(byId("preview3d").style.width) || graphWidth / 3;
     canvas.height = canvas.width / (graphWidth / graphHeight);
     canvas.style.display = "block";
   } else {
@@ -1101,8 +1131,8 @@ async function enter3dView(type) {
   canvas.onmouseenter = () => {
     const help =
       "Left mouse to change angle, middle mouse / mousewheel to zoom, right mouse to pan. <b>O</b> to toggle options";
-    +canvas.dataset.hovered > 2 ? tip("") : tip(help);
+    Number(canvas.dataset.hovered) > 2 ? tip("") : tip(help);
-    canvas.dataset.hovered = (+canvas.dataset.hovered | 0) + 1;
+    canvas.dataset.hovered = String((+canvas.dataset.hovered! | 0) + 1);
   };
 
   if (type === "heightmap3DView") {
@@ -1114,13 +1144,14 @@ async function enter3dView(type) {
       resizeStop: resize3d,
       close: enterStandardView
     });
-  } else document.body.insertBefore(canvas, optionsContainer);
+  } else document.body.insertBefore(canvas, optionsDiv);
 
   toggle3dOptions();
 }
 
 function resize3d() {
-  const canvas = byId("canvas3d");
+  const canvas = byId<'canvas'>("canvas3d");
+  const preview3d = byId<'div'>("preview3d");
   canvas.width = parseFloat(preview3d.style.width);
   canvas.height = parseFloat(preview3d.style.height) - 2;
   ThreeD.redraw();
@@ -1129,6 +1160,7 @@ function resize3d() {
 let isLoaded = false;
 
 export function toggle3dOptions() {
+  const options3dUpdate = byId("options3dUpdate");
   if (options3dUpdate.offsetParent) {
     $("#options3d").dialog("close");
     return;
@@ -1145,27 +1177,27 @@ export function toggle3dOptions() {
   if (isLoaded) return;
   isLoaded = true;
 
-  byId("options3dUpdate").on("click", ThreeD.update);
+  options3dUpdate.on("click", ThreeD.update);
   byId("options3dConfigureWorld").on("click", () => openDialog("worldConfigurator"));
   byId("options3dSave").on("click", ThreeD.saveScreenshot);
-  byId("options3dOBJSave").on("click", ThreeD.saveOBJ);
+  options3dOBJSave.on("click", ThreeD.saveOBJ);
 
-  byId("options3dScaleRange").on("input", changeHeightScale);
+  options3dScaleRange.on("input", changeHeightScale);
-  byId("options3dScaleNumber").on("change", changeHeightScale);
+  options3dScaleNumber.on("change", changeHeightScale);
-  byId("options3dLightnessRange").on("input", changeLightness);
+  options3dLightnessRange.on("input", changeLightness);
-  byId("options3dLightnessNumber").on("change", changeLightness);
+  options3dLightnessNumber.on("change", changeLightness);
-  byId("options3dSunX").on("change", changeSunPosition);
+  options3dSunX.on("change", changeSunPosition);
-  byId("options3dSunY").on("change", changeSunPosition);
+  options3dSunY.on("change", changeSunPosition);
-  byId("options3dSunZ").on("change", changeSunPosition);
+  options3dSunZ.on("change", changeSunPosition);
-  byId("options3dMeshRotationRange").on("input", changeRotation);
+  options3dMeshRotationRange.on("input", changeRotation);
-  byId("options3dMeshRotationNumber").on("change", changeRotation);
+  options3dMeshRotationNumber.on("change", changeRotation);
-  byId("options3dGlobeRotationRange").on("input", changeRotation);
+  options3dGlobeRotationRange.on("input", changeRotation);
-  byId("options3dGlobeRotationNumber").on("change", changeRotation);
+  options3dGlobeRotationNumber.on("change", changeRotation);
-  byId("options3dMeshLabels3d").on("change", toggleLabels3d);
+  options3dMeshLabels3d.on("change", toggleLabels3d);
-  byId("options3dMeshSkyMode").on("change", toggleSkyMode);
+  options3dMeshSkyMode.on("change", toggleSkyMode);
-  byId("options3dMeshSky").on("input", changeColors);
+  options3dMeshSky.on("input", changeColors);
-  byId("options3dMeshWater").on("input", changeColors);
+  options3dMeshWater.on("input", changeColors);
-  byId("options3dGlobeResolution").on("change", changeResolution);
+  options3dGlobeResolution.on("change", changeResolution);
 
   function updateValues() {
     const globe = byId("canvas3d").dataset.type === "viewGlobe";
@@ -1173,7 +1205,7 @@ export function toggle3dOptions() {
     options3dGlobe.style.display = globe ? "block" : "none";
     options3dOBJSave.style.display = globe ? "none" : "inline-block";
     options3dScaleRange.value = options3dScaleNumber.value = ThreeD.options.scale;
-    options3dLightnessRange.value = options3dLightnessNumber.value = ThreeD.options.lightness * 100;
+    options3dLightnessRange.valueAsNumber = options3dLightnessNumber.valueAsNumber = ThreeD.options.lightness * 100;
     options3dSunX.value = ThreeD.options.sun.x;
     options3dSunY.value = ThreeD.options.sun.y;
     options3dSunZ.value = ThreeD.options.sun.z;
@@ -1198,16 +1230,17 @@ export function toggle3dOptions() {
   }
 
   function changeSunPosition() {
-    const x = +options3dSunX.value;
+    const x = options3dSunX.valueAsNumber;
-    const y = +options3dSunY.value;
+    const y = options3dSunY.valueAsNumber;
-    const z = +options3dSunZ.value;
+    const z = options3dSunZ.valueAsNumber;
     ThreeD.setSun(x, y, z);
   }
 
   function changeRotation() {
-    (this.nextElementSibling || this.previousElementSibling).value = this.value;
+    console.log(this, "\n", this.value);
-    const speed = +this.value;
+    // (this.nextElementSibling || this.previousElementSibling).value = this.value;
-    ThreeD.setRotation(speed);
+    // const speed = +this.value;
+    // ThreeD.setRotation(speed);
   }
 
   function toggleLabels3d() {

src/scripts/generation/generation.ts

@@ -8,7 +8,6 @@ import {initLayers, renderLayer, restoreLayers} from "layers";
 import {drawScaleBar, Rulers} from "modules/measurers";
 // @ts-expect-error js module
 import {unfog} from "modules/ui/editors";
-// @ts-expect-error js module
 import {applyMapSize, randomizeOptions} from "modules/ui/options";
 // @ts-expect-error js module
 import {applyStyleOnLoad} from "modules/ui/stylePresets";
@@ -30,7 +29,7 @@ import { isBurg } from "utils/typeUtils";
 
 const {Zoom, ThreeD} = window;
 
-interface IGenerationOptions {
+export interface IGenerationOptions {
   seed: string;
   graph: IGrid;
 }

src/types/overrides.d.ts

@@ -29,6 +29,7 @@ interface Window {
   Markers: any;
   COA: any;
   Routes: any;
+  Cloud: any;
 }
 
 interface Node {

src/utils/nodeUtils.ts

@@ -6,6 +6,7 @@ export type ElementMap = {
   input: HTMLInputElement;
   output: HTMLOutputElement;
   select: HTMLSelectElement;
+  canvas: HTMLCanvasElement;
   // add more types as needed
 };