Support keyboard and pointer
For a technical producer, this catalog design prototype should make every player action and result the player can inspect easy to evaluate. Write how to define item identity, value, Koin price, preview, and ownership before checkout. Map preview, confirmation, a player cancellation, not enough Koin, pending, success, delivery, owned, and reload. Give every failure a safe next action. Check tab order, focus indicators, mouse targets, escape behavior, and the return to game controls. Confirmation must never borrow an input that also performs a high-frequency gameplay action.
Plan for wide layouts
Keep the item, Koin amount, balance effect, and actions together on common desktop widths. Avoid pushing cancelling the action off screen simply because the game canvas occupies a large area.
Test window changes
Resize, move between displays, zoom, refresh, and restore a background tab. The interaction should preserve the selected item and resolve pending or delivered states without another grant.
Name every state and owner
Separate preview, confirmation, pending, success, delivery, owned, insufficient Koin, cancel, interrupted, and reopened states. Assign later production work for identity, persistence, native billing, security, refunds, policy, and monitoring.
Define idempotent recovery
Repeated confirmation, a slow response, navigation during delivery, and reopening must resolve to one result. Record which state is authoritative and how the player can safely retry without another grant or Koin deduction.
Turn the prototype into tickets
Capture the visible behavior first, then create implementation tasks with expected examples for each transition and platform boundary. Do not translate a working browser interaction into an unsupported claim that backend commerce is complete.
Compare items consistently
Use the same fields for every offer: preview, benefit, ownership or duration, precise Koin price, and owned state. Consistent cards make differences easier to understand. Test that behavior using desktop web games. Desktop browser purchases remain Koin flows inside the supported experience.
Keep the first catalog small
Start with one to three clearly different items. A large grid makes it harder to find unclear value, duplicated promises, and missing delivery states. Test that behavior using desktop web games. Desktop browser purchases remain Koin flows inside the supported experience.
Design owned and unavailable states
A catalog also needs sold, owned, equipped, and unavailable presentations. Do not leave a purchased item looking buyable after reload. Test that behavior using desktop web games. Desktop browser purchases remain Koin flows inside the supported experience.