+const Team = {
+ X: 0,
+ O: 1,
+ properties: {
+ 0: {name: "X"},
+ 1: {name: "O"}
+ }
+};
+
function undisplay(element) {
element.style.display="none";
}
};
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 => {
});
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)}
/>
);
}
],
stepNumber: 0,
- xIsNext: true
+ next_to_play: Team.X
};
}
}
],
stepNumber: 0,
- xIsNext: true
+ next_to_play: Team.X
});
}
if (calculateWinner(squares) || squares[i]) {
return;
}
- squares[i] = this.state.xIsNext ? "X" : "O";
+ squares[i] = Team.properties[this.state.next_to_play].name;
+ let next_to_play;
+ if (this.state.next_to_play === Team.X)
+ next_to_play = Team.O;
+ else
+ next_to_play = Team.X;
this.setState({
history: history.concat([
{
}
]),
stepNumber: history.length,
- xIsNext: !this.state.xIsNext
+ next_to_play: next_to_play
});
}
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`);
}
jumpTo(step) {
this.setState({
stepNumber: step,
- xIsNext: (step % 2) === 0
+ next_to_play: (step % 2) === 0
});
}
if (winner) {
status = "Winner: " + winner;
} else {
- status = "Next player: " + (this.state.xIsNext ? "X" : "O");
+ status = "Next player: " + (Team.properties[this.state.next_to_play].name);
}
return (
</div>
<div className="game-board">
<Board
+ gameOver={winner}
squares={current.squares}
onClick={i => this.handleClick(i)}
/>