signalk-race-control 0.7.0 → 0.8.0

package/README.md

@@ -102,9 +102,15 @@ and a live projected finishing order — during and after the race.
 - **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, 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
+  already placed from a chart plotter — and pick one to fill in its position; typing
+  lat/lon directly works just as well). Every other known waypoint (not part of this
+  race's own course) shows on the chart too, as a small dim pin with its name, so it's
+  there to reference — or type into a mark's name field — even before it's used.
+  The chart itself is a real background map, like freeboard-sk's: it uses whatever
+  tile-based chart resource this SignalK server has registered, or falls back to public
+  OpenStreetMap + OpenSeaMap tiles when none is configured (same fallback freeboard-sk
+  itself uses). Overlaid on it is 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
@@ -118,7 +124,10 @@ and a live projected finishing order — during and after the race.
   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
+  estimate. A notable pickup in speed between two consecutive samples (a gust, better
+  trim, planing) is marked right on the track as a ring in that boat's own colour, sized
+  a bit larger for a bigger jump — hover it for the exact speed reached. The course is
+  also published as SignalK
   waypoint/route resources for any chart plotter (e.g. freeboard-sk) that reads the
   standard resources API — both directions (reading existing waypoints for the
   autocomplete, and publishing the saved course) only do anything if your server has a

package/index.js

@@ -1,5 +1,6 @@
 const fs = require('fs');
 const path = require('path');
+const crypto = require('crypto');
 const ExcelJS = require('exceljs');
 
 const DEFAULT_HANDICAP_SOURCE_PAGE = 'https://ssca.no/aktiviteter/vet-tall';
@@ -476,8 +477,13 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 .status.error { color: var(--bad); }
 main { padding: 1rem 1.5rem max(2rem, env(safe-area-inset-bottom)); margin: 0 auto; }
 .add-boat-row { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
-.add-boat-row input[type='text'] { flex: 1; min-width: 12rem; padding: 0.45rem 0.6rem; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; }
+.add-boat-row input[type='text'] { width: 100%; padding: 0.45rem 0.6rem; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; }
 .add-boat-row input[type='number'] { width: 6rem; padding: 0.45rem 0.6rem; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; }
+.autocomplete { position: relative; flex: 1; min-width: 12rem; max-width: 20rem; }
+.suggestions { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 10; max-height: 16rem; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
+.suggestions .suggestion-item { padding: 0.45rem 0.6rem; font-size: 0.85rem; cursor: pointer; color: var(--text); }
+.suggestions .suggestion-item mark { background: none; color: var(--accent); font-weight: 700; }
+.suggestions .suggestion-item:hover, .suggestions .suggestion-item.active { background: rgba(56, 189, 248, 0.15); }
 .table-scroll { overflow-x: auto; }
 table { width: 100%; min-width: 44rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
 thead th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); }
@@ -539,8 +545,10 @@ tbody tr.dnf td { color: var(--muted); }
 </header>
 <main>
   <div class="add-boat-row">
-    <input type="text" id="addBoatName" placeholder="Add boat by name…" autocomplete="off" list="addBoatSuggestions" />
-    <datalist id="addBoatSuggestions"></datalist>
+    <div class="autocomplete">
+      <input type="text" id="addBoatName" placeholder="Add boat by name…" autocomplete="off" />
+      <div id="addBoatSuggestions" class="suggestions" hidden></div>
+    </div>
     <input type="number" id="addBoatTcf" step="0.001" min="0.01" title="TCF" />
     <button id="addBoatBtn">Add Boat</button>
   </div>
@@ -749,18 +757,62 @@ tbody tr.dnf td { color: var(--muted); }
     return boats;
   }
 
+  var nameSuggestionPool = [];
+  var suggestionItems = [];
+  var suggestionActiveIndex = -1;
   function rebuildAddBoatSuggestions() {
-    addBoatSuggestions.innerHTML = '';
     var seen = {};
+    nameSuggestionPool = [];
     race.handicapBoats.concat(race.ktkBoats).forEach(function (b) {
       var key = b.name.toLowerCase();
       if (seen[key]) return;
       seen[key] = true;
-      var opt = document.createElement('option');
-      opt.value = b.name;
-      addBoatSuggestions.appendChild(opt);
+      nameSuggestionPool.push({ name: b.name });
+    });
+  }
+  function escapeHtml(s) {
+    return s.replace(/[&<>"']/g, function (c) {
+      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
+    });
+  }
+  function hideSuggestions() {
+    addBoatSuggestions.hidden = true;
+    addBoatSuggestions.innerHTML = '';
+    suggestionItems = [];
+    suggestionActiveIndex = -1;
+  }
+  function renderSuggestionActive() {
+    Array.prototype.forEach.call(addBoatSuggestions.children, function (el, i) {
+      el.classList.toggle('active', i === suggestionActiveIndex);
     });
   }
+  function selectSuggestion(item) {
+    addBoatName.value = item.name;
+    hideSuggestions();
+    addBoatName.focus();
+  }
+  function showSuggestionsFor(query) {
+    var q = query.trim().toLowerCase();
+    if (!q) { hideSuggestions(); return; }
+    var matches = nameSuggestionPool.filter(function (s) { return s.name.toLowerCase().indexOf(q) !== -1; }).slice(0, 20);
+    suggestionItems = matches;
+    suggestionActiveIndex = -1;
+    if (!matches.length) { hideSuggestions(); return; }
+    addBoatSuggestions.innerHTML = '';
+    matches.forEach(function (item) {
+      var div = document.createElement('div');
+      div.className = 'suggestion-item';
+      var 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));
+      }
+      div.addEventListener('mousedown', function (e) { e.preventDefault(); selectSuggestion(item); });
+      addBoatSuggestions.appendChild(div);
+    });
+    addBoatSuggestions.hidden = false;
+  }
 
   function loadHandicapRegister(force) {
     if (!race.vetEnabled) return;
@@ -1374,9 +1426,32 @@ tbody tr.dnf td { color: var(--muted); }
     setStatus('');
     render();
   }
