signalk-race-control 0.4.3 → 0.5.1

package/README.md

@@ -25,7 +25,13 @@ and a live projected finishing order — during and after the race.
 - **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
-  auto-populated from AIS; you control exactly who's racing.
+  auto-populated from AIS; you control exactly who's racing. Rows stay in the order
+  boats were added — adding or removing one doesn't reshuffle the rest — until the
+  race actually starts, when the table switches to rank order; whichever boat is
+  marked **self** always stays on top regardless of phase. The **Boat** column stays
+  pinned in place while scrolling sideways through the rest of the (wide) table, and
+  the page itself isn't width-capped, so a larger screen shows more columns at once
+  without scrolling.
 - **Elapsed / corrected time** — Time-on-Time correction: `corrected = elapsed × TCF`,
   where TCF is edited per boat directly in the webapp and persisted server-side,
   shared by everyone viewing the page.
@@ -73,6 +79,14 @@ and a live projected finishing order — during and after the race.
 - **Editable finish times** — click **Now** to record a finish as it happens, type a
   specific `HH:MM:SS` into the finish-time field to correct a mistimed click, or
   **Clear** to undo. Handles races that cross midnight.
+- **Start timer** — once a start line is set and a start is scheduled, an expandable
+  **Start timer** panel shows a countdown to the gun alongside three live numbers for
+  this vessel specifically (from its own SignalK GPS/speed, not any other tracked
+  boat): distance to the line, ETA to reach it at current speed, and **time to burn** —
+  the countdown minus that ETA. Positive means time to spare (you'll arrive early, so
+  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

package/index.js

@@ -426,7 +426,7 @@ button.confirming { background: var(--bad); color: #2a0a0a; border-color: var(--
 button:disabled { opacity: 0.5; cursor: not-allowed; }
 .status { min-height: 1.2em; margin-top: 0.5rem; font-size: 0.85rem; color: var(--muted); }
 .status.error { color: var(--bad); }
-main { padding: 1rem 1.5rem max(2rem, env(safe-area-inset-bottom)); max-width: 900px; margin: 0 auto; }
+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='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; }
@@ -434,6 +434,8 @@ main { padding: 1rem 1.5rem max(2rem, env(safe-area-inset-bottom)); max-width: 9
 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); }
 tbody td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--border); }
+.boat-name-col { position: sticky; left: 0; z-index: 1; background: var(--bg); }
+thead .boat-name-col { z-index: 2; }
 tbody tr.finished td { color: var(--good); }
 tbody tr.dnf td { color: var(--muted); }
 .dnf-tag { color: var(--bad); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.03em; }
@@ -498,7 +500,7 @@ tbody tr.dnf td { color: var(--muted); }
     <table id="boatsTable">
       <thead>
         <tr>
-          <th>Boat</th>
+          <th class="boat-name-col">Boat</th>
           <th>Sail #</th>
           <th>TCF</th>
           <th id="vetAlternativesTh" hidden>VET alternatives</th>
@@ -817,6 +819,14 @@ tbody tr.dnf td { color: var(--muted); }
         return { boat: boat, elapsedMs: elapsedMs, correctedMs: correctedMs, rankMs: rankMs };
       })
       .sort(function (a, b) {
+        // Self always leads, whatever else is true.
+        var aSelf = a.boat.id === race.selfBoatId;
+        var bSelf = b.boat.id === race.selfBoatId;
+        if (aSelf !== bSelf) return aSelf ? -1 : 1;
+        // Before the race actually starts, nobody has a corrected time to
+        // rank by anyway — leave order exactly as race.boats gave it
+        // (registration order) rather than reshuffling on every add/remove.
+        if (!race.startTime) return 0;
         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;
@@ -938,6 +948,7 @@ tbody tr.dnf td { color: var(--muted); }
     });
     var nameSpan = document.createElement('span');
     var tdName = document.createElement('td');
+    tdName.className = 'boat-name-col';
     tdName.append(selfBtn, nameSpan);
 
     var sailNumberInput = document.createElement('input');

package/package.json

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

@@ -85,6 +85,14 @@
   const replaySpeedSlider = document.getElementById('replaySpeedSlider');
   const replaySpeedLabel = document.getElementById('replaySpeedLabel');
   const replayLiveBtn = document.getElementById('replayLiveBtn');
+  const startTimerSection = document.getElementById('startTimerSection');
+  const startTimerToggleBtn = document.getElementById('startTimerToggleBtn');
+  const startTimerBody = document.getElementById('startTimerBody');
+  const startCountdownValue = document.getElementById('startCountdownValue');
+  const startDtlValue = document.getElementById('startDtlValue');
+  const startEtaValue = document.getElementById('startEtaValue');
+  const startBurnValue = document.getElementById('startBurnValue');
+  const startTimerNote = document.getElementById('startTimerNote');
   const raceImportSection = document.getElementById('raceImportSection');
   const raceImportToggleBtn = document.getElementById('raceImportToggleBtn');
   const raceImportBody = document.getElementById('raceImportBody');
