cleaned up code, added timeout, etc

3 files changed, 57 insertions, 49 deletions

diff --git a/src/components/App.js b/src/components/App.js
index 5b13230..3217782 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -35,56 +35,54 @@ const App = () => {
   const [isHost, setIsHost] = useState(false);
   const [joinCode, setJoinCode] = useState();
 
-  return gameStarted ? (
+  return (
     <>
-      {showMessageBox && 
-        <MessageBox 
-          message={message} 
-          setShowMessage={setShowMessageBox}
-        />
-      }
+      {gameStarted ?
+        <>
+          {showMessageBox &&
+            <MessageBox
+              message={message}
+              setShowMessage={setShowMessageBox}
+            />
+          }
 
-      <ScoreBoard 
-        turn={turn} 
-        scoreX={scoreX} 
-        scoreO={scoreO}
-        multiplayer={multiplayer}
-        isHost={isHost}
-      />
+          <ScoreBoard
+            turn={turn}
+            scoreX={scoreX}
+            scoreO={scoreO}
+            multiplayer={multiplayer}
+            isHost={isHost}
+          />
 
-      {multiplayer ? <MultiplayerGrid 
-          turn={turn} 
-          isHost={isHost}
-          setTurn={setTurn} 
-          scoreX={scoreX} 
-          setScoreX={setScoreX} 
-          scoreO={scoreO} 
-          setScoreO={setScoreO} 
-          setMessage={setMessage} 
-          setShowMessage={setShowMessageBox}
-          joinCode={joinCode}
-        /> : <Grid 
-          turn={turn} 
-          setTurn={setTurn} 
-          scoreX={scoreX} 
-          setScoreX={setScoreX} 
-          scoreO={scoreO} 
-          setScoreO={setScoreO} 
-          setMessage={setMessage} 
-          setShowMessage={setShowMessageBox}
+          {multiplayer ? <MultiplayerGrid
+              turn={turn}
+              isHost={isHost}
+              setTurn={setTurn}
+              scoreX={scoreX}
+              setScoreX={setScoreX}
+              scoreO={scoreO}
+              setScoreO={setScoreO}
+              setMessage={setMessage}
+              setShowMessage={setShowMessageBox}
+              joinCode={joinCode}
+            /> : <Grid
+              turn={turn}
+              setTurn={setTurn}
+              scoreX={scoreX}
+              setScoreX={setScoreX}
+              scoreO={scoreO}
+              setScoreO={setScoreO}
+              setMessage={setMessage}
+              setShowMessage={setShowMessageBox}
+            />
+          }
+        </> : <GamemodeChooser
+          setMultiplayer={setMultiplayer}
+          setGameStarted={setGameStarted}
+          setIsHost={setIsHost}
+          setJoinCode={setJoinCode}
         />
       }
-
-      <Footer/>
-    </>
-  ) : (
-    <>
-      <GamemodeChooser
-        setMultiplayer={setMultiplayer}
-        setGameStarted={setGameStarted}
-        setIsHost={setIsHost}
-        setJoinCode={setJoinCode}
-      />
       <Footer/>
     </>
   );
diff --git a/src/components/MultiplayerGrid.js b/src/components/MultiplayerGrid.js
index 7cd3835..4260e9b 100644
--- a/src/components/MultiplayerGrid.js
+++ b/src/components/MultiplayerGrid.js
@@ -21,7 +21,7 @@ import { io } from 'socket.io-client';
 import Box from './Box';
 import './style.css';
 
-const socket = io("http://localhost:5000");
+const socket = io("https://ttt.vidhukant.com/api");
 
 const MultiplayerGrid = (props) => {
   // 0 is O, 1 is X, 2 is blank
@@ -36,9 +36,16 @@ const MultiplayerGrid = (props) => {
   // host/join room
   useEffect(() => {
     if (isHost) {
+      const timeout = setTimeout(() => {
+        setMessage("Server Timed Out After 5 Seconds");
+        setShowMessage(true);
+        setTimeout(() => window.location.reload(), 3000)
+      }, 5000);
+
       socket.emit("host");
 
       socket.on("broadcast code", (code) => {
+        clearTimeout(timeout);
         setMessage(`Game Code: ${code}`);
         setShowMessage(true);
       });
@@ -47,7 +54,7 @@ const MultiplayerGrid = (props) => {
         setMessage("Opponent Joined")
         setShowMessage(true)
         setTimeout(() => setShowMessage(false), 3000)
-      })
+      });
     } else {
       socket.emit("join", joinCode);
 
diff --git a/src/components/style.css b/src/components/style.css
index 79ef49e..ade1d46 100644
--- a/src/components/style.css
+++ b/src/components/style.css
@@ -35,8 +35,8 @@ body {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 90%;
-  width: 100%;
+  height: calc(100vh - 6rem);
+  width: 100vw;
 }
 
 .GamemodeChooser .GamemodeButton {
@@ -72,6 +72,7 @@ body {
   left: 0; right: 0;
   margin: 1rem auto;
   width: 30rem;
+  min-height: 9rem;
 }
 
 .ScoreBoard { 
@@ -82,6 +83,7 @@ body {
 }
 
 .Grid {
+  height: calc(100vh - 17rem);
   display: grid;
   grid-template-columns: 9rem 9rem 9rem;
   grid-template-rows: 9rem 9rem 9rem;
@@ -105,6 +107,7 @@ body {
 }
 
 .Footer {
+  min-height: 6rem;
   position: relative;
   bottom: 0;
   width: 100%;