Tic tac toe

react-fb-tictactoe/src/TicTacToe/index.js

@@ -9,27 +9,26 @@ import './TicTacToe.css'
  *    with
  *    class Square extends Component
  */
-class Square extends Component {
-  render() {
-    return (
-      <button className="square">
-        {/* TODO */}
-      </button>
-    );
-  }
+function Square(props){
+	return (
+	<button className = "square" onClick = {props.onClick}>
+		{props.value}
+		</button>
+	);
 }
 
 class Board extends Component {
+
   renderSquare(i) {
-    return <Square />;
+    return (<Square value = {this.props.squares[i]}
+	onClick = {() => this.props.onClick(i)}
+
+/>);
   }
 
   render() {
-    const status = 'Next player: X';
-
     return (
       <div>
-        <div className="status">{status}</div>
         <div className="board-row">
           {this.renderSquare(0)}
           {this.renderSquare(1)}
@@ -51,19 +50,102 @@ class Board extends Component {
 }
 
 class Game extends Component {
+	constructor() {
+	super();
+	this.state = {
+		history: [{
+	squares: Array(9).fill(null),
+		}
+		],
+	stepNumber: 0,
+	xIsNext: true,
+	};
+}
+
+
+	handleClick(i){
+	const history = this.state.history.slice(0, this.state.stepNumber + 1);
+	const current = history[history.length - 1];
+	const squares = current.squares.slice();
+	if(calculateWinner(squares) || squares[i]) {
+	return;
+	}
+	squares[i] = this.state.xIsNext ? 'X' : 'O'; 
+	this.setState({
+		history: history.concat([{
+		squares: squares,
+		}]),
+		stepNumber: history.length,
+		xIsNext: !this.state.xIsNext,
+	});
+}
+
+	jumpTo(step){
+	this.setState({
+	stepNumber: step,
+	xIsNext: (step %2) === 0
+	}
+	);
+	}
   render() {
+	const history = this.state.history;
+	const current = history[this.state.stepNumber];
+   	 const winner = calculateWinner(current.squares);
+
+	const moves = history.map((step, move) => {
+		const desc = move ? 
+		'Move #'  + move :
+		'Game start'  ;
+		return (
+		<li key={move}>
+			<a href = "#" onClick ={() => this.jumpTo(move)}> {desc}</a>
+		</li>
+	);
+	});
+
+	let status;
+	if(winner) {
+		status = 'Winner: ' + winner;
+	}
+	else {
+
+	status = 'Next player: ' +  (this.state.xIsNext ? 'X' : 'O');
+	}
     return (
       <div className="game">
         <div className="game-board">
-          <Board />
+          <Board  
+	squares = {current.squares}
+	onClick={(i) =>this.handleClick(i)}
+	/>
         </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;
+}
+
 export default Game;

react-fb-tictactoe/src/index.js

@@ -1,8 +1,69 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import registerServiceWorker from './registerServiceWorker';
-
-ReactDOM.render(<App />, document.getElementById('root'));
-registerServiceWorker();
+import React, { Component } from 'react';
+import './TicTacToe.css'
+
+
+/*
+ * Changes from original tutorial
+ *  - Here we import Component, so we can replace
+ *    class Square extends React.Component
+ *    with
+ *    class Square extends Component
+ */
+class Square extends Component {
+  render() {
+    return (
+      <button className="square">
+        {this.props.value}
+      </button>
+    );
+  }
+}
+
+class Board extends Component {
+  renderSquare(i) {
+    return <Square value = {i}/>;
+  }
+
+  render() {
+    const status = 'Next player: X';
+
+    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 Component {
+  render() {
+    return (
+      <div className="game">
+        <div className="game-board">
+          <Board />
+        </div>
+        <div className="game-info">
+          <div>{/* status */}</div>
+          <ol>{/* todo */}</ol>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Game;