implement colors and text attributes

4 files changed, 338 insertions, 40 deletions

diff --git a/teleterm-web/src/views/watch.rs b/teleterm-web/src/views/watch.rs
index 841b438..1cfb8ab 100644
--- a/teleterm-web/src/views/watch.rs
+++ b/teleterm-web/src/views/watch.rs
@@ -20,6 +20,7 @@ pub(crate) fn render(model: &crate::model::Model) -> Node<crate::Msg> {
             }
             row.push(seed::td![
                 seed::attrs! { At::Class => "cell" },
+                style_for_cell(cell),
                 contents
             ])
         }
@@ -28,3 +29,301 @@ pub(crate) fn render(model: &crate::model::Model) -> Node<crate::Msg> {
 
     seed::table![seed::attrs! { At::Class => "grid" }, grid]
 }
+
+fn style_for_cell(cell: &vt100::Cell) -> seed::dom_types::Style {
+    let mut fgcolor = cell.fgcolor();
+    let mut bgcolor = cell.bgcolor();
+    if cell.inverse() {
+        if fgcolor == bgcolor {
+            fgcolor = vt100::Color::Rgb(0, 0, 0);
+            bgcolor = vt100::Color::Rgb(0xd3, 0xd3, 0xd3);
+        } else {
+            std::mem::swap(&mut fgcolor, &mut bgcolor);
+        }
+    }
+    seed::style! {
+        St::Color => color(fgcolor, cell.bold()),
+        St::BackgroundColor => color(bgcolor, false),
+        St::FontStyle => if cell.italic() { "italic" } else { "normal" },
+        St::TextDecoration => if cell.underline() {
+            "underline"
+        } else {
+            "none"
+        },
+    }
+}
+
+fn color(color: vt100::Color, bold: bool) -> Option<String> {
+    match color {
+        vt100::Color::Default => None,
+        vt100::Color::Idx(n) => Some(indexed_color(n, bold).to_string()),
+        vt100::Color::Rgb(r, g, b) => {
+            Some(format!("#{:02x}{:02x}{:02x}", r, g, b))
+        }
+    }
+}
+
+fn indexed_color(mut idx: u8, bold: bool) -> &'static str {
+    if idx < 8 && bold {
+        idx += 8;
+    }
+
+    match idx {
+        0 => "#000000",
+        1 => "#800000",
+        2 => "#008000",
+        3 => "#808000",
+        4 => "#000080",
+        5 => "#800080",
+        6 => "#008080",
+        7 => "#c0c0c0",
+        8 => "#808080",
+        9 => "#ff0000",
+        10 => "#00ff00",
+        11 => "#ffff00",
+        12 => "#0000ff",
+        13 => "#ff00ff",
+        14 => "#00ffff",
+        15 => "#ffffff",
+        16 => "#000000",
+        17 => "#00005f",
+        18 => "#000087",
+        19 => "#0000af",
+        20 => "#0000d7",
+        21 => "#0000ff",
+        22 => "#005f00",
+        23 => "#005f5f",
+        24 => "#005f87",
+        25 => "#005faf",
+        26 => "#005fd7",
+        27 => "#005fff",
+        28 => "#008700",
+        29 => "#00875f",
+        30 => "#008787",
+        31 => "#0087af",
+        32 => "#0087d7",
+        33 => "#0087ff",
+        34 => "#00af00",
+        35 => "#00af5f",
+        36 => "#00af87",
+        37 => "#00afaf",
+        38 => "#00afd7",
+        39 => "#00afff",
+        40 => "#00d700",
+        41 => "#00d75f",
+        42 => "#00d787",
+        43 => "#00d7af",
+        44 => "#00d7d7",
+        45 => "#00d7ff",
+        46 => "#00ff00",
+        47 => "#00ff5f",
+        48 => "#00ff87",
+        49 => "#00ffaf",
+        50 => "#00ffd7",
+        51 => "#00ffff",
+        52 => "#5f0000",
+        53 => "#5f005f",
+        54 => "#5f0087",
+        55 => "#5f00af",
+        56 => "#5f00d7",
+        57 => "#5f00ff",
+        58 => "#5f5f00",
+        59 => "#5f5f5f",
+        60 => "#5f5f87",
+        61 => "#5f5faf",
+        62 => "#5f5fd7",
+        63 => "#5f5fff",
+        64 => "#5f8700",
+        65 => "#5f875f",
+        66 => "#5f8787",
+        67 => "#5f87af",
+        68 => "#5f87d7",
+        69 => "#5f87ff",
+        70 => "#5faf00",
+        71 => "#5faf5f",
+        72 => "#5faf87",
+        73 => "#5fafaf",
+        74 => "#5fafd7",
+        75 => "#5fafff",
+        76 => "#5fd700",
+        77 => "#5fd75f",
+        78 => "#5fd787",
+        79 => "#5fd7af",
+        80 => "#5fd7d7",
+        81 => "#5fd7ff",
+        82 => "#5fff00",
+        83 => "#5fff5f",
+        84 => "#5fff87",
+        85 => "#5fffaf",
+        86 => "#5fffd7",
+        87 => "#5fffff",
+        88 => "#870000",
+        89 => "#87005f",
+        90 => "#870087",
+        91 => "#8700af",
+        92 => "#8700d7",
+        93 => "#8700ff",
+        94 => "#875f00",
+        95 => "#875f5f",
+        96 => "#875f87",
+        97 => "#875faf",
+        98 => "#875fd7",
+        99 => "#875fff",
+        100 => "#878700",
+        101 => "#87875f",
+        102 => "#878787",
+        103 => "#8787af",
+        104 => "#8787d7",
+        105 => "#8787ff",
+        106 => "#87af00",
+        107 => "#87af5f",
+        108 => "#87af87",
+        109 => "#87afaf",
+        110 => "#87afd7",
+        111 => "#87afff",
+        112 => "#87d700",
+        113 => "#87d75f",
+        114 => "#87d787",
+        115 => "#87d7af",
+        116 => "#87d7d7",
+        117 => "#87d7ff",
+        118 => "#87ff00",
+        119 => "#87ff5f",
+        120 => "#87ff87",
+        121 => "#87ffaf",
+        122 => "#87ffd7",
+        123 => "#87ffff",
+        124 => "#af0000",
+        125 => "#af005f",
+        126 => "#af0087",
+        127 => "#af00af",
+        128 => "#af00d7",
+        129 => "#af00ff",
+        130 => "#af5f00",
+        131 => "#af5f5f",
+        132 => "#af5f87",
+        133 => "#af5faf",
+        134 => "#af5fd7",
+        135 => "#af5fff",
+        136 => "#af8700",
+        137 => "#af875f",
+        138 => "#af8787",
+        139 => "#af87af",
+        140 => "#af87d7",
+        141 => "#af87ff",
+        142 => "#afaf00",
+        143 => "#afaf5f",
+        144 => "#afaf87",
+        145 => "#afafaf",
+        146 => "#afafd7",
+        147 => "#afafff",
+        148 => "#afd700",
+        149 => "#afd75f",
+        150 => "#afd787",
+        151 => "#afd7af",
+        152 => "#afd7d7",
+        153 => "#afd7ff",
+        154 => "#afff00",
+        155 => "#afff5f",
+        156 => "#afff87",
+        157 => "#afffaf",
+        158 => "#afffd7",
+        159 => "#afffff",
+        160 => "#d70000",
+        161 => "#d7005f",
+        162 => "#d70087",
+        163 => "#d700af",
+        164 => "#d700d7",
+        165 => "#d700ff",
+        166 => "#d75f00",
+        167 => "#d75f5f",
+        168 => "#d75f87",
+        169 => "#d75faf",
+        170 => "#d75fd7",
+        171 => "#d75fff",
+        172 => "#d78700",
+        173 => "#d7875f",
+        174 => "#d78787",
+        175 => "#d787af",
+        176 => "#d787d7",
+        177 => "#d787ff",
+        178 => "#d7af00",
+        179 => "#d7af5f",
+        180 => "#d7af87",
+        181 => "#d7afaf",
+        182 => "#d7afd7",
+        183 => "#d7afff",
+        184 => "#d7d700",
+        185 => "#d7d75f",
+        186 => "#d7d787",
+        187 => "#d7d7af",
+        188 => "#d7d7d7",
+        189 => "#d7d7ff",
+        190 => "#d7ff00",
+        191 => "#d7ff5f",
+        192 => "#d7ff87",
+        193 => "#d7ffaf",
+        194 => "#d7ffd7",
+        195 => "#d7ffff",
+        196 => "#ff0000",
+        197 => "#ff005f",
+        198 => "#ff0087",
+        199 => "#ff00af",
+        200 => "#ff00d7",
+        201 => "#ff00ff",
+        202 => "#ff5f00",
+        203 => "#ff5f5f",
+        204 => "#ff5f87",
+        205 => "#ff5faf",
+        206 => "#ff5fd7",
+        207 => "#ff5fff",
+        208 => "#ff8700",
+        209 => "#ff875f",
+        210 => "#ff8787",
+        211 => "#ff87af",
+        212 => "#ff87d7",
+        213 => "#ff87ff",
+        214 => "#ffaf00",
+        215 => "#ffaf5f",
+        216 => "#ffaf87",
+        217 => "#ffafaf",
+        218 => "#ffafd7",
+        219 => "#ffafff",
+        220 => "#ffd700",
+        221 => "#ffd75f",
+        222 => "#ffd787",
+        223 => "#ffd7af",
+        224 => "#ffd7d7",
+        225 => "#ffd7ff",
+        226 => "#ffff00",
+        227 => "#ffff5f",
+        228 => "#ffff87",
+        229 => "#ffffaf",
+        230 => "#ffffd7",
+        231 => "#ffffff",
+        232 => "#080808",
+        233 => "#121212",
+        234 => "#1c1c1c",
+        235 => "#262626",
+        236 => "#303030",
+        237 => "#3a3a3a",
+        238 => "#444444",
+        239 => "#4e4e4e",
+        240 => "#585858",
+        241 => "#626262",
+        242 => "#6c6c6c",
+        243 => "#767676",
+        244 => "#808080",
+        245 => "#8a8a8a",
+        246 => "#949494",
+        247 => "#9e9e9e",
+        248 => "#a8a8a8",
+        249 => "#b2b2b2",
+        250 => "#bcbcbc",
+        251 => "#c6c6c6",
+        252 => "#d0d0d0",
+        253 => "#dadada",
+        254 => "#e4e4e4",
+        255 => "#eeeeee",
+    }
+}
diff --git a/teleterm/static/teleterm.css b/teleterm/static/teleterm.css
index ad6a8a7..f540608 100644
--- a/teleterm/static/teleterm.css
+++ b/teleterm/static/teleterm.css
@@ -7,7 +7,7 @@
 .grid {
     font-family: monospace;
     background-color: black;
-    color: white;
+    color: #d3d3d3;
     border-collapse: collapse;
     border: 4px solid black;
 }
