Fixed styling and add prompt for player

4 files changed, 56 insertions, 19 deletions

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 141b332..6a9c60e 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -26,13 +26,14 @@ import './style.css';
 const App: React.FC = () => {
   const [scoreX, setScoreX] = useState<number>(0);
   const [scoreO, setScoreO] = useState<number>(0);
+  const [turn, setTurn] = useState<number>(0);
   const [showMessageBox, setShowMessageBox] = useState<boolean>(false);
   const [message, setMessage] = useState<string>("");
   return (
     <>
       {showMessageBox && <MessageBox message={message} setShowMessage={setShowMessageBox}/>}
-      <ScoreBoard scoreX={scoreX} scoreO={scoreO}/>
-      <Grid scoreX={scoreX} setScoreX={setScoreX} scoreO={scoreO} setScoreO={setScoreO} setMessage={setMessage} setShowMessage={setShowMessageBox}/>
+      <ScoreBoard turn={turn} scoreX={scoreX} scoreO={scoreO}/>
+      <Grid turn={turn} setTurn={setTurn} scoreX={scoreX} setScoreX={setScoreX} scoreO={scoreO} setScoreO={setScoreO} setMessage={setMessage} setShowMessage={setShowMessageBox}/>
       <Footer/>
     </>
   );
diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
index 23ab194..30bab11 100644
--- a/src/components/Grid.tsx
+++ b/src/components/Grid.tsx
@@ -21,6 +21,8 @@ import Box from './Box';
 import './style.css';
 
 interface Props {
+  turn: number
+  setTurn: Dispatch<SetStateAction<number>>
   scoreX: number
   scoreO: number
   setScoreX: Dispatch<SetStateAction<number>>
@@ -32,11 +34,11 @@ interface Props {
 const Grid: React.FC<Props> = (props) => {
   // 0 is O, 1 is X, 2 is blank
   const [board, setBoard] = useState<number[]>([2,2,2,2,2,2,2,2,2]);
-  const [turn, setTurn] = useState<number>(1);
+  const turn = props.turn;
 
   const getBoard = (index: number) => {
     setBoard(board.slice(0, index).concat(turn).concat(board.slice(index+1, 9)));
-    setTurn(turn === 1 ? 0 : 1)
+    props.setTurn(turn === 1 ? 0 : 1)
   }
 
   const allEqual = (arr: number[]) =>
@@ -64,6 +66,7 @@ const Grid: React.FC<Props> = (props) => {
       ? props.setScoreX(props.scoreX + 1)
       : props.setScoreO(props.scoreO + 1));
     setBoard([2,2,2,2,2,2,2,2,2]);
+    winner < 2 && props.setTurn(winner); // set turn to prev. winner
   }
 
   useEffect(() => {
@@ -77,7 +80,7 @@ const Grid: React.FC<Props> = (props) => {
   });
 
   return (
-    <div className="Grid">
+      <div className="Grid">
       {
         board.map(
           (i, index) => 
diff --git a/src/components/ScoreBoard.tsx b/src/components/ScoreBoard.tsx
index 6d51deb..b50af30 100644
--- a/src/components/ScoreBoard.tsx
+++ b/src/components/ScoreBoard.tsx
@@ -22,13 +22,17 @@ import './style.css';
 interface Props {
   scoreX: number
   scoreO: number
+  turn: number
 }
 
 const ScoreBoard: React.FC<Props> = (props) => {
   return (
-    <div className={"ScoreBoard"}>
-      <span>X: {props.scoreX}</span>
-      <span>O: {props.scoreO}</span>
+    <div className={"ScoreBoardContainer"}>
+      <div className={"ScoreBoard"}>
+        <span>X: {props.scoreX}</span>
+        <span>O: {props.scoreO}</span>
+      </div>
+      <div className={"turnMessage"}>-- {props.turn === 0 ? "O" : "X"}'s turn --</div>
     </div>
   );
 }
diff --git a/src/components/style.css b/src/components/style.css
index 13daabc..d305fe5 100644
--- a/src/components/style.css
+++ b/src/components/style.css
@@ -16,16 +16,30 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-body, #root {
+/*body, #root {
   margin: 0px;
   height: 100vh;
   width: 100vw;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   background-color: #232627;
   color: white;
+}*/
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #232627;
+  color: white;
+}
+
+#root {
+  position: absolute;
+  margin: auto;
+  top: 0; bottom: 0;
+  left: 0; right: 0;
 }
 
 .MessageBox {
@@ -46,13 +60,19 @@ body, #root {
   padding: 0.5rem 2rem;
 }
 
+.ScoreBoardContainer {
+  text-align: center;
+  position: relative;
+  left: 0; right: 0;
+  margin: 1rem auto;
+  width: 30rem;
+}
+
 .ScoreBoard { 
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
+  width: 100%;
   font-size: 3rem;
-  width: 20rem;
-  margin-bottom: 0.7rem;
-  margin-top: 1rem;
 }
 
 .Grid {
@@ -61,6 +81,11 @@ body, #root {
   grid-template-rows: 9rem 9rem 9rem;
   grid-row-gap: 1.5rem;
   grid-column-gap: 1.5rem;
+
+  position: relative;
+  left: 0; right: 0;
+  margin: 1rem auto;
+  width: 30rem;
 }
 
 .Box {
@@ -74,6 +99,8 @@ body, #root {
 }
 
 .Footer {
+  position: relative;
+  bottom: 0;
   width: 100%;
   padding: 0.2rem 0;
   background-color: #0f0f0f;
@@ -97,18 +124,20 @@ body, #root {
   .MessageBox {
     font-size: 4rem;
   }
+  .ScoreBoardContainer {
+    width: 20rem;
+  }
+  .ScoreBoard { 
+    font-size: 3.5rem;
+  }
   .Grid {
     grid-template-columns: 6rem 6rem 6rem;
     grid-template-rows: 6rem 6rem 6rem;
     grid-row-gap: 1.5rem;
     grid-column-gap: 1.5rem;
+    width: 21rem;
   }
   .Box {
     font-size: 6rem;
   }
-  .ScoreBoard { 
-    font-size: 3.5rem;
-    width: 16rem;
-    padding-top: 1rem;
-  }
 }