K53 Drill Master

Routing is a state string that swaps which game component is mounted. State is props plus localStorage. Styling is a theme object passed down. Each of those is a library that was considered and declined with a reason: fifty kilobytes for navigation on a single-page app, a global store for a codebase five people will ever touch, a build step for control over every pixel at 360 wide. The discipline is not minimalism for its own sake — it is that on this device the download is the user experience.

// the entire routing layer
const [activeGame, setActiveGame] = useState(null);
if (activeGame === 'gauntlet')
  return <Gauntlet onBack={() => setActiveGame(null)} />;

Every tone is generated with the Web Audio API — no audio files, so no requests, no cache entries, and it works offline from the first launch. The correct-answer sound is a rising two-note sine wave with a tuned attack and decay, because a reward sound is heard fifty times in a session and the difference between rewarding and irritating is about thirty minutes of tuning. Note the detail that matters more than the waveform: the audio context is resumed on every call, because iOS and Chrome suspend it and a silently dead sound on first tap reads as a broken app.

osc.frequency.setValueAtTime(660, now);
osc.frequency.setValueAtTime(880, now + 0.08);
gain.gain.linearRampToValueAtTime(0.18, now + 0.01);      // attack
gain.gain.exponentialRampToValueAtTime(0.001, now + 0.28); // decay

The first version used hand-drawn inline SVGs — zero requests, crisp at any density, and wrong. South African road signs are legally specified, and a Give Way that is slightly off shape teaches the wrong recognition. The pivot was to extract the real artwork from the official learner manual PDF, using the renderer's paint-operation count to tell actual signs from decorative page furniture, then serving them as small on-demand JPEGs cached by the service worker after first view.

Page  3 → images  10– 16 : Stop (R1.1), Yield (R2)
Page  4 → images  17– 25 : No Entry, speed limits
Page 22 → images 272–285 : warning — crossroads, junctions
Page 26 → images 329–343 : pedestrian & traffic warnings

Some extracted images came out damaged. Rather than audit several hundred files by hand, each image carries an `onError` that hides it and falls back to a drawn shape. Runtime detection of a known-possible failure is cheaper than an exhaustive up-front audit, and it stays correct when the asset set changes.

Streak encouragement fires at three, five and seven, then every five after that. Three is achievable enough to start the loop, seven feels like momentum, and past that the interval widens so the reward does not become wallpaper. Reward schedules are engineering; picking the numbers by feel and then never revisiting them is how an app becomes annoying.