Johnattan's Laboratory
← All experiments

A phone scorekeeper for the board game 7 Wonders

I wanted to replace the paper score pad that comes with 7 Wonders. In one evening I built a Spanish-language phone app that adds up the seven scoring categories, works out the science points and lets a whole table share one live scoreboard.

  • Games
  • Tools

Project page

Updated19 Jul 2026

The problem

7 Wonders comes with a paper score pad. I wanted a phone app instead, in Spanish, that keeps the score for up to seven players, does the science arithmetic, and helps new players learn the rules.

What I built

7 Wonders · Marcador is a web app that installs on the phone's home screen and works offline. You choose one of three modes on entry. In Master, one person keeps the score for everyone. In Individual, each player keeps only their own score. In Shared room, one player creates a room and shares a six-digit code, and everyone who joins edits the same scoreboard and sees the others' changes.

Scores go in under the game's seven official categories (military, treasure, wonder, civilian, commercial, science and guilds). The app totals them, ranks the players live with medals, and breaks ties by coins. Treasure points are the coins divided by 3, rounded down. The science calculator counts each symbol type, scores the square of each count plus 7 points for every complete set of three, and assigns wildcard symbols in whichever way scores best.

A Learn tab summarises the rules and scoring, with tips and a gallery of the seven wonders.

Phone screen of the 7 Wonders scorekeeper in Spanish. Under an illustrated banner of the wonders, the Clasificación panel ranks four made-up players with medals: Ana 67, Ben 66, Caro 54 and Dani 42. Below, Ana's card shows plus and minus steppers for Militar and Tesoro.
The scoreboard ranks the table live, with medals, as each category goes in. The players and scores are made up.
The science calculator open on Ana's card: steppers for gear, compass, tablet and wildcard symbols, and a line working out 2 squared plus 1 squared plus 1 squared equals 6, plus 7 for one complete set, for 13 points.
The science calculator shows its arithmetic: the square of each symbol count plus 7 points per complete set.
Entry screen asking how the table will keep score, with three choices: one scorekeeper for everyone, individual scores on each phone, and a live shared room joined with a code.
On entry the table picks one scorekeeper, one calculator per player, or a shared live room.

Equipment

How I built it

  1. I started from a fresh Next.js app (Next.js 16, React 19, Tailwind v4) and kept all the scoring rules in one file as the single source of truth.
  2. I generated 9 images in Magnific with the Nano Banana Pro model (a hero, the app icon and the seven wonders) and shrank them for the web.
  3. Codex reviewed the first version; I applied its fixes, then had it review the individual calculator too.
  4. For the shared room I used Upstash Redis through the Vercel Marketplace. Each player is a separate field in the room's record, so two people editing different players never overwrite each other. Rooms expire 24 hours after the last write.
  5. A third Codex review, on security and concurrency, led to a hard cap of 7 players, a 16 KiB request limit, cryptographic room codes, and local edits that are kept until the server accepts them.
  6. I deployed to Vercel and tested the shared room live, sending and receiving changes.

Results

  • The app went from an empty Next.js project to a shared live scoreboard in one evening: 13 commits between 18:22 and 23:05 on 19 July 2026.
  • It is live at seven-wonders-nu.vercel.app.
  • Phones in a shared room check for changes every 5 seconds and back off up to 30 seconds when the connection fails.
  • I applied three Codex reviews: of the first version, the individual calculator and the shared room.

What I learned

Offline caching and live data do not mix by default. The service worker served the room's API from its cache, so polling kept returning the first answer and the shared scoreboard never updated. API routes now always go to the network.

Store shared state in pieces that match who edits them. One field per player, instead of one record for the whole table, is what lets several phones edit at once without losing each other's changes.

Lab notes

  1. I fixed the service worker, which had been caching the room's API and freezing the sync, hardened the room after a Codex security and concurrency review, and switched room codes to six digits with a numeric keypad for joining.

  2. I added a mode chooser (one scorekeeper for the whole table, or a calculator for each player) and a shared room on Upstash Redis, so every phone at the table sees the same live scoreboard.

  3. I built the first scoreboard and a Learn tab with the rules, illustrated with AI images of the seven wonders. Then I applied a Codex review, which brought the best assignment of science wildcards, validation of saved scores, accessibility fixes and a service worker for real offline use.

© 2026 Johnattan García-Ruiz Last updated