Star Match Game

1: GAME TEMPLATE

• [1.1] Add HTML/CSS Template and Math Util

2: DYNAMIC

• [2.1] Get rid of static elements and generate them dynamically

3: COMPONENTS: Items that share similar data or behavior

• [3.1] Extract component for Number Buttons with click handler (Closures)
• [3.2] Extract component for Stars Display

4: LOGIC

• [4.1] Implement UI logic for Number Buttons (View Functions)
• [4.2] Implement logic for click handlers on Number Buttons (Behavior Functions)
• [4.3] Implement Reset Game

5: SIDE EFFECTS

• [5.1] Render remaining time every second to UI using useEffect
• [5.2] Clean side effects of time remaining
• [5.3] Adjust game status (time remaining, available numbers and reset)
• [5.4] Stop timer and deactivate numbers when game is done

6: REFACTOR

• [6.1] Reset game using Unmouting-Remounting
• [6.2] Extract States, Effects and Transactions (set Functions) logic to Custom Hook