webchat: join and quit color via css

3 files changed, 17 insertions, 14 deletions

diff --git a/webchat/public/functions.js b/webchat/public/functions.js
index adcf3169..0b8f2d49 100644
--- a/webchat/public/functions.js
+++ b/webchat/public/functions.js
@@ -54,8 +54,8 @@ function getNicklistElement(name) {
 }
 
 function chatboxAppend (chat_from, chat_msg, type) {
-  type = type||'chat'
-  $('<tr><td class="'+type+'_date">'+getCurTime()+'</td><td class="'+type+'_from">'+chat_from+'</td><td class="'+type+'_msg">'+chat_msg+'</td></tr>').insertBefore('#foot');
+  type = type||'msg'
+  $('<tr><td class="date '+type+'_date">'+getCurTime()+'</td><td class="from '+type+'_from">'+chat_from+'</td><td class="msg '+type+'_msg">'+chat_msg+'</td></tr>').insertBefore('#foot');
 
   var elem = document.getElementById('chatter');
   elem.scrollTop = elem.scrollHeight;
diff --git a/webchat/public/handler.js b/webchat/public/handler.js
index 2f9eb2a7..4c13ba80 100644
--- a/webchat/public/handler.js
+++ b/webchat/public/handler.js
@@ -4,27 +4,24 @@ handler.message = function(object) {
   var safe_message = $('<div/>').text(object.msg).html();
   safe_message = replaceURLWithHTMLLinks(safe_message);
   var safe_from = $('<div/>').text(object.nick).html();
-  return chatboxAppend(safe_from, safe_message)
+  return chatboxAppend(safe_from, safe_message, 'msg')
 };
 
 handler.join = function(object) {
   var safe_from = $('<div/>').text(object.from).html();
-  $('<tr><td class="chat_date">'+getCurTime()+'</td><td class="chat_from">'+safe_from+'</td><td class="chat_msg" style="color:#00FF00">joined</td></tr>').insertBefore('#foot');
   $('#nicklist').append('<div class="name">' + safe_from + '</div>') ;
+  return chatboxAppend(safe_from, 'joined', 'join')
 };
 
 handler.quit = function(object) {
   var safe_from = $('<div/>').text(object.from).html();
-  $('<tr><td class="chat_date">'+getCurTime()+'</td><td class="chat_from">'+safe_from+'</td><td class="chat_msg" style="color:#FF0000">quit</td></tr>').insertBefore('#foot');
-  console.log('removing', safe_from);
   $(getNicklistElement(safe_from)).remove();
+  return chatboxAppend(safe_from, 'quit', 'quit')
 };
 
 handler.nicklist = function(object) {
   Object.keys(object.nicklist).forEach(function (nick) {
-//  console.log('nick',nick);
     var hash_from = btoa(nick).replace(/=/g,'_');
-//    $('.name').each(function (i,e) { console.log(i,e); if (e.innerHTML === 'kweb') { $(e).attr("style", "color:green") } })
     $('#nicklist').append('<div class="name">' + nick + '</div>') ;
   });
 };
@@ -32,7 +29,7 @@ handler.nicklist = function(object) {
 handler.nickchange = function(object) {
   var safe_from = $('<div/>').text(object.nick).html();
   var safe_newnick = $('<div/>').text(object.newnick).html();
-  $('<tr><td class="chat_date">'+getCurTime()+'</td><td class="chat_from">'+safe_from+'</td><td class="chat_msg">is now known as '+object.newnick+'</td></tr>').insertBefore('#foot');
   $(getNicklistElement(safe_from)).remove();
   $('#nicklist').append('<div class="name">' + safe_newnick + '</div>') ;
+  return chatboxAppend(safe_from, 'is now known as ' + safe_newnick, 'nick');
 };
diff --git a/webchat/public/reset.css b/webchat/public/reset.css
index 64ba963e..d369bc86 100644
--- a/webchat/public/reset.css
+++ b/webchat/public/reset.css
@@ -58,14 +58,14 @@ q:before, q:after {
   border: 1px solid black;
   color: white;
 }
-.chat_from {
+.from {
   color:grey;
   font-weight: bold;
   text-align: right;
   font-size:12px;
   white-space: nowrap;
 }
-.chat_from:after {
+.from:after {
   content: ":";
   padding-right: 6px;
 }
@@ -88,16 +88,16 @@ q:before, q:after {
 }
 .chat_date,.chat_from,.chat_msg{
 }
-.chat_msg{
+.msg{
   width: 100%;
 }
 a {
   color: red;
 }
-.chat_date {
+.date {
   color: green;
 }
-.chat_date:after {
+.date:after {
   content: "";
   padding-right: 4px;
 }
@@ -118,3 +118,9 @@ a {
   position: absolute;
   bottom: 5px;
 }
+.join_msg {
+  color: #00FF00;
+}
+.quit_msg {
+  color: #FF0000;
+}