Completed crude tic-tac-toe game

tic-tac-toe-app/App.js

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

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

@@ -0,0 +1,72 @@
+const container = document.querySelector('.container')
+const game = new Game()
+
+const Board = () => {
+  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 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");
+      console.log(box)
+      game.playerOne.makeMove(parseInt(box[3]) - 1)
+      console.log(game.board)
+      game.checkBoard(game.turn)
+
+      game.turn += 1
+      return game.turn
+    }
+    if(game.turn % 2 === 0){
+      boxStates[box](<PlayerTwo/>)
+      document.getElementById(box).removeAttribute("onClick");
+      console.log(box)
+      game.playerTwo.makeMove(parseInt(box[3]) - 1)
+      console.log(game.board)
+      game.checkBoard(game.turn)
+      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/game.js

@@ -0,0 +1,83 @@
+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() 
+        }
+        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()
+        }
+        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()
+        }
+        //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()
+        }
+        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()
+        }
+        //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()
+        }
+        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()
+        }
+        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()
+        }
+        //Checks to see if there is a draw
+        if(candidate >= 9){
+            console.log('Draw game')
+            alert('Draw Game')
+            location.reload()
+        } 
+
+    }
+
+    gameOver(){
+        this.board = ['', '', '', '', '', '', '', '', '']
+        if(game.turn % 2 !== 0){
+            alert('Player One Wins')
+            location.reload()
+            return 1
+        }
+        alert('Player Two Wins')
+        location.reload()
+        return 2
+    }
+
+}
+
+class Player{
+    constructor(){
+        this.score = 0
+    }
+    makeMove(index){
+        game.board.splice(index, 1, this.move)
+    }
+}

tic-tac-toe-app/index.html

@@ -4,14 +4,17 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="styles.css">
-  <title>Document</title>
+  <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/babel" src="App.jsx"></script>
+  <script type="text/javascript" src="game.js"></script>
+  <script type="text/babel" src="./components/players.jsx"></script>
+  <script type="text/babel" src="./components/board.jsx"></script>
+  <script type="text/babel" src="App.js"></script>
 </body>
 </html>