Finish tutorial's guided part

src/index.js

@@ -2,27 +2,26 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 
-class Square extends React.Component {
-    render() {
-        return (
-            <button className="square">
-                {/* TODO */}
-            </button>
-        );
-    }
+
+function Square(props) {
+    return (
+        <button className="square" onClick={props.onClick}>
+            {props.value}
+        </button>
+    );
 }
 
 class Board extends React.Component {
     renderSquare(i) {
-        return <Square />;
+        return <Square
+            value={this.props.squares[i]}
+            onClick={() => this.props.handleClick(i)}
+        />;
     }
 
     render() {
-        const status = 'Next player: X';
-
         return (
             <div>
-                <div className="status">{status}</div>
                 <div className="board-row">
                     {this.renderSquare(0)}
                     {this.renderSquare(1)}
@@ -44,24 +43,108 @@ class Board extends React.Component {
 }
 
 class Game extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            history: [{
+                squares: Array(9).fill(null),
+            }],
+            xIsNext: true,
+            currentMoveIndex: 0,
+        }
+    }
+
+    playTurn(i) {
+        const history = this.state.history.slice(0, this.state.currentMoveIndex + 1);
+        const currentState = history[history.length - 1];
+        if (currentState.squares[i] || calculateWinner(currentState.squares)) {
+            return;
+        }
+
+        const newSquares = [...currentState.squares];
+        newSquares[i] = this.state.xIsNext ? 'X' : 'O';
+
+        this.setState({
+            history: [...history, {
+                squares: newSquares,
+            }],
+            xIsNext: !this.state.xIsNext,
+            currentMoveIndex: history.length,
+        });
+    }
+
+    jumpTo(moveIndex) {
+        this.setState({
+            currentMoveIndex: moveIndex,
+            xIsNext: moveIndex % 2 === 0,
+        });
+    }
+
     render() {
+        const history = this.state.history;
+        const currentState = history[this.state.currentMoveIndex];
+        let status;
+        const winner = calculateWinner(currentState.squares);
+        if (winner) {
+            status = `Winner: ${winner}`;
+        } else {
+            const nextPlayer = this.state.xIsNext ? 'X' : 'O';
+            status = `Next player ${nextPlayer}`;
+        }
+
+        const moves = history.map((state, index) => {
+            const description = index === 0 ?
+                'Go to game start' :
+                `Go to move #${index}`;
+            return (
+                <li key={index}>
+                    <button onClick={() => this.jumpTo(index)}>{description}</button>
+                </li>
+            );
+        });
+
         return (
             <div className="game">
                 <div className="game-board">
-                    <Board />
+                    <Board
+                        squares={currentState.squares}
+                        handleClick={(i) => this.playTurn(i)}
+                        xIsNext={this.state.xIsNext}
+                    />
                 </div>
                 <div className="game-info">
-                    <div>{/* status */}</div>
-                    <ol>{/* TODO */}</ol>
+                    <div>{status}</div>
+                    <ol>{moves}</ol>
                 </div>
             </div>
         );
     }
 }
 
+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;
+}
+
 // ========================================
 
 ReactDOM.render(
-    <Game />,
+    <Game/>,
     document.getElementById('root')
 );
+