replace alerts with modal windows

public/javascripts/play.js

@@ -5,6 +5,24 @@ $(function() {
   var $chess = new Chess();
   var $gameOver = false;
 
+  function modalKeydownHandler(e){
+    e.preventDefault();
+    if (e.which === 13) {
+      hideModal();
+    }
+  }
+
+  function showModal(message) {
+    $('#modal-message').text(message);
+    $('#modal-mask').fadeIn(200);
+    $(document).on('keydown', modalKeydownHandler);
+  }
+
+  function hideModal() {
+    $('#modal-mask').fadeOut(200);
+    $(document).off('keydown', modalKeydownHandler);
+  }
+
   function selectPiece(el) {
     el.addClass('selected');
   }
@@ -156,12 +174,13 @@ $(function() {
       }
 
       if ($chess.game_over()) {
+        $gameOver = true;
         $socket.emit('timer-clear-interval', {
           'token': $token
         });
 
-        $('.resign').hide();
-        alert(result);
+        $('.resign').off().remove();
+        showModal(result);
       } else {
         if ($chess.turn() === 'b') {
           $socket.emit('timer-black', {
@@ -205,22 +224,27 @@ $(function() {
   });
 
   $socket.on('opponent-disconnected', function (data) {
-    $('.resign').remove();
+    $('.resign').off().remove();
     $('.chess_board a').off();
     $('#sendMessage').off();
     $('#sendMessage').submit(function(e) {
       e.preventDefault();
-      alert("Your opponent has diconnected. You can't send messages.");
+      showModal("Your opponent has diconnected. You can't send messages.");
     });
+
+    if (!$gameOver) {
+      showModal("Your opponent has disconnected.");
+    }
   });
 
   $socket.on('player-resigned', function (data) {
-    $('.resign').remove();
+    $gameOver = true;
+    $('.resign').off().remove();
     $('.chess_board a').off();
     var winner = data.color === 'w' ? 'Black' : 'White';
     var loser = data.color === 'w' ? 'White' : 'Black';
     var message = loser + ' resigned. ' + winner + ' wins.';
-    alert(message);
+    showModal(message);
     $('.feedback-move').text('');
     $('.feedback-status').text(message);
   });
@@ -261,12 +285,13 @@ $(function() {
   });
 
   $socket.on('countdown-gameover', function (data) {
+    $gameOver = true;
     $('.chess_board a').off();
     var loser = data.color === 'black' ? 'Black' : 'White';
     var winner = data.color === 'black' ? 'White' : 'Black';
     var message = loser + "'s time is out. " + winner + " won.";
-    $('.resign').hide();
-    alert(message);
+    $('.resign').off().remove();
+    showModal(message);
     $('.feedback-move').text('');
     $('.feedback-status').text(message);
   });
@@ -321,6 +346,15 @@ $(function() {
     }
   });
 
+  $('#modal-mask, #modal-ok').click(function (e) {
+    e.preventDefault();
+    hideModal();
+  });
+
+  $('#modal-window').click(function (e) {
+    e.stopPropagation();
+  });
+
   $('.resign').click(function (e) {
     $socket.emit('resign', {
       'token': $token,

public/stylesheets/style.css

@@ -59,6 +59,9 @@ a:hover {
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out; }
 
+a:focus {
+  outline: none; }
+
 p {
   text-align: left;
   margin-bottom: 1em;
@@ -99,6 +102,42 @@ h3 {
 .last-target {
   background: #77d1df !important; }
 
+#modal-mask {
+  display: none;
+  cursor: pointer;
+  position: fixed;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  background: #444;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 10; }
+
+#modal-window {
+  width: 420px;
+  height: 180px;
+  position: fixed;
+  background: #fff;
+  top: 50%;
+  left: 50%;
+  margin-left: -210px;
+  margin-top: -90px;
+  border: 8px solid #5e4a60;
+  box-shadow: 0 10px 30px #333;
+  cursor: auto;
+  z-index: 15; }
+  #modal-window p {
+    text-align: center;
+    padding: 1.5em; }
+  #modal-window .button {
+    position: absolute;
+    left: 50%;
+    bottom: 1em;
+    margin-left: -60px; }
+    #modal-window .button:active {
+      top: auto;
+      bottom: calc(1em + 1px); }
+
 .chat {
   text-decoration: none;
   color: #248a99;

public/stylesheets/style.scss

@@ -59,7 +59,11 @@ a {
 a:hover { 
   color: $blue;
   text-decoration: none; 
-  @include all-transition }
+  @include all-transition
+}
+a:focus{
+  outline: none;
+}
 
 p {
   text-align: left;
@@ -105,6 +109,50 @@ h3 {
 .last-target{
   background: lighten($blue, 20%) !important;
 }
+
+#modal-mask{
+  display: none;
+  cursor: pointer;
+  position: fixed;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  background: #444;
+  background: rgba(0, 0, 0, .7);
+  z-index: 10;
+}
+
+#modal-window{
+  width: 420px;
+  height: 180px;
+  position: fixed;
+  background: #fff;
+  top: 50%;
+  left: 50%;
+  margin-left: -210px;
+  margin-top: -90px;
+  border: 8px solid lighten($dark-purple, 10%);
+  box-shadow: 0 10px 30px #333;
+  cursor: auto;
+  z-index: 15;
+
+  p{
+    text-align: center;
+    padding: 1.5em;
+  }
+  .button{
+    position: absolute;
+    left: 50%;
+    bottom: 1em;
+    margin-left: -60px;
+
+    &:active{
+      top: auto;
+      bottom: calc(1em + 1px);
+    }
+  }
+}
+
 .chat{
   text-decoration: none;
   color: darken($blue, 10%);
@@ -292,9 +340,6 @@ input.game_link {
 .button:active{
   top: 1px;
 }
-.button:focus{
-  outline: none;
-}
 
 a.button{
   width: 120px;

server.js

@@ -84,9 +84,6 @@ io.sockets.on('connection', function (socket) {
     }
     game = games[data.token];
 
-    //join room
-    socket.join(data.token);
-
     if (game.players.length >= 2) {
       socket.emit('full');
       return;
@@ -102,6 +99,9 @@ io.sockets.on('connection', function (socket) {
       color = colors[Math.floor(Math.random() * 2)];
     }
 
+    //join room
+    socket.join(data.token);
+    
     games[data.token].players.push({
       'id': socket.id,
       'socket': socket,
@@ -192,7 +192,7 @@ function runTimer(color, token, socket) {
   var player, time_left, game = games[token];
 
   if (!game) return;
-  
+
   for (var i in game.players) {
     player = game.players[i];
 

views/layout.jade

@@ -18,7 +18,10 @@ html
     //if IE
       script(src='http://html5shiv.googlecode.com/svn/trunk/html5.js')
   body
-    
+    #modal-mask
+      #modal-window
+        p#modal-message Message.
+        a#modal-ok.button(href='#') OK
     #container_wrapper.clearfix
       #container.clearfix
         block content