signalk-race-control 0.9.0 → 0.10.0

package/README.md

@@ -19,9 +19,11 @@ and a live projected finishing order — during and after the race.
 - **Individual start times** — override the race's single start time for one boat at
   a time (in its own **Start time** column, right next to Finish time): for a
   staggered/pursuit start, or to correct a boat that didn't actually get away with
-  the fleet. Left blank, a boat just uses the race's own start time as before.
-  Starting or resetting the race clears every boat's override along with its finish
-  time, ready for a clean re-run.
+  the fleet. Left blank, a boat just uses the race's own start time — shown there in
+  a dimmed/italic style once the race starts, so it reads as "racing, using the fleet
+  start" rather than as not having started; setting its own time (or clicking **Now**)
+  switches it to a real override, shown normally. Starting or resetting the race clears
+  every boat's override along with its finish time, ready for a clean re-run.
 - **Add/remove boats explicitly** — type a name (autocompletes against the VET
   register, the cross-race boat registry, and any live AIS/self vessel — matching
   anywhere in the name, not just the start) and click **Add Boat**. Boats aren't
@@ -101,11 +103,17 @@ and a live projected finishing order — during and after the race.
   pre-start approach is moot by then.
 - **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
+  against existing SignalK waypoints (e.g. ones already placed from a chart plotter) — or
+  a real navigation aid's name (a buoy, beacon, light, mark — OpenSeaMap's own data,
+  searched live) within whatever area the chart is currently showing (tagged
+  "OpenSeaMap" to tell it apart from a saved waypoint) — 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
+  below — a click is rarely pixel-perfect on the actual mark, so if there's a real
+  navigation aid within 30m of wherever was clicked, it asks whether to snap to that
+  aid's exact position and name instead of the raw click), 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
@@ -116,10 +124,18 @@ and a live projected finishing order — during and after the race.
   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
+  tile-based chart resource(s) this SignalK server has registered, or falls back to
+  public OpenStreetMap tiles when none is configured (same fallback freeboard-sk itself
+  uses). Registering more than one chart offers them as alternative base layers via the
+  layer switcher (top right of the map) rather than stacking them all at once — a plain
+  street map on top would otherwise bury a real nautical chart underneath it. When one of
+  them is Eniro's plain map (not "Eniro sjø"), that's the one shown by default — the
+  easiest to actually read at a glance; otherwise it's whichever one loaded first.
+  OpenSeaMap's
+  navigation aids (buoys, lights, marks) are offered there too, as an overlay on top of
+  whichever base chart is active, on by default. Overlaid on all of that 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

package/index.js

@@ -509,6 +509,7 @@ tbody tr.dnf td { color: var(--muted); }
 .vs-self .self-tag { font-size: 0.7rem; letter-spacing: 0.04em; color: var(--muted); font-style: italic; }
 .finish-cell { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
 .finish-time-input, .start-time-input { padding: 0.3rem 0.4rem; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 4px; font-variant-numeric: tabular-nums; }
+.start-time-input.inherited-value { color: var(--muted); font-style: italic; }
 .finish-now-btn, .finish-clear-btn, .finish-dnf-btn, .undo-dnf-btn, .remove-boat-btn { padding: 0.3rem 0.6rem; font-size: 0.8rem; background: transparent; color: var(--text); }
 .finish-dnf-btn { border-color: var(--bad); color: var(--bad); }
 .dnf-pos { display: block; font-size: 0.7rem; color: var(--muted); }
@@ -1367,9 +1368,15 @@ tbody tr.dnf td { color: var(--muted); }
         }
         syncVetSelectValue(row, b.tcf);
       }
+      // See the equivalent block in app.js's render() — a boat with no
+      // start time of its own already starts with the fleet, so the
+      // input shows the inherited race start time (dimmed) instead of
+      // blank, without turning it into a real per-boat override.
+      var effectiveStart = b.startTime != null ? b.startTime : race.startTime;
       if (document.activeElement !== row.startTimeInput) {
-        row.startTimeInput.value = race.multiDay ? tsToDateTimeInputValue(b.startTime) : tsToTimeInputValue(b.startTime);
+        row.startTimeInput.value = race.multiDay ? tsToDateTimeInputValue(effectiveStart) : tsToTimeInputValue(effectiveStart);
       }
