signalk-chiplog 2.1.0 → 2.2.0

package/lib/landmark-finder.js

@@ -0,0 +1,209 @@
+const { cellBounds, nextPendingArea, saveArea } = require('./landmarks');
+
+// Fills the gazetteer of amers (SPEC §4.13) from OpenStreetMap, one area at a
+// time, on the same pattern as place names and the forecasts: `resolveNext()`
+// does at most one request and says when the next is due. Offline is the
+// normal state at sea, so a failure is retried patiently; an area already
+// fetched is never asked for again.
+
+const LANDMARK_DEFAULTS = {
+  landmarksEnabled: true,
+  overpassUrl: 'https://overpass-api.de/api/interpreter'
+};
+
+const METRES_PER_NM = 1852;
+
+// Overpass is a shared, often busy service: ask it for one area at a time and
+// leave room between requests.
+const QUERY_TIMEOUT_S = 60;
+const REQUEST_TIMEOUT_MS = 90 * 1000;
+const NEXT_FETCH_MS = 10 * 1000;
+const IDLE_MS = 5 * 60 * 1000;
+const FIRST_RETRY_MS = 5 * 60 * 1000;
+const MAX_RETRY_MS = 60 * 60 * 1000;
+
+// What counts as an amer, in OpenStreetMap's tags. Deliberately narrow: the
+// lateral and cardinal marks of a channel are named "6 c" or "L1" on the
+// chart, which says nothing in a logbook, so only the features a position is
+// traditionally read against are kept.
+const SEAMARK_TYPES = [
+  'light_major',
+  'light_minor',
+  'light_vessel',
+  'landmark',
+  'harbour',
+  'beacon_isolated_danger',
+  'beacon_safe_water'
+];
+
+function kindOf(tags) {
+  const seamark = tags['seamark:type'];
+  if (tags.man_made === 'lighthouse' || seamark === 'light_major' || seamark === 'light_vessel') {
+    return 'lighthouse';
+  }
+  if (seamark === 'light_minor') {
+    return 'light';
+  }
+  if (tags.natural === 'cape') {
+    return 'cape';
+  }
+  if (seamark === 'landmark') {
+    return 'landmark';
+  }
+  if (seamark === 'beacon_isolated_danger' || seamark === 'beacon_safe_water') {
+    return 'beacon';
+  }
+  if (seamark === 'harbour' || tags.leisure === 'marina') {
+    return 'harbour';
+  }
+  return null;
+}
+
+// A sectored light carries one range per sector ("seamark:light:2:range"); the
+// greatest is how far the light is seen at all.
+function lightRangeOf(tags) {
+  const ranges = Object.entries(tags)
+    .filter(([key]) => /^seamark:light(:\d+)?:range$/.test(key))
+    .map(([, value]) => Number.parseFloat(value))
+    .filter((range) => Number.isFinite(range) && range > 0);
+  return ranges.length === 0 ? null : Math.max(...ranges) * METRES_PER_NM;
+}
+
+// The name the crew would use: OpenStreetMap's own ("Phare du Cap-Ferret")
+// rather than the chart's abbreviation in `seamark:name` ("Cap Ferret").
+// A feature with neither is not an amer anyone can be told about.
+function landmarkFrom(element) {
+  const tags = element.tags ?? {};
+  const name = (tags.name ?? tags['seamark:name'] ?? '').trim();
+  const kind = kindOf(tags);
+  // Ways and relations -- a lighthouse drawn as a building, a harbour as an
+  // area -- are asked for with their centre.
+  const position = element.type === 'node' ? element : element.center;
+  if (name === '' || !kind || !position) {
+    return null;
+  }
+  return {
+    osmType: element.type,
+    osmId: element.id,
+    name,
+    kind,
+    lat: position.lat,
+    lon: position.lon,
+    lightRange: lightRangeOf(tags)
+  };
+}
+
+function parseElements(elements = []) {
+  return elements.map(landmarkFrom).filter(Boolean);
+}
+
+function overpassQuery({ south, west, north, east }) {
+  const box = `(${south.toFixed(4)},${west.toFixed(4)},${north.toFixed(4)},${east.toFixed(4)})`;
+  return [
+    `[out:json][timeout:${QUERY_TIMEOUT_S}];`,
+    '(',
+    `  nwr["man_made"="lighthouse"]${box};`,
+    `  nwr["seamark:type"~"^(${SEAMARK_TYPES.join('|')})$"]${box};`,
+    `  nwr["natural"="cape"]${box};`,
+    `  nwr["leisure"="marina"]${box};`,
+    ');',
+    'out tags center;'
+  ].join('\n');
+}
+
+function createLandmarkFinder({ db, settings, userAgent, fetch = globalThis.fetch }) {
+  const stopping = new AbortController();
+  let failures = 0;
+
+  // Overpass reports a busy dispatcher or a query timeout in the body, with
+  // HTTP 200 -- as an HTML page, or as a "remark" beside empty elements. Both
+  // mean "ask again later", not "there is nothing there".
+  async function lookup(cell) {
+    const response = await fetch(settings.overpassUrl, {
+      method: 'POST',
+      headers: {
+        'User-Agent': userAgent,
+        Accept: 'application/json',
+        'Content-Type': 'application/x-www-form-urlencoded'
+      },
+      body: new URLSearchParams({ data: overpassQuery(cellBounds(cell)) }).toString(),
+      signal: AbortSignal.any([stopping.signal, AbortSignal.timeout(REQUEST_TIMEOUT_MS)])
+    });
+    if (response.status === 429 || response.status === 504 || response.status >= 500) {
+      throw new Error(`Overpass answered HTTP ${response.status}`);
+    }
+    if (!response.ok) {
+      return null;
+    }
+    let result;
+    try {
+      result = await response.json();
+    } catch {
+      throw new Error('Overpass answered something other than JSON');
+    }
+    if (typeof result?.remark === 'string' && /error|timeout/i.test(result.remark)) {
+      throw new Error(`Overpass reported: ${result.remark}`);
+    }
+    return Array.isArray(result?.elements) ? result.elements : [];
+  }
+
+  return {
+    async resolveNext() {
+      if (!settings.landmarksEnabled) {
+        return { outcome: 'disabled', retryInMs: IDLE_MS };
+      }
+      const pending = nextPendingArea(db);
+      if (!pending) {
+        failures = 0;
+        return { outcome: 'idle', retryInMs: IDLE_MS };
+      }
+
+      let elements;
+      try {
+        elements = await lookup(pending.cell);
+      } catch (error) {
+        if (stopping.signal.aborted) {
+          return { outcome: 'stopped' };
+        }
+        failures += 1;
+        return {
+          outcome: 'failed',
+          error,
+          retryInMs: Math.min(FIRST_RETRY_MS * 2 ** (failures - 1), MAX_RETRY_MS)
+        };
+      }
+      if (stopping.signal.aborted) {
+        return { outcome: 'stopped' };
+      }
+      failures = 0;
+
+      // A refusal Overpass will not answer differently (a rejected query) is
+      // final for this area: record it as covered rather than blocking every
+      // other one behind it.
+      const landmarks = elements === null ? [] : parseElements(elements);
+      saveArea(db, pending.cell, landmarks, new Date().toISOString());
+      return {
+        outcome: elements === null ? 'refused' : 'fetched',
+        count: landmarks.length,
+        areasLeft: pending.remaining - 1,
+        // Whatever is left to cover waits for the next slot: Overpass is not a
+        // service to run through as fast as it will answer.
+        retryInMs: NEXT_FETCH_MS
+      };
+    },
+
+    stop() {
+      stopping.abort();
+    }
+  };
+}
+
+module.exports = {
+  createLandmarkFinder,
+  kindOf,
+  landmarkFrom,
+  lightRangeOf,
+  overpassQuery,
+  parseElements,
+  LANDMARK_DEFAULTS
+};

