jheaps/JoshHeaps.Net
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Make every seat on the ring the same seat, and measure it before believing it

Browse Source 
Nine chairs, and until this no two of them were the same size. Measured at 1280x900
with five players seated: 64px for Bob, 70 for Christopher because his name wrapped,
71 for Alexandra because she had chips out, 89 for "Mike from work" who had both.

The ragged edge was the smaller half of it. The larger half is that the sizes moved.
A puck grew 17px the moment its player put money in and shrank again when the street
closed, so the felt reflowed twice a hand under the thumb of someone trying to tap it
— and because the ring is sized against the tallest puck on it, the whole table could
resize with it.

Three rows are held open instead: the name, the amount, and the stack. The name gets
one line whatever it says, the amount pill keeps its row when it is empty rather than
collapsing, and each row is a token rather than an em so an amount stepping its type
down to fit shortens its digits and not its row. What the puck says changes all night;
how big it is does not.

It costs nothing. measuredSeatBox already took the tallest puck on the ring, on
purpose, so the room was reserved at every seat and the short ones simply weren't
drawn into it. What pays for the third row is the second line of name going away: an
earlier round measured uniform-with-two-lines at 88px and rightly refused it.
Uniform-with-one is 71.

  A name with no word to drop steps its type down instead of ellipsising. fitSeatNames
  turns "Mike from work" into "Mike", which is what the table calls him, and could do
  nothing at all with "Christopher" — so that one was cut to "Christo…" on a felt that
  may also have a Christine at it. The amounts on the same puck have never taken that
  trade; this is fitAmount's rule applied to the other thing a dealer reads across a
  table. One step, floored at 9px, then the ellipsis.

  The float that kept the button seat's name off the dealer chip goes with the second
  line — three rules of it, indenting the first line so a long name could drop below
  the chip onto a second. There is no second line to drop to, and left in place it drew
  "Christopher" as an empty label. The padding every crowded ring already used is the
  rule at all sizes now, widened from 22px to 25 so it actually covers the chip and the
  gap it is inset by.

Then the part that was quietly wrong. renderSeats builds nine empty pucks and fills
them afterwards, so the layout search ran against blank boxes and cached the answer
under a key naming a table it had never measured. On a 390px phone that is a ring
sized for empty seats — and the comment where it was cached said "let the resize that
follows do this properly". Nothing resizes a phone. Turning the phone sideways and
back was the only thing that ever fixed it, and it fixed it into a different layout:
same viewport, same table, 90px pucks on load and 72px after a rotate.

So the finished pucks are measured against the box the search settled on, and if they
disagree the search is asked again with the real thing in front of it. Once, and the
second answer is cached. Fresh load and rotate-and-back now agree exactly.

That also lets the cache key shrink to almost nothing. It used to name every player's
name, the dealer's seat, whether anybody had cards and whether anybody had chips out —
four things, three of which flip during an ordinary hand, each flip a ten-candidate
re-search. None of them can change a puck's height any more. Measured over three calls
in a row: no re-search, and not one of the nine seats moved a pixel.

The crowded ring gives up the 1.4 leading on its money rows to pay for the row it now
holds open — 10px of figures is 12px of ink and the rest was blank. Without it the
Galaxy S8 twelve-handed, where the pucks are already at the 44px floor, put
neighbouring seats' blind badges down onto each other's "ALL IN". Hanging the badges
further out was tried first and is the wrong direction: the badge landing on a stack
figure belongs to the seat next door, so every pixel further out is a pixel further
onto a neighbour.

