webchat: refactored code

5 files changed, 152 insertions, 54 deletions

diff --git a/webchat/public/client.js b/webchat/public/client.js
index ca71b537..4842d9c2 100644
--- a/webchat/public/client.js
+++ b/webchat/public/client.js
@@ -1,34 +1,4 @@
-function replaceURLWithHTMLLinks (text) {
-  var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
-  return text.replace(exp,"<a href='$1'>$1</a>");
-}
-function setMaybeNick (input) {
-  var match = /^\/nick\s+(.+)$/.exec(input);
-  if (match) {
-    nick = match[1];
-    $('#nick').html(nick);
-  }
-}
-
-function getCurTime () {
-  date = new Date;
-  h = date.getHours();
-  if(h<10)
-  {
-    h = "0"+h;
-  }
-  m = date.getMinutes();
-  if(m<10)
-  {
-    m = "0"+m;
-  }
-  s = date.getSeconds();
-  if(s<10)
-  {
-    s = "0"+s;
-  }
-  return ''+h+':'+m+':'+s;
-};
+var settings = {}
 
 $(function updateTime () {
   $('#time').html(getCurTime());
@@ -36,8 +6,6 @@ $(function updateTime () {
   return true;
 });
 
-var nick;
-
 $(function connect() {
   sock = new SockJS('/echo');
 
@@ -50,16 +18,11 @@ $(function connect() {
     try {
       var object = JSON.parse(e.data);
       console.log(object.message);
-      var safe_message = $('<div/>').text(object.message).html();
-      safe_message = replaceURLWithHTMLLinks(safe_message);
-      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">'+safe_message+'</td></tr>').insertBefore('#foot');
-
-      var elem = document.getElementById('chatter');
-      elem.scrollTop = elem.scrollHeight;
+      clientParser(object);
 
     } catch (error) {
       console.log(error);
+      throw error;
     }
   };
   sock.onclose = function(event) {
@@ -77,18 +40,11 @@ $(function() {
       e.preventDefault();
       e.stopPropagation();
       e.stopImmediatePropagation();
-      setMaybeNick($('#input').val());
-      var sendObj = {
-        message: $('#input').val(),
-      };
-
-      if (typeof nick === 'string') {
-        sendObj.nick = nick;
-      };
-
-      sock.send(JSON.stringify(sendObj));
+      var input = ($('#input').val());
       $('#input').val('');
-      return;
+
+      var command = inputParser(input)
+      return (commands[command.method] || commands.badcommand)(settings, command.params)
     }
   });
 
diff --git a/webchat/public/commands.js b/webchat/public/commands.js
new file mode 100644
index 00000000..8cd3bba1
--- /dev/null
+++ b/webchat/public/commands.js
@@ -0,0 +1,25 @@
+var commands = {}
+
+commands.say = function (settings, params) {
+  var sendObj = {
+    method: 'say',
+    params: { message: params },
+  };
+  sock.send(JSON.stringify(sendObj))
+}
+
+commands.nick = function (settings, params) {
+  settings.nick = params
+  var sendObj = {
+    method: 'nick',
+    params: { nick: params },
+  }
+  sock.send(JSON.stringify(sendObj))
+}
+
+commands.badcommand = function (settings, params) {
+  console.log("error");
+  chatboxAppend( '<span class="from_system">error</span>', 'command not found' )
+
+  
+}
diff --git a/webchat/public/functions.js b/webchat/public/functions.js
new file mode 100644
index 00000000..ddd3aad6
--- /dev/null
+++ b/webchat/public/functions.js
@@ -0,0 +1,117 @@
+function inputParser (str) {
+  var match = /^\/([a-z]+)(?:\s+(.*\S))?\s*$/.exec(str)
+  if (match) {
+    return { method: match[1], params: match[2] }
+  } else {
+    return { method: 'say', params: str }
+  }
+}
+
+
+function clientParser(object) {
+  console.log(object)
+  switch (object.type) {
+    case 'message':
+      return printMessage(object);
+    case 'join':
+      return handleJoin(object);
+    case 'quit':
+      return handleQuit(object);
+    case 'nicklist': 
+      return handleNicklist(object);
+    case 'nickchange':
+      return handleNickchange(object);
+  }
+};
+
+function handleJoin(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>') ;
+};
+
+function handleQuit(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();
+};
+
+function handleNicklist(object) {
+  Object.keys(object.message).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>') ;
+  });
+};
+
+function handleNickchange(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_from + '</div>') ;
+};
+
+function replaceURLWithHTMLLinks (text) {
+  var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
+  return text.replace(exp,"<a class=chat_link href='$1'>$1</a>");
+}
+
+function setMaybeNick (input) {
+  if (match) {
+    nick = match[1];
+    $('#nick').html(nick);
+  }
+}
+function sortNicklist () {
+};
+
+function getNicklistElement(name) { 
+  var el;
+  $('.name').each(function (i,e) {
+    if (e.innerHTML === name) {
+      if (typeof el !== 'undefined') {
+        throw new Error('duplicate name: ' + name);
+      };
+      el = e;
+    };
+  });
+  return el;
+}
+
+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');
+
+  var elem = document.getElementById('chatter');
+  elem.scrollTop = elem.scrollHeight;
+};
+
+function printMessage(object) {
+  var safe_message = $('<div/>').text(object.message).html();
+  safe_message = replaceURLWithHTMLLinks(safe_message);
+  var safe_from = $('<div/>').text(object.nick).html();
+  return chatboxAppend(safe_from, safe_message)
+};
+
+function getCurTime () {
+  date = new Date;
+  h = date.getHours();
+  if(h<10)
+  {
+    h = "0"+h;
+  }
+  m = date.getMinutes();
+  if(m<10)
+  {
+    m = "0"+m;
+  }
+  s = date.getSeconds();
+  if(s<10)
+  {
+    s = "0"+s;
+  }
+  return ''+h+':'+m+':'+s;
+};
diff --git a/webchat/public/krebs.png b/webchat/public/krebs.png
index 263d5b1c..5762e7f4 100644
--- a/webchat/public/krebs.png
+++ b/webchat/public/krebs.png
diff --git a/webchat/public/reset.css b/webchat/public/reset.css
index 65f68058..4139aca5 100644
--- a/webchat/public/reset.css
+++ b/webchat/public/reset.css
@@ -21,7 +21,6 @@ time, mark, audio, video {
   border: 0;
   font-size: 100%;
   font: inherit;
-  font-family: monospace;
   vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
@@ -33,6 +32,7 @@ body {
   line-height: 1;
   background-color: black;
   color: white;
+  font-family: monospace;
 }
 ol, ul {
   list-style: none;
@@ -54,7 +54,7 @@ q:before, q:after {
 }
 #input{
   width: 100%;
-  background-color: #555555;
+  background-color: #221111;
   border: 1px solid black;
   color: white;
 }
@@ -116,4 +116,4 @@ a {
   font-size: 14px;
   position: absolute;
   bottom: 5px;
-}
\ No newline at end of file
+}