Added menu to host/join game and protection against cheating

6 files changed, 127 insertions, 19 deletions

diff --git a/src/components/App.js b/src/components/App.js
index f10b5eb..db5af1b 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -16,6 +16,7 @@
  */
 
 import React, { useState } from 'react';
+import GamemodeChooser from './GamemodeChooser';
 import MessageBox from './MessageBox';
 import ScoreBoard from './ScoreBoard';
 import Grid from './Grid';
@@ -31,6 +32,7 @@ const App = () => {
   const [turn, setTurn] = useState(1);
   const [showMessageBox, setShowMessageBox] = useState(false);
   const [message, setMessage] = useState("");
+  const [isHost, setIsHost] = useState(false);
 
   return gameStarted ? (
     <>
@@ -45,14 +47,18 @@ const App = () => {
         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} 
+          scoreO={scoreO} 
+          setScoreO={setScoreO} 
           setMessage={setMessage} 
           setShowMessage={setShowMessageBox}
         /> : <Grid 
@@ -60,7 +66,8 @@ const App = () => {
           setTurn={setTurn} 
           scoreX={scoreX} 
           setScoreX={setScoreX} 
-          scoreO={scoreO} setScoreO={setScoreO} 
+          scoreO={scoreO} 
+          setScoreO={setScoreO} 
           setMessage={setMessage} 
           setShowMessage={setShowMessageBox}
         />
@@ -70,21 +77,11 @@ const App = () => {
     </>
   ) : (
     <>
-      <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>
+      <GamemodeChooser
+        setMultiplayer={setMultiplayer}
+        setGameStarted={setGameStarted}
+        setIsHost={setIsHost}
+      />
       <Footer/>
     </>
   );
diff --git a/src/components/GamemodeChooser.js b/src/components/GamemodeChooser.js
new file mode 100644
index 0000000..91010e4
--- /dev/null
+++ b/src/components/GamemodeChooser.js
@@ -0,0 +1,63 @@
+/*
+ * Tic Tac Toe - Minimalistic Tic Tac Toe
+ * Copyright (C) 2021  Vidhu Kant Sharma
+ * 
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import React, { useState } from 'react';
+import MultiplayerMenu from './MultiplayerMenu';
+import './style.css';
+
+const GamemodeChooser = (props) => {
+  const [showMPMenu, setShowMPMenu] = useState(false);
+
+  return (
+    <div className={"GamemodeChooser"}>
+      {showMPMenu ||
+        <>
+          <div className={"GamemodeButton"} onClick={() => {
+            props.setGameStarted(true);
+            props.setMultiplayer(false);
+          }}>
+            SINGLE PLAYER
+          </div>
+
+          <div className={"GamemodeButton"} onClick={() => {
+            setShowMPMenu(true);
+            props.setMultiplayer(true);
+          }}>
+            MULTIPLAYER (beta)
+          </div>
+        </>
+      }
+
+      {showMPMenu &&
+        <>
+          <MultiplayerMenu
+            setIsHost={props.setIsHost}
+            setGameStarted={props.setGameStarted}
+          />
+
+          <div className={"GamemodeButton"} onClick={() => {
+            setShowMPMenu(false);
+          }}>
+            GO BACK
+          </div>
+        </>
+      }
+    </div>
+  );
+}
+
+export default GamemodeChooser;
diff --git a/src/components/MultiplayerGrid.js b/src/components/MultiplayerGrid.js
index d26fb31..88a8259 100644
--- a/src/components/MultiplayerGrid.js
+++ b/src/components/MultiplayerGrid.js
@@ -29,6 +29,9 @@ const MultiplayerGrid = (props) => {
   const turn = props.turn;
 
   const getBoard = (index) => {
+    // if it's not your turn you can't play
+    if ((turn === 0) === props.isHost) return;
+
     const newBoard = board.slice(0, index).concat(turn).concat(board.slice(index+1, 9));
     socket.emit("update-remote-data", {
       board: newBoard, 
diff --git a/src/components/MultiplayerMenu.js b/src/components/MultiplayerMenu.js
new file mode 100644
index 0000000..1dfe9dd
--- /dev/null
+++ b/src/components/MultiplayerMenu.js
@@ -0,0 +1,40 @@
+/*
+ * Tic Tac Toe - Minimalistic Tic Tac Toe
+ * Copyright (C) 2021  Vidhu Kant Sharma
+ * 
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+import './style.css';
+
+const MultiplayerMenu = (props) => {
+  return (
+    <div className={"MultiplayerMenu"}>
+      <div className={"GamemodeButton"} onClick={() => {
+        props.setIsHost(true);
+        props.setGameStarted(true);
+      }}>
+        HOST GAME
+      </div>
+
+      <div className={"GamemodeButton"} onClick={() => {
+        props.setGameStarted(true);
+      }}>
+        JOIN GAME
+      </div>
+    </div>
+  );
+}
+
+export default MultiplayerMenu;
diff --git a/src/components/ScoreBoard.js b/src/components/ScoreBoard.js
index 164c69e..d393285 100644
--- a/src/components/ScoreBoard.js
+++ b/src/components/ScoreBoard.js
@@ -26,7 +26,12 @@ const ScoreBoard = (props) => {
         <span>X: {props.scoreX}</span>
         <span>O: {props.scoreO}</span>
       </div>
-      <div className={"turnMessage"}>-- {props.turn === 0 ? "O" : "X"}'s turn --</div>
+      <div className={"turnMessage"}>
+        -- 
+        {` ${props.turn === 0 ? "O" : "X"}'s turn `}
+        {props.multiplayer && ` (You are ${props.isHost ? "'X'" : "'O'"}) `}
+        --
+      </div>
     </div>
   );
 }
diff --git a/src/components/style.css b/src/components/style.css
index 3baf6d5..79ef49e 100644
--- a/src/components/style.css
+++ b/src/components/style.css
@@ -39,7 +39,7 @@ body {
   width: 100%;
 }
 
-.GamemodeChooser div {
+.GamemodeChooser .GamemodeButton {
   border: 1px solid #5b76b7;
   text-align: center;
   font-size: 1.5rem;