diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/App.tsx | 2 | ||||
| -rw-r--r-- | src/components/MultiplayerGrid.tsx | 8 | ||||
| -rw-r--r-- | src/server/index.js | 65 |
3 files changed, 9 insertions, 66 deletions
diff --git a/src/components/App.tsx b/src/components/App.tsx index 1f646b3..a76e3b3 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -53,7 +53,7 @@ const App: React.FC = () => { scoreO={scoreO} setScoreO={setScoreO} setMessage={setMessage} setShowMessage={setShowMessageBox} - /> : <MultiplayerGrid + /> : <Grid turn={turn} setTurn={setTurn} scoreX={scoreX} diff --git a/src/components/MultiplayerGrid.tsx b/src/components/MultiplayerGrid.tsx index 2643667..89ab564 100644 --- a/src/components/MultiplayerGrid.tsx +++ b/src/components/MultiplayerGrid.tsx @@ -16,7 +16,7 @@ * along with this program. If not, see <https://www.gnu.org/licenses/>. */ -import React, { useState, useEffect, Dispatch, SetStateAction } from 'react'; +import React, { useState/*, useEffect*/, Dispatch, SetStateAction } from 'react'; import { io } from 'socket.io-client'; import Box from './Box'; import './style.css'; @@ -49,10 +49,14 @@ const MultiplayerGrid: React.FC<Props> = (props) => { const gameWinner = winner < 2 ? (winner === 1 ? "X" : "O") : "Draw"; props.setMessage(`WINNER: ${gameWinner}`); 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)); - socket.emit("update-remote-board", [2,2,2,2,2,2,2,2,2]); + + 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 } diff --git a/src/server/index.js b/src/server/index.js index 0fe20bb..97eeecc 100644 --- a/src/server/index.js +++ b/src/server/index.js @@ -21,35 +21,15 @@ const getLeftDiagonal = (board, i = 0) => const getRightDiagonal = (board, i = 2) => i >= 0 ? [getRow(board, 2-i)[i]].concat(getRightDiagonal(board, i-1)) : []; -// const endGame = (winner: number) => { -// const gameWinner = winner < 2 ? (winner === 1 ? "X" : "O") : "Draw"; -// props.setMessage(`WINNER: ${gameWinner}`); -// props.setShowMessage(true); -// gameWinner === "Draw" || (gameWinner === "X" -// ? props.setScoreX(props.scoreX + 1) -// : props.setScoreO(props.scoreO + 1)); -// setBoard([2,2,2,2,2,2,2,2,2]); -// winner < 2 && props.setTurn(winner); // set turn to prev. winner -// } -// -// useEffect(() => { -// if (board.includes(0) || board.includes(1)) { -// const rows = getRows(); -// (rows.some((i: number[]) => allEqual(i)) -// || getCols(rows).some((i: number[]) => allEqual(i)) -// || [getLeftDiagonal(), getRightDiagonal()].some((i) => allEqual(i)) -// ) ? endGame(turn === 0 ? 1 : 0) : (board.includes(2) || endGame(2)); -// } -// }); - 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)) || getCols(rows).some((i) => allEqual(i)) || [getLeftDiagonal(data.board), getRightDiagonal(data.board)].some((i) => allEqual(i)) - ) ? io.emit('set winner') : (data.board.includes(2) || io.emit('set draw')) + ) ? 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}); }) @@ -63,44 +43,3 @@ const PORT = process.env.PORT || 5000; http.listen(PORT, () => { console.log(`App listening on port ${PORT}`); }); - - -/* - * const allEqual = (arr: number[]) => - arr.includes(2) ? false : arr.every(i => i === arr[0]) - - const getRow = (r: number) => board.slice(r * 3, (r * 3) + 3); - const getRows: any = (r: number = 0) => - r <= 2 ? [getRow(r)].concat(getRows(r+1)) : getRow(r) - - const getCol = (arr: number[][], c: number) => arr.map((i: any) => i[c]) - const getCols: any = (rows: number[][], c: number = 0) => - c < 2 ? [getCol(rows, c)].concat(getCols(rows, c+1)) : [getCol(rows, c)] - - const getLeftDiagonal: any = (i: number = 0) => - i < 3 ? [getRow(i)[i]].concat(getLeftDiagonal(i+1)) : []; - - const getRightDiagonal: any = (i: number = 2) => - i >= 0 ? [getRow(2-i)[i]].concat(getRightDiagonal(i-1)) : []; - - const endGame = (winner: number) => { - const gameWinner = winner < 2 ? (winner === 1 ? "X" : "O") : "Draw"; - props.setMessage(`WINNER: ${gameWinner}`); - props.setShowMessage(true); - gameWinner === "Draw" || (gameWinner === "X" - ? props.setScoreX(props.scoreX + 1) - : props.setScoreO(props.scoreO + 1)); - setBoard([2,2,2,2,2,2,2,2,2]); - winner < 2 && props.setTurn(winner); // set turn to prev. winner - } - - useEffect(() => { - if (board.includes(0) || board.includes(1)) { - const rows = getRows(); - (rows.some((i: number[]) => allEqual(i)) - || getCols(rows).some((i: number[]) => allEqual(i)) - || [getLeftDiagonal(), getRightDiagonal()].some((i) => allEqual(i)) - ) ? endGame(turn === 0 ? 1 : 0) : (board.includes(2) || endGame(2)); - } - }); - */ |