Families and personality

Between the site and a game sits its family: games of one kind that share a look and a way of playing. All the card games deal from the same card room, and every puzzle is printed in the same puzzle book. A family makes a new game feel familiar before its first move. What’s left after the site and the family is the game’s personality, and each game writes it down in one sheet of a fixed shape (below).

The shelf and this guide are printed on the paper too (The paper).

Card games#

The card games share the card room (ADR 0009, ADR 0015): its faces, its table styles, the hand, card motion, the seating, the dock and the bots. They’re desktop-first: designed and checked at computer sizes first, while phones and tablets stay playable (ADR 0016). Solitaire, played alone and mostly on phones, is the exception: it’s phone-first. Bullshit, a party game, is checked on phones as closely as on a computer.

Table styles. A player picks one in Options, and it’s kept in their browser and applied before the first paint. Each style is a block of tokens for the room, the felt and its rail, ink, card face and back, suit colors, buttons and selection:

export const THEMES = [
  { id: 'clubhouse', name: 'Clubhouse', note: 'Deep felt, crisp cards', felt: '#1d4a3c', card: '#ffffff', back: '#e63b2e', ink: '#d7263d' },
  { id: 'gamebox', name: 'Game box', note: 'Bold and flat', felt: '#15130f', card: '#f4efe4', back: '#2b59c3', ink: '#e63b2e' },
  { id: 'retro', name: 'Retro PC', note: 'Like solitaire on an old PC', felt: '#008000', card: '#ffffff', back: '#0000a8', ink: '#ff0000' },
  { id: 'casino', name: 'Casino', note: 'Red felt and gold', felt: '#7a1020', card: '#fffaf0', back: '#111111', ink: '#c8102e' },
  { id: 'fourcolor', name: 'Four-color', note: 'High contrast, a color per suit', felt: '#0b0b0b', card: '#ffffff', back: '#1450d8', ink: '#0a7d2c' },
  { id: 'arcade', name: 'Arcade', note: 'Neon on black', felt: '#0a0a16', card: '#14142b', back: '#ff2e88', ink: '#00e5ff' },
];

Every style makes each indicator stand out on its felt (the turn ring, a picked card’s mark, Your move’s ring, the cards themselves) at 3:1, and its words at 4.5:1; npm run check:room measures each one. A panel’s edge is never dashed, because dashed only ever means “not yet”.

Cards are drawn in CSS from their short names (QH0, JK1): a corner index and a large pip, no artwork, so they read at phone size.

The hand (games/static/games/cards/kit/hand.js), in every game where you hold cards:

• Cards overlap in one fan along the bottom, each step at most two thirds of a card so the corner always shows, closer as the hand grows. It scrolls, with a fade, once a step would go under 20px.
• They’re ordered by suit, then rank, low to high from the left, the suits alternating colors with no gaps. A game may name a suit to lead (Euchre: trump first, the left bower with it).
• The sort switch is Suit, Rank or My order (a game drops what’s meaningless), O cycles it, and dragging any card switches to My order and says so.
• With the helper on, cards you can’t play dim; nothing else changes size or place. On your turn the hand wears the turn color’s inset ring. New cards wear “New” until you act.

Card motion uses the house’s motions: the deal flies cards from the dealer face down and flips yours into your hand, skippably, never replayed for a reconnect. A card played flies to where it goes, and yours glides. A finished trick’s winning card is ringed, then the trick gathers and slides to the winner. Stacking comes from the layout, never from the order things happened: a later row over an earlier one, right over left in a fan.

The table: you at the bottom, play going clockwise (the player on your left is next), your partner across, the dealer wearing a chip. The turn ring is only ever whose turn it is, and seats are never read like a book. Each game draws the same circle its own way, from the room kit’s seating (games/static/games/room/kit/seats.js, ADR 0053): a table ring (Contract Rummy), a clockwise grid (Michigan Rummy), a cross (Euchre), across (Sixty-Six), a strip from your left to your right (Bullshit). On a phone, seat chips run from the player on your left round to you.

Bots have one setting in every card game: “Bot speed: Brisk · Relaxed”. A bot’s move is always shown as a flight, and a trick never resolves faster than its sweep.

A card game’s own: its table’s layout (Rummy’s tiles, Euchre’s cross, Solitaire’s four layouts), its assists, its celebration and its banners’ words.

Board and party games#

Every multiplayer game is drawn with the room kit (ADR 0015): the lobby, the waiting room, seat identity, the roster and ring, reveals, the countdown, the screen kept awake, house rules, the share card, the seat bar and talk (Front-end kits has each). A game brings its own look and board.

The foyer. The room’s own screens, before and between games (the menu, a table’s door, the waiting room), are its foyer. A game whose board has a look of its own may seat its foyer on the card room’s felt, so every table game’s menu looks alike (ADR 0036).

Seat identity (games/static/games/room/kit/identity.js). Each seat has a color, a shape of its own and its player’s initial, the same in every game. The shape is fixed by the seat, so seats are told apart in gray and by players who can’t tell the colors apart (Never only color or motion). No seat is the turn color. The shapes, seat 0 first, are circle, square, triangle, star, hexagon, plus, drop, shield, burst, dome, lens and tag (SHAPES in that file).

