Plumb in redux

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 (
-      <ChessBoard />
+      <ChessBoard store={store} />
     );
   }
 }
 
 ReactDOM.render(
-  <App />,
+  <App store={store} />,
   document.getElementById('app')
 );

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 <div className={squareClass} />
+    return <div className={squareClass} onClick={this.selectSquare} />
   }
 }
 

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 (
-      <div className="board-row" key={i}>
+      <div className="board-rank" key={i}>
         {row.map(
-          (square, j) => <ChessBoardSquare key={j} square={square} />
+          (square, j) => (
+            <ChessBoardSquare key={j} rank={i} file={j} square={square} />
+          )
         )}
       </div>
     )
@@ -23,7 +27,7 @@ class ChessBoard extends React.Component {
   render() {
     return (
       <div className="board">
-        {this.state.board.map((row, i) => this.chessBoardRow(row, i))}
+        {this.chessBoardRows().map((row, i) => this.chessBoardRow(row, i))}
       </div>
     );
   }

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;

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
+  };
+}

app/store/default-state.js

@@ -1,4 +1,6 @@
 const defaultState = {
+  selectedSquare: null,
+
   board: [
     [
       { type: "rook",   colour: "black" },

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

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",

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"