tic tack

gistfile1.txt

class Square extends React.Component {
  constructor() {
    super();
    this.state = {
      value: null
    };
  }
  
  render() {
    return (
      <button
        className="square"
        onClick={(e) => {
          this.setState( { value: this.props.currentPlayer } ); 
          this.props.handleClick(this.props.currentPlayer, this.props.num);
        }} 
       >
        {this.state.value}
      </button>
    );
  }
}

class Board extends React.Component {
  constructor() {
    super()
    this.state = {
      currentPlayer: 'X',
      movements: [null, null, null, null, null, null, null, null, null],
      winner: null
    }
  }
  
  checkPositions(movements){
    var validVariants = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [6, 4, 2]
    ]
    console.log(movements)
    var winner = null
    validVariants.map(function(variant){

      var sum = variant.reduce(function(acc, val){
        if (movements[val] === "X")
          return acc + 1;
        return acc;
      },0)
      console.log(sum, "X")
      if (sum == 3)
        winner = "X"
      
      var sum = variant.reduce(function(acc, val){
        if (movements[val] === "O")
          return acc + 1;
        return acc;
      },0)
      console.log(sum, "O")
      
      if (sum == 3)
        winner = "O"
    })
    return winner;
  }
  
  handleClick(value, i) {
    this.setState({currentPlayer: this.state.currentPlayer === 'X' ? 'O' : 'X'})
    this.state.movements[i] = value
    var result = this.checkPositions(this.state.movements)
    console.log("result", result)
    if (result)
      this.state.winner = result
    // console.log(this.checkPositions());
    
  }
  renderSquare(i) {
    return <Square num={i} value={this.state.movements[i]} currentPlayer={this.state.currentPlayer} handleClick={(value, i) => this.handleClick(value, i)}/>;
  }

  render() {
    const status = 'Next player: ' + this.state.currentPlayer;

    return (
      <div>
        <div>
          <div>winner: {this.state.winner}</div>
        </div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);