signalk-race-control 0.5.0 → 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.

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.5.0",
+  "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

@@ -1607,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;
@@ -1692,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');
@@ -2041,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);

package/public/index.html

@@ -147,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;
 }
 
@@ -591,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);
 }