Add campaign data: Journey

package.json

@@ -48,4 +48,4 @@
   "engines": {
     "node": ">=24.0.0"
   }
-}
+}

playwright.config.ts

@@ -3,17 +3,34 @@ import { defineConfig, devices } from '@playwright/test'
 const isCI = !!process.env.CI
 const skipBuild = !!process.env.SKIP_BUILD
 
+/** Dedicated port avoids reuseExistingServer attaching to another project on the default Vite port. */
+const devPort = process.env.PLAYWRIGHT_DEV_PORT ?? '5199'
+const devOrigin = `http://127.0.0.1:${devPort}`
+const previewOrigin = 'http://127.0.0.1:4173'
+/** Matches vite.config.ts base (NETLIFY uses '/' for deploy previews). */
+const appPath = process.env.NETLIFY ? '' : '/Fantasy-Map-Generator'
+/** Trailing slash required so relative navigations resolve under the app path. */
+const baseURL = appPath
+  ? `${isCI ? previewOrigin : devOrigin}${appPath}/`
+  : `${isCI ? previewOrigin : devOrigin}/`
+
 export default defineConfig({
   testDir: './tests/e2e',
   fullyParallel: true,
   forbidOnly: isCI,
   retries: 0,
   workers: isCI ? 2 : undefined,
   reporter: 'html',
+  expect: {
+    toHaveScreenshot: {
+      maxDiffPixels: 15000,
+      threshold: 0.25,
+    },
+  },
   // Use OS-independent snapshot names (HTML content is the same across platforms)
   snapshotPathTemplate: '{testDir}/{testFileDir}/{testFileName}-snapshots/{arg}{ext}',
   use: {
-    baseURL: isCI ? 'http://localhost:4173' : 'http://localhost:5173',
+    baseURL,
     trace: 'on-first-retry',
     // Fixed viewport to ensure consistent map rendering
     viewport: { width: 1280, height: 720 },
@@ -27,8 +44,12 @@ export default defineConfig({
   webServer: {
     // In CI: build (done as a separate cached step) and preview for production-like testing
     // In dev: use vite dev server (faster, no rebuild needed)
-    command: isCI ? (skipBuild ? 'npm run preview' : 'npm run build && npm run preview') : 'npm run dev',
-    url: isCI ? 'http://localhost:4173' : 'http://localhost:5173',
+    command: isCI
+      ? skipBuild
+        ? 'npm run preview -- --host 127.0.0.1'
+        : 'npm run build && npm run preview -- --host 127.0.0.1'
+      : `npm run dev -- --host 127.0.0.1 --port ${devPort}`,
+    url: baseURL,
     reuseExistingServer: !isCI,
     timeout: 120000,
   },

public/main.js

@@ -61,6 +61,7 @@ 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 journeys = viewbox.append("g").attr("id", "journeys").style("display", "none");
 let routes = viewbox.append("g").attr("id", "routes");
 let roads = routes.append("g").attr("id", "roads");
 let trails = routes.append("g").attr("id", "trails");
@@ -568,6 +569,9 @@ function invokeActiveZooming() {
     const size = rn((10 / scale ** 0.3) * 2, 2);
     ruler.selectAll("text").attr("font-size", size);
   }
+
+  // journey layer: screen-constant sizing + LOD on tier change
+  if (layerIsOn("toggleJourney")) syncJourneyZoom(scale);
 }
 
 // add drag to upload logic, pull request from @evyatron
@@ -634,6 +638,7 @@ async function generate(options) {
     else delete grid.cells.h;
     grid.cells.h = await HeightmapGenerator.generate(grid);
     pack = {}; // reset pack
+    pack.journey = {stops: []};
 
     Features.markupGrid();
     addLakesInDeepDepressions();

public/modules/io/load.js

@@ -164,11 +164,10 @@ async function parseLoadedResult(result) {
     const isDelimited = resultAsString.substring(0, 10).includes("|");
     let content = isDelimited ? resultAsString : decodeURIComponent(atob(resultAsString));
 
-    // fix if svg part has CRLF line endings instead of LF
-    const svgMatch = content.match(/<svg[^>]*id="map"[\s\S]*?<\/svg>/);
-    const svgContent = svgMatch[0];
-    const hasCrlfEndings = svgContent.includes("\r\n");
-    if (hasCrlfEndings) {
+    // fix if svg part has CRLF line endings instead of LF (some exports / old saves differ)
+    const svgMatch = content.match(/<svg[^>]*id="map"[\s\S]*?<\/svg>/i);
+    const svgContent = svgMatch?.[0];
+    if (svgContent?.includes("\r\n")) {
       const correctedSvgContent = svgContent.replace(/\r\n/g, "\n");
       content = content.replace(svgContent, correctedSvgContent);
     }
@@ -357,6 +356,7 @@ async function parseLoadedData(data, mapVersion) {
       anchors = icons.select("#anchors");
       armies = viewbox.select("#armies");
       markers = viewbox.select("#markers");
+      journeys = viewbox.select("#journeys");
       ruler = viewbox.select("#ruler");
       fogging = viewbox.select("#fogging");
       debug = viewbox.select("#debug");
@@ -371,6 +371,9 @@ async function parseLoadedData(data, mapVersion) {
       if (!emblems.size()) {
         emblems = viewbox.insert("g", "#labels").attr("id", "emblems").style("display", "none");
       }
+      if (!journeys.size()) {
+        journeys = viewbox.insert("g", "#ruler").attr("id", "journeys").style("display", "none");
+      }
     }
 
     {
@@ -413,6 +416,25 @@ async function parseLoadedData(data, mapVersion) {
       // data[28] had deprecated cells.crossroad
       pack.cells.routes = data[36] ? JSON.parse(data[36]) : {};
       pack.ice = data[39] ? JSON.parse(data[39]) : [];
+      {
+        let parsedJourney = null;
+        if (data[40]) {
+          try {
+            parsedJourney = JSON.parse(data[40]);
+          } catch {
+            parsedJourney = null;
+          }
+        }
+        const j =
+          parsedJourney &&
+          typeof parsedJourney === "object" &&
+          parsedJourney !== null &&
+          !Array.isArray(parsedJourney)
+            ? parsedJourney
+            : {stops: []};
+        pack.journey = j;
+        if (window.JourneyPack) window.JourneyPack.normalizePackJourney(pack.journey, pack);
+      }
 
       if (data[31]) {
         const namesDL = data[31].split("/");
@@ -464,6 +486,8 @@ async function parseLoadedData(data, mapVersion) {
       if (isVisible(icons)) turnOn("toggleBurgIcons");
       if (hasChildren(armies) && isVisible(armies)) turnOn("toggleMilitary");
       if (hasChild(markers, "svg")) turnOn("toggleMarkers");
+      if (isVisible(journeys) && (hasChild(journeys, "path") || hasChild(journeys, "circle")))
+        turnOn("toggleJourney");
       if (isVisible(ruler)) turnOn("toggleRulers");
       if (isVisible(scaleBar)) turnOn("toggleScaleBar");
       if (isVisibleNode(ensureEl("vignette"))) turnOn("toggleVignette");
@@ -735,6 +759,7 @@ async function parseLoadedData(data, mapVersion) {
       // draw data layers (not kept in svg)
       if (rulers && layerIsOn("toggleRulers")) rulers.draw();
       if (layerIsOn("toggleGrid")) drawGrid();
+      if (layerIsOn("toggleJourney")) drawJourney();
     }
 
     {

public/modules/io/save.js

@@ -103,6 +103,7 @@ function prepareMapData() {
   const routes = JSON.stringify(pack.routes);
   const zones = JSON.stringify(pack.zones);
   const ice = JSON.stringify(pack.ice);
+  const journey = JSON.stringify(pack.journey || {stops: []});
 
   // store name array only if not the same as default
   const defaultNB = Names.getNameBases();
@@ -157,7 +158,8 @@ function prepareMapData() {
     cellRoutes,
     routes,
     zones,
-    ice
+    ice,
+    journey
   ].join("\r\n");
   return mapData;
 }

public/modules/ui/general.js

@@ -55,7 +55,8 @@ function showDataTip(event) {
   if (!event.target) return;
 
   let dataTip = event.target.dataset.tip;
-  if (!dataTip && event.target.parentNode.dataset.tip) dataTip = event.target.parentNode.dataset.tip;
+  if (!dataTip && event.target.parentNode?.dataset?.tip)
+    dataTip = event.target.parentNode.dataset.tip;
   if (!dataTip) return;
 
   const shortcut = event.target.dataset.shortcut;

public/modules/ui/hotkeys.js

@@ -55,6 +55,7 @@ function handleKeyup(event) {
   else if ((shift || altShift) && code === "KeyV") overviewRivers();
   else if ((shift || altShift) && code === "KeyM") overviewMilitary();
   else if ((shift || altShift) && code === "KeyK") overviewMarkers();
+  else if ((shift || altShift) && code === "KeyJ") editJourney();
   else if ((shift || altShift) && code === "KeyE") viewCellDetails();
   else if (key === "!") toggleAddBurg();
   else if (key === "@") toggleAddLabel();