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 ++++++++++++++++++++++++---
 src/components/style.css | 30 ++++++++++++++++++------------
 2 files changed, 42 insertions(+), 15 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} 
@@ -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/>
     </>
   );
diff --git a/src/components/style.css b/src/components/style.css
index d33d775..3baf6d5 100644
--- a/src/components/style.css
+++ b/src/components/style.css
@@ -16,18 +16,6 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/*body, #root {
-  margin: 0px;
-  height: 100vh;
-  width: 100vw;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  background-color: #232627;
-  color: white;
-}*/
-
 body {
   margin: 0;
   padding: 0;
@@ -42,6 +30,24 @@ body {
   left: 0; right: 0;
 }
 
+.GamemodeChooser {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 90%;
+  width: 100%;
+}
+
+.GamemodeChooser div {
+  border: 1px solid #5b76b7;
+  text-align: center;
+  font-size: 1.5rem;
+  padding: 0.5rem 0;
+  width: 15rem;
+  margin: 1rem;
+}
+
 .MessageBox {
   font-size: 7rem;
   display: flex;
-- 
cgit v1.2.3