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 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'src/components') 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", { -- 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 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) (limited to 'src/components') 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); -- 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 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) (limited to 'src/components') 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]); -- 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 ++++++++++++++++++++++++++++----------- 4 files changed, 40 insertions(+), 14 deletions(-) (limited to 'src/components') 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} />