signalk-race-control 0.4.2 → 0.4.3

package/README.md

@@ -75,19 +75,46 @@ and a live projected finishing order — during and after the race.
   **Clear** to undo. Handles races that cross midnight.
 - **Course & chart** — enter lat/lon for the start line, an ordered list of rounding
   marks, and the finish line (or click **Use my position** if you're sitting at that
-  spot). The webapp draws them on a built-in chart, overlaid with each AIS-tracked
-  boat's recorded track for the current race — drag the **replay** slider to step
-  back through it, or leave it on **Live**. The course is also published as SignalK
+  spot, or type a name to autocomplete against existing SignalK waypoints — e.g. ones
+  already placed from a chart plotter — and pick one to fill in its position). The
+  webapp draws them on a built-in chart, overlaid with each AIS-tracked boat's
+  recorded track for the current race — drag the **replay** slider to step back
+  through it, or leave it on **Live**. Click **Play** to have it step through on its own
+  instead, at whatever speed the adjoining slider is set to (1x-60x); it starts over
+  from the earliest recorded position when played from Live (there's nothing to play
+  forward into from there), stops on its own once it catches up to the latest one, and
+  dragging the main slider or clicking **Live** stops it early. Every actual recorded
+  position (an AIS sample,
+  or a manually-recorded mark rounding) shows as a small dot along the track, so it's
+  clear which points are real; wherever the slider sits between two of them, the boat's
+  position is linearly interpolated and drawn as a hollow ring instead of a solid dot,
+  so an in-between position always reads as estimated rather than observed. It falls
+  back to just the last real position (no ring) instead of interpolating across a gap
+  longer than 5 minutes — AIS dropping out, or a mark rounding recorded far from any
+  real fix — since a straight line across a gap that long would be a guess, not an
+  estimate. The course is also published as SignalK
   waypoint/route resources for any chart plotter (e.g. freeboard-sk) that reads the
-  standard resources API — that part only does anything if your server has a
-  resources provider installed; it's a no-op otherwise, never a failure.
+  standard resources API — both directions (reading existing waypoints for the
+  autocomplete, and publishing the saved course) only do anything if your server has a
+  resources provider installed; they're a no-op otherwise, never a failure.
 - **Estimated finish time & live rank** — while a boat is still racing, if it has a
   live AIS position and speed and the race has a finish line, the plugin projects a
   finish time and corrected time from its remaining distance and speed, and ranks it
   accordingly. The distance routes around whichever marks the boat hasn't rounded yet
-  (detected automatically from its recorded track passing within ~0.1nm of each mark
-  in order) rather than cutting straight to the finish — accuracy still depends on
-  that detection actually catching each rounding.
+  (detected automatically from its recorded track passing within a configurable radius
+  — `markRoundingRadiusM`, 100m by default — of each mark in order) rather than
+  cutting straight to the finish — accuracy still depends on that detection actually
+  catching each rounding. A rounding can also be recorded by hand: each boat's row has
+  a numbered pill per mark in the **Marks** column — click one to mark it rounded right
+  now, click again to clear it — for a boat with no MMSI/AIS at all, or to correct one
+  the automatic detection missed. Either source counts toward the same rounding, and
+  for a boat still racing with no AIS-based estimate to rank by, marks rounded (by
+  either method) takes priority over raw elapsed time, so a boat further round the
+  course still ranks ahead even without live tracking. A manual rounding also records a
+  position for the replay chart — the boat's live position if it has AIS, otherwise the
+  mark's own position (a reasonable stand-in, since rounding a mark means being at it)
+  — so even a boat with no AIS at all shows up on the chart at each mark it's recorded
+  rounding.
 - **Stop / call off the race** — freezes elapsed/corrected time for everyone without
   touching boats, finish times, or the course (unlike Reset, which clears the race
   back to not-started), and marks every boat that hadn't finished as **DNF**,
@@ -200,3 +227,7 @@ finish time/rank for boats still racing, when the plugin has enough to estimate
   setting, not a per-race or webapp-side option — change it under
   **Server → Plugin Config → Race Control** and restart the plugin (the server does
   this automatically on save) for the webapp to pick it up.
+- The mark-rounding radius used for the estimated finish time and remaining-distance
+  calculations (`markRoundingRadiusM`, 100m by default) is also a plugin setting —
+  loosen it for a fleet with noisier AIS tracks, or tighten it if marks sit close
+  together and a boat's radius circles are overlapping.

package/index.js

