Components and patterns

These are the pieces every game is made of: the bar across the top, buttons, sheets, Options, the signals that tell you what happened, and the sheet a game ends on. Each is built once, in the house kit (games/static/games/house/), and every game calls it, so each behaves the same everywhere (Same place, same word). The look comes from the game’s tokens. How to call each piece is in Front-end kits; this chapter is what each one does and why.

The top bar#

Every screen of every game starts with the same bar: 44px tall, from gutter to gutter, its title in the Bar role.

• The way up is its first thing, at the left: one arrow, 44px square, in the page’s ink, with no words. Its name and tooltip say where it goes (The way up).
• A play screen: the arrow, then what you’re playing (“Klondike · Draw 1”, “Today · 10×10”, “Hand 3 of 7 · 2 sets”) and a tag (Daily). At the right, in this order: the clock and Pause (a timed solo game), the game’s own tools (Log, Scores), How to play, Options, then End game or Leave game (a table). Every tool is quiet. At a table with other people, the last is talk: a smiley for emotes and, when the host turns Chat on, a speech bubble with a count of new lines (ADR 0052).
• A home: the arrow (to the shelf, “More games”) and the page’s title under the bar. At the right: How to play, Leaderboard, and your name (to your account) or Sign in. A table game’s lobby puts the account line under its lead, beside the name field.
• On a phone the bar stays one row. How to play is ?, Options a gear under 400px, Pause an icon, and more than three tools fold into ⋯, a sheet with the same words. A table’s Log is that sheet’s first item (ADR 0046).
• The footer of every home and served page: “Copyright © 2026 David Mays” at the right, then ” · Feedback” for a signed-in player (ADR 0038).

Where the arrow goes#

Leaving belongs to the page. A solo game’s arrow goes straight home and keeps your place. A table’s arrow goes to the game’s front door and the seat stays (a bot takes it). Anything that must confirm before leaving keeps its confirm. A page without JavaScript keeps a plain link to the shelf.

Buttons#

Three weights, one fill (Three weights, One fill).

• A row of buttons (a sheet’s foot, an end screen) has the primary at the right, secondaries to its left and quiet ones at the far left. On a phone they stack, primary on top. Focus starts on the primary, or on the safe button when the primary is a danger.
• A dock of moves (the card games): left takes or commits, right is the safe or turn-ending move, and Pass is always last. When the moves are a choice among equals, they’re all secondary and the safe move wears the fill; when there’s no safe move, nothing does.
• Key caps sit inside the button they press. They show only with Shortcut keys on and a mouse, take no space on a touch screen, and hide with their button without changing its size. A disabled button keeps its cap, dimmed with it. A cap’s letter is trimmed to its capitals so it sits in the middle (Centered by ink).
• Undo (Z) and Redo (Y, or Shift+Z) sit together in the dock wherever a game can take moves back, on every screen size. Where undo costs something (Solitaire), the tooltip and How to play say so. Restart is undoable where undo is free, and asks in place where it isn’t. Hint (H) is a secondary that marks but never moves; Finish (F) takes its place when only the finish is left.

Sheets#

The site’s one dialog: a panel over a scrim, titled in the display face.

• Every sheet you can dismiss has ✕ (“Close”) at the top right. Escape closes only the top sheet. A click on the scrim closes it, but not in its first 400ms, and its buttons ignore clicks for their first 400ms too (Nothing moves under you).
• The page behind goes inert. Focus goes in (to the primary, or the safe button beside a danger) and back to whatever opened it.
• A sheet that opens by itself (a hand’s scores, a result) waits for any sheet the player opened to close. It never stacks over one.
• A solo game’s open sheet stops the clock and hides the board. A table’s clock is the server’s, and a sheet shows it in a pill in the turn color (Fair clocks).
• A sheet you opened yourself (Options, How to play, Scores) closes with Done.

Confirm in place. A sheet is never a confirmation, except for leaving a live table or deleting something permanent. Anything else that can’t be undone asks in place: the same button turns the warning color and asks (“Restart?”, “Give up this deal?”), the status line says why, and a second press does it. The question goes away after 6 seconds, when focus leaves, or when anything changes (Undo or ask).

Options#

One sheet, “Options”, closed with Done, its sections always in this order:

1. Helpers: the game’s assists, each On or Off and on by default, under “On to begin with. Turn off any you’d rather do yourself.” (Helpers on).
2. Playing: the game’s preferences (tap order, sort).
3. Keys and sound: Shortcut keys, Chime on my turn (tables, off by default), Show the clock (solo: “it still keeps your time”), Keep the screen on (party games).
4. Look: Table style (card games).
5. Home Screen: on a phone or tablet in a browser, the house kit’s own row (below).
6. Feedback: for a signed-in player, the house kit’s own row.