diff --git a/teleterm/static/teleterm_web.js b/teleterm/static/teleterm_web.js
index b4ac9be..45601b5 100644
--- a/teleterm/static/teleterm_web.js
+++ b/teleterm/static/teleterm_web.js
@@ -1,10 +1,6 @@
 
 let wasm;
 
-function __wbg_elem_binding0(arg0, arg1, arg2) {
-    wasm.__wbg_function_table.get(88)(arg0, arg1, arg2);
-}
-
 const heap = new Array(32);
 
 heap.fill(undefined);
@@ -21,29 +17,32 @@ function addHeapObject(obj) {
     heap[idx] = obj;
     return idx;
 }
+function __wbg_elem_binding0(arg0, arg1, arg2) {
+    wasm.__wbg_function_table.get(82)(arg0, arg1, addHeapObject(arg2));
+}
 function __wbg_elem_binding1(arg0, arg1, arg2) {
-    wasm.__wbg_function_table.get(84)(arg0, arg1, addHeapObject(arg2));
+    wasm.__wbg_function_table.get(82)(arg0, arg1, addHeapObject(arg2));
 }
 function __wbg_elem_binding2(arg0, arg1, arg2) {
-    wasm.__wbg_function_table.get(84)(arg0, arg1, addHeapObject(arg2));
+    wasm.__wbg_function_table.get(82)(arg0, arg1, addHeapObject(arg2));
 }
