diff --git a/DEBUG-GRID-NUMBERS.md b/DEBUG-GRID-NUMBERS.md deleted file mode 100644 index d2c38b1d..00000000 --- a/DEBUG-GRID-NUMBERS.md +++ /dev/null @@ -1,48 +0,0 @@ -## Grid Numbering Debug Checklist - -Looking at your screenshot, I can see the hex grid is displaying but no numbers. Here's what to check: - -### Step 1: Open the Style Panel (RIGHT sidebar) - -I see the Layers panel on the LEFT in your screenshot, but you need the **Style** panel on the RIGHT. - -**Click the "Style" tab** in the top-right area of the screen (next to "Options" and "Tools"). - -### Step 2: In the Style Panel: - -1. From the dropdown that says "Select element", choose **"Grid"** -2. You should see these options appear: - - Type: (select "Hex grid (pointy)") - - Scale - - Shift by axes - - **☑ Show grid numbers** ← CHECK THIS BOX! - - Number size - - Number color - -### Step 3: If you DON'T see "Show grid numbers" checkbox: - -The JavaScript didn't load. Open browser console (F12) and check for errors: -- Press F12 -- Click "Console" tab -- Look for any red error messages -- Take a screenshot and share it - -### Quick JavaScript Test - -Open browser console (F12) and paste this: - -```javascript -// Check if the function exists -console.log("drawGridNumbers function exists:", typeof drawGridNumbers === "function"); - -// Check grid overlay attributes -console.log("Grid data-show-numbers:", gridOverlay.attr("data-show-numbers")); - -// Manually enable grid numbering -gridOverlay.attr("data-show-numbers", "1"); -gridOverlay.attr("data-number-size", "12"); -gridOverlay.attr("data-number-color", "#000000"); -drawGrid(); -``` - -If this makes numbers appear, the code works but the UI isn't connected properly. diff --git a/index.html.bak b/index.html.bak deleted file mode 100644 index 5a18e579..00000000 --- a/index.html.bak +++ /dev/null @@ -1,8184 +0,0 @@ - - - - - - - Azgaar's Fantasy Map Generator - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - -
-
Azgaar's
-
Fantasy Map Generator
-
‎ ‎
-

LOADING...