Every row is the one setting pattern (One setting pattern). Options holds preferences only: actions (Restart, New deal) live in the dock or the result sheet. Settings are kept in the browser under uo:<slug>:…. A key that already exists keeps its name, since renaming one loses people’s settings.

How to play#

One sheet, always called How to play, key ?. Its sections: the goal, the rules, Moving (for the device in hand), Helpers, Keys (only with a mouse), and Timing or Scoring. On a wide screen it opens into two columns with a small real example. It opens by itself once per game, per browser or per signed-in player (ADR 0039), on the home or lobby before the first game, and never over a running clock.

Signals: from the status line to a celebration#

Each kind of news has one way to be said. Pick the quietest that does the job (The quietest signal).

A toast may carry one quiet action (Undo, Leaderboard); only that button takes clicks. A banner and a celebration are aria-hidden, because the log or the sheet says the same in words.

When to use which. A toast is news nobody needs to stop for. A banner is a moment for whoever’s watching the table. An announcement draws everyone’s eye at once, so it’s never for something routine: if it would fire most turns, it’s a banner or the status line. A celebration is for a victory only, never for news.

Done to you#

When someone else’s move changes what’s yours, you’re told, whatever you were doing (Done to you). A spectator isn’t.

• An announcement when it costs you or changes your plan: a painting bought from you, your chip taken off the board, the opponent’s winning guess.
• A toast when it touches you but costs you nothing: someone played on your meld, a route through one of your tickets, the table’s ruling on your answer in a party game. One toast a player a turn: the rummies hold what’s played on your melds until that player’s turn is over, then say it in one sentence (“Ben played the 7♥ and 8♥ on your run.”).
• The words: the name first, then the verb, then yours, then what it cost: “Basil bought Water Lilies from you for $400K.” Never “a player” or “someone”.
• And where: the thing of yours lights up where it was.
• In a party game, a phase that moves on without you (time’s up, the slip handed to you) is a banner on every phone, and a buzz on the one it’s handed to.

Your move#

The splash says a new hand began; a prompt says something is yours to do (Your move). It’s a card over the board: a kicker, “Your move”, and a title of three to five words with the verb first (“Place your piece”, “Ask a question”), with at most one short line under it. Instead of fading, it shrinks into the place where you act, which then beckons: a ring in the turn color that breathes three times and holds until you act.

• When: the first time each kind of action falls to you in a game, never every turn. A reload doesn’t replay it.
• A routine turn gets no card, only the beckon, after a few idle seconds (3000ms), so a player who knows what to do never sees it.
• What beckons is only what moves the game on: the spaces you may move to, the button that rolls. Several at once is fine.
• Never the only cue: the status line says the same, and under reduced motion the ring is still.
• One switch for prompts and beckons alike, site-wide: “Show what to do”, a helper, on by default.

Pick the moment with care: a prompt for the moment a new player would stare at the board, a beckon for the thing they’d hunt for, and nothing for what’s already obvious.

Pacing others’ moves#

Every table game, every move, bots’ included (See others’ moves), through the room’s cue queue (games/static/games/room/kit/motion.js):

• One beat each. A server action that does several things (a meld of three; a question asked, answered and its cards put down) plays as that many beats, never one redraw.
• Held to be read. A move’s result holds at least 1200ms before the next one moves, and a deciding moment (a sale, a trick won, a ruling) holds 2000ms.
• The last move before yours always plays. When your turn comes with more than 1500ms still to show, the older moves jump to their end and the last one still plays. A game may lengthen that threshold but never skips it.
• Nothing lands before it arrives. Counts, rows and collections change at the end of the move’s motion, never on the update that started it.
• A bot is never faster than its motion, and until you act, the status line leads with the move that matters most since your last turn.
• Reduced motion: nothing travels, every change lands at once, and nothing depends on motion.

Clocks and Pause#

• A clock is m:ss in tabular figures in a fixed width, so nothing moves when it ticks.
• Solo: it runs only while the board is in view. Pause (P) covers the board with “Paused” and a filled Resume. Any sheet, or a hidden tab, stops it. “Show the clock” in Options hides it but keeps time. Once solved, Copy result takes Pause’s place, at the same width.
• Tables: a turn’s deadline is the room’s countdown, a bar emptying beside the seconds, turning the bad color at 10 seconds.
• The Register keeps a quiet time on the case and no visible clock: it’s an investigation, not a race.

The result sheet#

Every game ends on it, the same layout everywhere (Never stranded). It rises over the lower part of the board, so its celebration stays in view, and See the board (or See the table) puts it away, leaving its buttons in the dock.