@@ -251,6 +251,7 @@ function ensureRaceShape(race) {
     if (b.dnfPosition === undefined) b.dnfPosition = null;
     if (b.startTime === undefined) b.startTime = null;
     if (b.sailNumber === undefined) b.sailNumber = null;
+    if (!b.markTimes) b.markTimes = {};
   });
 }
 
@@ -1329,6 +1330,12 @@ module.exports = function (app) {
         title:
           'Allow importing a complete fleet (every boat, with TCF) into a race from an external regatta system — currently Manage2Sail. Off by default, since it fetches from a third-party site and bulk-adds boats.',
         default: false
+      },
+      markRoundingRadiusM: {
+        type: 'number',
+        title:
+          'How close (in meters) an AIS-tracked boat must come to a mark for it to count as rounded, for the estimated finish time and remaining-distance calculations',
+        default: 100
       }
     }
   };
@@ -1453,29 +1460,58 @@ module.exports = function (app) {
   }
 
   // A mark counts as "rounded" once the boat's recorded track came within
-  // this radius of it. ~0.1nm (~185m) — loose enough to tolerate AIS
-  // position jitter and the 15s sampling gap (a boat doing 7kn covers about
-  // 0.03nm between samples) without needing an exact pass.
-  const MARK_ROUNDING_RADIUS_NM = 0.1;
+  // this radius of it — meters, configurable (plugin config,
+  // markRoundingRadiusM), converted to nautical miles for distanceNm().
+  // 100m by default — loose enough to tolerate AIS position jitter and the
+  // 15s sampling gap (a boat doing 7kn covers about 55m between samples)
+  // without needing an exact pass.
+  function markRoundingRadiusNm() {
+    const meters = (plugin.options && plugin.options.markRoundingRadiusM) || 100;
+    return meters / 1852;
+  }
 
   // Scans a boat's recorded track chronologically, advancing to the next
   // mark each time the track comes within rounding radius of the current
   // one — so it naturally requires marks to be rounded in course order.
   // Automatic (no manual "boat X rounded mark Y" input) by design, at the
   // cost of missing a rounding if a boat cuts far outside the radius.
-  function countRoundedMarks(race, boat) {
+  function countAutoRoundedMarks(race, boat) {
     const marks = race.course.marks;
     if (!marks.length || !boat.track || !boat.track.length) return 0;
+    const radiusNm = markRoundingRadiusNm();
     let markIdx = 0;
     for (const pt of boat.track) {
       if (markIdx >= marks.length) break;
-      if (distanceNm(pt, marks[markIdx]) <= MARK_ROUNDING_RADIUS_NM) {
+      if (distanceNm(pt, marks[markIdx]) <= radiusNm) {
         markIdx++;
       }
     }
     return markIdx;
   }
 
+  // A committee member can also record a mark rounding by hand (with its
+  // own timestamp) — for a boat with no MMSI/AIS at all, or to correct a
+  // rounding the automatic track-based detection above missed. Counted the
+  // same "in order" way as the automatic detection: a mark only counts if
+  // every mark before it is also recorded, manually or automatically, so a
+  // rounding can't be marked out of course order.
+  function countManualRoundedMarks(race, boat) {
+    const marks = race.course.marks;
+    if (!marks.length || !boat.markTimes) return 0;
+    let count = 0;
+    for (const m of marks) {
+      if (boat.markTimes[m.id] == null) break;
+      count++;
+    }
+    return count;
+  }
+
+  // The higher of the two — a boat only needs one working way to record a
+  // rounding, not both.
+  function countRoundedMarks(race, boat) {
+    return Math.max(countAutoRoundedMarks(race, boat), countManualRoundedMarks(race, boat));
+  }
+
   // Distance from the boat's current position, around each remaining mark
   // in order, to the finish line — not just a straight line to the finish.
   // Returns null if there's nothing left to route to (no remaining marks and
@@ -1523,12 +1559,16 @@ module.exports = function (app) {
     };
   }
 
-  // Attaches a live `estimate` to each unfinished boat without mutating the
-  // stored race — it's derived from live data, never persisted.
+  // Attaches a live `estimate` and `roundedMarksCount` to each unfinished
+  // boat without mutating the stored race — both are derived from live/
+  // recorded data, never persisted as such (roundedMarksCount is derived
+  // from markTimes, which is persisted; the count itself isn't).
   function raceWithEstimates(race) {
     const out = JSON.parse(JSON.stringify(race));
     Object.values(out.boats).forEach((b) => {
-      b.estimate = estimateFinish(race, race.boats[b.id]);
+      const boat = race.boats[b.id];
+      b.estimate = estimateFinish(race, boat);
+      b.roundedMarksCount = countRoundedMarks(race, boat);
     });
     return out;
   }
@@ -1546,13 +1586,24 @@ module.exports = function (app) {
         const tcf = boat.tcf != null ? boat.tcf : 1.0;
         const correctedMs = elapsedMs != null ? elapsedMs * tcf : null;
         const estimate = estimateFinish(race, boat);
+        const roundedMarksCount = countRoundedMarks(race, boat);
         const rankMs = boat.dnf ? null : boat.finishTime ? correctedMs : estimate ? estimate.estCorrectedMs : correctedMs;
-        return { boat, elapsedMs, correctedMs, estimate, rankMs };
+        return { boat, elapsedMs, correctedMs, estimate, roundedMarksCount, rankMs };
       })
       .sort((a, b) => {
         if (a.rankMs == null && b.rankMs == null) return a.boat.name.localeCompare(b.boat.name);
         if (a.rankMs == null) return 1;
         if (b.rankMs == null) return -1;
+        // Among still-racing boats with no AIS-based ETA to fall back on
+        // (elapsed-so-far alone says nothing about how much course is
+        // left), a boat recorded further around the course — manually or
+        // automatically — ranks ahead regardless of corrected time so far.
+        // Boats WITH an estimate already have marks-remaining baked into
+        // estCorrectedMs via the distance routing, so this only applies
+        // when neither side has one.
+        if (!a.boat.finishTime && !b.boat.finishTime && !a.estimate && !b.estimate && a.roundedMarksCount !== b.roundedMarksCount) {
+          return b.roundedMarksCount - a.roundedMarksCount;
+        }
         return a.rankMs - b.rankMs;
       });
   }
