BBS Non-Colorful Chatroom

// ==UserScript==
// @name             BBS Non-Colorful Chatroom
// @namespace        dollars-bbs.org
// @author           Degritone
// @description      Adds back in limited functionality for the chatroom for the Dollars BBS
// @match            *://*.dollars-bbs.org/*
// @match            *://qchat.rizon.net/*
// @grant            none
// ==/UserScript==

function request(url){
  let xmlHttp = new XMLHttpRequest();
  xmlHttp.open("GET",url,false);
  xmlHttp.send(null);
  return xmlHttp.responseText;
}

let icons = [];

if(window.location.href.startsWith("https://dollars-bbs.org/chatroom")){
  document.title = "Dollars BBS | Chatroom";
  window.location.href = "https://qchat.rizon.net";
} if(window.location.href.startsWith("https://dollars-bbs.org")){
  chatLink();
} else if(window.location.href.startsWith("https://qchat.rizon.net")){
  document.title = "Dollars BBS | Chatroom";
  setTimeout(checkForLoaded,100);
  getIcons();
}

function getIcons(){
  for(let i=0;i<117;i++){
    let image = "https://ia601408.us.archive.org/13/items/drrr-like-chat-icons/"+i+".png";
    let icon = document.createElement("img");
    icon.src = image;
    icon.style.width = "58px";
    icon.style.margin = "auto";
    icon.width = 58;
    icon.height = 58;
    icon.setAttribute("class","drrrIcon");
    icon.onload = function(){icons[i] = icon;iconLoader();icon.setAttribute("isLoaded",true);};
    icon.onerror = function(){finishedLoading();};
  }
}

function chatLink(){
  let menu = document.getElementById("pagemenu");
  if(!menu){
    setTimeout(chatLink,100);
    return;
  }
  let chatroom = document.createElement("li");
  chatroom.innerHTML = "<a href='https://dollars-bbs.org/chatroom'>Chatroom</a>";
  menu.children[2].children[0].innerHTML = "Other Chats";
  menu.insertBefore(chatroom,menu.children[2]);
}

function checkForLoaded(){
  let loaded = document.getElementsByClassName("tr2").length;
  if(!(loaded>0))
    setTimeout(checkForLoaded,100);
  else{
    setTimeout(login,100);
  }
}

function login(){
  document.title = "Dollars BBS | Chatroom";

  let topNode = document.getElementsByClassName("dynamicpanel qwebirc-qui topboundpanel outertabbar outertabbar_top")[0];
  topNode.parentNode.removeChild(topNode);

  let favicon = document.createElement("link");
  favicon.href = "https://dollars-bbs.org/random/favicon.ico";
  favicon.rel = "shortcut icon";
  document.head.appendChild(favicon);

  let bg = document.getElementsByClassName("dynamicpanel qwebirc-qui middleboundpanel lines")[0];
  bg.style.background = "#000000";
  bg.style.color = "#DDDDDD";
  bg.style.top = "0px";
  bg.style.bottom = "0px";
  bg.style.left = "0px";
  bg.style.right = "0px";
  bg.style.height = "";

  let form = document.getElementsByTagName("table")[1];
  form.style.top = "0px";
  form.style.left = "50%";
  form.style.transform = "translateX(-50%)";
  form.style.position = "absolute";
  form.children[0].removeChild(form.children[0].children[0]);

  let startButton = document.getElementsByTagName("input");
  for(let i=0;i<startButton.length;i++){
    if(startButton[i].value == "Connect"){
      startButton = startButton[i];
      break;
    }
  }
  startButton.style.width = "148px";
  startButton.onclick = ()=>waitForChat(false,document.getElementsByTagName("input")[0].value);

  inputs();
}

