feat: home card actions - #41

The old preview was three panels of hand-cut CSS continents that read as
coloured blobs rather than anywhere on earth. This is the actual map: four
zoom-1 tiles from the same provider the game itself uses, which is the whole
world in four images.

Four images rather than the map component, because the component brings
panning, zooming and a portal with it, and a card preview needs none of that
in the home page bundle.

Zoom 1 is a square and the interesting part is not. Land sits between about
60 north and 55 south, so the square is cropped to the middle 70% and the
empty poles are dropped, which also gives the card a strip rather than
another square. Pin positions are worked out from lat and lng once, in the
page, since the crop never moves.

Not lazily loaded: the tiles sit in an absolutely positioned crop and the
browser was happy to defer them forever, and four 256px images are not worth
deferring anyway. Took about 110 lines of blob CSS out with it.

Both were saying less than they cost. Imposter squeezed a header bar, three
avatars and three ticks into a strip, which never got round to saying what
the game is. It is taller now and tells a round in order: the word everyone
but one of you saw, big, because that is the whole premise, then what each
player said about it, then who that got voted out in red.

Password showed its word as separate letter tiles with an arrow from a clue
to a guess, which reads as a spelling game. It is one player saying a word
and their team mate naming it, so the preview names the two jobs: Ada says,
Bram guesses. The word is one word again rather than five tiles.

Both drop their looping animations. They were drawing the eye on a page of
five cards that all wanted attention, and neither needed motion to be read.
Took the mini board, the letter tiles and four keyframes out with them, about
370 lines.

The create block was a button sat on the card. It runs out to the card's own
edges now and sits flush at the bottom, so it reads as the bottom of the card
rather than something placed on it, and it lands on the same line on every
card: they are a fixed height and the demo above takes up the slack.

Getting there needed the body's padding and its row gap cancelled, not just
the padding, or it hangs a few pixels short. Both are named on the body now
so the bleed cancels the real values instead of repeating the numbers.

It is not bright any more. A panel filled with the accent was the loudest
thing on a page of six cards; the colour is in the text with an eight percent
wash behind it, and the strip below went neutral for the same reason.

The demos lost the panel I put round them. They are the card's picture, not a
box inside a box, so no border and no fill. They also all get the same room
now: the demo fills the card's one flexible row, so every one of them is 293
pixels whatever it draws.

The map went back to a strip to match the rest, with its crop and its pins
worked out against the new frame.

Terrain turned out to be a near white relief base, so with the dark invert
still on it the only thing left to see was the labels I had switched layers
to get rid of. Plain satellite is the one layer that is all map and no text.

The colour that made satellite too much last time comes out in the filter
instead: most of the saturation, a little brightness, a touch of contrast.
No invert now, since the imagery is already dark and inverting it turns the
oceans white.

…tates

Games are mostly their own thing, so this is deliberately short: the three
pieces all of them need and none of them should be drawing themselves.

A button with four variants, three sizes, an optional icon either side, and a
loading state that keeps its label so a row does not jump while you wait.
None of the variants is filled solid with the accent. A page of loud buttons
has no loud button, which is what the shell header and the home cards both
ended up saying.

A panel, which is the shape the shell header bottom and the solo end screen
were each drawing by hand: optional header, optional footer behind a
hairline, and a flush mode for panels that hold their own rows.

An empty state, because a lobby, a vote list and a results table all need one
and all three of them should say the same kind of thing: name the space, say
what fills it, offer the thing that would.

Everything reads one --game-accent, so a game sets its colour once and the
buttons, panels and empty states below it agree. All of it on the dev page at
/dev/game-shell.

…games

Who is in the game, under the shell header, in the lobby and during it.

The point is room. A roster squeezed into a sidebar turns the player card
into a line of text with a face on it, when the card is carrying state,
points and badges worth seeing. This lays out across the full width and wraps
instead, so a lobby of six is two rows of cards at their own size rather than
six narrow ones. Lobbies get md cards; a longer mid game list drops to sm.

auto-fill and not auto-fit, so a lobby of two shows two cards the size they
were drawn rather than two cards stretched across the whole row.

Password and Chain Reaction get their own, because for them the unit is a
team and a player on no team is the exception. Teams lay out as team cards,
optionally foldable for a lobby with more teams than room, and anyone who has
not picked a side sits on a bench underneath behind a hairline, since in a
team game having no team is a state worth noticing rather than just more of
the list.

Both count their players in the heading unless the caller wants that corner
for something else.

The panel was chrome the list does not need. A list of players is a heading
and then the players, so it is a line of small caps with a count and then the
cards, and the border round it is gone.

Condensed is the default now. The small player card already says name, face,
state and badges in one row, which is the whole job of a roster, and it takes
a card from 283 by 84 down to 173 by 67. The old full size view is one button
on the heading away for anyone who wants to look at everybody properly, and
teams condense to the faces row the team card already had.

Nothing in here knows about scores any more. What a point means is different
in every game, so the roster does not assume there are any and the examples
do not show any; games pass whatever their cards should carry.

…ates

The roster was stretching cards into grid columns of its own when .pc-grid
was already doing this everywhere else: cards at their own width, wrapping.
That is what the condensed list was supposed to look like all along.

Lobbies are md now, with the host given an X on everyone. Mid game is sm and
keeps the folded badges. Both use the same grid.

The bar of badge colours under each name is gone. It was a second stripe
saying what the card's own edge already says. What someone is shows in the
border, what they are doing shows in the mark over their face, and an accent
now outranks a state on that border, because whose team you are on does not
stop being true because you are mid answer.

Folded badges are not rendered rather than collapsed to nothing. A 0fr grid
row keeps an automatic minimum of its content and a zero max-height would not
shut either, and a card this small does not need a closing animation badly
enough to keep fighting a box that will not close. Opening still animates.

Teams each fold on their own chevron, which is what the team card grew one
for, instead of one switch opening and shutting all of them at once.

Chain Reaction gets a versus: two lg cards facing each other, which is the
size that was drawn for exactly this.