@@ -2188,7 +2239,8 @@ module.exports = function (app) {
         startTime: null,
         track: [],
         dnf: false,
-        dnfPosition: null
+        dnfPosition: null,
+        markTimes: {}
       };
       race.boats[boat.id] = boat;
       saveState();
@@ -2274,6 +2326,47 @@ module.exports = function (app) {
       res.json(boat);
     });
 
+    // Manual mark-rounding: a committee member records (or clears) the
+    // moment a boat rounded a specific mark, independent of the automatic
+    // AIS track-based detection — for a boat with no MMSI/AIS at all, or to
+    // correct a rounding the automatic detection missed. See
+    // countManualRoundedMarks/countRoundedMarks for how the two combine.
+    router.put('/races/:id/boats/:boatId/markTimes/:markId', (req, res) => {
+      const race = getRace(req.params.id);
+      if (!race) return res.status(404).json({ error: 'No such race' });
+      const boat = getBoat(race, req.params.boatId);
+      if (!boat) return res.status(404).json({ error: 'No such boat' });
+      const mark = race.course.marks.find((m) => m.id === req.params.markId);
+      if (!mark) return res.status(404).json({ error: 'No such mark' });
+      if (!boat.track) boat.track = [];
+      // Drop any earlier manually-added point for this exact mark first,
+      // whether we're about to replace it or just clearing — tagged with
+      // markId so this can never touch a genuine AIS-recorded sample.
+      boat.track = boat.track.filter((pt) => pt.markId !== mark.id);
+      const raw = req.body ? req.body.time : undefined;
+      if (raw === null) {
+        delete boat.markTimes[mark.id];
+      } else {
+        const t = Number(raw);
+        if (!isFinite(t) || t <= 0) {
+          return res.status(400).json({ error: 'time must be an epoch-millisecond timestamp or null' });
+        }
+        boat.markTimes[mark.id] = t;
+        // Record where the boat was at that moment too — its live position
+        // if we have one (accurate, and consistent with its recorded AIS
+        // track), otherwise the mark's own position as a reasonable stand-
+        // in (rounding a mark means being at it). Either way this is what
+        // lets a manually-recorded rounding show up on the replay chart,
+        // even for a boat with no AIS at all.
+        const live = getLivePosition(boat.mmsi);
+        const pos = live || { lat: mark.lat, lon: mark.lon };
+        boat.track.push({ t, lat: pos.lat, lon: pos.lon, markId: mark.id });
+        boat.track.sort((a, b) => a.t - b.t);
+      }
+      saveState();
+      res.json(boat);
+    });
+
     router.put('/races/:id/boats/:boatId/mmsi', (req, res) => {
       const race = getRace(req.params.id);
       if (!race) return res.status(404).json({ error: 'No such race' });
@@ -2309,6 +2402,32 @@ module.exports = function (app) {
       res.json({ enabled: isVetEnabled() });
     });
 
+    // Lets the course editor offer existing SignalK waypoints (e.g. ones
+    // already placed on a chart plotter) as start/mark/finish positions,
+    // instead of only typing lat/lon by hand. Best-effort, same spirit as
+    // publishCourseResources — silently returns none if this server has no
+    // resources provider registered, rather than failing the whole course
+    // editor over it.
+    router.get('/waypoints', async (req, res) => {
+      if (!app.resourcesApi || typeof app.resourcesApi.listResources !== 'function') {
+        return res.json({ waypoints: [] });
+      }
+      try {
+        const data = await app.resourcesApi.listResources('waypoints', {});
+        const waypoints = Object.keys(data || {})
+          .map((id) => {
+            const r = data[id] || {};
+            const coords = r.feature && r.feature.geometry && r.feature.geometry.coordinates;
+            if (!Array.isArray(coords) || coords.length < 2) return null;
+            return { id, name: r.name || id, lon: coords[0], lat: coords[1] };
+          })
+          .filter(Boolean);
+        res.json({ waypoints });
+      } catch (e) {
+        res.json({ waypoints: [] });
+      }
+    });
+
     router.put('/races/:id/boats/:boatId/tcf', (req, res) => {
       const race = getRace(req.params.id);
       if (!race) return res.status(404).json({ error: 'No such race' });
@@ -2428,7 +2547,8 @@ module.exports = function (app) {
                 startTime: null,
                 track: [],
                 dnf: false,
-                dnfPosition: null
+                dnfPosition: null,
+                markTimes: {}
               };
               race.boats[boat.id] = boat;
               existingByName.set(key, boat);

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "signalk-race-control",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "SignalK plugin and webapp for tracking elapsed and handicap-corrected (Time-on-Time) race time, with a per-boat editable TCF and boat names pulled from AIS when available.",
   "main": "index.js",
+  "author": "Joachim Bakke <github@heiamoss.com>",
   "keywords": [
     "signalk-node-server-plugin",
     "signalk-webapp",

package/public/app.js

@@ -24,6 +24,11 @@
   let lastCourseFormRaceId = undefined; // tracks which race the course form reflects
   let replayLive = true;
   let replayTime = Date.now();
+  let replayPlaying = false;
+  let replaySpeed = 10; // 1x-60x, simulated seconds of replay time per real second
+  let replayPlayTimer = null;
+  let replayPlayLastTick = null;
+  let waypoints = []; // [{id, name, lat, lon}] from SignalK resources, for the course editor's "Pick a waypoint" dropdown
 
   const raceSelect = document.getElementById('raceSelect');
   const newRaceBtn = document.getElementById('newRaceBtn');
@@ -76,6 +81,9 @@
   const replayControls = document.getElementById('replayControls');
   const replaySlider = document.getElementById('replaySlider');
   const replayTimeLabel = document.getElementById('replayTimeLabel');
+  const replayPlayBtn = document.getElementById('replayPlayBtn');
+  const replaySpeedSlider = document.getElementById('replaySpeedSlider');
+  const replaySpeedLabel = document.getElementById('replaySpeedLabel');
   const replayLiveBtn = document.getElementById('replayLiveBtn');
   const raceImportSection = document.getElementById('raceImportSection');
   const raceImportToggleBtn = document.getElementById('raceImportToggleBtn');
@@ -363,6 +371,19 @@
     }
   }
 
+  // Best-effort, like the underlying resourcesApi calls it wraps — an empty
+  // list (no resources provider registered, or the request fails) just
+  // means the course editor's "Pick a waypoint" dropdowns have nothing to
+  // offer, not a failure worth surfacing.
+  async function loadWaypoints() {
+    try {
+      const data = await fetchJSON(`${API}/waypoints`);
+      waypoints = data.waypoints || [];
+    } catch (e) {
+      waypoints = [];
+    }
+  }
+
   async function loadHandicapRegister(force) {
     if (!vetEnabled) return;
     try {
@@ -408,6 +429,11 @@
     if (id !== lastCourseFormRaceId) {
       loadCourseFormFromRace();
       lastCourseFormRaceId = id;
+      // A running replay is specific to whichever race's track it was
+      // playing through — switching races (or to none) leaves it with
+      // nothing sensible to keep advancing into.
+      stopReplayPlayback();
+      replayLive = true;
     }
   }
 
@@ -757,6 +783,28 @@
     }
   }
 
+  // Records (or, with ts: null, clears) a boat's own manually-entered
+  // rounding time for one specific mark — independent of the automatic
+  // AIS-track-based detection, for a boat with no MMSI/AIS at all or to
+  // correct a rounding the automatic detection missed.
+  async function setMarkTime(boatId, markId, ts) {
+    if (!activeRaceId) return;
+    try {
+      const boat = await fetchJSON(
+        `${API}/races/${encodeURIComponent(activeRaceId)}/boats/${encodeURIComponent(boatId)}/markTimes/${encodeURIComponent(markId)}`,
+        {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ time: ts })
+        }
+      );
+      raceState.boats[boatId] = boat;
+      render();
+    } catch (e) {
+      setStatus(e.message, true);
+    }
+  }
+
   async function setMmsi(boatId, mmsi) {
     if (!activeRaceId) return;
     try {
@@ -829,18 +877,119 @@
     return null;
   }
 
+  // Generic substring-match autocomplete, wiring `input` to `dropdown` (a
+  // hidden .suggestions element already sitting next to it in the DOM) —
+  // same matching/keyboard-nav behavior as the boat-name autocomplete
+  // above, but with its own closure-local item/selection state so several
+  // instances (one per course point row) can coexist without stepping on
+  // each other the way sharing the boat autocomplete's module-level state
+  // would.
+  function attachAutocomplete(input, dropdown, getPool, onSelect) {
+    let items = [];
+    let activeIndex = -1;
+
+    function hide() {
+      dropdown.hidden = true;
+      dropdown.innerHTML = '';
+      items = [];
+      activeIndex = -1;
+    }
+    function renderActive() {
+      Array.from(dropdown.children).forEach((el, i) => el.classList.toggle('active', i === activeIndex));
+    }
+    function select(item) {
+      onSelect(item);
+      hide();
+    }
+    function showFor(query) {
+      const q = query.trim().toLowerCase();
+      if (!q) {
+        hide();
+        return;
+      }
+      const matches = getPool()
+        .filter((it) => it.name.toLowerCase().includes(q))
+        .slice(0, 20);
+      items = matches;
+      activeIndex = -1;
+      if (!matches.length) {
+        hide();
+        return;
+      }
+      dropdown.innerHTML = '';
+      matches.forEach((item) => {
+        const div = document.createElement('div');
+        div.className = 'suggestion-item';
+        const idx = item.name.toLowerCase().indexOf(q);
+        if (idx === -1) {
+          div.textContent = item.name;
+        } else {
+          div.innerHTML =
+            escapeHtml(item.name.slice(0, idx)) +
+            '<mark>' +
+            escapeHtml(item.name.slice(idx, idx + q.length)) +
+            '</mark>' +
+            escapeHtml(item.name.slice(idx + q.length));
+        }
+        // mousedown (not click) fires before the input's blur, same reason
+        // as the boat-name suggestions above.
+        div.addEventListener('mousedown', (e) => {
+          e.preventDefault();
+          select(item);
+        });
+        dropdown.appendChild(div);
+      });
+      dropdown.hidden = false;
+    }
+
+    input.addEventListener('input', () => showFor(input.value));
+    input.addEventListener('focus', () => {
+      if (input.value.trim()) showFor(input.value);
+    });
+    input.addEventListener('blur', () => hide());
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'ArrowDown' && items.length) {
+        e.preventDefault();
+        activeIndex = (activeIndex + 1) % items.length;
+        renderActive();
+      } else if (e.key === 'ArrowUp' && items.length) {
+        e.preventDefault();
+        activeIndex = (activeIndex - 1 + items.length) % items.length;
+        renderActive();
+      } else if (e.key === 'Enter' && activeIndex >= 0 && items[activeIndex]) {
+        e.preventDefault();
+        select(items[activeIndex]);
+      } else if (e.key === 'Escape') {
+        hide();
+      }
+    });
+  }
+
   // One name+lat+lon(+optional "use my position") row, shared by start
