Demo
Seats, turns, presence and table talk - the things every game with more than one player at the table has to say, said the same way in all of them. The state below is fixed; there is no room behind this page.
Four-handed, arranged by compass point rather than in a list, so the table on screen matches the one in a player's head. Your own seat is always the near one.
Five states, one component. A game picks the state; it does not pick the colour, the border or the wording.
Two marks that have to survive being next to each other: the 'you' tag names the seat you play from, the D button names the one that deals. A player can be both.
A game played against other people cannot deal itself - it has no way of knowing everyone has arrived - so the deal is a button, and it says what it is waiting for rather than sitting there greyed out with no reason given.
Anything the server says in words is a toast, bottom-right, raised once for every page on the socket. Components do not grow their own notice banners - these are the four tones there are.
A toast has gone by the time a player looks up. The log is the same messages kept where somebody who was away from the screen can catch up, which matters more the more people are at the table.
The dot in the game bar. A player whose socket has gone should find that out from the interface rather than from moves quietly doing nothing.
Presence is the one thing on a table that must never be ambiguous, so each state has its own.
#a3e635active seat border, your tag#facc15reconnecting, held seat#6b7280connected, idle#fde047watching pill#111827seat and panel background#374151initial circle12rem (9.5rem small)2.5rem (2rem small)1.15rem0.5rem0 0 .6em rgba(163, 230, 53, .45)14rembottom-right, 4s