Merge branch 'master' of https://github.com/Azgaar/Fantasy-Map-Generator into burg-groups

modules/renderers/draw-burg-labels.js

@@ -19,6 +19,7 @@ function drawBurgLabels() {
       .data(burgsInGroup)
       .enter()
       .append("text")
+      .attr("text-rendering", "optimizeSpeed")
       .attr("id", d => "burgLabel" + d.i)
       .attr("data-id", d => d.i)
       .attr("x", d => d.x)
@@ -38,6 +39,7 @@ function drawBurgLabel(burg) {
 
   group
     .append("text")
+    .attr("text-rendering", "optimizeSpeed")
     .attr("id", "burgLabel" + burg.i)
     .attr("data-id", burg.i)
     .attr("x", burg.x)

modules/renderers/draw-features.js

@@ -2,55 +2,60 @@
 
 function drawFeatures() {
   TIME && console.time("drawFeatures");
-  const featurePaths = defs.select("#featurePaths");
-  const landMask = defs.select("#land");
-  const waterMask = defs.select("#water");
+
+  const html = {
+    paths: [],
+    landMask: [],
+    waterMask: ['<rect x="0" y="0" width="100%" height="100%" fill="white" />'],
+    coastline: {},
+    lakes: {}
+  };
 
   for (const feature of pack.features) {
     if (!feature || feature.type === "ocean") continue;
 
-    featurePaths
-      .append("path")
-      .attr("d", getFeaturePath(feature))
-      .attr("id", "feature_" + feature.i)
-      .attr("data-f", feature.i);
+    html.paths.push(`<path d="${getFeaturePath(feature)}" id="feature_${feature.i}" data-f="${feature.i}"></path>`);
 
     if (feature.type === "lake") {
-      landMask
-        .append("use")
-        .attr("href", "#feature_" + feature.i)
-        .attr("data-f", feature.i)
-        .attr("fill", "black");
-      lakes
-        .select(`#${feature.group}`)
-        .append("use")
-        .attr("href", "#feature_" + feature.i)
-        .attr("data-f", feature.i);
+      html.landMask.push(`<use href="#feature_${feature.i}" data-f="${feature.i}" fill="black"></use>`);
+
+      const lakeGroup = feature.group || "freshwater";
+      if (!html.lakes[lakeGroup]) html.lakes[lakeGroup] = [];
+      html.lakes[lakeGroup].push(`<use href="#feature_${feature.i}" data-f="${feature.i}"></use>`);
     } else {
-      landMask
-        .append("use")
-        .attr("href", "#feature_" + feature.i)
-        .attr("data-f", feature.i)
-        .attr("fill", "white");
-      waterMask
-        .append("use")
-        .attr("href", "#feature_" + feature.i)
-        .attr("data-f", feature.i)
-        .attr("fill", "black");
-      const coastlineGroup = feature.group === "lake_island" ? "#lake_island" : "#sea_island";
-      coastline
-        .select(coastlineGroup)
-        .append("use")
-        .attr("href", "#feature_" + feature.i)
-        .attr("data-f", feature.i);
+      html.landMask.push(`<use href="#feature_${feature.i}" data-f="${feature.i}" fill="white"></use>`);
+      html.waterMask.push(`<use href="#feature_${feature.i}" data-f="${feature.i}" fill="black"></use>`);
+
+      const coastlineGroup = feature.group === "lake_island" ? "lake_island" : "sea_island";
+      if (!html.coastline[coastlineGroup]) html.coastline[coastlineGroup] = [];
+      html.coastline[coastlineGroup].push(`<use href="#feature_${feature.i}" data-f="${feature.i}"></use>`);
     }
   }
 
+  defs.select("#featurePaths").html(html.paths.join(""));
+  defs.select("#land").html(html.landMask.join(""));
+  defs.select("#water").html(html.waterMask.join(""));
+
+  coastline.selectAll("g").each(function () {
+    const paths = html.coastline[this.id] || [];
+    d3.select(this).html(paths.join(""));
+  });
+
+  lakes.selectAll("g").each(function () {
+    const paths = html.lakes[this.id] || [];
+    d3.select(this).html(paths.join(""));
+  });
+
   TIME && console.timeEnd("drawFeatures");
 }
 
 function getFeaturePath(feature) {
   const points = feature.vertices.map(vertex => pack.vertices.p[vertex]);
+  if (points.some(point => point === undefined)) {
+    ERROR && console.error("Undefined point in getFeaturePath");
+    return "";
+  }
+
   const simplifiedPoints = simplify(points, 0.3);
   const clippedPoints = clipPoly(simplifiedPoints, 1);
 

modules/renderers/draw-markers.js

@@ -42,9 +42,12 @@ function drawMarker(marker, rescale = 1) {
   const viewX = rn(x - zoomSize / 2, 1);
   const viewY = rn(y - zoomSize, 1);
 
+  const isExternal = icon.startsWith("http") || icon.startsWith("data:image");
+
   return /* html */ `
     <svg id="${id}" viewbox="0 0 30 30" width="${zoomSize}" height="${zoomSize}" x="${viewX}" y="${viewY}">
       <g>${getPin(pin, fill, stroke)}</g>
-      <text x="${dx}%" y="${dy}%" font-size="${px}px" >${icon}</text>
+      <text x="${dx}%" y="${dy}%" font-size="${px}px" >${isExternal ? "" : icon}</text>
+      <image x="${dx / 2}%" y="${dy / 2}%" width="${px}px" height="${px}px" href="${isExternal ? icon : ""}" />
     </svg>`;
 }

modules/renderers/draw-military.js

@@ -43,6 +43,7 @@ const drawRegiments = function (regiments, s) {
   g.append("text")
     .attr("x", d => d.x)
     .attr("y", d => d.y)
+    .attr("text-rendering", "optimizeSpeed")
     .text(d => Military.getTotal(d));
   g.append("rect")
     .attr("fill", "currentColor")
@@ -52,9 +53,17 @@ const drawRegiments = function (regiments, s) {
     .attr("height", h);
   g.append("text")
     .attr("class", "regimentIcon")
+    .attr("text-rendering", "optimizeSpeed")
     .attr("x", d => x(d) - size)
     .attr("y", d => d.y)
-    .text(d => d.icon);
+    .text(d => (d.icon.startsWith("http") || d.icon.startsWith("data:image") ? "" : d.icon));
+  g.append("image")
+    .attr("class", "regimentImage")
+    .attr("x", d => x(d) - h)
+    .attr("y", d => y(d))
+    .attr("height", h)
+    .attr("width", h)
+    .attr("href", d => (d.icon.startsWith("http") || d.icon.startsWith("data:image") ? d.icon : ""));
 };
 
 const drawRegiment = function (reg, stateId) {
@@ -84,7 +93,11 @@ const drawRegiment = function (reg, stateId) {
     .attr("transform", `rotate(${reg.angle || 0})`)
     .attr("transform-origin", `${reg.x}px ${reg.y}px`);
   g.append("rect").attr("x", x1).attr("y", y1).attr("width", w).attr("height", h);
-  g.append("text").attr("x", reg.x).attr("y", reg.y).text(Military.getTotal(reg));
+  g.append("text")
+    .attr("x", reg.x)
+    .attr("y", reg.y)
+    .attr("text-rendering", "optimizeSpeed")
+    .text(Military.getTotal(reg));
   g.append("rect")
     .attr("fill", "currentColor")
     .attr("x", x1 - h)
@@ -93,9 +106,17 @@ const drawRegiment = function (reg, stateId) {
     .attr("height", h);
   g.append("text")
     .attr("class", "regimentIcon")
+    .attr("text-rendering", "optimizeSpeed")
     .attr("x", x1 - size)
     .attr("y", reg.y)
-    .text(reg.icon);
+    .text(reg.icon.startsWith("http") || reg.icon.startsWith("data:image") ? "" : reg.icon);
+  g.append("image")
+    .attr("class", "regimentImage")
+    .attr("x", x1 - h)
+    .attr("y", y1)
+    .attr("height", h)
+    .attr("width", h)
+    .attr("href", reg.icon.startsWith("http") || reg.icon.startsWith("data:image") ? reg.icon : "");
 };
 
 // move one regiment to another
@@ -122,5 +143,13 @@ const moveRegiment = function (reg, x, y) {
   el.select(".regimentIcon")
     .transition(move)
     .attr("x", x1(x) - size)
-    .attr("y", y);
+    .attr("y", y)
+    .attr("height", "6")
+    .attr("width", "6");
+  el.select(".regimentImage")
+    .transition(move)
+    .attr("x", x1(x) - h)
+    .attr("y", y1(y))
+    .attr("height", "6")
+    .attr("width", "6");
 };

modules/renderers/draw-relief-icons.js

@@ -0,0 +1,124 @@
+"use strict";
+
+function drawReliefIcons() {
+  TIME && console.time("drawRelief");
+  terrain.selectAll("*").remove();
+
+  const cells = pack.cells;
+  const density = terrain.attr("density") || 0.4;
+  const size = 2 * (terrain.attr("size") || 1);
+  const mod = 0.2 * size; // size modifier
+  const relief = [];
+
+  for (const i of cells.i) {
+    const height = cells.h[i];
+    if (height < 20) continue; // no icons on water
+    if (cells.r[i]) continue; // no icons on rivers
+    const biome = cells.biome[i];
+    if (height < 50 && biomesData.iconsDensity[biome] === 0) continue; // no icons for this biome
+
+    const polygon = getPackPolygon(i);
+    const [minX, maxX] = d3.extent(polygon, p => p[0]);
+    const [minY, maxY] = d3.extent(polygon, p => p[1]);
+
+    if (height < 50) placeBiomeIcons(i, biome);
+    else placeReliefIcons(i);
+
+    function placeBiomeIcons() {
+      const iconsDensity = biomesData.iconsDensity[biome] / 100;
+      const radius = 2 / iconsDensity / density;
+      if (Math.random() > iconsDensity * 10) return;
+
+      for (const [cx, cy] of poissonDiscSampler(minX, minY, maxX, maxY, radius)) {
+        if (!d3.polygonContains(polygon, [cx, cy])) continue;
+        let h = (4 + Math.random()) * size;
+        const icon = getBiomeIcon(i, biomesData.icons[biome]);
+        if (icon === "#relief-grass-1") h *= 1.2;
+        relief.push({i: icon, x: rn(cx - h, 2), y: rn(cy - h, 2), s: rn(h * 2, 2)});
+      }
+    }
+
+    function placeReliefIcons(i) {
+      const radius = 2 / density;
+      const [icon, h] = getReliefIcon(i, height);
+
+      for (const [cx, cy] of poissonDiscSampler(minX, minY, maxX, maxY, radius)) {
+        if (!d3.polygonContains(polygon, [cx, cy])) continue;
+        relief.push({i: icon, x: rn(cx - h, 2), y: rn(cy - h, 2), s: rn(h * 2, 2)});
+      }
+    }
+
+    function getReliefIcon(i, h) {
+      const temp = grid.cells.temp[pack.cells.g[i]];
+      const type = h > 70 && temp < 0 ? "mountSnow" : h > 70 ? "mount" : "hill";
+      const size = h > 70 ? (h - 45) * mod : minmax((h - 40) * mod, 3, 6);
+      return [getIcon(type), size];
+    }
+  }
+
+  // sort relief icons by y+size
+  relief.sort((a, b) => a.y + a.s - (b.y + b.s));
+
+  const reliefHTML = new Array(relief.length);
+  for (const r of relief) {
+    reliefHTML.push(`<use href="${r.i}" x="${r.x}" y="${r.y}" width="${r.s}" height="${r.s}"/>`);
+  }
+  terrain.html(reliefHTML.join(""));
+
+  TIME && console.timeEnd("drawRelief");
+
+  function getBiomeIcon(i, b) {
+    let type = b[Math.floor(Math.random() * b.length)];
+    const temp = grid.cells.temp[pack.cells.g[i]];
+    if (type === "conifer" && temp < 0) type = "coniferSnow";
+    return getIcon(type);
+  }
+
+  function getVariant(type) {
+    switch (type) {
+      case "mount":
+        return rand(2, 7);
+      case "mountSnow":
+        return rand(1, 6);
+      case "hill":
+        return rand(2, 5);
+      case "conifer":
+        return 2;
+      case "coniferSnow":
+        return 1;
+      case "swamp":
+        return rand(2, 3);
+      case "cactus":
+        return rand(1, 3);
+      case "deadTree":
+        return rand(1, 2);
+      default:
+        return 2;
+    }
+  }
+
+  function getOldIcon(type) {
+    switch (type) {
+      case "mountSnow":
+        return "mount";
+      case "vulcan":
+        return "mount";
+      case "coniferSnow":
+        return "conifer";
+      case "cactus":
+        return "dune";
+      case "deadTree":
+        return "dune";
+      default:
+        return type;
+    }
+  }
+
+  function getIcon(type) {
+    const set = terrain.attr("set") || "simple";
+    if (set === "simple") return "#relief-" + getOldIcon(type) + "-1";
+    if (set === "colored") return "#relief-" + type + "-" + getVariant(type);
+    if (set === "gray") return "#relief-" + type + "-" + getVariant(type) + "-bw";
+    return "#relief-" + getOldIcon(type) + "-1"; // simple
+  }
+}

modules/renderers/draw-scalebar.js

@@ -43,6 +43,7 @@ function drawScaleBar(scaleBar, scaleLevel) {
     .data(d3.range(0, 6))
     .enter()
     .append("text")
+    .attr("text-rendering", "optimizeSpeed")
     .attr("x", d => rn((d * length) / 5, 2))
     .attr("y", 0)
     .attr("dy", "-.6em")
@@ -52,6 +53,7 @@ function drawScaleBar(scaleBar, scaleLevel) {
   if (label) {
     texts
       .append("text")
+      .attr("text-rendering", "optimizeSpeed")
       .attr("x", (length + 1) / 2)
       .attr("dy", ".6em")
       .attr("dominant-baseline", "text-before-edge")

modules/renderers/draw-state-labels.js

@@ -106,6 +106,7 @@ function drawStateLabels(list) {
 
       const textElement = textGroup
         .append("text")
+        .attr("text-rendering", "optimizeSpeed")
         .attr("id", "stateLabel" + stateId)
         .append("textPath")
         .attr("startOffset", "50%")