2
\$\begingroup\$

I followed React Official Tutorial and before implementing time travel, I wanted to add a "New Game" button, and a LockBoard method that graphically prevents further inputs.
Since I'm new to React, could anybody give me feedback on how I implemented these features?

https://codepen.io/anon/pen/bjVeJG?editors=0110

function Square(props){
    return (
      <button
        className={"square" + ( props.value !== null ? " filled" : "" ) + ( props.value === 'X' ? " red" : ( props.value === 'O' ? " cyan" : "" ) ) }
        onClick={ props.onClick }
      >
        {props.value}
      </button>
    );
}
function ResetBtn(props){
    return(
        <button
            onClick={props.onClick}
        >
        {props.value}
        </button>
    );
}
class Board extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      squares: Array(9).fill(null),
      xIsNext: true
    };
  }

  handleClick(i) {
    const squares = this.state.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
        squares: squares,
        xIsNext : !this.state.xIsNext,
        },() => {
            const winner = calculateWinner(this.state.squares);
            if (winner)
              this.lockBoard();
        }
    );

  }

  renderSquare(i) {
    return (
        <Square
        value={ this.state.squares[i] }
        onClick={() => this.handleClick(i) }
        />
    );
  }

  handleResetClick(){
    this.setState({
        squares: Array(9).fill(null),
        xIsNext : true
    });   
  }
  lockBoard(){
    const squares = this.state.squares.slice();
    for(let i in squares)
        if( squares[i] === null)
            squares[i] = "";
    this.setState({
        squares : squares
    });
  }
  render() {
    const winner = calculateWinner(this.state.squares);
    let status;
    if (winner) {
      status = 'Winner: ' + winner;
    } else {
      status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
    }

    return (
      <div>
        <div className="status">{status}</div>
        <ResetBtn
            value="New Game"
            onClick={() => this.handleResetClick() }
        />
        <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')
);


function calculateWinner(squares) {
  const lines = [
    [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 < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}
\$\endgroup\$
  • 4
    \$\begingroup\$ The current question title, which states your concerns about the code, applies to too many questions on this site to be useful. The site standard is for the title to simply state the task accomplished by the code. Please see How to Ask for examples, and revise the title accordingly. Leave the concerns for the question body. \$\endgroup\$ – Mast Jul 13 '18 at 10:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.