Conversation
client/src/pages/game/GamePrompt.js
Outdated
| gameIO.state.io.on("start timer", () => { | ||
| clearTimeout(countDown); | ||
| setTimer(45) | ||
| }); |
There was a problem hiding this comment.
This should be in its own useEffect():
useEffect(() => {
gameIO.state.io.on("start timer", () => {
clearTimeout(countDown);
setTimer(45)
});
}, []); // [] means set the listener only once on mount
client/src/pages/game/GamePrompt.js
Outdated
|
|
||
| gameIO.state.io.on("start timer", () => { | ||
| clearTimeout(countDown); | ||
| setTimer(45) |
There was a problem hiding this comment.
We should add and use the server's countdown time to gameState.gameTurn (maybe as gameState.gameTurn.timeLeft).
The reason for this is, if the user refreshes the page during the game, I believe the countdown time would be incorrect. By using the current countdown time from the gameState.gameTurn when the game page reloads, we can guarantee it to be accurate.
client/src/pages/game/GamePrompt.js
Outdated
|
|
||
| const [timer, setTimer] = useState(45); | ||
|
|
||
| let countDown = null; |
There was a problem hiding this comment.
const [countdown, setCountDown] = useState(null);
variables that are not stateful can be inaccurate upon the page being rerendered
| </Grid> | ||
| <Grid item> | ||
| <Typography variant="h6">45s left</Typography> | ||
| <Typography variant="h6">{gameState.winner ? 0 : countDown}s left</Typography> |
There was a problem hiding this comment.
Just curious - why not just have it set as just countdown? I don't see the need to just show a 0 on the timer when the game is over
There was a problem hiding this comment.
Oh, it's because It feels odd to me that the timer is running after the game ended
server/socket_io/GameIO.js
Outdated
| this.gameIO | ||
| .to(matchId) | ||
| .emit("game state change", match.getGameState()); | ||
| this.gameIO.to(matchId).emit("start timer"); |
There was a problem hiding this comment.
I don't think we need this emit anymore now that we listen to gameState.timeEnd's change on the frontend
There was a problem hiding this comment.
Yeah, I forget to delete it.
2 participants
Two separated timer, one in the back-end GameIO, one in the front-end GamePrompt. When started a game, will emit a "start timer" event to let the front-end know it's time to start the timer. At the same time will start an interval in the back-end. When the interval expired, it will call nextGameTurn.