I bought an old GraLab darkroom timer: a big analog dial built for timing photo prints under a red safelight. The first time I turned that knob I thought: this is a safe dial.
The plan is to gut it into a game controller (encoder behind the dial, a Pico inside, the toggle as a button). But before soldering anything, I wanted to know if the game was actually fun. So I built it for the web first.
🔐 Play it: haugf.com/vault. A new vault every night at midnight.
The game in 10 seconds
- 3 tumblers, 60 seconds. Turn slowly and feel for the thunk: one click heavier than the rest, plus a buzz on your phone. Then lock it in.
- The guard. You hear footsteps, the door opens, and you freeze. Move while he's looking and you're spotted (−10s). Three strikes and you're busted.
- Daily, like Wordle. Everyone gets the same vault. Your first run is the official one, and after that it's practice.
Design before code
My one rule: mock it first, then build it. The times I jumped straight to code were the times I redid work.
- One phone screen, no scrolling. LOCK sits in the thumb zone.
- Stay in the darkroom. Black, safelight red. Run out of time and your print burns.
- Make it shareable. Wordle's grid is why people post it, so this has one:
Darkroom Heist #1
💰 38.2s · Safecracker
🟥🟥🟩
🟩
💰
haugf.com/vault
🟩 crack · 🟥 bad lock · 🔦 spotted · 💰 the final crack
How it's built
One HTML file. No framework, no build step.
| Piece | How |
|---|---|
| Daily vault | Date-seeded RNG, so everyone gets the same vault and there's no server |
| Dial |
<canvas> with touch drag, mouse wheel and arrow keys |
| Sound | All synthesized with Web Audio, no audio files |
| Haptics | navigator.vibrate |
| Hosting | S3 + CloudFront |
iOS gotcha: the sound didn't start until your first LOCK press, because iOS only unlocks Web Audio after a tap. The fix is to unlock it on any touch with a silent buffer.
Launching it at a hackathon
I was coaching MakeCU (Columbia's hackathon) and told the room to play for a shirt. CloudFront logs from the first weekend:
- 57 visitors, 86 game loads
- 40 of 57 on iPhone
- 48 came from links tapped in group chats
- Sunday, with no hackathon push: 26 new players
What playtesters told me:
- Too much scrolling. → the one-screen layout
- Text highlights while dragging. → turned off selection everywhere but the share text
- Caught while holding still. → still open: lifting your finger should count as frozen
- Make the right number more obvious. → Easy and Hard modes are in mockups
A global leaderboard: Today's Crew
Sample board for illustration.
The backend is tiny: one Python Lambda behind a function URL, plus one DynamoDB table keyed by vault and device. It costs pennies.
- Never block sharing. You always see your result first. You go on the board under three random letters, and you can tap your row any day to sign your real initials.
- No bad words in three letters. There's a blocklist, checked in the game and on the server. Try one and you get an Easter egg: muzzle flash, gunshot, BANG., and your letters get shot out.
What's next
- Fair freezing
- Easy / Hard modes
- Real art by Ally
- The actual GraLab controller, on a screen at Wonderville
New vault every night. Come crack it: haugf.com/vault
Top comments (0)