The client

v3 · Preview

Framework v3 is an opt-in preview available to everyone. New games use the stable framework by default.

Build the client

1. Supply the entry

Write /src/frontend.tsx. Default-export the board component, which takes no props. The file lists what the client may import and the optional GameOver export.

2. Draw the viewer's board

Follow Read the board. Draw nothing while useBoard() is null. Draw the board for a spectator too: useSelf() is null for one. Show the game's art with useImage(key).

3. Connect player choices

Follow Send player actions. Make only the offers of useOffers() clickable, and draw the draft and the Undo control. Show decisions on their way and each failure, as Pending actions and failures describes.

4. Check presentation and completion

Follow Client structure. Animate movement and replay as Animate game changes describes. Add sounds as Images and sounds describes, and the end of the match as End-of-game controls describes.

Run validate_code until it reports no errors. Start a session with start_game. Render the board for each seat with render_game, with a phone and a desktop viewport and in each colorMode. Test each transition as Client checks describes.

Need a hand with this?

Join our Discord