('[data-export="link"]')!;
+ linkBtn.addEventListener("click", () => {
+ navigator.clipboard?.writeText(location.href);
+ const prev = linkBtn.textContent;
+ linkBtn.textContent = "Link copied";
+ setTimeout(() => { linkBtn.textContent = prev; }, 1500);
+ });
root.querySelector('[data-export="json"]')!.addEventListener("click", () => navigator.clipboard?.writeText(toJson(rows, summary)));
root.querySelector('[data-export="csv"]')!.addEventListener("click", () => {
const blob = new Blob([toCsv(rows, summary)], { type: "text/csv" });
diff --git a/packages/web/src/ui/inputPanel.ts b/packages/web/src/ui/inputPanel.ts
index 8ce30f5..a13e576 100644
--- a/packages/web/src/ui/inputPanel.ts
+++ b/packages/web/src/ui/inputPanel.ts
@@ -18,67 +18,82 @@ export function renderInputPanel(
): HTMLElement {
const root = document.createElement("div");
root.innerHTML = `
-
-
-
-
-
-
-
-
-
-
-
-
-
- :
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 2 = double-moon disc
-
-
-
-
-
-
-
-
- –
-
-
-
-
-
- floor for each stage's smaller gear
-
+
+
`;
const presetSelect = root.querySelector("#preset-select")!;
diff --git a/packages/web/src/ui/resultsTable.test.ts b/packages/web/src/ui/resultsTable.test.ts
index 80c2dd0..deb68d8 100644
--- a/packages/web/src/ui/resultsTable.test.ts
+++ b/packages/web/src/ui/resultsTable.test.ts
@@ -14,9 +14,16 @@ describe("results table", () => {
const el = renderResultsTable(rows);
const best = el.querySelectorAll('[data-best="true"]');
expect(best.length).toBe(1);
+ // the best row (k=2, lower error) carries a visible badge
+ expect(best[0].querySelector(".best-badge")!.textContent).toBe("best");
expect(el.textContent).toContain("classic 59-tooth train");
expect(el.querySelectorAll("tbody tr").length).toBe(2);
});
+
+ it("includes a plain-language reading guide", () => {
+ const el = renderResultsTable(rows);
+ expect(el.querySelector(".results-legend")!.textContent).toMatch(/lower error is more accurate/i);
+ });
});
describe("empty state", () => {
diff --git a/packages/web/src/ui/resultsTable.ts b/packages/web/src/ui/resultsTable.ts
index bdd27ad..55fd6f6 100644
--- a/packages/web/src/ui/resultsTable.ts
+++ b/packages/web/src/ui/resultsTable.ts
@@ -15,12 +15,13 @@ export function renderResultsTable(
? formatInterval(r.correction.humanInterval, r.correction.direction, r.correction.beyondConstantPrecision)
: "—";
const bench = r.benchmark ? `${r.benchmark}` : "";
- const bestMark = i === bestIdx ? `best — ` : "";
+ // Visible, screen-reader-readable badge — the best row is no longer signalled by colour alone.
+ const bestBadge = i === bestIdx ? `best ` : "";
const period = approxMeta && r.achievedPeriodDays != null
? r.achievedPeriodDays.toFixed(approxMeta.digits)
: "—";
return `
- | ${bestMark}${r.solution.wheels} |
+ ${bestBadge}${r.solution.wheels} |
${formatTeeth(r.solution.train)} |
${period} |
${formatError(r.solution.errorRel)} |
@@ -33,6 +34,7 @@ export function renderResultsTable(
wrap.innerHTML = ``;
+
${body}
+ Each row is one gear train. Fewer wheels are simpler; lower error is more accurate. "Correction" is how often you would nudge the hand to keep it right.
`;
return wrap;
}