jheapsandClaude Opus 5
ab04c43ffd
Two things moved the felt, and neither of them was the felt's business. The raise pad. It is 57px taller than the row it replaces, and the table was sized against it — so pressing Raise shrank the whole thing, re-ran the ten-candidate width search, redrew every seat at a different size, and undid all of it when the dealer pressed Raise to. Measured, five players nine-handed: 1280x900 felt 738x532 -> 669x481, pucks 120 -> 109, worst seat moved 73px 360x640 felt 283x329 -> 283x279, pucks 44 -> 48, worst seat moved 50px 390x844 felt 309x463 -> 309x451, worst seat moved 11px Every raise, all night, at the one moment the dealer is reading the felt to decide what to type. A phone held sideways already scored 0px: the rail is a column down the side, and its height never was the table's business. So the felt is sized against the bar at rest and the pad floats up over the bottom of it, which is what a transient surface is supposed to do — the context it is over stays where it was. --actionBarHeight is untouched and still says what is really covering the window, because that is what the toast has to clear. And the status row. It wraps, and flex settles its line breaks before it decides what to shrink, so a name too long for the room left beside the clock and the undo pill did not give way — it pushed them onto a third line. That is 22px off a felt underneath a bar fixed to the bottom. Measured at 360x640 mid-street: "Dee · $600 behind" left the table 283x329 and "Christopher · $1,200 behind" made it 283x310, with every seat moving 24px between one player and the next. Whose turn it was decided how big the table was. An earlier round saw this and reserved two lines for the row; three is what it takes. Reserving three would spend the 22px on every table for the sake of some of them. So the actor, the clock and the undo pill get a line of their own that cannot wrap, and the name shrinks into it — with the stack held out of the shrink, because a number read wrong is a worse failure than a name read short. The row is 66px whoever is acting. It claims that line only when there is somebody on it. Claiming it unconditionally cost one in the state that can least afford it — a board running out has nobody to act, so the row is the undo pill alone, and it used to sit up beside "All-in — running out the board". The pill gives width back to the name on a phone: 10rem is 160px, and at 360 it took half the row, leaving "Christopher" cut to 23px of its 75. A media query, not `min(10rem, 34%)` — that was tried, and a percentage against a row sized to its own contents chases itself: the sweep caught the pill drawn 38px wide at ten viewports. Verified by walking a hand at five viewports: one felt size, one puck width, and not one seat moving, across a raise pad opened and shut and a full street of action. 1003 unit tests. 320 layout audits across 13 viewports with a mouse and a thumb, and this is the first round in a while with nothing in them — the chip behind seat 11 on the twelve-handed Galaxy S8, which master has carried for rounds, clears too. Co-Authored-By: Claude Opus 5 <[email protected]> Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
665 lines
33 KiB
JavaScript
665 lines
33 KiB
JavaScript
// A phone held sideways, and the three pieces of arithmetic that make the table fit on
|
|
// one.
|
|
//
|
|
// The layout audit is what proved this was broken and what proves it is fixed — it
|
|
// measures the drawn page, which is the only place a layout is really true. What is
|
|
// here is the part underneath that can be wrong on its own: which shape the bar is in,
|
|
// how much of the bottom that leaves spoken for, how a name is shortened when it will
|
|
// not fit, and how the ring is pulled back in when a puck lands past the rail.
|
|
const test = require("node:test");
|
|
const { describe } = require("node:test");
|
|
const assert = require("node:assert");
|
|
const fs = require("fs");
|
|
const path = require("path");
|
|
const { ActionBar, Render } = require("./load");
|
|
|
|
const CSS = fs.readFileSync(
|
|
path.join(__dirname, "..", "..", "JoshHeaps.Net", "wwwroot", "css", "casino", "holdem.css"), "utf8");
|
|
const CSS_JS = fs.readFileSync(
|
|
path.join(__dirname, "..", "..", "JoshHeaps.Net", "wwwroot", "js", "casino", "holdem", "actionBar.js"), "utf8");
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
describe("which shape the bar is in", () => {
|
|
// The layout is chosen by a media query — orientation, height and width together.
|
|
// The one thing that must not happen is a second copy of that query in JavaScript,
|
|
// because the first thing anybody changes is the breakpoint, in one of the two
|
|
// places. So the stylesheet declares which layout it picked and actionBar.js reads
|
|
// the answer back.
|
|
const withComputed = (value, run) => {
|
|
const host = { id: "actionBar" };
|
|
global.getComputedStyle = el => ({
|
|
getPropertyValue: prop => (el === host && prop === "--actionBarLayout" ? value : ""),
|
|
});
|
|
try { return run(host); } finally { delete global.getComputedStyle; }
|
|
};
|
|
|
|
test("the stylesheet says, and this reads", () => {
|
|
assert.equal(withComputed(" rail ", host => ActionBar.isRail(host)), true);
|
|
assert.equal(withComputed(" bar ", host => ActionBar.isRail(host)), false);
|
|
});
|
|
|
|
test("anything it does not recognise is the bar it has always been", () => {
|
|
assert.equal(withComputed("", host => ActionBar.isRail(host)), false);
|
|
assert.equal(withComputed("sidebar", host => ActionBar.isRail(host)), false);
|
|
});
|
|
|
|
test("and with no browser at all, likewise", () => {
|
|
assert.equal(ActionBar.isRail(null), false);
|
|
assert.equal(ActionBar.isRail({ id: "actionBar" }), false,
|
|
"no getComputedStyle to ask — this runs in the unit suite too");
|
|
});
|
|
|
|
test("the stylesheet declares both halves of it", () => {
|
|
// If either of these goes, isRail() quietly answers "bar" forever and the felt
|
|
// is measured against a bar that is not underneath it.
|
|
assert.match(CSS, /#actionBar\s*\{[^}]*--actionBarLayout:\s*bar/,
|
|
"the default, on the base rule");
|
|
assert.match(CSS, /--actionBarLayout:\s*rail/,
|
|
"and the rail, inside the landscape query");
|
|
});
|
|
|
|
test("the rail is scoped to a phone, not to any short window", () => {
|
|
// Above 900px the sidebar is already a right-hand column and a rail would land
|
|
// on top of it.
|
|
const query = CSS.match(/@media \(orientation: landscape\)[^{]*\{[\s\S]{0,400}?--actionBarLayout: rail/);
|
|
assert.ok(query, "the rail lives in a landscape media query");
|
|
assert.match(query[0], /max-width:\s*900px/);
|
|
assert.match(query[0], /max-height:\s*560px/);
|
|
});
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
describe("the bar lines up with the table", () => {
|
|
// On a desktop the bar was centred on the window and the table on its own column,
|
|
// and the sidebar takes 320px out of the right of that — so the two things a dealer
|
|
// is looking at were 172px apart, at 960px wide and at 1600px and everywhere in
|
|
// between, because the offset is half the sidebar and the sidebar is a constant.
|
|
//
|
|
// The rule that fixes it is four numbers that have to keep agreeing with four other
|
|
// numbers, none of them anywhere near each other in the file. That is what this
|
|
// block is for: the arithmetic is checked on the running page by measurement (bar
|
|
// centre against table-column centre, which came out 0px off at every width), and
|
|
// the numbers it depends on are checked here so they cannot drift apart afterwards.
|
|
const rule = CSS.match(/@media \(min-width: 901px\) \{\s*#actionBar \{([^}]*)\}/);
|
|
|
|
test("there is a rule, and it is scoped above the one-column breakpoint", () => {
|
|
// Below 901px the sidebar is not a column at all — it is stacked under the table
|
|
// — so there is nothing to lean away from and the bar is centred as it was.
|
|
assert.ok(rule, "no min-width: 901px rule for #actionBar");
|
|
assert.match(CSS, /@media \(max-width: 900px\)[\s\S]{0,200}#holdemLayout \{\s*grid-template-columns: 1fr;/,
|
|
"the one-column layout should start exactly where this rule stops");
|
|
});
|
|
|
|
test("it leans away from the sidebar by the sidebar's own width", () => {
|
|
assert.match(rule[1], /left:\s*var\(--sp-6\)/);
|
|
assert.match(rule[1], /right:\s*calc\(var\(--sidebarW\)\s*\+\s*var\(--sp-5\)\s*\+\s*var\(--sp-6\)\)/);
|
|
});
|
|
|
|
test("and the sidebar's width is one number, not two", () => {
|
|
// The grid draws the column and the bar leans away from it. Written out twice,
|
|
// the day somebody widens the sidebar is the day the bar goes crooked and no
|
|
// test says so.
|
|
assert.match(CSS, /--sidebarW:\s*\d+px/, "the token should be declared");
|
|
assert.match(CSS, /grid-template-columns:\s*1fr var\(--sidebarW\)/,
|
|
"the grid should draw the column from the token");
|
|
});
|
|
|
|
test("no 100vw anywhere in it", () => {
|
|
// The bar's own centring comment warns about this: on a page with a scrollbar
|
|
// 100vw is wider than the viewport, and the overflow drags the table sideways.
|
|
// The offsets are exact without it — see the derivation in the stylesheet.
|
|
assert.equal(/100vw/.test(rule[1]), false, rule[1]);
|
|
});
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
describe("the button seat's name", () => {
|
|
// 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("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("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 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));
|
|
});
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
describe("the table is sized against the bar, not against a pad over it", () => {
|
|
// The raise pad is 57px taller than the row it replaces, and the felt was sized
|
|
// against it. Measured with five players nine-handed, pressing Raise:
|
|
//
|
|
// 1280x900 felt 738x532 -> 669x481, pucks 120 -> 109, worst seat moved 73px
|
|
// 360x640 felt 283x329 -> 283x279, pucks 44 -> 48, worst seat moved 50px
|
|
//
|
|
// The whole table jumped, re-ran the ten-candidate width search, and undid all of it
|
|
// when the dealer pressed Raise to. Every raise, all night, at the one moment they
|
|
// are reading the felt to decide what to type.
|
|
//
|
|
// A phone held sideways already scored 0px, because the rail is a column down the
|
|
// side and its height never was the table's business. This is the upright layout
|
|
// being held to what the sideways one already does.
|
|
test.afterEach(() => { ActionBar.raiseOpen = false; delete ActionBar.barHeightAtRest; });
|
|
|
|
test("a closed bar is measured, and remembered", () => {
|
|
ActionBar.raiseOpen = false;
|
|
assert.equal(ActionBar.restingBarHeight(151), 151);
|
|
assert.equal(ActionBar.barHeightAtRest, 151);
|
|
});
|
|
|
|
test("and an open pad gets the height the bar had before it opened", () => {
|
|
ActionBar.raiseOpen = false;
|
|
ActionBar.restingBarHeight(151);
|
|
ActionBar.raiseOpen = true;
|
|
assert.equal(ActionBar.restingBarHeight(208), 151,
|
|
"the felt would resize under the dealer's thumb mid-raise");
|
|
});
|
|
|
|
test("and gets it back the moment the pad closes", () => {
|
|
ActionBar.raiseOpen = false;
|
|
ActionBar.restingBarHeight(151);
|
|
ActionBar.raiseOpen = true;
|
|
ActionBar.restingBarHeight(208);
|
|
ActionBar.raiseOpen = false;
|
|
assert.equal(ActionBar.restingBarHeight(172), 172,
|
|
"a bar that really did grow — a side pot to show — still takes its room");
|
|
});
|
|
|
|
test("a pad open before anything was ever measured takes what it can see", () => {
|
|
// Nothing has been remembered yet, so the measurement is the only answer there
|
|
// is. Better a felt sized for the pad than one sized for undefined.
|
|
ActionBar.raiseOpen = true;
|
|
delete ActionBar.barHeightAtRest;
|
|
assert.equal(ActionBar.restingBarHeight(208), 208);
|
|
});
|
|
|
|
test("the bar that is actually covering the window is still reported honestly", () => {
|
|
// Only the felt's question is answered from the resting height. The toast has to
|
|
// clear whatever is really there, and so does the page's scroll padding, so
|
|
// --actionBarHeight stays a measurement.
|
|
const publish = CSS_JS.slice(CSS_JS.indexOf("const publish = () => {"));
|
|
const body = publish.slice(0, publish.indexOf("};"));
|
|
assert.match(body, /--actionBarHeight[^\n]*Math\.round\(height\)/,
|
|
"--actionBarHeight should still be the measured height");
|
|
assert.match(body, /publishFeltRoom\(.*restingBarHeight\(height\)/,
|
|
"the felt should be the one asking for the resting height");
|
|
});
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
describe("the status block is the same number of lines whoever is acting", () => {
|
|
// The bar is fixed to the bottom, so a line added to this block comes straight off
|
|
// the felt. The block wraps, and flex settles its line breaks before it decides what
|
|
// to shrink — so a name too long for the space left beside the clock and the undo
|
|
// pill did not give way, it pushed them onto a third line.
|
|
//
|
|
// Measured at 360x640 mid-street: "Dee · $600 behind" left the table 283x329 and
|
|
// "Christopher · $1,200 behind" made it 283x310, with every seat moving 24px between
|
|
// one player and the next. Whose turn it was decided how big the table was.
|
|
const acting = CSS.match(/\.actionActing \{([^}]*)\}/);
|
|
const who = CSS.match(/\n\.actionWho \{([^}]*)\}/);
|
|
const name = CSS.match(/\.actionWhoName \{([^}]*)\}/);
|
|
const stack = CSS.match(/\.actionWhoStack \{([^}]*)\}/);
|
|
|
|
test("the acting row takes a line of its own, once there is somebody on it", () => {
|
|
assert.ok(acting, ".actionActing rule not found");
|
|
assert.match(acting[1], /flex:\s*0 1 auto/,
|
|
"the pill on its own should not claim a line");
|
|
const withActor = CSS.match(/\.actionActing:has\(\.actionWho\) \{([^}]*)\}/);
|
|
assert.ok(withActor, "nothing gives the acting row its own line");
|
|
assert.match(withActor[1], /flex:\s*1 1 100%/,
|
|
"without a full basis it shares whatever line the wrap left it");
|
|
});
|
|
|
|
test("and only then — a run-out has nobody to act and cannot spare the line", () => {
|
|
// While a board is running out there is nobody to act, so this row is the undo
|
|
// pill alone. Claiming a line for it is 22px off the felt on the twelve-handed
|
|
// 360x640 table where the pucks are already at their 44px floor, and the sweep
|
|
// caught that as a seat's "ALL IN" going back under the blind badge next door.
|
|
assert.doesNotMatch(acting[1], /flex:\s*1 1 100%/);
|
|
});
|
|
|
|
test("and it shrinks rather than wrapping", () => {
|
|
// Left wrapping, this row reproduced the fault one level down: the undo pill is
|
|
// a fixed width, so a long name pushed it onto a line of its own and the block
|
|
// was 84px for some players and 66 for others.
|
|
assert.match(acting[1], /flex-wrap:\s*nowrap/);
|
|
});
|
|
|
|
test("the name is what gives way", () => {
|
|
// `min-width` on a flex item defaults to `auto` — "never smaller than your own
|
|
// content" — which is why the ellipsis this was written with never once appeared.
|
|
assert.ok(who && name, "the actor should be a name and an amount, not one string");
|
|
assert.match(who[1], /min-width:\s*0/);
|
|
assert.match(name[1], /min-width:\s*0/);
|
|
assert.match(name[1], /text-overflow:\s*ellipsis/);
|
|
});
|
|
|
|
test("and the stack is what does not", () => {
|
|
// The same rule the seat pucks keep: a number read wrong is a worse failure than
|
|
// a name read short, so the stack keeps every digit.
|
|
assert.ok(stack, ".actionWhoStack rule not found");
|
|
assert.match(stack[1], /flex:\s*none/);
|
|
});
|
|
|
|
test("except in the rail, which is a column and has no line to shrink into", () => {
|
|
// 190px wide: every one of these readings is on its own line there regardless,
|
|
// and squeezing a name into a fifth of the column would be shrinking to fit a
|
|
// row that isn't there.
|
|
const rules = [...CSS.matchAll(/\.actionActing \{([^}]*)\}/g)].map(m => m[1]);
|
|
assert.equal(rules.length, 2,
|
|
"one rule for the bar and one for the rail — no more, no fewer");
|
|
assert.ok(rules.some(body => /flex-wrap:\s*wrap\s*;/.test(body)),
|
|
"the rail should say what it wants instead");
|
|
});
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
describe("how much of the bottom is spoken for", () => {
|
|
// feltRoomFor asks one question — what is under the felt — and gets two different
|
|
// answers depending on the layout. Under the bar it is the bar. Under the rail it is
|
|
// the table hint and the two links, because the bar is off to the side.
|
|
const fakeSection = (wrapBottom, sectionBottom) => {
|
|
const wrap = {
|
|
getBoundingClientRect: () => ({ bottom: wrapBottom }),
|
|
parentElement: { getBoundingClientRect: () => ({ bottom: sectionBottom }) },
|
|
};
|
|
global.document = { getElementById: id => (id === "pokerTableWrap" ? wrap : null) };
|
|
};
|
|
|
|
test.afterEach(() => { delete global.document; });
|
|
|
|
test("it is the gap under the felt, links and all", () => {
|
|
fakeSection(300, 342);
|
|
assert.equal(ActionBar.roomBelowFelt(), 42);
|
|
});
|
|
|
|
test("a difference, not a height — so it does not chase the felt it is sizing", () => {
|
|
// The wrap's own height comes from --feltRoomPx, which is what this feeds. Read
|
|
// as "how tall is everything under the felt" off the section's height it would
|
|
// move every time the felt did, and settle nowhere.
|
|
fakeSection(300, 342);
|
|
const first = ActionBar.roomBelowFelt();
|
|
fakeSection(500, 542); // the felt grew by 200; what is under it did not
|
|
assert.equal(ActionBar.roomBelowFelt(), first);
|
|
});
|
|
|
|
test("nothing under the felt is nothing to reserve", () => {
|
|
fakeSection(300, 300);
|
|
assert.equal(ActionBar.roomBelowFelt(), 0);
|
|
});
|
|
|
|
test("and a section that measures shorter than its own child is not negative room", () => {
|
|
fakeSection(300, 288);
|
|
assert.equal(ActionBar.roomBelowFelt(), 0);
|
|
});
|
|
|
|
test("with no table on the page it asks for nothing", () => {
|
|
global.document = { getElementById: () => null };
|
|
assert.equal(ActionBar.roomBelowFelt(), 0);
|
|
});
|
|
|
|
test("the felt gets the height the bar used to take", () => {
|
|
// The whole point, in one line. At 640x360 the bar was 205px of a 360px window
|
|
// and the felt got 85. Beside the table instead, the same window gives the felt
|
|
// everything but the header and the links.
|
|
const asABar = ActionBar.feltRoomFor(360, 205, 70);
|
|
const asARail = ActionBar.feltRoomFor(360, 30, 70);
|
|
assert.ok(asARail > asABar * 2, `${asABar}px became ${asARail}px`);
|
|
});
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
describe("a name that will not fit", () => {
|
|
// Shortened at a word, not chopped in the middle of one. A puck is 34px of text on
|
|
// a nine-handed phone, and what the ellipsis produced for the four names on the test
|
|
// table was "Christo…", "Mike / from…", "Alexan…". Only one of those is throwing
|
|
// away something the dealer does not need: he is Mike, and the rest of it is how
|
|
// this table tells him from the other Mike.
|
|
//
|
|
// The label element is faked here rather than measured. What is under test is the
|
|
// 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; },
|
|
get clientWidth() { return 10; },
|
|
get scrollHeight() { return 10; },
|
|
get clientHeight() { return 10; },
|
|
querySelector: () => el,
|
|
};
|
|
return el;
|
|
};
|
|
|
|
const layer = (labels) => ({
|
|
children: labels,
|
|
childElementCount: labels.length,
|
|
});
|
|
|
|
const seatsNamed = (...names) => {
|
|
Render.state = { seats: names.map(name => ({ name })) };
|
|
};
|
|
|
|
test.afterEach(() => { Render.state = null; });
|
|
|
|
test("trailing words go until it fits", () => {
|
|
const el = label("Christopher John Robinson", text => text === "Christopher John");
|
|
seatsNamed("Christopher John Robinson");
|
|
Render.fitSeatNames(layer([el]));
|
|
assert.equal(el.textContent, "Christopher John");
|
|
});
|
|
|
|
test("and it will go all the way to the first word", () => {
|
|
const el = label("Christopher John Robinson", text => text === "Christopher");
|
|
seatsNamed("Christopher John Robinson");
|
|
Render.fitSeatNames(layer([el]));
|
|
assert.equal(el.textContent, "Christopher");
|
|
});
|
|
|
|
test("a name never ends on a word a name cannot end on", () => {
|
|
// Dropping "work" off "Mike from work" leaves "Mike from", which is not a
|
|
// shorter name — it is a name that looks cut off, and it reads worse than the
|
|
// ellipsis this was meant to replace. He is Mike.
|
|
const el = label("Mike from work", () => false);
|
|
seatsNamed("Mike from work");
|
|
Render.fitSeatNames(layer([el]));
|
|
assert.equal(el.textContent, "Mike");
|
|
});
|
|
|
|
test("and it takes a run of them in one go", () => {
|
|
const el = label("Al with the hat", () => false);
|
|
seatsNamed("Al with the hat");
|
|
Render.fitSeatNames(layer([el]));
|
|
assert.equal(el.textContent, "Al");
|
|
});
|
|
|
|
test("but a joining word inside a name is nobody's business", () => {
|
|
// The list is closed and small on purpose: it is not trying to understand names,
|
|
// only the handful of English joining words people label each other with at a
|
|
// home game. Anything it doesn't know stays, which is the safe way to be wrong —
|
|
// a name that keeps a word it could have dropped is merely long.
|
|
const el = label("Katarzyna Nowak Kowalska", text => text === "Katarzyna Nowak");
|
|
seatsNamed("Katarzyna Nowak Kowalska");
|
|
Render.fitSeatNames(layer([el]));
|
|
assert.equal(el.textContent, "Katarzyna Nowak");
|
|
});
|
|
|
|
test("dropping never goes below the first word", () => {
|
|
// Every word after the first being a joining word is not a real name, but it is
|
|
// typeable, and it must not come out empty.
|
|
assert.equal(Render.dropAWord(["Mike", "from", "of", "the"], 4), 1);
|
|
assert.equal(Render.dropAWord(["from", "the"], 2), 1);
|
|
assert.equal(Render.dropAWord(["Mike"], 1), 1, "one word has nothing to drop");
|
|
});
|
|
|
|
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", () => {
|
|
const el = label("Mike from work", () => true);
|
|
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", () => {
|
|
// A label clamped to two lines was already hiding some of it before any of this.
|
|
const shortened = label("Mike from work", text => text === "Mike");
|
|
const untouched = label("Bob", () => true);
|
|
seatsNamed("Mike from work", "Bob");
|
|
Render.fitSeatNames(layer([shortened, untouched]));
|
|
assert.equal(shortened.title, "Mike from work");
|
|
assert.equal(untouched.title, "Bob");
|
|
});
|
|
|
|
test("every seat is written to before any of them is measured", () => {
|
|
// Three passes over all the seats, not a loop per seat: each pass writes to
|
|
// every puck and then reads back from every puck, so the browser lays the felt
|
|
// out three times whatever the table's size. Interleaved, nine seats would cost
|
|
// nine layouts, and this runs on every render.
|
|
const reads = [];
|
|
const watched = (text, fits) => {
|
|
const el = label(text, fits);
|
|
Object.defineProperty(el, "scrollWidth", {
|
|
get() { reads.push(this.textContent); return fits(this.textContent) ? 10 : 100; },
|
|
});
|
|
return el;
|
|
};
|
|
const a = watched("Christopher John Robinson", t => t === "Christopher");
|
|
const b = watched("Katarzyna Nowak Kowalska", t => t === "Katarzyna");
|
|
seatsNamed("Christopher John Robinson", "Katarzyna Nowak Kowalska");
|
|
Render.fitSeatNames(layer([a, b]));
|
|
|
|
// Both names are read at each length before either is written down again.
|
|
assert.deepEqual(reads.slice(0, 2),
|
|
["Christopher John Robinson", "Katarzyna Nowak Kowalska"]);
|
|
assert.deepEqual(reads.slice(2, 4), ["Christopher John", "Katarzyna Nowak"]);
|
|
assert.equal(a.textContent, "Christopher");
|
|
assert.equal(b.textContent, "Katarzyna");
|
|
});
|
|
|
|
test("an empty chair has no name to shorten", () => {
|
|
const el = label("", () => false);
|
|
seatsNamed("");
|
|
assert.doesNotThrow(() => Render.fitSeatNames(layer([el])));
|
|
});
|
|
|
|
test("and with no layer there is nothing to do", () => {
|
|
assert.doesNotThrow(() => Render.fitSeatNames(null));
|
|
});
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
describe("pulling the ring back onto the table", () => {
|
|
// seatRingRadii works out the widest ring whose outermost puck still finishes inside
|
|
// the rail, and it is right about that — but it is right about a puck it measured
|
|
// before the ring moved, before the width search settled, and before a name was
|
|
// shortened or wrapped to a second line. Each of those changes a puck's height by up
|
|
// to 15px after the arithmetic is done.
|
|
//
|
|
// Measured on the running page, four of the thirteen viewports finished with the top
|
|
// seat 5-6px past the rail. Not a wrong formula: a stale input to a right one. So
|
|
// the ring is settled the way the audit judges it, by looking at where the pucks
|
|
// actually landed.
|
|
//
|
|
// The felt is 400x400 at (100, 100) throughout. Seats are placed by writing a
|
|
// percentage into style.left/top, which this reads back to work out where the puck
|
|
// would be — the same relationship the browser has, without a browser.
|
|
const felt = { left: 100, top: 100, right: 500, bottom: 500, width: 400, height: 400 };
|
|
|
|
const seat = (puckW, puckH, box) => ({
|
|
style: { left: "", top: "" },
|
|
classList: { toggle() {} },
|
|
getBoundingClientRect() {
|
|
// Whatever percentage was last written, resolved against the ring box.
|
|
const cx = box.left + (parseFloat(this.style.left) / 100) * box.width;
|
|
const cy = box.top + (parseFloat(this.style.top) / 100) * box.height;
|
|
return {
|
|
left: cx - puckW / 2, right: cx + puckW / 2,
|
|
top: cy - puckH / 2, bottom: cy + puckH / 2,
|
|
width: puckW, height: puckH,
|
|
};
|
|
},
|
|
});
|
|
|
|
// The ring box the percentages resolve against, deliberately the same as the felt so
|
|
// the arithmetic in the test stays readable.
|
|
const ringBox = { ...felt };
|
|
|
|
const setUp = (count, puckW, puckH) => {
|
|
const seats = Array.from({ length: count }, () => seat(puckW, puckH, ringBox));
|
|
Render.state = { seats: seats.map(() => ({ name: "" })), seatCount: count };
|
|
global.document = { getElementById: id => (id === "pokerTable"
|
|
? { getBoundingClientRect: () => felt }
|
|
: { getBoundingClientRect: () => ringBox }) };
|
|
// ringBox() reads #seatsLayer; the fake above hands the same box back for it.
|
|
return { children: seats, childElementCount: seats.length };
|
|
};
|
|
|
|
const place = (layer, radii) => {
|
|
for (let i = 0; i < layer.childElementCount; i++) {
|
|
Render.placeSeat(layer.children[i], i, 1, radii);
|
|
}
|
|
};
|
|
|
|
const worstOverhang = layer => {
|
|
let over = 0;
|
|
for (let i = 0; i < layer.childElementCount; i++) {
|
|
const b = layer.children[i].getBoundingClientRect();
|
|
over = Math.max(over, felt.left - b.left, b.right - felt.right,
|
|
felt.top - b.top, b.bottom - felt.bottom);
|
|
}
|
|
return over;
|
|
};
|
|
|
|
test.afterEach(() => { Render.state = null; delete global.document; });
|
|
|
|
test("a ring already inside the rail is left exactly where it is", () => {
|
|
const layer = setUp(6, 60, 50);
|
|
const radii = { rx: 30, ry: 30 };
|
|
place(layer, radii);
|
|
assert.deepEqual(Render.settleSeatsOnTable(layer, 1, radii), radii);
|
|
});
|
|
|
|
test("a puck past the rail brings the whole ring in", () => {
|
|
// 44% of 400 puts a seat's centre 176px from the middle; half a 60px puck is
|
|
// another 30, against a felt whose half-height is 200. Six pixels over, at the
|
|
// top and the bottom and both sides — which is the size the running page was
|
|
// actually wrong by.
|
|
const layer = setUp(4, 60, 60);
|
|
const radii = { rx: 44, ry: 44 };
|
|
place(layer, radii);
|
|
assert.equal(Math.round(worstOverhang(layer)), 6, "the fault is there to fix");
|
|
|
|
const settled = Render.settleSeatsOnTable(layer, 1, radii);
|
|
assert.ok(settled.ry < radii.ry, "the ring came in");
|
|
assert.ok(worstOverhang(layer) <= Render.SEAT_SETTLE_SLACK_PX,
|
|
`still ${worstOverhang(layer).toFixed(1)}px over`);
|
|
});
|
|
|
|
test("it comes in by what it was over, not by a step it guessed", () => {
|
|
const layer = setUp(4, 60, 60);
|
|
const radii = { rx: 44, ry: 44 };
|
|
place(layer, radii);
|
|
const over = worstOverhang(layer);
|
|
const settled = Render.settleSeatsOnTable(layer, 1, radii);
|
|
// Six pixels of a 400px felt is 1.5% of the ring, so 44 becomes 42.5 — the
|
|
// measurement, not a step size that would have to be tuned per screen.
|
|
assert.equal(settled.ry.toFixed(2), (44 - (over / felt.height) * 100).toFixed(2));
|
|
assert.equal(settled.ry, 42.5);
|
|
});
|
|
|
|
test("and it stops at the floor rather than collapsing into the pot", () => {
|
|
// A puck taller than the felt has an overhang no ring can fix. Pulling in
|
|
// forever would put every seat on top of the pot badge, which is a worse table
|
|
// than one with a puck touching the rail.
|
|
const layer = setUp(4, 60, 600);
|
|
const radii = { rx: 40, ry: 40 };
|
|
place(layer, radii);
|
|
const settled = Render.settleSeatsOnTable(layer, 1, radii);
|
|
assert.equal(settled.ry, Render.RING_MIN_R);
|
|
assert.ok(settled.ry > 0);
|
|
});
|
|
|
|
test("a table with nothing laid out yet is handed back untouched", () => {
|
|
Render.state = { seats: [], seatCount: 0 };
|
|
global.document = { getElementById: () => null };
|
|
const radii = { rx: 44, ry: 42 };
|
|
assert.deepEqual(Render.settleSeatsOnTable({ children: [], childElementCount: 0 }, 1, radii), radii);
|
|
});
|
|
|
|
test("it is bounded — this runs after every tap a dealer makes", () => {
|
|
assert.ok(Render.SEAT_SETTLE_PASSES <= 2,
|
|
"each pass is a forced layout of the whole felt");
|
|
assert.ok(Render.SEAT_NAME_PASSES <= 3);
|
|
});
|
|
});
|