-  addBoatBtn.addEventListener('click', addBoat);
+  addBoatBtn.addEventListener('click', function () { hideSuggestions(); addBoat(); });
+  addBoatName.addEventListener('input', function () { showSuggestionsFor(addBoatName.value); });
+  addBoatName.addEventListener('focus', function () {
+    if (addBoatName.value.trim()) showSuggestionsFor(addBoatName.value);
+  });
+  addBoatName.addEventListener('blur', function () { hideSuggestions(); });
   addBoatName.addEventListener('keydown', function (e) {
-    if (e.key === 'Enter') { e.preventDefault(); addBoat(); }
+    if (e.key === 'ArrowDown' && suggestionItems.length) {
+      e.preventDefault();
+      suggestionActiveIndex = (suggestionActiveIndex + 1) % suggestionItems.length;
+      renderSuggestionActive();
+    } else if (e.key === 'ArrowUp' && suggestionItems.length) {
+      e.preventDefault();
+      suggestionActiveIndex = (suggestionActiveIndex - 1 + suggestionItems.length) % suggestionItems.length;
+      renderSuggestionActive();
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      if (suggestionActiveIndex >= 0 && suggestionItems[suggestionActiveIndex]) {
+        selectSuggestion(suggestionItems[suggestionActiveIndex]);
+      } else {
+        hideSuggestions();
+        addBoat();
+      }
+    } else if (e.key === 'Escape') {
+      hideSuggestions();
+    }
   });
 
   downloadCsvBtn.addEventListener('click', function () {
@@ -1766,6 +1841,26 @@ module.exports = function (app) {
       });
   }
 
