added scoreboard with use of usecontext

tic-tac-toe-app/App.js

@@ -0,0 +1,18 @@
+const container = document.querySelector('.container')
+
+
+
+const App = () => {
+  return (
+    <div>
+      <h1>A tic-tac-toe game</h1>
+      <ScoreProvider>
+        <Board />
+        <ScoreBoard />
+      </ScoreProvider>
+    </div>
+  )
+}
+
+
+ReactDOM.render(<App />, container);

tic-tac-toe-app/README.md

@@ -0,0 +1,6 @@
+# React-Tac-Toe w/ Hooks
+An exploration of the Hook
+
+## Instructions
+1. Run `npm start`
+2. View on `http://localhost:5000`

tic-tac-toe-app/components/Scoreboard.jsx

@@ -0,0 +1,13 @@
+const ScoreBoard = () => {
+  const [score, setScore] =  React.useContext(ScoreContext)
+  return(
+      <div className="ScoreBoard">
+        <div className="playerOneScore">
+          <h2>Player One Score (X): {score.playerOne}</h2>
+        </div>
+        <div className="playerTwoScore">
+          <h2>Player Two Score (O): {score.playerTwo}</h2>
+        </div>
+      </div>
+    )
+}

tic-tac-toe-app/components/board.jsx

@@ -0,0 +1,121 @@
+const game = new Game()
+
+const Board = () => {
+  const [score, setScore] =  React.useContext(ScoreContext)
+
+  const [box1, setBox1] = React.useState("")
+  const [box2, setBox2] = React.useState("")
+  const [box3, setBox3] = React.useState("")
+  const [box4, setBox4] = React.useState("")
+  const [box5, setBox5] = React.useState("")
+  const [box6, setBox6] = React.useState("")
+  const [box7, setBox7] = React.useState("")
+  const [box8, setBox8] = React.useState("")
+  const [box9, setBox9] = React.useState("")
+
+  const move = (e) => {
+
+    const clearBoard = () => {
+      for(let square in boxStates){
+        boxStates[square]("")
+
+      }
+      game.checkBoard(game.turn)
+      game.turn = 1
+
+    }
+
+    const boxStates = {
+      box1: setBox1,
+      box2: setBox2,
+      box3: setBox3,
+      box4: setBox4,
+      box5: setBox5,
+      box6: setBox6,
+      box7: setBox7,
+      box8: setBox8,
+      box9: setBox9,
+    }
+    const box = e.target.id
+    if(game.turn % 2 !== 0){
+      boxStates[box](<PlayerOne/>)
+      document.getElementById(box).removeAttribute("onClick");
+      game.playerOne.makeMove(parseInt(box[3]) - 1)
+
+      if(game.checkBoard(game.turn) === "Game Over"){
+
+        setScore(() => {
+          return {
+            playerOne: score.playerOne + 1,
+            playerTwo: score.playerTwo
+          }
+        })
+        clearBoard()
+      }
+      if(game.checkBoard(game.turn) === "Game Tie"){
+
+        setScore(() => {
+          return {
+            playerOne: score.playerOne,
+            playerTwo: score.playerTwo
+          }
+        })
+        clearBoard()
+      }
+
+      game.turn += 1
+      return game.turn
+    }
+    if(game.turn % 2 === 0){
+      boxStates[box](<PlayerTwo/>)
+      document.getElementById(box).removeAttribute("onClick");
+
+      game.playerTwo.makeMove(parseInt(box[3]) - 1)
+
+     if(game.checkBoard(game.turn) === "Game Over"){
+
+        setScore(() => {
+          return {
+            playerOne: score.playerOne,
+            playerTwo: score.playerTwo + 1
+          }
+        })
+        clearBoard()
+      }
+      if(game.checkBoard(game.turn) === "Game Tie"){
+
+        setScore(() => {
+          return {
+            playerOne: score.playerOne,
+            playerTwo: score.playerTwo
+          }
+        })
+        clearBoard()
+      }
+
+      game.turn += 1
+      return game.turn
+    }
+  }
+  return (
+    <div>
+      <section className="row">
+        <div onClick={(e) => move(e)} className="box" id="box1">{box1}</div>
+        <div onClick={(e) => move(e)} className="box" id="box2">{box2}</div>
+        <div onClick={(e) => move(e)} className="box" id="box3">{box3}</div>
+      </section>
+      <section className="row">
+        <div onClick={(e) => move(e)} className="box" id="box4">{box4}</div>
+        <div onClick={(e) => move(e)} className="box" id="box5">{box5}</div>
+        <div onClick={(e) => move(e)} className="box" id="box6">{box6}</div>
+      </section>
+      <section className="row">
+        <div onClick={(e) => move(e)} className="box" id="box7">{box7}</div>
+        <div onClick={(e) => move(e)} className="box" id="box8">{box8}</div>
+        <div onClick={(e) => move(e)} className="box" id="box9">{box9}</div>
+      </section>
+    </div>
+  )
+}
+
+

tic-tac-toe-app/components/players.jsx

