24 Game

Requirements

Functional Requirements

• The game should deal 4 random numbers (from 1 to 9) at the start of every new round.
• Players must use all 4 numbers exactly once to create an arithmetic expression that evaluates to 24.
• Players can build expressions by clicking:
  • Number cards
  • Operators: +, -, *, /
  • Parentheses: ( and )
• The current expression should be displayed as the player builds it.
• A live preview of the evaluated result should be shown whenever the expression is valid.
• A Check button should validate whether the expression equals 24 and provide:
  • ✅ for correct solutions
  • ❌ for incorrect solutions
• A Clear button should reset the current expression without changing the dealt cards.
• An Undo button should remove the most recently entered character or number.
• A New Deal button should generate a completely new set of 4 random numbers.
• A Shuffle button should randomly reorder the currently displayed cards.
• A Give Up button should verify whether the current set of cards is solvable:
  • If solvable, the user should be encouraged to keep trying.
  • If unsolvable, a new deal should be generated automatically.
• A move history should record all attempts, for example:
  • 3+8+8+5 = 24 ✅
  • (6/2)*(9-1) = 24 ✅
• Optionally, a Hint button may provide a simple suggestion, such as pairing large and small numbers.

Edge Cases and Constraints

• All four numbers must be used exactly once; using fewer than four numbers is invalid.
• A card cannot be selected more than once in a single expression.
• Once a card is used, its button should be disabled.
• Invalid mathematical expressions should display:
  • Invalid Expression ❌
• The application should not crash when evaluating malformed expressions.
• Division by zero must be handled safely and ignored by the solver logic.
• Starting a new deal should:
  • Clear the current expression
  • Reset the result display
  • Re-enable all cards
• Undo should correctly re-enable a card if the removed character was a number.
• Move history may either:
  • Persist across deals, or
  • Be cleared when a new game starts
• The layout should be responsive and work well on both desktop and mobile devices.

Testing Identifiers (data-testid)

Cards

• card-0
• card-1
• card-2
• card-3

Buttons

• btn-add
• btn-sub
• btn-mul
• btn-div
• btn-lp
• btn-rp
• btn-undo
• btn-clear
• btn-check
• btn-new
• btn-shuffle
• btn-giveup

Displays

• expression-display
• result

Containers

• cards-container
• history-container