From b2ee8c9263b85cd4d3d332bb9ff31900681b2526 Mon Sep 17 00:00:00 2001
From: Dan Barber <github@danbarber.me>
Date: Thu, 8 Dec 2016 14:35:33 +0000
Subject: [PATCH] Can select a piece

---
 app/components/chess-board-square.js | 27 ++++++++++++++++++++++++---
 app/components/chess-board.js        |  7 ++++++-
 app/reducers/chess-board.js          |  1 +
 app/store/actions.js                 |  4 ++--
 app/store/default-state.js           |  2 +-
 app/styles/main.scss                 | 13 +++++++++++++
 6 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/app/components/chess-board-square.js b/app/components/chess-board-square.js
index 7bcb777..3279f1b 100644
--- a/app/components/chess-board-square.js
+++ b/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() }
       )
     }
 
diff --git a/app/components/chess-board.js b/app/components/chess-board.js
index 2576aba..ae83ca6 100644
--- a/app/components/chess-board.js
+++ b/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);
diff --git a/app/reducers/chess-board.js b/app/reducers/chess-board.js
index 831d522..9ea63ae 100644
--- a/app/reducers/chess-board.js
+++ b/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:
diff --git a/app/store/actions.js b/app/store/actions.js
index 5da74a7..2a79616 100644
--- a/app/store/actions.js
+++ b/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
   };
diff --git a/app/store/default-state.js b/app/store/default-state.js
index 69620b7..f5340ad 100644
--- a/app/store/default-state.js
+++ b/app/store/default-state.js
@@ -1,5 +1,5 @@
 const defaultState = {
-  selectedSquare: null,
+  selectedSquare: { rank: "1", file: "a" },
 
   board: {
     8: {
diff --git a/app/styles/main.scss b/app/styles/main.scss
index 4f81ccf..0bdc62a 100644
--- a/app/styles/main.scss
+++ b/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) {