package/lib/landmarks.js

@@ -0,0 +1,210 @@
+const { withTransaction } = require('./database');
+
+// The gazetteer of amers (SPEC §4.13) and the bookkeeping of which areas it
+// covers. Reading a position against a landmark -- the bearing and distance a
+// logbook line shows -- happens in `public/js/landmarks.mjs`, shared with the
+// webapp and the PDF; this module only stores and hands out the landmarks.
+
+const METRES_PER_NM = 1852;
+const METRES_PER_DEGREE = 111320;
+
+// The widest range any kind of amer is named from, and so the margin a cell is
+// fetched with. Kept in step with the largest entry of KIND_RANGE_M in
+// public/js/landmarks.mjs, which a test checks.
+const MAX_RELEVANT_M = 15 * METRES_PER_NM;
+
+// Landmarks are fetched by half-degree cell -- about 30 nm of latitude, a
+// day's sailing across, so a coastal cruise costs a handful of requests.
+const CELL_DEGREES = 0.5;
+
+// SQLite's CAST truncates towards zero, which is not FLOOR for a negative
+// latitude or longitude; the offsets keep the value positive so it is. They
+// are wide enough for any coordinate (lat / 0.5 >= -180, lon / 0.5 >= -360).
+const LAT_OFFSET = 400;
+const LON_OFFSET = 800;
+
+function toRadians(degrees) {
+  return (degrees * Math.PI) / 180;
+}
+
+function toLandmark(row) {
+  return {
+    id: row.id,
+    name: row.name,
+    kind: row.kind,
+    position: { lat: row.lat, lon: row.lon },
+    lightRange: row.light_range,
+    osm: { type: row.osm_type, id: row.osm_id },
+    updatedAt: row.updated_at
+  };
+}
+
+// Every position a passage's journal shows a line for: its track, the readings
+// and events on it, and its departure and arrival.
+const POSITIONS = `
+  SELECT lat, lon FROM track_points WHERE entry_id = ?
+  UNION ALL
+  SELECT lat, lon FROM observations WHERE entry_id = ? AND lat IS NOT NULL
+  UNION ALL
+  SELECT lat, lon FROM events WHERE entry_id = ? AND lat IS NOT NULL
+  UNION ALL
+  SELECT start_lat, start_lon FROM log_entries WHERE id = ? AND start_lat IS NOT NULL
+  UNION ALL
+  SELECT end_lat, end_lon FROM log_entries WHERE id = ? AND end_lat IS NOT NULL
+`;
+
+function entryParams(entryId) {
+  return [entryId, entryId, entryId, entryId, entryId];
+}
+
+// The cells a passage has been in. Its bounding box would do for a coastal
+// hop, but a long passage's box covers cells it never came near -- each of
+// which would cost a request.
+function entryCells(db, entryId) {
+  return db
+    .prepare(
+      `SELECT DISTINCT
+         CAST(lat / ${CELL_DEGREES} + ${LAT_OFFSET} AS INTEGER) - ${LAT_OFFSET} AS cell_lat,
+         CAST(lon / ${CELL_DEGREES} + ${LON_OFFSET} AS INTEGER) - ${LON_OFFSET} AS cell_lon
+       FROM (${POSITIONS})
+       ORDER BY cell_lat, cell_lon`
+    )
+    .all(...entryParams(entryId))
+    .map((row) => ({ cellLat: row.cell_lat, cellLon: row.cell_lon }));
+}
+
+function entryBounds(db, entryId) {
+  const row = db
+    .prepare(
+      `SELECT MIN(lat) AS min_lat, MAX(lat) AS max_lat, MIN(lon) AS min_lon, MAX(lon) AS max_lon
+       FROM (${POSITIONS})`
+    )
+    .get(...entryParams(entryId));
+  return row?.min_lat === null || row?.min_lat === undefined
+    ? null
+    : { minLat: row.min_lat, maxLat: row.max_lat, minLon: row.min_lon, maxLon: row.max_lon };
+}
+
+// How many degrees MAX_RELEVANT_M is, at the latitude it is measured from:
+// a degree of longitude shortens towards the poles.
+function margins(latitude) {
+  const latMargin = MAX_RELEVANT_M / METRES_PER_DEGREE;
+  const cosLat = Math.cos(toRadians(Math.min(89, Math.abs(latitude))));
+  return { latMargin, lonMargin: cosLat > 0.02 ? latMargin / cosLat : 180 };
+}
+
+// The area one cell is fetched for: the cell itself plus the margin, so a
+// position anywhere inside it has every amer within range.
+function cellBounds({ cellLat, cellLon }) {
+  const south = cellLat * CELL_DEGREES;
+  const north = south + CELL_DEGREES;
+  const west = cellLon * CELL_DEGREES;
+  const east = west + CELL_DEGREES;
+  const { latMargin, lonMargin } = margins(Math.max(Math.abs(south), Math.abs(north)));
+  return {
+    south: Math.max(-90, south - latMargin),
+    north: Math.min(90, north + latMargin),
+    west: Math.max(-180, west - lonMargin),
+    east: Math.min(180, east + lonMargin)
+  };
+}
+
+// The landmarks any line of a passage's journal could be read against: the
+// area it sailed through, widened by the range an amer is named from. Near the
+// antimeridian the longitude window would wrap, so latitude alone filters
+// there and the distance test -- which runs at read time -- stays exact.
+function listEntryLandmarks(db, entryId) {
+  const bounds = entryBounds(db, entryId);
+  if (!bounds) {
+    return [];
+  }
+  const { latMargin, lonMargin } = margins(
+    Math.max(Math.abs(bounds.minLat), Math.abs(bounds.maxLat))
+  );
+  const south = bounds.minLat - latMargin;
+  const north = bounds.maxLat + latMargin;
+  const west = bounds.minLon - lonMargin;
+  const east = bounds.maxLon + lonMargin;
+  const rows =
+    west < -180 || east > 180
+      ? db.prepare('SELECT * FROM landmarks WHERE lat BETWEEN ? AND ?').all(south, north)
+      : db
+          .prepare('SELECT * FROM landmarks WHERE lat BETWEEN ? AND ? AND lon BETWEEN ? AND ?')
+          .all(south, north, west, east);
+  return rows.map(toLandmark);
+}
+
+function isAreaFetched(db, { cellLat, cellLon }) {
+  return (
+    db
+      .prepare('SELECT 1 FROM landmark_areas WHERE cell_lat = ? AND cell_lon = ?')
+      .get(cellLat, cellLon) !== undefined
+  );
+}
+
+// One fetched area, with the landmarks it found: written together, so a cell
+// is only ever recorded as covered once its landmarks are in the table.
+function saveArea(db, cell, landmarks, now) {
+  withTransaction(db, () => {
+    for (const landmark of landmarks) {
+      db.prepare(
+        `INSERT INTO landmarks
+           (osm_type, osm_id, name, kind, lat, lon, light_range, created_at, updated_at)
+         VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
+         ON CONFLICT (osm_type, osm_id) DO UPDATE SET
+           name = excluded.name,
+           kind = excluded.kind,
+           lat = excluded.lat,
+           lon = excluded.lon,
+           light_range = excluded.light_range,
+           updated_at = excluded.updated_at`
+      ).run(
+        landmark.osmType,
+        landmark.osmId,
+        landmark.name,
+        landmark.kind,
+        landmark.lat,
+        landmark.lon,
+        landmark.lightRange,
+        now,
+        now
+      );
+    }
+    db.prepare(
+      `INSERT INTO landmark_areas (cell_lat, cell_lon, fetched_at) VALUES (?, ?, ?)
+       ON CONFLICT (cell_lat, cell_lon) DO UPDATE SET fetched_at = excluded.fetched_at`
+    ).run(cell.cellLat, cell.cellLon, now);
+  });
+}
+
+// The next cell to fetch, newest passage first, and the passage that wants it.
+// A passage whose cells are all covered is no longer pending -- unless it is
+// still open, since it may yet sail into a new cell.
+function nextPendingArea(db) {
+  const pending = db
+    .prepare('SELECT id, state FROM log_entries WHERE landmarks_pending = 1 ORDER BY id DESC')
+    .all();
+  for (const entry of pending) {
+    const missing = entryCells(db, entry.id).filter((cell) => !isAreaFetched(db, cell));
+    if (missing.length > 0) {
+      return { entryId: entry.id, cell: missing[0], remaining: missing.length };
+    }
+    if (entry.state !== 'active') {
+      db.prepare('UPDATE log_entries SET landmarks_pending = 0 WHERE id = ?').run(entry.id);
+    }
+  }
+  return null;
+}
+
+module.exports = {
+  CELL_DEGREES,
+  MAX_RELEVANT_M,
+  cellBounds,
+  entryBounds,
+  entryCells,
+  isAreaFetched,
+  listEntryLandmarks,
+  nextPendingArea,
+  saveArea,
+  toLandmark
+};