992 unit tests. 320 layout audits across 13 viewports with a mouse and a thumb: one
failure, the chip behind seat 11 that master already carries.

Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
This commit is contained in:
jheaps
2026-09-10 11:08:14 -06:00
co-authored by Claude Opus 5
parent 3326557043
commit 4a2ec1295b
5 changed files with 536 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/holdem/designTokens.test.js
+9 -4
View File
@@ -51,11 +51,13 @@ const valuesIn = (properties, source = body) => {
describe("the spacing scale", () => {
// Hairlines and structural clearances, each one deliberate:
// 0px/1px/3px/4px/22px — borders, hairline offsets, and the 22px of room a seat
// puck's name gives the dealer button beside it.
// 0px/1px/3px/4px/25px — borders, hairline offsets, and the 25px of room a seat
// puck's name gives the dealer button beside it: the chip's
// own 22px plus the 3px it is inset by, which theRail's
// "as wide as the chip it stands in for" holds it to.
// 5rem/9rem — how far the page has to scroll past the fixed action
// bar. Not rhythm; clearance for a thing of a known size.
const ALLOWED = new Set(["0px", "1px", "2px", "3px", "4px", "22px", "5rem", "9rem"]);
const ALLOWED = new Set(["0px", "1px", "2px", "3px", "4px", "25px", "5rem", "9rem"]);
test("every gap, margin and padding comes off the scale", () => {
const offenders = valuesIn(
@@ -79,7 +81,10 @@ describe("the type scale", () => {
// every text input states it. Not a typographic choice.
// 1.05em, 0.44rem — relative bumps inside a component, and the shrink-to-fit for
// a six-figure stack on a 58px seat puck.
const ALLOWED = new Set(["16px", "1.05em", "0.44rem"]);
// 9px — the floor under the same shrink-to-fit applied to a name. It is a limit
// rather than a size: past it the word stops being legible from across a
// table and an honest ellipsis is the better answer.
const ALLOWED = new Set(["16px", "1.05em", "0.44rem", "9px"]);
test("every font-size comes off the scale", () => {
const offenders = valuesIn(["font-size"]).filter(v => !ALLOWED.has(v.value));
tests/holdem/seatPuckShape.test.js
+183 -66
View File
@@ -1,22 +1,28 @@
// What the ring is allowed to be sized from.
//
// Two rows in every seat puck are usually empty — the hole-card line, and the pill that
// shows what a player has put in. Both used to hold their space anyway, and the pill,
// which has a background and a pill radius and side padding, painted an 8x11px green
// lozenge when it had nothing to say: measured on seven of nine seats at an ordinary
// table, a coloured mark on almost every seat standing for nothing.
// resolveSeatLayout buys its answer with ten forced layouts — ten candidate widths, each
// applied to the felt and read back — and caches it against this signature. So the
// signature has to move whenever a puck's height can, and must not move otherwise: one
// that changed on every action would throw the cache away on every tap, which is the
// whole cost it exists to avoid.
//
// The space was not free either. seatRingRadii sizes the ring from the tallest puck on
// it, so two rows nobody had filled were setting how far apart the seats had to sit. On
// an iPhone 14 nine-handed the puck measured 78x88 with 25px of that reserved for
// nothing; collapsed, the width search settles on 78x63. Twelve-handed on a Galaxy S8
// the seats overlapped by 1556px² and now overlap by 87px².
// It used to name four things: every player's name, the dealer's seat, whether anybody
// had hole cards, and whether anybody had chips out. Three of those flip during an
// ordinary hand. A dealer calling a bet paid ten forced layouts for it, and so did the
// next street closing, and so did editing a name.
//
// The collapse is only safe if the layout re-measures when one of those rows fills,
// because resolveSeatLayout caches its ten forced layouts against this signature. That
// is what is checked here: the cache key has to move when the puck's shape can, and
// stay still when it cannot — a signature that changed on every action would throw the
// cache away on every tap, which is the cost it exists to avoid.
// None of them can change a puck's height any more. The stylesheet holds three rows open
// — name, amount, stack — at a height that does not depend on what is written in them:
// the name gets one line whatever it says, the amount pill keeps its row when it is
// empty, and the dealer's chip changes a padding rather than a line count. What is left
// is the hole-card row, which still collapses, because whether a table tracks hole cards
// is something it decides once rather than something that changes under a thumb.
//
// The other half of that bargain is in renderSeats: it measures the finished pucks
// against the box the search settled on and asks again if they disagree. That is what
// makes a wrong assumption here a stale frame rather than a stale session — and it is
// what catches the first render of all, where the pucks are built empty and the search
// that used to run against them was measuring nine blank boxes.
const test = require("node:test");
const { describe } = require("node:test");
const assert = require("node:assert");
@@ -32,37 +38,39 @@ const signatureOf = state => {
const table = () => makeTable({ seatCount: 6, stack: 200 });
describe("the signature the ring layout is cached against", () => {
test("moves when the first chips go in", () => {
// Before the blinds every pill is empty and the pucks are short; after them two
// seats are ~15px taller. A ring still sized from the first measurement is sized
// for a puck that no longer exists.
const state = table();
const empty = signatureOf(state);
state.seats[1].committed = 10;
assert.notEqual(signatureOf(state), empty,
"the ring would still be sized for pucks with no amount on them");
});
test("and when a hole card is entered", () => {
test("moves when a hole card is entered", () => {
// The one row still allowed to collapse, and the one thing still worth
// re-measuring for: a puck with cards on it is about 15px taller.
const state = table();
const none = signatureOf(state);
state.seats[0].cards = ["AS", "KC"];
assert.notEqual(signatureOf(state), none);
});
test("but not again for the second player to put chips in", () => {
// The whole point of a boolean over the table. The ring is sized from the
// tallest puck on it, so once anybody has an amount the answer cannot change —
// and re-measuring here would mean ten forced layouts on every single action.
test("but not again for the second player to be dealt one", () => {
// The point of a boolean over the table. The ring is sized from the tallest puck
// on it, so once anybody has cards the answer cannot change.
const state = table();
state.seats[1].committed = 10;
state.seats[0].cards = ["AS", "KC"];
const first = signatureOf(state);
state.seats[2].committed = 10;
assert.equal(signatureOf(state), first);
state.seats[3].committed = 250;
state.seats[1].cards = ["2H", "7D"];
assert.equal(signatureOf(state), first);
});
test("and it stands still while the chips move", () => {
// The expensive one. Somebody has money out for most of every hand and which
// seats it is changes on every action, so this used to be a ten-layout re-search
// twice a hand — and the pucks it was re-measuring for are the same height now
// whether there is an amount in them or not.
const state = table();
const quiet = signatureOf(state);
state.seats[1].committed = 10;
assert.equal(signatureOf(state), quiet,
"the amount pill holds its row whether or not it has an amount in it");
state.seats[2].committed = 250;
assert.equal(signatureOf(state), quiet);
});
test("nor when an amount merely changes size", () => {
const state = table();
state.seats[1].committed = 10;
@@ -72,54 +80,163 @@ describe("the signature the ring layout is cached against", () => {
"a wider number is the amount fitter's problem, not the ring's");
});
test("and it still moves for the things it always moved for", () => {
// Renaming can wrap a name onto a second line, and the button's chip floats
// into the name's first line, so both change how tall a puck measures.
test("and it stands still for a rename", () => {
// Renaming used to be able to wrap a name onto a second line. A name gets one
// line now, and one that does not fit drops a word or steps its type down — see
// fitSeatNames. Neither moves the row it sits in.
const state = table();
const base = signatureOf(state);
state.seats[0].name = "Bartholomew Fairweather";
const renamed = signatureOf(state);
assert.notEqual(renamed, base);
state.dealerSeatIndex = (state.dealerSeatIndex + 1) % state.seats.length;
assert.notEqual(signatureOf(state), renamed);
assert.equal(signatureOf(state), base);
});
test("and two tables that differ only in where a name is split stay different", () => {
// The names are joined on a control character no name can contain. Joined on
// nothing, "ann" + "abel" and "anna" + "bel" are both "annabel" and one of those
// tables would be laid out with the other's measurements — different names, so
// different wrapping, so different puck heights.
//
// The first version of this used "Ann"/"Abel" against "Anna"/"Bel", which can
// never collide: the capital letters land in different places, so it passed with
// the separator taken out and proved nothing at all. Lower case is what makes it
// a real test.
const a = table();
const b = table();
a.seats[0].name = "ann"; a.seats[1].name = "abel";
b.seats[0].name = "anna"; b.seats[1].name = "bel";
assert.notEqual(signatureOf(a), signatureOf(b));
test("and for the button moving round the table", () => {
// The chip in the puck's corner takes 22px off the name's line. That is a
// narrower name, not a taller puck, so the ring it sits on is the same ring.
const state = table();
const base = signatureOf(state);
state.dealerSeatIndex = (state.dealerSeatIndex + 1) % state.seats.length;
assert.equal(signatureOf(state), base);
});
});
describe("a table nobody has sat down at", () => {
test("has no amounts and no cards on it", () => {
test("carries no flag at all", () => {
// The empty-table case is the one the collapse is most visible on, and it is
// also the one where a stray default could quietly keep both rows open forever.
// also the one where a stray default could quietly keep the row open forever.
const state = HoldemState.createDefault();
HoldemState.resizeSeats(state, 9);
assert.match(signatureOf(state), /\|$/,
"an untouched table should carry neither flag");
assert.equal(signatureOf(state), "",
"an untouched table should carry nothing");
});
test("but a table with an ante on it does have an amount", () => {
// computeContribution answers for a seat that has never been given a stack —
// the table's base pot stands in for it — so a table dealt with "everyone antes
// 5" has amounts on its pucks before anybody acts, and the ring has to know.
test("and neither does one with an ante on it", () => {
// computeContribution answers for a seat that has never been given a stack — the
// table's base pot stands in for it — so a table dealt with "everyone antes 5"
// has amounts on its pucks before anybody acts. That used to have to be in here.
// The pucks are the same height with it as without, so it does not any more.
const state = HoldemState.createDefault();
HoldemState.resizeSeats(state, 6);
state.basePotAmount = 5;
state.seats.forEach(p => { p.inHand = true; });
assert.match(signatureOf(state), /a$/);
assert.equal(signatureOf(state), "");
});
});
// ---------------------------------------------------------------------------
// The other half: the stylesheet has to actually hold those rows open, or the signature
// above is a promise about a puck that doesn't exist.
//
// Read as text, the way the seat sheet's rules and the reduced-motion rules are. What
// height a row is, is a decision that lives in the file — the browser is where it is
// proved, and runUiAudit.js is what proves it there.
const fs = require("fs");
const path = require("path");
const CSS = fs.readFileSync(
path.join(__dirname, "..", "..", "JoshHeaps.Net", "wwwroot", "css", "casino", "holdem.css"), "utf8");
const ruleFor = selector => {
const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
const found = CSS.match(new RegExp(`(^|[},])\\s*${escaped}\\s*\\{([^}]*)\\}`, "m"));
return found ? found[2] : null;
};
describe("every puck on the ring is the same puck", () => {
test("each of the three rows is a row high whether or not it says anything", () => {
// A blank label had no height at all, so the one puck with nobody in it was the
// one puck a different size from the rest — and a seat that had put chips in was
// a different size again from one that hadn't.
["name", "total", "stack"].forEach(row => {
const selector = `.seatPuck${row[0].toUpperCase()}${row.slice(1)}`;
const body = ruleFor(selector) || "";
assert.match(body, /min-height:\s*var\(--seatRow(Name|Money)\)/,
`${selector} does not hold its row open`);
});
});
test("and the row heights are tokens, not ems", () => {
// fitAmount steps a tournament stack's type down so every digit stays on the
// puck, and .puckNameTight does the same to a name with no word to drop. In ems
// each of those would have taken its row down with it, and the puck with it.
["--seatRowName", "--seatRowMoney"].forEach(token =>
assert.match(CSS, new RegExp(`\\${token}:\\s*\\d+px`), `${token} is not a fixed height`));
});
test("the amount pill hides its paint rather than giving up its place", () => {
// Collapsing it is what made a puck grow 17px when its player called and shrink
// again when the street closed. Painting an empty pill is what collapsing it was
// introduced to stop — an 8x11px green lozenge on seven of nine seats, standing
// for nothing. Neither, now: the row stays and the pill is not drawn.
assert.match(ruleFor(".seatPuckTotal:empty") || "", /visibility:\s*hidden/);
assert.doesNotMatch(ruleFor(".seatPuckTotal:empty") || "", /display:\s*none/);
});
test("but the hole-card row still collapses, because a table decides that once", () => {
// Holding 15px open on nine seats all night for a row most tables never fill is
// the crowding this is meant to avoid, and it is the one thing left that the
// signature above still watches for.
assert.match(ruleFor(".seatPuckCards:empty") || "", /display:\s*none/);
});
test("an empty pill sits on its top edge, not on a baseline it hasn't got", () => {
// An inline-block sits on its last line's baseline, and an empty one has no last
// line — so it sits on its bottom edge instead and the line box comes out 2px
// shorter than the same pill with a figure in it. That put the seats with money
// out 2px below everyone else: the one difference this row exists to remove,
// reappearing as its own mirror image.
assert.match(ruleFor(".seatPuckTotal") || "", /vertical-align:\s*top/);
});
});
// ---------------------------------------------------------------------------
describe("and the ring checks its own measurement afterwards", () => {
// The signature above is an assumption about what can change a puck. This is what
// happens when the assumption is wrong, and it is also what happens on the first
// render of all: buildSeatNodes puts nine empty pucks on the felt and the search runs
// before anything is written into them, so it was measuring nine blank boxes and
// caching the answer under a key naming a table it had never seen.
//
// That used to be permanent. The comment where it was cached said "let the resize
// that follows do this properly" — and nothing resizes a phone. A table opened
// upright kept a ring measured for empty seats until the dealer turned the phone
// sideways and back, which is the only thing that ever changed the key.
const withBox = (box, run) => {
const before = Render.measuredSeatBox;
Render.measuredSeatBox = () => box;
try { return run(); } finally { Render.measuredSeatBox = before; }
};
test("a layout that measured nothing is always asked again", () => {
// No box on the answer means the search never had a puck in front of it.
assert.equal(withBox({ width: 72, height: 56 }, () => Render.seatBoxMoved(null)), true);
assert.equal(withBox({ width: 72, height: 56 }, () => Render.seatBoxMoved(undefined)), true);
});
test("one that measured the puck that is now on the felt is not", () => {
assert.equal(
withBox({ width: 72, height: 56 }, () => Render.seatBoxMoved({ width: 72, height: 56 })),
false);
});
test("and a pixel of difference is a rounding artefact, not a table that moved", () => {
// The two measurements are taken at different moments. Without the slack this
// would ask the search to run again on every render for the rest of the session,
// which is ten forced layouts a tap — the exact cost the cache exists to avoid.
assert.equal(
withBox({ width: 72.4, height: 56.4 }, () => Render.seatBoxMoved({ width: 72, height: 56 })),
false);
assert.equal(
withBox({ width: 72, height: 58 }, () => Render.seatBoxMoved({ width: 72, height: 56 })),
true, "two pixels taller is a puck that has changed shape");
});
test("nothing on the felt to measure is not a reason to ask again", () => {
// Between a table being resized and the new pucks being built there is a moment
// with no seats at all. Asking again there would clear a good answer and replace
// it with one measured from nothing.
assert.equal(withBox(null, () => Render.seatBoxMoved({ width: 72, height: 56 })), false);
});
});
tests/holdem/theRail.test.js
+74 -44
View File
@@ -115,53 +115,46 @@ describe("the bar lines up with the table", () => {
// ---------------------------------------------------------------------------
describe("the button seat's name", () => {
// The dealer button's chip sits in the puck's top-right corner. Keeping the name out
// from under it with `padding-right` takes the chip's width off *every* line of the
// name, and the chip is on one of them: measured at 1280x900, the name box is 78px,
// "Christopher" is 66 and fits, and on the seat holding the button it was cut to 56
// and broke as "Christop / her". The button moves every hand, so that is a player
// whose name reads properly for four hands and comes apart on the fifth.
const roomy = CSS.match(/#seatsLayer:not\(\.seatsTight\) \.seat\.seatHasButton \.seatPuckName \{([^}]*)\}/);
const float = CSS.match(/#seatsLayer:not\(\.seatsTight\) \.seat\.seatHasButton \.seatPuckName::before \{([^}]*)\}/);
// The dealer button's chip sits in the puck's top-right corner, and the name has to
// keep out from under it. `padding-right` takes the chip's width off the name's line,
// which is the whole of the answer now that there is only ever one line.
//
// A float used to do this on the roomier rings — three rules of it, indenting the
// first line so a name too long to fit beside the chip could drop below it onto a
// second. That only worked because there was a second line. There isn't: see the row
// heights in holdem.css, and the fitSeatNames tests below for what happens instead to
// a name that does not fit.
const base = CSS.match(/\n\.seat\.seatHasButton \.seatPuckName \{([^}]*)\}/);
test("a ring with room for two lines indents only the line beside the chip", () => {
assert.ok(roomy && float, "the roomy regime should use a float");
assert.match(float[1], /float:\s*right/);
assert.match(roomy[1], /padding-right:\s*0/);
test("the chip's width comes off the name, at every size", () => {
assert.ok(base, "the base rule should reserve the chip's width");
assert.match(base[1], /padding-right:\s*25px/);
});
test("the float is exactly one line tall", () => {
// Tall enough to cover the chip's reach into the name, and no taller: a float
// that spills into the second line indents that one too, which puts the whole
// problem back.
assert.match(float[1], /height:\s*1\.2em/);
});
test("break-word stands down where the float is doing the work", () => {
// It is what stops the float working — it breaks a word to fit the short line
// rather than letting it move past the float to the long one.
assert.match(roomy[1], /overflow-wrap:\s*normal/);
});
test("a crowded ring keeps the padding, because it has only one line", () => {
// `.seatsTight .seatPuckName` is `line-clamp: 1` on purpose, and one line has
// nowhere to move to — the only way to keep it off the chip is to shorten it.
// Trying the float on both cost a whole sweep to find out: the name dropped onto
// a second line that the chip's lower half was still sitting on, and the audit
// called it at every viewport in the list.
assert.ok(base, "the base rule should still reserve the chip's width");
assert.match(base[1], /padding-right:\s*22px/);
assert.match(CSS, /\.seatsTight \.seatPuckName \{[^}]*line-clamp:\s*1/);
});
test("the float is as wide as the chip it stands in for", () => {
test("and it is as wide as the chip it stands in for", () => {
const chip = CSS.match(/\n\.dealerChip \{[^}]*?(?<![\w-])width:\s*(\d+)px/);
const inset = CSS.match(/\n\.dealerChip \{[^}]*?(?<![\w-])right:\s*(\d+)px/);
const floatW = float[1].match(/width:\s*(\d+)px/);
assert.ok(chip && inset && floatW);
assert.equal(Number(floatW[1]), Number(chip[1]) + Number(inset[1]),
"the float should cover the chip and the gap it is inset by");
const pad = base[1].match(/padding-right:\s*(\d+)px/);
assert.ok(chip && inset && pad);
assert.equal(Number(pad[1]), Number(chip[1]) + Number(inset[1]),
"the padding should cover the chip and the gap it is inset by");
});
test("the float that used to do this is gone, not merely unused", () => {
// Left in place with a one-line clamp it would clip the name to nothing: the
// word cannot fit beside the float, so it moves to a second line, and the second
// line is what the clamp hides. Measured — "Christopher" drew as an empty label.
assert.equal(/\.seatPuckName::before/.test(CSS), false,
"a float and one line of name cannot both be true");
});
test("and no rule anywhere gives a puck's name a second line", () => {
// This is what every puck being the same height rests on. A name is a label, and
// the ring is sized against the tallest puck on it, so one name wrapping is one
// seat setting how far apart all of them have to sit.
const clamps = CSS.match(/(?<![\w-])line-clamp:\s*(\d+)/g) || [];
assert.ok(clamps.length > 0, "the name should still be clamped to something");
clamps.forEach(clamp => assert.match(clamp, /:\s*1$/, clamp));
});
});
@@ -234,9 +227,17 @@ describe("a name that will not fit", () => {
// ladder — which words go, in what order, and when it stops — and the browser's part
// is one boolean per pass.
const label = (text, fits) => {
const classes = new Set();
const el = {
textContent: text,
title: "",
// The step of type a name takes when it has no word left to drop, held as
// the same set of strings the real element's classList is.
classList: {
add: name => classes.add(name),
remove: name => classes.delete(name),
contains: name => classes.has(name),
},
// The browser's answer, standing in for a real one: this name fits if
// `fits` says the version currently written to it does.
get scrollWidth() { return fits(this.textContent) ? 10 : 100; },
@@ -309,13 +310,16 @@ describe("a name that will not fit", () => {
assert.equal(Render.dropAWord(["Mike"], 1), 1, "one word has nothing to drop");
});
test("a single word is left to the ellipsis it always had", () => {
// There is no honest way to shorten "Christopher" that a dealer glancing across
// a table would read faster than "Christo…".
test("a single word steps its type down rather than being cut", () => {
// There is no honest way to shorten "Christopher" at a word, and "Christo…" is a
// name only until a Christine sits down. The amounts on the same puck have never
// taken that trade — fitAmount shrinks a tournament stack rather than rounding it
// — and a misread name is the same kind of failure as a misread stack.
const el = label("Christopher", () => false);
seatsNamed("Christopher");
Render.fitSeatNames(layer([el]));
assert.equal(el.textContent, "Christopher", "never cut mid-word here");
assert.ok(el.classList.contains("puckNameTight"), "and never left overflowing either");
});
test("a name that fits is not touched", () => {
@@ -323,6 +327,32 @@ describe("a name that will not fit", () => {
seatsNamed("Mike from work");
Render.fitSeatNames(layer([el]));
assert.equal(el.textContent, "Mike from work");
assert.ok(!el.classList.contains("puckNameTight"), "nothing to shrink for");
});
test("a name shortened until it fits is not also shrunk", () => {
// The step of type is the last resort, not a second helping. "Mike" fits, so it
// is read at the size everything else on the felt is.
const el = label("Mike from work", text => text === "Mike");
seatsNamed("Mike from work");
Render.fitSeatNames(layer([el]));
assert.equal(el.textContent, "Mike");
assert.ok(!el.classList.contains("puckNameTight"));
});
test("the step comes off again when the puck it was for is gone", () => {
// Otherwise it is a ratchet: a name that had to shrink on a nine-handed phone
// would still be shrunk on the same table six-handed, or on a desktop, because
// nothing ever measured it at the size it was supposed to be read at.
const el = label("Christopher", () => false);
seatsNamed("Christopher");
Render.fitSeatNames(layer([el]));
assert.ok(el.classList.contains("puckNameTight"));
const roomy = label("Christopher", () => true);
roomy.classList.add("puckNameTight");
Render.fitSeatNames(layer([roomy]));
assert.ok(!roomy.classList.contains("puckNameTight"));
});
test("the whole name is on the tooltip whether it was shortened or not", () => {