+  // SignalK resource ids must be UUIDs (the resources-provider rejects
+  // anything else) — this derives one deterministically from a stable seed
+  // string, so re-publishing the same course/mark updates the same
+  // resource instead of leaving a new one behind every time it's saved.
+  function deterministicUuid(seed) {
+    const hash = crypto.createHash('sha1').update(seed).digest('hex');
+    return (
+      hash.slice(0, 8) +
+      '-' +
+      hash.slice(8, 12) +
+      '-4' +
+      hash.slice(13, 16) +
+      '-' +
+      ((parseInt(hash[16], 16) & 0x3) | 0x8).toString(16) +
+      hash.slice(17, 20) +
+      '-' +
+      hash.slice(20, 32)
+    );
+  }
+
   function waypointResource(name, pt) {
     return {
       name,
@@ -1797,7 +1892,7 @@ module.exports = function (app) {
     if (!app.resourcesApi || typeof app.resourcesApi.setResource !== 'function') return;
     try {
       const points = [];
-      const put = (id, name, pt) => app.resourcesApi.setResource('waypoints', id, waypointResource(name, pt));
+      const put = (seed, name, pt) => app.resourcesApi.setResource('waypoints', deterministicUuid(seed), waypointResource(name, pt));
       if (race.course.startLine) {
         await put(`race-${race.id}-start-pin`, `${race.name} — Start (pin)`, race.course.startLine[0]);
         await put(`race-${race.id}-start-committee`, `${race.name} — Start (committee)`, race.course.startLine[1]);
@@ -1813,7 +1908,7 @@ module.exports = function (app) {
         points.push(race.course.finishLine[0], race.course.finishLine[1]);
       }
       if (points.length >= 2) {
-        await app.resourcesApi.setResource('routes', `race-${race.id}-course`, routeResource(race.name, points));
+        await app.resourcesApi.setResource('routes', deterministicUuid(`race-${race.id}-course`), routeResource(race.name, points));
       }
     } catch (e) {
       app.debug('race-control: could not publish course to SignalK resources: ' + e.message);
@@ -1832,7 +1927,7 @@ module.exports = function (app) {
         const live = getLivePosition(boat.mmsi);
         if (!live) return;
         if (!boat.track) boat.track = [];
-        boat.track.push({ t: Date.now(), lat: live.lat, lon: live.lon });
+        boat.track.push({ t: Date.now(), lat: live.lat, lon: live.lon, sog: live.sogMs });
         if (boat.track.length > 2000) boat.track.shift();
         changed = true;
       });
@@ -2696,6 +2791,32 @@ module.exports = function (app) {
       }
     });
 
+    // Background chart tiles for the webapp's course/replay map — same
+    // "best-effort, never fails the caller" spirit as /waypoints. Only
+    // tilelayer-type chart resources are usable here (a plain XYZ tile URL
+    // template); WMS/WMTS/mapstyleJSON/S-57 sources need more than a tile
+    // layer to render and are left for a future version. The webapp falls
+    // back to public OpenStreetMap/OpenSeaMap tiles when this returns none,
+    // same as freeboard-sk itself does with no chart provider installed.
+    router.get('/charts', async (req, res) => {
+      if (!app.resourcesApi || typeof app.resourcesApi.listResources !== 'function') {
+        return res.json({ charts: [] });
+      }
+      try {
+        const data = await app.resourcesApi.listResources('charts', {});
+        const charts = Object.keys(data || {})
+          .map((id) => {
+            const c = data[id] || {};
+            if (c.type !== 'tilelayer' || !c.url) return null;
+            return { id, name: c.name || id, url: c.url, minzoom: c.minzoom, maxzoom: c.maxzoom, bounds: c.bounds };
+          })
+          .filter(Boolean);
+        res.json({ charts });
+      } catch (e) {
+        res.json({ charts: [] });
+      }
+    });
+
     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' });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "signalk-race-control",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "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>",

package/public/app.js

@@ -31,6 +31,10 @@
   let replayPlayTimer = null;
   let replayPlayLastTick = null;
   let waypoints = []; // [{id, name, lat, lon}] from SignalK resources, for the course editor's "Pick a waypoint" dropdown
+  let chartMap = null; // Leaflet map, created lazily once the chart section is first expanded
+  let chartLayerGroup = null; // holds everything renderChart() redraws, cleared and rebuilt each call
+  let chartActiveRaceId; // which race's bounds were last auto-fit, so switching races re-fits once
+  let chartFitDone = false;
 
   const raceSelect = document.getElementById('raceSelect');
   const newRaceBtn = document.getElementById('newRaceBtn');
@@ -83,6 +87,7 @@
   const saveCourseBtn = document.getElementById('saveCourseBtn');
   const courseStatusText = document.getElementById('courseStatusText');
   const courseChart = document.getElementById('courseChart');
+  const chartEmptyMsg = document.getElementById('chartEmptyMsg');
   const replayControls = document.getElementById('replayControls');
   const replaySlider = document.getElementById('replaySlider');
   const replayTimeLabel = document.getElementById('replayTimeLabel');
@@ -1477,79 +1482,123 @@
 
   const CHART_PALETTE = ['#38bdf8', '#fbbf24', '#f472b6', '#a78bfa', '#34d399', '#fb923c', '#60a5fa', '#facc15'];
 
-  // Simple equirectangular fit (longitude scaled by cos(mean latitude) so
-  // the small area a race course covers looks roughly to-scale) mapped into
-  // the SVG's viewBox with padding. Re-derived on every render rather than
-  // held fixed, since the bounding box grows as tracks come in.
-  function buildProjection(points, width, height, padding) {
-    const meanLat = points.reduce((s, p) => s + p.lat, 0) / points.length;
-    const cosLat = Math.cos((meanLat * Math.PI) / 180) || 1;
-    const xs = points.map((p) => p.lon * cosLat);
-    const ys = points.map((p) => -p.lat);
-    const minX = Math.min(...xs);
-    const maxX = Math.max(...xs);
-    const minY = Math.min(...ys);
-    const maxY = Math.max(...ys);
-    const spanX = Math.max(maxX - minX, 1e-9);
-    const spanY = Math.max(maxY - minY, 1e-9);
-    const scale = Math.min((width - 2 * padding) / spanX, (height - 2 * padding) / spanY);
-    const offX = padding + (width - 2 * padding - spanX * scale) / 2;
-    const offY = padding + (height - 2 * padding - spanY * scale) / 2;
-    return (p) => ({ x: offX + (p.lon * cosLat - minX) * scale, y: offY + (-p.lat - minY) * scale });
+  function ll(pt) {
+    return [pt.lat, pt.lon];
   }
 
-  function renderChart() {
-    if (!raceState) {
-      courseChart.innerHTML = '';
-      replayControls.hidden = true;
-      return;
+  function midpoint(a, b) {
+    return { lat: (a.lat + b.lat) / 2, lon: (a.lon + b.lon) / 2 };
+  }
+
+  // Created lazily, the first time the chart actually has somewhere to
+  // render into — Leaflet can't size a map inside a still-hidden container,
+  // and the course section starts collapsed.
+  function ensureChartMap() {
+    if (chartMap || typeof L === 'undefined') return chartMap;
+    chartMap = L.map(courseChart, { attributionControl: true }).setView([0, 0], 2);
+    chartLayerGroup = L.layerGroup().addTo(chartMap);
+    addChartBaseLayers(chartMap);
+    return chartMap;
+  }
+
+  // Prefers whatever tile-based chart resource this SignalK server has
+  // registered (e.g. a locally cached raster chart) — same as freeboard-sk
+  // itself would use. Falls back to public OpenStreetMap + OpenSeaMap
+  // tiles when none is configured, which is also freeboard-sk's own
+  // fallback with no chart provider installed.
+  async function addChartBaseLayers(map) {
+    let tileCharts = [];
+    try {
+      const data = await fetchJSON(`${API}/charts`);
+      tileCharts = data.charts || [];
+    } catch (e) {
+      tileCharts = [];
+    }
+    if (tileCharts.length) {
+      tileCharts.forEach((c) => {
+        const opts = { maxZoom: c.maxzoom || 19, minZoom: c.minzoom || 0, attribution: c.name || '' };
+        if (Array.isArray(c.bounds) && c.bounds.length === 4) {
+          opts.bounds = [
+            [c.bounds[1], c.bounds[0]],
+            [c.bounds[3], c.bounds[2]]
+          ];
+        }
+        L.tileLayer(c.url, opts).addTo(map);
+      });
+    } else {
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 19,
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      }).addTo(map);
+      L.tileLayer('https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
+        maxZoom: 18,
+        attribution: '&copy; <a href="https://www.openseamap.org">OpenSeaMap</a>'
+      }).addTo(map);
     }
-    const course = raceState.course || { startLine: null, marks: [], finishLine: null };
-    const boatsWithTrack = Object.values(raceState.boats || {}).filter((b) => b.track && b.track.length);
+  }
 
-    const allPoints = [];
-    if (course.startLine) allPoints.push(...course.startLine);
-    if (course.finishLine) allPoints.push(...course.finishLine);
-    allPoints.push(...course.marks);
-    boatsWithTrack.forEach((b) => allPoints.push(...b.track));
+  function renderChart() {
+    if (courseBody.hidden) return; // nothing to size a map into yet
+    const map = ensureChartMap();
+    if (!map) return; // Leaflet didn't load (offline, blocked) — rest of the app is unaffected
+    chartLayerGroup.clearLayers();
+
+    if (chartActiveRaceId !== activeRaceId) {
+      chartActiveRaceId = activeRaceId;
+      chartFitDone = false;
+    }
 
-    if (allPoints.length < 2) {
-      courseChart.innerHTML =
-        '<text x="400" y="250" text-anchor="middle" fill="var(--muted)" font-size="14">Add a course, then start the race, to see the chart here</text>';
+    if (!raceState) {
+      chartEmptyMsg.hidden = false;
       replayControls.hidden = true;
       return;
     }
 
-    const width = 800;
-    const height = 500;
-    const proj = buildProjection(allPoints, width, height, 40);
-    const parts = [];
+    const course = raceState.course || { startLine: null, marks: [], finishLine: null };
+    const boatsWithTrack = Object.values(raceState.boats || {}).filter((b) => b.track && b.track.length);
+    // Waypoints this same race already published back as its own start/
+    // finish/marks (see publishCourseResources server-side) would otherwise
+    // double up here — once as a plain waypoint pin, once as the actual
+    // course element — so they're left out of the generic waypoint layer.
+    const ownPrefix = `${raceState.name} — `;
+    const otherWaypoints = waypoints.filter((w) => !w.name || !w.name.startsWith(ownPrefix));
+
+    const boundsPts = [];
+    if (course.startLine) boundsPts.push(...course.startLine);
+    if (course.finishLine) boundsPts.push(...course.finishLine);
+    boundsPts.push(...course.marks);
+    otherWaypoints.forEach((w) => boundsPts.push(w));
+    boatsWithTrack.forEach((b) => boundsPts.push(...b.track));
+    chartEmptyMsg.hidden = boundsPts.length > 0;
+
+    otherWaypoints.forEach((w) => {
+      L.circleMarker(ll(w), { radius: 4, weight: 1, color: 'var(--muted)', fillColor: 'var(--panel)', fillOpacity: 0.6 })
+        .bindTooltip(`<span style="color:var(--muted)">${escapeHtml(w.name)}</span>`, { permanent: true, direction: 'top', offset: [0, -6], className: 'waypoint-label' })
+        .addTo(chartLayerGroup);
+    });
 
     const coursePts = [];
-    if (course.startLine) coursePts.push({ lat: (course.startLine[0].lat + course.startLine[1].lat) / 2, lon: (course.startLine[0].lon + course.startLine[1].lon) / 2 });
+    if (course.startLine) coursePts.push(midpoint(course.startLine[0], course.startLine[1]));
     course.marks.forEach((m) => coursePts.push(m));
-    if (course.finishLine) coursePts.push({ lat: (course.finishLine[0].lat + course.finishLine[1].lat) / 2, lon: (course.finishLine[0].lon + course.finishLine[1].lon) / 2 });
+    if (course.finishLine) coursePts.push(midpoint(course.finishLine[0], course.finishLine[1]));
     if (coursePts.length >= 2) {
-      const d = coursePts.map((p, i) => (i === 0 ? 'M' : 'L') + proj(p).x.toFixed(1) + ',' + proj(p).y.toFixed(1)).join(' ');
-      parts.push(`<path d="${d}" fill="none" stroke="var(--muted)" stroke-width="1.5" stroke-dasharray="4,4" />`);
+      L.polyline(coursePts.map(ll), { color: 'var(--muted)', weight: 1.5, dashArray: '4,4' }).addTo(chartLayerGroup);
     }
 
     if (course.startLine) {
-      const a = proj(course.startLine[0]);
-      const b = proj(course.startLine[1]);
-      parts.push(`<line x1="${a.x}" y1="${a.y}" x2="${b.x}" y2="${b.y}" stroke="var(--good)" stroke-width="2" />`);
-      parts.push(`<text x="${(a.x + b.x) / 2}" y="${(a.y + b.y) / 2 - 8}" fill="var(--good)" font-size="11" text-anchor="middle">Start</text>`);
+      L.polyline(course.startLine.map(ll), { color: 'var(--good)', weight: 2 })
+        .bindTooltip('<span style="color:var(--good)">Start</span>', { permanent: true, direction: 'center', className: 'mark-label' })
+        .addTo(chartLayerGroup);
     }
     if (course.finishLine) {
-      const a = proj(course.finishLine[0]);
-      const b = proj(course.finishLine[1]);
-      parts.push(`<line x1="${a.x}" y1="${a.y}" x2="${b.x}" y2="${b.y}" stroke="var(--accent)" stroke-width="2" />`);
-      parts.push(`<text x="${(a.x + b.x) / 2}" y="${(a.y + b.y) / 2 - 8}" fill="var(--accent)" font-size="11" text-anchor="middle">Finish</text>`);
+      L.polyline(course.finishLine.map(ll), { color: 'var(--accent)', weight: 2 })
+        .bindTooltip('<span style="color:var(--accent)">Finish</span>', { permanent: true, direction: 'center', className: 'mark-label' })
+        .addTo(chartLayerGroup);
     }
     course.marks.forEach((m, i) => {
-      const p = proj(m);
-      parts.push(`<circle cx="${p.x}" cy="${p.y}" r="5" fill="var(--bg)" stroke="var(--text)" stroke-width="1.5" />`);
-      parts.push(`<text x="${p.x}" y="${p.y - 10}" fill="var(--text)" font-size="11" text-anchor="middle">${escapeHtml(m.name || String(i + 1))}</text>`);
+      L.circleMarker(ll(m), { radius: 5, weight: 1.5, color: 'var(--text)', fillColor: 'var(--bg)', fillOpacity: 1 })
+        .bindTooltip(`<span style="color:var(--text)">${escapeHtml(m.name || String(i + 1))}</span>`, { permanent: true, direction: 'top', offset: [0, -8], className: 'mark-label' })
+        .addTo(chartLayerGroup);
     });
 
     let minT = Infinity;
@@ -1577,16 +1626,34 @@
     // observation instead, same as before this existed.
     const MAX_INTERP_GAP_MS = 5 * 60 * 1000;
 
+    // A speed pickup between consecutive samples (gust, better trim,
+    // planing) is more useful marked right on the trace than buried in a
+    // separate speed graph. Drawn in the boat's own colour (like the rest of
+    // its trace) rather than a fixed one, since a shared colour would clash
+    // with whichever boat's own palette entry happens to match it; the ring
+    // shape (unfilled, sized by how much faster) is what sets it apart from
+    // the regular sample dots and the solid current-position dot.
+    const SPEED_INCREASE_MS = 1.0; // m/s (~1.9 kn) between ~15s samples
+
     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" />`);
+      L.polyline(pts.map(ll), { color, weight: 1.5, opacity: 0.85 }).addTo(chartLayerGroup);
       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" />`);
+        L.circleMarker(ll(pt), { radius: 2, weight: 0, color, fillColor: color, fillOpacity: 0.7 }).addTo(chartLayerGroup);
       });
+      for (let i = 1; i < pts.length; i++) {
+        const prevPt = pts[i - 1];
+        const pt = pts[i];
+        if (typeof prevPt.sog !== 'number' || typeof pt.sog !== 'number') continue;
+        const delta = pt.sog - prevPt.sog;
+        if (delta < SPEED_INCREASE_MS) continue;
+        const r = Math.min(4 + delta * 2, 10);
+        L.circleMarker(ll(pt), { radius: r, weight: 2, color, fill: false })
+          .bindTooltip(`${escapeHtml(b.name)}: sped up to ${(pt.sog * 1.94384).toFixed(1)} kn`)
+          .addTo(chartLayerGroup);
+      }
 
       const prev = pts[pts.length - 1];
       let current = prev;
@@ -1599,16 +1666,22 @@
           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>`);
+      const curOpts = interpolated
+        ? { radius: 4, color, weight: 1.5, dashArray: '2,1.5', fillColor: color, fillOpacity: 0.35 }
+        : { radius: 4, color, weight: 0, fillColor: color, fillOpacity: 1 };
+      L.circleMarker(ll(current), curOpts)
+        .bindTooltip(`<span style="color:${color}">${escapeHtml(b.name)}</span>`, { permanent: true, direction: 'right', offset: [7, 0], className: 'boat-label' })
+        .addTo(chartLayerGroup);
     });
 
-    courseChart.innerHTML = parts.join('');
+    if (!chartFitDone && boundsPts.length) {
+      if (boundsPts.length === 1) {
+        map.setView(ll(boundsPts[0]), 15);
+      } else {
+        map.fitBounds(boundsPts.map(ll), { padding: [30, 30] });
+      }
+      chartFitDone = true;
+    }
 
     replayControls.hidden = boatsWithTrack.length === 0 || !isFinite(minT);
     if (!replayControls.hidden && document.activeElement !== replaySlider) {
@@ -2373,7 +2446,13 @@
   courseToggleBtn.addEventListener('click', () => {
     courseBody.hidden = !courseBody.hidden;
     courseToggleBtn.textContent = (courseBody.hidden ? '▸' : '▾') + ' Course & chart';
-    if (!courseBody.hidden) renderChart();
+    if (!courseBody.hidden) {
+      renderChart();
+      // The map may have been created (or last sized) while its container
+      // was hidden or a different size — Leaflet doesn't pick that up on
+      // its own.
+      if (chartMap) setTimeout(() => chartMap.invalidateSize(), 0);
+    }
   });
   startTimerToggleBtn.addEventListener('click', () => {
     startTimerBody.hidden = !startTimerBody.hidden;

package/public/index.html

@@ -4,6 +4,7 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Race Control</title>
+  <link rel="stylesheet" href="vendor/leaflet/leaflet.css" />
   <link rel="stylesheet" href="style.css" />
 </head>
 <body>
@@ -86,7 +87,8 @@
           <span id="courseStatusText" class="status"></span>
         </div>
         <div class="chart-wrap">
-          <svg id="courseChart" viewBox="0 0 800 500" preserveAspectRatio="xMidYMid meet"></svg>
+          <div id="courseChart" class="chart-map"></div>
+          <p id="chartEmptyMsg" class="empty chart-empty-msg" hidden>Add a course, then start the race, to see the chart here</p>
           <div id="replayControls" class="replay-controls" hidden>
             <input type="range" id="replaySlider" min="0" max="100" value="100" />
             <span id="replayTimeLabel">Live</span>
@@ -171,6 +173,7 @@
     </div>
     <p id="emptyMsg" class="empty" hidden>No boats added yet. Use "Add Boat" above to enter the fleet.</p>
   </main>
+  <script src="vendor/leaflet/leaflet.js"></script>
   <script src="app.js"></script>
 </body>
 </html>

package/public/style.css

@@ -398,17 +398,49 @@ main {
 
 .chart-wrap {
   margin-top: 1rem;
+  position: relative;
+}
+
+.chart-empty-msg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+  pointer-events: none;
+  z-index: 1000;
+  background: var(--panel);
+  padding: 0.5rem 0.9rem;
+  border-radius: 6px;
+  border: 1px solid var(--border);
 }
 
-#courseChart {
+.chart-map {
   width: 100%;
   max-width: 800px;
-  height: auto;
+  height: 500px;
   background: var(--panel);
   border: 1px solid var(--border);
   border-radius: 8px;
 }
 
+.chart-map .leaflet-tooltip.mark-label,
+.chart-map .leaflet-tooltip.waypoint-label,
+.chart-map .leaflet-tooltip.boat-label {
+  background: none;
+  border: none;
+  box-shadow: none;
+  padding: 0 0 0 4px;
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.chart-map .leaflet-tooltip.waypoint-label {
+  font-weight: 400;
+  opacity: 0.85;
+}
+
 .replay-controls {
   margin-top: 0.5rem;
   display: flex;

package/public/vendor/leaflet/LICENSE

@@ -0,0 +1,26 @@
+BSD 2-Clause License
+
+Copyright (c) 2010-2023, Volodymyr Agafonkin
+Copyright (c) 2010-2011, CloudMade
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.