Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Timer renyi 48 #71

Open
wants to merge 9 commits into
base: dev
Choose a base branch
from
Open

Timer renyi 48 #71

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4ea6f52
add env
reny1cao Jun 18, 2020
1fa57f1
add timer
reny1cao Jun 19, 2020
fe03e41
fix
reny1cao Jun 19, 2020
7d116eb
fix failed to clear timer
reny1cao Jun 19, 2020
4fd55f0
del testing code
reny1cao Jun 21, 2020
a179a98
timer to each running instance
reny1cao Jun 29, 2020
e17c26d
fix the sync issue
reny1cao Jul 1, 2020
6951de6
remove test code
reny1cao Jul 1, 2020
b08b669
delete unnecessary code
reny1cao Jul 1, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 21 additions & 3 deletions client/src/pages/game/GamePrompt.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,28 @@
import React from "react";
import React, { useState, useEffect, useContext } from "react";
import { Box, Container, Grid, Typography } from "@material-ui/core";
import TimerIcon from "@material-ui/icons/Timer";

import { AppContext } from "../../App";
import { TEAM_ROLE } from "../game_lobby/team_select/TeamPresets";

function GamePrompt({ gameState, player }) {
const { gameIO } = useContext(AppContext);

const [timer, setTimer] = useState(45);

let countDown = null;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const [countdown, setCountDown] = useState(null);

variables that are not stateful can be inaccurate upon the page being rerendered


gameIO.state.io.on("start timer", () => {
clearTimeout(countDown);
setTimer(45)
Copy link
Collaborator

@tonyc856 tonyc856 Jun 19, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

});
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


useEffect(() => {
if (timer > 0) {
countDown = setTimeout(() => setTimer(timer - 1), 1000);
}
});


return (
<Container>
<Grid container justify="space-between" alignItems="center">
Expand All @@ -14,7 +32,7 @@ function GamePrompt({ gameState, player }) {
<TimerIcon fontSize="large" />
</Grid>
<Grid item>
<Typography variant="h6">45s left</Typography>
<Typography variant="h6">{timer}s left</Typography>
</Grid>
</Grid>
</Grid>
Expand Down
4 changes: 2 additions & 2 deletions server/engine/Game.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ class Game {

this.redPoints = 0;
this.bluePoints = 0;
this.numGuessLeft = 0;
this.numGuessLeft = MAX_NUM_OF_GUESSES;
this.maxNumOfGuess = MAX_NUM_OF_GUESSES;
this.winner = null;

Expand Down Expand Up @@ -270,7 +270,7 @@ class Game {
resetGame() {
this.bluePoints = 0;
this.redPoints = 0;
this.numGuessLeft = 0;
this.numGuessLeft = MAX_NUM_OF_GUESSES;
this.gameBoard.generateNewRound();
this.gameTurn = [GameTurns.BLUE_SPY_TURN, GameTurns.RED_SPY_TURN][
Math.round(Math.random())
Expand Down
26 changes: 21 additions & 5 deletions server/socket_io/GameIO.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ class GameIO {
constructor() {
this.gameIO = null;
this.chatIO = null;

this.timer = null;
}

connect(io) {
Expand All @@ -34,6 +36,7 @@ class GameIO {

socket.on("game start", (matchId) => {
this.gameIO.to(matchId).emit("resolve start game");
this.timer = this.startTimerInterval(matchId);
});

socket.on("game state onload", (matchId) => {
Expand All @@ -44,15 +47,12 @@ class GameIO {
}
});

// setInterval(() => {
// countdown--;
// this.gameIO.to(matchId).emit("timer", { countdown: countdown });
// }, 1000);

socket.on("end turn", (matchId) => {
const match = MatchManager.getMatch(matchId);
match.nextGameTurn();
this.gameIO.to(matchId).emit("game state change", match.getGameState());

this.timer = this.startTimerInterval(matchId);
});

socket.on("card select", (matchId, data) => {
Expand Down Expand Up @@ -120,10 +120,26 @@ class GameIO {
.to(matchId)
.emit("game state change", match.getGameState());
}
this.timer = this.startTimerInterval(matchId);
});
});
}

startTimerInterval(matchId) {
clearInterval(this.timer);
this.gameIO.to(matchId).emit("start timer");
return setInterval(() => {
console.log("timer started");
const match = MatchManager.getMatch(matchId);
console.log(match.getGameState());
if (match) {
match.nextGameTurn();
this.gameIO.to(matchId).emit("game state change", match.getGameState());
this.gameIO.to(matchId).emit("start timer");
}
}, 46000);
}

setChatIO(chatIO) {
this.chatIO = chatIO;
}
Expand Down