Four scratch pads: how one page of game prototypes became four real games

The Margin is a planner for work and home: boards, notes, meals, money and the family's week. Its header has a gamepad icon, and behind it is the break room, a shelf of small games for the five minutes between two real things. This chapter and the nine after it are about how those games were made, and they get technical in places.

On the morning of Sep 27, four of the games fit on one HTML page of 2,151 lines. By the end of the day they were one change to the code that touched 432 files and added 60,153 lines, most of it the four games:

The page#

Until then the break room held Stack and Catch the Tasks on the web and Volley on the phone. We wanted more of them, so we wrote four prototypes into a single 111 KB file with a tab for each. The Week is a block puzzle on a planner grid, where tasks are the pieces and a full day or a full hour clears. Table for Six asks you to seat a family so that every wish on every place card holds. Paper Plane is a glider thrown across a notebook page. Loose Ends is pins and threads on a corkboard that you untangle until nothing crosses. Jot and Tare, the two drawn mascots from the phone app, got ported in so each game had somebody watching.

The founder played all four that morning. They were scratch pads, and you could list why. The sound was a single oscillator with an envelope, sine or triangle, dressed up as five noises called tick, place, chord, thud and brush, and it was off by default. Every game had exactly one way to play. Table for Six had one table with six seats, which is 720 possible seatings, few enough that the page just tried every one. Its generator rolled up to 260 random sets of wishes and kept whichever allowed the fewest answers, and it stopped as soon as it found three or fewer. So a puzzle could have three right answers, and the page had no way to tell a table you could reason through from one you could only crack by shuffling people around.

Loose Ends was the exception. It scattered points, joined near pairs while refusing any thread that would cross another, and dealt the pins out of that drawing, so every board came with a solution. It still had no par and no proof that you could get from the tangle to the answer without breaking a rule on the way.

Your best score lived in the browser's local storage. Clear site data and it was gone. Open Margin on your phone and it had never happened.

What we decided#

Build all four properly. The brief asked for real mechanics, a sound design that belonged to each game, every Margin theme including ones nobody has drawn yet, and levels generated from content packs, so an update can add a pack of levels without touching code. Stack and Catch the Tasks would stay on the shelf as the classics.

Two revisions arrived before the evening. One wanted recorded sound from the internet instead of synthesis, and every game on every surface: desktop, the phone's browser and the native app, with no control that only works one way. The other undid a rule we had kept since the first break room game. Now each game gets a calm mode with no clock and no way to lose, plus a competitive mode with lives or a clock or a streak, and the person chooses.

It all went into one contract, Docs/games/ARCHITECTURE.md, and four lanes built against it at the same time. Some of the scratch pad survived. Its random number generator carried a comment, "a seeded generator whose whole state is one number, so a hot reload can carry it", and the shared core's RNG is that idea nearly word for word. It is also why a daily puzzle can be the same board for everyone who opens it that day.

That commit gave each of the four new games five content packs and 185 recorded sounds between them. Counting every test it touched, not only the games' own, it carried 60 test files and 12,057 lines of tests. The same scene code draws on the web's canvas and on the phone's Skia renderer. All seven games are on both shelves today, Volley included.