added menu to switch single/multiplayer

1 files changed, 24 insertions, 3 deletions

diff --git a/src/components/App.js b/src/components/App.js
index 353e464..f10b5eb 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -24,13 +24,15 @@ import Footer from './Footer';
 import './style.css';
 
 const App = () => {
+  const [gameStarted, setGameStarted] = useState(false);
+  const [multiplayer, setMultiplayer] = useState(false);
   const [scoreX, setScoreX] = useState(0);
   const [scoreO, setScoreO] = useState(0);
   const [turn, setTurn] = useState(1);
   const [showMessageBox, setShowMessageBox] = useState(false);
   const [message, setMessage] = useState("");
-  const mp = true;
-  return (
+
+  return gameStarted ? (
     <>
       {showMessageBox && 
         <MessageBox 
@@ -45,7 +47,7 @@ const App = () => {
         scoreO={scoreO}
       />
 
-      {mp ? <MultiplayerGrid 
+      {multiplayer ? <MultiplayerGrid 
           turn={turn} 
           setTurn={setTurn} 
           scoreX={scoreX} 
@@ -66,6 +68,25 @@ const App = () => {
 
       <Footer/>
     </>
+  ) : (
+    <>
+      <div className={"GamemodeChooser"}>
+        <div className={"GamemodeButton"} onClick={() => {
+          setGameStarted(true);
+          setMultiplayer(false);
+        }}>
+          SINGLE PLAYER
+        </div>
+
+        <div className={"GamemodeButton"} onClick={() => {
+          setGameStarted(true);
+          setMultiplayer(true);
+        }}>
+          MULTIPLAYER
+        </div>
+      </div>
+      <Footer/>
+    </>
   );
 }