@@ -0,0 +1,11 @@
+const PlayerOne = () => {
+  return (
+      <div className="x-icon">X</div>
+    )
+}
+
+const PlayerTwo = () => {
+  return (
+      <div className="o-icon">O</div>
+    )
+}

tic-tac-toe-app/contexts/ScoreContext.jsx

@@ -0,0 +1,11 @@
+const ScoreContext = React.createContext()
+
+const ScoreProvider = (props) => {
+  const [score, setScore] = React.useState({playerOne: 0, playerTwo: 0})
+
+  return(
+          <ScoreContext.Provider value={[score, setScore]}>
+           {props.children}
+          </ScoreContext.Provider>
+        )
+}

tic-tac-toe-app/game.js

@@ -0,0 +1,87 @@
+class Game{
+    constructor(){
+        this.playerOne = new Player()
+        this.playerTwo = new Player()
+        this.playerOne.move = 'X'
+        this.playerTwo.move = 'O'
+        this.board = ['', '', '', '', '', '', '', '', '']
+        this.posTracker = {}
+        this.turn = 1
+        this.winner = null
+    }
+
+    checkBoard(candidate){
+
+        for(let position in this.board){
+            this.posTracker[position] = this.board[position] 
+        }
+        //Checks each row to see if a player won
+        if(this.posTracker['0'] === this.posTracker['1'] && this.posTracker['0'] === this.posTracker['2'] && this.posTracker['0'] !== ''){
+            candidate % 2 === 0 ? game.playerOne.score += 1 : game.playerTwo.score += 1
+            this.gameOver() 
+            return 'Game Over'
+        }
+        if(this.posTracker['3'] === this.posTracker['4'] && this.posTracker['3'] === this.posTracker['5'] && this.posTracker['3'] !== ''){
+            candidate % 2 === 0 ? game.playerOne.score += 1 : game.playerTwo.score += 1
+            this.gameOver()
+            return 'Game Over'
+        }
+        if(this.posTracker['6'] === this.posTracker['7'] && this.posTracker['6'] === this.posTracker['8'] && this.posTracker['6'] !== ''){
+            candidate % 2 === 0 ? game.playerOne.score += 1 : game.playerTwo.score += 1
+            this.gameOver()
+            return 'Game Over'
+        }
+        //Checks each diagonal row to see if a player won
+        if(this.posTracker['0'] === this.posTracker['4'] && this.posTracker['0'] === this.posTracker['8'] && this.posTracker['0'] !== ''){
+            candidate % 2 === 0 ? game.playerOne.score += 1 : game.playerTwo.score += 1
+            this.gameOver()
+            return 'Game Over'
+        }
+        if(this.posTracker['2'] === this.posTracker['4'] && this.posTracker['2'] === this.posTracker['6'] && this.posTracker['2'] !== ''){
+            candidate % 2 === 0 ? game.playerOne.score += 1 : game.playerTwo.score += 1
+            this.gameOver()
+            return 'Game Over'
+        }
+        //Checks each column to see if a player won
+        if(this.posTracker['0'] === this.posTracker['3'] && this.posTracker['0'] === this.posTracker['6'] && this.posTracker['0'] !== ''){
+            candidate % 2 === 0 ? game.playerOne.score += 1 : game.playerTwo.score += 1
+            this.gameOver()
+            return 'Game Over'
+        }
+        if(this.posTracker['1'] === this.posTracker['4'] && this.posTracker['1'] === this.posTracker['7'] && this.posTracker['1'] !== ''){
+            candidate % 2 === 0 ? game.playerOne.score += 1 : game.playerTwo.score += 1
+            this.gameOver()
+            return 'Game Over'
+        }
+        if(this.posTracker['2'] === this.posTracker['5'] && this.posTracker['2'] === this.posTracker['8'] && this.posTracker['2'] !== ''){
+            candidate % 2 === 0 ? game.playerOne.score += 1 : game.playerTwo.score += 1
+            this.gameOver()
+            return 'Game Over'
+        }
+        //Checks to see if there is a draw
+        if(candidate >= 9){
+            return 'Game Tie'
+        } 
+
+    }
+
+    gameOver(){
+        this.board = ['', '', '', '', '', '', '', '', '']
+        if(game.turn % 2 !== 0){
+            this.playerOne.score += 1
+            return this.playerOne.score
+        }
+        this.playerTwo.score += 1
+        return this.playerTwo.score
+    }
+
+}
+
+class Player{
+    constructor(){
+        this.score = 0
+    }
+    makeMove(index){
+        game.board.splice(index, 1, this.move)
+    }
+}

tic-tac-toe-app/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="styles.css">
+  <title>React Tac Toe</title>
+</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/javascript" src="game.js"></script>
+  <script type="text/babel" src="./contexts/ScoreContext.jsx"></script>
+  <script type="text/babel" src="./components/players.jsx"></script>
+  <script type="text/babel" src="./components/board.jsx"></script>
+  <script type="text/babel" src="./components/Scoreboard.jsx"></script>
+  <script type="text/babel" src="App.js"></script>
+</body>
+</html>