Naughts and Crosses - React

Naughts and Crosses.html

<div id="root">
    
</div>

naughts-and-crosses-react.markdown

Naughts and Crosses - React

A Pen by Vasilii V on CodePen.

License.

script.babel

const 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;
}



class App extends React.Component {
  
  handleClick(num) {
    if (num === 999) {return;}
    //console.log(num);
    let xIsNext = this.state.xIsNext;
    let stepNumber = this.state.stepNumber;
    let history = this.state.history; //{squares: [null, null, null ...]}
    
    let current = history[history.length-1]; //
    console.log(current);
    let squares = current.squares.slice();
    console.log(squares)
    
    if (calculateWinner(squares) || squares[num]) {
      return;
    }
    squares[num] = xIsNext ? 'X' : '0';
    console.log(this.state.stepNumber)
    this.setState({
      xIsNext: !xIsNext,
      stepNumber: this.state.stepNumber+1,
     history: history.concat([{squares: squares}])
    })
  }
  changer(i) {
    this.setState({
      stepNumber: i,
      xIsNext: i%2 ? true :false
    })

  }
  constructor(props) {
    super(props);
    this.state = {
      xIsNext : true,
      stepNumber: 0,
      history: [{
        squares: [null, null, null, null, null, null, null, null, null]
      }]
    }
  }
  
  render() {
    let history = this.state.history;
   
    
    let xIsNext = this.state.xIsNext;
    let stepNumber = this.state.stepNumber;
    
     let historyDisplay = history.map( (e,i) => {
       if (i === 0) {
         return <li><a href ='#' onClick={() => this.changer(i)}>Game start</a></li>
       } else {
         return <li><a href = '#' onClick = {() => this.changer(i)}> Move number {i}</a></li>
       }
     })
    
    
    let current = history[stepNumber];
    
    let next = xIsNext ? 'X' : '0';
  
    let status;
    
    if (calculateWinner(current.squares)) 
      {status =`${calculateWinner(current.squares)} has won`  }
    else if (!calculateWinner(current.squares) && stepNumber === 9) {status='It\'s a draw'}
    else status = `Next move is ${next}`;
    
    
    return (
      <div className='game'>
        <div className='game-board'>
          <GameBoard squares={current.squares} onClick = {(i) => this.handleClick(i)}/>
      </div>
        <div className='game-info'>
        <h1>{status}</h1>
          <div>{historyDisplay}</div>
      </div>
      </div>
    );
  }
}

class GameBoard extends React.Component {
  
  renderCell(num) {
    return <Button value={this.props.squares[num]} onClick = {() => this.props.onClick(num)} />
    
  }
  render() {
    return (
      <div>
        <div className='board-row'>
          {this.renderCell(0)}
          {this.renderCell(1)}
          {this.renderCell(2)}
        </div>
        
         <div className='board-row'>
           {this.renderCell(3)}
           {this.renderCell(4)}
           {this.renderCell(5)}
        </div>
        
         <div className='board-row'>
           {this.renderCell(6)}
           {this.renderCell(7)}
           {this.renderCell(8)}
        </div>
      </div>
    );
  }
}

const Button = props => <button className='square' onClick={ ()=> props.onClick() }>{props.value}</button>


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

scripts

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

style.css

body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol, ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}