@@ -877,6 +885,123 @@
     return null;
   }
 
+  // ---- Start timer ------------------------------------------------------
+  // Countdown to the scheduled start + a live "distance/ETA to the start
+  // line, time to burn" instrument for this vessel — the same thing a
+  // start-line transit timer app shows, computed from this vessel's own
+  // live position/speed (not any other boat's).
+
+  let selfNav = null; // {lat, lon, sogMs} | null, refreshed on its own poll — see below
+
+  async function fetchSelfNav() {
+    try {
+      const [posLeaf, sogLeaf] = await Promise.all([
+        fetchJSON(`${SK_API}/vessels/self/navigation/position`).catch(() => null),
+        fetchJSON(`${SK_API}/vessels/self/navigation/speedOverGround`).catch(() => null)
+      ]);
+      const v = posLeaf && posLeaf.value;
+      if (!v || typeof v.latitude !== 'number' || typeof v.longitude !== 'number') return null;
+      const sogMs = sogLeaf && typeof sogLeaf.value === 'number' ? sogLeaf.value : null;
+      return { lat: v.latitude, lon: v.longitude, sogMs };
+    } catch (e) {
+      return null;
+    }
+  }
+
+  const MS_TO_KNOTS = 1.9438444924574;
+  function toRad(deg) {
+    return (deg * Math.PI) / 180;
+  }
+
+  // Perpendicular distance from a point to the start-line segment (or to
+  // its nearest end, if the point doesn't fall between the two ends) — a
+  // flat-earth approximation local to the line, which is fine at the scale
+  // of a start line and a boat's approach to it (same simplifying
+  // assumption the course chart's own projection already makes).
+  function distanceToSegmentNm(p, a, b) {
+    const meanLat = (a.lat + b.lat + p.lat) / 3;
+    const cosLat = Math.cos(toRad(meanLat)) || 1;
+    const NM_PER_DEG_LAT = 60;
+    const toXY = (pt) => ({ x: pt.lon * cosLat * NM_PER_DEG_LAT, y: pt.lat * NM_PER_DEG_LAT });
+    const P = toXY(p);
+    const A = toXY(a);
+    const B = toXY(b);
+    const abx = B.x - A.x;
+    const aby = B.y - A.y;
+    const lenSq = abx * abx + aby * aby;
+    let t = lenSq > 0 ? ((P.x - A.x) * abx + (P.y - A.y) * aby) / lenSq : 0;
+    t = Math.max(0, Math.min(1, t));
+    const cx = A.x + abx * t;
+    const cy = A.y + aby * t;
+    const dx = P.x - cx;
+    const dy = P.y - cy;
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+
+  function fmtSignedDuration(ms) {
+    const sign = ms < 0 ? '-' : '+';
+    const s = Math.round(Math.abs(ms) / 1000);
+    const h = Math.floor(s / 3600);
+    const m = Math.floor((s % 3600) / 60);
+    const sec = s % 60;
+    return sign + (h ? `${h}:${String(m).padStart(2, '0')}` : m) + ':' + String(sec).padStart(2, '0');
+  }
+
+  // Shown whenever there's a start line to approach and the race hasn't
+  // actually started yet (pre-start is moot once it has) — refreshes every
+  // tick from the last-polled selfNav, independent of whether that poll
+  // itself just ran.
+  function renderStartTimer() {
+    const hasStartLine = !!(raceState && raceState.course && raceState.course.startLine);
+    startTimerSection.hidden = !raceState || !hasStartLine || !!raceState.startTime;
+    if (startTimerSection.hidden || startTimerBody.hidden) return;
+
+    const target = raceState.scheduledStart;
+    if (!target) {
+      startCountdownValue.textContent = '--:--:--';
+      startDtlValue.textContent = '--';
+      startEtaValue.textContent = '--:--:--';
+      startBurnValue.textContent = '--';
+      startBurnValue.className = 'start-timer-value';
+      startTimerNote.textContent = 'Set a scheduled start time above to see the countdown and burn time here.';
+      return;
+    }
+    const now = Date.now();
+    const toStartMs = target - now;
+    startCountdownValue.textContent = fmtDuration(Math.max(0, toStartMs));
+
+    if (!selfNav) {
+      startDtlValue.textContent = '--';
+      startEtaValue.textContent = '--:--:--';
+      startBurnValue.textContent = '--';
+      startBurnValue.className = 'start-timer-value';
+      startTimerNote.textContent = "Waiting for this vessel's own position from SignalK.";
+      return;
+    }
+    const [a, b] = raceState.course.startLine;
+    const dtlNm = distanceToSegmentNm(selfNav, a, b);
+    startDtlValue.textContent = `${dtlNm.toFixed(2)}nm`;
+
+    if (selfNav.sogMs == null || selfNav.sogMs < 0.25) {
+      startEtaValue.textContent = '--:--:--';
+      startBurnValue.textContent = '--';
+      startBurnValue.className = 'start-timer-value';
+      startTimerNote.textContent = 'Waiting for this vessel to be making way (SOG) to estimate ETA and burn time.';
+      return;
+    }
+    const sogKn = selfNav.sogMs * MS_TO_KNOTS;
+    const etaMs = (dtlNm / sogKn) * 3600 * 1000;
+    startEtaValue.textContent = new Date(now + etaMs).toLocaleTimeString();
+
+    const burnMs = toStartMs - etaMs;
+    startBurnValue.textContent = fmtSignedDuration(burnMs);
+    startBurnValue.className = 'start-timer-value ' + (burnMs >= 0 ? 'early' : 'late');
+    startTimerNote.textContent =
+      burnMs >= 0
+        ? "Positive: time to spare before the gun at this speed — you'll arrive at the line before it, so you have time to burn."
+        : "Negative: you're behind schedule to reach the line at this speed before the gun.";
+  }
+
   // 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
@@ -1482,6 +1607,19 @@
         };
       })
       .sort((a, b) => {
+        // Self always leads, whatever else is true — it's the boat whoever
+        // is looking at this screen cares about finding without hunting
+        // for it.
+        const aSelf = a.boatId === raceState.selfBoatId;
+        const bSelf = b.boatId === raceState.selfBoatId;
+        if (aSelf !== bSelf) return aSelf ? -1 : 1;
+        // Before the race actually starts, nobody has a corrected time to
+        // rank by anyway — sorting by name (or anything else derived) just
+        // reshuffled the rows confusingly every time a boat was added or
+        // removed. Rely on sort's stability and leave order exactly as
+        // Object.values(raceState.boats) gave it (i.e. registration order)
+        // until there's an actual race to rank.
+        if (!raceState.startTime) return 0;
         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;
@@ -1567,6 +1705,7 @@
     nameSpan.className = 'boat-name-text';
 
     const tdName = document.createElement('td');
+    tdName.className = 'boat-name-col';
     tdName.append(selfBtn, nameSpan);
 
     const sailNumberInput = document.createElement('input');
@@ -1854,6 +1993,7 @@
     exportOfflineBtn.hidden = !raceState;
     courseSection.hidden = !raceState;
     raceImportSection.hidden = !raceState || !raceImportEnabled;
+    renderStartTimer();
 
     if (!raceState) {
       emptyMsg.hidden = true;
@@ -1915,20 +2055,28 @@
     const vsSelfMap = computeVsSelf(boats, raceState.selfBoatId);
 
     boats.forEach((b) => {
-      let row = rows.get(b.boatId);
-      if (!row) {
-        row = buildRow(b.boatId);
-        rows.set(b.boatId, row);
-      }
-      // Moving an already-attached node to its sorted position keeps it
-      // intact (focus, in-progress edits) rather than recreating it — but
-      // the move itself still resets a text cursor and closes an open
-      // <select>, so skip it entirely while the user has something in this
-      // row focused. It'll snap to its correct position as soon as they're
-      // done (next render after focus moves away).
-      if (!row.tr.contains(document.activeElement)) {
-        boatsBody.appendChild(row.tr);
+      if (!rows.get(b.boatId)) {
+        rows.set(b.boatId, buildRow(b.boatId));
       }
+    });
+    // Moving already-attached nodes to their sorted position keeps them
+    // intact (focus, in-progress edits) rather than recreating them — but
+    // the move itself still resets a text cursor and closes an open
+    // <select>, so the whole reorder pass is skipped while the user has
+    // anything in ANY row focused, not just the row that would move.
+    // Reordering around a skipped row by moving everyone else in sequence
+    // can still shuffle it to a different spot as a side effect of those
+    // other moves, which is exactly the "keep self on top" guarantee this
+    // was supposed to preserve — so it's all-or-nothing instead. It'll
+    // snap to the fully correct order on the next render once focus moves
+    // away.
+    const anyRowFocused = boats.some((b) => rows.get(b.boatId).tr.contains(document.activeElement));
+    if (!anyRowFocused) {
+      boats.forEach((b) => boatsBody.appendChild(rows.get(b.boatId).tr));
+    }
+
+    boats.forEach((b) => {
+      const row = rows.get(b.boatId);
 
       row.tr.classList.toggle('finished', !!b.finishTime);
       row.tr.classList.toggle('dnf', !!b.dnf);
@@ -2123,6 +2271,11 @@
     courseToggleBtn.textContent = (courseBody.hidden ? '▸' : '▾') + ' Course & chart';
     if (!courseBody.hidden) renderChart();
   });
+  startTimerToggleBtn.addEventListener('click', () => {
+    startTimerBody.hidden = !startTimerBody.hidden;
+    startTimerToggleBtn.textContent = (startTimerBody.hidden ? '▸' : '▾') + ' Start timer';
+    if (!startTimerBody.hidden) renderStartTimer();
+  });
   raceImportToggleBtn.addEventListener('click', () => {
     raceImportBody.hidden = !raceImportBody.hidden;
     raceImportToggleBtn.textContent = (raceImportBody.hidden ? '▸' : '▾') + ' Import boats from Manage2Sail';
@@ -2199,14 +2352,27 @@
     renderChart();
   });
 
+  async function refreshSelfNav() {
+    selfNav = await fetchSelfNav();
+    renderStartTimer();
+  }
+
   async function init() {
     await loadVetEnabled();
     await loadRaceImportEnabled();
-    await Promise.all([loadVessels(), loadBoatRegistry(), loadHandicapRegister(false), loadWaypoints(), loadRacesList()]);
+    await Promise.all([
+      loadVessels(),
+      loadBoatRegistry(),
+      loadHandicapRegister(false),
+      loadWaypoints(),
+      loadRacesList(),
+      refreshSelfNav()
+    ]);
     await loadRaceState();
     render();
     setInterval(render, 1000);
     setInterval(loadVessels, 10000);
+    setInterval(refreshSelfNav, 3000);
     setInterval(() => {
       if (activeRaceId) loadRaceState();
     }, 5000);

package/public/index.html

@@ -95,6 +95,31 @@
       </div>
     </div>
 
+    <div id="startTimerSection" class="course-section" hidden>
+      <button id="startTimerToggleBtn" type="button" class="link-btn">▸ Start timer</button>
+      <div id="startTimerBody" hidden>
+        <div class="start-timer-grid">
+          <div class="start-timer-tile">
+            <div class="start-timer-label">Countdown to start</div>
+            <div id="startCountdownValue" class="start-timer-value">--:--:--</div>
+          </div>
+          <div class="start-timer-tile">
+            <div class="start-timer-label">Distance to line</div>
+            <div id="startDtlValue" class="start-timer-value">--</div>
+          </div>
+          <div class="start-timer-tile">
+            <div class="start-timer-label">ETA to line</div>
+            <div id="startEtaValue" class="start-timer-value">--:--:--</div>
+          </div>
+          <div class="start-timer-tile">
+            <div class="start-timer-label">Time to burn</div>
+            <div id="startBurnValue" class="start-timer-value">--</div>
+          </div>
+        </div>
+        <p id="startTimerNote" class="start-timer-note"></p>
+      </div>
+    </div>
+
     <div id="raceImportSection" class="course-section" hidden>
       <button id="raceImportToggleBtn" type="button" class="link-btn">▸ Import boats from Manage2Sail</button>
       <div id="raceImportBody" hidden>
@@ -122,7 +147,7 @@
       <table id="boatsTable">
         <thead>
           <tr>
-            <th>Boat</th>
+            <th class="boat-name-col">Boat</th>
             <th>Sail #</th>
             <th>MMSI</th>
             <th>TCF</th>

package/public/style.css

@@ -216,7 +216,6 @@ button:disabled {
 
 main {
   padding: 1rem 1.5rem 2rem;
-  max-width: 1000px;
   margin: 0 auto;
 }
 
@@ -226,6 +225,50 @@ main {
   padding-bottom: 1rem;
 }
 
+.start-timer-grid {
+  margin-top: 0.75rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  gap: 1rem;
+  max-width: 44rem;
+}
+
+.start-timer-tile {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+  text-align: center;
+}
+
+.start-timer-label {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--muted);
+  margin-bottom: 0.3rem;
+}
+
+.start-timer-value {
+  font-size: 1.4rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.start-timer-value.early {
+  color: var(--good);
+}
+
+.start-timer-value.late {
+  color: var(--bad);
+}
+
+.start-timer-note {
+  margin-top: 0.6rem;
+  font-size: 0.8rem;
+  color: var(--muted);
+}
+
 .course-grid {
   margin-top: 0.75rem;
   display: grid;
@@ -547,6 +590,21 @@ tbody td {
   border-bottom: 1px solid var(--border);
 }
 
+/* Frozen first column, so the boat's name stays visible while scrolling
+   the (much wider than most screens, especially phones in landscape)
+   table sideways to reach the other columns. Needs its own opaque
+   background so scrolled-under cells don't show through. */
+.boat-name-col {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  background: var(--bg);
+}
+
+thead .boat-name-col {
+  z-index: 2;
+}
+
 tbody tr.finished td {
   color: var(--good);
 }