-  // line, finish line, and mark entry.
+  // line, finish line, and mark entry. The name field autocompletes against
+  // existing SignalK waypoints (e.g. ones already placed on a chart
+  // plotter) — picking one fills in lat/lon (and the name) from it, so a
+  // start/mark/finish position doesn't have to be typed by hand if a
+  // waypoint for it already exists.
   function buildPointRow(point) {
     const row = document.createElement('div');
     row.className = 'course-point-row';
 
+    const nameWrap = document.createElement('div');
+    nameWrap.className = 'autocomplete course-name-autocomplete';
+
     const nameInput = document.createElement('input');
     nameInput.type = 'text';
     nameInput.className = 'course-name-input';
     nameInput.placeholder = 'Name (optional)';
+    nameInput.autocomplete = 'off';
     nameInput.value = (point && point.name) || '';
 
+    const nameSuggestions = document.createElement('div');
+    nameSuggestions.className = 'suggestions';
+    nameSuggestions.hidden = true;
+    nameWrap.append(nameInput, nameSuggestions);
+
     const latInput = document.createElement('input');
     latInput.type = 'number';
     latInput.step = 'any';
@@ -869,7 +1018,18 @@
       }
     });
 
-    row.append(nameInput, latInput, lonInput, useHereBtn);
+    attachAutocomplete(
+      nameInput,
+      nameSuggestions,
+      () => waypoints,
+      (wp) => {
+        nameInput.value = wp.name;
+        latInput.value = wp.lat;
+        lonInput.value = wp.lon;
+      }
+    );
+
+    row.append(nameWrap, latInput, lonInput, useHereBtn);
     return { row, nameInput, latInput, lonInput };
   }
 
