<commit_before><html>
  <head>

    <!-- Html and js cobbled together by hansihe -->

    <title>Chat Relay</title>
    <style type="text/css">
      @import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:500);

      body {
        background-color: #222222;
      }

      #chat {
        font-family: "Source Code Pro", "Courier New", Courier, monospace;
        font-weight: 500;
      }

      #chat p {
        margin-bottom: 0.1em;
        margin-top: 0.1em;
      }

      .chat-black {color: #000000}
      .chat-darkblue {color: #0000aa}
      .chat-darkgreen {color: #00aa00}
      .chat-darkaqua {color: #00aaaa}
      .chat-darkred {color: #aa0000}
      .chat-purple {color: #aa00aa}
      .chat-gold {color: #ffaa00}
      .chat-gray {color: #aaaaaa}
      .chat-darkgray {color: #555555}
      .chat-blue {color: #5555ff}
      .chat-green {color: #55ff55}
      .chat-aqua {color: #55ffff}
      .chat-red {color: #ff5555}
      .chat-lightpurple {color: #ff55ff}
      .chat-yellow {color: #ffff55}
      .chat-white {color: #ffffff}

      .chat-random {}
      .chat-bold {font-weight: bold}
      .chat-strike {text-decoration: line-through}
      .chat-underline {text-decoration: underline}
      .chat-italic {font-style: italic}
      .chat-strike.chat-underline {text-decoration: line-through underline}

    </style>
    <script type="text/javascript" src="underscore-min.js"></script>
  </head>
  <body>
    <div id="chat">

    </div>
    <script type="text/javascript">

      var colors = {
        '0': "chat-black",
        '1': "chat-darkblue",
        '2': "chat-darkgreen",
        '3': "chat-darkaqua",
        '4': "chat-darkred",
        '5': "chat-purple",
        '6': "chat-gold",
        '7': "chat-gray",
        '8': "chat-darkgray",
        '9': "chat-blue",
        'a': "chat-green",
        'b': "chat-aqua",
        'c': "chat-red",
        'd': "chat-lightpurple",
        'e': "chat-yellow",
        'f': "chat-white"
      }

      var styles = {
        'k': "chat-random",
        'l': "chat-bold",
        'm': "chat-strike",
        'n': "chat-underline",
        'o': "chat-italic"
      }

      function parse_colors(text) {
        var result = "<span class=chat-white>";

        var style = {};
        var color = "chat-white";

        while (text.indexOf("§") != -1) { // Loop until we are out of color characters
          var position = text.indexOf("§");
          result = result + _.escape(text.substring(0, position)); // Append the part of the string before the character
          var character = text[position+1];
          text = text.substring(position+2); // Strip the processed part off
          if (character in colors) {
            color = colors[character];
            style = {};
          } else if (character in styles) {
            style[styles[character]] = !style[styles[character]];
          } else if (character == 'r') {
            color = "chat-white";
            style = {};
          } else {
            continue;
          }
          var cls = color;
          for (var k in style) {
            if (style[k]) {
              cls += " " + k;
            }
          }
          result += "</span><span class=\"" + cls + "\">";
        }

        result = result + _.escape(text);

        //if(!first) { // If at least one color code was processed, close the tag
          result = result + "</span>";
        //}

        return result;
      }

      function is_scrolled_to_bottom() {
        console.log(window.innerHeight+window.scrollY);
        console.log(document.body.offsetHeight)
        return (window.innerHeight + window.scrollY) >= document.body.offsetHeight;
      }
 
      var chat_container = document.getElementById("chat");
      function append(text) {
        var bottom = false;
        if(is_scrolled_to_bottom()) {
          bottom = true;
        }
        chat_container.innerHTML = chat_container.innerHTML + text;
        if(bottom) {
          window.scrollTo(0, document.body.scrollHeight);
        }
      }

      var loc = window.location;
      var new_uri;
      if (loc.protocol === "https:") {
          new_uri = "wss:";
      } else {
          new_uri = "ws:";
      }
      new_uri += "//" + loc.host;
      new_uri += loc.pathname + "/socket";

      var connection = new WebSocket(new_uri);

      connection.onopen = function() {
        append("<p><span class=\"chat-red\">WebSocket: connection established</span></p>")
      }

      connection.onclose = function() {
        append("<p><span class=\"chat-red\">WebSocket: error: connection closed, retrying</span></p>")
      }

      connection.onerror = function(error) {
        append("<p><span class=\"chat-red\">WebSocket: error: " + error.data + "</span></p>")
      }

      connection.onmessage = function(message) {
        text = message.data;
        append("<p>" + parse_colors(text) + "</p>")
      }

    </script>
  </body>
</html><commit_msg>chat.html: add top bar, a bit of js refactoring, actually retry failed connections<commit_after><html>
  <head>

    <!-- Html and js cobbled together by hansihe -->

    <title>Chat Relay</title>
    <style type="text/css">
      @import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:500);
      @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);

      body {
        background-color: #222222;
        margin: 0;
      }

      #chat {
        font-family: "Source Code Pro", "Courier New", Courier, monospace;
        font-weight: 500;
        margin-top: 25px;
        padding: 0px 4px 4px 4px;
      }

      #chat p {
        margin-bottom: 0.1em;
        margin-top: 0.1em;
      }

      #top {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 24px;
        margin: 0;
        background-color: #222222;
        border-bottom: 1px solid #ffffff;
        color: #ffffff;
        font-family: "Source Sans Pro", Tahoma, sans-serif;
        cursor: default;
      }

      #top a {
        padding: 2px;
        color: #e0e0e0;
        text-decoration: none;
      }

      #top a:hover {
        color: #ffffff;
      }

      .chat-black {color: #000000}
      .chat-darkblue {color: #0000aa}
      .chat-darkgreen {color: #00aa00}
      .chat-darkaqua {color: #00aaaa}
      .chat-darkred {color: #aa0000}
      .chat-purple {color: #aa00aa}
      .chat-gold {color: #ffaa00}
      .chat-gray {color: #aaaaaa}
      .chat-darkgray {color: #555555}
      .chat-blue {color: #5555ff}
      .chat-green {color: #55ff55}
      .chat-aqua {color: #55ffff}
      .chat-red {color: #ff5555}
      .chat-lightpurple {color: #ff55ff}
      .chat-yellow {color: #ffff55}
      .chat-white {color: #ffffff}

      .chat-random {}
      .chat-bold {font-weight: bold}
      .chat-strike {text-decoration: line-through}
      .chat-underline {text-decoration: underline}
      .chat-italic {font-style: italic}
      .chat-strike.chat-underline {text-decoration: line-through underline}

    </style>
    <script type="text/javascript" src="underscore-min.js"></script>
  </head>
  <body>
    <div id="top">
      <a href="creative">creative</a>
      &nbsp;
      <a href="pve">pve</a>
      &nbsp;
      <a href="survival">survival</a>
    </div>
    <div id="chat">
    </div>
    <script type="text/javascript">

      var colors = {
        '0': "chat-black",
        '1': "chat-darkblue",
        '2': "chat-darkgreen",
        '3': "chat-darkaqua",
        '4': "chat-darkred",
        '5': "chat-purple",
        '6': "chat-gold",
        '7': "chat-gray",
        '8': "chat-darkgray",
        '9': "chat-blue",
        'a': "chat-green",
        'b': "chat-aqua",
        'c': "chat-red",
        'd': "chat-lightpurple",
        'e': "chat-yellow",
        'f': "chat-white"
      };

      var styles = {
        'k': "chat-random",
        'l': "chat-bold",
        'm': "chat-strike",
        'n': "chat-underline",
        'o': "chat-italic"
      };

      function parse_colors(text) {
        var result = "<span class=chat-white>";

        var style = {};
        var color = "chat-white";

        while (text.indexOf("§") != -1) { // Loop until we are out of color characters
          var position = text.indexOf("§");

          result += _.escape(text.substring(0, position)); // Append the part of the string before the character

          var character = text[position+1];
          text = text.substring(position+2); // Strip the processed part off

          if (character in colors) {
            color = colors[character];
            style = {};
          } else if (character in styles) {
            style[styles[character]] = !style[styles[character]];
          } else if (character == 'r') {
            color = "chat-white";
            style = {};
          } else {
            continue;
          }

          var cls = color;
          for (var k in style) {
            if (style[k]) {
              cls += " " + k;
            }
          }

          result += "</span><span class=\"" + cls + "\">";
        }

        result += _.escape(text) + "</span>";

        return result;
      }

      function is_scrolled_to_bottom() {
        return (window.innerHeight + window.scrollY) >= document.body.offsetHeight;
      }
 
      var chat_container = document.getElementById("chat");
      function append(text) {
        var bottom = is_scrolled_to_bottom();
        chat_container.innerHTML = chat_container.innerHTML + text;
        if (bottom) {
          window.scrollTo(0, document.body.scrollHeight);
        }
      }

      var loc = window.location;
      var new_uri;
      if (loc.protocol === "https:") {
          new_uri = "wss:";
      } else {
          new_uri = "ws:";
      }
      new_uri += "//" + loc.host;
      new_uri += loc.pathname + "/socket";

      function connect() {
        var connection = new WebSocket(new_uri);

        connection.onopen = function() {
          append("<p><span class=\"chat-red\">WebSocket: connection established</span></p>");
        }

        connection.onclose = function() {
          append("<p><span class=\"chat-red\">WebSocket: error: connection closed, retrying</span></p>");
          setTimeout(connect, 5000);
        }

        connection.onerror = function(error) {
          append("<p><span class=\"chat-red\">WebSocket: error: " + error.data + "</span></p>");
        }

        connection.onmessage = function(message) {
          text = message.data;
          append("<p>" + parse_colors(text) + "</p>");
        }
      }

      connect();

    </script>
  </body>
</html>
{'fraction_non_alphanumeric': 0.16100262861434472, 'fraction_numerical': 0.01764926774314683, 'mean_word_length': 1.8629400698736898, 'pattern_counts': {'":': 0, '<': 81, '<?xml version=': 0, '>': 83, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5024290', 'n_tokens_mistral': 3521, 'n_tokens_neox': 3325, 'n_words': 743}