feat: searoutes fix, changing reGraph

main.js

@@ -1169,15 +1169,26 @@ function reGraph() {
   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
+    const isOnBorder = gridCells.b[i];
-    if (type === -2 && (i % 4 === 0 || features[gridCells.f[i]].type === "lake")) continue; // exclude non-coastal lake points
-    const [x, y] = points[i];
 
+    // exclude most of ocean points
+    if (height < 20) {
+      const isLake = features[gridCells.f[i]].type === "lake";
+      if (isLake && type !== -1) continue;
+
+      if (type === 0) continue;
+      if (type < -4 && !each(24)(i)) continue;
+      if (type === -4 && !each(12)(i)) continue;
+      if (type === -3 && !each(6)(i)) continue;
+      if (type === -2 && !each(3)(i)) continue;
+    }
+
+    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
+      if (isOnBorder) continue; // not for near-border cells
       gridCells.c[i].forEach(function (e) {
         if (i > e) return;
         if (gridCells.t[e] === type) {
@@ -1402,8 +1413,8 @@ function reMarkFeatures() {
     queue[0] = cells.f.findIndex(f => !f); // find unmarked cell
   }
 
-  // markupPackLand
+  markup(pack.cells, 3, 1, 0); // markupPackLand
-  markup(pack.cells, 3, 1, 0);
+  markup(pack.cells, -2, -1, -10); // markupPackWater
 
   function defineHaven(i) {
     const water = cells.c[i].filter(c => cells.h[c] < 20);

modules/dynamic/editors/states-editor.js

@@ -966,7 +966,7 @@ function dragStateBrush() {
     const p = d3.mouse(this);
     moveCircle(p[0], p[1], r);
 
-    const found = r > 5 ? findAll(p[0], p[1], r) : [findCell(p[0], p[1], r)];
+    const found = r > 5 ? findAll(p[0], p[1], r) : [findCell(p[0], p[1])];
     const selection = found.filter(isLand);
     if (selection) changeStateForSelection(selection);
   });

modules/routes-generator.js

@@ -7,7 +7,6 @@ window.Routes = (function () {
 
   function generate() {
     const {cells, burgs} = pack;
-
     const cellRoutes = new Uint8Array(cells.h.length);
 
     const {capitalsByFeature, burgsByFeature, portsByFeature} = sortBurgsByFeature(burgs);
@@ -53,7 +52,7 @@ window.Routes = (function () {
           const start = featureCapitals[fromId].cell;
           const exit = featureCapitals[toId].cell;
 
-          const segments = findPathSegments({isWater: false, cellRoutes, connections, start, exit});
+          const segments = findPathSegments({isWater: false, connections, start, exit});
           for (const segment of segments) {
             addConnections(segment, ROUTES.MAIN_ROAD);
             mainRoads.push({feature: Number(key), cells: segment});
@@ -67,7 +66,6 @@ window.Routes = (function () {
 
     function generateTrails() {
       TIME && console.time("generateTrails");
-
       const trails = [];
 
       for (const [key, featureBurgs] of Object.entries(burgsByFeature)) {
@@ -77,7 +75,7 @@ window.Routes = (function () {
           const start = featureBurgs[fromId].cell;
           const exit = featureBurgs[toId].cell;
 
-          const segments = findPathSegments({isWater: false, cellRoutes, connections, start, exit});
+          const segments = findPathSegments({isWater: false, connections, start, exit});
           for (const segment of segments) {
             addConnections(segment, ROUTES.TRAIL);
             trails.push({feature: Number(key), cells: segment});
@@ -90,39 +88,43 @@ window.Routes = (function () {
     }
 
     function generateSeaRoutes() {
-      TIME && console.time("generateSearoutes");
+      TIME && console.time("generateSeaRoutes");
-      const mainRoads = [];
+      const seaRoutes = [];
 
-      for (const [key, featurePorts] of Object.entries(portsByFeature)) {
+      for (const [featureId, featurePorts] of Object.entries(portsByFeature)) {
         const points = featurePorts.map(burg => [burg.x, burg.y]);
         const urquhartEdges = calculateUrquhartEdges(points);
+        console.log(urquhartEdges);
         urquhartEdges.forEach(([fromId, toId]) => {
           const start = featurePorts[fromId].cell;
           const exit = featurePorts[toId].cell;
 
-          const segments = findPathSegments({isWater: true, cellRoutes, connections, start, exit});
+          const segments = findPathSegments({isWater: true, connections, start, exit});
           for (const segment of segments) {
             addConnections(segment, ROUTES.SEA_ROUTE);
-            mainRoads.push({feature: Number(key), cells: segment});
+            seaRoutes.push({feature: Number(featureId), cells: segment});
           }
         });
       }
 
-      TIME && console.timeEnd("generateSearoutes");
+      TIME && console.timeEnd("generateSeaRoutes");
-      return mainRoads;
+      return seaRoutes;
     }
 
-    function addConnections(segment, roadTypeId) {
+    function addConnections(segment, routeTypeId) {
       for (let i = 0; i < segment.length; i++) {
         const cellId = segment[i];
         const nextCellId = segment[i + 1];
-        if (nextCellId) connections.set(`${cellId}-${nextCellId}`, true);
+        if (nextCellId) {
-        if (!cellRoutes[cellId]) cellRoutes[cellId] = roadTypeId;
+          connections.set(`${cellId}-${nextCellId}`, true);
+          connections.set(`${nextCellId}-${cellId}`, true);
+        }
+        if (!cellRoutes[cellId]) cellRoutes[cellId] = routeTypeId;
       }
     }
 
-    function findPathSegments({isWater, cellRoutes, connections, start, exit}) {
+    function findPathSegments({isWater, connections, start, exit}) {
-      const from = findPath(isWater, cellRoutes, start, exit, connections);
+      const from = findPath(isWater, start, exit, connections);
       if (!from) return [];
 
       const pathCells = restorePath(start, exit, from);
@@ -149,7 +151,17 @@ window.Routes = (function () {
     }
   }
 
-  function findPath(isWater, cellRoutes, start, exit, connections) {
+  const MIN_PASSABLE_SEA_TEMP = -4;
+
+  const TYPE_MODIFIERS = {
+    "-1": 1, // coastline
+    "-2": 1.8, // sea
+    "-3": 3, // open sea
+    "-4": 5, // ocean
+    default: 8 // far ocean
+  };
+
+  function findPath(isWater, start, exit, connections) {
     const {temp} = grid.cells;
     const {cells} = pack;
 
@@ -174,11 +186,11 @@ window.Routes = (function () {
           const distanceCost = dist2(cells.p[next], cells.p[neibCellId]);
 
           const habitabilityModifier = 1 + Math.max(100 - habitability, 0) / 1000; // [1, 1.1];
-          const heightModifier = 1 + Math.max(cells.h[neibCellId] - 50, 0) / 50; // [1, 2];
+          const heightModifier = 1 + Math.max(cells.h[neibCellId] - 25, 25) / 25; // [1, 3];
-          const roadModifier = cellRoutes[neibCellId] ? 1 : 2;
+          const connectionModifier = connections.has(`${next}-${neibCellId}`) ? 1 : 3;
           const burgModifier = cells.burg[neibCellId] ? 1 : 2;
 
-          const cellsCost = distanceCost * habitabilityModifier * heightModifier * roadModifier * burgModifier;
+          const cellsCost = distanceCost * habitabilityModifier * heightModifier * connectionModifier * burgModifier;
           const totalCost = priority + cellsCost;
 
           if (from[neibCellId] || totalCost >= cost[neibCellId]) continue;
@@ -195,8 +207,6 @@ window.Routes = (function () {
     }
 
     function findWaterPath() {
-      const MIN_PASSABLE_TEMP = -4;
-
       while (queue.length) {
         const priority = queue.peekValue();
         const next = queue.pop();
@@ -208,15 +218,13 @@ window.Routes = (function () {
           }
 
           if (cells.h[neibCellId] >= 20) continue; // ignore land cells
-          if (temp[cells.g[neibCellId]] < MIN_PASSABLE_TEMP) continue; // ignore to cold cells
+          if (temp[cells.g[neibCellId]] < MIN_PASSABLE_SEA_TEMP) continue; // ignore too cold cells
 
           const distanceCost = dist2(cells.p[next], cells.p[neibCellId]);
-          const typeModifier = Math.abs(cells.t[neibCellId]); // 1 for coastline, 2 for deep ocean, 3 for deeper ocean
+          const typeModifier = TYPE_MODIFIERS[cells.t[neibCellId]] || TYPE_MODIFIERS.default;
-          const routeModifier = cellRoutes[neibCellId] ? 1 : 2;
+          const connectionModifier = connections.has(`${next}-${neibCellId}`) ? 1 : 2;
-          const connectionModifier =
-            connections.has(`${next}-${neibCellId}`) || connections.has(`${neibCellId}-${next}`) ? 1 : 3;
 
-          const cellsCost = distanceCost * typeModifier * routeModifier * connectionModifier;
+          const cellsCost = distanceCost * typeModifier * connectionModifier;
           const totalCost = priority + cellsCost;
 
           if (from[neibCellId] || totalCost >= cost[neibCellId]) continue;

modules/ui/biomes-editor.js

@@ -390,7 +390,7 @@ function editBiomes() {
       const p = d3.mouse(this);
       moveCircle(p[0], p[1], r);
 
-      const found = r > 5 ? findAll(p[0], p[1], r) : [findCell(p[0], p[1], r)];
+      const found = r > 5 ? findAll(p[0], p[1], r) : [findCell(p[0], p[1])];
       const selection = found.filter(isLand);
       if (selection) changeBiomeForSelection(selection);
     });

modules/ui/heightmap-editor.js

@@ -246,6 +246,7 @@ function editHeightmap(options) {
     Cultures.expand();
 
     BurgsAndStates.generate();
+    Routes.generate();
     Religions.generate();
     BurgsAndStates.defineStateForms();
     BurgsAndStates.generateProvinces();

modules/ui/layers.js

@@ -1637,7 +1637,6 @@ function toggleRoutes(event) {
 function drawRoutes() {
   TIME && console.time("drawRoutes");
   const {cells, burgs} = pack;
-  const lineGen = d3.line();
 
   const SHARP_ANGLE = 135;
   const VERY_SHARP_ANGLE = 115;
@@ -1645,10 +1644,11 @@ function drawRoutes() {
   const points = adjustBurgPoints(); // mutable array of points
   const routePaths = {};
 
-  const lineGenMap = {
+  const lineGen = d3.line();
+  const curves = {
     roads: d3.curveCatmullRom.alpha(0.1),
     trails: d3.curveCatmullRom.alpha(0.1),
-    searoutes: d3.curveBasis,
+    searoutes: d3.curveCatmullRom.alpha(0.5),
     default: d3.curveCatmullRom.alpha(0.1)
   };
 
@@ -1656,7 +1656,24 @@ function drawRoutes() {
     if (group !== "searoutes") straightenPathAngles(cells); // mutates points
     const pathPoints = getPathPoints(cells);
 
-    lineGen.curve(lineGenMap[group] || lineGenMap.default);
+    // TODO: temporary view for searoutes
+    if (group === "searoutes2") {
+      const pathPoints = cells.map(cellId => points[cellId]);
+      const color = getMixedColor("#000000", 0.6);
+      const line = "M" + pathPoints.join("L");
+      pathPoints.forEach(([x, y]) =>
+        debug.append("circle").attr("r", 0.7).attr("cx", x).attr("cy", y).attr("fill", color)
+      );
+      if (!routePaths[group]) routePaths[group] = [];
+      routePaths[group].push(`<path id="route${i}" d="${line}" stroke=${color} />`);
+
+      lineGen.curve(curves[group] || curves.default);
+      const path = round(lineGen(pathPoints), 1);
+      routePaths[group].push(`<path id="route${i}" d="${path}" stroke-width="0.15"/> `);
+      continue;
+    }
+
+    lineGen.curve(curves[group] || curves.default);
     const path = round(lineGen(pathPoints), 1);
 
     if (!routePaths[group]) routePaths[group] = [];

modules/ui/provinces-editor.js

@@ -886,7 +886,7 @@ function editProvinces() {
       const p = d3.mouse(this);
       moveCircle(p[0], p[1], r);
 
-      const found = r > 5 ? findAll(p[0], p[1], r) : [findCell(p[0], p[1], r)];
+      const found = r > 5 ? findAll(p[0], p[1], r) : [findCell(p[0], p[1])];
       const selection = found.filter(isLand);
       if (selection) changeForSelection(selection);
     });

modules/ui/zones-editor.js

@@ -61,7 +61,8 @@ function editZones() {
     const filterSelect = document.getElementById("zonesFilterType");
     const typeToFilterBy = types.includes(zonesFilterType.value) ? zonesFilterType.value : "all";
 
-    filterSelect.innerHTML = "<option value='all'>all</option>" + types.map(type => `<option value="${type}">${type}</option>`).join("");
+    filterSelect.innerHTML =
+      "<option value='all'>all</option>" + types.map(type => `<option value="${type}">${type}</option>`).join("");
     filterSelect.value = typeToFilterBy;
   }
 
@@ -80,9 +81,12 @@ function editZones() {
       const fill = zoneEl.getAttribute("fill");
       const area = getArea(d3.sum(c.map(i => pack.cells.area[i])));
       const rural = d3.sum(c.map(i => pack.cells.pop[i])) * populationRate;
-      const urban = d3.sum(c.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization;
+      const urban =
+        d3.sum(c.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization;
       const population = rural + urban;
-      const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}. Click to change`;
+      const populationTip = `Total population: ${si(population)}; Rural population: ${si(
+        rural
+      )}; Urban population: ${si(urban)}. Click to change`;
       const inactive = zoneEl.style.display === "none";
       const focused = defs.select("#fog #focus" + zoneEl.id).size();
 
@@ -98,8 +102,12 @@ function editZones() {
         <span data-tip="${populationTip}" class="icon-male hide"></span>
         <div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
         <span data-tip="Drag to raise or lower the zone" class="icon-resize-vertical hide"></span>
-        <span data-tip="Toggle zone focus" class="icon-pin ${focused ? "" : " inactive"} hide ${c.length ? "" : " placeholder"}"></span>
+        <span data-tip="Toggle zone focus" class="icon-pin ${focused ? "" : " inactive"} hide ${
-        <span data-tip="Toggle zone visibility" class="icon-eye ${inactive ? " inactive" : ""} hide ${c.length ? "" : " placeholder"}"></span>
+        c.length ? "" : " placeholder"
+      }"></span>
+        <span data-tip="Toggle zone visibility" class="icon-eye ${inactive ? " inactive" : ""} hide ${
+        c.length ? "" : " placeholder"
+      }"></span>
         <span data-tip="Remove zone" class="icon-trash-empty hide"></span>
       </div>`;
     });
@@ -109,7 +117,9 @@ function editZones() {
     // update footer
     const totalArea = getArea(graphWidth * graphHeight);
     zonesFooterArea.dataset.area = totalArea;
-    const totalPop = (d3.sum(pack.cells.pop) + d3.sum(pack.burgs.filter(b => !b.removed).map(b => b.population)) * urbanization) * populationRate;
+    const totalPop =
+      (d3.sum(pack.cells.pop) + d3.sum(pack.burgs.filter(b => !b.removed).map(b => b.population)) * urbanization) *
+      populationRate;
     zonesFooterPopulation.dataset.population = totalPop;
     zonesFooterNumber.innerHTML = /* html */ `${filteredZones.length} of ${zones.length}`;
     zonesFooterCells.innerHTML = pack.cells.i.length;
@@ -150,7 +160,13 @@ function editZones() {
     zonesEditorAddLines();
   }
 
-  $(body).sortable({items: "div.states", handle: ".icon-resize-vertical", containment: "parent", axis: "y", update: movezone});
+  $(body).sortable({
+    items: "div.states",
+    handle: ".icon-resize-vertical",
+    containment: "parent",
+    axis: "y",
+    update: movezone
+  });
   function movezone(ev, ui) {
     const zone = $("#" + ui.item.attr("data-id"));
     const prev = $("#" + ui.item.prev().attr("data-id"));
@@ -174,7 +190,11 @@ function editZones() {
     $("#zonesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
 
     tip("Click to select a zone, drag to paint a zone", true);
-    viewbox.style("cursor", "crosshair").on("click", selectZoneOnMapClick).call(d3.drag().on("start", dragZoneBrush)).on("touchmove mousemove", moveZoneBrush);
+    viewbox
+      .style("cursor", "crosshair")
+      .on("click", selectZoneOnMapClick)
+      .call(d3.drag().on("start", dragZoneBrush))
+      .on("touchmove mousemove", moveZoneBrush);
 
     body.querySelector("div").classList.add("selected");
     zones.selectAll("g").each(function () {
@@ -202,7 +222,7 @@ function editZones() {
       const p = d3.mouse(this);
       moveCircle(p[0], p[1], r);
 
-      const selection = r > 5 ? findAll(p[0], p[1], r) : [findCell(p[0], p[1], r)];
+      const selection = r > 5 ? findAll(p[0], p[1], r) : [findCell(p[0], p[1])];
       if (!selection) return;
 
       const selected = body.querySelector("div.selected");
@@ -285,7 +305,8 @@ function editZones() {
     zonesEditor.querySelectorAll(".hide:not(.show)").forEach(el => el.classList.remove("hidden"));
     zonesFooter.style.display = "block";
     body.querySelectorAll("div > input, select, svg").forEach(e => (e.style.pointerEvents = "all"));
-    if (!close) $("#zonesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
+    if (!close)
+      $("#zonesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}});
 
     restoreDefaultEvents();
     clearMainTip();
@@ -356,7 +377,8 @@ function editZones() {
       body.querySelectorAll(":scope > div").forEach(function (el) {
         el.querySelector(".stateCells").innerHTML = rn((+el.dataset.cells / totalCells) * 100, 2) + "%";
         el.querySelector(".biomeArea").innerHTML = rn((+el.dataset.area / totalArea) * 100, 2) + "%";
-        el.querySelector(".culturePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100, 2) + "%";
+        el.querySelector(".culturePopulation").innerHTML =
+          rn((+el.dataset.population / totalPopulation) * 100, 2) + "%";
       });
     } else {
       body.dataset.type = "absolute";
@@ -369,7 +391,13 @@ function editZones() {
     const description = "Unknown zone";
     const type = "Unknown";
     const fill = "url(#hatch" + (id.slice(4) % 42) + ")";
-    zones.append("g").attr("id", id).attr("data-description", description).attr("data-type", type).attr("data-cells", "").attr("fill", fill);
+    zones
+      .append("g")
+      .attr("id", id)
+      .attr("data-description", description)
+      .attr("data-type", type)
+      .attr("data-cells", "")
+      .attr("fill", fill);
 
     zonesEditorAddLines();
   }
@@ -411,13 +439,19 @@ function editZones() {
     const burgs = pack.burgs.filter(b => !b.removed && cells.includes(b.cell));
 
     const rural = rn(d3.sum(cells.map(i => pack.cells.pop[i])) * populationRate);
-    const urban = rn(d3.sum(cells.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization);
+    const urban = rn(
+      d3.sum(cells.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization
+    );
     const total = rural + urban;
     const l = n => Number(n).toLocaleString();
 
     alertMessage.innerHTML = /* html */ `Rural: <input type="number" min="0" step="1" id="ruralPop" value=${rural} style="width:6em" /> Urban:
-      <input type="number" min="0" step="1" id="urbanPop" value=${urban} style="width:6em" ${burgs.length ? "" : "disabled"} />
+      <input type="number" min="0" step="1" id="urbanPop" value=${urban} style="width:6em" ${
-      <p>Total population: ${l(total)} ⇒ <span id="totalPop">${l(total)}</span> (<span id="totalPopPerc">100</span>%)</p>`;
+      burgs.length ? "" : "disabled"
+    } />
+      <p>Total population: ${l(total)} ⇒ <span id="totalPop">${l(
+      total
+    )}</span> (<span id="totalPopPerc">100</span>%)</p>`;
 
     const update = function () {
       const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;