diff options
-rw-r--r-- | src/components/MultiplayerGrid.js | 24 | ||||
-rw-r--r-- | 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) => { |