diff --git a/app/application.js b/app/application.js index 13be3ea..bbfee64 100644 --- a/app/application.js +++ b/app/application.js @@ -2,18 +2,26 @@ import React from "react"; import ReactDOM from "react-dom"; +import { createStore } from "redux"; +import { Provider } from "react-redux"; + +import chessBoardReducer from "reducers/chess-board"; + +const store = createStore(chessBoardReducer); import ChessBoard from "components/chess-board"; class App extends React.Component { render() { + const { store } = this.props; + return ( - + ); } } ReactDOM.render( - , + , document.getElementById('app') ); diff --git a/app/components/chess-board-square.js b/app/components/chess-board-square.js index 8ef5607..1eb687d 100644 --- a/app/components/chess-board-square.js +++ b/app/components/chess-board-square.js @@ -4,13 +4,17 @@ import classNames from "classnames"; class ChessBoardSquare extends React.Component { constructor(props) { super(props); + + this.selectSquare = this.selectSquare.bind(this); } + selectSquare() { + console.log(`Clicked: ${this.props.rank}, ${this.props.file}`); + }; + render() { if (this.props.square == undefined) { - var squareClass = classNames( - "board-square", - ) + var squareClass = "board-square"; } else { var squareClass = classNames( @@ -20,7 +24,7 @@ class ChessBoardSquare extends React.Component { ) } - return
+ return
} } diff --git a/app/components/chess-board.js b/app/components/chess-board.js index 4b0427c..e000fda 100644 --- a/app/components/chess-board.js +++ b/app/components/chess-board.js @@ -1,20 +1,24 @@ import React from "react"; -import defaultState from "store/default_state"; - import ChessBoardSquare from "components/chess-board-square"; class ChessBoard extends React.Component { constructor(props) { super(props); - this.state = defaultState; + } + + chessBoardRows() { + const { store } = this.props; + return store.getState().board; } chessBoardRow(row, i) { return ( -
+
{row.map( - (square, j) => + (square, j) => ( + + ) )}
) @@ -23,7 +27,7 @@ class ChessBoard extends React.Component { render() { return (
- {this.state.board.map((row, i) => this.chessBoardRow(row, i))} + {this.chessBoardRows().map((row, i) => this.chessBoardRow(row, i))}
); } diff --git a/app/reducers/chess-board.js b/app/reducers/chess-board.js index 5ba85ee..97e43ca 100644 --- a/app/reducers/chess-board.js +++ b/app/reducers/chess-board.js @@ -1,9 +1,19 @@ -import { defaultState } from "store/default_state"; +import defaultState from "store/default-state"; -export const chessBoard = (state = defaultState, action) => { +const chessBoardReducer = (state = defaultState, action) => { switch (action.type) { + case "MOVE_PIECE": + var piece = state.board[from.rank][from.file]; + state.board[to.rank][to.file] = piece; + state.board[from.rank][from.file] = null; + return state; + + case "SELECT_PIECE": + return Object.assign({}, state, { selectedSquare: action.coords }); + default: return state; } } +export default chessBoardReducer; diff --git a/app/store/actions.js b/app/store/actions.js new file mode 100644 index 0000000..5da74a7 --- /dev/null +++ b/app/store/actions.js @@ -0,0 +1,17 @@ +const SELECT_PIECE = "SELECT_PIECE"; +const MOVE_PIECE = "MOVE_PIECE"; + +export const selectPiece = (coords) => { + return { + type: selectPiece, + coords: coords + }; +} + +export const movePiece = (from, to) => { + return { + type: movePiece, + from: from, + to: to + }; +} diff --git a/app/store/default_state.js b/app/store/default-state.js similarity index 98% rename from app/store/default_state.js rename to app/store/default-state.js index 7f6a7e4..6755401 100644 --- a/app/store/default_state.js +++ b/app/store/default-state.js @@ -1,4 +1,6 @@ const defaultState = { + selectedSquare: null, + board: [ [ { type: "rook", colour: "black" }, diff --git a/app/store/reducers.js b/app/store/reducers.js deleted file mode 100644 index e69de29..0000000 diff --git a/app/styles/main.scss b/app/styles/main.scss index 3db43ec..4f81ccf 100644 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -48,7 +48,7 @@ $pieces: king queen bishop knight rook pawn; background-color: $white-square-color; } -.board-row:nth-child(odd) { +.board-rank:nth-child(odd) { .board-square:nth-child(even) { @extend %black-square; } @@ -57,7 +57,7 @@ $pieces: king queen bishop knight rook pawn; } } -.board-row:nth-child(even) { +.board-rank:nth-child(even) { .board-square:nth-child(even) { @extend %white-square; } diff --git a/package.json b/package.json index 06c32ce..85017ce 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ }, "dependencies": { "classnames": "^2.2.5", + "immutable": "^3.8.1", "lodash": "^4.17.2", "react": "^15.4.1", "react-dom": "^15.4.1", diff --git a/yarn.lock b/yarn.lock index abdeb66..cc02192 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1669,6 +1669,10 @@ ieee754@^1.1.4: version "1.1.8" resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4" +immutable@^3.8.1: + version "3.8.1" + resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.1.tgz#200807f11ab0f72710ea485542de088075f68cd2" + in-publish@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/in-publish/-/in-publish-2.0.0.tgz#e20ff5e3a2afc2690320b6dc552682a9c7fadf51"