fix palette, go bright on bold

[watch-my-terminal.git] / index.html

diff --git a/index.html b/index.html
index d540026..e70dfc7 100644 (file)
--- a/index.html
+++ b/index.html
@@ -6,26 +6,79 @@
        <script src="/socket.io/socket.io.js"></script>
        <script>
                $(function() {
+                       // 8-14 are bolded versions
+                       var palette = [
+                               '2e3436',
+                               'cc0000',
+                               '4e9a06',
+                               'c4a000',
+                               '3465a4',
+                               '75507b',
+                               '06989a',
+                               'd3d7cf',
+                               '555753',
+                               'ef2929',
+                               '8ae234',
+                               'fce94f',
+                               '729fcf',
+                               'ad7fa8',
+                               '34e2e2',
+                               'eeeeec'
+                       ];
                        var $body = $('body');
-                       var lines = 0;
-                       var log = function (str) {
-                               if(lines > 66) {
-                                       $($body.children().get(0)).remove();
-                               } else {
-                                       lines += 1;
-                               }
-                               $body.append($('<div>').text(str));
-                       };
                        var socket = io.connect('http://localhost');
-                       socket.on('write', function (data) {
-                               log(data);
+                       var color_to_css = function(i) {
+                               index = i & 0xff
+                               // lighten the basic 8 colors when they're bold
+                               if (i & 0x10000 && index < 8) {
+                                       index += 8;
+                               }
+                               return 'color: #' + palette[index] + '; ';
+                       }
+                       var bg_color_to_css = function(i) {
+                               return 'background-' + color_to_css((i&0x10000) | ((i&0xff00) >> 8));
+                       }
+                       var stylize = function (txt, style) {
+                               if (txt.length == 0 || style == 0) {
+                                       return txt
+                               }
+                               css = ''
+                               if(style & 0x10000) css += 'font-weight: bold; ';
+                               if(style & 0x20000) css += 'text-decoration: underline; ';
+                               if(style & 0x40000) css += 'text-decoration: underline; '; // blink
+                               if(style & 0x80000) css += 'text-decoration: line-through; '; // invisible
+                               if(style & 0x000ff) css += color_to_css(style);
+                               if(style & 0x0ff00) css += bg_color_to_css(style);
+                               return $('<span style="'+css+'"></span>').text(txt);
+                       }
+                       socket.on('init', function (v) {
+                               $body.children().remove();
+                               for(i in v.text) {
+                                       div = $('<div>');
+                                       txt = ''
+                                       a = 0;
+                                       for(j in v.text[i]) {
+                                               if(v.attributes[i][j] != a) {
+                                                       if(txt.length) {
+                                                               div.append(stylize(txt, a));
+                                                               txt = ''
+                                                       }
+                                                       a = v.attributes[i][j]
+                                               }
+                                               txt += v.text[i][j]
+                                       }
+                                       if(txt.length) {
+                                               div.append(stylize(txt, a));
+                                       }
+                                       $body.append(div);
+                               }
                        });
                });
        </script>
        <style>
                body {
-                       color: white;
-                       background: black;
+                       color: #d3d7cf;
+                       background: #2e3436;
                        font-family: monospace;
                        font-size: 12px;
                        line-height: 14px;