Say so when the browser refuses to save
Every save goes through one try/catch, and the catch was empty:
} catch {
// Storage full/unavailable (private browsing, etc.) — the table still works
// for the rest of the session, it just won't survive a refresh.
}
The comment is accurate and the behaviour is right -- the chips have already moved in
memory and refusing to continue would be worse. What was missing is anybody being
told. Driven with setItem throwing: two saves failed, no toast, nothing on the page,
and a refresh came back to before the hand was dealt with the dealer none the wiser.
That is the same shape of fault the bank reconciliation exists for. Silent until it is
too late to act on, and the way you find out is the last two players cashing out.
Now it says so twice, in the two places that suit the two timescales.
A toast the first time, and only the first time -- a dealer taps this bar thirty times
a hand and does not need thirty warnings. Measured: four failed saves, one toast.
"This table isn't being saved — refreshing would lose it. Keep this tab open."
And a standing line at the top of the Session panel, because a toast is a moment and
this is a fact about the rest of the night. The raise pad dismisses toasts, and the one
warning that must not be missed is not the one to leave to a toast.
"This table isn't being saved — the browser refused. It'll keep working, but
closing or refreshing this tab loses the session. Export CSV below keeps a copy."
Amber, like the bank check's disagreement, because both mean the same thing: your
record of the night is wrong and you can still do something about it. The export is
named because it is the thing that helps.
6 tests (255 total): a good save reports success and leaves no mark, a failing one
reports failure rather than throwing, the listener fires exactly once across twenty
failures, it is handed the error so the reason can be reported later, a failing save
still does not stop the table, and no listener at all is not an error.
Driven through the UI with setItem throwing: hidden while saving works, toast on the
first failure, zero further toasts across three more actions, the panel line present
and readable. Contrast clean, layout audit clean, no console errors.
Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
This commit is contained in:
@@ -103,6 +103,7 @@
|
||||
<details class="sidebarPanel">
|
||||
<summary>Session</summary>
|
||||
<div class="panelBody">
|
||||
<p id="storageWarning" class="storageWarning" hidden></p>
|
||||
<h3 class="panelSubhead">Standings</h3>
|
||||
<div class="standingsTableWrap">
|
||||
<div id="standingsTable">
|
||||
|
||||
@@ -1095,6 +1095,19 @@ button,
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Amber, like the bank check's disagreement — both are "your record of the night is
|
||||
wrong and you can still do something about it". */
|
||||
.storageWarning {
|
||||
margin: 0;
|
||||
padding: 0.5rem 0.6rem;
|
||||
border: 1px solid rgba(240, 180, 106, 0.45);
|
||||
border-radius: 7px;
|
||||
background: rgba(240, 180, 106, 0.08);
|
||||
color: #f0b46a;
|
||||
font-size: 0.76rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* The shortcut legend. A touch device has no keys to press, so it doesn't get a panel
|
||||
telling it about them — the same pointer question the touch-target rules ask. */
|
||||
@media (pointer: coarse) {
|
||||
|
||||
@@ -458,6 +458,16 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
// Escape is Modal's job now, for this sheet and the five others that never had it.
|
||||
const rulingsOverlay = document.getElementById("rulingsOverlay");
|
||||
const closeRulings = () => { rulingsOverlay.hidden = true; };
|
||||
// The one time the browser refuses to save, say so out loud as well as leaving the
|
||||
// standing warning in the Session panel. Set before the first render so a failure
|
||||
// during start-up is caught too.
|
||||
HoldemState.onSaveFailed = () => {
|
||||
Toast.show(
|
||||
"This table isn't being saved — refreshing would lose it. Keep this tab open.",
|
||||
{ duration: 12000 });
|
||||
Render.renderStorageWarning();
|
||||
};
|
||||
|
||||
// The shortcut legend, built from the same list the handlers are keyed off, so a
|
||||
// shortcut can't exist without a line here saying what it does.
|
||||
const legend = document.getElementById("shortcutLegend");
|
||||
|
||||
@@ -751,6 +751,21 @@ const Render = {
|
||||
|
||||
this.renderBankReconciliation();
|
||||
this.renderSettleUp(standings);
|
||||
this.renderStorageWarning();
|
||||
},
|
||||
|
||||
// A toast is a moment; this table not being saved is a fact about the rest of the
|
||||
// night. It sits at the top of the panel a dealer opens to check the money, and it
|
||||
// stays there, because the raise pad dismisses toasts and the one time this warning
|
||||
// matters is the one time it must not have been missed.
|
||||
renderStorageWarning() {
|
||||
const host = document.getElementById("storageWarning");
|
||||
if (!host) return;
|
||||
host.hidden = !HoldemState.saveFailed;
|
||||
if (host.hidden) return;
|
||||
host.textContent =
|
||||
"This table isn't being saved — the browser refused. It'll keep working, " +
|
||||
"but closing or refreshing this tab loses the session. Export CSV below keeps a copy.";
|
||||
},
|
||||
|
||||
// The last step the standings stopped short of. Six signed numbers at 2am is not
|
||||
|
||||
@@ -122,12 +122,32 @@ const HoldemState = {
|
||||
}
|
||||
},
|
||||
|
||||
// True once a save has failed. The UI reads this to keep saying so, because a
|
||||
// toast is a moment and this is a fact about the rest of the night.
|
||||
saveFailed: false,
|
||||
|
||||
// Called the first time a save fails. Set by the UI.
|
||||
onSaveFailed: null,
|
||||
|
||||
save(state) {
|
||||
try {
|
||||
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(state));
|
||||
} catch {
|
||||
// Storage full/unavailable (private browsing, etc.) — the table still works
|
||||
// for the rest of the session, it just won't survive a refresh.
|
||||
return true;
|
||||
} catch (error) {
|
||||
// Storage full, or private browsing. The table still works for the rest of
|
||||
// the session — it just won't survive a refresh, and nothing used to say
|
||||
// so. That is the same shape of fault the bank check exists for: silent
|
||||
// until it is too late to do anything about it. A dealer who finds out by
|
||||
// refreshing has lost the night's standings, and the only warning they got
|
||||
// was the table being empty.
|
||||
//
|
||||
// Announced once. A dealer tapping a bar thirty times a hand does not need
|
||||
// thirty of these.
|
||||
if (!this.saveFailed) {
|
||||
this.saveFailed = true;
|
||||
if (typeof this.onSaveFailed === "function") this.onSaveFailed(error);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
// What happens when the browser refuses to save.
|
||||
//
|
||||
// The table keeps working — that was always true and is still the right behaviour.
|
||||
// What was missing is anybody being told, which is the same shape of fault the bank
|
||||
// check exists for: silent until it's too late to act on.
|
||||
const test = require("node:test");
|
||||
const assert = require("node:assert");
|
||||
const { HoldemState, makeTable } = require("./load");
|
||||
|
||||
function withStorage(behaviour) {
|
||||
const calls = [];
|
||||
globalThis.localStorage = {
|
||||
setItem(key, value) {
|
||||
calls.push({ key, value });
|
||||
if (behaviour === "throw") {
|
||||
const error = new Error("QuotaExceededError");
|
||||
error.name = "QuotaExceededError";
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
getItem: () => null,
|
||||
removeItem() {},
|
||||
};
|
||||
return calls;
|
||||
}
|
||||
|
||||
test.beforeEach(() => {
|
||||
HoldemState.saveFailed = false;
|
||||
HoldemState.onSaveFailed = null;
|
||||
});
|
||||
|
||||
test.after(() => {
|
||||
delete globalThis.localStorage;
|
||||
HoldemState.saveFailed = false;
|
||||
HoldemState.onSaveFailed = null;
|
||||
});
|
||||
|
||||
test("a save that works says so and leaves no mark", () => {
|
||||
withStorage("ok");
|
||||
const state = makeTable({ seatCount: 6, seated: [0, 1], stack: 100 });
|
||||
|
||||
assert.equal(HoldemState.save(state), true);
|
||||
assert.equal(HoldemState.saveFailed, false);
|
||||
});
|
||||
|
||||
test("a save that fails says so rather than throwing", () => {
|
||||
withStorage("throw");
|
||||
const state = makeTable({ seatCount: 6, seated: [0, 1], stack: 100 });
|
||||
|
||||
assert.equal(HoldemState.save(state), false);
|
||||
assert.equal(HoldemState.saveFailed, true);
|
||||
});
|
||||
|
||||
test("the table is told once, not on every action", () => {
|
||||
// A dealer taps the bar thirty times a hand and doesn't need thirty warnings.
|
||||
withStorage("throw");
|
||||
const state = makeTable({ seatCount: 6, seated: [0, 1], stack: 100 });
|
||||
let told = 0;
|
||||
HoldemState.onSaveFailed = () => { told++; };
|
||||
|
||||
for (let i = 0; i < 20; i++) HoldemState.save(state);
|
||||
|
||||
assert.equal(told, 1);
|
||||
});
|
||||
|
||||
test("the failure is handed the error, so the reason can be reported later", () => {
|
||||
withStorage("throw");
|
||||
const state = makeTable({ seatCount: 6, seated: [0, 1], stack: 100 });
|
||||
let seen = null;
|
||||
HoldemState.onSaveFailed = error => { seen = error; };
|
||||
|
||||
HoldemState.save(state);
|
||||
|
||||
assert.equal(seen && seen.name, "QuotaExceededError");
|
||||
});
|
||||
|
||||
test("a failing save still doesn't stop the table", () => {
|
||||
// The chips have already moved in memory; refusing to continue would be worse
|
||||
// than not persisting.
|
||||
withStorage("throw");
|
||||
const state = makeTable({ seatCount: 6, seated: [0, 1, 2], stack: 100 });
|
||||
state.seats[0].stack = 175;
|
||||
|
||||
assert.doesNotThrow(() => HoldemState.save(state));
|
||||
assert.equal(state.seats[0].stack, 175);
|
||||
});
|
||||
|
||||
test("no listener is not an error", () => {
|
||||
withStorage("throw");
|
||||
const state = makeTable({ seatCount: 6, seated: [0, 1], stack: 100 });
|
||||
HoldemState.onSaveFailed = null;
|
||||
|
||||
assert.doesNotThrow(() => HoldemState.save(state));
|
||||
assert.equal(HoldemState.saveFailed, true);
|
||||
});
|
||||
Reference in New Issue
Block a user