this.handleClick(i)}
+ />
+ );
}
render() {
- const status = 'Next player: X';
+ const winner = calculateWinner(this.state.squares);
+ let status;
+ if (winner) {
+ status = 'Winner: ' + winner;
+ } else {
+ status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
+ }
return (
@@ -50,6 +81,7 @@ class Board extends Component {
}
}
+/* The Game component renders a board with some placeholders */
class Game extends Component {
render() {
return (
@@ -67,3 +99,23 @@ class Game extends Component {
}
export default Game;
+
+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;
+}