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}
/>
);
});