React Tic Tac Toe

A simple tic tac toe application using ReactJS

by jonva

HTML

<div id="errors" style="
  background: #c00;
  color: #fff;
  display: none;
  margin: -20px -20px 20px;
  padding: 20px;
  white-space: pre-wrap;
"></div>
<div id="container"></div>
<script>
  window.addEventListener('mousedown', function(e) {
    document.body.classList.add('mouse-navigation');
    document.body.classList.remove('kbd-navigation');
  });
  window.addEventListener('keydown', function(e) {
    if (e.keyCode === 9) {
      document.body.classList.add('kbd-navigation');
      document.body.classList.remove('mouse-navigation');
    }
  });
  window.addEventListener('click', function(e) {
    if (e.target.tagName === 'A' && e.target.getAttribute('href') === '#') {
      e.preventDefault();
    }
  });
  window.onerror = function(message, source, line, col, error) {
    var text = error ? error.stack || error : message + ' (at ' + source + ':' + line + ':' + col + ')';
    errors.textContent += text + '\n';
    errors.style.display = '';
  };
  console.error = (function(old) {
    return function error() {
      errors.textContent += Array.prototype.slice.call(arguments).join(' ') + '\n';
      errors.style.display = '';
      old.apply(this, arguments);
    }
  })(console.error);

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>

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

Babel + JSX

function Square(props) {
  return ( < button className = "square"
    onClick = {
      () => props.onClick()
    } > {
      props.value
    } < /button>
  );
}

class Board extends React.Component {
constructor() {
  super();
  this.state = {
    squares: Array(9).fill(null),
    turnX: true,
    status: 'Your turn, player X'
  }
}

handleClick(i) {

  const squares = this.state.squares.slice();

  if (squares[i]) {
    return;
  }


  const turnX = this.state.turnX;
  (turnX) ? squares[i] = 'X': squares[i] = 'O';

  const winner = calculateWinner(squares);

  if (winner) {
    console.log("Winner is " + winner);

    this.setState({
      squares: squares,
      status: "The winner is " + winner
    });
    return;
  }

  if (!remainingSquares(squares)) {
    this.setState({
      squares: squares,
      status: "The game is a draw!!"
    });
    return;
  }
  const status = 'Your turn player ' + ((turnX) ? 'O' : 'X');

  this.setState({
    squares: squares,
    status: status,
    turnX: !turnX
  });
}

renderSquare(i) {
  return <Square value = {
    this.state.squares[i]
  }
  onClick = {
    () => this.handleClick(i)
  }
  />;
}
render() {
  const status = this.state.status;
  return ( < 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 >
    );
  }
}

//...