path: root/termcast_server/index.html



<!DOCTYPE html>
<html>
<head>
    <style>
.menu {
    display: none;
}

.term {
    display: none;
    font-family: monospace;
    font-size: 12px;
}

.term table {
    border-collapse: collapse;
    color: #d3d3d3;
    background-color: black;
}

.term td {
    padding: 0px;
    max-width: 7px;
    max-height: 14px;
    overflow: hidden;
}
    </style>
    <script>
var colors = [
    "#000000",
    "#cd0000",
    "#00cd00",
    "#cdcd00",
    "#0000cd",
    "#cd00cd",
    "#00cdcd",
    "#e5e5e5",
    "#4d4d4d",
    "#ff0000",
    "#00ff00",
    "#ffff00",
    "#0000ff",
    "#ff00ff",
    "#00ffff",
    "#ffffff",
    "#000000",
    "#00005f",
    "#000087",
    "#0000af",
    "#0000d7",
    "#0000ff",
    "#005f00",
    "#005f5f",
    "#005f87",
    "#005faf",
    "#005fd7",
    "#005fff",
    "#008700",
    "#00875f",
    "#008787",
    "#0087af",
    "#0087d7",
    "#0087ff",
    "#00af00",
    "#00af5f",
    "#00af87",
    "#00afaf",
    "#00afd7",
    "#00afff",
    "#00d700",
    "#00d75f",
    "#00d787",
    "#00d7af",
    "#00d7d7",
    "#00d7ff",
    "#00ff00",
    "#00ff5f",
    "#00ff87",
    "#00ffaf",
    "#00ffd7",
    "#00ffff",
    "#5f0000",
    "#5f005f",
    "#5f0087",
    "#5f00af",
    "#5f00d7",
    "#5f00ff",
    "#5f5f00",
    "#5f5f5f",
    "#5f5f87",
    "#5f5faf",
    "#5f5fd7",
    "#5f5fff",
    "#5f8700",
    "#5f875f",
    "#5f8787",
    "#5f87af",
    "#5f87d7",
    "#5f87ff",
    "#5faf00",
    "#5faf5f",
    "#5faf87",
    "#5fafaf",
    "#5fafd7",
    "#5fafff",
    "#5fd700",
    "#5fd75f",
    "#5fd787",
    "#5fd7af",
    "#5fd7d7",
    "#5fd7ff",
    "#5fff00",
    "#5fff5f",
    "#5fff87",
    "#5fffaf",
    "#5fffd7",
    "#5fffff",
    "#870000",
    "#87005f",
    "#870087",
    "#8700af",
    "#8700d7",
    "#8700ff",
    "#875f00",
    "#875f5f",
    "#875f87",
    "#875faf",
    "#875fd7",
    "#875fff",
    "#878700",
    "#87875f",
    "#878787",
    "#8787af",
    "#8787d7",
    "#8787ff",
    "#87af00",
    "#87af5f",
    "#87af87",
    "#87afaf",
    "#87afd7",
    "#87afff",
    "#87d700",
    "#87d75f",
    "#87d787",
    "#87d7af",
    "#87d7d7",
    "#87d7ff",
    "#87ff00",
    "#87ff5f",
    "#87ff87",
    "#87ffaf",
    "#87ffd7",
    "#87ffff",
    "#af0000",
    "#af005f",
    "#af0087",
    "#af00af",
    "#af00d7",
    "#af00ff",
    "#af5f00",
    "#af5f5f",
    "#af5f87",
    "#af5faf",
    "#af5fd7",
    "#af5fff",
    "#af8700",
    "#af875f",
    "#af8787",
    "#af87af",
    "#af87d7",
    "#af87ff",
    "#afaf00",
    "#afaf5f",
    "#afaf87",
    "#afafaf",
    "#afafd7",
    "#afafff",
    "#afd700",
    "#afd75f",
    "#afd787",
    "#afd7af",
    "#afd7d7",
    "#afd7ff",
    "#afff00",
    "#afff5f",
    "#afff87",
    "#afffaf",
    "#afffd7",
    "#afffff",
    "#d70000",
    "#d7005f",
    "#d70087",
    "#d700af",
    "#d700d7",
    "#d700ff",
    "#d75f00",
    "#d75f5f",
    "#d75f87",
    "#d75faf",
    "#d75fd7",
    "#d75fff",
    "#d78700",
    "#d7875f",
    "#d78787",
    "#d787af",
    "#d787d7",
    "#d787ff",
    "#d7af00",
    "#d7af5f",
    "#d7af87",
    "#d7afaf",
    "#d7afd7",
    "#d7afff",
    "#d7d700",
    "#d7d75f",
    "#d7d787",
    "#d7d7af",
    "#d7d7d7",
    "#d7d7ff",
    "#d7ff00",
    "#d7ff5f",
    "#d7ff87",
    "#d7ffaf",
    "#d7ffd7",
    "#d7ffff",
    "#ff0000",
    "#ff005f",
    "#ff0087",
    "#ff00af",
    "#ff00d7",
    "#ff00ff",
    "#ff5f00",
    "#ff5f5f",
    "#ff5f87",
    "#ff5faf",
    "#ff5fd7",
    "#ff5fff",
    "#ff8700",
    "#ff875f",
    "#ff8787",
    "#ff87af",
    "#ff87d7",
    "#ff87ff",
    "#ffaf00",
    "#ffaf5f",
    "#ffaf87",
    "#ffafaf",
    "#ffafd7",
    "#ffafff",
    "#ffd700",
    "#ffd75f",
    "#ffd787",
    "#ffd7af",
    "#ffd7d7",
    "#ffd7ff",
    "#ffff00",
    "#ffff5f",
    "#ffff87",
    "#ffffaf",
    "#ffffd7",
    "#ffffff",
    "#080808",
    "#121212",
    "#1c1c1c",
    "#262626",
    "#303030",
    "#3a3a3a",
    "#444444",
    "#4e4e4e",
    "#585858",
    "#626262",
    "#6c6c6c",
    "#767676",
    "#808080",
    "#8a8a8a",
    "#949494",
    "#9e9e9e",
    "#a8a8a8",
    "#b2b2b2",
    "#bcbcbc",
    "#c6c6c6",
    "#d0d0d0",
    "#dadada",
    "#e4e4e4",
    "#eeeeee"
];
var url = location.origin.replace(/^http/, 'ws') + "/-/";
socket = new WebSocket(url);
socket.onopen = function (e) {
    socket.send(JSON.stringify({"type": "request_streamer_list"}));
};
socket.onmessage = function (e) {
    console.log(e.data);
    var data = JSON.parse(e.data);
    var type = data.type;

    if (type == "streamer_list") {
        document.querySelector('.term').style.setProperty('display', 'none');
        var menudiv = document.querySelector('.menu');
        var menu = '<ul>';
        data.streamers.forEach(function (streamer) {
            menu += '<li><a href="#" onclick=' + "'socket.send(JSON.stringify({\"type\": \"start_watching\", \"who\": \"" + streamer.id + "\"}))'" + '>' + streamer.name + '</a></li>';
        });
        menu += '</ul>';
        menudiv.innerHTML = menu;
        menudiv.style.setProperty('display', 'block');
    }
    else if (type == "redraw_screen") {
        document.querySelector('.menu').style.setProperty('display', 'none');
        var termdiv = document.querySelector('.term');
        var hideNext = false;
        term = '<table class="screen">';
        data.screen.forEach(function (row) {
            term += '<tr>';
            row.forEach(function (cell) {
                term += '<td';
                if (cell.w) {
                    term += ' colspan="2"';
                    hideNext = true;
                }
                if (cell.f != null || cell.b != null || cell.i || cell.u || cell.n || hideNext) {
                    var fgcolor = cell.f;
                    var bgcolor = cell.b;
                    var inverse = cell.n;
                    term += ' style="';
                    if (inverse && fgcolor == bgcolor) {
                        term += 'color: black;';
                        term += 'background-color: #d3d3d3;';
                    }
                    else {
                        if (fgcolor != null) {
                            var style = inverse ? 'background-color' : 'color';
                            if (cell.o && fgcolor < 8) {
                                fgcolor += 8;
                            }
                            term += style + ': ' + colors[fgcolor] + ';';
                        }
                        if (bgcolor != null) {
                            var style = inverse ? 'color' : 'background-color';
                            term += style + ': ' + colors[bgcolor] + ';';
                        }
                    }
                    if (cell.i) {
                        term += 'font-style: italic;';
                    }
                    if (cell.u) {
                        term += 'text-decoration: underline;';
                    }
                    if (hideNext) {
                        term += 'display: none;';
                        hideNext = false;
                    }
                    term += '"';
                }
                term += '>';
                if (cell.c == " " || cell.c == "") {
                    term += "&nbsp;";
                }
                else {
                    term += cell.c;
                }
                term += '</td>';
            });
            term += '</td>';
        });
        term += '</table>';
        termdiv.innerHTML = term;
        termdiv.style.setProperty('display', 'block');
    }
    else if (type == "update_screen") {
        var termtable = document.querySelector('.term tbody');
        data.updates.forEach(function (update) {
            var tr = termtable.children[update.row];
            var td = tr.children[update.col];
            if (update.cell.hasOwnProperty('c')) {
                var contents = update.cell.c;
                if (contents == " " || contents == "") {
                    contents = "&nbsp;";
                }
                td.innerHTML = contents;
            }
            if (update.cell.hasOwnProperty('f')) {
                var inverse = update.cell.n;
                var fgcolor = update.cell.f;
                var bgcolor = update.cell.b;
                var style = inverse ? 'background-color' : 'color';
                if (inverse && fgcolor == bgcolor) {
                    td.style.setProperty(style, '#d3d3d3');
                }
                else if (fgcolor != null) {
                    if (update.cell.o && fgcolor < 8) {
                        fgcolor += 8;
                    }
                    td.style.setProperty(style, colors[fgcolor]);
                }
                else {
                    td.style.removeProperty(style);
                }
            }
            if (update.cell.hasOwnProperty('b')) {
                var inverse = update.cell.n;
                var fgcolor = update.cell.f;
                var bgcolor = update.cell.b;
                var style = inverse ? 'color' : 'background-color';
                if (inverse && bgcolor == fgcolor) {
                    td.style.setProperty(style, 'black');
                }
                else if (bgcolor != null) {
                    td.style.setProperty(style, colors[bgcolor]);
                }
                else {
                    td.style.removeProperty(style);
                }
            }
            if (update.cell.hasOwnProperty('i')) {
                if (update.cell.i) {
                    td.style.setProperty('font-style', 'italic');
                }
                else {
                    td.style.removeProperty('font-style');
                }
            }
            if (update.cell.hasOwnProperty('u')) {
                if (update.cell.u) {
                    td.style.setProperty('text-decoration', 'underline');
                }
                else {
                    td.style.removeProperty('text-decoration');
                }
            }
            if (update.cell.hasOwnProperty('w')) {
                if (update.cell.w) {
                    tr.children[update.col + 1].style.setProperty('display', 'none');
                    td.colSpan = 2;
                }
                else {
                    tr.children[update.col + 1].style.setProperty('display', 'block');
                    td.colSpan = 1;
                }
            }
        })
    }
    else if (type == "streamer_disconnect") {
        socket.send(JSON.stringify({"type": "request_streamer_list"}));
    }
};
    </script>
