Menus

Every card THE EIGHTH KETYL puts between the player and the still: the title card, the how-to-play card, the pause card, and the two end cards — the still sealed, and the eighth quenched.

Every tree here is a pure function of state. Hand it the game's state and the focused item and it returns a widget tree. Nothing in it reads input, runs the game or holds state of its own; the Screens component owns all of that and this module only knows how a card should look.

Layout. Every number comes from the live screen through Kit: the content width is a fraction of the real frame and the type is a fraction of the shorter edge. There is no pixel constant. Two cards genuinely reflow rather than scale — the title card and the end cards put the drawn column beside the words on a wide frame and above them on a tall one, and the how-to card becomes two columns on a wide frame so its six controls and four steps fit a 16:9 television without being cut.

A flex column that centres its children makes them hug their content, so a paragraph inside one collapses to a glyph per line. Everything here therefore sits in a column of a KNOWN width and centres its text with textAlign.

What it provides

• Menus.title(opts) — the column, the game's name, and the two ways in.
• Menus.howto(opts) — what you are, what one plate asks of you, and every control on a keyboard, a pad and a touchscreen at once. It draws the pad legends the CONNECTED pad prints rather than assuming an Xbox one.
• Menus.pause(opts) — laid over the held game rather than replacing it.
• Menus.sealed(opts) / Menus.quenched(opts) — the win and the loss, each with the column drawn in its final state and the run's numbers.
• Menus.item(id, text, note, tone) — one focusable row: the focus target, the click target and the touch target at once, with a ring you can see.
• Menus.eyebrow, Menus.itemList, Menus.familiesFooter.

Who consumes it

The Screens component, and nothing else.