@@ -1220,15 +1380,50 @@
     });
     const cutoff = replayLive ? Infinity : replayTime;
 
+    // A boat's track is a series of discrete observations (an AIS sample
+    // roughly every 15s, or a single point at a manually-recorded mark
+    // rounding) — the path between them is drawn as a straight line, but
+    // that's an assumption, not a fact. Two things make that assumption
+    // visible instead of silently implied: a small dot at every actual
+    // observation, and — for the moving "current position" marker — linear
+    // interpolation between the two observations straddling the replay
+    // time, drawn as a hollow ring instead of a solid dot so it reads as
+    // estimated, not observed. Only interpolated across a reasonably tight
+    // gap; beyond that (AIS dropped out, or a mark rounding recorded far
+    // from any real fix) a straight line would just fabricate a plausible-
+    // looking but likely wrong path, so it falls back to the last real
+    // observation instead, same as before this existed.
+    const MAX_INTERP_GAP_MS = 5 * 60 * 1000;
+
     boatsWithTrack.forEach((b, idx) => {
       const color = CHART_PALETTE[idx % CHART_PALETTE.length];
       const pts = b.track.filter((pt) => pt.t <= cutoff);
       if (!pts.length) return;
       const d = pts.map((pt, i) => (i === 0 ? 'M' : 'L') + proj(pt).x.toFixed(1) + ',' + proj(pt).y.toFixed(1)).join(' ');
       parts.push(`<path d="${d}" fill="none" stroke="${color}" stroke-width="1.5" opacity="0.85" />`);
-      const last = proj(pts[pts.length - 1]);
-      parts.push(`<circle cx="${last.x}" cy="${last.y}" r="4" fill="${color}" />`);
-      parts.push(`<text x="${(last.x + 7).toFixed(1)}" y="${(last.y + 3).toFixed(1)}" fill="${color}" font-size="10">${escapeHtml(b.name)}</text>`);
+      pts.forEach((pt) => {
+        const p = proj(pt);
+        parts.push(`<circle cx="${p.x.toFixed(1)}" cy="${p.y.toFixed(1)}" r="2" fill="${color}" opacity="0.7" />`);
+      });
+
+      const prev = pts[pts.length - 1];
+      let current = prev;
+      let interpolated = false;
+      if (!replayLive && prev.t < cutoff) {
+        const next = b.track.find((pt) => pt.t > cutoff);
+        if (next && next.t - prev.t <= MAX_INTERP_GAP_MS) {
+          const frac = (cutoff - prev.t) / (next.t - prev.t);
+          current = { lat: prev.lat + (next.lat - prev.lat) * frac, lon: prev.lon + (next.lon - prev.lon) * frac };
+          interpolated = true;
+        }
+      }
+      const cur = proj(current);
+      if (interpolated) {
+        parts.push(`<circle cx="${cur.x}" cy="${cur.y}" r="4" fill="${color}" fill-opacity="0.35" stroke="${color}" stroke-width="1.5" stroke-dasharray="2,1.5" />`);
+      } else {
+        parts.push(`<circle cx="${cur.x}" cy="${cur.y}" r="4" fill="${color}" />`);
+      }
+      parts.push(`<text x="${(cur.x + 7).toFixed(1)}" y="${(cur.y + 3).toFixed(1)}" fill="${color}" font-size="10">${escapeHtml(b.name)}</text>`);
     });
 
     courseChart.innerHTML = parts.join('');
