Add pause and stop functionality with enhanced UI #32
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds pause/resume and stop functionality to a counter game timer, along with significant UI enhancements including animations, improved responsiveness, and better visual feedback for button states.
Changes:
- Added pause/resume functionality with proper state management and button disable logic
- Replaced reset button with a stop button to end the active game
- Enhanced UI with modern styling including gradients, transitions, animations, and responsive design
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| day001/counter-game/src/components/HomePage/HomePage.js | Added isPaused state, pause/resume/stop handlers, updated timer logic, and improved button states with proper disable conditions |
| day001/counter-game/src/components/HomePage/HomePage.css | Enhanced styling with responsive design, button animations, gradient backgrounds, and added styles for new pause/stop buttons |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| const interval = setInterval(() => { | ||
| setTimer(timer - 1); | ||
| setTimer((prev) => prev - 1); |
There was a problem hiding this comment.
The timer can reach negative values. When the timer reaches 0, the interval should be cleared or the game should end automatically. Currently, if the timer is set to 1 and the interval ticks, it will become 0, but the interval is only prevented from starting when timer is already 0. Consider adding a check inside the interval callback to prevent the timer from going below 0 and to stop the game when it reaches 0.
| setTimer((prev) => prev - 1); | |
| setTimer((prev) => { | |
| if (prev <= 1) { | |
| clearInterval(interval); | |
| return 0; | |
| } | |
| return prev - 1; | |
| }); |
1 participant
Changes
Notes