I recently built a browser game where the player’s answer is a visual ratio rather than a typed number. The static pages use Astro, while the playable area is a focused React island. That boundary made the site easier to keep fast, crawlable, and accessible.
The game is available at Size It Up Party. A round shows a fixed reference silhouette and an adjustable target. The player changes the target scale, locks the estimate, and receives a reveal with the actual ratio and score.
Keep the rules outside the component
Normalization, validation, error calculation, and scoring live in a pure TypeScript package. React owns interaction state and rendering, but it does not own the mathematical definition of a valid answer. The same scoring behavior is reusable across Daily and Unlimited modes, and tests remain independent from the DOM.
Treat pointer input as one interface, not the interface
Dragging a scale handle is useful, but it is not sufficient. The game also exposes Smaller, Larger, and Reset controls with visible labels. Keyboard users can reach the same actions, and touch users do not need precise pointer movement.
The important value is the normalized scale ratio. Pointer gestures, buttons, and keyboard shortcuts are different ways of updating that same value.
Separate object movement from the answer
Players may reposition silhouettes or change the view to inspect them. Those actions must not alter the submitted estimate. The answer is derived only from the target’s scale along the named measurement axis.
Keeping camera state, object position, and answer state separate prevents subtle bugs and makes the reveal deterministic.
Preserve static HTML
The game island is interactive, but the rest of the page is ordinary Astro output. The heading, instructions, explanation, FAQ, legal links, and metadata are present in the initial HTML. The site does not need to turn an entire landing page into a client-rendered application just because one section is interactive.
Design the reveal as a stable state
The reveal reuses the same canvas area instead of mounting a second interface below it. This avoids a large layout shift. Text feedback explains direction and error, so color is supportive rather than the only signal.
Test rules and controls separately
Pure scoring tests cover exact answers, symmetric overestimation and underestimation, invalid values, and boundaries. UI tests focus on whether every input method updates the same scale state and whether locking prevents later edits.
The broader lesson is that a custom visual interaction does not require a custom architecture everywhere. A small interactive island, pure shared rules, and ordinary static content can coexist cleanly.