Relief webgl renderer

.gitignore

@@ -5,4 +5,9 @@
 /dist
 /coverage
 /playwright-report
-/test-results
+/test-results
+/_bmad
+/_bmad-output
+/.DS_Store
+/.github/agents
+/.github/prompts

package.json

@@ -38,10 +38,12 @@
     "vitest": "^4.0.18"
   },
   "dependencies": {
+    "@types/three": "^0.183.1",
     "alea": "^1.0.1",
     "d3": "^7.9.0",
     "delaunator": "^5.0.1",
-    "polylabel": "^2.0.1"
+    "polylabel": "^2.0.1",
+    "three": "^0.183.2"
   },
   "engines": {
     "node": ">=24.0.0"

public/index.css

@@ -231,7 +231,6 @@ t,
   pointer-events: none;
 }
 
-#terrain,
 #burgIcons {
   cursor: pointer;
 }
@@ -2090,13 +2089,12 @@ svg.button {
   background-color: #e7e6e4;
   border: 1px solid #a9a9a9;
   cursor: pointer;
+  transition: all 0.2s;
 }
 
 #reliefIconsDiv svg:hover {
   border-color: #5c5c5c;
   background-color: #eef6fb;
-  transition: all 0.3s ease-out 3s;
-  transform: scale(2);
 }
 
 #reliefIconsDiv svg.pressed {

public/main.js

@@ -459,6 +459,8 @@ function handleZoom(isScaleChanged, isPositionChanged) {
     fitScaleBar(scaleBar, svgWidth, svgHeight);
   }
 
