Browse files

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.
  • Loading branch information...
1 parent 8418058 commit 7b21660d351de9f9667603fbb66df0fdb548c79e Paul Maxan committed Mar 26, 2012
Showing with 43 additions and 42 deletions.
  1. +3 −3 irc.js
  2. +5 −9 public/css/irc.css
  3. +7 −11 public/index.html
  4. +28 −19 public/js/app.js
  5. BIN public/rocket-md-right-small.png
View
6 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
View
14 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;
}
View
18 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 @@
</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>
View
47 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 () {
View
BIN public/rocket-md-right-small.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 7b21660

Please sign in to comment.