-
-
- -
-
- - -
- - -
- -
-
- -
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
-
-
- -
- - - - - - - - - - - - - - - - - - - - - Port - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/main.js.bak b/main.js.bak deleted file mode 100644 index 848ff3c5..00000000 --- a/main.js.bak +++ /dev/null @@ -1,1268 +0,0 @@ -"use strict"; -// Azgaar (azgaar.fmg@yandex.com). Minsk, 2017-2023. MIT License -// https://github.com/Azgaar/Fantasy-Map-Generator - -// set debug options -const PRODUCTION = location.hostname && location.hostname !== "localhost" && location.hostname !== "127.0.0.1"; -const DEBUG = JSON.safeParse(localStorage.getItem("debug")) || {}; -const INFO = true; -const TIME = true; -const WARN = true; -const ERROR = true; - -// detect device -const MOBILE = window.innerWidth < 600 || navigator.userAgentData?.mobile; - -// typed arrays max values -const INT8_MAX = 127; -const UINT8_MAX = 255; -const UINT16_MAX = 65535; -const UINT32_MAX = 4294967295; - -if (PRODUCTION && "serviceWorker" in navigator) { - window.addEventListener("load", () => { - navigator.serviceWorker.register("./sw.js").catch(err => { - console.error("ServiceWorker registration failed: ", err); - }); - }); - - window.addEventListener( - "beforeinstallprompt", - async event => { - event.preventDefault(); - const Installation = await import("./modules/dynamic/installation.js?v=1.89.19"); - Installation.init(event); - }, - {once: true} - ); -} - -// append svg layers (in default order) -let svg = d3.select("#map"); -let defs = svg.select("#deftemp"); -let viewbox = svg.select("#viewbox"); -let scaleBar = svg.select("#scaleBar"); -let legend = svg.append("g").attr("id", "legend"); -let ocean = viewbox.append("g").attr("id", "ocean"); -let oceanLayers = ocean.append("g").attr("id", "oceanLayers"); -let oceanPattern = ocean.append("g").attr("id", "oceanPattern"); -let lakes = viewbox.append("g").attr("id", "lakes"); -let landmass = viewbox.append("g").attr("id", "landmass"); -let texture = viewbox.append("g").attr("id", "texture"); -let terrs = viewbox.append("g").attr("id", "terrs"); -let biomes = viewbox.append("g").attr("id", "biomes"); -let cells = viewbox.append("g").attr("id", "cells"); -let gridOverlay = viewbox.append("g").attr("id", "gridOverlay"); -let coordinates = viewbox.append("g").attr("id", "coordinates"); -let compass = viewbox.append("g").attr("id", "compass").style("display", "none"); -let rivers = viewbox.append("g").attr("id", "rivers"); -let terrain = viewbox.append("g").attr("id", "terrain"); -let relig = viewbox.append("g").attr("id", "relig"); -let cults = viewbox.append("g").attr("id", "cults"); -let regions = viewbox.append("g").attr("id", "regions"); -let statesBody = regions.append("g").attr("id", "statesBody"); -let statesHalo = regions.append("g").attr("id", "statesHalo"); -let provs = viewbox.append("g").attr("id", "provs"); -let zones = viewbox.append("g").attr("id", "zones"); -let borders = viewbox.append("g").attr("id", "borders"); -let stateBorders = borders.append("g").attr("id", "stateBorders"); -let provinceBorders = borders.append("g").attr("id", "provinceBorders"); -let routes = viewbox.append("g").attr("id", "routes"); -let roads = routes.append("g").attr("id", "roads"); -let trails = routes.append("g").attr("id", "trails"); -let searoutes = routes.append("g").attr("id", "searoutes"); -let temperature = viewbox.append("g").attr("id", "temperature"); -let coastline = viewbox.append("g").attr("id", "coastline"); -let ice = viewbox.append("g").attr("id", "ice"); -let prec = viewbox.append("g").attr("id", "prec").style("display", "none"); -let population = viewbox.append("g").attr("id", "population"); -let emblems = viewbox.append("g").attr("id", "emblems").style("display", "none"); -let labels = viewbox.append("g").attr("id", "labels"); -let icons = viewbox.append("g").attr("id", "icons"); -let burgIcons = icons.append("g").attr("id", "burgIcons"); -let anchors = icons.append("g").attr("id", "anchors"); -let armies = viewbox.append("g").attr("id", "armies"); -let markers = viewbox.append("g").attr("id", "markers"); -let fogging = viewbox - .append("g") - .attr("id", "fogging-cont") - .attr("mask", "url(#fog)") - .append("g") - .attr("id", "fogging") - .style("display", "none"); -let ruler = viewbox.append("g").attr("id", "ruler").style("display", "none"); -let debug = viewbox.append("g").attr("id", "debug"); - -lakes.append("g").attr("id", "freshwater"); -lakes.append("g").attr("id", "salt"); -lakes.append("g").attr("id", "sinkhole"); -lakes.append("g").attr("id", "frozen"); -lakes.append("g").attr("id", "lava"); -lakes.append("g").attr("id", "dry"); - -coastline.append("g").attr("id", "sea_island"); -coastline.append("g").attr("id", "lake_island"); - -terrs.append("g").attr("id", "oceanHeights"); -terrs.append("g").attr("id", "landHeights"); - -let burgLabels = labels.append("g").attr("id", "burgLabels"); -labels.append("g").attr("id", "states"); -labels.append("g").attr("id", "addedLabels"); - -burgIcons.append("g").attr("id", "cities"); -burgLabels.append("g").attr("id", "cities"); -anchors.append("g").attr("id", "cities"); - -burgIcons.append("g").attr("id", "towns"); -burgLabels.append("g").attr("id", "towns"); -anchors.append("g").attr("id", "towns"); - -// population groups -population.append("g").attr("id", "rural"); -population.append("g").attr("id", "urban"); - -// emblem groups -emblems.append("g").attr("id", "burgEmblems"); -emblems.append("g").attr("id", "provinceEmblems"); -emblems.append("g").attr("id", "stateEmblems"); - -// compass -compass.append("use").attr("xlink:href", "#defs-compass-rose"); - -// fogging -fogging.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%"); -fogging - .append("rect") - .attr("x", 0) - .attr("y", 0) - .attr("width", "100%") - .attr("height", "100%") - .attr("fill", "#e8f0f6") - .attr("filter", "url(#splotch)"); - -// assign events separately as not a viewbox child -scaleBar.on("mousemove", () => tip("Click to open Units Editor")).on("click", () => editUnits()); -legend - .on("mousemove", () => tip("Drag to change the position. Click to hide the legend")) - .on("click", () => clearLegend()); - -// main data variables -let grid = {}; // initial graph based on jittered square grid and data -let pack = {}; // packed graph and data -let seed; -let mapId; -let mapHistory = []; -let elSelected; -let modules = {}; -let notes = []; -let rulers = new Rulers(); -let customization = 0; - -let biomesData = Biomes.getDefault(); -let nameBases = Names.getNameBases(); // cultures-related data - -let color = d3.scaleSequential(d3.interpolateSpectral); // default color scheme -const lineGen = d3.line().curve(d3.curveBasis); // d3 line generator with default curve interpolation - -// d3 zoom behavior -let scale = 1; -let viewX = 0; -let viewY = 0; - -const onZoom = debounce(function () { - const {k, x, y} = d3.event.transform; - - const isScaleChanged = Boolean(scale - k); - const isPositionChanged = Boolean(viewX - x || viewY - y); - if (!isScaleChanged && !isPositionChanged) return; - - scale = k; - viewX = x; - viewY = y; - - handleZoom(isScaleChanged, isPositionChanged); -}, 50); -const zoom = d3.zoom().scaleExtent([1, 20]).on("zoom", onZoom); - -// default options, based on Earth data -let options = { - pinNotes: false, - winds: [225, 45, 225, 315, 135, 315], - temperatureEquator: 27, - temperatureNorthPole: -30, - temperatureSouthPole: -15, - stateLabelsMode: "auto", - showBurgPreview: true, - villageMaxPopulation: 2000 -}; - -let mapCoordinates = {}; // map coordinates on globe -let populationRate = +byId("populationRateInput").value; -let distanceScale = +byId("distanceScaleInput").value; -let urbanization = +byId("urbanizationInput").value; -let urbanDensity = +byId("urbanDensityInput").value; - -applyStoredOptions(); - -// voronoi graph extension, cannot be changed after generation -let graphWidth = +mapWidthInput.value; -let graphHeight = +mapHeightInput.value; - -// svg canvas resolution, can be changed -let svgWidth = graphWidth; -let svgHeight = graphHeight; - -landmass.append("rect").attr("x", 0).attr("y", 0).attr("width", graphWidth).attr("height", graphHeight); -oceanPattern - .append("rect") - .attr("fill", "url(#oceanic)") - .attr("x", 0) - .attr("y", 0) - .attr("width", graphWidth) - .attr("height", graphHeight); -oceanLayers - .append("rect") - .attr("id", "oceanBase") - .attr("x", 0) - .attr("y", 0) - .attr("width", graphWidth) - .attr("height", graphHeight); - -document.addEventListener("DOMContentLoaded", async () => { - if (!location.hostname) { - const wiki = "https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Run-FMG-locally"; - alertMessage.innerHTML = /* html */ `Fantasy Map Generator cannot run serverless. Follow the instructions on how you can easily run a local web-server`; - - $("#alert").dialog({ - resizable: false, - title: "Loading error", - width: "28em", - position: {my: "center center-4em", at: "center", of: "svg"}, - buttons: { - OK: function () { - $(this).dialog("close"); - } - } - }); - } else { - hideLoading(); - await checkLoadParameters(); - } - restoreDefaultEvents(); // apply default viewbox events - initiateAutosave(); -}); - -function hideLoading() { - d3.select("#loading").transition().duration(3000).style("opacity", 0); - d3.select("#optionsContainer").transition().duration(2000).style("opacity", 1); - d3.select("#tooltip").transition().duration(3000).style("opacity", 1); -} - -function showLoading() { - d3.select("#loading").transition().duration(200).style("opacity", 1); - d3.select("#optionsContainer").transition().duration(100).style("opacity", 0); - d3.select("#tooltip").transition().duration(200).style("opacity", 0); -} - -// decide which map should be loaded or generated on page load -async function checkLoadParameters() { - const url = new URL(window.location.href); - const params = url.searchParams; - - // of there is a valid maplink, try to load .map/.gz file from URL - if (params.get("maplink")) { - WARN && console.warn("Load map from URL"); - const maplink = params.get("maplink"); - const pattern = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/; - const valid = pattern.test(maplink); - if (valid) { - setTimeout(() => { - loadMapFromURL(maplink, 1); - }, 1000); - return; - } else showUploadErrorMessage("Map link is not a valid URL", maplink); - } - - // if there is a seed (user of MFCG provided), generate map for it - if (params.get("seed")) { - WARN && console.warn("Generate map for seed"); - await generateMapOnLoad(); - return; - } - - // check if there is a map saved to indexedDB - if (byId("onloadBehavior").value === "lastSaved") { - try { - const blob = await ldb.get("lastMap"); - if (blob) { - WARN && console.warn("Loading last stored map"); - uploadMap(blob); - return; - } - } catch (error) { - ERROR && console.error(error); - } - } - - // else generate random map - WARN && console.warn("Generate random map"); - generateMapOnLoad(); -} - -async function generateMapOnLoad() { - await applyStyleOnLoad(); // apply previously selected default or custom style - await generate(); // generate map - applyLayersPreset(); // apply saved layers preset and reder layers - drawLayers(); - fitMapToScreen(); - focusOn(); // based on searchParams focus on point, cell or burg from MFCG - toggleAssistant(); -} - -// focus on coordinates, cell or burg provided in searchParams -function focusOn() { - const url = new URL(window.location.href); - const params = url.searchParams; - - const fromMGCG = params.get("from") === "MFCG" && document.referrer; - if (fromMGCG) { - if (params.get("seed").length === 13) { - // show back burg from MFCG - const burgSeed = params.get("seed").slice(-4); - params.set("burg", burgSeed); - } else { - // select burg for MFCG - findBurgForMFCG(params); - return; - } - } - - const scaleParam = params.get("scale"); - const cellParam = params.get("cell"); - const burgParam = params.get("burg"); - - if (scaleParam || cellParam || burgParam) { - const scale = +scaleParam || 8; - - if (cellParam) { - const cell = +params.get("cell"); - const [x, y] = pack.cells.p[cell]; - zoomTo(x, y, scale, 1600); - return; - } - - if (burgParam) { - const burg = isNaN(+burgParam) ? pack.burgs.find(burg => burg.name === burgParam) : pack.burgs[+burgParam]; - if (!burg) return; - - const {x, y} = burg; - zoomTo(x, y, scale, 1600); - return; - } - - const x = +params.get("x") || graphWidth / 2; - const y = +params.get("y") || graphHeight / 2; - zoomTo(x, y, scale, 1600); - } -} - -let isAssistantLoaded = false; -function toggleAssistant() { - const assistantContainer = byId("chat-widget-container"); - const showAssistant = byId("azgaarAssistant").value === "show"; - - if (showAssistant) { - if (isAssistantLoaded) { - assistantContainer.style.display = "block"; - } else { - import("./libs/openwidget.min.js").then(() => { - isAssistantLoaded = true; - setTimeout(() => { - const bubble = byId("chat-widget-minimized"); - if (bubble) { - bubble.dataset.tip = "Click to open the Assistant"; - bubble.on("mouseover", showDataTip); - } - }, 5000); - }); - } - } else if (isAssistantLoaded) { - assistantContainer.style.display = "none"; - } -} - -// find burg for MFCG and focus on it -function findBurgForMFCG(params) { - const cells = pack.cells, - burgs = pack.burgs; - if (pack.burgs.length < 2) { - ERROR && console.error("Cannot select a burg for MFCG"); - return; - } - - // used for selection - const size = +params.get("size"); - const coast = +params.get("coast"); - const port = +params.get("port"); - const river = +params.get("river"); - - let selection = defineSelection(coast, port, river); - if (!selection.length) selection = defineSelection(coast, !port, !river); - if (!selection.length) selection = defineSelection(!coast, 0, !river); - if (!selection.length) selection = [burgs[1]]; // select first if nothing is found - - function defineSelection(coast, port, river) { - if (port && river) return burgs.filter(b => b.port && cells.r[b.cell]); - if (!port && coast && river) return burgs.filter(b => !b.port && cells.t[b.cell] === 1 && cells.r[b.cell]); - if (!coast && !river) return burgs.filter(b => cells.t[b.cell] !== 1 && !cells.r[b.cell]); - if (!coast && river) return burgs.filter(b => cells.t[b.cell] !== 1 && cells.r[b.cell]); - if (coast && river) return burgs.filter(b => cells.t[b.cell] === 1 && cells.r[b.cell]); - return []; - } - - // select a burg with closest population from selection - const selected = d3.scan(selection, (a, b) => Math.abs(a.population - size) - Math.abs(b.population - size)); - const burgId = selection[selected].i; - if (!burgId) { - ERROR && console.error("Cannot select a burg for MFCG"); - return; - } - - const b = burgs[burgId]; - const referrer = new URL(document.referrer); - for (let p of referrer.searchParams) { - if (p[0] === "name") b.name = p[1]; - else if (p[0] === "size") b.population = +p[1]; - else if (p[0] === "seed") b.MFCG = +p[1]; - else if (p[0] === "shantytown") b.shanty = +p[1]; - else b[p[0]] = +p[1]; // other parameters - } - if (params.get("name") && params.get("name") != "null") b.name = params.get("name"); - - const label = burgLabels.select("[data-id='" + burgId + "']"); - if (label.size()) { - label - .text(b.name) - .classed("drag", true) - .on("mouseover", function () { - d3.select(this).classed("drag", false); - label.on("mouseover", null); - }); - } - - zoomTo(b.x, b.y, 8, 1600); - invokeActiveZooming(); - tip("Here stands the glorious city of " + b.name, true, "success", 15000); -} - -function handleZoom(isScaleChanged, isPositionChanged) { - viewbox.attr("transform", `translate(${viewX} ${viewY}) scale(${scale})`); - - if (isPositionChanged) { - if (layerIsOn("toggleCoordinates")) drawCoordinates(); - } - - if (isScaleChanged) { - invokeActiveZooming(); - drawScaleBar(scaleBar, scale); - fitScaleBar(scaleBar, svgWidth, svgHeight); - } - - // zoom image converter overlay - if (customization === 1) { - const canvas = byId("canvas"); - if (!canvas || canvas.style.opacity === "0") return; - - const img = byId("imageToConvert"); - if (!img) return; - - const ctx = canvas.getContext("2d"); - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.setTransform(scale, 0, 0, scale, viewX, viewY); - ctx.drawImage(img, 0, 0, canvas.width, canvas.height); - } -} - -// Zoom to a specific point -function zoomTo(x, y, z = 8, d = 2000) { - const transform = d3.zoomIdentity.translate(x * -z + svgWidth / 2, y * -z + svgHeight / 2).scale(z); - svg.transition().duration(d).call(zoom.transform, transform); -} - -// Reset zoom to initial -function resetZoom(d = 1000) { - svg.transition().duration(d).call(zoom.transform, d3.zoomIdentity); -} - -// active zooming feature -function invokeActiveZooming() { - const isOptimized = shapeRendering.value === "optimizeSpeed"; - - if (coastline.select("#sea_island").size() && +coastline.select("#sea_island").attr("auto-filter")) { - // toggle shade/blur filter for coatline on zoom - const filter = scale > 1.5 && scale <= 2.6 ? null : scale > 2.6 ? "url(#blurFilter)" : "url(#dropShadow)"; - coastline.select("#sea_island").attr("filter", filter); - } - - // rescale labels on zoom - if (labels.style("display") !== "none") { - labels.selectAll("g").each(function () { - if (this.id === "burgLabels") return; - const desired = +this.dataset.size; - const relative = Math.max(rn((desired + desired / scale) / 2, 2), 1); - if (rescaleLabels.checked) this.setAttribute("font-size", relative); - - const hidden = hideLabels.checked && (relative * scale < 6 || relative * scale > 60); - if (hidden) this.classList.add("hidden"); - else this.classList.remove("hidden"); - }); - } - - // rescale emblems on zoom - if (emblems.style("display") !== "none") { - emblems.selectAll("g").each(function () { - const size = this.getAttribute("font-size") * scale; - const hidden = hideEmblems.checked && (size < 25 || size > 300); - if (hidden) this.classList.add("hidden"); - else this.classList.remove("hidden"); - if (!hidden && window.COArenderer && this.children.length && !this.children[0].getAttribute("href")) - renderGroupCOAs(this); - }); - } - - // turn off ocean pattern if scale is big (improves performance) - oceanPattern - .select("rect") - .attr("fill", scale > 10 ? "#fff" : "url(#oceanic)") - .attr("opacity", scale > 10 ? 0.2 : null); - - // change states halo width - if (!customization && !isOptimized) { - const desired = +statesHalo.attr("data-width"); - const haloSize = rn(desired / scale ** 0.8, 2); - statesHalo.attr("stroke-width", haloSize).style("display", haloSize > 0.1 ? "block" : "none"); - } - - // rescale map markers - +markers.attr("rescale") && - pack.markers?.forEach(marker => { - const {i, x, y, size = 30, hidden} = marker; - const el = !hidden && byId(`marker${i}`); - if (!el) return; - - const zoomedSize = Math.max(rn(size / 5 + 24 / scale, 2), 1); - el.setAttribute("width", zoomedSize); - el.setAttribute("height", zoomedSize); - el.setAttribute("x", rn(x - zoomedSize / 2, 1)); - el.setAttribute("y", rn(y - zoomedSize, 1)); - }); - - // rescale rulers to have always the same size - if (ruler.style("display") !== "none") { - const size = rn((10 / scale ** 0.3) * 2, 2); - ruler.selectAll("text").attr("font-size", size); - } -} - -// add drag to upload logic, pull request from @evyatron -void (function addDragToUpload() { - document.addEventListener("dragover", function (e) { - e.stopPropagation(); - e.preventDefault(); - byId("mapOverlay").style.display = null; - }); - - document.addEventListener("dragleave", function (e) { - byId("mapOverlay").style.display = "none"; - }); - - document.addEventListener("drop", function (e) { - e.stopPropagation(); - e.preventDefault(); - - 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(); - - if (!file.name.endsWith(".map") && !file.name.endsWith(".gz")) { - alertMessage.innerHTML = - "Please upload a map file (.map or .gz formats) you have previously downloaded"; - $("#alert").dialog({ - resizable: false, - title: "Invalid file format", - position: {my: "center", at: "center", of: "svg"}, - buttons: { - Close: function () { - $(this).dialog("close"); - } - } - }); - return; - } - - // all good - show uploading text and load the map - overlay.style.display = null; - overlay.innerHTML = "Uploading..."; - if (closeDialogs) closeDialogs(); - uploadMap(file, () => { - overlay.style.display = "none"; - overlay.innerHTML = "Drop a map file to open"; - }); - }); -})(); - -async function generate(options) { - try { - const timeStart = performance.now(); - const {seed: precreatedSeed, graph: precreatedGraph} = options || {}; - - invokeActiveZooming(); - setSeed(precreatedSeed); - INFO && console.group("Generated Map " + seed); - - applyGraphSize(); - randomizeOptions(); - - if (shouldRegenerateGrid(grid, precreatedSeed)) grid = precreatedGraph || generateGrid(); - else delete grid.cells.h; - grid.cells.h = await HeightmapGenerator.generate(grid); - pack = {}; // reset pack - - Features.markupGrid(); - addLakesInDeepDepressions(); - openNearSeaLakes(); - - OceanLayers(); - defineMapSize(); - calculateMapCoordinates(); - calculateTemperatures(); - generatePrecipitation(); - - reGraph(); - Features.markupPack(); - createDefaultRuler(); - - Rivers.generate(); - Biomes.define(); - - rankCells(); - Cultures.generate(); - Cultures.expand(); - BurgsAndStates.generate(); - Routes.generate(); - Religions.generate(); - BurgsAndStates.defineStateForms(); - Provinces.generate(); - Provinces.getPoles(); - BurgsAndStates.defineBurgFeatures(); - - Rivers.specify(); - Features.specify(); - - Military.generate(); - Markers.generate(); - Zones.generate(); - - drawScaleBar(scaleBar, scale); - Names.getMapName(); - - WARN && console.warn(`TOTAL: ${rn((performance.now() - timeStart) / 1000, 2)}s`); - showStatistics(); - INFO && console.groupEnd("Generated Map " + seed); - } catch (error) { - ERROR && console.error(error); - const parsedError = parseError(error); - clearMainTip(); - - alertMessage.innerHTML = /* html */ `An error has occurred on map generation. Please retry.
If error is critical, clear the stored data and try again. -

