Can select a piece

app/components/chess-board-square.js

@@ -1,6 +1,8 @@
 import React from "react";
 import classNames from "classnames";
 
+import { selectPiece } from "store/actions";
+
 class ChessBoardSquare extends React.Component {
   constructor(props) {
     super(props);
@@ -8,19 +10,38 @@ class ChessBoardSquare extends React.Component {
     this.selectSquare = this.selectSquare.bind(this);
   }
 
+  squareCoords() {
+    return { rank: this.props.rank, file: this.props.file };
+  }
+
   selectSquare() {
+    var { store } = this.props;
     console.log(`Clicked: ${this.props.file}${this.props.rank}`);
+
+    if (this.props.piece != undefined) {
+      store.dispatch(selectPiece(this.squareCoords()));
+    }
+
+    console.log(store.getState().selectedSquare);
   };
 
+  isSelectedSquare() {
+    var { store } = this.props;
+
+    return this.squareCoords().rank == store.getState().selectedSquare.rank
+      && this.squareCoords().file == store.getState().selectedSquare.file;
+  }
+
   render() {
-    if (this.props.square == undefined) {
+    if (this.props.piece == undefined) {
       var squareClass = "board-square";
     }
     else {
       var squareClass = classNames(
         "board-square",
-        this.props.square.type,
-        this.props.square.colour,
+        this.props.piece.type,
+        this.props.piece.colour,
+        { "selected": this.isSelectedSquare() }
       )
     }
 

app/components/chess-board.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { connect } from "react-redux";
 
 import ChessBoardSquare from "components/chess-board-square";
 
@@ -40,4 +41,8 @@ class ChessBoard extends React.Component {
   }
 }
 
-export default ChessBoard;
+function mapStateToProps(state) {
+  return { selectedSquare: state.selectedSquare }
+}
+
+export default connect(mapStateToProps)(ChessBoard);

app/reducers/chess-board.js

@@ -15,6 +15,7 @@ const chessBoardReducer = (state = defaultState, action) => {
       });
 
     case "SELECT_PIECE":
+      console.log("Action fired");
       return Object.assign({}, state, { selectedSquare: action.coords });
 
     default:

app/store/actions.js

@@ -3,14 +3,14 @@ const MOVE_PIECE = "MOVE_PIECE";
 
 export const selectPiece = (coords) => {
   return {
-    type: selectPiece,
+    type: SELECT_PIECE,
     coords: coords
   };
 }
 
 export const movePiece = (from, to) => {
   return {
-    type: movePiece,
+    type: MOVE_PIECE,
     from: from,
     to: to
   };

app/store/default-state.js

@@ -1,5 +1,5 @@
 const defaultState = {
-  selectedSquare: null,
+  selectedSquare: { rank: "1", file: "a" },
 
   board: {
     8: {

app/styles/main.scss

@@ -8,7 +8,10 @@ $base-font-size: 16px;
 $black-square-color: #824c34;
 $white-square-color: #d0bfa1;
 
+$selected-square-color: #ff0000;
+
 $square-outline-color: darken($black-square-color, 20%);
+$selected-outline-color: red;
 
 $colours: black white;
 $pieces: king queen bishop knight rook pawn;
@@ -42,10 +45,20 @@ $pieces: king queen bishop knight rook pawn;
 
 %black-square {
   background-color: $black-square-color;
+
+  &.selected {
+    background-color: mix($black-square-color, $selected-square-color, 60%);
+    border: 0.2vw solid $selected-outline-color;
+  }
 }
 
 %white-square {
   background-color: $white-square-color;
+
+  &.selected {
+    background-color: mix($white-square-color, $selected-square-color, 60%);
+    border: 0.2vw solid $selected-outline-color;
+  }
 }
 
 .board-rank:nth-child(odd) {