# Play Soroban

> This challenge tasks you with building a small interactive Soroban-style game in React. A sequence of numbers is shown on the screen; after the sequence ends, you need to check that the calculated sum is correct.

- Difficulty: intermediate
- Tags: useState, useEffect, game
- Estimated time: 45 minutes
- Tests: 10
- Requires subscription: yes

## Overview

This challenge tasks you with building a small interactive Soroban-style game in React. A sequence of numbers is shown on the screen; after the sequence ends, you need to check that the calculated sum is correct.


## Requirements

- Render a page titled "Play Soroban" with a clear main UI.
- Initially display a Start button.
- On Start:
  - Hide the Start button and show a Reset button.
  - Begin generating numbers at a fixed SPEED; each interval appends one number to the sequence.
  - The first number should appear after pressing Start; display the current number prominently and show a Round indicator (e.g., Round 1).
  - Continue until a fixed number of rounds (ROUNDS) is reached, then stop automatically and reveal the result form.
- After end, display a form to check the result with an input and a Check Result button.
- Submitting the form stores the user input and compares it to the actual sum of the generated numbers.
- If the input matches the sum, show a success message; otherwise show a failure message.
- Show a Done button after feedback that resets the game to the initial state (Start visible).
- All tests expect specific data-testids to exist (number, result-form, success-result, fail-result, done, start, reset).


## Notes

- Don't create more state than necessary; data that can be computed from other state should be kept out of state.
- If you need to keep some data in memory but you don't need to trigger a rerender, use useRef instead of useState.
- Always clean up the interval on unmount or when the game is reset.
- The Soroban component consumes the total via the data prop; keep the visual in sync with the computed total.
- Tests rely on specific data-testid attributes; keep them consistent.
- The solution integrates with existing components (Button, Soroban) and helper utilities (randomNumber, RESULT_MAX, RESULT_MIN, ROUNDS, SPEED).


## Tests

01. Renders the page title
02. Start button is visible on initial render
03. Start button is hidden after starting
04. First number appears after starting
05. Round indicator displays 'Round: 3' after 3 rounds
06. Result form appears after finishing
07. Shows a success message when the result is correct
08. Shows a failure message when the result is incorrect
09. Reset clears numbers and shows the Start button again
10. Done button resets the game and shows the Start button