aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/components/MultiplayerGrid.tsx42
-rw-r--r--src/server/index.js27
2 files changed, 44 insertions, 25 deletions
diff --git a/src/components/MultiplayerGrid.tsx b/src/components/MultiplayerGrid.tsx
index 89ab564..bed926a 100644
--- a/src/components/MultiplayerGrid.tsx
+++ b/src/components/MultiplayerGrid.tsx
@@ -41,41 +41,43 @@ const MultiplayerGrid: React.FC<Props> = (props) => {
const getBoard = (index: number) => {
const newBoard: number[] = board.slice(0, index).concat(turn).concat(board.slice(index+1, 9));
- socket.emit("update-remote-data", {board: newBoard, turn: turn});
- // props.setTurn(turn === 0 ? 1 : 0);
+ socket.emit("update-remote-data", {
+ board: newBoard,
+ turn: turn,
+ scoreX: props.scoreX,
+ scoreO: props.scoreO
+ });
}
- const endGame = (winner: number) => {
- const gameWinner = winner < 2 ? (winner === 1 ? "X" : "O") : "Draw";
- props.setMessage(`WINNER: ${gameWinner}`);
+ const endGame = (data: any) => {
+ props.setMessage(
+ `${data.winner === "Data" ? "" : "WINNER: "}${data.winner}`
+ );
props.setShowMessage(true);
- console.log(gameWinner, "X: ", props.scoreX, "O: ", props.scoreO);
-
- gameWinner === "Draw" || (gameWinner === "X"
- ? props.setScoreX(props.scoreX + 1)
- : props.setScoreO(props.scoreO + 1));
+ props.setScoreX(data.scoreX);
+ props.setScoreO(data.scoreO);
- console.log(gameWinner, "X: ", props.scoreX, "O: ", props.scoreO);
- socket.emit("update-remote-data", {board: [2,2,2,2,2,2,2,2,2], turn: turn});
- winner < 2 && props.setTurn(winner); // set turn to prev. winner
+ // socket.emit messes everything up
+ // and this does the job very well
+ setBoard([2,2,2,2,2,2,2,2,2]);
+ props.setTurn(data.winner === "Draw" ? turn : (data.winner === "X" ? 1 : 0));
}
useState(() => {
socket.on("update-client-data", (data) => {
setBoard(data.board);
props.setTurn(data.turn);
+ props.setScoreX(data.score.scoreX);
+ props.setScoreO(data.score.scoreO);
});
- socket.on("set winner", (turn) => endGame(turn));
+ socket.on("update-winner", (data) => endGame(data));
});
return (
<div className="Grid">
- {
- board.map(
- (i, index) =>
- <Box key={index} index={index} sign={i} setSign={getBoard}/>
- )
- }
+ {board.map((i, index) =>
+ <Box key={index} index={index} sign={i} setSign={getBoard}/>
+ )}
</div>
);
}
diff --git a/src/server/index.js b/src/server/index.js
index 97eeecc..9013ac6 100644
--- a/src/server/index.js
+++ b/src/server/index.js
@@ -21,18 +21,35 @@ const getLeftDiagonal = (board, i = 0) =>
const getRightDiagonal = (board, i = 2) =>
i >= 0 ? [getRow(board, 2-i)[i]].concat(getRightDiagonal(board, i-1)) : [];
+const getScore = (winner, scoreX, scoreO, board) => ({
+ winner: winner < 2
+ ? (winner === 0 ? 'O' : 'X')
+ : (board.includes(2) ? undefined : 'Draw'),
+ scoreX: winner === 1 ? scoreX + 1 : scoreX,
+ scoreO: winner === 0 ? scoreO + 1 : scoreO
+})
+
io.on('connection', (socket) => {
socket.on('update-remote-data', (data) => {
console.log(data)
if (data.board.includes(0) || data.board.includes(1)) {
const rows = getRows(data.board);
- (rows.some((i) => allEqual(i))
+ const winner = (rows.some((i) => allEqual(i))
|| getCols(rows).some((i) => allEqual(i))
|| [getLeftDiagonal(data.board), getRightDiagonal(data.board)].some((i) => allEqual(i))
- ) ? io.emit('set winner', data.turn) : (data.board.includes(2) || io.emit('set draw'))
- }
- io.emit('update-client-data', {board: data.board, turn: data.turn === 0 ? 1 : 0});
- })
+ ) ? data.turn : 2;
+
+ const score = getScore(winner, data.scoreX, data.scoreO, data.board)
+ io.emit('update-client-data', {
+ board: data.board,
+ turn: data.turn === 0 ? 1 : 0,
+ score: score
+ });
+
+ score.winner && console.log("sending winner")
+ score.winner && io.emit('update-winner', score)
+ };
+ });
});
// serve static front end