fix clock timer delay; add drag and drop support

public/javascripts/play.js

@@ -217,10 +217,46 @@ $(function() {
             'token': $token
           });
         }
+        $('#clock li').each(function() {
+          $(this).toggleClass('ticking');
+        });
       }
     }
   }
 
+  function unbindMoveHandlers() {
+    var moveFrom = $('.chess_board a');
+    var moveTo = $('.chess_board td');
+
+    moveFrom.off('click', movePieceFromHandler);
+    moveTo.off('click', movePieceToHandler);
+
+    moveFrom.attr('draggable', false).off('dragstart', dragstartHandler);
+    moveFrom.off('dragend');
+    moveTo.attr('draggable', false).off('drop', dropHandler);
+    moveTo.off('dragover');
+  }
+
+  function bindMoveHandlers() {
+    var moveFrom = $('.chess_board a');
+    var moveTo = $('.chess_board td');
+
+    moveFrom.on('click', movePieceFromHandler);
+    moveTo.on('click', movePieceToHandler);
+
+    if (dndSupported()) {
+      moveFrom.attr('draggable', true).on('dragstart', dragstartHandler);
+      moveTo.on('draggable', true).on('drop', dropHandler);
+      moveTo.on('dragover', function (e) {
+        e.preventDefault();
+        e.originalEvent.dataTransfer.dropEffect = 'move';
+      });
+      moveFrom.on('dragend', function (e) {
+        moveTo.removeClass('moving');
+      });
+    }
+  }
+
   /* socket.io */
 
   function rematchAccepted() {
@@ -256,6 +292,7 @@ $(function() {
       $('.chess_board.black').show();
     }
 
+    $('#clock li.white').addClass('ticking');
     $('#sendMessage').find('input').addClass($side === 'b' ? 'black' : 'white');
   });
 
