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
+
{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"