Added a small rocket.

Added a small delay when disconnecting so there is no flickering when user purposefully disconnects. The login, if successful, end at the end of motd, currently not displayed still. The case of identical nick is handled. The case of password is left to a notice for now. Chances are that we will intoduce a command for that. Modified the spinner to adjust the login form. Removed the status bar and associated css. Still some is left. motd enabled fully, mind you we only need to signal the end of it for our current functionality.
nodester · Mar 26, 2012 · 7b21660 · 7b21660
1 parent 8418058
commit 7b21660
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 42 deletions.
diff --git a/irc.js b/irc.js
@@ -48,7 +48,7 @@ console.log('IRC#nodester is running on %d',app.address().port)
 /*
  * Sockets stuff
 */
-//io.set('log level', 1); //reduce debug messages
+io.set('log level', 1); //reduce debug messages
 io.sockets.on('connection', function (client) {
   var socket = client;
   var irc = null;
@@ -170,7 +170,7 @@ io.sockets.on('connection', function (client) {
  * As it serves no practical purpose, it is commented out.
  * uncomment to use. Do not forget to uncomment the 
  * corresponding code on the UA side
- *   
+ */   
         irc.addListener('372', function (raw) {
             client.send(JSON.stringify({
               messagetype: "motd",
@@ -190,7 +190,7 @@ io.sockets.on('connection', function (client) {
               from: (raw.server)
             }));
         });
- */
+ /**/
 
 /*
  * NOTICE

diff --git a/public/css/irc.css b/public/css/irc.css
@@ -26,11 +26,6 @@ body {
 	margin-left: auto;   margin-right: auto;   width: 100%;top:30px;
 	text-align:center;
 }
-.loader { 
-	margin-left: auto;   margin-right: auto;   width: 8em;top:30px;
-	text-align:center;
-	margin-top:30px;
-}
 .btn.real {
 	background-image: -moz-linear-gradient(top, white, #E6E6E6);
 	background-image: -ms-linear-gradient(top, white, #E6E6E6);
@@ -127,13 +122,14 @@ a {
 }
 .spinner {
 	margin-left:135px;
+	top: 17px;
 }
-#statusmsg {
-	position: relative;
-	margin-top: 30px;
+
+#login-msg {
 	text-align: center;
-	font-weight:bold;
+	color: green;
 }
+
 #top_section {
 	padding: 0 151px 0 0;
 }

diff --git a/public/index.html b/public/index.html
@@ -16,18 +16,18 @@
     <div class="rocket">
       <h2>IRC #nodester channel</h2>
       <br />
-	  <p class="off" style="color:red;" id="wrong"> You need to specify a valid nickname</p>
-      <p class="off" style="color:green;" id="login-msg"></p>
-	  <form id="join-form">
-	    <input type="text" id="nick" class="btn" placeholder="username">
-	    <button href="#" class="btn btn-info" id="join"> Join</button>
-	  </form>
+      <p class="off" style="color:red;" id="wrong"> You need to specify a valid nickname</p>
+      <p class="off" id="login-msg"></p>
+      <form id="join-form">
+        <input type="text" id="nick" class="btn" placeholder="username">
+        <button href="#" class="btn btn-info" id="join"> Join</button>
+      </form>
     </div>
   </div>
 
   <div id="chat_wrapper" class="off">
     <div id="rocket"  class="header" style="background: #FFD720;">
-      <img src="/rocket-md-right.png">
+      <img src="/rocket-md-right-small.png">
       <span> IRC #nodester </span>
     </div>
     <div id="top_section">
@@ -46,10 +46,6 @@ <h2>IRC #nodester channel</h2>
      </div>
   </div>
 </div>
-<div id="statusBar" class="off">
-  <div id="spiner"></div>
-  <p id="statusmsg"></p>
-</div>
 <div id="js">
   <script src="//code.jquery.com/jquery.js" type="text/javascript"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js" type="text/javascript"></script>

diff --git a/public/js/app.js b/public/js/app.js
@@ -21,10 +21,10 @@ $(document).ready(function(){
         lines     : 12,
         length    : 7,
         width     : 4,
-        radius    : 10,
+        radius    : 2.8,
         color     : '#000',
         speed     : 1,
-        trail     : 60,
+        trail     : 40,
         shadow    : false,
         hwaccel   : false,
         className : 'spinner',
@@ -46,14 +46,15 @@ $(document).ready(function(){
         if ($('#nick').val() !== '') {
             $('#wrong').addClass('off');
             $('#login-msg').removeClass('off');
+            chatBody.text("");
             if (sock !== null && sock.socket.connected === false) {
                 sock.socket.reconnect();
             } else {
                 sock = io.connect('http://'+window.location.host);
                 sock.on('message', handleMessage);
                 sock.on('disconnect', handleDisconnect);
                 sock.on('connect', handleConnect);
-            };           
+            };
         } else {
             $('#wrong').removeClass('off');
         }
@@ -155,6 +156,7 @@ $(document).ready(function(){
             var isSelf = (obj.from == nickname) ? true : false;
             switch (obj.messagetype) {
                 case "433":  //nick already in use
+                    window.spinner.stop();
                     sock.disconnect();
                     $('#login-msg').addClass('off');
                     $('#wrong').text("");
@@ -196,25 +198,24 @@ $(document).ready(function(){
                      * you must enable the server corresponding part as well in irc.js
                      */
                     //appendEvent(obj.from, obj.messagetype, false);
+
+                    enableIrcNotices(true);
+                    //we are only joining one channel, and we will only arrive once here
+                    //indicating a successful login
+                    //we display the main form
+                    window.spinner.stop();
+                    $('<meta/>', {content: nick, name: 'nick'}).appendTo($('head'));
+                    $('#chat_wrapper').removeClass('off');
+                    $('#text_input').focus();
+                    appendEvent("IRC #nodester", "connected", false);
+                    logBox.slideToggle();
                     break;
                 case "join":
                     appendEvent(obj.from, obj.messagetype, isSelf);
                     if (isSelf == false) {
                         nicks.push(obj.from);
                         nicks.sort(cisort);
                         nicksToList();
-                    } else {
-                        //successful login
-                        //clean up the main form
-                        chatBody.text("");
-                        logBox.slideToggle();
-                        statusBar.removeClass('off').addClass('loader box');
-                        $('<meta/>', {content: nick, name: 'nick'}).appendTo($('head'));
-                        appendEvent("IRC #nodester", "connected", false);
-                        $('#chat_wrapper').removeClass('off');
-                        $('#text_input').focus();
-                        statusBar.addClass('off');
-                        enableIrcNotices(true);
                     }
                     break;
                 case "quit":
@@ -239,15 +240,23 @@ $(document).ready(function(){
 
     var handleConnect = function() {
         var nick = window.nick = getNickname($('#nick').val());
-        $('#login-msg').text(' Joining as '+nick+'...' );
+        $('#login-msg').text("Joining as " + nick + "...");
         enableIrcNotices(false);
         sock.send(JSON.stringify({ nickname: nick }));
+        //start spinner
+        window.target = document.getElementById('join-form');
+        window.spinner = new Spinner(opts).spin(window.target);
     };
 
     var handleDisconnect = function() {
-        appendEvent("*", "disconnected", false);
-        nicks = [];
-        nicksToList();
+        //set a time delay for disconnect
+        //in case we exit the form we do not want the user to see it
+        //the socket has a reconnect timeout does not help us with irc here
+        setTimeout( function () {
+            appendEvent("*", "disconnected", false);
+            nicks = [];
+            nicksToList();
+        }, 5000);
     };
 
     var sendMessage = function () {

diff --git a/public/rocket-md-right-small.png b/public/rocket-md-right-small.png