The image that repaints itself

The daily share image had never been touched since it first learned to draw the board, and three separate complaints had accumulated against it: a square board area left dead bands down both sides of the panel, the fruit on it were plain colored dots rather than anything recognizable, and a player’s leaderboard rank, computed on every submission and thrown away the moment the response left the server, never showed up anywhere. Unlike the last few fixes, which each resolved in a single grilling session with no map needed, this one had genuine open questions, wide enough to become its own wayfinder map.

Three tickets ran in parallel with no blocking edges between them. One prototyped the fruit rendering itself, framed Path2D icons drawn straight from the same stroke paths the board already used, chosen over a rasterized SVG option specifically because the share image draws synchronously and an SVG path would have forced an async render pipeline for no visible gain. A second prototyped the canvas shape, landing on a full 1200×630 open-graph ratio that kills the dead bands outright. A third worked out where a rank actually belongs: reactively, repainting the instant a podium finish lands, not gated behind a loading state, persisted at the moment of submission so a later revisit still shows it.

The map’s own scoping decision was that fruit-drawing primitives should ripple into every share image that draws fruit, while layout stays local to whichever composition owns it. In code, that split is one function called with two different numbers:

/** Daily challenge: full OG-image size, 1.91:1. */
const DAILY_DIMS = makeDims(1200, 630, 400);
/** Duel: the original composition, unchanged by the daily redesign. */
const DUEL_DIMS = makeDims(630, 420, 210);

The new framed fruit icons show up in both the daily and duel share images, since both call the same drawing primitive, while the daily canvas grew to its new proportions without moving the duel composition at all.

The rank itself turned out to be data the server had been computing for every submission all along; the client just never asked the response for it. Wiring it through meant a gold ★ #1 TODAY line on the canvas that only appears for a top-three finish, and a matching row in the recap’s screen-reader-only summary, since that summary already mirrors every fact the canvas draws and a rank visible only in the image would have broken that.

All three pieces landed together in one pull request, built by three subagents run one after another rather than in parallel, since every piece touched the same rendering file and a shared file rules out working the same range concurrently. The whole thing was verified against a cleared local leaderboard: play a game, submit, and watch the gold line paint itself in without a reload.