@@ -1278,6 +1473,8 @@
           finishTime: b.finishTime,
           dnf: !!b.dnf,
           dnfPosition: b.dnfPosition || null,
+          markTimes: b.markTimes || {},
+          roundedMarksCount: b.roundedMarksCount || 0,
           elapsedMs,
           correctedMs,
           estimate,
@@ -1288,6 +1485,13 @@
         if (a.rankMs == null && b.rankMs == null) return a.name.localeCompare(b.name);
         if (a.rankMs == null) return 1;
         if (b.rankMs == null) return -1;
+        // Mirrors the server's rankedBoatList: with no AIS-based ETA to
+        // fall back on, a boat recorded further around the course (by
+        // either automatic AIS detection or a manually recorded rounding)
+        // ranks ahead regardless of corrected time so far.
+        if (!a.finishTime && !b.finishTime && !a.estimate && !b.estimate && a.roundedMarksCount !== b.roundedMarksCount) {
+          return b.roundedMarksCount - a.roundedMarksCount;
+        }
         return a.rankMs - b.rankMs;
       });
   }
@@ -1465,6 +1669,15 @@
 
     const tdElapsed = document.createElement('td');
     const tdCorrected = document.createElement('td');
+    // One small pill button per course mark, in rounding order — click an
+    // unrounded one to record "rounded now", click a rounded one to clear
+    // it. Rebuilt only when the course's marks actually change (see
+    // render()), not every tick. Independent of the automatic AIS
+    // track-based rounding detection; either one counts (see the server's
+    // countRoundedMarks) — this is the manual alternative, for a boat with
+    // no MMSI/AIS at all or to correct a rounding the detection missed.
+    const tdMarks = document.createElement('td');
+    tdMarks.className = 'marks-cell';
     const tdEstFinish = document.createElement('td');
     tdEstFinish.className = 'est-finish';
     const tdVsSelf = document.createElement('td');