The token contract. Beside the house’s tokens, every room game declares its surfaces, its ink and color jobs, its buttons, its faces and the ink that sits on bright things; npm run check:tokens names any that’s missing (Color jobs). The room’s own stylesheet writes no color of its own.

Party games are checked on phones to the same standard as on a computer (ADR 0016): they’re played in one room or on a call, phone in hand.

A board or party game’s own: its board, its reveal’s choreography, its banners’ words and its deck.

Puzzles: the puzzle book#

Puzzles on the pencil-puzzle kit (ADR 0023) share one look, a puzzle book: graphite printed on warm paper, a page lying on a slightly darker desk, and a ribbon of the puzzle’s accent along the top of every page.

• Faces: Gloock for titles and the big numbers, Figtree for everything you read or press. Figtree’s figures are tabular, so a clock never wobbles. Gloock has no ×, so a size is never set in it.
• Colors with jobs: each puzzle’s accent is the one fill, the ribbon, the kicker and the stamp. Signal blue (--pick) is yours: the cursor, whatever you’ve picked (a cell, several cells, a dot, a drag’s line), your row on a board. Green is solved. Red is a mistake the helpers show, always with a shape too (hatching, a dashed ring).
• Buttons are 8px-radius rectangles in graphite: outlined; the filled accent, on a lip that presses down; and quiet words.
• Home: today’s puzzle is a card like a page torn from the book, lying on its side on a wide screen, with the board as it stands. Endless follows it in the house’s setting pattern.
• The puzzle on its desk: the bar, then the page it’s printed on (a folio line with the day and size, a hairline border, the board), then the dock: a status line with room for two lines, and Undo · Redo · Restart. Nothing moves: Pause, Resume and Share result share one slot, and zoom has a strip of its own under the desk.
• Solved: the puzzle’s own shine plays, a “Solved 1:09” stamp in the accent presses onto the folio, and the result sheet opens.
• Drawn, not typed: a ★ in a label is an inline drawing in the ink round it, never the text glyph.

Every puzzle shares the day’s daily (ADR 0034), the archive of past dailies (ADR 0037), Endless, streaks and the best-time line. A pencil puzzle can’t be lost, only left, so it has no Give up.

A puzzle’s own: its board and how it’s drawn, its accent, its shine when solved, and its board’s own keys and pads.

Brainteasers: the toy box#

Brainteasers (ADR 0042) are puzzles played with pieces, the way they came in a box. They play on the pencil-puzzle kit, so they behave like every other puzzle, but they’re molded in plastic, not printed: their page is the toy box.

• Tokens: the paper’s names with the toy box’s values (games/static/games/brainteasers/toybox.css): a cool white insert, a navy ink, molded shadows, no grain, always light.
• Face: Rubik, rounded and sturdy, bold for titles.
• Shapes: a 12px button radius with a lip under every outlined button too, 20px sheets, and a 6px ribbon like the band round a toy box’s lid. The puzzle sits in a white tray, and solving it puts a sticker in the accent on the tray (“Solved · 14 moves”) where the book has a stamp.
• The count: a brainteaser is scored on moves first, then time, so the bar shows the count beside the clock and its boards rank by it.
• Pieces are toys: molded, with a highlight and a lip, in bright colors on a darker plastic board, each with a shape or form as well as its color.

A brainteaser can be given up: it ends unsolved and shows its answer.

The Register is a brainteaser in a look of its own: a walnut desk, a cream book, brass and oxblood, with the names in the register set in a monospace face so their letters can be counted. It keeps its long-form investigation and no visible clock, and takes everything else from the house. Its home’s masthead is the one title off the type scale.

The shelf and the site’s own pages#

The hub is a shelf of game boxes printed on the paper (ADR 0036): each game a card with its own art on its tile color, the board-game primaries the only loud colors on the page. It stays quiet so the art does the talking (AGENTS.md rule 1).

• The shelf’s only words are the epigraph (Bernard Suits’s definition of a game, which gives the site its name, with its attribution), one account line under the shelf, and names: section headings, chips and boxes. No descriptions.
• A box is a card on the paper: its art on top (16:10, on the game’s tile color), then its title and a one-line tagline, and a small line of furniture (“1 player · Daily”). It lifts on hover and focus, and the whole box is the link. Each game gets one primary as its tile color, never repeated in a row if it can be helped.
• Box art is drawn to one guide, docs/box-art.md: one moment of play in the game’s own pieces, its tile color as the ground, one light and two shadows, cut so the point of the picture sits in the middle.
• Sections and filters (ADR 0020): from 8 listed games, a heading per family; from 12, a row of filter chips, which are choices (a pick is a tint, a ring and bold, never the fill) and plain links, so the address is the state.
• The site’s own pages (the Dailies page, your account, sign-in, the error pages) wear the paper: a kicker, a Gloock title and a lead; forms on a card; the three button weights in graphite, since the hub has no accent of its own and each game brings its own.
• The app opens on the shelf, and its colors are the paper’s.

The shelf’s tokens are in static/css/site.css, on the paper’s names.

The personality layer#

A game owns what makes it itself, and nothing a player relies on to know what to do (The game’s own look).

The personality sheet#

Every game’s chapter has a section, Its look, that writes the game’s personality down in the same rows, so games can be read side by side. A row a game hasn’t got says so.