diff --git a/assets/js/app.js b/assets/js/app.js index 2d7dc0e..eb19fa5 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -12,14 +12,41 @@ import chessBoardReducer from "./reducers/chess-board"; const store = createStore(chessBoardReducer); +import { setPlayer, setGame, setGameId } from "./store/actions"; + +import API from "./services/api"; +import Channel from "./services/channel"; + import ChessBoard from "./components/chess-board"; class App extends React.Component { + componentWillMount() { + const { gameId, store } = this.props; + + store.dispatch(setGameId(gameId)); + + API.getGame(gameId) + .then(response => { + store.dispatch(setPlayer(response.data.player)); + store.dispatch(setGame(response.data)); + }); + + this.channel = Channel.gameChannel(gameId); + + this.channel.on("game_update", data => { + store.dispatch(setGame(data)); + }); + } + + sendMove(gameId, move) { + API.updateGame(gameId, move); + } + render() { const { store, gameId } = this.props; return ( - + ); } } diff --git a/assets/js/components/chess-board-square.js b/assets/js/components/chess-board-square.js index e39701a..7a202fd 100644 --- a/assets/js/components/chess-board-square.js +++ b/assets/js/components/chess-board-square.js @@ -16,16 +16,14 @@ class ChessBoardSquare extends React.Component { } selectSquare() { - const { piece, store } = this.props; + const { piece, store, sendMove } = this.props; const { gameId, selectedSquare, player } = store.getState(); if (selectedSquare != null && this.moveIsValid()) { - API.updateGame(gameId, { + sendMove(gameId, { from: selectedSquare, to: this.squareCoords, - }).then((response) => { - store.dispatch(setGame(response.data)); - }); + }) } else if (selectedSquare != null) { store.dispatch(selectPiece(null)); } else if (this.playerCanSelectPiece(player, piece)) { diff --git a/assets/js/components/chess-board.js b/assets/js/components/chess-board.js index 72dcc7c..b9ec0e9 100644 --- a/assets/js/components/chess-board.js +++ b/assets/js/components/chess-board.js @@ -3,30 +3,11 @@ import _ from "lodash"; import { connect } from "react-redux"; import classNames from "classnames"; -import API from "../services/api"; -import Channel from "../services/channel"; - -import { setPlayer, setGame, setGameId } from "../store/actions"; - import ChessBoardSquare from "./chess-board-square"; class ChessBoard extends React.Component { componentWillMount() { const { gameId, store } = this.props; - - store.dispatch(setGameId(gameId)); - - API.getGame(gameId) - .then(response => { - store.dispatch(setPlayer(response.data.player)); - store.dispatch(setGame(response.data)); - }); - - this.channel = Channel.gameChannel(gameId); - - this.channel.on("game_update", data => { - store.dispatch(setGame(data)); - }); } getTurn() { @@ -45,7 +26,7 @@ class ChessBoard extends React.Component { } renderFiles(rankId) { - const { store } = this.props; + const { store, sendMove } = this.props; const rank = this.getBoard()[rankId]; return _.map(this.files(rank), fileId => { @@ -56,6 +37,7 @@ class ChessBoard extends React.Component { rank={rankId} piece={rank[fileId]} store={store} + sendMove={sendMove} /> ); });