X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=blobdiff_plain;f=tictactoe%2Ftictactoe.jsx;h=153dd74a796a92fa8117bf65d537479610c2751f;hp=42c32ef29041345a03d2ca2ddb7ae5cbea5fd2c2;hb=47118511015be30e5efb9131f3a6a77828c0fb6a;hpb=2b049fa2c736d7d35beb07a74469e71a56f637ac diff --git a/tictactoe/tictactoe.jsx b/tictactoe/tictactoe.jsx index 42c32ef..153dd74 100644 --- a/tictactoe/tictactoe.jsx +++ b/tictactoe/tictactoe.jsx @@ -31,16 +31,16 @@ events.onerror = function(event) { 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); - window.game.resetState(); + window.game.reset_board(); for (let square of state.moves) { - window.game.receiveMove(square); + window.game.receive_move(square); } }); @@ -64,12 +64,12 @@ function Square(props) { } class Board extends React.Component { - renderSquare(i) { + render_square(i) { const value = this.props.squares[i]; return ( this.props.onClick(i)} /> ); @@ -79,19 +79,19 @@ class Board extends React.Component { return (
- {this.renderSquare(0)} - {this.renderSquare(1)} - {this.renderSquare(2)} + {this.render_square(0)} + {this.render_square(1)} + {this.render_square(2)}
- {this.renderSquare(3)} - {this.renderSquare(4)} - {this.renderSquare(5)} + {this.render_square(3)} + {this.render_square(4)} + {this.render_square(5)}
- {this.renderSquare(6)} - {this.renderSquare(7)} - {this.renderSquare(8)} + {this.render_square(6)} + {this.render_square(7)} + {this.render_square(8)}
); @@ -118,32 +118,32 @@ class Game extends React.Component { squares: Array(9).fill(null) } ], - stepNumber: 0, + step_number: 0, next_to_play: Team.X }; } - sendMove(i) { + send_move(i) { return fetch_post_json("move", { move: i }); } - resetState() { + reset_board() { this.setState({ history: [ { squares: Array(9).fill(null) } ], - stepNumber: 0, + step_number: 0, next_to_play: Team.X }); } - receiveMove(i) { - const history = this.state.history.slice(0, this.state.stepNumber + 1); + receive_move(i) { + 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; @@ -158,13 +158,13 @@ class Game extends React.Component { squares: squares } ]), - stepNumber: history.length, + step_number: history.length, next_to_play: next_to_play }); } - 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) @@ -174,17 +174,10 @@ class Game extends React.Component { } } - jumpTo(step) { - this.setState({ - stepNumber: step, - next_to_play: (step % 2) === 0 - }); - } - render() { const history = this.state.history; - const current = history[this.state.stepNumber]; - const winner = calculateWinner(current.squares); + const current = history[this.state.step_number]; + const winner = calculate_winner(current.squares); let status; if (winner) { @@ -200,9 +193,9 @@ class Game extends React.Component {
this.handleClick(i)} + onClick={i => this.handle_click(i)} />
@@ -216,7 +209,7 @@ ReactDOM.render( window.game = me} />, document.getElementById("tictactoe")); -function calculateWinner(squares) { +function calculate_winner(squares) { const lines = [ [0, 1, 2], [3, 4, 5],