signalk-race-control 0.7.0 → 0.9.0

package/README.md

@@ -99,12 +99,27 @@ and a live projected finishing order — during and after the race.
   slow down or take a longer approach); negative means you're behind schedule to make
   the line before the gun. Disappears once the race actually starts, since the
   pre-start approach is moot by then.
-- **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
+- **Course & chart** — set the start line, an ordered list of rounding marks, and the
+  finish line by whichever's easiest: type lat/lon directly, 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, or use the position button — it reads **Pick on
+  map** while that point is still unset (arm it, then click the spot on the chart
+  below), and switches to **Use my position** once it has one, to re-centre it on
+  wherever you are right now instead. Setting a position this way (map click or self
+  position — not while still typing lat/lon by hand) also suggests a name for it from
+  OpenStreetMap, when there's a real charted place right there and the name field is
+  still empty; typing or picking a waypoint always wins over the suggestion. A mark's
+  own **Pick on map** only turns on once the start line has a position — before that the
+  chart has nothing to anchor its zoom to and is still showing the whole world, not much
+  use to click into (typed lat/lon, autocomplete, and "Use my position" all stay
+  available regardless). 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 +133,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.9.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>",