/
Game.js
86 lines (76 loc) · 2 KB
/
Game.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import React from "react";
import { connect } from "react-redux";
import Board from "./components/Board";
import { place } from "./actions";
import { calculateWinner } from "./functions";
class Game extends React.Component {
constructor(props) {
super(props);
this.state = {
history: [
{
squares: Array(9).fill(null),
},
],
};
}
handleClick(i) {
const history = this.state.history.slice(0, this.props.stepNumber + 1);
const current = history[history.length - 1];
const squares = current.squares.slice();
if (calculateWinner(squares) || squares[i]) {
return;
}
squares[i] = this.props.xIsNext ? "X" : "O";
this.props.place(this.props.stepNumber, this.props.xIsNext);
this.setState({
history: history.concat([
{
squares: squares,
},
]),
});
}
jumpTo(step) {
this.setState({
stepNumber: step,
xIsNext: step % 2 === 0,
});
}
render() {
const history = this.state.history;
const current = history[this.props.stepNumber];
const winner = calculateWinner(current.squares);
return (
<div className="game">
<div className="game-board">
<Board
squares={current.squares}
onClick={(i) => this.handleClick(i)}
/>
</div>
<div className="game-info">
<div>
{winner
? "Winner: " + winner
: "Next player: " + (this.props.xIsNext ? "X" : "O")}
</div>
<ol>
{history.map((step, move) => (
<li key={move}>
<button onClick={() => this.jumpTo(move)}>
{move ? "Go to move #" + move : "Go to game start"}
</button>
</li>
))}
</ol>
</div>
</div>
);
}
}
const mapStateToProps = (state) => ({
stepNumber: state.stepNumber,
xIsNext: state.xIsNext,
});
export default connect(mapStateToProps, { place })(Game);