Mexican Train

Overview

Mexican Train games run long — sixteen rounds on a double-15 set — and the paper scoresheet always seems to go missing halfway through. This tracker replaces it with a single page that lives on whatever phone is closest to the table. Each round column is labeled with its engine domino, totals and standings update as scores go in, and the current leader gets the trophy. If someone forgets to write down a round, the gap is highlighted and filled with that round's average so the standings stay fair until the real number turns up.

Features

• Round columns labeled with a drawn domino face for each engine, from double-15 down to double-0
• Live totals, a current-leader banner, and medal standings — lowest score wins
• Missing past scores are highlighted and estimated from the round average, with a ~ marking any estimated total
• Add, rename, and remove players at any time, with undo for removing a player or round and for resetting scores
• Autosaves to the device as you type, so a refresh or a locked phone never loses the game
• Save and load the game as a JSON file to move it between devices
• Phone layout keeps player names and totals pinned while round columns scroll, with a number pad for score entry

Technical details

A single self-contained HTML page built with React 18 and plain CSS — no backend and no build step on the server. The JSX is compiled ahead of time so phones load only React itself rather than an in-browser compiler. Game state (players, rounds, and a score map keyed by player and round) is debounced into localStorage and also flushed when the page is hidden, so switching apps mid-game is safe. Domino pips are drawn as inline SVG from a coordinate table for every value from 0 to 15.

Engineering challenge

Making a wide score table usable on a phone was the main challenge. With sixteen rounds the table is far wider than the screen, so the player column is pinned on the left and the total column on the right, with the rounds scrolling between them. Score fields use a numeric keyboard and a 16px font so iOS doesn't zoom on every tap, and destructive buttons are always visible on touch screens, where there's no hover to reveal them.