From e4498c56048c44d1dae41d27c3213f94ccb027a8 Mon Sep 17 00:00:00 2001 From: MikunoNaka Date: Wed, 21 Jul 2021 23:33:04 +0530 Subject: Implemented basic connection between client and server using websockets --- src/server/index.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'src/server') diff --git a/src/server/index.js b/src/server/index.js index 2b85ea5..f8b5ca7 100644 --- a/src/server/index.js +++ b/src/server/index.js @@ -1,11 +1,19 @@ const express = require('express'); -const path = require('path'); const app = express(); +const http = require('http').Server(app); +const path = require('path'); +const io = require('socket.io')(http); app.use(express.static(path.join(__dirname, '../../build'))); +io.on('connection', (socket) => { + socket.on('update-remote-board', (board) => { + io.emit('update-client-board', board) + }) +}); + // Start the server const PORT = process.env.PORT || 5000; -app.listen(PORT, () => { +http.listen(PORT, () => { console.log(`App listening on port ${PORT}`); }); -- cgit v1.2.3 From 89ffd511000413257a54b276a23b1a931d0b22e2 Mon Sep 17 00:00:00 2001 From: MikunoNaka Date: Wed, 21 Jul 2021 23:51:04 +0530 Subject: implemented basic checking winner/draw in multiplayer --- src/server/index.js | 90 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 89 insertions(+), 1 deletion(-) (limited to 'src/server') diff --git a/src/server/index.js b/src/server/index.js index f8b5ca7..31af8c4 100644 --- a/src/server/index.js +++ b/src/server/index.js @@ -4,16 +4,104 @@ const http = require('http').Server(app); const path = require('path'); const io = require('socket.io')(http); -app.use(express.static(path.join(__dirname, '../../build'))); +const allEqual = (arr) => + arr.includes(2) ? false : arr.every(i => i === arr[0]) + +const getRow = (board, r) => board.slice(r * 3, (r * 3) + 3); +const getRows = (board, r = 0) => + r <= 2 ? [getRow(board, r)].concat(getRows(board, r+1)) : getRow(board, r) + +const getCol = (board, c) => board.map((i) => i[c]) +const getCols = (rows, c = 0) => + c < 2 ? [getCol(rows, c)].concat(getCols(rows, c+1)) : [getCol(rows, c)] + +const getLeftDiagonal = (board, i = 0) => + i < 3 ? [getRow(board, i)[i]].concat(getLeftDiagonal(board, i+1)) : []; + +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-board', (board) => { + if (board.includes(0) || board.includes(1)) { + const rows = getRows(board); + (rows.some((i) => allEqual(i)) + || getCols(rows).some((i) => allEqual(i)) + || [getLeftDiagonal(board), getRightDiagonal(board)].some((i) => allEqual(i)) + ) ? console.log("win") : (board.includes(2) || console.log("maybe draw")) + // ? endGame(turn === 0 ? 1 : 0) : (board.includes(2) || endGame(2)); + } io.emit('update-client-board', board) }) }); +// serve static front end +app.use(express.static(path.join(__dirname, '../../build'))); + // Start the server 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)); + } + }); + */ -- cgit v1.2.3 From 5f23dfc40ded0f5935843781829e67ffd5d77ab4 Mon Sep 17 00:00:00 2001 From: MikunoNaka Date: Thu, 22 Jul 2021 14:16:22 +0530 Subject: now the board and turn are handled by backend --- src/server/index.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) (limited to 'src/server') diff --git a/src/server/index.js b/src/server/index.js index 31af8c4..0fe20bb 100644 --- a/src/server/index.js +++ b/src/server/index.js @@ -43,16 +43,15 @@ const getRightDiagonal = (board, i = 2) => // }); io.on('connection', (socket) => { - socket.on('update-remote-board', (board) => { - if (board.includes(0) || board.includes(1)) { - const rows = getRows(board); + socket.on('update-remote-data', (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(board), getRightDiagonal(board)].some((i) => allEqual(i)) - ) ? console.log("win") : (board.includes(2) || console.log("maybe draw")) - // ? endGame(turn === 0 ? 1 : 0) : (board.includes(2) || endGame(2)); + || [getLeftDiagonal(data.board), getRightDiagonal(data.board)].some((i) => allEqual(i)) + ) ? io.emit('set winner') : (data.board.includes(2) || io.emit('set draw')) } - io.emit('update-client-board', board) + io.emit('update-client-data', {board: data.board, turn: data.turn === 0 ? 1 : 0}); }) }); -- cgit v1.2.3 From c3e1feffb9ac607bb73de6d4164be5fd23e41871 Mon Sep 17 00:00:00 2001 From: MikunoNaka Date: Thu, 22 Jul 2021 14:58:12 +0530 Subject: fixed wrong winner showing --- src/server/index.js | 65 ++--------------------------------------------------- 1 file changed, 2 insertions(+), 63 deletions(-) (limited to 'src/server') 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)); - } - }); - */ -- cgit v1.2.3 From 39093b0522c0f153f7f212c6b3088b359d5cb114 Mon Sep 17 00:00:00 2001 From: MikunoNaka Date: Thu, 22 Jul 2021 19:52:55 +0530 Subject: fixed score not updating --- src/server/index.js | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) (limited to 'src/server') 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 -- cgit v1.2.3 From 63abebc72240de13aa015739e2a9952ae588e4ca Mon Sep 17 00:00:00 2001 From: MikunoNaka Date: Fri, 23 Jul 2021 13:23:26 +0530 Subject: somehow made it work on multiple devices --- src/server/index.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) (limited to 'src/server') diff --git a/src/server/index.js b/src/server/index.js index 9013ac6..2799805 100644 --- a/src/server/index.js +++ b/src/server/index.js @@ -2,7 +2,15 @@ const express = require('express'); const app = express(); const http = require('http').Server(app); const path = require('path'); -const io = require('socket.io')(http); + +// const io = require('socket.io')(http); +const io = require("socket.io")(http, { + cors: { + origin: ["http://localhost:5000", "http://localhost:3000"], + "Access-Control-Allow-Origin": "*", + methods: ["GET", "POST"] + } +}); const allEqual = (arr) => arr.includes(2) ? false : arr.every(i => i === arr[0]) @@ -31,7 +39,6 @@ const getScore = (winner, scoreX, scoreO, board) => ({ 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); const winner = (rows.some((i) => allEqual(i)) @@ -42,11 +49,10 @@ io.on('connection', (socket) => { const score = getScore(winner, data.scoreX, data.scoreO, data.board) io.emit('update-client-data', { board: data.board, - turn: data.turn === 0 ? 1 : 0, + turn: score.winner ? data.turn : (data.turn === 0 ? 1 : 0), score: score }); - score.winner && console.log("sending winner") score.winner && io.emit('update-winner', score) }; }); -- cgit v1.2.3