Say what the undo would take back, and let the empty chairs be empty
Two things on the felt and the bar that were spending weight on the wrong half of what they had to say. The undo pill names the last action, and on a phone it had stopped doing it. It is a fixed width — its text changes on every tap, and a control that resizes under a thumb reads as the interface twitching — and that width leaves the label 73px. Measured across one hand, four of the five labels a hand produces wanted more: ↶ dealing the hand 104 ↶ Christopher's fold 109 ↶ Mike from work's fold 128 ↶ Alexandra's fold 100 ↶ Dee's fold 69 (the only one that fitted) so the safety net spent most of a night reading "↶ dealing …". Cut as one string it keeps the wrong half: "↶ Mike from wor…" names everybody except the action. So an action's name is handed to commit() in two halves now — who it was, and what they did — and the actor comes off whole when the act cannot fit beside it. The whole sentence stays on the button's title and aria-label, which is what the guidance asks of a control that has had to shorten its own name. Two things fell out of it. The label cannot overflow — the act inside it is the item with `overflow: hidden`, so it swallows the excess and the row measures as though everything fitted — which is why the fit asks the act and not the label; asked the label, "↶ dealing the hand" kept its actor and quietly cut "the hand" off inside it. And the pill was still printing a keycap on phones: every other control on the bar has dropped its cap under `hover: none` since that rule was written, but this one is a different class and had been left out of it, so the narrowest label on the bar was the only one spending 22px on a shortcut nothing could press. That 22px is exactly what "raise to $1,200" needed to keep its digits. Nothing is cut now at any viewport in the sweep: a phone reads "↶ the hand", "↶ Dee's fold", "↶ raise to $20", "↶ call"; a desktop and the landscape rail keep the actor wherever it fits. And the empty chairs. An open seat was drawn as a whole puck of near-black on the green — the same box a seated player gets, at the same weight, saying nothing. Five players nine-handed is four of them, and on the felt they read as holes punched in the table: the eye had to sort the loud empty boxes from the loud full ones before it could find who was in the hand. The wash was there for one reason, which is that the chair number's contrast cannot depend on whether its chair sits over the rim, the dark green or the light — about Lc 5 across one ring. So the wash moved off the chair and under the number, which is the only thing an open chair has to say. The dashes still say "open", the box a thumb lands on has not moved a pixel, and the felt gets four boxes' worth of quiet back. 1039 unit tests; 418 layout audits across 13 viewports, clean. Co-Authored-By: Claude Opus 5 <[email protected]> Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
This commit is contained in:
Claude Opus 5
@@ -163,6 +163,44 @@ describe("numbers that change while the dealer watches", () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe("what an open chair is allowed to weigh", () => {
|
||||
// An empty seat used to be drawn as a whole puck of near-black on the green: the same
|
||||
// box a seated player gets, at the same weight, saying nothing. Five players
|
||||
// nine-handed is four of them, and they read as holes punched in the felt rather than
|
||||
// as chairs nobody is in — the eye had to sort the loud empty boxes from the loud full
|
||||
// ones before it could find who was in the hand.
|
||||
//
|
||||
// The wash the box carried was there for one reason: the chair number's contrast
|
||||
// cannot depend on whether its chair happens to sit over the brown rim, the dark green
|
||||
// or the light, which is about Lc 5 across one ring. So the wash moved off the chair
|
||||
// and under the number, which is the only thing an open chair has to say.
|
||||
|
||||
test("the chair is quieter than the player who could sit in it", () => {
|
||||
const empty = css.match(/\.seat\.seatEmpty \{([^}]*)\}/);
|
||||
const seat = css.match(/\n\.seat \{([^}]*)\}/);
|
||||
assert.ok(empty && seat);
|
||||
assert.match(seat[1], /background:\s*linear-gradient/,
|
||||
"a taken seat is a puck with a ground of its own");
|
||||
const alpha = empty[1].match(/background:\s*rgba\([^)]*?([0-9.]+)\s*\)/);
|
||||
assert.ok(alpha, "an open chair should still be washed, only faintly");
|
||||
assert.ok(Number(alpha[1]) <= 0.35,
|
||||
`an open chair at ${alpha[1]} reads as a hole in the felt, not a chair`);
|
||||
});
|
||||
|
||||
test("and it still says it is open", () => {
|
||||
const empty = css.match(/\.seat\.seatEmpty \{([^}]*)\}/)[1];
|
||||
assert.match(empty, /border-style:\s*dashed/,
|
||||
"the dashes are what carry the meaning; they always were");
|
||||
});
|
||||
|
||||
test("the number keeps a ground of its own, because it is the part that is read", () => {
|
||||
const rule = css.match(/\.seatEmpty \.seatChairNumber \{([^}]*)\}/);
|
||||
assert.ok(rule, "no ground under the one thing an open chair says");
|
||||
assert.match(rule[1], /background:\s*rgba/);
|
||||
assert.match(rule[1], /border-radius:\s*var\(--r-pill\)/);
|
||||
});
|
||||
});
|
||||
|
||||
describe("controls that must not resize under a thumb", () => {
|
||||
test("the undo pill has a fixed width, not a content width", () => {
|
||||
// It names the last action, so its label changes on every tap. Measured across
|
||||
@@ -182,9 +220,25 @@ describe("controls that must not resize under a thumb", () => {
|
||||
"the pill should still state a fixed width somewhere");
|
||||
});
|
||||
|
||||
test("and its label is the part that ellipsizes", () => {
|
||||
test("and its label is the part that gives, never the keycap", () => {
|
||||
const rule = css.match(/\.actionUndoLabel\s*\{[^}]*\}/);
|
||||
assert.ok(rule, ".actionUndoLabel rule not found");
|
||||
assert.match(rule[0], /text-overflow:\s*ellipsis/);
|
||||
assert.match(rule[0], /overflow:\s*hidden/);
|
||||
assert.match(css.match(/\.actionUndoKey\s*\{[^}]*\}/)[0], /flex:\s*none/);
|
||||
});
|
||||
|
||||
test("and within the label, the act outlives the actor", () => {
|
||||
// Three items, not one string: the arrow, who it was, and what they did. Cut as
|
||||
// one string, "↶ Mike from work's fold" reads "↶ Mike from wor…" on a phone —
|
||||
// everything except the thing you would be taking back. The actor is dropped
|
||||
// whole instead, so the act is what survives, and only the act may ellipsize.
|
||||
const lead = css.match(/\.actionUndoGlyph,\s*\n\.actionUndoLead\s*\{([^}]*)\}/);
|
||||
assert.ok(lead, "the arrow and the actor should be fixed items");
|
||||
assert.match(lead[1], /flex:\s*none/);
|
||||
assert.match(css, /\.actionUndoLead\[hidden\]\s*\{[^}]*display:\s*none/);
|
||||
const act = css.match(/\.actionUndoAct\s*\{([^}]*)\}/);
|
||||
assert.ok(act, ".actionUndoAct rule not found");
|
||||
assert.match(act[1], /text-overflow:\s*ellipsis/);
|
||||
assert.match(act[1], /min-width:\s*0/);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -399,6 +399,153 @@ describe("and the name is the half that is still there at the end of it", () =>
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
describe("what the undo pill says it would take back", () => {
|
||||
// The pill is a fixed width — it names the last action, so its text changes on every
|
||||
// tap, and a control that resizes under a thumb reads as the interface twitching —
|
||||
// and on a phone that width leaves the label 73px. Measured across one hand, four of
|
||||
// the five labels a hand produces wanted more:
|
||||
//
|
||||
// ↶ dealing the hand 104 ↶ Christopher's fold 109
|
||||
// ↶ Mike from work's fold 128 ↶ Alexandra's fold 100
|
||||
// ↶ Dee's fold 69 (the only one that fitted)
|
||||
//
|
||||
// So the safety net spent most of a night reading "↶ dealing …", which does not say
|
||||
// what it is a net for. Cut as one string it says the wrong half: "↶ Mike from wor…"
|
||||
// names everybody except the action.
|
||||
//
|
||||
// Two halves, and the actor is the one that goes — whole, not shortened. Measured
|
||||
// again afterwards, nothing is cut at any viewport in the sweep: a phone reads
|
||||
// "↶ the hand", "↶ Dee's fold", "↶ raise to $20", "↶ call"; a desktop and the
|
||||
// landscape rail keep the actor wherever it fits.
|
||||
|
||||
test("a label handed over in halves knows which is which", () => {
|
||||
const step = ActionBar.undoParts({ lead: "Christopher's", act: "fold" });
|
||||
assert.equal(step.lead, "Christopher's");
|
||||
assert.equal(step.act, "fold");
|
||||
assert.equal(step.long, "Christopher's fold", "the sentence the toast and the tooltip use");
|
||||
});
|
||||
|
||||
test("one with no actor is all act", () => {
|
||||
// "the straddle" belongs to the table rather than to a player.
|
||||
const step = ActionBar.undoParts({ lead: "", act: "the straddle" });
|
||||
assert.equal(step.lead, "");
|
||||
assert.equal(step.long, "the straddle", "no stray space in front of it");
|
||||
});
|
||||
|
||||
test("and a plain string still works, with nothing to drop", () => {
|
||||
// Every caller passes halves today. This is what keeps a caller that doesn't
|
||||
// from drawing "[object Object]" on the one control a dealer reaches for when
|
||||
// they have made a mistake.
|
||||
const step = ActionBar.undoParts("something nobody split");
|
||||
assert.equal(step.lead, "");
|
||||
assert.equal(step.act, "something nobody split");
|
||||
assert.equal(step.long, "something nobody split");
|
||||
});
|
||||
|
||||
test("the sentence is what goes into the history, and the halves ride with it", () => {
|
||||
const seen = [];
|
||||
const before = ActionBar.hooks;
|
||||
ActionBar.hooks = {
|
||||
beginAction: (label, parts) => seen.push({ label, parts }),
|
||||
save: () => {}, rerender: () => {},
|
||||
};
|
||||
try {
|
||||
ActionBar.commit({ lead: "Dee's", act: "call" }, () => {});
|
||||
} finally { ActionBar.hooks = before; }
|
||||
assert.equal(seen.length, 1);
|
||||
assert.equal(seen[0].label, "Dee's call", "the toast says the whole thing");
|
||||
assert.deepEqual(
|
||||
{ lead: seen[0].parts.lead, act: seen[0].parts.act },
|
||||
{ lead: "Dee's", act: "call" });
|
||||
});
|
||||
|
||||
test("and the halves are read back from the history, not remembered here", () => {
|
||||
// Undo pops the history. A copy kept on this object would name the step that was
|
||||
// just taken back rather than the one now on top of the pile.
|
||||
const before = ActionBar.hooks;
|
||||
ActionBar.hooks = {
|
||||
lastActionLabel: () => "Dee's call",
|
||||
lastActionParts: () => ({ lead: "Dee's", act: "call" }),
|
||||
};
|
||||
try {
|
||||
assert.deepEqual(ActionBar.undoStep(), { lead: "Dee's", act: "call" });
|
||||
} finally { ActionBar.hooks = before; }
|
||||
});
|
||||
|
||||
test("a caller that offers no halves gets the label whole", () => {
|
||||
const before = ActionBar.hooks;
|
||||
ActionBar.hooks = { lastActionLabel: () => "dealing the hand" };
|
||||
try {
|
||||
assert.deepEqual(ActionBar.undoStep(), { lead: "", act: "dealing the hand" });
|
||||
} finally { ActionBar.hooks = before; }
|
||||
});
|
||||
|
||||
const withPill = (act, run) => {
|
||||
const lead = { hidden: false, className: "actionUndoLead" };
|
||||
const label = {
|
||||
className: "actionUndoLabel",
|
||||
querySelector: sel => (sel === ".actionUndoLead" ? lead
|
||||
: sel === ".actionUndoAct" ? act : null),
|
||||
};
|
||||
global.document = {
|
||||
querySelector: sel => (sel.endsWith(".actionUndoLabel") ? label : null),
|
||||
};
|
||||
try { run(lead); } finally { delete global.document; }
|
||||
};
|
||||
|
||||
test("an act that fits keeps the actor beside it", () => {
|
||||
withPill({ scrollWidth: 19, clientWidth: 40 }, lead => {
|
||||
ActionBar.fitUndoLabel();
|
||||
assert.equal(lead.hidden, false);
|
||||
});
|
||||
});
|
||||
|
||||
test("an act being cut drops the actor whole", () => {
|
||||
withPill({ scrollWidth: 63, clientWidth: 40 }, lead => {
|
||||
ActionBar.fitUndoLabel();
|
||||
assert.equal(lead.hidden, true,
|
||||
"\"Christo…'s fold\" is a worse sentence than \"fold\"");
|
||||
});
|
||||
});
|
||||
|
||||
test("and it is the act that is asked, never the label", () => {
|
||||
// The label cannot overflow: the act inside it is the item with `overflow:
|
||||
// hidden`, so it swallows the excess and the row measures as though everything
|
||||
// fitted. Asking the label was the first way this was written, and it drew
|
||||
// "↶ dealing the hand" with "the hand" quietly cut off inside it.
|
||||
const fit = CSS_JS.slice(CSS_JS.indexOf(" fitUndoLabel() {"));
|
||||
const body = fit.slice(0, fit.indexOf("\n },"));
|
||||
assert.match(body, /act\.scrollWidth > act\.clientWidth/);
|
||||
assert.doesNotMatch(body, /label\.scrollWidth/);
|
||||
});
|
||||
|
||||
test("an actor already dropped is put back before anything is measured", () => {
|
||||
withPill({ scrollWidth: 19, clientWidth: 40 }, lead => {
|
||||
lead.hidden = true;
|
||||
ActionBar.fitUndoLabel();
|
||||
assert.equal(lead.hidden, false);
|
||||
});
|
||||
});
|
||||
|
||||
test("and a bar with nothing to take back is left alone", () => {
|
||||
global.document = { querySelector: () => null };
|
||||
try { assert.doesNotThrow(() => ActionBar.fitUndoLabel()); }
|
||||
finally { delete global.document; }
|
||||
});
|
||||
|
||||
test("the keycap goes where there is no keyboard to press it", () => {
|
||||
// Every other control on the bar had dropped its cap on a phone since the rule
|
||||
// was written; this one is a different class and had been left out of it, so the
|
||||
// narrowest label on the bar was the only one still spending 22px on a shortcut
|
||||
// nothing could press.
|
||||
const rule = CSS.match(/@media \(hover: none\) \{\s*\.actionKey,\s*\.actionUndoKey \{([^}]*)\}/);
|
||||
assert.ok(rule, ".actionUndoKey should be hidden alongside .actionKey on touch");
|
||||
assert.match(rule[1], /display:\s*none/);
|
||||
});
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
describe("a stopwatch that is only there when it is saying something", () => {
|
||||
// 50px of a 349px line, from the first second of every decision, reading "0:07" in
|
||||
// grey. It is a prompt rather than a readout — nothing happens when it grows — and a
|
||||
|
||||
Reference in New Issue
Block a user