place captured pieces next to the chessboard

public/javascripts/play.js

@@ -32,10 +32,17 @@ function movePiece(from, to, promotion, rcvd) {
     tdFrom.addClass('last-origin');
     tdTo.addClass('last-target');
     
-    var piece = tdFrom.find('a'); // find out what piece is being moved
-    var moveSnd = $("#moveSnd")[0]; // sound file variable
-    unselectPiece(piece.parent()); 
-    tdTo.html(piece); // replace td attributes
+    var piece = tdFrom.find('a'); // piece being moved
+    var moveSnd = $("#moveSnd")[0];
+    unselectPiece(piece.parent());
+    
+    if (tdTo.html() !== '') { //place captured piece next to the chessboard
+      $('#captured-pieces')
+        .find($chess.turn() === 'b' ? '.b' : '.w')
+        .append('<li>' + tdTo.find('a').html() + '</li>');
+    }
+    
+    tdTo.html(piece);
 
     $piece = null;
 

public/stylesheets/style.css

@@ -364,6 +364,24 @@ ul#chat {
   background: #fff;
   color: #444; }
 
+/* Captured pieces */
+#captured-pieces {
+  position: absolute;
+  width: 100px;
+  margin-left: -100px;
+  font-size: 2rem;
+  line-height: 2rem;
+  height: 517px;
+  overflow-y: scroll; }
+  #captured-pieces ul {
+    width: 50px;
+    min-height: 5px;
+    float: left;
+    display: block;
+    text-align: center; }
+    #captured-pieces ul li {
+      list-style-type: none; }
+
 /* Chessboard */
 #board_moves_wrapper {
   width: 100%;
@@ -498,6 +516,9 @@ span.promotion {
 @media only screen and (min-width: 1400px) {
   #chat-wrapper {
     display: block; } }
+@media only screen and (max-width: 999px) {
+  #captured-pieces {
+    display: none; } }
 @media only screen and (min-width: 530px) and (max-width: 759px) {
   header, #board_moves_wrapper, #sounds_label {
     max-width: 530px; } }

public/stylesheets/style.scss

@@ -407,6 +407,29 @@ ul#chat{
   }
 }
 
+/* Captured pieces */
+
+#captured-pieces{
+  position: absolute;
+  width: 100px;
+  margin-left: -100px;
+  font-size: 2rem;
+  line-height: 2rem;
+  height: 517px;
+  overflow-y: scroll;
+
+  ul{
+    width: 50px;
+    min-height: 5px;
+    float: left;
+    display: block;
+    text-align: center;
+    li{
+      list-style-type: none;
+    }
+  }
+}
+
 /* Chessboard */
 
 #board_moves_wrapper {
@@ -569,6 +592,12 @@ span.promotion{
   }
 }
 
+@media only screen and (max-width: 999px) {
+  #captured-pieces{
+    display: none;
+  }
+}
+
 @media only screen and (min-width: 530px) and (max-width: 759px) {
   header, #board_moves_wrapper, #sounds_label{
     max-width: 530px;

views/play.jade

@@ -30,6 +30,9 @@ block content
       input(type='checkbox', id='sounds')
       |  Enable sounds
     #board_wrapper
+      #captured-pieces
+        ul.w
+        ul.b
       table.chess_board.white
         tr
           td.A8(data-id='A8')