Render captured pieces in the graveyard 👻

assets/css/app.scss

@@ -47,6 +47,7 @@
 @import "components/game-list";
 @import "components/game-grid";
 @import "components/game-info";
+@import "components/graveyard";
 @import "components/move-list";
 @import "components/game-state";
 @import "components/player-finder";

assets/css/components/_graveyard.scss

@@ -0,0 +1,5 @@
+
+.graveyard__stones {
+  display: flex;
+  flex-direction: row;
+}

assets/js/components/game.js

@@ -14,6 +14,7 @@ import Listeners from "../store/listeners";
 import ChessBoard from "./chess-board";
 import MoveList from "./move-list";
 import GameInfo from "./game-info";
+import Graveyard from "./graveyard";
 
 const notifications = new Notifications();
 
@@ -57,6 +58,7 @@ class Game extends React.Component {
         <GameInfo store={store} />
 
         <MoveList store={store} />
+        <Graveyard store={store} />
       </div>
     );
   }

assets/js/components/graveyard.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { connect } from "react-redux";
+
+const Graveyard = props => {
+  return (
+    <div className="graveyard">
+      <GraveStones colour="white" pieces={props.graveyard.white} />
+      <GraveStones colour="black" pieces={props.graveyard.black} />
+    </div>
+  )
+};
+
+const mapStateToProps = state => {
+  return {
+    graveyard: state.graveyard
+  };
+};
+  
+export default connect(mapStateToProps)(Graveyard);
+
+const GraveStones = ({ colour, pieces}) => {
+  return (
+    <ul className="graveyard__stones">
+      {pieces.map(({colour, type}, index) => {
+        return <GraveStone key={`${colour}${type}${index}`} colour={colour} type={type} />
+      })}
+    </ul>
+  )
+}
+
+const GraveStone = ({ colour, type }) => {
+  return <li class="graveyard__stone">
+    <img src={`/images/${type}_${colour}.svg`} />
+  </li>
+}

assets/js/reducers/chess-board.js

@@ -25,6 +25,7 @@ const chessBoardReducer = (state = defaultState, action) => {
         .set("selectedSquare", null)
         .set("availableMoves", [])
         .set("moves", action.moves)
+        .set("graveyard", action.graveyard)
         .toJS();
 
     case "SET_AVAILABLE_MOVES":

assets/js/store/actions.js

@@ -5,6 +5,7 @@ const SET_AVAILABLE_MOVES = "SET_AVAILABLE_MOVES";
 const SET_GAME_ID = "SET_GAME_ID";
 const SELECT_PIECE = "SELECT_PIECE";
 const SET_OPPONENT_STATUS = "SET_OPPONENT_STATUS";
+const SET_GRAVEYARD = "SET_GRAVEYARD";
 
 export const setUserId = (user_id) => {
   return {
@@ -29,6 +30,7 @@ export const setGame = (data) => {
     board: data.board,
     turn: data.turn,
     moves: data.moves,
+    graveyard: data.graveyard,
     state: data.state,
   };
 };
@@ -60,3 +62,10 @@ export const setOpponentStatus = (opponentStatus) => {
     opponentStatus,
   };
 };
+
+export const setGraveyard = (graveyard) => {
+  return {
+    type: SET_GRAVEYARD,
+    graveyard,
+  };
+};

assets/js/store/default-state.js

@@ -25,6 +25,7 @@ const defaultState = {
     2: { a: null, b: null, c: null, d: null, e: null, f: null, g: null, h: null },
     1: { a: null, b: null, c: null, d: null, e: null, f: null, g: null, h: null },
   },
+  graveyard: { "white": [], "black": [] }
 };
 
 export default defaultState;

lib/chess/store/move.ex

@@ -8,6 +8,7 @@ defmodule Chess.Store.Move do
   import Ecto.Query
 
   alias Chess.Store.Game
+  alias Chess.Store.Move
 
   schema "moves" do
     field :from, :map
@@ -39,6 +40,7 @@ defmodule Chess.Store.Move do
 
   def captures_for_colour(query, colour) do
     from move in query,
+      select: move.piece_captured,
       where: fragment("(piece_captured -> 'colour')::jsonb = ?", ^colour)
   end