{this.renderSquare(0)}
{this.renderSquare(1)}
@@ -43,30 +52,110 @@ class Board extends React.Component {
);
}
}
-
-class Game extends React.Component {
+type GameHistory = {
+ squares: SquareValue[];
+};
+type GameProps = {};
+type GameState = {
+ history: GameHistory[];
+ stepNumber: number;
+ xIsNext: boolean;
+};
+class Game extends React.Component
{
+ constructor(props: GameProps) {
+ super(props);
+ this.state = {
+ history: [
+ {
+ squares: Array(9).fill(null),
+ },
+ ],
+ stepNumber: 0,
+ xIsNext: true,
+ };
+ }
+ handleClick(i: number) {
+ const history = this.state.history.slice(0, this.state.stepNumber + 1);
+ const current = history[this.state.stepNumber];
+ 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: number) {
+ 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);
+ let status;
+ if (winner) {
+ status = "Winner: " + winner;
+ } else {
+ status = "Next player: " + (this.state.xIsNext ? "X" : "O");
+ }
+ const moves = history.map((_, move) => {
+ const desc = move ? "Go to move #" + move : "Go to game start";
+ return (
+
+
+
+ );
+ });
return (
-
+ this.handleClick(i)}
+ />
-
{/* status */}
-
{/* TODO */}
+
{status}
+
{moves}
);
}
}
-// ========================================
+function calculateWinner(squares: Array) {
+ 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(
- ,
- document.getElementById('root')
-);
+// ========================================
+ReactDOM.render(, document.getElementById("root"));
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))