+      row.startTimeInput.classList.toggle('inherited-value', b.startTime == null && race.startTime != null);
       var canStart = !!race.startTime;
       row.startTimeInput.disabled = !canStart;
       row.startNowBtn.disabled = !canStart;

package/package.json

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

@@ -1072,15 +1072,24 @@
   // 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) {
+  // getExtra (optional) — async (query) => [{name, lat, lon, source}] —
+  // supplements getPool's synchronous, immediate matches with a slower
+  // source merged in once it resolves (used for the course-point rows'
+  // live OpenStreetMap search; see searchOsmPlaces). Debounced on its own
+  // so the instant local matches aren't held up waiting for it, and
+  // request-numbered so a slow older lookup can't clobber a newer one.
+  function attachAutocomplete(input, dropdown, getPool, onSelect, getExtra) {
     let items = [];
     let activeIndex = -1;
+    let extraRequestId = 0;
+    let extraDebounceTimer = null;
 
     function hide() {
       dropdown.hidden = true;
       dropdown.innerHTML = '';
       items = [];
       activeIndex = -1;
+      clearTimeout(extraDebounceTimer);
     }
     function renderActive() {
       Array.from(dropdown.children).forEach((el, i) => el.classList.toggle('active', i === activeIndex));
@@ -1089,15 +1098,7 @@
       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);
+    function renderMatches(matches, q) {
       items = matches;
       activeIndex = -1;
       if (!matches.length) {
@@ -1119,6 +1120,7 @@
             '</mark>' +
             escapeHtml(item.name.slice(idx + q.length));
         }
+        if (item.source === 'osm') div.innerHTML += '<span class="suggestion-source">OpenSeaMap</span>';
         // mousedown (not click) fires before the input's blur, same reason
         // as the boat-name suggestions above.
         div.addEventListener('mousedown', (e) => {
@@ -1129,6 +1131,30 @@
       });
       dropdown.hidden = false;
     }
+    function showFor(query) {
+      const q = query.trim().toLowerCase();
+      clearTimeout(extraDebounceTimer);
+      if (!q) {
+        hide();
+        return;
+      }
+      const localMatches = getPool()
+        .filter((it) => it.name.toLowerCase().includes(q))
+        .slice(0, 20);
+      renderMatches(localMatches, q);
+      if (!getExtra) return;
+      extraDebounceTimer = setTimeout(() => {
+        const requestId = ++extraRequestId;
+        getExtra(query)
+          .then((extraItems) => {
+            if (requestId !== extraRequestId || !extraItems || !extraItems.length) return;
+            const seen = new Set(localMatches.map((m) => m.name.toLowerCase()));
+            const merged = localMatches.concat(extraItems.filter((it) => !seen.has(it.name.toLowerCase()))).slice(0, 20);
+            renderMatches(merged, q);
+          })
+          .catch(() => {});
+      }, 400);
+    }
 
     input.addEventListener('input', () => showFor(input.value));
     input.addEventListener('focus', () => {
@@ -1153,6 +1179,93 @@
     });
   }
 