${parsedError}

`; - $("#alert").dialog({ - resizable: false, - title: "Generation error", - width: "32em", - buttons: { - "Clear cache": () => cleanupData(), - Regenerate: function () { - regenerateMap("generation error"); - $(this).dialog("close"); - }, - Ignore: function () { - $(this).dialog("close"); - } - }, - position: {my: "center", at: "center", of: "svg"} - }); - } -} - -// set map seed (string!) -function setSeed(precreatedSeed) { - if (!precreatedSeed) { - const first = !mapHistory[0]; - const params = new URL(window.location.href).searchParams; - const urlSeed = params.get("seed"); - if (first && params.get("from") === "MFCG" && urlSeed.length === 13) seed = urlSeed.slice(0, -4); - else if (first && urlSeed) seed = urlSeed; - else seed = generateSeed(); - } else { - seed = precreatedSeed; - } - - byId("optionsSeed").value = seed; - Math.random = aleaPRNG(seed); -} - -function addLakesInDeepDepressions() { - TIME && console.time("addLakesInDeepDepressions"); - const elevationLimit = +byId("lakeElevationLimitOutput").value; - if (elevationLimit === 80) return; - - const {cells, features} = grid; - const {c, h, b} = cells; - - for (const i of cells.i) { - if (b[i] || h[i] < 20) continue; - - const minHeight = d3.min(c[i].map(c => h[c])); - if (h[i] > minHeight) continue; - - let deep = true; - const threshold = h[i] + elevationLimit; - const queue = [i]; - const checked = []; - checked[i] = true; - - // check if elevated cell can potentially pour to water - while (deep && queue.length) { - const q = queue.pop(); - - for (const n of c[q]) { - if (checked[n]) continue; - if (h[n] >= threshold) continue; - if (h[n] < 20) { - deep = false; - break; - } - - checked[n] = true; - queue.push(n); - } - } - - // if not, add a lake - if (deep) { - const lakeCells = [i].concat(c[i].filter(n => h[n] === h[i])); - addLake(lakeCells); - } - } - - function addLake(lakeCells) { - const f = features.length; - - lakeCells.forEach(i => { - cells.h[i] = 19; - cells.t[i] = -1; - cells.f[i] = f; - c[i].forEach(n => !lakeCells.includes(n) && (cells.t[c] = 1)); - }); - - features.push({i: f, land: false, border: false, type: "lake"}); - } - - TIME && console.timeEnd("addLakesInDeepDepressions"); -} - -// near sea lakes usually get a lot of water inflow, most of them should break threshold and flow out to sea (see Ancylus Lake) -function openNearSeaLakes() { - if (byId("templateInput").value === "Atoll") return; // no need for Atolls - - const cells = grid.cells; - const features = grid.features; - if (!features.find(f => f.type === "lake")) return; // no lakes - TIME && console.time("openLakes"); - const LIMIT = 22; // max height that can be breached by water - - for (const i of cells.i) { - const lakeFeatureId = cells.f[i]; - if (features[lakeFeatureId].type !== "lake") continue; // not a lake - - check_neighbours: for (const c of cells.c[i]) { - if (cells.t[c] !== 1 || cells.h[c] > LIMIT) continue; // water cannot break this - - for (const n of cells.c[c]) { - const ocean = cells.f[n]; - if (features[ocean].type !== "ocean") continue; // not an ocean - removeLake(c, lakeFeatureId, ocean); - break check_neighbours; - } - } - } - - function removeLake(thresholdCellId, lakeFeatureId, oceanFeatureId) { - cells.h[thresholdCellId] = 19; - cells.t[thresholdCellId] = -1; - cells.f[thresholdCellId] = oceanFeatureId; - cells.c[thresholdCellId].forEach(function (c) { - if (cells.h[c] >= 20) cells.t[c] = 1; // mark as coastline - }); - - cells.i.forEach(i => { - if (cells.f[i] === lakeFeatureId) cells.f[i] = oceanFeatureId; - }); - features[lakeFeatureId].type = "ocean"; // mark former lake as ocean - } - - TIME && console.timeEnd("openLakes"); -} - -// define map size and position based on template and random factor -function defineMapSize() { - const [size, latitude, longitude] = getSizeAndLatitude(); - const randomize = new URL(window.location.href).searchParams.get("options") === "default"; // ignore stored options - if (randomize || !locked("mapSize")) mapSizeOutput.value = mapSizeInput.value = size; - if (randomize || !locked("latitude")) latitudeOutput.value = latitudeInput.value = latitude; - if (randomize || !locked("longitude")) longitudeOutput.value = longitudeInput.value = longitude; - - function getSizeAndLatitude() { - const template = byId("templateInput").value; // heightmap template - - if (template === "africa-centric") return [45, 53, 38]; - if (template === "arabia") return [20, 35, 35]; - if (template === "atlantics") return [42, 23, 65]; - if (template === "britain") return [7, 20, 51.3]; - if (template === "caribbean") return [15, 40, 74.8]; - if (template === "east-asia") return [11, 28, 9.4]; - if (template === "eurasia") return [38, 19, 27]; - if (template === "europe") return [20, 16, 44.8]; - if (template === "europe-accented") return [14, 22, 44.8]; - if (template === "europe-and-central-asia") return [25, 10, 39.5]; - if (template === "europe-central") return [11, 22, 46.4]; - if (template === "europe-north") return [7, 18, 48.9]; - if (template === "greenland") return [22, 7, 55.8]; - if (template === "hellenica") return [8, 27, 43.5]; - if (template === "iceland") return [2, 15, 55.3]; - if (template === "indian-ocean") return [45, 55, 14]; - if (template === "mediterranean-sea") return [10, 29, 45.8]; - if (template === "middle-east") return [8, 31, 34.4]; - if (template === "north-america") return [37, 17, 87]; - if (template === "us-centric") return [66, 27, 100]; - if (template === "us-mainland") return [16, 30, 77.5]; - if (template === "world") return [78, 27, 40]; - if (template === "world-from-pacific") return [75, 32, 30]; // longitude doesn't fit - - const part = grid.features.some(f => f.land && f.border); // if land goes over map borders - const max = part ? 80 : 100; // max size - const lat = () => gauss(P(0.5) ? 40 : 60, 20, 25, 75); // latitude shift - - if (!part) { - if (template === "pangea") return [100, 50, 50]; - if (template === "shattered" && P(0.7)) return [100, 50, 50]; - if (template === "continents" && P(0.5)) return [100, 50, 50]; - if (template === "archipelago" && P(0.35)) return [100, 50, 50]; - if (template === "highIsland" && P(0.25)) return [100, 50, 50]; - if (template === "lowIsland" && P(0.1)) return [100, 50, 50]; - } - - if (template === "pangea") return [gauss(70, 20, 30, max), lat(), 50]; - if (template === "volcano") return [gauss(20, 20, 10, max), lat(), 50]; - if (template === "mediterranean") return [gauss(25, 30, 15, 80), lat(), 50]; - if (template === "peninsula") return [gauss(15, 15, 5, 80), lat(), 50]; - if (template === "isthmus") return [gauss(15, 20, 3, 80), lat(), 50]; - if (template === "atoll") return [gauss(3, 2, 1, 5, 1), lat(), 50]; - - return [gauss(30, 20, 15, max), lat(), 50]; // Continents, Archipelago, High Island, Low Island - } -} - -// calculate map position on globe -function calculateMapCoordinates() { - const sizeFraction = +byId("mapSizeOutput").value / 100; - const latShift = +byId("latitudeOutput").value / 100; - const lonShift = +byId("longitudeOutput").value / 100; - - const latT = rn(sizeFraction * 180, 1); - const latN = rn(90 - (180 - latT) * latShift, 1); - const latS = rn(latN - latT, 1); - - const lonT = rn(Math.min((graphWidth / graphHeight) * latT, 360), 1); - const lonE = rn(180 - (360 - lonT) * lonShift, 1); - const lonW = rn(lonE - lonT, 1); - mapCoordinates = {latT, latN, latS, lonT, lonW, lonE}; -} - -// temperature model, trying to follow real-world data -// based on http://www-das.uwyo.edu/~geerts/cwx/notes/chap16/Image64.gif -function calculateTemperatures() { - TIME && console.time("calculateTemperatures"); - const cells = grid.cells; - cells.temp = new Int8Array(cells.i.length); // temperature array - - const {temperatureEquator, temperatureNorthPole, temperatureSouthPole} = options; - const tropics = [16, -20]; // tropics zone - const tropicalGradient = 0.15; - - const tempNorthTropic = temperatureEquator - tropics[0] * tropicalGradient; - const northernGradient = (tempNorthTropic - temperatureNorthPole) / (90 - tropics[0]); - - const tempSouthTropic = temperatureEquator + tropics[1] * tropicalGradient; - const southernGradient = (tempSouthTropic - temperatureSouthPole) / (90 + tropics[1]); - - const exponent = +heightExponentInput.value; - - for (let rowCellId = 0; rowCellId < cells.i.length; rowCellId += grid.cellsX) { - const [, y] = grid.points[rowCellId]; - const rowLatitude = mapCoordinates.latN - (y / graphHeight) * mapCoordinates.latT; // [90; -90] - const tempSeaLevel = calculateSeaLevelTemp(rowLatitude); - DEBUG.temperature && console.info(`${rn(rowLatitude)}° sea temperature: ${rn(tempSeaLevel)}°C`); - - for (let cellId = rowCellId; cellId < rowCellId + grid.cellsX; cellId++) { - const tempAltitudeDrop = getAltitudeTemperatureDrop(cells.h[cellId]); - cells.temp[cellId] = minmax(tempSeaLevel - tempAltitudeDrop, -128, 127); - } - } - - function calculateSeaLevelTemp(latitude) { - const isTropical = latitude <= 16 && latitude >= -20; - if (isTropical) return temperatureEquator - Math.abs(latitude) * tropicalGradient; - - return latitude > 0 - ? tempNorthTropic - (latitude - tropics[0]) * northernGradient - : tempSouthTropic + (latitude - tropics[1]) * southernGradient; - } - - // temperature drops by 6.5°C per 1km of altitude - function getAltitudeTemperatureDrop(h) { - if (h < 20) return 0; - const height = Math.pow(h - 18, exponent); - return rn((height / 1000) * 6.5); - } - - TIME && console.timeEnd("calculateTemperatures"); -} - -// simplest precipitation model -function generatePrecipitation() { - TIME && console.time("generatePrecipitation"); - prec.selectAll("*").remove(); - const {cells, cellsX, cellsY} = grid; - cells.prec = new Uint8Array(cells.i.length); // precipitation array - - const cellsNumberModifier = (pointsInput.dataset.cells / 10000) ** 0.25; - const precInputModifier = precInput.value / 100; - const modifier = cellsNumberModifier * precInputModifier; - - const westerly = []; - const easterly = []; - let southerly = 0; - let northerly = 0; - - // precipitation modifier per latitude band - // x4 = 0-5 latitude: wet through the year (rising zone) - // x2 = 5-20 latitude: wet summer (rising zone), dry winter (sinking zone) - // x1 = 20-30 latitude: dry all year (sinking zone) - // x2 = 30-50 latitude: wet winter (rising zone), dry summer (sinking zone) - // x3 = 50-60 latitude: wet all year (rising zone) - // x2 = 60-70 latitude: wet summer (rising zone), dry winter (sinking zone) - // x1 = 70-85 latitude: dry all year (sinking zone) - // x0.5 = 85-90 latitude: dry all year (sinking zone) - const latitudeModifier = [4, 2, 2, 2, 1, 1, 2, 2, 2, 2, 3, 3, 2, 2, 1, 1, 1, 0.5]; - const MAX_PASSABLE_ELEVATION = 85; - - // define wind directions based on cells latitude and prevailing winds there - d3.range(0, cells.i.length, cellsX).forEach(function (c, i) { - const lat = mapCoordinates.latN - (i / cellsY) * mapCoordinates.latT; - const latBand = ((Math.abs(lat) - 1) / 5) | 0; - const latMod = latitudeModifier[latBand]; - const windTier = (Math.abs(lat - 89) / 30) | 0; // 30d tiers from 0 to 5 from N to S - const {isWest, isEast, isNorth, isSouth} = getWindDirections(windTier); - - if (isWest) westerly.push([c, latMod, windTier]); - if (isEast) easterly.push([c + cellsX - 1, latMod, windTier]); - if (isNorth) northerly++; - if (isSouth) southerly++; - }); - - // distribute winds by direction - if (westerly.length) passWind(westerly, 120 * modifier, 1, cellsX); - if (easterly.length) passWind(easterly, 120 * modifier, -1, cellsX); - - const vertT = southerly + northerly; - if (northerly) { - const bandN = ((Math.abs(mapCoordinates.latN) - 1) / 5) | 0; - const latModN = mapCoordinates.latT > 60 ? d3.mean(latitudeModifier) : latitudeModifier[bandN]; - const maxPrecN = (northerly / vertT) * 60 * modifier * latModN; - passWind(d3.range(0, cellsX, 1), maxPrecN, cellsX, cellsY); - } - - if (southerly) { - const bandS = ((Math.abs(mapCoordinates.latS) - 1) / 5) | 0; - const latModS = mapCoordinates.latT > 60 ? d3.mean(latitudeModifier) : latitudeModifier[bandS]; - const maxPrecS = (southerly / vertT) * 60 * modifier * latModS; - passWind(d3.range(cells.i.length - cellsX, cells.i.length, 1), maxPrecS, -cellsX, cellsY); - } - - function getWindDirections(tier) { - const angle = options.winds[tier]; - - const isWest = angle > 40 && angle < 140; - const isEast = angle > 220 && angle < 320; - const isNorth = angle > 100 && angle < 260; - const isSouth = angle > 280 || angle < 80; - - return {isWest, isEast, isNorth, isSouth}; - } - - function passWind(source, maxPrec, next, steps) { - const maxPrecInit = maxPrec; - - for (let first of source) { - if (first[0]) { - maxPrec = Math.min(maxPrecInit * first[1], 255); - first = first[0]; - } - - let humidity = maxPrec - cells.h[first]; // initial water amount - if (humidity <= 0) continue; // if first cell in row is too elevated consider wind dry - - for (let s = 0, current = first; s < steps; s++, current += next) { - if (cells.temp[current] < -5) continue; // no flux in permafrost - - if (cells.h[current] < 20) { - // water cell - if (cells.h[current + next] >= 20) { - cells.prec[current + next] += Math.max(humidity / rand(10, 20), 1); // coastal precipitation - } else { - humidity = Math.min(humidity + 5 * modifier, maxPrec); // wind gets more humidity passing water cell - cells.prec[current] += 5 * modifier; // water cells precipitation (need to correctly pour water through lakes) - } - continue; - } - - // land cell - const isPassable = cells.h[current + next] <= MAX_PASSABLE_ELEVATION; - const precipitation = isPassable ? getPrecipitation(humidity, current, next) : humidity; - cells.prec[current] += precipitation; - const evaporation = precipitation > 1.5 ? 1 : 0; // some humidity evaporates back to the atmosphere - humidity = isPassable ? minmax(humidity - precipitation + evaporation, 0, maxPrec) : 0; - } - } - } - - function getPrecipitation(humidity, i, n) { - const normalLoss = Math.max(humidity / (10 * modifier), 1); // precipitation in normal conditions - const diff = Math.max(cells.h[i + n] - cells.h[i], 0); // difference in height - const mod = (cells.h[i + n] / 70) ** 2; // 50 stands for hills, 70 for mountains - return minmax(normalLoss + diff * mod, 1, humidity); - } - - void (function drawWindDirection() { - const wind = prec.append("g").attr("id", "wind"); - - d3.range(0, 6).forEach(function (t) { - if (westerly.length > 1) { - const west = westerly.filter(w => w[2] === t); - if (west && west.length > 3) { - const from = west[0][0], - to = west[west.length - 1][0]; - const y = (grid.points[from][1] + grid.points[to][1]) / 2; - wind.append("text").attr("text-rendering", "optimizeSpeed").attr("x", 20).attr("y", y).text("\u21C9"); - } - } - if (easterly.length > 1) { - const east = easterly.filter(w => w[2] === t); - if (east && east.length > 3) { - const from = east[0][0], - to = east[east.length - 1][0]; - const y = (grid.points[from][1] + grid.points[to][1]) / 2; - wind - .append("text") - .attr("text-rendering", "optimizeSpeed") - .attr("x", graphWidth - 52) - .attr("y", y) - .text("\u21C7"); - } - } - }); - - if (northerly) - wind - .append("text") - .attr("text-rendering", "optimizeSpeed") - .attr("x", graphWidth / 2) - .attr("y", 42) - .text("\u21CA"); - if (southerly) - wind - .append("text") - .attr("text-rendering", "optimizeSpeed") - .attr("x", graphWidth / 2) - .attr("y", graphHeight - 20) - .text("\u21C8"); - })(); - - TIME && console.timeEnd("generatePrecipitation"); -} - -// recalculate Voronoi Graph to pack cells -function reGraph() { - TIME && console.time("reGraph"); - const {cells: gridCells, points, features} = grid; - const newCells = {p: [], g: [], h: []}; // store new data - const spacing2 = grid.spacing ** 2; - - for (const i of gridCells.i) { - const height = gridCells.h[i]; - const type = gridCells.t[i]; - - if (height < 20 && type !== -1 && type !== -2) continue; // exclude all deep ocean points - if (type === -2 && (i % 4 === 0 || features[gridCells.f[i]].type === "lake")) continue; // exclude non-coastal lake points - - const [x, y] = points[i]; - addNewPoint(i, x, y, height); - - // add additional points for cells along coast - if (type === 1 || type === -1) { - if (gridCells.b[i]) continue; // not for near-border cells - gridCells.c[i].forEach(function (e) { - if (i > e) return; - if (gridCells.t[e] === type) { - const dist2 = (y - points[e][1]) ** 2 + (x - points[e][0]) ** 2; - if (dist2 < spacing2) return; // too close to each other - const x1 = rn((x + points[e][0]) / 2, 1); - const y1 = rn((y + points[e][1]) / 2, 1); - addNewPoint(i, x1, y1, height); - } - }); - } - } - - function addNewPoint(i, x, y, height) { - newCells.p.push([x, y]); - newCells.g.push(i); - newCells.h.push(height); - } - - const {cells: packCells, vertices} = calculateVoronoi(newCells.p, grid.boundary); - pack.vertices = vertices; - pack.cells = packCells; - pack.cells.p = newCells.p; - pack.cells.g = createTypedArray({maxValue: grid.points.length, from: newCells.g}); - pack.cells.q = d3.quadtree(newCells.p.map(([x, y], i) => [x, y, i])); - pack.cells.h = createTypedArray({maxValue: 100, from: newCells.h}); - pack.cells.area = createTypedArray({maxValue: UINT16_MAX, length: packCells.i.length}).map((_, cellId) => { - const area = Math.abs(d3.polygonArea(getPackPolygon(cellId))); - return Math.min(area, UINT16_MAX); - }); - - TIME && console.timeEnd("reGraph"); -} - -function isWetLand(moisture, temperature, height) { - if (moisture > 40 && temperature > -2 && height < 25) return true; //near coast - if (moisture > 24 && temperature > -2 && height > 24 && height < 60) return true; //off coast - return false; -} - -// assess cells suitability to calculate population and rand cells for culture center and burgs placement -function rankCells() { - TIME && console.time("rankCells"); - const {cells, features} = pack; - cells.s = new Int16Array(cells.i.length); // cell suitability array - cells.pop = new Float32Array(cells.i.length); // cell population array - - const flMean = d3.median(cells.fl.filter(f => f)) || 0; - const flMax = d3.max(cells.fl) + d3.max(cells.conf); // to normalize flux - const areaMean = d3.mean(cells.area); // to adjust population by cell area - - for (const i of cells.i) { - if (cells.h[i] < 20) continue; // no population in water - let s = +biomesData.habitability[cells.biome[i]]; // base suitability derived from biome habitability - if (!s) continue; // uninhabitable biomes has 0 suitability - if (flMean) s += normalize(cells.fl[i] + cells.conf[i], flMean, flMax) * 250; // big rivers and confluences are valued - s -= (cells.h[i] - 50) / 5; // low elevation is valued, high is not; - - if (cells.t[i] === 1) { - if (cells.r[i]) s += 15; // estuary is valued - const feature = features[cells.f[cells.haven[i]]]; - if (feature.type === "lake") { - if (feature.group === "freshwater") s += 30; - else if (feature.group == "salt") s += 10; - else if (feature.group == "frozen") s += 1; - else if (feature.group == "dry") s -= 5; - else if (feature.group == "sinkhole") s -= 5; - else if (feature.group == "lava") s -= 30; - } else { - s += 5; // ocean coast is valued - if (cells.harbor[i] === 1) s += 20; // safe sea harbor is valued - } - } - - cells.s[i] = s / 5; // general population rate - // cell rural population is suitability adjusted by cell area - cells.pop[i] = cells.s[i] > 0 ? (cells.s[i] * cells.area[i]) / areaMean : 0; - } - - TIME && console.timeEnd("rankCells"); -} - -// show map stats on generation complete -function showStatistics() { - const heightmap = byId("templateInput").value; - const isTemplate = heightmap in heightmapTemplates; - const heightmapType = isTemplate ? "template" : "precreated"; - const isRandomTemplate = isTemplate && !locked("template") ? "random " : ""; - - const stats = ` Seed: ${seed} - Canvas size: ${graphWidth}x${graphHeight} px - Heightmap: ${heightmap} - Template: ${isRandomTemplate}${heightmapType} - Points: ${grid.points.length} - Cells: ${pack.cells.i.length} - Map size: ${mapSizeOutput.value}% - States: ${pack.states.length - 1} - Provinces: ${pack.provinces.length - 1} - Burgs: ${pack.burgs.length - 1} - Religions: ${pack.religions.length - 1} - Culture set: ${culturesSet.value} - Cultures: ${pack.cultures.length - 1}`; - - mapId = Date.now(); // unique map id is it's creation date number - mapHistory.push({seed, width: graphWidth, height: graphHeight, template: heightmap, created: mapId}); - INFO && console.info(stats); -} - -const regenerateMap = debounce(async function (options) { - WARN && console.warn("Generate new random map"); - - const cellsDesired = +byId("pointsInput").dataset.cells; - const shouldShowLoading = cellsDesired > 10000; - shouldShowLoading && showLoading(); - - closeDialogs("#worldConfigurator, #options3d"); - customization = 0; - resetZoom(1000); - undraw(); - await generate(options); - drawLayers(); - if (ThreeD.options.isOn) ThreeD.redraw(); - if ($("#worldConfigurator").is(":visible")) editWorld(); - - fitMapToScreen(); - shouldShowLoading && hideLoading(); - clearMainTip(); -}, 250); - -// clear the map -function undraw() { - viewbox - .selectAll("path, circle, polygon, line, text, use, #texture > image, #zones > g, #armies > g, #ruler > g") - .remove(); - byId("deftemp") - .querySelectorAll("path, clipPath, svg") - .forEach(el => el.remove()); - byId("coas").innerHTML = ""; // remove auto-generated emblems - notes = []; - unfog(); -} diff --git a/test-grid-numbering.sh b/test-grid-numbering.sh deleted file mode 100755 index 8027cfbc..00000000 --- a/test-grid-numbering.sh +++ /dev/null @@ -1,63 +0,0 @@ -#!/bin/bash -# Quick test script to verify grid numbering works - -echo "================================" -echo "Azgaar Grid Numbering - Quick Test" -echo "================================" -echo "" -echo "The changes have been successfully applied to:" -echo " ✓ /opt/games/azgaar/index.html" -echo " ✓ /opt/games/azgaar/modules/ui/layers.js" -echo " ✓ /opt/games/azgaar/modules/ui/style.js" -echo " ✓ /opt/games/azgaar/modules/markers-generator.js" -echo "" -echo "To see the grid numbering feature:" -echo "" -echo "1. HARD REFRESH your browser:" -echo " - Firefox/Chrome: Press Ctrl+Shift+R (or Ctrl+F5)" -echo " - This clears the cache and reloads JavaScript" -echo "" -echo "2. Or close and reopen your browser completely" -echo "" -echo "3. Navigate to: file:///opt/games/azgaar/index.html" -echo "" -echo "4. Enable the Grid:" -echo " - Press 'G' key OR click 'Grid' in the layers menu" -echo "" -echo "5. Open Style Panel (right sidebar) and:" -echo " - Select 'Grid' from the dropdown" -echo " - Set Type to 'Hex grid (pointy)'" -echo " - CHECK the 'Show grid numbers' checkbox" -echo "" -echo "6. You should see numbers (0001, 0002, etc.) in each hex cell!" -echo "" -echo "================================" -echo "Checking files are in place..." -echo "================================" - -# Verify grid numbering UI exists -if grep -q "styleGridShowNumbers" /opt/games/azgaar/index.html; then - echo "✓ Grid numbering UI controls found in index.html" -else - echo "✗ ERROR: Grid numbering UI controls NOT found!" -fi - -# Verify grid numbering function exists -if grep -q "function drawGridNumbers" /opt/games/azgaar/modules/ui/layers.js; then - echo "✓ Grid numbering function found in layers.js" -else - echo "✗ ERROR: Grid numbering function NOT found!" -fi - -# Verify fantasy icons -if [ -d "/opt/games/azgaar/images/fantasy-icons" ]; then - icon_count=$(ls -1 /opt/games/azgaar/images/fantasy-icons/*.svg 2>/dev/null | wc -l) - echo "✓ Fantasy icons directory exists with $icon_count icons" -else - echo "✗ ERROR: Fantasy icons directory NOT found!" -fi - -echo "" -echo "All checks passed! The features are installed." -echo "Just hard refresh your browser (Ctrl+Shift+R)" -echo ""