Pairs

Why the faces are drawn shapes rather than little pictures

Most pairs boards on the web use emoji for the card faces. This one cannot. The database behind this site stores text in an older three-byte encoding, and any character above the first 65,536 code points, which is where nearly all the emoji live, is cut off on the way in. The failure is the nasty variety: nothing raises an error, the record saves cleanly, and the page then serves a grid of blank squares to whoever opens it next.

So the eighteen faces the engine can draw are outlines instead, each one a single path. Circle, square, triangle, diamond, star, heart, ring, cross, hexagon, teardrop, bolt, crescent, pentagon, leaf, arrow, burst, chevron, hourglass. They are separated by silhouette first and colour second. Eighteen colours cannot all be told apart by a reader who does not distinguish red from green, so the outline has to carry the whole difference on its own.

Two of them are shaped the way they are entirely because of that rule. The hexagon is flat-topped, because a pointy-topped one and the pentagon are the same silhouette at the size a card occupies on a phone: a wide blob rising to a point. The burst has eight points rather than four, because a rhombus with slightly hollow sides is just the diamond again in a different colour, and colour is precisely the cue that is not allowed to be the only one.

The turn is a fade, not a flip

Card boards on the web usually turn a card with a three-dimensional rotation and a hidden reverse face. It looks right, and it fails in the worst available direction. On a browser that does not support the three-dimensional part, both sides of the card stack on top of one another, the one drawn last wins, and the entire board arrives face up. A pairs game online that deals itself face up is not a game at all, and there is nothing in the page to tell you it has happened.

Here the two sides are swapped by opacity and visibility, which every browser implements, and the turn itself is a fast horizontal squash of the card from narrow to wide, over about a fifth of a second. It reads as a flip without being one, it moves nothing else on the page, and a visitor whose system asks for reduced motion gets the card with no animation at all.

The layout is not sitting in the page source

A board written into the HTML when the page loads can be read before it is ever played: open the source, find the order, and there is no game left. Nothing is dealt into the document in advance here. Each card is an empty button until the first moment it is shown, and only then is its shape built and placed inside it. Reading the markup of an untouched board tells you how many cards there are and absolutely nothing about what is on them.

Keyboard, thumb, and 320 pixels

Every card is a real button, so the board is fully playable without a mouse. Arrow keys walk from card to card, Home jumps to the first and End to the last, and Enter or the space bar turns whichever card is focused. The focus ring is visible rather than suppressed, which matters here more than on most pages, because a board that loses your place after every single card is unplayable by keyboard even though every individual control works.

The grid is measured against the column width, the height of the screen and a sensible maximum, all at once, and each card holds a floor of 44 pixels on its shortest side. That is what stops the board from ever demanding a sideways scroll on a narrow phone.

The same ten faces every time, in a different order every time

Eighteen faces exist and a board this size takes the first ten of them, so the cast is the same on every deal and is meant to be – the children page runs on the first six of those same ten and explains the order they are chosen in. What gets shuffled is where they lie, and nothing else.

Shuffling the inventory as well would be two lines of code and would add nothing, because a board is learned by position and never by contents – knowing that a cross is somewhere on the table has not once helped anybody find the second one. Taking the ten off the head of the list instead buys something real. That list is ordered most-distinct-first, so this board gets the teardrop and stops short of the leaf and the crescent behind it, and is never asked to tell three curved outlines apart from memory. A random ten out of eighteen deals all three together about one time in seven, which at this size is often enough to matter. New game reshuffles the positions and leaves the cast alone.