+  // Best-effort: searches OpenSeaMap's own underlying data — OSM's
+  // seamark:* tags, the same data its tiles are rendered from, queried
+  // via the Overpass API — for named navigation aids (buoys, beacons,
+  // lights, marks) within the chart's current visible area. Used to
+  // supplement the course editor's waypoint autocomplete: a rounding mark
+  // is far more likely to already be a real charted navigation aid than
+  // an arbitrary place name, so this is scoped to seamark:type features
+  // specifically rather than OSM place names in general. Silently returns
+  // nothing on any failure, timeout, or when the chart hasn't been
+  // created yet (course section not expanded) — same spirit as the
+  // reverse-geocode name suggestion.
+  // Public Overpass mirrors are individually flaky (rate limits, regional-
+  // only data, outages) — tried one at a time, in order, falling through
+  // to the next on any failure or timeout. Deliberately sequential, not
+  // raced in parallel: a fast mirror with an incomplete regional extract
+  // would otherwise "win" with a confident-looking empty result and mask
+  // a real answer a fuller (but slower) mirror would have found. Returns
+  // [] if every mirror fails.
+  const OVERPASS_ENDPOINTS = ['https://overpass.kumi.systems/api/interpreter', 'https://overpass.osm.ch/api/interpreter'];
+  async function queryOverpass(overpassQuery) {
+    for (const base of OVERPASS_ENDPOINTS) {
+      const controller = new AbortController();
+      const timer = setTimeout(() => controller.abort(), 7000);
+      try {
+        const res = await fetch(`${base}?data=${encodeURIComponent(overpassQuery)}`, { signal: controller.signal });
+        if (!res.ok) continue;
+        const data = await res.json();
+        if (data && Array.isArray(data.elements)) return data.elements;
+      } catch (e) {
+        // try the next endpoint
+      } finally {
+        clearTimeout(timer);
+      }
+    }
+    return [];
+  }
+
+  function seamarkElementsToResults(elements) {
+    const seen = new Set();
+    const results = [];
+    elements.forEach((el) => {
+      const name = el.tags && (el.tags['seamark:name'] || el.tags.name);
+      if (!name || typeof el.lat !== 'number' || seen.has(name.toLowerCase())) return;
+      seen.add(name.toLowerCase());
+      results.push({ name, lat: el.lat, lon: el.lon, source: 'osm' });
+    });
+    return results;
+  }
+
+  async function searchOsmPlaces(query) {
+    const q = query.trim();
+    if (!q || !chartMap) return [];
+    const escaped = q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const b = chartMap.getBounds();
+    const bbox = `${b.getSouth()},${b.getWest()},${b.getNorth()},${b.getEast()}`;
+    const overpassQuery =
+      `[out:json][timeout:9];(node["seamark:type"]["seamark:name"~"${escaped}",i](${bbox});` +
+      `node["seamark:type"]["name"~"${escaped}",i](${bbox}););out body 8;`;
+    return seamarkElementsToResults(await queryOverpass(overpassQuery));
+  }
+
+  // Used right after a map click: is there a real charted navigation aid
+  // within snapping distance of wherever was clicked? A click is rarely
+  // pixel-perfect on the actual mark, so offering to snap to the nearest
+  // one (rather than silently using the imprecise raw click) means the
+  // recorded position is exactly right when there's something real there
+  // to be exact about.
+  const SNAP_RADIUS_M = 30;
+  async function findNearbySeamark(lat, lon) {
+    if (!chartMap) return null;
+    const overpassQuery = `[out:json][timeout:9];node(around:${SNAP_RADIUS_M},${lat},${lon})["seamark:type"];out body 5;`;
+    const elements = await queryOverpass(overpassQuery);
+    const candidates = seamarkElementsToResults(elements);
+    if (!candidates.length) return null;
+    candidates.sort((a, b) => distanceMeters(lat, lon, a.lat, a.lon) - distanceMeters(lat, lon, b.lat, b.lon));
+    return candidates[0];
+  }
+
+  function distanceMeters(lat1, lon1, lat2, lon2) {
+    const R = 6371000;
+    const rad = Math.PI / 180;
+    const dLat = (lat2 - lat1) * rad;
+    const dLon = (lon2 - lon1) * rad;
+    const a = Math.sin(dLat / 2) ** 2 + Math.cos(lat1 * rad) * Math.cos(lat2 * rad) * Math.sin(dLon / 2) ** 2;
+    return 2 * R * Math.asin(Math.sqrt(a));
+  }
+
   // One name+lat+lon+position-button row, shared by start line, finish
   // line, and mark entry. The name field autocompletes against existing
   // SignalK waypoints (e.g. ones already placed on a chart plotter) —
