{};
bc = new BroadcastChannel(CHANNEL);
bc.onmessage = (e) => {
- if (e.data?.type === "claim" && e.data.id !== TAB_ID) {
+ if (e.data?.type !== "claim" || e.data.id === TAB_ID) return;
+ // A legacy peer (pre-echo build) broadcasts {type, id} with no `ts`.
+ // Treat that as beating any real timestamp so this tab freezes instead
+ // of silently ignoring it (matches the old always-freeze behavior).
+ const peerTs = typeof e.data.ts === "number" ? e.data.ts : Infinity;
+ // Newest claim wins. Ignore a peer claim that is older than this tab's
+ // own claim; on an exact tie (same millisecond) the lexicographically
+ // greater id wins so exactly one side freezes.
+ const peerWins =
+ peerTs > myClaimTs || (peerTs === myClaimTs && e.data.id > TAB_ID);
+ if (peerWins) {
activeTab.inactive = true;
+ } else if (!activeTab.inactive && bc) {
+ // This tab wins but the peer doesn't know it lost yet — it set
+ // itself active locally before broadcasting. Echo this tab's own
+ // winning claim so the peer re-evaluates and freezes. This can't
+ // loop: the echo carries this tab's unchanged (ts, id), so the peer
+ // strictly loses it and freezes without ever echoing back (a frozen
+ // tab never claims).
+ bc.postMessage({ type: "claim", id: TAB_ID, ts: myClaimTs });
}
};
- bc.postMessage({ type: "claim", id: TAB_ID });
+ postClaim();
return () => {
if (bc) {
bc.close();
@@ -52,10 +88,11 @@ export function watchActiveTab() {
/**
* Take active status back from the inactive banner. Marks this tab
- * active locally and broadcasts a claim — any peer freezes itself in
- * turn so the handover is symmetric.
+ * active locally, records a fresh claim timestamp (so a stale peer claim
+ * can't re-freeze it), and broadcasts the claim — any peer freezes itself
+ * in turn so the handover is symmetric.
*/
export function claimActiveTab() {
activeTab.inactive = false;
- if (bc) bc.postMessage({ type: "claim", id: TAB_ID });
+ postClaim();
}
diff --git a/web/src/lib/active-tab.test.js b/web/src/lib/active-tab.test.js
index 933dd00..89c9a69 100644
--- a/web/src/lib/active-tab.test.js
+++ b/web/src/lib/active-tab.test.js
@@ -9,20 +9,33 @@ class FakeBC {
/** @param {string} name */
constructor(name) {
this.name = name;
+ /** @type {((e: { data: any }) => void) | null} */
this.onmessage = null;
this.closed = false;
const peers = FakeBC.channels.get(name) ?? [];
peers.push(this);
FakeBC.channels.set(name, peers);
}
- /** @param {any} data */
+ /**
+ * Defers delivery to a microtask and re-reads the peer list at delivery
+ * time (not at call time), so two channels opened in the same tick — the
+ * "two tabs mount simultaneously" case under test — both see each other's
+ * claim. This matches real `BroadcastChannel`, which queues a task and
+ * resolves the receiving set when that task runs, not when postMessage
+ * is called.
+ * @param {any} data
+ */
postMessage(data) {
if (this.closed) return;
- const peers = FakeBC.channels.get(this.name) ?? [];
- for (const p of peers) {
- if (p === this || p.closed || !p.onmessage) continue;
- p.onmessage({ data });
- }
+ const name = this.name;
+ const sender = this;
+ queueMicrotask(() => {
+ const peers = FakeBC.channels.get(name) ?? [];
+ for (const p of peers) {
+ if (p === sender || p.closed || !p.onmessage) continue;
+ p.onmessage({ data });
+ }
+ });
}
close() {
this.closed = true;
@@ -34,19 +47,37 @@ class FakeBC {
}
}
+/** Flush FakeBC's queued microtask message deliveries. */
+async function deliverBcMessages() {
+ await Promise.resolve();
+}
+
beforeEach(() => {
FakeBC.channels.clear();
vi.stubGlobal("BroadcastChannel", /** @type {any} */ (FakeBC));
vi.resetModules();
+ // Default: a strictly increasing "clock" so claim order matches call
+ // order without every test having to stub a value. Individual tests
+ // override a single call with `mockReturnValueOnce` when they need an
+ // exact (e.g. equal or stale) timestamp.
+ let clock = 0;
+ vi.spyOn(Date, "now").mockImplementation(() => {
+ clock += 1;
+ return clock;
+ });
});
afterEach(() => {
vi.unstubAllGlobals();
+ vi.restoreAllMocks();
});
describe("active-tab", () => {
it("watchActiveTab returns no-op cleanup when BroadcastChannel is missing", async () => {
vi.stubGlobal("BroadcastChannel", undefined);
+ // @ts-expect-error - "?tag" is a real relative import at runtime (Vite/
+ // Vitest cache-busting for module-singleton isolation between tests);
+ // TS can't resolve the literal query-string specifier.
const mod = await import("./active-tab.svelte.js?nobc");
const cleanup = mod.watchActiveTab();
expect(typeof cleanup).toBe("function");
@@ -55,27 +86,35 @@ describe("active-tab", () => {
});
it("second tab's claim marks the first tab inactive", async () => {
+ // @ts-expect-error - "?tag" cache-busting import, see the note above.
const tabA = await import("./active-tab.svelte.js?a");
+ // @ts-expect-error - "?tag" cache-busting import, see the note above.
const tabB = await import("./active-tab.svelte.js?b");
tabA.watchActiveTab();
expect(tabA.activeTab.inactive).toBe(false);
tabB.watchActiveTab();
+ await deliverBcMessages();
expect(tabA.activeTab.inactive).toBe(true);
expect(tabB.activeTab.inactive).toBe(false);
});
it("claimActiveTab reactivates self and inactivates the other", async () => {
+ // @ts-expect-error - "?tag" cache-busting import, see the note above.
const tabA = await import("./active-tab.svelte.js?ra-a");
+ // @ts-expect-error - "?tag" cache-busting import, see the note above.
const tabB = await import("./active-tab.svelte.js?ra-b");
tabA.watchActiveTab();
tabB.watchActiveTab();
+ await deliverBcMessages();
expect(tabA.activeTab.inactive).toBe(true);
tabA.claimActiveTab();
expect(tabA.activeTab.inactive).toBe(false);
+ await deliverBcMessages();
expect(tabB.activeTab.inactive).toBe(true);
});
it("watchActiveTab is idempotent within a single module", async () => {
+ // @ts-expect-error - "?tag" cache-busting import, see the note above.
const tab = await import("./active-tab.svelte.js?idem");
const c1 = tab.watchActiveTab();
const c2 = tab.watchActiveTab();
@@ -84,4 +123,168 @@ describe("active-tab", () => {
c1();
c2();
});
+
+ it("simultaneous mount with unequal ts: older claim freezes, newer stays active", async () => {
+ vi.mocked(Date.now).mockReturnValueOnce(1000);
+ // @ts-expect-error - "?tag" cache-busting import, see the note above.
+ const tabOlder = await import("./active-tab.svelte.js?ts-older");
+ tabOlder.watchActiveTab();
+
+ vi.mocked(Date.now).mockReturnValueOnce(2000);
+ // @ts-expect-error - "?tag" cache-busting import, see the note above.
+ const tabNewer = await import("./active-tab.svelte.js?ts-newer");
+ tabNewer.watchActiveTab();
+ await deliverBcMessages();
+
+ expect(tabOlder.activeTab.inactive).toBe(true);
+ expect(tabNewer.activeTab.inactive).toBe(false);
+ });
+
+ it("simultaneous mount with equal ts: exactly one tab wins via id tie-break", async () => {
+ const idLow = "11111111-1111-4111-8111-111111111111";
+ const idHigh = "99999999-9999-4999-8999-999999999999";
+
+ vi.spyOn(crypto, "randomUUID").mockReturnValueOnce(
+ /** @type {`${string}-${string}-${string}-${string}-${string}`} */ (
+ idLow
+ ),
+ );
+ vi.mocked(Date.now).mockReturnValueOnce(5000);
+ // @ts-expect-error - "?tag" cache-busting import, see the note above.
+ const tabLow = await import("./active-tab.svelte.js?tie-low");
+ tabLow.watchActiveTab();
+
+ vi.spyOn(crypto, "randomUUID").mockReturnValueOnce(
+ /** @type {`${string}-${string}-${string}-${string}-${string}`} */ (
+ idHigh
+ ),
+ );
+ vi.mocked(Date.now).mockReturnValueOnce(5000);
+ // @ts-expect-error - "?tag" cache-busting import, see the note above.
+ const tabHigh = await import("./active-tab.svelte.js?tie-high");
+ tabHigh.watchActiveTab();
+ await deliverBcMessages();
+
+ // Equal claim ts: the lexicographically greater id wins, regardless of
+ // mount order — both tabs receive each other's claim and independently
+ // reach the same conclusion.
+ expect(tabLow.activeTab.inactive).toBe(true);
+ expect(tabHigh.activeTab.inactive).toBe(false);
+ });
+
+ it("reclaim updates myClaimTs so a stale peer claim can't re-freeze the reclaimed tab", async () => {
+ // @ts-expect-error - "?tag" cache-busting import, see the note above.
+ const tabA = await import("./active-tab.svelte.js?stale-a");
+ // @ts-expect-error - "?tag" cache-busting import, see the note above.
+ const tabB = await import("./active-tab.svelte.js?stale-b");
+ tabA.watchActiveTab();
+ tabB.watchActiveTab();
+ await deliverBcMessages();
+ expect(tabA.activeTab.inactive).toBe(true);
+
+ // A reclaims — this records a fresh, later claim ts and reactivates
+ // immediately.
+ tabA.claimActiveTab();
+ expect(tabA.activeTab.inactive).toBe(false);
+ await deliverBcMessages();
+ expect(tabB.activeTab.inactive).toBe(true);
+
+ // A stale claim from B (older than A's reclaim — e.g. a delayed
+ // message) must not re-freeze A. A ignores it as a loss for B and
+ // echoes its own winning claim back, so B (the stale claimer) freezes
+ // instead of staying active locally — exactly one tab ends up active.
+ vi.mocked(Date.now).mockReturnValueOnce(1);
+ tabB.claimActiveTab();
+ await deliverBcMessages(); // B's stale claim reaches A; A echoes
+ await deliverBcMessages(); // A's echo reaches B; B freezes
+ expect(tabA.activeTab.inactive).toBe(false);
+ expect(tabB.activeTab.inactive).toBe(true);
+ });
+
+ it("a losing claimer is echoed at and freezes instead of leaving both tabs active", async () => {
+ // Reproduces the asymmetric-delivery race: tabA's own initial claim is
+ // flushed (delivered to nobody) before tabB even mounts, so tabB never
+ // sees it — matching real BroadcastChannel, which doesn't replay past
+ // messages to a channel opened later. Both claims then carry the same
+ // ts, so only the id tie-break decides the winner, and only tabA (the
+ // one still open when tabB's claim arrives) evaluates it.
+ const idLow = "11111111-1111-4111-8111-111111111111";
+ const idHigh = "99999999-9999-4999-8999-999999999999";
+
+ vi.spyOn(crypto, "randomUUID").mockReturnValueOnce(
+ /** @type {`${string}-${string}-${string}-${string}-${string}`} */ (
+ idHigh
+ ),
+ );
+ vi.mocked(Date.now).mockReturnValueOnce(3000);
+ // @ts-expect-error - "?tag" cache-busting import, see the note above.
+ const tabA = await import("./active-tab.svelte.js?echo-a");
+ tabA.watchActiveTab();
+ await deliverBcMessages(); // tabA's own claim is flushed with no peers
+
+ vi.spyOn(crypto, "randomUUID").mockReturnValueOnce(
+ /** @type {`${string}-${string}-${string}-${string}-${string}`} */ (
+ idLow
+ ),
+ );
+ vi.mocked(Date.now).mockReturnValueOnce(3000);
+ // @ts-expect-error - "?tag" cache-busting import, see the note above.
+ const tabB = await import("./active-tab.svelte.js?echo-b");
+ tabB.watchActiveTab();
+ await deliverBcMessages(); // tabB's claim reaches only tabA
+ await deliverBcMessages(); // tabA's echo (it strictly wins the tie) reaches tabB
+
+ // tabA has the greater id, so on the tie it wins and never freezes;
+ // without the echo fix tabB would also stay active (both active).
+ expect(tabA.activeTab.inactive).toBe(false);
+ expect(tabB.activeTab.inactive).toBe(true);
+ });
+
+ it("the echo does not loop: message traffic settles after one echo round", async () => {
+ const postSpy = vi.spyOn(FakeBC.prototype, "postMessage");
+
+ vi.mocked(Date.now).mockReturnValueOnce(2000);
+ // @ts-expect-error - "?tag" cache-busting import, see the note above.
+ const tabWinner = await import("./active-tab.svelte.js?loop-winner");
+ tabWinner.watchActiveTab();
+ await deliverBcMessages(); // winner's own claim, delivered to nobody yet
+
+ vi.mocked(Date.now).mockReturnValueOnce(1000);
+ // @ts-expect-error - "?tag" cache-busting import, see the note above.
+ const tabLoser = await import("./active-tab.svelte.js?loop-loser");
+ tabLoser.watchActiveTab();
+ await deliverBcMessages(); // loser's stale claim reaches winner; winner echoes
+ await deliverBcMessages(); // winner's echo reaches loser; loser freezes
+
+ expect(tabWinner.activeTab.inactive).toBe(false);
+ expect(tabLoser.activeTab.inactive).toBe(true);
+
+ // Winner's initial claim + loser's stale claim + one echo from the
+ // winner. The loser never echoes back (it's frozen and always
+ // strictly loses the winner's unchanged ts), so traffic must stop here.
+ const settledCount = postSpy.mock.calls.length;
+ expect(settledCount).toBe(3);
+
+ // Flushing further must not produce any more messages.
+ await deliverBcMessages();
+ await deliverBcMessages();
+ expect(postSpy.mock.calls.length).toBe(settledCount);
+ });
+
+ it("a peer claim with no ts (legacy tab) always wins, matching old always-freeze behavior", async () => {
+ // @ts-expect-error - "?tag" cache-busting import, see the note above.
+ const tab = await import("./active-tab.svelte.js?legacy");
+ tab.watchActiveTab();
+ await deliverBcMessages(); // this tab's own claim, delivered to nobody
+
+ // A pre-fix peer broadcasts {type, id} with no `ts` at all.
+ const legacyPeer = new /** @type {any} */ (BroadcastChannel)(
+ "loto_active_tab",
+ );
+ legacyPeer.postMessage({ type: "claim", id: "legacy-peer" });
+ await deliverBcMessages();
+
+ expect(tab.activeTab.inactive).toBe(true);
+ legacyPeer.close();
+ });
});
diff --git a/web/src/lib/focus-trap.js b/web/src/lib/focus-trap.js
new file mode 100644
index 0000000..198d4a2
--- /dev/null
+++ b/web/src/lib/focus-trap.js
@@ -0,0 +1,97 @@
+/**
+ * Svelte action for a modal `role="dialog" aria-modal="true"` container:
+ * moves focus into the dialog on mount, traps Tab/Shift+Tab among its
+ * focusable descendants, restores focus to whatever was focused before
+ * the dialog opened, and locks body scroll for as long as any trap is
+ * active (reference-counted so two stacked dialogs can't fight over the
+ * lock or restore the wrong `overflow` value).
+ *
+ * Usage: `
…
`.
+ * Escape-to-close is NOT handled here — callers already wire their own
+ * window-level Escape listener (see PlayerBoard/SettingsButton) so the
+ * Android back-gesture sentinel keeps working unchanged.
+ *
+ * @module lib/focus-trap
+ */
+
+const FOCUSABLE_SELECTOR =
+ 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+let lockCount = 0;
+let previousBodyOverflow = "";
+
+function lockBodyScroll() {
+ if (lockCount === 0) {
+ previousBodyOverflow = document.body.style.overflow;
+ document.body.style.overflow = "hidden";
+ }
+ lockCount++;
+}
+
+function unlockBodyScroll() {
+ lockCount = Math.max(0, lockCount - 1);
+ if (lockCount === 0) document.body.style.overflow = previousBodyOverflow;
+}
+
+/**
+ * @param {HTMLElement} container
+ * @returns {HTMLElement[]}
+ */
+function focusables(container) {
+ return /** @type {HTMLElement[]} */ (
+ Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
+ (el) => el instanceof HTMLElement && el.offsetParent !== null,
+ )
+ );
+}
+
+/**
+ * @param {HTMLElement} node
+ * @returns {{ destroy(): void }}
+ */
+export function focusTrap(node) {
+ const previouslyFocused =
+ document.activeElement instanceof HTMLElement
+ ? document.activeElement
+ : null;
+
+ if (!node.hasAttribute("tabindex")) node.setAttribute("tabindex", "-1");
+ // Focus the container itself rather than a descendant — predictable
+ // regardless of dialog layout, and screen readers still announce
+ // `aria-labelledby`/`aria-label` on focus.
+ node.focus();
+
+ lockBodyScroll();
+
+ /** @param {KeyboardEvent} e */
+ function onKeydown(e) {
+ if (e.key !== "Tab") return;
+ const items = focusables(node);
+ if (items.length === 0) {
+ // Nothing tabbable inside — keep focus pinned on the dialog so Tab
+ // can't escape to the (visually covered but still-in-DOM) page.
+ e.preventDefault();
+ node.focus();
+ return;
+ }
+ const first = items[0];
+ const last = items[items.length - 1];
+ const active = document.activeElement;
+ if (e.shiftKey && (active === first || !node.contains(active))) {
+ e.preventDefault();
+ last.focus();
+ } else if (!e.shiftKey && (active === last || !node.contains(active))) {
+ e.preventDefault();
+ first.focus();
+ }
+ }
+ node.addEventListener("keydown", onKeydown);
+
+ return {
+ destroy() {
+ node.removeEventListener("keydown", onKeydown);
+ unlockBodyScroll();
+ previouslyFocused?.focus();
+ },
+ };
+}
diff --git a/web/src/lib/focus-trap.test.js b/web/src/lib/focus-trap.test.js
new file mode 100644
index 0000000..72d71d7
--- /dev/null
+++ b/web/src/lib/focus-trap.test.js
@@ -0,0 +1,109 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+
+import { focusTrap } from "./focus-trap.js";
+
+/** @type {HTMLElement} */
+let outsideButton;
+/** @type {HTMLDivElement} */
+let dialog;
+/** @type {HTMLButtonElement} */
+let first;
+/** @type {HTMLButtonElement} */
+let last;
+
+beforeEach(() => {
+ document.body.innerHTML = "";
+ document.body.style.overflow = "";
+
+ outsideButton = document.createElement("button");
+ outsideButton.textContent = "outside";
+ document.body.appendChild(outsideButton);
+ outsideButton.focus();
+
+ dialog = document.createElement("div");
+ first = document.createElement("button");
+ first.textContent = "first";
+ const middle = document.createElement("button");
+ middle.textContent = "middle";
+ last = document.createElement("button");
+ last.textContent = "last";
+ dialog.append(first, middle, last);
+ document.body.appendChild(dialog);
+});
+
+afterEach(() => {
+ document.body.innerHTML = "";
+ document.body.style.overflow = "";
+});
+
+/** @param {HTMLElement} target @param {boolean} [shiftKey] */
+function tab(target, shiftKey = false) {
+ const event = new KeyboardEvent("keydown", {
+ key: "Tab",
+ shiftKey,
+ cancelable: true,
+ bubbles: true,
+ });
+ target.dispatchEvent(event);
+ return event;
+}
+
+describe("focus-trap (M4)", () => {
+ it("focuses the dialog container on mount", () => {
+ const trap = focusTrap(dialog);
+ expect(document.activeElement).toBe(dialog);
+ expect(dialog.getAttribute("tabindex")).toBe("-1");
+ trap.destroy();
+ });
+
+ it("wraps Tab from the last focusable back to the first", () => {
+ const trap = focusTrap(dialog);
+ last.focus();
+ const event = tab(dialog);
+ expect(event.defaultPrevented).toBe(true);
+ expect(document.activeElement).toBe(first);
+ trap.destroy();
+ });
+
+ it("wraps Shift+Tab from the first focusable back to the last", () => {
+ const trap = focusTrap(dialog);
+ first.focus();
+ const event = tab(dialog, true);
+ expect(event.defaultPrevented).toBe(true);
+ expect(document.activeElement).toBe(last);
+ trap.destroy();
+ });
+
+ it("locks body scroll while active and restores it on destroy", () => {
+ document.body.style.overflow = "auto";
+ const trap = focusTrap(dialog);
+ expect(document.body.style.overflow).toBe("hidden");
+ trap.destroy();
+ expect(document.body.style.overflow).toBe("auto");
+ });
+
+ it("restores focus to the previously-focused element on destroy", () => {
+ expect(document.activeElement).toBe(outsideButton);
+ const trap = focusTrap(dialog);
+ expect(document.activeElement).toBe(dialog);
+ trap.destroy();
+ expect(document.activeElement).toBe(outsideButton);
+ });
+
+ it("does not fight over the body scroll lock across two stacked traps", () => {
+ const outer = focusTrap(dialog);
+ const dialog2 = document.createElement("div");
+ const btn2 = document.createElement("button");
+ dialog2.appendChild(btn2);
+ document.body.appendChild(dialog2);
+ const inner = focusTrap(dialog2);
+
+ expect(document.body.style.overflow).toBe("hidden");
+ inner.destroy();
+ // Outer trap is still active — lock must stay held.
+ expect(document.body.style.overflow).toBe("hidden");
+ outer.destroy();
+ expect(document.body.style.overflow).toBe("");
+ });
+});
diff --git a/web/src/lib/master-store.svelte.js b/web/src/lib/master-store.svelte.js
index d3af66a..35d00cf 100644
--- a/web/src/lib/master-store.svelte.js
+++ b/web/src/lib/master-store.svelte.js
@@ -19,6 +19,14 @@ export const masterState = $state({
called: [],
/** @type {number[]} */
remaining: [],
+ /**
+ * True once `loadMaster()` has run at least once in this tab's current
+ * active session. Consumers should gate `saveMaster()` on this so a
+ * component that mounts (or remounts after reclaiming a frozen tab)
+ * never persists stale in-memory state over a peer tab's newer writes
+ * before this tab has re-read localStorage.
+ */
+ hydrated: false,
});
function shuffled1to90() {
@@ -56,6 +64,8 @@ export function loadMaster() {
masterState.remaining = parsed.remaining;
} catch {
/* private mode / corrupt JSON — leave defaults */
+ } finally {
+ masterState.hydrated = true;
}
}
diff --git a/web/src/lib/master-store.test.js b/web/src/lib/master-store.test.js
index 765fac3..884e01d 100644
--- a/web/src/lib/master-store.test.js
+++ b/web/src/lib/master-store.test.js
@@ -13,6 +13,7 @@ beforeEach(() => {
localStorage.clear();
masterState.called = [];
masterState.remaining = [];
+ masterState.hydrated = false;
});
describe("master-store", () => {
@@ -85,4 +86,53 @@ describe("master-store", () => {
loadMaster();
expect(masterState.called).toEqual([]);
});
+
+ describe("hydrated flag (reclaim-a-frozen-tab fix, H2)", () => {
+ it("starts false and flips true after the first loadMaster()", () => {
+ expect(masterState.hydrated).toBe(false);
+ loadMaster();
+ expect(masterState.hydrated).toBe(true);
+ });
+
+ it("flips true even when there is nothing to load", () => {
+ // No localStorage entry at all — still counts as "a load happened",
+ // so a consumer's save-effect gate (MasterPanel) is safe to write.
+ loadMaster();
+ expect(masterState.hydrated).toBe(true);
+ });
+
+ it("flips true even when the stored payload is corrupt", () => {
+ localStorage.setItem("loto_master", "{not valid");
+ loadMaster();
+ expect(masterState.hydrated).toBe(true);
+ });
+
+ it("re-loading picks up a peer tab's newer writes instead of this tab's stale copy", () => {
+ // Simulates the reclaim sequence: this tab drew a couple of numbers,
+ // froze (its in-memory masterState is untouched but stale), a peer
+ // tab drew more and persisted them, then this tab reclaims and must
+ // re-read localStorage before anything re-saves.
+ startNewGame();
+ drawNext();
+ drawNext();
+ saveMaster();
+ const staleCalled = [...masterState.called];
+ const thirdDraw = masterState.remaining[0];
+
+ // Peer tab: independently draws one more and persists.
+ const peerCalled = [...staleCalled, thirdDraw];
+ localStorage.setItem(
+ "loto_master",
+ JSON.stringify({
+ called: peerCalled,
+ remaining: masterState.remaining.slice(1),
+ }),
+ );
+
+ // Reclaim: claimActiveTab()'s fix re-hydrates before re-enabling.
+ loadMaster();
+ expect(masterState.called).toEqual(peerCalled);
+ expect(masterState.called).not.toEqual(staleCalled);
+ });
+ });
});
diff --git a/web/src/lib/overlay-history.test.js b/web/src/lib/overlay-history.test.js
index dfb57cb..8b8d6d7 100644
--- a/web/src/lib/overlay-history.test.js
+++ b/web/src/lib/overlay-history.test.js
@@ -12,7 +12,9 @@ function firePopState() {
window.dispatchEvent(new Event("popstate"));
}
+/** @type {ReturnType
} */
let back;
+/** @type {ReturnType} */
let pushState;
beforeEach(() => {
diff --git a/web/src/lib/settings-store.svelte.js b/web/src/lib/settings-store.svelte.js
index fe076ab..235862c 100644
--- a/web/src/lib/settings-store.svelte.js
+++ b/web/src/lib/settings-store.svelte.js
@@ -23,28 +23,50 @@ export const BOARD_TEXT_SCALES = /** @type {const} */ ([0.9, 1, 1.15, 1.3]);
* stalling the UI on mount. Real settings serialize to ~200 bytes. */
const MAX_STORAGE_BYTES = 8_192;
-export const DEFAULT_SETTINGS = Object.freeze({
- /** Excel "Standard Color: Purple". */
- emptyCellColor: "#7030A0",
- /** "auto" follows OS prefers-color-scheme; "light"/"dark" overrides it. */
- theme: /** @type {"auto"|"light"|"dark"} */ ("auto"),
- /** Which panels are visible: player only, master only, or both inline. */
- mode: /** @type {"player"|"master"|"both"} */ ("player"),
- /** When true, the master "Xổ số" button becomes "Bắt đầu/Dừng" + auto interval. */
- autoCallEnabled: false,
- /** Auto-call interval, seconds per number. Integer 1..10. */
- autoCallSpeed: 5,
- /** Speak the called number aloud when master draws. */
- voiceEnabledMaster: true,
- /** Speak "Chờ" / "Kinh" on player events. */
- voiceEnabledPlayer: false,
- /** When voiceEnabledPlayer is on, also speak the awaited number after "Chờ". */
- voiceWaitingNumber: false,
- /** Active voice id; matches an entry in audio manifest. */
- voice: DEFAULT_VOICE,
- /** Multiplier on board number size; one of BOARD_TEXT_SCALES. */
- boardTextScale: 1,
-});
+/**
+ * Field types for `settings`/`DEFAULT_SETTINGS`. Declared explicitly (rather
+ * than left to inference) so `Object.freeze()` below doesn't narrow each
+ * field to its literal default value (e.g. `autoCallSpeed: 5` inferred as
+ * the type `5`, not `number`) — that literal type would otherwise leak into
+ * `settings = $state({ ...DEFAULT_SETTINGS })` and reject every later
+ * assignment of a different, still-valid value for the field.
+ * @typedef {Object} Settings
+ * @property {string} emptyCellColor
+ * @property {"auto"|"light"|"dark"} theme
+ * @property {"player"|"master"|"both"} mode
+ * @property {boolean} autoCallEnabled
+ * @property {number} autoCallSpeed
+ * @property {boolean} voiceEnabledMaster
+ * @property {boolean} voiceEnabledPlayer
+ * @property {boolean} voiceWaitingNumber
+ * @property {string} voice
+ * @property {number} boardTextScale
+ */
+
+export const DEFAULT_SETTINGS = Object.freeze(
+ /** @type {Settings} */ ({
+ /** Excel "Standard Color: Purple". */
+ emptyCellColor: "#7030A0",
+ /** "auto" follows OS prefers-color-scheme; "light"/"dark" overrides it. */
+ theme: "auto",
+ /** Which panels are visible: player only, master only, or both inline. */
+ mode: "player",
+ /** When true, the master "Xổ số" button becomes "Bắt đầu/Dừng" + auto interval. */
+ autoCallEnabled: false,
+ /** Auto-call interval, seconds per number. Integer 1..10. */
+ autoCallSpeed: 5,
+ /** Speak the called number aloud when master draws. */
+ voiceEnabledMaster: true,
+ /** Speak "Chờ" / "Kinh" on player events. */
+ voiceEnabledPlayer: false,
+ /** When voiceEnabledPlayer is on, also speak the awaited number after "Chờ". */
+ voiceWaitingNumber: false,
+ /** Active voice id; matches an entry in audio manifest. */
+ voice: DEFAULT_VOICE,
+ /** Multiplier on board number size; one of BOARD_TEXT_SCALES. */
+ boardTextScale: 1,
+ }),
+);
export const settings = $state({ ...DEFAULT_SETTINGS });
diff --git a/web/src/lib/settings-store.test.js b/web/src/lib/settings-store.test.js
index 36528b8..2f2594a 100644
--- a/web/src/lib/settings-store.test.js
+++ b/web/src/lib/settings-store.test.js
@@ -18,8 +18,14 @@ function mockMatchMedia(matches = false) {
const mql = {
matches,
media: "(prefers-color-scheme: dark)",
- addEventListener: (/** @type {string} */ _t, fn) => listeners.add(fn),
- removeEventListener: (/** @type {string} */ _t, fn) => listeners.delete(fn),
+ addEventListener: (
+ /** @type {string} */ _t,
+ /** @type {(e: MediaQueryListEvent) => void} */ fn,
+ ) => listeners.add(fn),
+ removeEventListener: (
+ /** @type {string} */ _t,
+ /** @type {(e: MediaQueryListEvent) => void} */ fn,
+ ) => listeners.delete(fn),
addListener: () => {},
removeListener: () => {},
onchange: null,
diff --git a/web/src/lib/update-prompt.svelte.js b/web/src/lib/update-prompt.svelte.js
new file mode 100644
index 0000000..ae30e7e
--- /dev/null
+++ b/web/src/lib/update-prompt.svelte.js
@@ -0,0 +1,52 @@
+/**
+ * Update-prompt coordinator for the PWA service worker.
+ *
+ * `vite.config.js` sets `registerType: "prompt"` so vite-plugin-pwa NEVER
+ * force-reloads a live tab when a new build activates — an unattended
+ * reload would drop in-memory round state (`autoRunning`, `showCongrats`,
+ * the auto-call countdown) mid-fairground. Instead `+layout.svelte` calls
+ * `registerSW({ onNeedRefresh: showUpdatePrompt })`, which routes here so a
+ * small dismissible banner can ask the host before reloading. The actual
+ * reload only ever happens from an explicit tap on the banner's button.
+ *
+ * @module lib/update-prompt
+ */
+
+export const updatePrompt = $state({
+ /** True once vite-plugin-pwa's `onNeedRefresh` has fired this session. */
+ visible: false,
+});
+
+/** @type {((reloadPage?: boolean) => Promise) | null} */
+let updateSW = null;
+
+/**
+ * Store the function `registerSW()` returns so `applyUpdate()` can trigger
+ * the actual reload later without `+layout.svelte` holding its own copy.
+ * @param {(reloadPage?: boolean) => Promise} fn
+ */
+export function setUpdateSW(fn) {
+ updateSW = fn;
+}
+
+/** Wired to `registerSW`'s `onNeedRefresh` callback. */
+export function showUpdatePrompt() {
+ updatePrompt.visible = true;
+}
+
+/** Host tapped "Tải lại" — activate the waiting worker and reload. */
+export function applyUpdate() {
+ updatePrompt.visible = false;
+ if (updateSW) void updateSW(true);
+}
+
+/** Host tapped dismiss — keep the current version running for this visit. */
+export function dismissUpdate() {
+ updatePrompt.visible = false;
+}
+
+/** Test-only reset so module-singleton state doesn't leak between cases. */
+export function _resetUpdatePromptForTest() {
+ updatePrompt.visible = false;
+ updateSW = null;
+}
diff --git a/web/src/lib/update-prompt.test.js b/web/src/lib/update-prompt.test.js
new file mode 100644
index 0000000..f052b28
--- /dev/null
+++ b/web/src/lib/update-prompt.test.js
@@ -0,0 +1,52 @@
+// @vitest-environment happy-dom
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import {
+ _resetUpdatePromptForTest,
+ applyUpdate,
+ dismissUpdate,
+ setUpdateSW,
+ showUpdatePrompt,
+ updatePrompt,
+} from "./update-prompt.svelte.js";
+
+beforeEach(() => {
+ _resetUpdatePromptForTest();
+});
+
+describe("update-prompt", () => {
+ it("starts hidden", () => {
+ expect(updatePrompt.visible).toBe(false);
+ });
+
+ it("showUpdatePrompt (onNeedRefresh) reveals the banner", () => {
+ showUpdatePrompt();
+ expect(updatePrompt.visible).toBe(true);
+ });
+
+ it("dismissUpdate hides the banner without calling updateSW", () => {
+ const updateSW = vi.fn().mockResolvedValue(undefined);
+ setUpdateSW(updateSW);
+ showUpdatePrompt();
+ dismissUpdate();
+ expect(updatePrompt.visible).toBe(false);
+ expect(updateSW).not.toHaveBeenCalled();
+ });
+
+ it("applyUpdate hides the banner and reloads via updateSW(true)", () => {
+ const updateSW = vi.fn().mockResolvedValue(undefined);
+ setUpdateSW(updateSW);
+ showUpdatePrompt();
+ applyUpdate();
+ expect(updatePrompt.visible).toBe(false);
+ expect(updateSW).toHaveBeenCalledTimes(1);
+ expect(updateSW).toHaveBeenCalledWith(true);
+ });
+
+ it("applyUpdate before registerSW resolves is a safe no-op (no throw)", () => {
+ showUpdatePrompt();
+ expect(() => applyUpdate()).not.toThrow();
+ expect(updatePrompt.visible).toBe(false);
+ });
+});
diff --git a/web/src/lib/voice.js b/web/src/lib/voice.js
index dac42fd..844d9dc 100644
--- a/web/src/lib/voice.js
+++ b/web/src/lib/voice.js
@@ -7,8 +7,22 @@
import { base } from "$app/paths";
import { settings } from "$lib/settings-store.svelte.js";
-/** @type {Map} */
-const cache = new Map();
+/**
+ * Single reusable