</head>
<body>
    <div class="menu"></div>
    <div class="term"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <style>
.menu {
    display: none;
}

.term {
    display: none;
    font-family: monospace;
    font-size: 12px;
}

.term table {
    border-collapse: collapse;
    color: #d3d3d3;
    background-color: black;
}

.term td {
    padding: 0px;
    max-width: 7px;
    max-height: 14px;
    overflow: hidden;
}
    </style>
    <script>
var colors = [
    "#000000",
    "#cd0000",
    "#00cd00",
    "#cdcd00",
    "#0000cd",
    "#cd00cd",
    "#00cdcd",
    "#e5e5e5",
    "#4d4d4d",
    "#ff0000",
    "#00ff00",
    "#ffff00",
    "#0000ff",
    "#ff00ff",
    "#00ffff",
    "#ffffff",
    "#000000",
    "#00005f",
    "#000087",
    "#0000af",
    "#0000d7",
    "#0000ff",
    "#005f00",
    "#005f5f",
    "#005f87",
    "#005faf",
    "#005fd7",
    "#005fff",
    "#008700",
    "#00875f",
    "#008787",
    "#0087af",
    "#0087d7",
    "#0087ff",
    "#00af00",
    "#00af5f",
    "#00af87",
    "#00afaf",
    "#00afd7",
    "#00afff",
    "#00d700",
    "#00d75f",
    "#00d787",
    "#00d7af",
    "#00d7d7",
    "#00d7ff",
    "#00ff00",
    "#00ff5f",
    "#00ff87",
    "#00ffaf",
    "#00ffd7",
    "#00ffff",
    "#5f0000",
    "#5f005f",
    "#5f0087",
    "#5f00af",
    "#5f00d7",
    "#5f00ff",
    "#5f5f00",
    "#5f5f5f",
    "#5f5f87",
    "#5f5faf",
    "#5f5fd7",
    "#5f5fff",
    "#5f8700",
    "#5f875f",
    "#5f8787",
    "#5f87af",
    "#5f87d7",
    "#5f87ff",
    "#5faf00",
    "#5faf5f",
    "#5faf87",
    "#5fafaf",
    "#5fafd7",
    "#5fafff",
    "#5fd700",
    "#5fd75f",
    "#5fd787",
    "#5fd7af",
    "#5fd7d7",
    "#5fd7ff",
    "#5fff00",
    "#5fff5f",
    "#5fff87",
    "#5fffaf",
    "#5fffd7",
    "#5fffff",
    "#870000",
    "#87005f",
    "#870087",
    "#8700af",
    "#8700d7",
    "#8700ff",
    "#875f00",
    "#875f5f",
    "#875f87",
    "#875faf",
    "#875fd7",
    "#875fff",
    "#878700",
    "#87875f",
    "#878787",
    "#8787af",
    "#8787d7",
    "#8787ff",
    "#87af00",
    "#87af5f",
    "#87af87",
    "#87afaf",
    "#87afd7",
    "#87afff",
    "#87d700",
    "#87d75f",
    "#87d787",
    "#87d7af",
    "#87d7d7",
    "#87d7ff",
    "#87ff00",
    "#87ff5f",
    "#87ff87",
    "#87ffaf",
    "#87ffd7",
    "#87ffff",
    "#af0000",
    "#af005f",
    "#af0087",
    "#af00af",
    "#af00d7",
    "#af00ff",
    "#af5f00",
    "#af5f5f",
    "#af5f87",
    "#af5faf",
    "#af5fd7",
    "#af5fff",
    "#af8700",
    "#af875f",
    "#af8787",
    "#af87af",
    "#af87d7",
    "#af87ff",
    "#afaf00",
    "#afaf5f",
    "#afaf87",
    "#afafaf",
    "#afafd7",
    "#afafff",
    "#afd700",
    "#afd75f",
    "#afd787",
    "#afd7af",
    "#afd7d7",
    "#afd7ff",
    "#afff00",
    "#afff5f",
    "#afff87",
    "#afffaf",
    "#afffd7",
    "#afffff",
    "#d70000",
    "#d7005f",
    "#d70087",
    "#d700af",
    "#d700d7",
    "#d700ff",
    "#d75f00",
    "#d75f5f",
    "#d75f87",
    "#d75faf",
    "#d75fd7",
    "#d75fff",
    "#d78700",
    "#d7875f",
    "#d78787",
    "#d787af",
    "#d787d7",
    "#d787ff",
    "#d7af00",
    "#d7af5f",
    "#d7af87",
    "#d7afaf",
    "#d7afd7",
    "#d7afff",
    "#d7d700",
    "#d7d75f",
    "#d7d787",
    "#d7d7af",
    "#d7d7d7",
    "#d7d7ff",
    "#d7ff00",
    "#d7ff5f",
    "#d7ff87",
    "#d7ffaf",
    "#d7ffd7",
    "#d7ffff",
    "#ff0000",
    "#ff005f",
    "#ff0087",
    "#ff00af",
    "#ff00d7",
    "#ff00ff",
    "#ff5f00",
    "#ff5f5f",
    "#ff5f87",
    "#ff5faf",
    "#ff5fd7",
    "#ff5fff",
    "#ff8700",
    "#ff875f",
    "#ff8787",
    "#ff87af",
    "#ff87d7",
    "#ff87ff",
    "#ffaf00",
    "#ffaf5f",
    "#ffaf87",
    "#ffafaf",
    "#ffafd7",
    "#ffafff",
    "#ffd700",
    "#ffd75f",
    "#ffd787",
    "#ffd7af",
    "#ffd7d7",
    "#ffd7ff",
    "#ffff00",
    "#ffff5f",
    "#ffff87",
    "#ffffaf",
    "#ffffd7",
    "#ffffff",
    "#080808",
    "#121212",
    "#1c1c1c",
    "#262626",
    "#303030",
    "#3a3a3a",
    "#444444",
    "#4e4e4e",
    "#585858",
    "#626262",
    "#6c6c6c",
    "#767676",
    "#808080",
    "#8a8a8a",
    "#949494",
    "#9e9e9e",
    "#a8a8a8",
    "#b2b2b2",
    "#bcbcbc",
    "#c6c6c6",
    "#d0d0d0",
    "#dadada",
    "#e4e4e4",
    "#eeeeee"
];
var url = location.origin.replace(/^http/, 'ws') + "/-/";
socket = new WebSocket(url);
socket.onopen = function (e) {
    socket.send(JSON.stringify({"type": "request_streamer_list"}));
};
socket.onmessage = function (e) {
    console.log(e.data);
    var data = JSON.parse(e.data);
    var type = data.type;

    if (type == "streamer_list") {
        document.querySelector('.term').style.setProperty('display', 'none');
        var menudiv = document.querySelector('.menu');
        var menu = '<ul>';
        data.streamers.forEach(function (streamer) {
            menu += '<li><a href="#" onclick=' + "'socket.send(JSON.stringify({\"type\": \"start_watching\", \"who\": \"" + streamer.id + "\"}))'" + '>' + streamer.name + '</a></li>';
        });
        menu += '</ul>';
        menudiv.innerHTML = menu;
        menudiv.style.setProperty('display', 'block');
    }
    else if (type == "redraw_screen") {
        document.querySelector('.menu').style.setProperty('display', 'none');
        var termdiv = document.querySelector('.term');
        var hideNext = false;
        term = '<table class="screen">';
        data.screen.forEach(function (row) {
            term += '<tr>';
            row.forEach(function (cell) {
                term += '<td';
                if (cell.w) {
                    term += ' colspan="2"';
                    hideNext = true;
                }
                if (cell.f != null || cell.b != null || cell.i || cell.u || cell.n || hideNext) {
                    var fgcolor = cell.f;
                    var bgcolor = cell.b;
                    var inverse = cell.n;
                    term += ' style="';
                    if (inverse && fgcolor == bgcolor) {
                        term += 'color: black;';
                        term += 'background-color: #d3d3d3;';
                    }
                    else {
                        if (fgcolor != null) {
                            var style = inverse ? 'background-color' : 'color';
                            if (cell.o && fgcolor < 8) {
                                fgcolor += 8;
                            }
                            term += style + ': ' + colors[fgcolor] + ';';
                        }
                        if (bgcolor != null) {
                            var style = inverse ? 'color' : 'background-color';
                            term += style + ': ' + colors[bgcolor] + ';';
                        }
                    }
                    if (cell.i) {
                        term += 'font-style: italic;';
                    }
                    if (cell.u) {
                        term += 'text-decoration: underline;';
                    }
                    if (hideNext) {
                        term += 'display: none;';
                        hideNext = false;
                    }
                    term += '"';
                }
                term += '>';
                if (cell.c == " " || cell.c == "") {
                    term += "&nbsp;";
                }
                else {
                    term += cell.c;
                }
                term += '</td>';
            });
            term += '</td>';
        });
        term += '</table>';
        termdiv.innerHTML = term;
        termdiv.style.setProperty('display', 'block');
    }
    else if (type == "update_screen") {
        var termtable = document.querySelector('.term tbody');
        data.updates.forEach(function (update) {
            var tr = termtable.children[update.row];
            var td = tr.children[update.col];
            if (update.cell.hasOwnProperty('c')) {
                var contents = update.cell.c;
                if (contents == " " || contents == "") {
                    contents = "&nbsp;";
                }
                td.innerHTML = contents;
            }
            if (update.cell.hasOwnProperty('f')) {
                var inverse = update.cell.n;
                var fgcolor = update.cell.f;
                var bgcolor = update.cell.b;
                var style = inverse ? 'background-color' : 'color';
                if (inverse && fgcolor == bgcolor) {
                    td.style.setProperty(style, '#d3d3d3');
                }
                else if (fgcolor != null) {
                    if (update.cell.o && fgcolor < 8) {
                        fgcolor += 8;
                    }
                    td.style.setProperty(style, colors[fgcolor]);
                }
                else {
                    td.style.removeProperty(style);
                }
            }
            if (update.cell.hasOwnProperty('b')) {
                var inverse = update.cell.n;
                var fgcolor = update.cell.f;
                var bgcolor = update.cell.b;
                var style = inverse ? 'color' : 'background-color';
                if (inverse && bgcolor == fgcolor) {
                    td.style.setProperty(style, 'black');
                }
                else if (bgcolor != null) {
                    td.style.setProperty(style, colors[bgcolor]);
                }
                else {
                    td.style.removeProperty(style);
                }
            }
            if (update.cell.hasOwnProperty('i')) {
                if (update.cell.i) {
                    td.style.setProperty('font-style', 'italic');
                }
                else {
                    td.style.removeProperty('font-style');
                }
            }
            if (update.cell.hasOwnProperty('u')) {
                if (update.cell.u) {
                    td.style.setProperty('text-decoration', 'underline');
                }
                else {
                    td.style.removeProperty('text-decoration');
                }
            }
            if (update.cell.hasOwnProperty('w')) {
                if (update.cell.w) {
                    tr.children[update.col + 1].style.setProperty('display', 'none');
                    td.colSpan = 2;
                }
                else {
                    tr.children[update.col + 1].style.setProperty('display', 'block');
                    td.colSpan = 1;
                }
            }
        })
    }
    else if (type == "streamer_disconnect") {
        socket.send(JSON.stringify({"type": "request_streamer_list"}));
    }
};
    </script>
</head>
<body>
    <div class="menu"></div>
    <div class="term"></div>
</body>
</html>