Demo
These pages render the pieces a multiplayer game needs - the cards as a board draws them, plus the furniture no game here has needed yet: a cribbage board, chips, seats, presence. Nothing on them opens a socket or holds a game, so they can be loaded, screenshotted and cut up for assets without a room to play in.
Each one is a table laid for a game that has not been built yet.
Every face comes from public/cards.svg, addressed by fragment - a card is a div with data-name and data-suit on it and no contents at all. The demos use the same element the board does, so a face that is wrong here is wrong in a game.
The names are the ones the engine sends - words, not numbers - because they address the sprite directly.
All four are set by the server and read by the stylesheet. A card never decides any of this for itself.
A pile draws its cards in the same place, one on top of the last, and a fan is what spreads them out again. The step is a share of a card's own width, so it holds at any size. A pile only has to show its top card; a hand is held to be read, and shows a corner of each. Either way a fan that would run past its slot closes up until it fits - which is how a waste pile of twenty stays the width of one of three.
Taken from globals.scss. The felt is the page background on every route.
#006300table background, dark stripe#006600table background, light stripe#00cc00an empty pile cards may go to#a3e635your seat, whose turn it is, primary actions#606dbcface-down stripe#465298face-down stripe#1f2937game bar, seats, panels#ef4444give up, refusals, bustOne card is 72 by 110, which is the sprite's own size. Everything else is a multiple of it.
72 x 11072 / 110calc(110px * var(--scale-size) * 1.5)calc(110px * var(--scale-size) * 0.7)1.5calc(.25em * var(--scale-size))18% of card width55% of card width25% of card height5% of card height1 card width, 4 in a hand0.75rem