function iconLoader(){
  let name = document.getElementsByTagName("input")[0];
  let bg = document.getElementsByClassName("dynamicpanel qwebirc-qui middleboundpanel lines")[0];
  let iconHolder = document.getElementById("iconHolder");
  if(!iconHolder){
    iconHolder = document.createElement("div");
    bg.appendChild(iconHolder);
    iconHolder.id = "iconHolder";
    iconHolder.style.width = (13*60)+"px";
    iconHolder.style.position = "absolute";
    iconHolder.style.top = "112px";
    iconHolder.style.left = "50%";
    iconHolder.style.transform = "translateX(-50%)";
    iconHolder.style.display = "flex";
    iconHolder.style.flexWrap = "wrap";
    iconHolder.style.flexDirection = "row";
    iconHolder.style.justifyContent = "center";
  }
  let start = 0;
  if(name.value.match(/^\[[0-9]+\]/))
    start = parseInt(name.value.replace("[","").replace(/\].+/,""));
  for(let i=iconHolder.children.length;i<icons.length;i++){
    let selection = document.createElement("div");
    selection.style.width = "60px";
    selection.style.height = "75px";
    selection.style.display = "inline-block";
    selection.style.position = "relative";
    selection.style.margin = "0px";
    selection.style.alignSelf = "center";

    let radio = document.createElement("input");
    radio.type = "radio";
    radio.id = "icon"+i;
    radio.name = "icon";
    radio.value = i;
    radio.style.left = "23px";
    radio.style.bottom = "2px";
    radio.style.position = "absolute";
    radio.style.margin = "0px";
    if(i==start)
      radio.checked = "checked";

    let label = document.createElement("label");
    label.htmlFor = "icon"+i;

    let icon = document.createElement("img");
    label.appendChild(icon);
    icon.outerHTML = icons[i].outerHTML;
    selection.appendChild(label);
    selection.appendChild(radio);
    selection.onclick = ()=>adjustName();

    iconHolder.appendChild(selection);
  }
  inputs();
}

function inputs(){
  let nameInput = document.getElementsByTagName("input")[0];
  if(nameInput.value == ""){
    let cookies = document.cookie.split(";");
    for(let i=0;i<cookies.length;i++){
      let pair = cookies[i].split("=");
      if(pair[0]==" name")
        nameInput.value = pair[1];
    }
  }

  if(!document.getElementById("typingName")){
    let name = document.createElement("input");
    name.autocomplete = "off";
    name.autocorrect = "off";
    name.autocapitalize = "off";
    name.spellcheck = false;
    name.style = window.getComputedStyle(nameInput);
    name.id = "typingName";
    name.value = nameInput.value.replace(/\[[0-9]+\]/,"");
    name.oninput = ()=>adjustName();
    nameInput.parentNode.appendChild(name);
  }
  nameInput.style.display = "none";

  let channelInput = document.getElementsByTagName("input")[2];
  channelInput.value = "#dollars-bbs";
  channelInput.parentNode.parentNode.style.display = "none";

  let iconHolder = document.getElementById("iconHolder");
  if(iconHolder){
    let w = Math.ceil(icons.length/Math.floor((window.innerHeight-parseInt(iconHolder.style.top.replace("px","")))/75))*60;
    iconHolder.style.width = w+"px";
  }
}

let ownName = "";

function adjustName(){
  let name = document.getElementsByTagName("input")[0];
  let radios = document.getElementsByName("icon");
  let value = 0;
  for(let i=0;i<radios.length;i++){
    if(radios[i].checked){
      value = radios[i].value
      break;
    }
  }

  name.value = "["+value+"]"+document.getElementById("typingName").value;
  name.dispatchEvent(new Event("input"));
  ownName = name.value;
}