package/lib/logbook-pdf.js

@@ -14,6 +14,8 @@ const TABLE_HEAD_HEIGHT = 16;
 const FOOTER_TOP = PAGE.height - PAGE.margin - 6;
 const BODY_BOTTOM = FOOTER_TOP - 12;
 const FONT_SIZE = 8;
+// The landmark line under a position: set back by its size as well as its grey.
+const LANDMARK_FONT_SIZE = 7;
 const LINE_HEIGHT = 10;
 const CELL_PADDING = 3;
 const SKETCH_MAX_HEIGHT = 48;
@@ -35,7 +37,9 @@ const ALARM = [0.72, 0.1, 0.1];
 
 const COLUMNS = [
   { key: 'time', width: 36 },
-  { key: 'position', width: 112 },
+  // Wide enough for the coordinates and, under them, most of a landmark
+  // bearing on one line (SPEC §4.13); the remarks column keeps the rest.
+  { key: 'position', width: 142 },
   { key: 'course', width: 42 },
   { key: 'speed', width: 42 },
   { key: 'wind', width: 80 },
@@ -101,8 +105,16 @@ function loadShared() {
     load('format.mjs'),
     load('log-lines.mjs'),
     load('weather.mjs'),
-    load('tide.mjs')
-  ]).then(([i18n, format, lines, weather, tide]) => ({ i18n, format, lines, weather, tide }));
+    load('tide.mjs'),
+    load('landmarks.mjs')
+  ]).then(([i18n, format, lines, weather, tide, landmarks]) => ({
+    i18n,
+    format,
+    lines,
+    weather,
+    tide,
+    landmarks
+  }));
   return sharedModules;
 }
 
