v0.4.8 — the Limits bound the whole district, the nine spots really are nine, and an action points at its square

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01YQAJ4dND7enLj54eLyiF2C

src/web/main.ts

@@ -301,7 +301,7 @@ function render(): void {
           : 'ATTACH TO THIS CARD';
     return [{ row: cell.row, col: cell.col, label }];
   });
-  grid.innerHTML = officeSvg(f.cells, f.runningRow, ghostCoords, legalCaps);
+  grid.innerHTML = officeSvg(f.cells, f.runningRow, ghostCoords, legalCaps, f.limits);
 
   // Highlighting rides on top of the drawing: outline the legal squares and make them clickable.
   for (const [key, list] of spotsAt) {
@@ -650,6 +650,51 @@ function renderDistrict(f: Frame): void {
   };
 }
 
+/**
+ * The square an action button acts on, as an attribute the board can be matched against.
+ *
+ * `null` for the actions that act on no square at all — ending a turn, drawing a card, a train card
+ * that goes to the timetable — so those buttons carry nothing and highlight nothing.
+ */
+function cellRef(coord: { row: number; col: number } | null | undefined): string {
+  return coord ? ` data-square="${coord.row},${coord.col}"` : '';
+}
+
+/**
+ * POINT AT THE SQUARE THE BUTTON MEANS.
+ *
+ * The action list is a column of sentences that differ by a coordinate — "(1,3)" against "(-1,3)" —
+ * and the board is right beside it saying nothing about which one is which. Hovering a button now
+ * lights its square up, so the check happens with the eye rather than by reading two numbers off a
+ * button and finding them on a map. Reported by Jesse: recoverable in solitaire, where Undo is a
+ * click; a disaster in multiplayer, where it is not.
+ *
+ * ON FOCUS AS WELL AS HOVER, so tabbing through the list works the same way as pointing at it — the
+ * keyboard route is not a lesser one.
+ *
+ * BOTH KINDS OF SQUARE. A played card is a `data-cell`; a square being placed ONTO is an empty
+ * `data-ghost` target, which is precisely the case where the player is choosing between coordinates.
+ * Matching only one of the two would leave the most mistake-prone moment unhelped.
+ */
+function wirePointing(node: HTMLElement, key: string): void {
+  const grid = $('grid');
+  const marks = (): Element[] =>
+    [
+      grid.querySelector(`g[data-cell="${key}"]`),
+      grid.querySelector(`g[data-ghost="${key}"]`),
+    ].filter((g): g is Element => g !== null);
+  const on = (): void => {
+    for (const g of marks()) g.classList.add('bs-point');
+  };
+  const off = (): void => {
+    for (const g of marks()) g.classList.remove('bs-point');
+  };
+  node.onmouseenter = on;
+  node.onmouseleave = off;
+  node.onfocus = on;
+  node.onblur = off;
+}
+
 function renderActions(
   menu: Menu,
   f: Frame,
@@ -694,14 +739,19 @@ function renderActions(
    * the same card in hand explained itself perfectly — reported on "Realignment on Mainline card 3",
    * which had neither a name for the card it meant nor a word about what it would do.
    */
-  const actionButton = (a: { index: number; label: string; tip?: string }): string => {
+  const actionButton = (a: {
+    index: number;
+    label: string;
+    tip?: string;
+    coord?: { row: number; col: number };
+  }): string => {
     const { label, index } = a;
     const cut = label.indexOf(' — ');
     const head = cut > 0 ? label.slice(0, cut) : label;
     // The menu resolved the card's description server-side, so the page never needs the state.
     const rest = cut > 0 ? label.slice(cut + 3) : (a.tip ?? '');
     return (
-      `<button class="act" data-i="${index}"${rest ? ` data-tip="${esc(rest)}"` : ''}>${esc(head)}</button>`
+      `<button class="act" data-i="${index}"${cellRef(a.coord)}${rest ? ` data-tip="${esc(rest)}"` : ''}>${esc(head)}</button>`
     );
   };
 
@@ -748,7 +798,7 @@ function renderActions(
       f.moves
         .map(
           (m) =>
-            `<button class="act crew${m.trayId === chosen?.trayId ? ' on' : ''}" data-crew="${esc(m.trayId)}" ` +
+            `<button class="act crew${m.trayId === chosen?.trayId ? ' on' : ''}" data-crew="${esc(m.trayId)}"${cellRef(m.from)} ` +
             `data-tip="Draw this crew's reachable squares on the board, and show its moves below. ${esc(m.label)} is standing at (${m.from.row}, ${m.from.col}) with ${m.to.length} square${m.to.length === 1 ? '' : 's'} it can reach.">` +
             `${esc(m.label)} <span class="dim">(${m.from.row}, ${m.from.col})</span></button>`,
         )
@@ -847,7 +897,7 @@ function renderActions(
                 ? ` data-tip-html="${esc(piecePreview(sp.links, item.subject))}"`
                 : '';
               return (
-                `<button class="act" data-i="${sp.index}"${fig}` +
+                `<button class="act" data-i="${sp.index}"${fig}${cellRef(sp.coord)}` +
                 ` data-tip="${esc(`${item.subject} — ${sp.label}`)}">${esc(sp.label)}</button>`
               );
             })
@@ -882,6 +932,8 @@ function renderActions(
           render();
         }
       : () => apply(Number(node.dataset['i']));
+    const square = node.dataset['square'];
+    if (square) wirePointing(node, square);
   }
 }