diff --git a/index.html b/index.html index 26f23f36..14f822b1 100644 --- a/index.html +++ b/index.html @@ -362,25 +362,14 @@ - + - + + -
@@ -722,6 +711,15 @@ > Scale Bar +
  • + Vignette +
    • @@ -935,15 +933,15 @@
    x - + width  - +
    y - + height - +
    @@ -7971,7 +7969,7 @@ - + @@ -8032,12 +8030,12 @@ - + - + diff --git a/main.js b/main.js index 945fb0bd..6db57f59 100644 --- a/main.js +++ b/main.js @@ -1,7 +1,7 @@ -// Azgaar (azgaar.fmg@yandex.com). Minsk, 2017-2022. MIT License +"use strict"; +// Azgaar (azgaar.fmg@yandex.com). Minsk, 2017-2023. MIT License // https://github.com/Azgaar/Fantasy-Map-Generator -"use strict"; // set debug options const PRODUCTION = location.hostname && location.hostname !== "localhost" && location.hostname !== "127.0.0.1"; const DEBUG = localStorage.getItem("debug"); diff --git a/modules/dynamic/auto-update.js b/modules/dynamic/auto-update.js index 30e07cd8..5dbebb60 100644 --- a/modules/dynamic/auto-update.js +++ b/modules/dynamic/auto-update.js @@ -710,4 +710,30 @@ export function resolveVersionConflicts(version) { drawTexture(); } } + + if (version < 1.95) { + // v1.95.00 added vignette visual layer + const mask = defs.append("mask").attr("id", "vignette-mask"); + mask.append("rect").attr("fill", "white").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%"); + mask + .append("rect") + .attr("id", "vignette-rect") + .attr("fill", "black") + .attr("x", "0.3%") + .attr("y", "0.4%") + .attr("width", "99.4%") + .attr("height", "99.2%") + .attr("rx", "5%") + .attr("ry", "5%") + .attr("filter", "blur(20px)"); + + const vignette = svg + .append("g") + .attr("id", "vignette") + .attr("mask", "url(#vignette-mask)") + .attr("opacity", 0.3) + .attr("fill", "#000000") + .style("display", "none"); + vignette.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%"); + } } diff --git a/modules/io/load.js b/modules/io/load.js index 282cf009..769c7d6a 100644 --- a/modules/io/load.js +++ b/modules/io/load.js @@ -10,7 +10,7 @@ async function quickLoad() { } async function loadFromDropbox() { - const mapPath = document.getElementById("loadFromDropboxSelect")?.value; + const mapPath = byId("loadFromDropboxSelect")?.value; DEBUG && console.log("Loading map from Dropbox:", mapPath); const blob = await Cloud.providers.dropbox.load(mapPath); @@ -19,8 +19,8 @@ async function loadFromDropbox() { async function createSharableDropboxLink() { const mapFile = document.querySelector("#loadFromDropbox select").value; - const sharableLink = document.getElementById("sharableLink"); - const sharableLinkContainer = document.getElementById("sharableLinkContainer"); + const sharableLink = byId("sharableLink"); + const sharableLinkContainer = byId("sharableLinkContainer"); try { const previewLink = await Cloud.providers.dropbox.getLink(mapFile); @@ -110,7 +110,7 @@ function uploadMap(file, callback) { const fileReader = new FileReader(); fileReader.onloadend = async function (fileLoadedEvent) { if (callback) callback(); - document.getElementById("coas").innerHTML = ""; // remove auto-generated emblems + byId("coas").innerHTML = ""; // remove auto-generated emblems const result = fileLoadedEvent.target.result; const [mapData, mapVersion] = await parseLoadedResult(result); @@ -408,15 +408,14 @@ async function parseLoadedData(data) { })(); void (function restoreLayersState() { - // helper functions - const notHidden = selection => selection.node() && selection.style("display") !== "none"; + const isVisible = selection => selection.node() && selection.style("display") !== "none"; + const isVisibleNode = node => node && node.style.display !== "none"; const hasChildren = selection => selection.node()?.hasChildNodes(); const hasChild = (selection, selector) => selection.node()?.querySelector(selector); - const turnOn = el => document.getElementById(el).classList.remove("buttonoff"); + const turnOn = el => byId(el).classList.remove("buttonoff"); // turn all layers off - document - .getElementById("mapLayers") + byId("mapLayers") .querySelectorAll("li") .forEach(el => el.classList.add("buttonoff")); @@ -427,27 +426,28 @@ async function parseLoadedData(data) { if (hasChildren(cells)) turnOn("toggleCells"); if (hasChildren(gridOverlay)) turnOn("toggleGrid"); if (hasChildren(coordinates)) turnOn("toggleCoordinates"); - if (notHidden(compass) && hasChild(compass, "use")) turnOn("toggleCompass"); + if (isVisible(compass) && hasChild(compass, "use")) turnOn("toggleCompass"); if (hasChildren(rivers)) turnOn("toggleRivers"); - if (notHidden(terrain) && hasChildren(terrain)) turnOn("toggleRelief"); + if (isVisible(terrain) && hasChildren(terrain)) turnOn("toggleRelief"); if (hasChildren(relig)) turnOn("toggleReligions"); if (hasChildren(cults)) turnOn("toggleCultures"); if (hasChildren(statesBody)) turnOn("toggleStates"); if (hasChildren(provs)) turnOn("toggleProvinces"); - if (hasChildren(zones) && notHidden(zones)) turnOn("toggleZones"); - if (notHidden(borders) && hasChild(borders, "path")) turnOn("toggleBorders"); - if (notHidden(routes) && hasChild(routes, "path")) turnOn("toggleRoutes"); + if (hasChildren(zones) && isVisible(zones)) turnOn("toggleZones"); + if (isVisible(borders) && hasChild(borders, "path")) turnOn("toggleBorders"); + if (isVisible(routes) && hasChild(routes, "path")) turnOn("toggleRoutes"); if (hasChildren(temperature)) turnOn("toggleTemp"); if (hasChild(population, "line")) turnOn("togglePopulation"); if (hasChildren(ice)) turnOn("toggleIce"); if (hasChild(prec, "circle")) turnOn("togglePrec"); - if (notHidden(emblems) && hasChild(emblems, "use")) turnOn("toggleEmblems"); - if (notHidden(labels)) turnOn("toggleLabels"); - if (notHidden(icons)) turnOn("toggleIcons"); - if (hasChildren(armies) && notHidden(armies)) turnOn("toggleMilitary"); + if (isVisible(emblems) && hasChild(emblems, "use")) turnOn("toggleEmblems"); + if (isVisible(labels)) turnOn("toggleLabels"); + if (isVisible(icons)) turnOn("toggleIcons"); + if (hasChildren(armies) && isVisible(armies)) turnOn("toggleMilitary"); if (hasChildren(markers)) turnOn("toggleMarkers"); - if (notHidden(ruler)) turnOn("toggleRulers"); - if (notHidden(scaleBar)) turnOn("toggleScaleBar"); + if (isVisible(ruler)) turnOn("toggleRulers"); + if (isVisible(scaleBar)) turnOn("toggleScaleBar"); + if (isVisibleNode(byId("vignette"))) turnOn("toggleVignette"); getCurrentPreset(); })(); @@ -462,7 +462,7 @@ async function parseLoadedData(data) { { // dynamically import and run auto-update script const versionNumber = parseFloat(params[0]); - const {resolveVersionConflicts} = await import("../dynamic/auto-update.js?v=1.94.00"); + const {resolveVersionConflicts} = await import("../dynamic/auto-update.js?v=1.95.00"); resolveVersionConflicts(versionNumber); } diff --git a/modules/ui/hotkeys.js b/modules/ui/hotkeys.js index 4543d187..a0d866c9 100644 --- a/modules/ui/hotkeys.js +++ b/modules/ui/hotkeys.js @@ -91,6 +91,7 @@ function handleKeyup(event) { else if (code === "KeyK") toggleMarkers(); else if (code === "Equal" && !customization) toggleRulers(); else if (code === "Slash") toggleScaleBar(); + else if (code === "BracketLeft") toggleVignette(); else if (code === "ArrowLeft") zoom.translateBy(svg, 10, 0); else if (code === "ArrowRight") zoom.translateBy(svg, -10, 0); else if (code === "ArrowUp") zoom.translateBy(svg, 0, 10); diff --git a/modules/ui/layers.js b/modules/ui/layers.js index c2188ab0..945f3df9 100644 --- a/modules/ui/layers.js +++ b/modules/ui/layers.js @@ -14,7 +14,8 @@ function getDefaultPresets() { "toggleRivers", "toggleRoutes", "toggleScaleBar", - "toggleStates" + "toggleStates", + "toggleVignette" ], cultural: [ "toggleBorders", @@ -23,7 +24,8 @@ function getDefaultPresets() { "toggleLabels", "toggleRivers", "toggleRoutes", - "toggleScaleBar" + "toggleScaleBar", + "toggleVignette" ], religions: [ "toggleBorders", @@ -32,12 +34,13 @@ function getDefaultPresets() { "toggleReligions", "toggleRivers", "toggleRoutes", - "toggleScaleBar" + "toggleScaleBar", + "toggleVignette" ], - provinces: ["toggleBorders", "toggleIcons", "toggleProvinces", "toggleRivers", "toggleScaleBar"], - biomes: ["toggleBiomes", "toggleIce", "toggleRivers", "toggleScaleBar"], - heightmap: ["toggleHeight", "toggleRivers"], - physical: ["toggleCoordinates", "toggleHeight", "toggleIce", "toggleRivers", "toggleScaleBar"], + provinces: ["toggleBorders", "toggleIcons", "toggleProvinces", "toggleRivers", "toggleScaleBar", "toggleVignette"], + biomes: ["toggleBiomes", "toggleIce", "toggleRivers", "toggleScaleBar", "toggleVignette"], + heightmap: ["toggleHeight", "toggleRivers", "toggleVignette"], + physical: ["toggleCoordinates", "toggleHeight", "toggleIce", "toggleRivers", "toggleScaleBar", "toggleVignette"], poi: [ "toggleBorders", "toggleHeight", @@ -46,7 +49,8 @@ function getDefaultPresets() { "toggleMarkers", "toggleRivers", "toggleRoutes", - "toggleScaleBar" + "toggleScaleBar", + "toggleVignette" ], military: [ "toggleBorders", @@ -56,7 +60,8 @@ function getDefaultPresets() { "toggleRivers", "toggleRoutes", "toggleScaleBar", - "toggleStates" + "toggleStates", + "toggleVignette" ], emblems: [ "toggleBorders", @@ -66,7 +71,8 @@ function getDefaultPresets() { "toggleRivers", "toggleRoutes", "toggleScaleBar", - "toggleStates" + "toggleStates", + "toggleVignette" ], landmass: ["toggleScaleBar"] }; @@ -1862,6 +1868,18 @@ function drawEmblems() { TIME && console.timeEnd("drawEmblems"); } +function toggleVignette(event) { + if (!layerIsOn("toggleVignette")) { + turnButtonOn("toggleVignette"); + $("#vignette").fadeIn(); + if (event && isCtrlClick(event)) editStyle("vignette"); + } else { + if (event && isCtrlClick(event)) return editStyle("vignette"); + $("#vignette").fadeOut(); + turnButtonOff("toggleVignette"); + } +} + function layerIsOn(el) { const buttonoff = document.getElementById(el).classList.contains("buttonoff"); return !buttonoff; diff --git a/styles/default.json b/styles/default.json index 8731b44c..e2cf0e6d 100644 --- a/styles/default.json +++ b/styles/default.json @@ -386,17 +386,17 @@ "filter": null }, "#vignette": { - "opacity": 0.5, + "opacity": 0.3, "fill": "#000000", "filter": null }, "#vignette-rect": { - "x": "1%", - "y": "2%", - "width": "98%", - "height": "96%", - "rx": "10%", - "ry": "10%", + "x": "0.3%", + "y": "0.4%", + "width": "99.6%", + "height": "99.2%", + "rx": "5%", + "ry": "5%", "filter": "blur(20px)" } } diff --git a/versioning.js b/versioning.js index 69e65f3c..10b41d78 100644 --- a/versioning.js +++ b/versioning.js @@ -1,7 +1,7 @@ "use strict"; // version and caching control -const version = "1.94.06"; // generator version, update each time +const version = "1.95.00"; // generator version, update each time { document.title += " v" + version; @@ -28,6 +28,7 @@ const version = "1.94.06"; // generator version, update each time
      Latest changes: +
    • Vignette visual layer and vignette color options
    • Ability to define custom heightmap color scheme
    • New style preset Night and new heightmap color schemes
    • Random encounter markers (integration with Deorum)
      • @@ -39,8 +40,6 @@ const version = "1.94.06"; // generator version, update each time
    • New 3D scene options and improvements
    • Autosave feature (in Options)
    • Google translation support (in Options)
      • -
    • Religions can be edited and redrawn like cultures
      • -
    • Lock states, provinces, cultures, and religions from regeneration

    Join our Discord server and Reddit community to ask questions, share maps, discuss the Generator and Worlbuilding, report bugs and propose new features.