@@ -1230,7 +1343,7 @@
         if (mapPickTarget && mapPickTarget.btn === posBtn) {
           cancelMapPick();
         } else {
-          armMapPick(latInput, lonInput, posBtn, nameInput.placeholder || 'this point', handlePositionSet);
+          armMapPick(latInput, lonInput, nameInput, posBtn, nameInput.placeholder || 'this point', handlePositionSet);
         }
         return;
       }
@@ -1253,7 +1366,8 @@
         latInput.value = wp.lat;
         lonInput.value = wp.lon;
         notifyPositionChanged();
-      }
+      },
+      searchOsmPlaces
     );
 
     updatePosBtnLabel();
@@ -1284,9 +1398,9 @@
   // Arms "pick on map" mode: the next click on the chart fills this row's
   // lat/lon from wherever was clicked. Clicking the same button again, a
   // different row's pick button, or Escape all cancel it.
-  function armMapPick(latInput, lonInput, btn, label, onPositionChanged) {
+  function armMapPick(latInput, lonInput, nameInput, btn, label, onPositionChanged) {
     cancelMapPick();
-    mapPickTarget = { latInput, lonInput, btn, onPositionChanged };
+    mapPickTarget = { latInput, lonInput, nameInput, btn, onPositionChanged };
     btn.classList.add('active');
     courseChart.classList.add('picking');
     setCourseStatus(`Click the map below to place "${label}".`);
@@ -1601,22 +1715,44 @@
     chartMap = L.map(courseChart, { attributionControl: true }).setView([0, 0], 2);
     chartLayerGroup = L.layerGroup().addTo(chartMap);
     addChartBaseLayers(chartMap);
-    chartMap.on('click', (e) => {
+    chartMap.on('click', async (e) => {
       if (!mapPickTarget) return;
       const target = mapPickTarget;
-      target.latInput.value = e.latlng.lat.toFixed(6);
-      target.lonInput.value = e.latlng.lng.toFixed(6);
+      const clickedLat = e.latlng.lat;
+      const clickedLon = e.latlng.lng;
+      target.latInput.value = clickedLat.toFixed(6);
+      target.lonInput.value = clickedLon.toFixed(6);
       cancelMapPick();
       if (target.onPositionChanged) target.onPositionChanged();
+
+      // A click is rarely pixel-perfect on the actual mark — if there's a
+      // real charted navigation aid right where this one landed, ask
+      // before quietly using the imprecise raw click instead.
+      const nearby = await findNearbySeamark(clickedLat, clickedLon);
+      if (!nearby) return;
+      if (!confirm(`Snap to nearby mark "${nearby.name}"?`)) return;
+      target.latInput.value = nearby.lat.toFixed(6);
+      target.lonInput.value = nearby.lon.toFixed(6);
+      if (target.nameInput && !target.nameInput.value.trim()) target.nameInput.value = nearby.name;
+      if (target.onPositionChanged) target.onPositionChanged();
     });
     return chartMap;
   }
 
-  // Prefers whatever tile-based chart resource this SignalK server has
+  // Prefers whatever tile-based chart resource(s) 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.
+  // itself would use. Falls back to public OpenStreetMap tiles when none
+  // is configured, which is also freeboard-sk's own fallback with no
+  // chart provider installed. When more than one chart is registered
+  // they're offered as alternative base layers (only one shown at a time,
+  // picked via the layer control) rather than stacked on top of each
+  // other — stacking silently buried whichever chart happened to load
+  // last under whatever loaded after it, e.g. a plain street map with no
+  // navigation aids covering an actual nautical chart underneath it.
+  // OpenSeaMap's navigation-aids overlay (buoys, lights, marks) is always
+  // offered too, on top of whichever base is active, since a registered
+  // chart isn't guaranteed to already include them the way Kartverket's
+  // does.
   async function addChartBaseLayers(map) {
     let tileCharts = [];
     try {
@@ -1625,6 +1761,8 @@
     } catch (e) {
       tileCharts = [];
     }
+    const baseLayers = {};
+    let defaultKey = null;
     if (tileCharts.length) {
       tileCharts.forEach((c) => {
         const opts = { maxZoom: c.maxzoom || 19, minZoom: c.minzoom || 0, attribution: c.name || '' };
@@ -1634,17 +1772,31 @@
             [c.bounds[3], c.bounds[2]]
           ];
         }
-        L.tileLayer(c.url, opts).addTo(map);
+        const key = c.name || c.id;
+        baseLayers[key] = L.tileLayer(c.url, opts);
+        // Eniro's plain map (not "Eniro sjø", and not Kartverket/Hitta,
+        // which both render very dark) is the easiest one to actually
+        // read at a glance — preferred as the default when it's
+        // registered, same as any other order these come back in.
+        if ((c.id || '').toLowerCase() === 'eniro') defaultKey = key;
       });
     } else {
-      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      baseLayers['OpenStreetMap'] = 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', {
+      });
+    }
+    baseLayers[defaultKey || Object.keys(baseLayers)[0]].addTo(map);
+
+    const overlays = {
+      'Navigation aids (OpenSeaMap)': 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);
+      }).addTo(map)
+    };
+
+    if (Object.keys(baseLayers).length > 1 || Object.keys(overlays).length) {
+      L.control.layers(baseLayers, overlays, { collapsed: true }).addTo(map);
     }
   }
 