+  if (layerIsOn("toggleRelief")) rerenderReliefIcons();
+
   // zoom image converter overlay
   if (customization === 1) {
     const canvas = byId("canvas");
@@ -1234,7 +1236,7 @@ function showStatistics() {
   INFO && console.info(stats);
 
   // Dispatch event for test automation and external integrations
-  window.dispatchEvent(new CustomEvent('map:generated', { detail: { seed, mapId } }));
+  window.dispatchEvent(new CustomEvent("map:generated", {detail: {seed, mapId}}));
 }
 
 const regenerateMap = debounce(async function (options) {

public/modules/io/export.js

@@ -180,7 +180,10 @@ async function getMapURL(
     fullMap = false
   } = {}
 ) {
+  // Temporarily inject <use> elements so the clone includes relief icon data
+  if (typeof prepareReliefForSave === "function") prepareReliefForSave();
   const cloneEl = byId("map").cloneNode(true); // clone svg
+  if (typeof restoreReliefAfterSave === "function") restoreReliefAfterSave();
   cloneEl.id = "fantasyMap";
   document.body.appendChild(cloneEl);
   const clone = d3.select(cloneEl);
@@ -286,13 +289,13 @@ async function getMapURL(
     }
   }
 
-  // add relief icons
+  // add relief icons (from <use> elements – canvas <image> is excluded)
   if (cloneEl.getElementById("terrain")) {
     const uniqueElements = new Set();
-    const terrainNodes = cloneEl.getElementById("terrain").childNodes;
-    for (let i = 0; i < terrainNodes.length; i++) {
-      const href = terrainNodes[i].getAttribute("href") || terrainNodes[i].getAttribute("xlink:href");
-      uniqueElements.add(href);
+    const terrainUses = cloneEl.getElementById("terrain").querySelectorAll("use");
+    for (let i = 0; i < terrainUses.length; i++) {
+      const href = terrainUses[i].getAttribute("href") || terrainUses[i].getAttribute("xlink:href");
+      if (href && href.startsWith("#")) uniqueElements.add(href);
     }
 
     const defsRelief = svgDefs.getElementById("defs-relief");
@@ -424,7 +427,8 @@ async function getMapURL(
 
 // remove hidden g elements and g elements without children to make downloaded svg smaller in size
 function removeUnusedElements(clone) {
-  if (!terrain.selectAll("use").size()) clone.select("#defs-relief")?.remove();
+  // Check the clone (not the live terrain) so canvas-mode maps export correctly
+  if (!clone.select("#terrain use").size()) clone.select("#defs-relief")?.remove();
 
   for (let empty = 1; empty; ) {
     empty = 0;
@@ -583,70 +587,70 @@ function saveGeoJsonZones() {
   // Handles multiple disconnected components and holes properly
   function getZonePolygonCoordinates(zoneCells) {
     const cellsInZone = new Set(zoneCells);
-    const ofSameType = (cellId) => cellsInZone.has(cellId);
-    const ofDifferentType = (cellId) => !cellsInZone.has(cellId);
-    
+    const ofSameType = cellId => cellsInZone.has(cellId);
+    const ofDifferentType = cellId => !cellsInZone.has(cellId);
+
     const checkedCells = new Set();
     const rings = []; // Array of LinearRings (each ring is an array of coordinates)
-    
+
     // Find all boundary components by tracing each connected region
     for (const cellId of zoneCells) {
       if (checkedCells.has(cellId)) continue;
-      
+
       // Check if this cell is on the boundary (has a neighbor outside the zone)
       const neighbors = cells.c[cellId];
       const onBorder = neighbors.some(ofDifferentType);
       if (!onBorder) continue;
-      
+
       // Check if this is an inner lake (hole) - skip if so
       const feature = pack.features[cells.f[cellId]];
       if (feature.type === "lake" && feature.shoreline) {
         if (feature.shoreline.every(ofSameType)) continue;
       }
-      
+
       // Find a starting vertex that's on the boundary
       const cellVertices = cells.v[cellId];
       let startingVertex = null;
-      
+
       for (const vertexId of cellVertices) {
         const vertexCells = vertices.c[vertexId];
         if (vertexCells.some(ofDifferentType)) {
           startingVertex = vertexId;
           break;
         }
       }
-      
+
       if (startingVertex === null) continue;
-      
+
       // Use connectVertices to trace the boundary (reusing existing logic)
       const vertexChain = connectVertices({
         vertices,
         startingVertex,
         ofSameType,
-        addToChecked: (cellId) => checkedCells.add(cellId),
-        closeRing: false, // We'll close it manually after converting to coordinates
+        addToChecked: cellId => checkedCells.add(cellId),
+        closeRing: false // We'll close it manually after converting to coordinates
       });
-      
+
       if (vertexChain.length < 3) continue;
-      
+
       // Convert vertex chain to coordinates
       const coordinates = [];
       for (const vertexId of vertexChain) {
         const [x, y] = vertices.p[vertexId];
         coordinates.push(getCoordinates(x, y, 4));
       }
-      
+
       // Close the ring (first coordinate = last coordinate)
       if (coordinates.length > 0) {
         coordinates.push(coordinates[0]);
       }
-      
+
       // Only add ring if it has at least 4 positions (minimum for valid LinearRing)
       if (coordinates.length >= 4) {
         rings.push(coordinates);
       }
     }
-    
+
     return rings;
   }
 
@@ -656,18 +660,18 @@ function saveGeoJsonZones() {
     if (zone.hidden || !zone.cells || zone.cells.length === 0) return;
 
     const rings = getZonePolygonCoordinates(zone.cells);
-    
+
     // Skip if no valid rings were generated
     if (rings.length === 0) return;
-    
+
     const properties = {
       id: zone.i,
       name: zone.name,
       type: zone.type,
       color: zone.color,
       cells: zone.cells
     };
-    
+
     // If there's only one ring, use Polygon geometry
     if (rings.length === 1) {
       const feature = {

public/modules/io/load.js

@@ -440,7 +440,12 @@ async function parseLoadedData(data, mapVersion) {
       if (hasChildren(coordinates)) turnOn("toggleCoordinates");
       if (isVisible(compass) && hasChild(compass, "use")) turnOn("toggleCompass");
       if (hasChildren(rivers)) turnOn("toggleRivers");
-      if (isVisible(terrain) && hasChildren(terrain)) turnOn("toggleRelief");
+      if (isVisible(terrain) && hasChildren(terrain)) {
+        turnOn("toggleRelief");
+      }
+      // Migrate any legacy SVG <use> elements to canvas rendering
+      // (runs regardless of visibility to handle maps loaded with relief layer off)
+      if (typeof migrateReliefFromSvg === "function") migrateReliefFromSvg();
       if (hasChildren(relig)) turnOn("toggleReligions");
       if (hasChildren(cults)) turnOn("toggleCultures");
       if (hasChildren(statesBody)) turnOn("toggleStates");