signalk-race-control 0.4.3 → 0.5.0

package/README.md

@@ -73,6 +73,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/package.json

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

@@ -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
@@ -1854,6 +1979,7 @@
     exportOfflineBtn.hidden = !raceState;
     courseSection.hidden = !raceState;
     raceImportSection.hidden = !raceState || !raceImportEnabled;
+    renderStartTimer();
 
     if (!raceState) {
       emptyMsg.hidden = true;
@@ -2123,6 +2249,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 +2330,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>

package/public/style.css

@@ -226,6 +226,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;