Twitch badge support implemented

webroot/script.js

@@ -43,14 +43,27 @@ function gooseAppendMessage(id, type, timestamp, username, text, icon) {
   var html = ""
   if(parseInt(id) > 0 && type.length > 0) {
     var classes = type.split('-'), cl = classes.length, j,
-        colorpref = null
+        colorpref = null, badges = [], platform, bname
     for(j=0;j<cl;j++) { /* detect color preference */
       if(classes[j].startsWith('color'))
         colorpref = classes[j].slice(5) /* remove color word */
+      if(classes[j].startsWith('badge')) { /* remove the class but cache it */
+        badges.push(classes[j].slice(5)) /* remove badge word */
+        classes[j] = "" /* remove the class from the list */
+      }
     }
     html += '<div data-msg-id="' + id + '" class="' + classes.join(' ') +'">'
-    if(icon.length > 0)
-      html += '<span class=icon><img src="' + icon + '"></span>'
+    /* handle badges and icons */
+    html += '<span class=icon>'
+    for(j=0,cl=badges.length;j<cl;j++) { /* iterate over badges */
+      platform = badges[j].slice(0,2) /* first 2 characters denote the platform */
+      bname = badges[j].slice(2) /* thre rest is the badge name itself */
+      html += '<img class=badge src="/badge/{platform}/{badgename}">'
+              .replace('{platform}', platform).replace('{badgename}', bname)
+    }
+    if(icon.length > 0) /* user icon, if present */
+      html += '<img src="' + icon + '">'
+    html += '</span>'
     html += '<span class=timestamp>' + timestamp + '</span>'
     html += '<span class=username'
     if(colorpref) html += ' style="color:' + colorpref + '"'

webroot/style.css

@@ -35,11 +35,11 @@ html, body {
 }
 
 #msglist > div .icon img { /* userpic */
-  max-height: 1.5em;
-  padding: 0 5px;
+  max-height: 16px;
+  padding: 0 3px;
   margin-top: -20px;
   position: relative;
-  top: 4px;
+  top: 3px;
 }
 
 .username {