final game commit

Signed-off-by: Tathagat Thapliyal <[email protected]>

Author: tathagat2006

src/components/Board.js

@@ -1,26 +1,34 @@
 import React from 'react'
 import Square from './Square'
 
-export default function Board(props) {
-  return (
-    <div>
-      <div className="border-row">
-        <Square insideValue = {props.value}/>
-        <Square/>
-        <Square/>
+export default class Board extends React.Component {
+  renderSquare = (i) => {
+    return(
+      <Square value = {this.props.squares[i]} handleClick = {() => this.props.clickAction(i)}/>
+    )
+  }
+  
+  render() {
+    return (
+      <div>
+        <div className="border-row">
+          {this.renderSquare(0)}          
+          {this.renderSquare(1)}          
+          {this.renderSquare(2)}          
+        </div>
+  
+        <div className="border-row">
+          {this.renderSquare(3)}          
+          {this.renderSquare(4)}          
+          {this.renderSquare(5)}      
+        </div>
+  
+        <div className="border-row">
+          {this.renderSquare(6)}          
+          {this.renderSquare(7)}          
+          {this.renderSquare(8)}      
+        </div>
       </div>
-
-      <div className="border-row">
-        <Square/>
-        <Square/>
-        <Square/>
-      </div>
-
-      <div className="border-row">
-        <Square/>
-        <Square/>
-        <Square/>
-      </div>
-    </div>
-  )
+    )
+  }
 }

src/components/Game.js

@@ -10,30 +10,74 @@ export default class Game extends React.Component {
       history: [
         {squares: Array(9).fill(null)}      
       ],
-      value: 5
     } 
   } 
 
-  changeState = () => {
+  handleClick = (i) => {
+    const history = this.state.history
+    const current = history[history.length - 1]
+    const squares = current.squares
+
+    const winner = calculateWinner(squares)
+
+    if(winner || squares[i]) {
+      return
+    }
+
+    squares[i] = this.state.xIsNext ? 'X' : 'O'
     this.setState({
-      value: 6
+      history: history.concat({
+        squares:squares
+      }),
+      xIsNext: !this.state.xIsNext,
+      stepNumber: history.length
     })
   }
 
-  someFunction = () => {
-    return 5
-  }
 
-  render() {
-    console.log(this.state)
-    const result = this.someFunction()
+  render() {    
+    const history = this.state.history
+    const current = history[this.state.stepNumber]
+    let status
+    const winner = calculateWinner(current.squares)
+
+    if(winner) {
+      status = 'Winner is' + winner
+    } else {
+      status = 'Next Player is ' + (this.state.xIsNext ? 'X' : 'O')
+    }
     return(
       <div className= "game">
         <div className = "game-board">
-          <Board value = {result}/>
-          <button onClick = {() => this.changeState()}>Click Me!</button>
+          <Board clickAction = {(i) => this.handleClick(i)} squares = {current.squares}/>          
+        </div>
+
+        <div className = "game-info">
+          <div>{status}</div>
         </div>
       </div>
     )
   }
+}
+
+function calculateWinner (squares) {
+  const possibilities = [
+    [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 < possibilities.length; i++) {
+    const [a, b, c] = possibilities[i]
+    if(squares[a] && squares[a] === squares[b] && squares[b] === squares[c]) {
+      return squares[a]
+    }
+  }
+
+  return null
 }

src/components/Square.js

@@ -2,8 +2,8 @@ import React from 'react'
 
 export default function Square(props) {  
   return (
-    <button className =  "square">
-      {props.insideValue}
+    <button className =  "square" onClick = {props.handleClick}>
+      {props.value}
     </button>
   )
 }