@@ -1539,12 +1752,15 @@
     const tdRemove = document.createElement('td');
     tdRemove.appendChild(removeBtn);
 
-    tr.append(tdName, tdSailNumber, tdMmsi, tdTcf, tdVet, tdStart, tdElapsed, tdCorrected, tdEstFinish, tdVsSelf, tdFinish, tdRemove);
+    tr.append(tdName, tdSailNumber, tdMmsi, tdTcf, tdVet, tdStart, tdElapsed, tdCorrected, tdMarks, tdEstFinish, tdVsSelf, tdFinish, tdRemove);
 
     return {
       tr,
       selfBtn,
       nameSpan,
+      tdMarks,
+      marksSignature: undefined,
+      marksPills: [],
       tdEstFinish,
       tdVsSelf,
       sailNumberInput,
@@ -1744,6 +1960,33 @@
       row.tdElapsed.textContent = fmtDuration(b.elapsedMs);
       row.tdCorrected.textContent = fmtDuration(b.correctedMs);
 
+      const courseMarks = (raceState.course && raceState.course.marks) || [];
+      const marksSig = courseMarks.map((m) => m.id).join(',');
+      if (row.marksSignature !== marksSig) {
+        row.tdMarks.innerHTML = '';
+        row.marksPills = courseMarks.map((m, i) => {
+          const pill = document.createElement('button');
+          pill.type = 'button';
+          pill.className = 'mark-pill';
+          pill.textContent = String(i + 1);
+          pill.addEventListener('click', () => {
+            const boat = raceState.boats[b.boatId];
+            const already = boat && boat.markTimes && boat.markTimes[m.id] != null;
+            setMarkTime(b.boatId, m.id, already ? null : Date.now());
+          });
+          row.tdMarks.appendChild(pill);
+          return pill;
+        });
+        row.marksSignature = marksSig;
+      }
+      courseMarks.forEach((m, i) => {
+        const pill = row.marksPills[i];
+        const t = b.markTimes && b.markTimes[m.id];
+        pill.classList.toggle('rounded', t != null);
+        const label = m.name || `Mark ${i + 1}`;
+        pill.title = t != null ? `${label} — rounded ${new Date(t).toLocaleTimeString()} (click to clear)` : `${label} — click to mark rounded now`;
+      });
+
       if (b.dnf) {
         row.tdEstFinish.textContent = 'DNF';
       } else if (b.finishTime) {
@@ -1891,13 +2134,67 @@
     renderMarkRows();
   });
   saveCourseBtn.addEventListener('click', saveCourse);
