Merge branch 'master' of github.com:krebscode/painload

2 files changed, 80 insertions, 3 deletions

diff --git a/webchat/public/client.js b/webchat/public/client.js
index 95b67ad0..ca71b537 100644
--- a/webchat/public/client.js
+++ b/webchat/public/client.js
@@ -6,9 +6,36 @@ 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;
+};
+
+$(function updateTime () {
+  $('#time').html(getCurTime());
+  setTimeout(updateTime,'1000');
+  return true;
+});
+
 var nick;
 
 $(function connect() {
@@ -25,8 +52,11 @@ $(function connect() {
       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();
-  $('#chatbox').append('<tr><td class="chat_from">'+safe_from+'</td><td class="chat_msg">'+safe_message+'</td></tr>');
+      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;
 
     } catch (error) {
       console.log(error);
diff --git a/webchat/public/reset.css b/webchat/public/reset.css
index 17e10567..65f68058 100644
--- a/webchat/public/reset.css
+++ b/webchat/public/reset.css
@@ -21,6 +21,7 @@ time, mark, audio, video {
   border: 0;
   font-size: 100%;
   font: inherit;
+  font-family: monospace;
   vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
@@ -47,13 +48,21 @@ q:before, q:after {
 #chatbox {
   border-collapse: collapse;
   border-spacing: 0;
-  background-color: black;
+  color: white;
+  width: 100%;
+  vertical-align: bottom;
+}
+#input{
+  width: 100%;
+  background-color: #555555;
+  border: 1px solid black;
   color: white;
 }
 .chat_from {
   color:grey;
   font-weight: bold;
   text-align: right;
+  font-size:12px;
 }
 .chat_from:after {
   content: ":";
@@ -67,6 +76,44 @@ q:before, q:after {
   left: 0;
   right: 0;
 }
+#chatter {
+  width: 75%;
+  height: 100%;
+  background-color: black;
+  opacity: 0.8;
+  overflow: auto;
+  overflow-x: hidden;
+  vertical-align: bottom;
+}
+.chat_date,.chat_from,.chat_msg{
+}
+.chat_msg{
+  width: 100%;
+}
 a {
   color: red;
 }
+.chat_date {
+  color: green;
+}
+.chat_date:after {
+  content: "";
+  padding-right: 4px;
+}
+#time {
+  color: #00FF00;
+}
+#sideboard {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 24%;
+  background-color: black;
+  opacity: 0.8;
+}
+#links {
+  font-size: 14px;
+  position: absolute;
+  bottom: 5px;
+}
\ No newline at end of file