@@ -2382,9 +2534,21 @@
         row.vetHandicapVersion = handicapVersion;
       }
       syncVetSelectValue(row, b.tcf);
+      // A boat with no start time of its own already starts with the
+      // fleet — effectiveStartTime (server-side) falls back to the race's
+      // own start time, and elapsed/corrected already reflect that. The
+      // input showing blank instead of that time made it look like the
+      // boat hadn't started at all even while it was actively being
+      // timed; showing the inherited value (dimmed, to mark it as
+      // inherited rather than a boat-specific override) fixes that
+      // without changing what's actually stored — only "Now" or typing a
+      // value turns it into a real per-boat override (e.g. a pursuit
+      // start), same as before.
+      const effectiveStart = b.startTime != null ? b.startTime : raceState.startTime;
       if (document.activeElement !== row.startTimeInput) {
-        row.startTimeInput.value = raceState.multiDay ? tsToDateTimeInputValue(b.startTime) : tsToTimeInputValue(b.startTime);
+        row.startTimeInput.value = raceState.multiDay ? tsToDateTimeInputValue(effectiveStart) : tsToTimeInputValue(effectiveStart);
       }
+      row.startTimeInput.classList.toggle('inherited-value', b.startTime == null && raceState.startTime != null);
       const canStart = !!raceState.startTime;
       row.startTimeInput.disabled = !canStart;
       row.startNowBtn.disabled = !canStart;

package/public/style.css

@@ -120,6 +120,13 @@ button.confirming {
   font-variant-numeric: tabular-nums;
 }
 
+/* Shows the race's own start time when this boat has no override of its
+   own — dimmed to mark it as inherited, not a boat-specific start. */
+.start-time-input.inherited-value {
+  color: var(--muted);
+  font-style: italic;
+}
+
 .controls {
   margin-top: 0.75rem;
   display: flex;
@@ -460,6 +467,20 @@ main {
   opacity: 0.85;
 }
 
+.chart-map .leaflet-control-layers {
+  background: var(--panel);
+  color: var(--text);
+  border: 1px solid var(--border);
+}
+
+.chart-map .leaflet-control-layers-toggle {
+  filter: invert(1);
+}
+
+.chart-map .leaflet-control-layers label {
+  color: var(--text);
+}
+
 .replay-controls {
   margin-top: 0.5rem;
   display: flex;
@@ -610,6 +631,13 @@ main {
   font-weight: 700;
 }
 
+.suggestions .suggestion-item .suggestion-source {
+  float: right;
+  font-size: 0.7rem;
+  color: var(--muted);
+  font-style: italic;
+}
+
 .suggestions .suggestion-item:hover,
 .suggestions .suggestion-item.active {
   background: rgba(56, 189, 248, 0.15);