added menu to switch single/multiplayer

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} 
@@ -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/>
+    </>
   );
 }
 
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;