diff options
| -rw-r--r-- | src/components/App.js | 31 | ||||
| -rw-r--r-- | src/components/GamemodeChooser.js | 63 | ||||
| -rw-r--r-- | src/components/MultiplayerGrid.js | 3 | ||||
| -rw-r--r-- | src/components/MultiplayerMenu.js | 40 | ||||
| -rw-r--r-- | src/components/ScoreBoard.js | 7 | ||||
| -rw-r--r-- | src/components/style.css | 2 |
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; |