diff --git a/src/modules/io/cloudTypes.ts b/src/modules/io/cloudTypes.ts new file mode 100644 index 00000000..f5c9a37c --- /dev/null +++ b/src/modules/io/cloudTypes.ts @@ -0,0 +1,6 @@ +export type DropboxFile = { + name: string, + updated: any, // MARKER: Type unclear + size: number, + path: string + }; \ No newline at end of file diff --git a/src/modules/ui/options.ts b/src/modules/ui/options.ts index c88b438e..a002666a 100644 --- a/src/modules/ui/options.ts +++ b/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'>("#optionsHide").on("click", hideOptions); +byId<'button'>("optionsTrigger").on("click", showOptions); +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 output = byId<'input'>(key + "Output")!; // MARKER: ! + const input = byId<'input'>(key + "Input", {throwOnNull: false}) || byId<'input'>(key, {throwOnNull: false}); // 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.era = eraInput.value; + options.year = yearInput.valueAsNumber; + 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 (isNaN(+yearInput.value)) { + if (!yearInput.valueAsNumber) return; + 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) { - const id = event.target.id; +byId("sticked").on("click", function (event: any) { + 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 link = shrableLink.getAttribute("href"); + const shrableLink = byId<'a'>("sharableLink"); + 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"; - byId("loadFromDropboxSelect").style.display = "block"; - const loadFromDropboxButtons = byId("loadFromDropboxButtons"); - const fileSelect = byId("loadFromDropboxSelect"); + const dropboxConnectButton = byId<'button'>("dropboxConnectButton"); + const loadFromDropboxSelect = byId<'select'>("loadFromDropboxSelect"); + const loadFromDropboxButtons = byId<'button'>("loadFromDropboxButtons"); + const fileSelect = byId<'select'>("loadFromDropboxSelect"); + + dropboxConnectButton.style.display = "none"; + loadFromDropboxSelect.style.display = "block"; fileSelect.innerHTML = /* html */ ``; - 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 tilesY = +byId("tileRowsOutput").value; - const scale = +byId("tileScaleOutput").value; + const tilesX = byId<'input'>("tileColsOutput").valueAsNumber; + const tilesY = byId<'input'>("tileRowsOutput").valueAsNumber; + 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); -export function changeViewMode(event) { +byId<'div'>("viewMode").on("click", changeViewMode); +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")); - heightmap3DView.classList.remove("pressed"); - viewStandard.classList.add("pressed"); + byId<'div'>("viewMode").querySelectorAll(".pressed").forEach(button => button.classList.remove("pressed")); + byId("heightmap3DView").classList.remove("pressed"); + byId("viewStandard").classList.add("pressed"); if (!byId("canvas3d")) return; ThreeD.stop(); byId("canvas3d").remove(); - if (options3dUpdate.offsetParent) $("#options3d").dialog("close"); - if (preview3d.offsetParent) $("#preview3d").dialog("close"); + if (byId("options3dUpdate").offsetParent) $("#options3d").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. O to toggle options"; - +canvas.dataset.hovered > 2 ? tip("") : tip(help); - canvas.dataset.hovered = (+canvas.dataset.hovered | 0) + 1; + Number(canvas.dataset.hovered) > 2 ? tip("") : tip(help); + 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); - byId("options3dScaleNumber").on("change", changeHeightScale); - byId("options3dLightnessRange").on("input", changeLightness); - byId("options3dLightnessNumber").on("change", changeLightness); - byId("options3dSunX").on("change", changeSunPosition); - byId("options3dSunY").on("change", changeSunPosition); - byId("options3dSunZ").on("change", changeSunPosition); - byId("options3dMeshRotationRange").on("input", changeRotation); - byId("options3dMeshRotationNumber").on("change", changeRotation); - byId("options3dGlobeRotationRange").on("input", changeRotation); - byId("options3dGlobeRotationNumber").on("change", changeRotation); - byId("options3dMeshLabels3d").on("change", toggleLabels3d); - byId("options3dMeshSkyMode").on("change", toggleSkyMode); - byId("options3dMeshSky").on("input", changeColors); - byId("options3dMeshWater").on("input", changeColors); - byId("options3dGlobeResolution").on("change", changeResolution); + options3dScaleRange.on("input", changeHeightScale); + options3dScaleNumber.on("change", changeHeightScale); + options3dLightnessRange.on("input", changeLightness); + options3dLightnessNumber.on("change", changeLightness); + options3dSunX.on("change", changeSunPosition); + options3dSunY.on("change", changeSunPosition); + options3dSunZ.on("change", changeSunPosition); + options3dMeshRotationRange.on("input", changeRotation); + options3dMeshRotationNumber.on("change", changeRotation); + options3dGlobeRotationRange.on("input", changeRotation); + options3dGlobeRotationNumber.on("change", changeRotation); + options3dMeshLabels3d.on("change", toggleLabels3d); + options3dMeshSkyMode.on("change", toggleSkyMode); + options3dMeshSky.on("input", changeColors); + options3dMeshWater.on("input", changeColors); + 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 y = +options3dSunY.value; - const z = +options3dSunZ.value; + const x = options3dSunX.valueAsNumber; + const y = options3dSunY.valueAsNumber; + const z = options3dSunZ.valueAsNumber; ThreeD.setSun(x, y, z); } function changeRotation() { - (this.nextElementSibling || this.previousElementSibling).value = this.value; - const speed = +this.value; - ThreeD.setRotation(speed); + console.log(this, "\n", this.value); + // (this.nextElementSibling || this.previousElementSibling).value = this.value; + // const speed = +this.value; + // ThreeD.setRotation(speed); } function toggleLabels3d() { diff --git a/src/scripts/generation/generation.ts b/src/scripts/generation/generation.ts index fa9978e6..fb5472cd 100644 --- a/src/scripts/generation/generation.ts +++ b/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; } diff --git a/src/types/overrides.d.ts b/src/types/overrides.d.ts index 713029bc..0c049c2c 100644 --- a/src/types/overrides.d.ts +++ b/src/types/overrides.d.ts @@ -29,6 +29,7 @@ interface Window { Markers: any; COA: any; Routes: any; + Cloud: any; } interface Node { diff --git a/src/utils/nodeUtils.ts b/src/utils/nodeUtils.ts index b3744a5f..3a07fe64 100644 --- a/src/utils/nodeUtils.ts +++ b/src/utils/nodeUtils.ts @@ -6,6 +6,7 @@ export type ElementMap = { input: HTMLInputElement; output: HTMLOutputElement; select: HTMLSelectElement; + canvas: HTMLCanvasElement; // add more types as needed };