diff --git a/client/src/pages/game/GamePrompt.js b/client/src/pages/game/GamePrompt.js index c283967..26a230f 100644 --- a/client/src/pages/game/GamePrompt.js +++ b/client/src/pages/game/GamePrompt.js @@ -1,10 +1,25 @@ -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 [timer, setTimer] = useState(null); + const [countDown, setCountDown] = useState(null); + + useEffect(() => { + setCountDown(Math.floor((gameState.timeEnd - Date.now()) / 1000)); + }, [gameState.timeEnd]); + + useEffect(() => { + clearTimeout(timer); + if (countDown > 0) { + setTimer(setTimeout(() => setCountDown(countDown - 1), 1000)); + } + },[countDown]); + + return ( @@ -14,7 +29,7 @@ function GamePrompt({ gameState, player }) { - 45s left + {gameState.winner ? 0 : countDown}s left diff --git a/server/engine/Game.js b/server/engine/Game.js index 7139975..8a3589f 100644 --- a/server/engine/Game.js +++ b/server/engine/Game.js @@ -13,7 +13,7 @@ const TEAM_ROLE = { }; const DEFAULT_RED_TEAM_STATE = [ - { team: TeamColor.RED, role: TEAM_ROLE.SPYMASTER, user: null }, + { team: TeamColor.RED, role: TEAM_ROLE.SPYMASTER, user: null}, { team: TeamColor.RED, role: TEAM_ROLE.FIELD_AGENT, user: null }, { team: TeamColor.RED, role: TEAM_ROLE.FIELD_AGENT, user: null }, { team: TeamColor.RED, role: TEAM_ROLE.FIELD_AGENT, user: null }, @@ -27,6 +27,7 @@ const DEFAULT_BLUE_TEAM_STATE = [ ]; const MAX_NUM_OF_GUESSES = 25; +const TIME_INTERVAL = 46; class Game { constructor(hostId) { @@ -41,10 +42,11 @@ 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; - + this.timer = null; + this.timeEnd = null; this.gameBoard = new Board(); } @@ -104,6 +106,7 @@ class Game { gameBoard: { blueAgentNum, cards, redAgentNum }, numGuessLeft: this.numGuessLeft, winner: this.winner, + timeEnd: this.timeEnd }; } @@ -120,14 +123,19 @@ class Game { setWinner(team) { this.winner = team; } - setRedTeam(team) { this.redTeam = team; } - setBlueTeam(team) { this.blueTeam = team; } + setTimer(timer) { + this.timer = timer; + } + setTimeEnd() { + this.timeEnd = Date.now() + TIME_INTERVAL * 1000; + } + vote(data) { switch (data.player.team) { @@ -255,48 +263,29 @@ class Game { return false; } - stopGuess() { - switch (this.gameTurn) { - case GameTurns.BLUE_AGENT_TURN: - this.setNumGuessLeft = 0; - this.setGameTurn(GameTurns.RED_SPY_TURN); - break; - case GameTurns.RED_AGENT_TURN: - this.setNumGuessLeft = 0; - this.setGameTurn(GameTurns.BLUE_SPY_TURN); - break; - } - } 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()) ]; this.winner = null; + this.timeEnd = null; + clearInterval(this.timer); + } + + startTimerInterval(gameIO, matchId) { + clearInterval(this.timer); + this.setTimeEnd(); + this.setTimer(setInterval(() => { + this.setTimeEnd(); + this.nextGameTurn(); + gameIO.to(matchId).emit("game state change", this.getGameState()); + }, TIME_INTERVAL * 1000)); } } module.exports = Game; -// const newGame = new Game("user1"); -// newGame.giveHint(1); -// newGame.nextGameTurn(); -// console.log("============game Turn============\n", newGame.getGameState().gameTurn); -// newGame.vote({ index: 0, player: { name: "user1", team: "Red", id: "id_1" } }); -// newGame.vote({ index: 1, player: { name: "user2", team: "Red", id: "id_2" } }); -// newGame.vote({ index: 1, player: { name: "user1", team: "Red", id: "id_1" } }); -// newGame.vote({ index: 2, player: { name: "user2", team: "Red", id: "id_2" } }); -// newGame.nextGameTurn(); -// console.log( -// "=============cards===========\n", -// newGame.getGameState().gameBoard.getCards()[0], "index 0\n", -// newGame.getGameState().gameBoard.getCards()[1], "index 1\n", -// newGame.getGameState().gameBoard.getCards()[2], "index 2\n" -// ); -// console.log("============points============\n", "red points", newGame.getRedPoints(), "blue points", newGame.getBluePoints()); -// console.log("=============game Turn=========\n", newGame.getGameTurn()); -// newGame.giveHint(3); -// newGame.nextGameTurn(); diff --git a/server/socket_io/GameIO.js b/server/socket_io/GameIO.js index 9aefd45..1f6e85f 100644 --- a/server/socket_io/GameIO.js +++ b/server/socket_io/GameIO.js @@ -2,7 +2,6 @@ const NAMESPACE = "/game"; const MatchManager = require("../manager/MatchManager"); let connection = null; -let countdown = 30; class GameIO { constructor() { @@ -33,7 +32,10 @@ class GameIO { }); socket.on("game start", (matchId) => { + const match = MatchManager.getMatch(matchId); + match.startTimerInterval(this.gameIO, matchId); this.gameIO.to(matchId).emit("resolve start game"); + socket.emit("game state change", match.getGameState()); }); socket.on("game state onload", (matchId) => { @@ -44,14 +46,10 @@ 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(); + match.startTimerInterval(this.gameIO, matchId); this.gameIO.to(matchId).emit("game state change", match.getGameState()); }); @@ -116,6 +114,7 @@ class GameIO { if (match) { match.resetGame(); + match.startTimerInterval(this.gameIO, matchId); this.gameIO .to(matchId) .emit("game state change", match.getGameState());