Vera's Spelling Bee

A picture-led spelling game. A pictogram shows what the word means, most of the letters are already on screen, and the player taps the missing ones on a Wordle-style QWERTY keyboard.

It is built for a player who cannot read prose: there are no sentences, instructions, or browser dialogs anywhere in the UI. Every control is an emoji, an icon, or a colour, touch targets are large, and the whole board is reachable one-handed on a phone.

Running it

npm install
npm run dev        # http://localhost:3000
npm run build      # static export into out/
npm run test:e2e   # builds, serves out/, runs the Playwright suite

npm run build produces a fully static site in out/ — drop it on any static host. There are no runtime API calls and no server.

How the game works

Difficulty	Words	Blanks per word	Lives
Easy	5	1	5, refilled each word
Medium	5	ceil(0.25 × length)	4, refilled each word
Hard	16	ceil(0.5 × length)	3 for the whole round
Expert	26	every letter but the first	1 for the whole round

The word list has one word per letter of the alphabet. Each round shuffles its words into a fresh order, and the hidden letters are picked at random every time a word comes up — so the same word is a different puzzle on each encounter and has to be spelled rather than recalled as a shape.

Any letter can be hidden, including the first. The one exception is expert, which always keeps the first letter as an anchor and hides all the rest.

Adding ?seed=<number> to the URL fixes the word order, so a round can be replayed exactly. The end-to-end tests use it; ordinary play leaves it off.

A correct letter fills its tile and the arrow moves to the next blank. A wrong letter greys that key out for the rest of the word and costs a life. Lives gone means a sad-face screen with a restart button; all words done means a trophy.

Pictograms

The 26 word images plus the bee are committed under public/pictograms/ and served from this host. scripts/fetch-pictograms.mjs records how they were selected from the ARASAAC API and can regenerate them, but it is not part of the build. data/pictograms.json maps each word to its ARASAAC id.

Pictograms are the property of the Government of Aragón and have been created by Sergio Palao for ARASAAC (http://arasaac.org), which distributes them under Creative Commons BY-NC-SA licence.

Not in this version

Audio. Speaking the letter as it is tapped, and the word on success, is the next thing to add.