};
events.addEventListener("move", event => {
- const square = JSON.parse(event.data);
+ const move = JSON.parse(event.data);
- window.game.receiveMove(square);
+ window.game.receiveMove(move);
+});
+
+events.addEventListener("game-state", event => {
+ const state = JSON.parse(event.data);
+
+ window.game.resetState();
+
+ for (let square of state.moves) {
+ window.game.receiveMove(square);
+ }
});
function Square(props) {
+ let className = "square";
+
+ if (props.value) {
+ className += " occupied";
+ } else if (props.active) {
+ className += " open";
+ }
+
+ const onClick = props.active ? props.onClick : null;
+
return (
- <button className="square" onClick={props.onClick}>
+ <div className={className}
+ onClick={onClick}>
{props.value}
- </button>
+ </div>
);
}
class Board extends React.Component {
renderSquare(i) {
+ const value = this.props.squares[i];
return (
<Square
- value={this.props.squares[i]}
+ value={value}
+ active={! this.props.gameOver && ! value}
onClick={() => this.props.onClick(i)}
/>
);
}
sendMove(i) {
- return fetch_post_json("move", { square: i });
+ return fetch_post_json("move", { move: i });
+ }
+
+ resetState() {
+ this.setState({
+ history: [
+ {
+ squares: Array(9).fill(null)
+ }
+ ],
+ stepNumber: 0,
+ xIsNext: true
+ });
}
receiveMove(i) {
async handleClick(i) {
const response = await this.sendMove(i);
if (response.status == 200) {
- const legal = await response.json();
- if (! legal)
- add_message("danger", `Illegal move.`);
+ const result = await response.json();
+ if (! result.legal)
+ add_message("danger", result.message);
} else {
add_message("danger", `Error occurred sending move`);
}
return (
<div className="game">
+ <div className="game-info">
+ <div>{status}</div>
+ </div>
<div className="game-board">
<Board
+ gameOver={winner}
squares={current.squares}
onClick={i => this.handleClick(i)}
/>
</div>
- <div className="game-info">
- <div>{status}</div>
- </div>
</div>
);
}