added functionality to detect incorrect room code

1 files changed, 9 insertions, 2 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]);