+
+  // Runs the replay forward at replaySpeed simulated seconds per real
+  // second, on its own timer (independent of the general 1s render tick)
+  // so playback still looks reasonably smooth at low speeds. Stops itself
+  // once it reaches the latest recorded position — there's nothing to play
+  // into beyond that until more track is recorded.
+  function stopReplayPlayback() {
+    replayPlaying = false;
+    replayPlayBtn.textContent = '▶ Play';
+    if (replayPlayTimer) {
+      clearInterval(replayPlayTimer);
+      replayPlayTimer = null;
+    }
+  }
+  function replayTick() {
+    const now = Date.now();
+    const elapsedMs = now - replayPlayLastTick;
+    replayPlayLastTick = now;
+    const maxT = Number(replaySlider.max);
+    if (!isFinite(maxT)) {
+      stopReplayPlayback();
+      return;
+    }
+    replayTime = Math.min(replayTime + elapsedMs * replaySpeed, maxT);
+    replayTimeLabel.textContent = new Date(replayTime).toLocaleTimeString();
+    if (replayTime >= maxT) stopReplayPlayback();
+    renderChart();
+  }
+  function startReplayPlayback() {
+    if (replayPlaying) return;
+    // Nothing to play forward into from Live — start over from the
+    // earliest recorded position instead.
+    if (replayLive) {
+      const minT = Number(replaySlider.min);
+      if (isFinite(minT)) replayTime = minT;
+    }
+    replayLive = false;
+    replayPlaying = true;
+    replayPlayBtn.textContent = '⏸ Pause';
+    replayPlayLastTick = Date.now();
+    replayPlayTimer = setInterval(replayTick, 200);
+    renderChart();
+  }
+
   replaySlider.addEventListener('input', () => {
+    stopReplayPlayback();
     replayLive = false;
     replayTime = Number(replaySlider.value);
     replayTimeLabel.textContent = new Date(replayTime).toLocaleTimeString();
     renderChart();
   });
+  replayPlayBtn.addEventListener('click', () => {
+    if (replayPlaying) stopReplayPlayback();
+    else startReplayPlayback();
+  });
+  replaySpeedSlider.addEventListener('input', () => {
+    replaySpeed = Number(replaySpeedSlider.value);
+    replaySpeedLabel.textContent = replaySpeed + 'x';
+  });
   replayLiveBtn.addEventListener('click', () => {
+    stopReplayPlayback();
     replayLive = true;
     renderChart();
   });
@@ -1905,7 +2202,7 @@
   async function init() {
     await loadVetEnabled();
     await loadRaceImportEnabled();
-    await Promise.all([loadVessels(), loadBoatRegistry(), loadHandicapRegister(false), loadRacesList()]);
+    await Promise.all([loadVessels(), loadBoatRegistry(), loadHandicapRegister(false), loadWaypoints(), loadRacesList()]);
     await loadRaceState();
     render();
     setInterval(render, 1000);

package/public/index.html

@@ -86,6 +86,9 @@
           <div id="replayControls" class="replay-controls" hidden>
             <input type="range" id="replaySlider" min="0" max="100" value="100" />
             <span id="replayTimeLabel">Live</span>
+            <button id="replayPlayBtn" type="button" class="secondary">▶ Play</button>
+            <input type="range" id="replaySpeedSlider" class="replay-speed-slider" min="1" max="60" value="10" title="Playback speed" />
+            <span id="replaySpeedLabel" class="replay-speed-label">10x</span>
             <button id="replayLiveBtn" type="button" class="secondary">Live</button>
           </div>
         </div>
@@ -127,6 +130,7 @@
             <th>Start time</th>
             <th>Elapsed</th>
             <th>Corrected</th>
+            <th>Marks</th>
             <th>Est. finish</th>
             <th>vs Self</th>
             <th>Finish time</th>

package/public/style.css

@@ -257,8 +257,13 @@ main {
   align-items: center;
 }
 
-.course-point-row .course-name-input {
+.course-point-row .course-name-autocomplete {
+  position: relative;
   width: 7rem;
+}
+
+.course-point-row .course-name-input {
+  width: 100%;
   padding: 0.3rem 0.4rem;
   background: var(--panel);
   color: var(--text);
@@ -364,6 +369,7 @@ main {
 .replay-controls {
   margin-top: 0.5rem;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 0.6rem;
   max-width: 800px;
@@ -373,6 +379,11 @@ main {
   flex: 1;
 }
 
+.replay-controls input[type='range'].replay-speed-slider {
+  flex: none;
+  width: 5rem;
+}
+
 .replay-controls span {
   font-size: 0.8rem;
   color: var(--muted);
@@ -380,6 +391,37 @@ main {
   min-width: 5rem;
 }
 
+.replay-controls span.replay-speed-label {
+  min-width: 2.2rem;
+}
+
+.marks-cell {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  min-width: 6rem;
+}
+
+.mark-pill {
+  width: 1.6rem;
+  height: 1.6rem;
+  padding: 0;
+  border-radius: 50%;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--muted);
+  font-size: 0.7rem;
+  font-weight: 700;
+  cursor: pointer;
+  line-height: 1;
+}
+
+.mark-pill.rounded {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #04202e;
+}
+
 .est-finish {
   font-size: 0.85rem;
   color: var(--muted);