From d43fa3768c5e9eee06c0af3b093c84aa38aedbf8 Mon Sep 17 00:00:00 2001 From: MikunoNaka Date: Sat, 31 Jul 2021 20:06:30 +0530 Subject: Added basic rooms support --- src/components/MultiplayerGrid.js | 12 +++++++++++- src/server/index.js | 39 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 50 insertions(+), 1 deletion(-) diff --git a/src/components/MultiplayerGrid.js b/src/components/MultiplayerGrid.js index 88a8259..3db9dc6 100644 --- a/src/components/MultiplayerGrid.js +++ b/src/components/MultiplayerGrid.js @@ -28,9 +28,19 @@ const MultiplayerGrid = (props) => { const [board, setBoard] = useState([2,2,2,2,2,2,2,2,2]); const turn = props.turn; + const isHost = props.isHost; + useEffect(() => { + if (isHost) { + socket.emit("host"); + socket.on("set-host-id", (id) => alert(id)); + } else { + socket.emit("join", prompt("Enter ID")); + } + }, [isHost]); + const getBoard = (index) => { // if it's not your turn you can't play - if ((turn === 0) === props.isHost) return; + if ((turn === 0) === isHost) return; const newBoard = board.slice(0, index).concat(turn).concat(board.slice(index+1, 9)); socket.emit("update-remote-data", { diff --git a/src/server/index.js b/src/server/index.js index 2799805..c770e15 100644 --- a/src/server/index.js +++ b/src/server/index.js @@ -37,6 +37,8 @@ const getScore = (winner, scoreX, scoreO, board) => ({ scoreO: winner === 0 ? scoreO + 1 : scoreO }) +// old WORKING code +/* io.on('connection', (socket) => { socket.on('update-remote-data', (data) => { if (data.board.includes(0) || data.board.includes(1)) { @@ -57,6 +59,43 @@ io.on('connection', (socket) => { }; }); }); +*/ + +const getID = () => Math.floor(1000 + Math.random() * 9000); + +io.on('connection', (socket) => { + socket.on('host', () => { + const id = (`${getID()}`); + socket.join(id); + io.to(id).emit('set-host-id', id) + }); + + socket.on('join', (id) => { + socket.join(id) + // TODO: send confirmation + }); + + socket.on('update-remote-data', (data) => { + const room = Array.from(socket.rooms)[1] + + if (data.board.includes(0) || data.board.includes(1)) { + const rows = getRows(data.board); + const winner = (rows.some((i) => allEqual(i)) + || getCols(rows).some((i) => allEqual(i)) + || [getLeftDiagonal(data.board), getRightDiagonal(data.board)].some((i) => allEqual(i)) + ) ? data.turn : 2; + + const score = getScore(winner, data.scoreX, data.scoreO, data.board) + io.to(room).emit('update-client-data', { + board: data.board, + turn: score.winner ? data.turn : (data.turn === 0 ? 1 : 0), + score: score + }); + + score.winner && io.to(room).emit('update-winner', score) + }; + }); +}); // serve static front end app.use(express.static(path.join(__dirname, '../../build'))); -- cgit v1.2.3 From 4766a5d0caac22453ab99f386d80c6c132407904 Mon Sep 17 00:00:00 2001 From: MikunoNaka Date: Sun, 1 Aug 2021 01:52:33 +0530 Subject: Added protection against duplicate room codes --- src/components/MultiplayerGrid.js | 24 ++++++++++++++---- src/server/index.js | 52 +++++++++++++++------------------------ 2 files changed, 39 insertions(+), 37 deletions(-) diff --git a/src/components/MultiplayerGrid.js b/src/components/MultiplayerGrid.js index 3db9dc6..5954afa 100644 --- a/src/components/MultiplayerGrid.js +++ b/src/components/MultiplayerGrid.js @@ -26,17 +26,31 @@ const socket = io("http://localhost:5000"); const MultiplayerGrid = (props) => { // 0 is O, 1 is X, 2 is blank const [board, setBoard] = useState([2,2,2,2,2,2,2,2,2]); - const turn = props.turn; + const turn = props.turn; const isHost = props.isHost; + const setMessage = props.setMessage; + const setShowMessage = props.setShowMessage; + useEffect(() => { if (isHost) { socket.emit("host"); - socket.on("set-host-id", (id) => alert(id)); + + socket.on("broadcast code", (code) => { + setMessage(`Game Code: ${code}`); + setShowMessage(true); + }); + + socket.on('user joined', () => { + setMessage("Opponent Joined") + setShowMessage(true) + setTimeout(() => setShowMessage(false), 3000) + }) } else { socket.emit("join", prompt("Enter ID")); + socket.on("join fail", () => alert("join fail")); } - }, [isHost]); + }, [isHost, setMessage, setShowMessage]); const getBoard = (index) => { // if it's not your turn you can't play @@ -52,10 +66,10 @@ const MultiplayerGrid = (props) => { } const endGame = (data) => { - props.setMessage( + setMessage( `${data.winner === "Data" ? "" : "WINNER: "}${data.winner}` ); - props.setShowMessage(true); + setShowMessage(true); props.setScoreX(data.scoreX); props.setScoreO(data.scoreO); diff --git a/src/server/index.js b/src/server/index.js index c770e15..a4c9c5c 100644 --- a/src/server/index.js +++ b/src/server/index.js @@ -12,6 +12,20 @@ const io = require("socket.io")(http, { } }); +// also checks for duplicates +const getCode = () => { + const code = `${Math.floor(1000 + Math.random() * 9000)}`; + + const connectedSockets = []; + io.sockets.sockets.forEach( + (i) => connectedSockets.push(i) + ); + + return connectedSockets.some( + (i) => Array.from(i.rooms)[1] === code + ) ? getCode() : code; +} + const allEqual = (arr) => arr.includes(2) ? false : arr.every(i => i === arr[0]) @@ -37,42 +51,16 @@ const getScore = (winner, scoreX, scoreO, board) => ({ scoreO: winner === 0 ? scoreO + 1 : scoreO }) -// old WORKING code -/* -io.on('connection', (socket) => { - socket.on('update-remote-data', (data) => { - if (data.board.includes(0) || data.board.includes(1)) { - const rows = getRows(data.board); - const winner = (rows.some((i) => allEqual(i)) - || getCols(rows).some((i) => allEqual(i)) - || [getLeftDiagonal(data.board), getRightDiagonal(data.board)].some((i) => allEqual(i)) - ) ? data.turn : 2; - - const score = getScore(winner, data.scoreX, data.scoreO, data.board) - io.emit('update-client-data', { - board: data.board, - turn: score.winner ? data.turn : (data.turn === 0 ? 1 : 0), - score: score - }); - - score.winner && io.emit('update-winner', score) - }; - }); -}); -*/ - -const getID = () => Math.floor(1000 + Math.random() * 9000); - io.on('connection', (socket) => { socket.on('host', () => { - const id = (`${getID()}`); - socket.join(id); - io.to(id).emit('set-host-id', id) + const code = getCode(); + socket.join(code); + io.to(code).emit('broadcast code', code); }); - socket.on('join', (id) => { - socket.join(id) - // TODO: send confirmation + socket.on('join', (code) => { + socket.join(code); + io.to(code).emit('user joined'); }); socket.on('update-remote-data', (data) => { -- cgit v1.2.3 From 1a40b90e29dc61ed28ad251b49e9175a2215c3d0 Mon Sep 17 00:00:00 2001 From: MikunoNaka Date: Sun, 1 Aug 2021 02:09:41 +0530 Subject: added functionality to detect incorrect room code --- src/components/MultiplayerGrid.js | 11 +++++++++-- src/server/index.js | 23 ++++++++++++++++------- 2 files changed, 25 insertions(+), 9 deletions(-) diff --git a/src/components/MultiplayerGrid.js b/src/components/MultiplayerGrid.js index 5954afa..7c00f17 100644 --- a/src/components/MultiplayerGrid.js +++ b/src/components/MultiplayerGrid.js @@ -32,6 +32,7 @@ const MultiplayerGrid = (props) => { const setMessage = props.setMessage; const setShowMessage = props.setShowMessage; + // host/join room useEffect(() => { if (isHost) { socket.emit("host"); @@ -41,14 +42,20 @@ const MultiplayerGrid = (props) => { setShowMessage(true); }); - socket.on('user joined', () => { + socket.on("player joined", () => { setMessage("Opponent Joined") setShowMessage(true) setTimeout(() => setShowMessage(false), 3000) }) } else { socket.emit("join", prompt("Enter ID")); - socket.on("join fail", () => alert("join fail")); + + // error if room doesn't exist + socket.on("join failed", () => { + setMessage("Error: room not found") + setShowMessage(true) + setTimeout(() => window.location.reload(), 3000) + }); } }, [isHost, setMessage, setShowMessage]); diff --git a/src/server/index.js b/src/server/index.js index a4c9c5c..5eeff99 100644 --- a/src/server/index.js +++ b/src/server/index.js @@ -12,20 +12,24 @@ const io = require("socket.io")(http, { } }); -// also checks for duplicates -const getCode = () => { - const code = `${Math.floor(1000 + Math.random() * 9000)}`; - +// check if room exists +const checkCode = (code) => { const connectedSockets = []; io.sockets.sockets.forEach( (i) => connectedSockets.push(i) ); + // returns true if room exists return connectedSockets.some( (i) => Array.from(i.rooms)[1] === code - ) ? getCode() : code; + ); } +// generate new room code +// also checks for duplicates +const getCode = (code = `${Math.floor(1000 + Math.random() * 9000)}`) => + checkCode(code) ? getCode : code; + const allEqual = (arr) => arr.includes(2) ? false : arr.every(i => i === arr[0]) @@ -59,8 +63,13 @@ io.on('connection', (socket) => { }); socket.on('join', (code) => { - socket.join(code); - io.to(code).emit('user joined'); + if (checkCode(code)) { + socket.join(code); + io.to(code).emit('player joined'); + } else { + // error if room doesn't exist + socket.emit('join failed') + } }); socket.on('update-remote-data', (data) => { -- cgit v1.2.3 From b8babd592b60b1a2cfedac3956184207a3d4bb8d Mon Sep 17 00:00:00 2001 From: MikunoNaka Date: Sun, 1 Aug 2021 02:34:59 +0530 Subject: created menu entry to enter join code --- src/components/App.js | 3 +++ src/components/GamemodeChooser.js | 1 + src/components/MultiplayerGrid.js | 5 +++-- src/components/MultiplayerMenu.js | 45 ++++++++++++++++++++++++++++----------- src/server/index.js | 8 +++++-- 5 files changed, 46 insertions(+), 16 deletions(-) diff --git a/src/components/App.js b/src/components/App.js index db5af1b..5b13230 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -33,6 +33,7 @@ const App = () => { const [showMessageBox, setShowMessageBox] = useState(false); const [message, setMessage] = useState(""); const [isHost, setIsHost] = useState(false); + const [joinCode, setJoinCode] = useState(); return gameStarted ? ( <> @@ -61,6 +62,7 @@ const App = () => { setScoreO={setScoreO} setMessage={setMessage} setShowMessage={setShowMessageBox} + joinCode={joinCode} /> : { setMultiplayer={setMultiplayer} setGameStarted={setGameStarted} setIsHost={setIsHost} + setJoinCode={setJoinCode} />