From b204876cfd803fc115029ac6501c67657dcec19e Mon Sep 17 00:00:00 2001
From: MikunoNaka <bokuwakanojogahoshii@yahoo.com>
Date: Fri, 23 Jul 2021 17:57:49 +0530
Subject: added menu to switch single/multiplayer

---
 src/components/App.js | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

(limited to 'src/components/App.js')

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} 
@@ -64,6 +66,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/>
     </>
   );
-- 
cgit v1.2.3