01 / Why a game
Let the connection
become part of the play.
The field station makes StreamOtter’s delivery states visible to developers. I wanted another way to experience them: a small game with an immediate goal, where losing current data has a consequence the player can see.
You play Pebble, a river otter trying to herd her pups home before a camera trap catches them. Rounds last sixty seconds. Keyboard or pointer controls steer Pebble; the creek’s public channels determine when the pups wander out and when the camera fires.
02 / How I built it
React owns the state.
Canvas draws the creek.
The app reads three views through StreamOtter’s React hooks: den activity, the camera-trap reach, and the creek overview. Those updates give the game its targets. Local controls and a canvas animation loop handle the movement between updates, so steering stays responsive without turning every frame into a subscription update.
I kept the game rules separate from React and drawing. The engine holds the round, scoring, herding, pause, and resync rules as plain TypeScript. React manages the screens, controls, and subscription lifetimes; the renderer turns the current state into the field you see.
03 / The decisions
Pause when the creek
stops being current.
When a required subscription is stale, the round pauses on the last known creek. A fresh snapshot resets the targets when delivery recovers. The game does not invent the events it missed. If the backend cannot be reached, an explicitly labeled recording makes the game playable without presenting it as live.
The game only reads public views. Player controls and scores do not write to Kafka; the best score stays in the browser. The public den view supplies enough activity for the game while the protected den location stays out of it. An “Under the hood” drawer exposes the subscriptions behind the play.
04 / Where it stands
A working local build.
A public home to come.
The game is implemented locally and uses prerelease React-hook packages. The screenshots here show its recording mode. Public release and the connection to the shared hosted field station are still being prepared; lontracreek.com is its planned home, not a live destination yet.
Pup Patrol belongs with StreamOtter in this portfolio because it shows the toolkit being used to build a separate application. The existing field-station demo remains available at StreamOtter.dev, and its case study covers the simulation and real Kafka pipeline behind that world.
Jason Fricano