add resign option

public/javascripts/play.js

@@ -122,6 +122,9 @@ function movePiece(from, to, promotion, rcvd) {
       else if ($chess.insufficient_material())
         result = "Draw. (Insufficient Material)";
       fs.text(result);
+      
+      $('.resign').hide();
+      alert(result);
     }
 
     /* Add all moves to the table */
@@ -174,6 +177,11 @@ $(document).ready(function () {
     window.location = '/';
   });
 
+  $socket.on('opponent-resigned', function (data) {
+    alert("Your opponent has resigned. You won!");
+    window.location = '/';
+  });
+
   $socket.on('full', function (data) {
     alert("This game already has two players. You have to create a new one.");
     window.location = '/';
@@ -224,4 +232,10 @@ $(document).ready(function () {
       )
     }
   });
+
+  $('.resign').click(function (e) {
+    $socket.emit('resign');
+    alert('You resigned.');
+    window.location = '/';
+  });
 });

public/stylesheets/style.css

@@ -9,7 +9,7 @@ html {
   font-size: 100%;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%; }
 
@@ -206,6 +206,22 @@ a.button {
 a.button:hover {
   color: white; }
 
+.resign {
+  background: #d12521;
+  border-color: #bb211e;
+  box-shadow: inset 0 -2px #bb211e;
+  margin-right: 10px; }
+
+.resign:hover {
+  background: #de322e;
+  border-bottom: 2px solid #c82320;
+  box-shadow: inset 0 -2px #c82320;
+  -moz-transition: all 0.2s ease-in-out;
+  -webkit-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out; }
+
 p#waiting {
   font-family: 'Cherry Swash';
   font-size: 1.275rem;

public/stylesheets/style.scss

@@ -213,6 +213,19 @@ a.button:hover{
   color: white;
 }
 
+.resign {
+  background: $red;
+  border-color: darken($red, 5%);
+  box-shadow: inset 0 -2px darken($red, 5%);
+  margin-right: 10px;
+}
+.resign:hover {
+  background: lighten($red, 5%);
+  border-bottom: 2px solid darken($red, 2%);
+  box-shadow: inset 0 -2px darken($red, 2%);
+  @include all-transition;
+}
+
 p#waiting {
   font-family: 'Cherry Swash';
   font-size: 1.275rem;

server.js

@@ -131,20 +131,28 @@ io.sockets.on('connection', function (socket) {
     });
   });
 
+  socket.on('resign', function(data) {
+    cancelGame('opponent-resigned', socket);
+  });
+
   socket.on('disconnect', function () {
-    for (token in games) {
-      var game = games[token];
+    cancelGame('opponent-disconnected', socket);
+  });
+});
 
-      for (j in game.players) {
-        var player = game.players[j];
+function cancelGame(event, socket) {
+  for (var token in games) {
+    var game = games[token];
 
-        if (player.socket == socket) {
-          var opponent = game.players[Math.abs(j - 1)];
+    for (var j in game.players) {
+      var player = game.players[j];
 
-          delete games[token];
-          opponent.socket.emit('opponent-disconnected');
-        }
+      if (player.socket == socket) {
+        var opponent = game.players[Math.abs(j - 1)];
+
+        delete games[token];
+        opponent.socket.emit(event);
       }
     }
-  });
-});
+  }
+}

views/play.jade

@@ -3,6 +3,7 @@ extends layout
 block content
   header.clearfix
     a.button(href='/') New game
+    a.button.resign Resign
     a.about-in-play(href='/about/') About Reti Chess
 
   script(type='text/javascript')