@@ -411,7 +423,14 @@ function passageLines(bundle, context) {
       ].filter(Boolean)
     });
   }
-  return lines;
+  // Every line's position is also read against the nearest amer (SPEC §4.13),
+  // printed in grey under the coordinates -- the same wording the passage page
+  // shows, from the same module.
+  const landmarks = bundle.landmarks ?? [];
+  return lines.map((line) => ({
+    ...line,
+    landmark: context.landmarkLine(line.position ?? null, landmarks, { t, format })
+  }));
 }
 
 // Distance and engine/sail time of each calendar day, across all passages.
@@ -514,6 +533,7 @@ function readingCells(line, context) {
   const cells = {
     time: line.time ? format.time(line.time) : '',
     position: format.position(line.position ?? null),
+    positionNote: line.landmark ?? '',
     course: '',
     speed: format.speed(readings?.sog),
     wind: '',
@@ -535,8 +555,16 @@ function readingCells(line, context) {
   return cells;
 }
 
+const POSITION_WIDTH = COLUMNS.find((column) => column.key === 'position').width;
+
 function measure(line, context) {
   const remarkLines = layoutRemarks(line.remarks, REMARKS_WIDTH - 2 * CELL_PADDING);
+  const cells = readingCells(line, context);
+  // The landmark line is narrower than the coordinates it sits under, so it
+  // wraps rather than running into the course column.
+  const positionLines = cells.positionNote
+    ? wrapText(cells.positionNote, 'regular', LANDMARK_FONT_SIZE, POSITION_WIDTH - 2 * CELL_PADDING)
+    : [];
   const sketch = sketchBox(line.strokes);
   const maxLines = Math.floor(
     (BODY_BOTTOM -
@@ -553,9 +581,9 @@ function measure(line, context) {
   }
   const height =
     2 * CELL_PADDING +
-    Math.max(1, shown.length) * LINE_HEIGHT +
+    Math.max(1, shown.length, 1 + positionLines.length) * LINE_HEIGHT +
     (sketch ? sketch.drawnHeight + (shown.length > 0 ? 2 : 0) : 0);
-  return { ...line, cells: readingCells(line, context), remarkLines: shown, sketch, height };
+  return { ...line, cells, remarkLines: shown, positionLines, sketch, height };
 }
 
 // Pages as lists of measured rows; nothing is drawn yet, so the page count is
@@ -615,6 +643,14 @@ function drawRow(page, row, top) {
     if (text) {
       page.text(x + CELL_PADDING, baseline, text, { size: FONT_SIZE });
     }
+    if (column.key === 'position') {
+      row.positionLines.forEach((text, index) => {
+        page.text(x + CELL_PADDING, baseline + (index + 1) * LINE_HEIGHT, text, {
+          size: LANDMARK_FONT_SIZE,
+          color: GREY
+        });
+      });
+    }
     x += column.width;
   }
   row.remarkLines.forEach((words, index) => {
@@ -725,7 +761,8 @@ async function renderLogbookPdf(
     format: formatModule,
     lines: lineModule,
     weather: weatherModule,
-    tide: tideModule
+    tide: tideModule,
+    landmarks: landmarkModule
   } = await loadShared();
   const t = i18n.createTranslator(language);
   const format = formatModule.createFormatter({
@@ -748,6 +785,7 @@ async function renderLogbookPdf(
     tideExtremes: tideModule.tideExtremes,
     tankName: lineModule.tankName,
     batteryName: lineModule.batteryName,
+    landmarkLine: landmarkModule.landmarkLine,
     manoeuvreLabels: {}
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "signalk-chiplog",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Automated digital logbook plugin for Signal K, with keyboard/handwritten entry on tablet",
   "main": "index.js",
   "files": [
@@ -71,6 +71,7 @@
     "husky": "^9.1.7",
     "leaflet": "^1.9.4",
     "lint-staged": "^17.5.1",
+    "mediabunny": "1.58.0",
     "preact": "^10.29.8",
     "prettier": "^3.9.6"
   }

package/public/app.css

@@ -557,6 +557,15 @@ main {
   min-width: 14rem;
 }
 
+/* Where the position is in relation to the nearest landmark, under it: a
+   reading in its own right, not a heading, so it keeps the coordinates’
+   place and only its colour sets it back. */
+.timeline-landmark {
+  display: block;
+  color: var(--muted);
+  font-size: 0.85em;
+}
+
 .timeline-event .timeline-time {
   font-weight: 600;
 }
@@ -896,3 +905,115 @@ main {
   color: var(--muted);
   font-weight: 500;
 }
+
+/* Passage animation */
+
+.card-header-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.8rem;
+}
+
+.animation-stage {
+  display: flex;
+  justify-content: center;
+}
+
+.animation-canvas {
+  display: block;
+  max-width: 100%;
+  border-radius: 8px;
+  /* The sea the renderer paints, so a tile that has not arrived is not a hole. */
+  background: #aad3df;
+}
+
+.animation-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.6rem;
+  margin-top: 0.75rem;
+}
+
+/* Wide enough that swapping Play for Pause does not shift the slider. */
+.animation-play {
+  min-width: 7.5rem;
+}
+
+.animation-slider {
+  flex: 1 1 12rem;
+  min-width: 8rem;
+}
+
+/* These change every frame; proportional digits jitter. */
+.animation-clock,
+.animation-facts dd {
+  font-variant-numeric: tabular-nums;
+}
+
+.animation-speeds {
+  display: flex;
+  gap: 0.3rem;
+}
+
+.animation-speed {
+  padding: 0.35rem 0.6rem;
+  background: none;
+  color: var(--accent);
+}
+
+.animation-speed[aria-pressed='true'] {
+  background: var(--accent);
+  color: var(--accent-contrast);
+}
+
+.animation-facts {
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  margin: 0.75rem 0 0;
+}
+
+.animation-seamarks {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-top: 0.75rem;
+  color: var(--muted);
+}
+
+.animation-export-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 1rem;
+}
+
+.animation-export-format {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.animation-export-format select {
+  font: inherit;
+  padding: 0.4rem 0.6rem;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+}
+
+.animation-progress {
+  margin-top: 1rem;
+}
+
+.animation-progress progress {
+  width: 100%;
+  height: 0.6rem;
+}
+
+@media (max-width: 600px) {
+  .animation-facts {
+    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
+  }
+}

package/public/entry/sw.js

@@ -35,6 +35,7 @@ const SHELL = [
   '../js/format.mjs',
   '../js/i18n.mjs',
   '../js/ids.mjs',
+  '../js/landmarks.mjs',
   '../js/log-lines.mjs',
   '../js/status.mjs',
   '../js/components/common.mjs',