I'm not entirely sure this is a good idea with the number of library
functions that we're calling that still use camel case, (such as
addEventListener, and perhaps most significantly, onClick), but the
code was even more mixed before, so it's maybe at least more
consistent in its inconsistency now, or something?
events.addEventListener("move", event => {
const move = JSON.parse(event.data);
events.addEventListener("move", event => {
const move = JSON.parse(event.data);
- window.game.receiveMove(move);
+ window.game.receive_move(move);
});
events.addEventListener("game-state", event => {
const state = JSON.parse(event.data);
});
events.addEventListener("game-state", event => {
const state = JSON.parse(event.data);
- window.game.resetState();
+ window.game.reset_state();
for (let square of state.moves) {
for (let square of state.moves) {
- window.game.receiveMove(square);
+ window.game.receive_move(square);
}
class Board extends React.Component {
}
class Board extends React.Component {
const value = this.props.squares[i];
return (
<Square
value={value}
const value = this.props.squares[i];
return (
<Square
value={value}
- active={! this.props.gameOver && ! value}
+ active={! this.props.game_over && ! value}
onClick={() => this.props.onClick(i)}
/>
);
onClick={() => this.props.onClick(i)}
/>
);
return (
<div>
<div className="board-row">
return (
<div>
<div className="board-row">
- {this.renderSquare(0)}
- {this.renderSquare(1)}
- {this.renderSquare(2)}
+ {this.render_square(0)}
+ {this.render_square(1)}
+ {this.render_square(2)}
</div>
<div className="board-row">
</div>
<div className="board-row">
- {this.renderSquare(3)}
- {this.renderSquare(4)}
- {this.renderSquare(5)}
+ {this.render_square(3)}
+ {this.render_square(4)}
+ {this.render_square(5)}
</div>
<div className="board-row">
</div>
<div className="board-row">
- {this.renderSquare(6)}
- {this.renderSquare(7)}
- {this.renderSquare(8)}
+ {this.render_square(6)}
+ {this.render_square(7)}
+ {this.render_square(8)}
return fetch_post_json("move", { move: i });
}
return fetch_post_json("move", { move: i });
}
this.setState({
history: [
{
this.setState({
history: [
{
const history = this.state.history.slice(0, this.state.step_number + 1);
const current = history[history.length - 1];
const squares = current.squares.slice();
const history = this.state.history.slice(0, this.state.step_number + 1);
const current = history[history.length - 1];
const squares = current.squares.slice();
- if (calculateWinner(squares) || squares[i]) {
+ if (calculate_winner(squares) || squares[i]) {
return;
}
squares[i] = Team.properties[this.state.next_to_play].name;
return;
}
squares[i] = Team.properties[this.state.next_to_play].name;
- async handleClick(i) {
- const response = await this.sendMove(i);
+ async handle_click(i) {
+ const response = await this.send_move(i);
if (response.status == 200) {
const result = await response.json();
if (! result.legal)
if (response.status == 200) {
const result = await response.json();
if (! result.legal)
render() {
const history = this.state.history;
const current = history[this.state.step_number];
render() {
const history = this.state.history;
const current = history[this.state.step_number];
- const winner = calculateWinner(current.squares);
+ const winner = calculate_winner(current.squares);
let status;
if (winner) {
let status;
if (winner) {
</div>
<div className="game-board">
<Board
</div>
<div className="game-board">
<Board
squares={current.squares}
squares={current.squares}
- onClick={i => this.handleClick(i)}
+ onClick={i => this.handle_click(i)}
ref={(me) => window.game = me}
/>, document.getElementById("tictactoe"));
ref={(me) => window.game = me}
/>, document.getElementById("tictactoe"));
-function calculateWinner(squares) {
+function calculate_winner(squares) {
const lines = [
[0, 1, 2],
[3, 4, 5],
const lines = [
[0, 1, 2],
[3, 4, 5],