The-Marcy-Lab-School · carmensalas14 · Apr 24, 2020 · Apr 24, 2020 · Keyairra-S-Wright · May 2, 2020
diff --git a/tic-tac-toe-app/App.jsx b/tic-tac-toe-app/App.jsx
@@ -1,5 +1,11 @@
 const App = () => {
-	return <div>A tic-tac-toe game</div>;
+	return (
+		<div>
+			<h1>A tic-tac-toe game</h1>
+			<Board />
+		</div>
+	)
+
 };
 
 ReactDOM.render(<App />, document.querySelector('.container'));
diff --git a/tic-tac-toe-app/Board.jsx b/tic-tac-toe-app/Board.jsx
@@ -0,0 +1,87 @@
+// main board component
+function Board() {
+  // creating state for the board squares
+  const [boardSquares, setBoardSquares] = React.useState(
+    new Array(9).fill(null)
+  );
+
+  // state for the next turn
+  const [isXPlayer, setXPlayer] = React.useState(true);
+
+  // fucntion for when a sqaure is clicked
+  const whenClicked = index => {
+    // spread the items in boardSquare to new array to make a copy
+    const squares = [...boardSquares];
+    // check if square has a value
+    if (squares[index]) return;
+    // add next turn
+    squares[index] = isXPlayer ? 'X' : 'O';
+
+    // set the new state of the board squares
+    setBoardSquares(squares);
+
+    // change the state for the next turn
+    setXPlayer(!isXPlayer);
+  };
+
+  // rendering the squares using square component
+  const renderSquare = index => {
+    return (
+      <Square value={boardSquares[index]} onClick={() => whenClicked(index)} />
+    );
+  };
+
+  // create the gameStatus to determine next player and winner
+  let gameStatus;
+  const winner = findWinner(boardSquares);
+  gameStatus = winner
+    ? `Winner is ${winner}!`
+    : `It is${isXPlayer ? 'X' : 'O'}'s Turn...'`;
+
+  return (
+    <div className="board">
+      <h2 className={gameStatus}>{gameStatus}</h2>
+      <div className="boardRow">
+        {renderSquare(0)}
+        {renderSquare(1)}
+        {renderSquare(2)}
+      </div>
+      <div className="boardRow">
+        {renderSquare(3)}
+        {renderSquare(4)}
+        {renderSquare(5)}
+      </div>
+      <div className="boardRow">
+        {renderSquare(6)}
+        {renderSquare(7)}
+        {renderSquare(8)}
+      </div>
+    </div>
+  );
+}
+
+// function to determine winner
+const findWinner = (squares) => {
+  // winning combinations
+
+  const winningCombos = [
+    [0, 1, 2],
+    [3, 4, 5],
+    [6, 7, 8],
+    [0, 3, 6],
+    [1, 4, 7],
+    [2, 5, 8],
+    [0, 4, 8],
+    [2, 4, 6],
+  ];
+  for (let i = 0; i < winningCombos.length; i++) {
+    // destructure winningCombos[i] array
+    const [a, b, c] = winningCombos[i];
+    // returning x or o if squares match
+    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[b]) {
+      return squares[a];
+    }
+  }
+  // else return null
+  return null;
+}
diff --git a/tic-tac-toe-app/Square.jsx b/tic-tac-toe-app/Square.jsx
@@ -0,0 +1,7 @@
+function Square(props) {
+  return (
+    <div className="boardSquare" onClick={props.onClick}>
+      {props.value}
+    </div>
+  );
+}
diff --git a/tic-tac-toe-app/index.html b/tic-tac-toe-app/index.html
@@ -8,10 +8,12 @@
 </head>
 <body>
   <main class="container"></main>
-  
+
   <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
   <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
-  <script type="text/babel" src="app.jsx"></script>
+  <script type="text/babel" src="Board.jsx"></script>
+  <script type="text/babel" src="Square.jsx"></script>
+  <script type="text/babel" src="App.jsx"></script>
 </body>
-</html>
+</html>
diff --git a/tic-tac-toe-app/styles.css b/tic-tac-toe-app/styles.css
@@ -0,0 +1,26 @@
+.container{
+  display: flex;
+  justify-content: center;
+  text-align: center;
+
+}
+.boardSquare{
+  background-color: #d5bef3;
+  border-style:solid;
+  height:200px;
+  width:200px;
+};
+
+.board{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.boardRow{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+};