-function __wbg_elem_binding3(arg0, arg1) {
-    wasm.__wbg_function_table.get(225)(arg0, arg1);
+function __wbg_elem_binding3(arg0, arg1, arg2) {
+    wasm.__wbg_function_table.get(82)(arg0, arg1, addHeapObject(arg2));
 }
 function __wbg_elem_binding4(arg0, arg1, arg2) {
-    wasm.__wbg_function_table.get(84)(arg0, arg1, addHeapObject(arg2));
+    wasm.__wbg_function_table.get(86)(arg0, arg1, arg2);
 }
-function __wbg_elem_binding5(arg0, arg1, arg2) {
-    wasm.__wbg_function_table.get(84)(arg0, arg1, addHeapObject(arg2));
+function __wbg_elem_binding5(arg0, arg1) {
+    wasm.__wbg_function_table.get(228)(arg0, arg1);
 }
 function __wbg_elem_binding6(arg0, arg1, arg2) {
-    wasm.__wbg_function_table.get(294)(arg0, arg1, addHeapObject(arg2));
+    wasm.__wbg_function_table.get(297)(arg0, arg1, addHeapObject(arg2));
 }
 function __wbg_elem_binding7(arg0, arg1, arg2, arg3, arg4) {
-    wasm.__wbg_function_table.get(321)(arg0, arg1, addHeapObject(arg2), arg3, addHeapObject(arg4));
+    wasm.__wbg_function_table.get(324)(arg0, arg1, addHeapObject(arg2), arg3, addHeapObject(arg4));
 }
 function __wbg_elem_binding8(arg0, arg1, arg2, arg3) {
-    wasm.__wbg_function_table.get(325)(arg0, arg1, addHeapObject(arg2), addHeapObject(arg3));
+    wasm.__wbg_function_table.get(328)(arg0, arg1, addHeapObject(arg2), addHeapObject(arg3));
 }
 /**
 */
@@ -238,14 +237,14 @@ function init(module) {
         const ret = false;
         return ret;
     };
-    imports.wbg.__wbindgen_string_new = function(arg0, arg1) {
-        const ret = getStringFromWasm(arg0, arg1);
-        return addHeapObject(ret);
-    };
     imports.wbg.__wbindgen_object_clone_ref = function(arg0) {
         const ret = getObject(arg0);
         return addHeapObject(ret);
     };
+    imports.wbg.__wbindgen_string_new = function(arg0, arg1) {
+        const ret = getStringFromWasm(arg0, arg1);
+        return addHeapObject(ret);
+    };
     imports.wbg.__wbindgen_cb_forget = function(arg0) {
         takeObject(arg0);
     };
@@ -885,16 +884,16 @@ function init(module) {
     imports.wbg.__wbindgen_throw = function(arg0, arg1) {
         throw new Error(getStringFromWasm(arg0, arg1));
     };
-    imports.wbg.__wbindgen_closure_wrapper639 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper323 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
-        const real = () => {
+        const real = (arg0) => {
             state.cnt++;
             const a = state.a;
             state.a = 0;
             try {
-                return __wbg_elem_binding3(a, state.b, );
+                return __wbg_elem_binding1(a, state.b, arg0);
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(226)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(83)(a, state.b);
                 else state.a = a;
             }
         }
@@ -903,16 +902,16 @@ function init(module) {
         const ret = real;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper1056 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper325 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
         const real = (arg0) => {
             state.cnt++;
             const a = state.a;
             state.a = 0;
             try {
-                return __wbg_elem_binding6(a, state.b, arg0);
+                return __wbg_elem_binding3(a, state.b, arg0);
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(295)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(83)(a, state.b);
                 else state.a = a;
             }
         }
@@ -921,16 +920,16 @@ function init(module) {
         const ret = real;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper310 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper655 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
-        const real = (arg0) => {
+        const real = () => {
             state.cnt++;
             const a = state.a;
             state.a = 0;
             try {
-                return __wbg_elem_binding5(a, state.b, arg0);
+                return __wbg_elem_binding5(a, state.b, );
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(85)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(229)(a, state.b);
                 else state.a = a;
             }
         }
@@ -939,16 +938,16 @@ function init(module) {
         const ret = real;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper316 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper319 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
         const real = (arg0) => {
             state.cnt++;
             const a = state.a;
             state.a = 0;
             try {
-                return __wbg_elem_binding1(a, state.b, arg0);
+                return __wbg_elem_binding4(a, state.b, arg0);
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(85)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(83)(a, state.b);
                 else state.a = a;
             }
         }
@@ -957,7 +956,7 @@ function init(module) {
         const ret = real;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper318 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper321 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
         const real = (arg0) => {
             state.cnt++;
@@ -966,7 +965,7 @@ function init(module) {
             try {
                 return __wbg_elem_binding2(a, state.b, arg0);
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(85)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(83)(a, state.b);
                 else state.a = a;
             }
         }
@@ -975,16 +974,16 @@ function init(module) {
         const ret = real;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper314 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper1075 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
         const real = (arg0) => {
             state.cnt++;
             const a = state.a;
             state.a = 0;
             try {
-                return __wbg_elem_binding4(a, state.b, arg0);
+                return __wbg_elem_binding6(a, state.b, arg0);
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(85)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(298)(a, state.b);
                 else state.a = a;
             }
         }
@@ -993,7 +992,7 @@ function init(module) {
         const ret = real;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper312 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper317 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
         const real = (arg0) => {
             state.cnt++;
@@ -1002,7 +1001,7 @@ function init(module) {
             try {
                 return __wbg_elem_binding0(a, state.b, arg0);
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(85)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(83)(a, state.b);
                 else state.a = a;
             }
         }
diff --git a/teleterm/static/teleterm_web_bg.wasm b/teleterm/static/teleterm_web_bg.wasm
index 5956297..ecb39da 100644
--- a/teleterm/static/teleterm_web_bg.wasm
+++ b/teleterm/static/teleterm_web_bg.wasm