1. Kicker: the game and which one (“Daily · Mon, Oct 12 · 10×10”).
2. Heading, in the game’s voice: “Solved”, “Case closed”, “Euchred!”, “Out of moves”.
3. The game’s emblem or picture.
4. Facts: time, moves, score.
5. Comparison: your best, your streak, your win rate, with a tag over the facts for a game’s own milestone (“New best”, “First solve”).
6. The post line: “#3 of 20 today.”, “Sign in to post your time”, then what a rated result did to your rating.
7. Actions, right to left: primary, secondaries, quiet.

• Stuck is found, not discovered: when no move helps, the status line says so and the Out of moves sheet opens once.
• Give up is a quiet button in the dock of every solo game that can be lost, and every brainteaser. It asks in place. A pencil puzzle can’t be lost, only left, so it has none.
• A solo game keeps a lifetime win rate in the browser (“Won 12 of 40 · 30%”), counted from a game’s first move.

Celebrations#

One for each kind of victory, each its own (ADR 0051), drawn in the game’s colors (Celebrate a victory):

It plays in the result sheet’s scrim, behind the sheet, springing from its top edge over the board. On a phone, where the sheet covers the board, the sheet waits below for the celebration’s first moments, then rises. It takes no clicks, any press puts it away, it stops in a hidden tab, and under reduced motion each kind is a still picture of its own.

News since you last looked#

Outside a game, the Dailies page and the Stats tabs remember what they showed you last, in this browser, and on your next look:

• What changed lights up once: a number that went up, a row solved since. A first look, or a look with nothing new, lights nothing.
• A milestone is said out loud, at most once a day. A streak reaching 7, 14, 30 days and so on is an announcement. A full sweep of today’s dailies is a card that stays until it’s put away, with Share (ADR 0050) and the sweep celebration behind it.
• What’s at stake is said plainly before it’s lost: “Any one of today’s keeps your 4-day streak going.” On the hub, and only there, a streak waiting for today’s first solve is one line on the Dailies card (ADR 0047).
• Your row on a leaderboard: the result sheet’s Leaderboard opens the board on your own row, lit once.
• Never on every visit, never over a sheet, never a layout shift, and never only motion or color: the page says it in words too.

Share, leaderboard, stats, account#

• Share result is the one label. On a phone with a share sheet it shares; elsewhere it copies (“Copied — paste it anywhere.”). The text is a few lines for a text thread (ADR 0050): the game’s emoji, its name and which one; a row of emoji that shows how it went and gives nothing away; a line of facts; then the link alone on the last line, which opens the same puzzle, deal or result.
• Leaderboard is a quiet tool on a home’s bar and a secondary on the result sheet. Its page has the arrow, the switches, and “Play today’s {noun}” at the right.
• Stats sits beside Leaderboard as a quiet tool. Its page is four numbers, a spread and the rating over time, in the game’s look. Its “?” opens “How your rating works”, worked out from the code that rates the game.
• Account is the home bar’s name or Sign in, the result sheet’s post line, and a lobby’s one quiet line. Never a panel, and never needed to play.

The Home Screen prompt#

A sheet, “Add it to your Home Screen”, offering the site as an app on a phone or tablet (ADR 0029). It’s a favor, not a gate: never on the hub, in the app or on a computer, and it asks at most twice. It asks once a game is finished and its result sheet put away, on a second visit or later, with nothing else open, and never after a loss. Its buttons are the action (Install, Copy link, or Got it), Not now, and a quiet Don’t ask again. It’s always findable in the last section of every game’s Options.

Loading, empty and error#

• Loading says what’s happening in the game’s voice (“Dealing…”, “Setting out the grid…”), appears only after 200ms, and holds the space of what’s coming.
• Empty is one quiet sentence and the way forward (“No cases yet. Open your first one above.”).
• An error says what happened and what to do, with Try again where retrying helps (Errors say what’s next). A page-level error is a short screen with the way back; a passing one is a toast. An unknown address is “A dead end” and a server error “That one’s on us”, both on the paper.

Keys and focus#

• A game’s own keys are printed on their buttons. With Shortcut keys off, every single-letter key is off, the board’s included; arrows, Enter, Space and Escape always work.
• A single key never fires while you type in a field, with a modifier held, on a key repeat, under a sheet or mid-drag (Keys and focus).
• The focus ring is 2px in the ink with a 2px gap, never removed. Yellow is never focus.
• Focus is never lost: a control that disappears hands focus to the hand or the board, and a sheet hands it back to its opener.

Sound#

One sound: the two-note turn chime at a table, off by default, played only while the tab is hidden. A phone may buzz briefly on a move and on a refused one. A timed party game’s clock (Bowl’s) may sound and buzz at 10 seconds left and when time’s up, with its own row in Options (ADR 0031). Any other sound waits for a new decision.