function waitForChat(once=false,name=""){
  if(!once){
    once = true;
    let cover = document.createElement("div");
    cover.id = "loadingCover";
    cover.style.position = "fixed";
    cover.style.top = "0px";
    cover.style.bottom = "0px";
    cover.style.left = "0px";
    cover.style.right = "0px";
    cover.style.background = "#000000";
    cover.style.color = "#FFFFFF";
    cover.innerHTML = "LOADING";
    document.body.appendChild(cover);
    let date = new Date();
    date.setTime(date.getTime()+(1000*60*60*24*365));
    document.cookie = "name="+name+"; expires="+encodeURIComponent(date.toUTCString())+";";
    ownName = name;
  }
  if(document.getElementsByClassName("nicklist tab-invisible dynamicpanel qwebirc-qui rightboundpanel").length<1){
    setTimeout(waitForChat,100,once);
    return;
  }
  chat(false,false);
}

function chat(once,loaded){
  if(!(document.getElementsByClassName("dynamicpanel qwebirc-qui topicboundpanel topic tab-invisible colourline")[0] || document.getElementsByTagName("input")[0]) && !once){
    setTimeout(chat,100,false,false);
    return;
  }
  if(!loaded){
    setTimeout(chat,100,false,true);
    document.body.removeChild(document.getElementById("loadingCover"));
    return;
  }
  setTimeout(chat,100,true,true);
  let input = document.getElementsByClassName("dynamicpanel qwebirc-qui bottomboundpanel input")[0];
  input.style.position = "relative";
  input.style.top = "0px";


  let messageList = document.getElementsByClassName("dynamicpanel qwebirc-qui middleboundpanel lines ircwindow")[0];
  if(!messageList)
    messageList = document.getElementsByClassName("drrrMessageList")[0];
  messageList.style.background = "rgba(0,0,0,1)";
  messageList.style.width = "100%";
  messageList.style.overflowY = "scroll";
  messageList.style.overflowX = "hidden";
  messageList.style.bottom = "0px";
  messageList.style.top = window.getComputedStyle(input).height;
  messageList.style.position = "fixed";
  messageList.parentNode.top = "100px";
  let messages = messageList.getElementsByClassName("colourline");
  if(messages.length<1)
    return;

  for(let i=0;i<messages.length;i++){
    let slashMe = 0;
    let spans = messages[i].getElementsByTagName("span");
    if(spans.length<4){
      if(spans.length<3 || !spans[1].innerHTML.startsWith(" * ")){
        continue;
      }
      slashMe = 1;
    }

    let reply = document.createElement("div");
    reply.setAttribute("class","drrrReply");
    reply.style.width = (600+58+25)+"px";
    reply.style.margin = "auto";
    let personHolder = document.createElement("div");
    personHolder.style.width = "58px";
    personHolder.style.position = "relative";
    personHolder.style.display = "flex";
    reply.appendChild(personHolder);
    let replyHolder = document.createElement("div");
    replyHolder.style.width = "600px";
    replyHolder.style.display = "flex";
    let replyBubble = document.createElement("div");
    replyBubble.style.alignSelf = "center";
    replyBubble.style.display = "flex";
    let replyText = document.createElement("div");
    replyText.style.display = "flex";
    replyBubble.appendChild(replyText);
    replyHolder.appendChild(replyBubble);
    reply.appendChild(replyHolder);
    messageList.prepend(reply);

    let name = "";
    if(messages[i].getElementsByClassName("hyperlink-whois"))
      name = messages[i].getElementsByClassName("hyperlink-whois")[0];
    else
      name = spans[3-slashMe];
    let self = name.parentNode.getAttribute("class") == "Xu";
    name = name.innerHTML;
    let pm = spans[1];
    let m = spans[2+(self?2:0)-slashMe].innerHTML;
    if(m == "@")
      m = spans[3+(self?2:0)-slashMe].innerHTML;
    if(self)
      m = m.replace(/^&gt; /,"");
    else if(!slashMe)
      m = m.replace(/.+?&gt; /,"");
    else
      m = m.replace(/.+<\/span> /,"");
    replyText.innerHTML = "<span style='overflow-wrap: break-word; width: 100%;'>"+m+"</span>";
    let id = 0;
    let nameheight = 0;

    let iconHolder = document.createElement("div");
    personHolder.appendChild(iconHolder);
    if(name.match(/^@?\[[0-9]+\]/)){
      id = parseInt(name.replace(/@?\[/,"").replace(/\].+/,""));
    }

    if(!icons[id])
      setIcon(0,iconHolder);
    else
      setIcon(id,iconHolder);

    let namePlate = document.createElement("div");
    namePlate.innerHTML = name.replace(/\[[0-9]+\]/,"");
    namePlate.style.margin = "auto";
    namePlate.style.width = "90px";
    namePlate.style.textAlign = "center";
    namePlate.style.color = "#FFFFFF";
    namePlate.style.position = "absolute";
    namePlate.style.transform = "translateX(-50%) translateY(-6px)"
    namePlate.style.overflowWrap = "break-word";
    namePlate.style.left = "29px";
    namePlate.style.top = "calc(50% + 39px)";
    iconHolder.style.display = "block";
    iconHolder.appendChild(namePlate);
    nameheight = parseInt(window.getComputedStyle(namePlate).height.replace("px",""))+1;

    reply.style.minHeight = (99+nameheight)+"px";
    reply.style.display = "flex";

    let separator = document.getElementsByClassName("lastpos")[0];
    if(separator)
      separator.parentNode.removeChild(separator);

    /*if(pm.innerHTML == "*"){
    }*/

    let topColor = "65,65,65,1";
    let topMiddleColor = "65,65,65,0.95";
    let bottomMiddleColor = "65,65,65,0.85";
    let bottomColor = "65,65,65,0.5";
    replyBubble.style.background = "linear-gradient(to bottom,rgba("+topColor+"),rgba("+topMiddleColor+") 50%,rgba("+bottomMiddleColor+") 50%,rgba("+bottomColor+"))";
    replyBubble.style.border = "solid #FFFFFF 4px";
    replyBubble.style.borderRadius = "13px";
    replyBubble.style.maxWidth = Math.min(window.innerWidth,600)+"px";
    replyBubble.style.minWidth = (18*3)+"px";
    replyBubble.style.width = "auto";
    replyBubble.style.left = "30px";
    replyBubble.style.position = "relative";

    replyText.style.color = "#FFFFFF";
    replyText.style.position = "relative";
    replyText.style.fontSize = "18px";
    replyText.style.margin = "18px";
    replyText.style.marginTop = "14px";
    replyText.style.lineHeight = "20px";
    replyText.style.width = "-moz-max-content";
    replyText.style.maxWidth = "max-content";

    replyBubble.style.width = (parseInt(window.getComputedStyle(replyText).width.replace("px",""))+18*2+8)+"px";

    replyText.style.width = "";
    replyText.style.maxWidth = (Math.min(window.innerWidth,600)-18*2)+"px";

    let arrowGradient = document.createElement("div");
    arrowGradient.style.width = "25px";
    arrowGradient.style.height = "13px";
    arrowGradient.style.background = "#000000";
    arrowGradient.style.top = "calc(50% - 1px)";
    arrowGradient.style.transform = "translateY(-50%)";
    arrowGradient.style.left = "-25px";
    arrowGradient.style.position = "absolute";

    let arrow = document.createElement("div");
    arrow.style.width = "25px";
    arrow.style.height = "13px";
    let h = parseInt(window.getComputedStyle(replyBubble).height.replace("px",""))/13*100;
    let arrowBackground = "linear-gradient(10deg,rgba(0,0,0,1),rgba(0,0,0,1) calc(40% - 3px),rgba(255,255,255,1) calc(40% - 3px),rgba(255,255,255,1) calc(40% + 1px),rgba(0,0,0,0) calc(40% + 1px),rgba(0,0,0,0)),"+
        "linear-gradient(170deg,rgba(0,0,0,1),rgba(0,0,0,1) calc(40% - 3px),rgba(255,255,255,1) calc(40% - 3px),rgba(255,255,255,1) calc(40% + 1px),rgba(0,0,0,0) calc(40% + 1px),rgba(0,0,0,0)),"+
        "linear-gradient(to bottom,rgba("+topColor+") -"+h+"%,rgba("+topMiddleColor+") calc(50% + 0.5px),rgba("+bottomMiddleColor+") calc(50% + 0.5px),rgba("+bottomColor+") "+h+"%)";
    arrow.style.background = arrowBackground;
    arrowGradient.appendChild(arrow);
    replyBubble.appendChild(arrowGradient);

    messages[i].parentNode.removeChild(messages[i]);

    if(window.scrollY>0){
      window.scroll(0,0);
      messageList.scroll(0,0);
    }
  }


  if(!once){
    let header = document.getElementsByClassName("dynamicpanel qwebirc-qui topicboundpanel topic tab-invisible colourline")[0];
    header.parentNode.removeChild(header);

    document.body.prepend(input);
    document.body.style.background = "#EEEEEE";
    input.style.paddingLeft = "24px";
    input = document.getElementsByTagName("input")[0];
    let inputBox = document.createElement("textarea");
    input.parentNode.style.width = "725px";
    input.parentNode.style.margin = "auto";
    input.parentNode.style.background = "#EEEEEE";
    input.style.height = "0px";
    input.style.width = "0px";
    input.style.margin = "0px";
    input.style.border = "0px";
    input.style.padding = "0px";
    inputBox.style.width = "460px";
    inputBox.style.height = "65px";
    inputBox.style.overflowWrap = "break-word";
    inputBox.style.overflowX = "hidden";
    inputBox.style.whiteSpace = "normal";
    inputBox.style.background = "#FFFFFF";
    inputBox.style.position = "relative";
    inputBox.style.top = "0px";
    inputBox.style.left = "88px";
    inputBox.style.border = "2px solid #DDDDDD";
    inputBox.placeholder = "";
    inputBox.oninput = ()=>input.value = inputBox.value;
    inputBox.addEventListener("keydown",function(e){
                                            if(e.code=="Enter"){
                                              inputBox.value = "";
                                              input.focus();
                                              input.dispatchEvent(e);
                                            }
                                          });
    input.onkeydown = function(){
                        inputBox.value = "";
                        messageList.scroll(0,0);
                        window.scroll(0,0);
                        inputBox.focus();
                      };
    input.parentNode.appendChild(inputBox);

    document.getElementById("ircui").style.top = "4000px";

    let user = document.createElement("div");
    user.style.width = "58px";
    user.style.display = "inline-block";
    user.style.position = "absolute";
    user.style.top = "0px";
    let userID = parseInt(ownName.replace("[","").replace(/\].+/,""));
    user.innerHTML = icons[userID].outerHTML+"<div id='nameUnderIcon'>"+ownName.replace(/\[[0-9]+\]/,"")+"</div>";
    input.parentNode.prepend(user);
    let username = document.getElementById("nameUnderIcon");
    username.style.position = "relative";
    username.style.left = "50%";
    username.style.top = "-4px";
    username.style.transform = "translateX(-50%)";
    username.style.width = "100px";
    username.style.overflow = "visible";
    username.style.overflowWrap = "break-word";
    username.style.height = "auto";
    username.style.lineHeight = "18px";
    username.style.textAlign = "center";

    inputBox.style.height = (parseInt(window.getComputedStyle(user).height.replace("px",""))-4)+"px";

    //let online = document.getElementsByClassName("nicklist tab-invisible dynamicpanel qwebirc-qui rightboundpanel")[0];
    //Create toggleable online list instead of
    let online = document.getElementsByClassName("nicklist tab-invisible dynamicpanel qwebirc-qui rightboundpanel")[0];
    online.parentNode.removeChild(online);
  }
  messageList.setAttribute("class","drrrMessageList");
}

function setIcon(id,icon,message){
  icon.innerHTML = icons[id].outerHTML;
  icon.children[0].style.transform = "translateY(-50%)";
  icon.children[0].style.top = "50%";
  icon.children[0].style.position = "relative";
}