@@ -265,8 +302,7 @@ $(function() {
 
   $socket.on('opponent-disconnected', function (data) {
     $('.resign').off().remove();
-    $('.chess_board a').off('click', movePieceFromHandler);
-    $('.chess_board td').off('click', movePieceToHandler);
+    
 
     $('#sendMessage').off();
     $('#sendMessage').submit(function (e) {
@@ -288,8 +324,7 @@ $(function() {
     $gameOver = true;
     $('.resign').hide();
     $('.rematch').show();
-    $('.chess_board a').off('click', movePieceFromHandler);
-    $('.chess_board td').off('click', movePieceToHandler);
+    unbindMoveHandlers();
     var winner = data.color === 'w' ? 'Black' : 'White';
     var loser = data.color === 'w' ? 'White' : 'Black';
     var message = loser + ' resigned. ' + winner + ' wins.';
@@ -329,14 +364,13 @@ $(function() {
     if (sec.toString().length === 1) {
       sec = '0' + sec;
     }
-    $('#clock li.' + opp_color).removeClass('ticking');
-    $('#clock li.' + color).addClass('ticking').text(min + ':' + sec);
+    
+    $('#clock li.' + color).text(min + ':' + sec);
   });
 
   $socket.on('countdown-gameover', function (data) {
     $gameOver = true;
-    $('.chess_board a').off('click', movePieceFromHandler);
-    $('.chess_board td').off('click', movePieceToHandler);
+    unbindMoveHandlers();
     var loser = data.color === 'black' ? 'Black' : 'White';
     var winner = data.color === 'black' ? 'White' : 'Black';
     var message = loser + "'s time is out. " + winner + " wins.";
@@ -367,9 +401,14 @@ $(function() {
     $gameOver = false;
 
     $('#clock li').each(function () {
-    $(this).text($time + ':00');
+      $(this).text($time + ':00');
     });
 
+    if ($('#clock li.black').hasClass('ticking')) {
+      $('#clock li.black').removeClass('ticking');
+      $('#clock li.white').addClass('ticking');
+    }
+
     $('#moves tbody tr').empty();
     $('#captured-pieces ul').each(function () {
       $(this).empty();
@@ -391,8 +430,7 @@ $(function() {
       $('.chess_board.black').show();
     }
 
-    $('.chess_board a').on('click', movePieceFromHandler);
-    $('.chess_board td').on('click', movePieceToHandler);
+    bindMoveHandlers();
     $('#sendMessage').find('input').removeClass('white black').addClass($side === 'b' ? 'black' : 'white');
   });
 
@@ -412,14 +450,14 @@ $(function() {
           from=$piece.parent().data('id').toLowerCase(),
           to=$(this).parent().data('id').toLowerCase(),
           promotion=$('#promotion option:selected').val()
-        )
+        );
       }
     } else {
       if ($chess.turn() !== $side) {
         return false;
       }
 
-      if ($piece && isSelected($(this).parent())) {
+      if (e && $piece && isSelected($(this).parent())) {
         unselectPiece($piece.parent());
         $piece = null;
       } else {
@@ -432,8 +470,10 @@ $(function() {
       }
     }
 
-    e.stopImmediatePropagation();
-    e.preventDefault();
+    if (e) { // only on click event, not drag and drop
+      e.stopImmediatePropagation();
+      e.preventDefault();
+    }
   }
 
   function movePieceToHandler(e) {
@@ -446,8 +486,26 @@ $(function() {
     }
   }
 
-  $('.chess_board a').on('click', movePieceFromHandler);
-  $('.chess_board td').on('click', movePieceToHandler);
+  bindMoveHandlers();
+
+  function dndSupported() {
+    return 'draggable' in document.createElement('span');
+  }
+
+  function dragstartHandler(e) {
+    var el = $(this);
+    $drgSrcEl = el;
+    $drgSrcEl.parent().addClass('moving');
+    e.originalEvent.dataTransfer.effectAllowed = 'move';
+    e.originalEvent.dataTransfer.setData('text/html', el.html());
+    movePieceFromHandler.call(this, undefined);
+  }
+
+  function dropHandler(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    movePieceToHandler.call(this, undefined);
+  }
 
   $('#modal-mask, #modal-ok').click(function (e) {
     e.preventDefault();

public/stylesheets/style.css

@@ -569,13 +569,16 @@ table#moves {
       background: #fefefe;
       display: block;
       float: left; }
+      .chess_board tr td.moving {
+        background: #ef9e9c !important; }
       .chess_board tr td a {
         width: 62.5px;
         height: 62.5px;
         font-size: 3.5rem;
         color: #424242;
         text-decoration: none;
-        display: block; }
+        display: block;
+        cursor: pointer; }
 
 .chess_board tr:nth-child(odd) td:nth-child(even),
 .chess_board tr:nth-child(even) td:nth-child(odd) {

public/stylesheets/style.scss

@@ -662,6 +662,10 @@ table#moves {
       display: block;
       float: left;
 
+      &.moving{
+        background: lighten($red, 30%) !important;
+      }
+
       a {
         width: 62.5px;
         height: 62.5px;
@@ -669,6 +673,7 @@ table#moves {
         color: #424242;
         text-decoration: none;
         display: block;
+        cursor: pointer;
       }
     }
   }

views/play.jade

@@ -42,39 +42,39 @@ block content
         ul.b
       table.chess_board.white
         tr
-          td.A8(data-id='A8')
-            a.black.rook(href='#') ♜
-          td.B8(data-id='B8')
-            a.black.knight(href='#') ♞
-          td.C8(data-id='C8')
-            a.black.bishop(href='#') ♝
-          td.D8(data-id='D8')
-            a.black.king(href='#') ♛
-          td.E8(data-id='E8')
-            a.black.queen(href='#') ♚
-          td.F8(data-id='F8')
-            a.black.bishop(href='#') ♝
-          td.G8(data-id='G8')
-            a.black.knight(href="#") ♞
-          td.H8(data-id='H8')
-            a.black.rook(href='#') ♜
+          td.A8(data-id='A8', draggable='true')
+            a.black.rook(draggable='true') ♜
+          td.B8(data-id='B8', draggable='true')
+            a.black.knight(draggable='true') ♞
+          td.C8(data-id='C8', draggable='true')
+            a.black.bishop(draggable='true') ♝
+          td.D8(data-id='D8', draggable='true')
+            a.black.king(draggable='true') ♛
+          td.E8(data-id='E8', draggable='true')
+            a.black.queen(draggable='true') ♚
+          td.F8(data-id='F8', draggable='true')
+            a.black.bishop(draggable='true') ♝
+          td.G8(data-id='G8', draggable='true')
+            a.black.knight(draggable='true') ♞
+          td.H8(data-id='H8', draggable='true')
+            a.black.rook(draggable='true') ♜
         tr
-          td.A7(data-id='A7')
-            a.black.pawn(href='#') ♟
-          td.B7(data-id='B7')
-            a.black.pawn(href='#') ♟
-          td.C7(data-id='C7')
-            a.black.pawn(href='#') ♟
-          td.D7(data-id='D7')
-            a.black.pawn(href='#') ♟
-          td.E7(data-id='E7')
-            a.black.pawn(href='#') ♟
-          td.F7(data-id='F7')
-            a.black.pawn(href='#') ♟
-          td.G7(data-id='G7')
-            a.black.pawn(href='#') ♟
-          td.H7(data-id='H7')
-            a.black.pawn(href='#') ♟
+          td.A7(data-id='A7', draggable='true')
+            a.black.pawn(draggable='true') ♟
+          td.B7(data-id='B7', draggable='true')
+            a.black.pawn(draggable='true') ♟
+          td.C7(data-id='C7', draggable='true')
+            a.black.pawn(draggable='true') ♟
+          td.D7(data-id='D7', draggable='true')
+            a.black.pawn(draggable='true') ♟
+          td.E7(data-id='E7', draggable='true')
+            a.black.pawn(draggable='true') ♟
+          td.F7(data-id='F7', draggable='true')
+            a.black.pawn(draggable='true') ♟
+          td.G7(data-id='G7', draggable='true')
+            a.black.pawn(draggable='true') ♟
+          td.H7(data-id='H7', draggable='true')
+            a.black.pawn(draggable='true') ♟
         tr
           td.A6(data-id='A6')
           td.B6(data-id='B6')
@@ -112,74 +112,74 @@ block content
           td.G3(data-id='G3')
           td.H3(data-id='H3')
         tr
-          td.A2(data-id='A2')
-            a.white.pawn(href='#') ♙
-          td.B2(data-id='B2')
-            a.white.pawn(href='#') ♙
-          td.C2(data-id='C2')
-            a.white.pawn(href='#') ♙
-          td.D2(data-id='D2')
-            a.white.pawn(href='#') ♙
-          td.E2(data-id='E2')
-            a.white.pawn(href='#') ♙
-          td.F2(data-id='F2')
-            a.white.pawn(href='#') ♙
-          td.G2(data-id='G2')
-            a.white.pawn(href='#') ♙
-          td.H2(data-id='H2')
-            a.white.pawn(href='#') ♙
+          td.A2(data-id='A2', draggable='true')
+            a.white.pawn(draggable='true') ♙
+          td.B2(data-id='B2', draggable='true')
+            a.white.pawn(draggable='true') ♙
+          td.C2(data-id='C2', draggable='true')
+            a.white.pawn(draggable='true') ♙
+          td.D2(data-id='D2', draggable='true')
+            a.white.pawn(draggable='true') ♙
+          td.E2(data-id='E2', draggable='true')
+            a.white.pawn(draggable='true') ♙
+          td.F2(data-id='F2', draggable='true')
+            a.white.pawn(draggable='true') ♙
+          td.G2(data-id='G2', draggable='true')
+            a.white.pawn(draggable='true') ♙
+          td.H2(data-id='H2', draggable='true')
+            a.white.pawn(draggable='true') ♙
         tr
-          td.A1(data-id='A1')
-            a.white.rook(href='#') ♖
-          td.B1(data-id='B1')
-            a.white.night(href='#') ♘
-          td.C1(data-id='C1')
-            a.white.bishop(href='#') ♗
-          td.D1(data-id='D1')
-            a.white.king(href='#') ♕
-          td.E1(data-id='E1')
-            a.white.wife(href='#') ♔
-          td.F1(data-id='F1')
-            a.white.bishop(href='#') ♗
-          td.G1(data-id='G1')
-            a.white.night(href='#') ♘
-          td.H1(data-id='H1')
-            a.white.rook(href='#') ♖
+          td.A1(data-id='A1', draggable='true')
+            a.white.rook(draggable='true') ♖
+          td.B1(data-id='B1', draggable='true')
+            a.white.night(draggable='true') ♘
+          td.C1(data-id='C1', draggable='true')
+            a.white.bishop(draggable='true') ♗
+          td.D1(data-id='D1', draggable='true')
+            a.white.king(draggable='true') ♕
+          td.E1(data-id='E1', draggable='true')
+            a.white.wife(draggable='true') ♔
+          td.F1(data-id='F1', draggable='true')
+            a.white.bishop(draggable='true') ♗
+          td.G1(data-id='G1', draggable='true')
+            a.white.night(draggable='true') ♘
+          td.H1(data-id='H1', draggable='true')
+            a.white.rook(draggable='true') ♖
       table.chess_board.black(style='display: none;')
         tr
-          td.H1(data-id='H1')
-            a.white.rook(href='#') ♖
-          td.G1(data-id='G1')
-            a.white.night(href='#') ♘
-          td.F1(data-id='F1')
-            a.white.bishop(href='#') ♗
-          td.E1(data-id='E1')
-            a.white.king(href='#') ♔
-          td.D1(data-id='D1')
-            a.white.queen(href='#') ♕
-          td.C1(data-id='C1')
-            a.white.bishop(href='#') ♗
-          td.B1(data-id='B1')
-            a.white.knight(href='#') ♘
-          td.A1(data-id='A1')
-            a.white.rook(href='#') ♖
+          td.H1(data-id='H1', draggable='true')
+            a.white.rook(draggable='true') ♖
+          td.G1(data-id='G1', draggable='true')
+            a.white.night(draggable='true') ♘
+          td.F1(data-id='F1', draggable='true')
+            a.white.bishop(draggable='true') ♗
+          td.E1(data-id='E1', draggable='true')
+            a.white.king(draggable='true') ♔
+          td.D1(data-id='D1', draggable='true')
+            a.white.queen(draggable='true') ♕
+          td.C1(data-id='C1', draggable='true')
+            a.white.bishop(draggable='true') ♗
+          td.B1(data-id='B1', draggable='true')
+            a.white.knight(draggable='true') ♘
+          td.A1(data-id='A1', draggable='true')
+            a.white.rook(draggable='true') ♖
         tr
-          td.H2(data-id='H2')
-            a.white.pawn(href='#') ♙
-          td.G2(data-id='G2')
-            a.white.pawn(href='#') ♙
-          td.F2(data-id='F2')
-            a.white.pawn(href='#') ♙
-          td.E2(data-id='E2')
-            a.white.pawn(href='#') ♙
-          td.D2(data-id='D2')
-            a.white.pawn(href='#') ♙
-          td.C2(data-id='C2')
-            a.white.pawn(href='#') ♙
-          td.B2(data-id='B2')
-            a.white.pawn(href='#') ♙
-          td.A2(data-id='A2')
-            a.white.pawn(href='#') ♙
+          td.H2(data-id='H2', draggable='true')
+            a.white.pawn(draggable='true') ♙
+          td.G2(data-id='G2', draggable='true')
+            a.white.pawn(draggable='true') ♙
+          td.F2(data-id='F2', draggable='true')
+            a.white.pawn(draggable='true') ♙
+          td.E2(data-id='E2', draggable='true')
+            a.white.pawn(draggable='true') ♙
+          td.D2(data-id='D2', draggable='true')
+            a.white.pawn(draggable='true') ♙
+          td.C2(data-id='C2', draggable='true')
+            a.white.pawn(draggable='true') ♙
+          td.B2(data-id='B2', draggable='true')
+            a.white.pawn(draggable='true') ♙
+          td.A2(data-id='A2', draggable='true')
+            a.white.pawn(draggable='true') ♙
         tr
           td.H3(data-id='H3')
           td.G3(data-id='G3')
@@ -217,39 +217,39 @@ block content
           td.B6(data-id='B6')
           td.A6(data-id='A6')
         tr
-          td.H7(data-id='H7')
-            a.black.pawn(href='#') ♟
-          td.G7(data-id='G7')
-            a.black.pawn(href='#') ♟
-          td.F7(data-id='F7')
-            a.black.pawn(href='#') ♟
-          td.E7(data-id='E7')
-            a.black.pawn(href='#') ♟
-          td.D7(data-id='D7')
-            a.black.pawn(href='#') ♟
-          td.C7(data-id='C7')
-            a.black.pawn(href='#') ♟
-          td.B7(data-id='B7')
-            a.black.pawn(href='#') ♟
-          td.A7(data-id='A7')
-            a.black.pawn(href='#') ♟
+          td.H7(data-id='H7', draggable='true')
+            a.black.pawn(draggable='true') ♟
+          td.G7(data-id='G7', draggable='true')
+            a.black.pawn(draggable='true') ♟
+          td.F7(data-id='F7', draggable='true')
+            a.black.pawn(draggable='true') ♟
+          td.E7(data-id='E7', draggable='true')
+            a.black.pawn(draggable='true') ♟
+          td.D7(data-id='D7', draggable='true')
+            a.black.pawn(draggable='true') ♟
+          td.C7(data-id='C7', draggable='true')
+            a.black.pawn(draggable='true') ♟
+          td.B7(data-id='B7', draggable='true')
+            a.black.pawn(draggable='true') ♟
+          td.A7(data-id='A7', draggable='true')
+            a.black.pawn(draggable='true') ♟
         tr
-          td.H8(data-id='H8')
-            a.black.rook(href='#') ♜
+          td.H8(data-id='H8', draggable='true')
+            a.black.rook(draggable='true') ♜
           td.G8(data-id='G8')
             a.black.knight(href="#") ♞
-          td.F8(data-id='F8')
-            a.black.bishop(href='#') ♝
-          td.E8(data-id='E8')
-            a.black.king(href='#') ♚
-          td.D8(data-id='D8')
-            a.black.queen(href='#') ♛
-          td.C8(data-id='C8')
-            a.black.bishop(href='#') ♝
-          td.B8(data-id='B8')
-            a.black.knight(href='#') ♞
-          td.A8(data-id='A8')
-            a.black.rook(href='#') ♜
+          td.F8(data-id='F8', draggable='true')
+            a.black.bishop(draggable='true') ♝
+          td.E8(data-id='E8', draggable='true')
+            a.black.king(draggable='true') ♚
+          td.D8(data-id='D8', draggable='true')
+            a.black.queen(draggable='true') ♛
+          td.C8(data-id='C8', draggable='true')
+            a.black.bishop(draggable='true') ♝
+          td.B8(data-id='B8', draggable='true')
+            a.black.knight(draggable='true') ♞
+          td.A8(data-id='A8', draggable='true')
+            a.black.rook(draggable='true') ♜
 
     table#moves.clearfix
       thead