Focus Mode OneOption Chat Room

index.js

// ==UserScript==
// @name         Focus Mode OneOption Chat Room
// @version      0.1
// @description  Maxmimizes the chat and hides all other functionality except for likes.
// @match        https://oneoption.com/chat-room*
// @icon         https://oneoption.com/Content/images/favicon-180.png
// ==/UserScript==

(function () {
  "use strict";

  const createTradeLog = () => {
    var elemDiv = document.createElement("div");
    elemDiv.className = "trade-log-container";
    document.body.appendChild(elemDiv);
  };

  const scanForTrades = () => {
    (() => {
      let tradeHtml = `<h6>Trade Log</h6>`;

      Array.from(document.querySelectorAll(".messages .m-item"))
        .reverse()
        .forEach((el) => {
          const author = el.querySelector(".m-author");
          const time = el.querySelector(".m-time");
          const body = el.querySelector(".m-body");
          const result = body.innerText.match(/\b[A-Z]{1,4}\b/);

          if (
            // Array.isArray(result) &&
            body.innerText.toLowerCase().substring(0, 10).includes("long") ||
            body.innerText.toLowerCase().substring(0, 10).includes("short")
          ) {
            try {
              // const ticker = `<span class="badge badge-info">${result[0]}</span>`;

              tradeHtml += `
            <small class="text-muted text-small">${author.innerText} - ${time.innerText}</small>
            <br />
            `;

              if (body.innerText.toLowerCase().includes("long")) {
                tradeHtml += `<span class="badge badge-success">LONG</span>`;
              }

              if (body.innerText.toLowerCase().includes("short")) {
                tradeHtml += `<span class="badge badge-danger">SHORT</span>`;
              }

              tradeHtml += ` ${body.innerText}<hr />`;
            } catch (e) {
              console.error(e);
            }
          }
        });

      document.querySelector(".trade-log-container").innerHTML = tradeHtml;
    })();
  };

  setInterval(() => {
    // In the url you need to set https://oneoption.com/chat-room?OneOptionChatAutoScrollEnabled=true
    // to control force scrolling to the bottom of the chat so you always see the latest
    // updates.  This also means you can't scroll up.
    if (window.location.href.includes("OneOptionChatAutoScrollEnabled")) {
      let scrollableParent = document.querySelector(".messages");
      scrollableParent.scrollTop = scrollableParent.scrollHeight;
    }

    scanForTrades();
  }, 5000);

  setTimeout(() => {
    const publicEl = document.querySelector("#public");
    publicEl.style.marginBottom = "50px";
    publicEl.style.position = "absolute";
    publicEl.style.backgroundColor = "white";
    publicEl.style.zIndex = "1022";
    publicEl.style.left = "0";
    publicEl.style.right = "0";
    publicEl.style.bottom = "0";
    publicEl.style.top = "0";

    if (document.querySelector("#public > div > div.col-md-9.col-lg-10")) {
      document.querySelector("#public > div > div.col-md-9.col-lg-10").className = "col";
    }
    document.querySelector("html").style.overflowX = "hidden";

    if (document.querySelector("#content > .container > .row:last-child")) {
      document.querySelector("#content > .container > .row:last-child").style.display = "none";
    }

    if (document.querySelector("header")) {
      document.querySelector("header").className = "site-header";
    }

    if (document.querySelector("#public > div > div.col-md-3.col-lg-2 > details")) {
      document.querySelector("#public > div > div.col-md-3.col-lg-2 > details").className = "members-container";
    }

    if (document.querySelector("#public > .row > .col:first-child")) {
      document.querySelector("#public > .row > .col:first-child").className = "chat-controls-container col";
    }

    if (document.querySelector("#public > div > div.col-md-9.col-lg-10 > div:nth-child(1)")) {
      document.querySelector("#public > div > div.col-md-9.col-lg-10 > div:nth-child(1)").style.display = "none";
    }

    if (document.querySelector(".chat-controls-container > div:first-child")) {
      document.querySelector(".chat-controls-container > div:first-child").style = "";
      document.querySelector(".chat-controls-container > div:first-child").className = "row";
      document.querySelector(".chat-controls-container .user-details").className = "col";
      document.querySelector(".chat-controls-container .chat-actions").className = "col";
    }

    var tag = document.createElement("style");
    var text = document.createTextNode(`
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #2e3338;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #202225;
  border-radius: 5px;  
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #202225;
}

body {
   background: #37393e;
   font-size: 16px;
   font-family: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.m-item,.m-item:hover {
   position: relative;
   background: none;
   color: white;
   border: 0
}

.m-body blockquote {
   background: none;
   margin: 10px 0 10px 10px;
   padding-left: 15px;
}

.m-body {
   padding-bottom: 15px;
   font-size: 16px;
   font-family: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: rgb(220, 221, 222);
   line-height: 22px;
   font-size: 16px;
   font-family: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: rgb(220, 221, 222);
}

.m-item.admin .m-author, .m-item.featured .m-author {
   color: rgb(231, 76, 60);
}

.m-header {
   font-size: 16px;
}

.messages {
   border: 0;
   padding: 0;
   background: #37393e;
   height: auto;
   position: fixed;
   min-height: 0;
   line-height: 22px;
   font-size: 16px;
   font-family: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: rgb(220, 221, 222);
   max-height: none;
   overflow-y: scroll;
   right: 200px;
   bottom: 120px;
   top: 100px;
   width: 60%;
   left: 20%;
}

.message.joined {
  position: fixed;
  border: 0;
  height: 120px;
  background: #37393e;
  bottom: 0;
  left: 20%;
  z-index: 1200;
  right: 20%;
}

.pell-actionbar {
  background-color: #37393e;
  border-bottom: 2px solid #2f3136;
  border-top: 2px solid #2f3136;
}

.pell-actionbar button {
  color: rgb(220, 221, 222);
}

.pell-button:not(:disabled):hover {
  background: #2f3136;
}

.pell-actionbar svg {
  max-height: 17px;
  filter: invert(99%) sepia(0%) saturate(539%) hue-rotate(263deg) brightness(91%) contrast(91%);
}

.m-header img {
   border-radius: 100%;
   position: absolute;
   left: 15px;
   height: 50px;
   width: 50px;
}

.m-header {
   padding-left: 70px;
   align-items: baseline;
   max-height: none;
}

.m-body {
   padding-left: 70px;
}

.m-item.featured {
   background: rgba(250, 168, 26, 0.1)
}

.m-item {
   border-radius: 0;
}

.m-item.featured:before {
   bottom: 0px;
   content: "";
   display: block;
   left: 0px;
   pointer-events: none;
   position: absolute;
   top: 0px;
   background: rgb(250, 168, 26);
   width: 3px;
}

.m-votes {
   float: none;
   border: none;
   background: rgb(47, 49, 54);
   padding: 5px 7px 3px 0;
   line-height: 16px;
   margin: 0px 0 0px 70px;
   width: auto;
   display: inline-block;
}

.m-votes > span:first-child {
   background-color: #dda400;
   cursor: pointer;
   height: 100%;
   width: 100%;
   position: absolute;
   right: 0;
   left: 0;
   margin: 0;
   bottom: 0;
   top: 0;
   mask: url(/Content/images/thumb.svg) no-repeat;
   -webkit-mask: url(/Content/images/thumb.svg) 5px 5px / 16px 16px no-repeat;
}

.m-votes > span:last-child {
   border-left: none;
   cursor: default;
   color: rgb(220, 221, 222);
   display: inline-block;
   font-size: 13px;
   padding: 0 0 3px 19px;
   font-weight: bold;
   margin: 0px 0 0 10px;
}

.m-time {
   color: rgb(114, 118, 125);
   font-size: 12px;
}

.members-container {
  overflow-y: scroll;
  display: block;
  position: fixed;
  right: 25px;
  width: 20%;
  background: #2f3136;
  top: 50px;
  padding: 0;
  margin: 0;
  bottom: 0;
  color: rgb(142, 146, 151);
}

.users {
  max-height: none;
}

.users div {
  margin: 3px 5px;
  border-radius: 3px;
  padding-left: 3px;
  justify-content: left;
}

.users div:hover {
  background: #34373c;
}

.users-summary {
  text-align: left;
  padding: 10px 15px;
}

.chat-controls-container {
  background: #37393e;
  position: absolute;
  right: 20%;
  top: 50px;
  width: auto;
  left: 20%;
  margin-left: 0;
  color: rgb(220, 221, 222);
  border-bottom: 2px solid #2f3136;
  max-height: 50px;
  z-index: 9999999999999999999999999999999999999;
}

.chat-controls-container .btn {
  height: 40px;
  width: 40px;
  border-radius: 3px;
  background-color: #2f3136;
  background-size: 60%;
  margin-top: 4px;
}

.chat-controls-container .btn:last-child {
  display: none;
}

.chat-controls-container .btn svg {
  max-width: 100%;
  max-height: 100%;
  opacity: 0;
}

.chat-controls-container .btn.off svg {
  opacity: 1;
}

.chat-controls-container .row .col:last-child {
  text-align: right;
}

.trade-log-container {
  overflow-y: scroll;
  display: block;
  position: fixed;
  left: 0;
  background: #2f3136;
  top: 50px;
  padding: 0 10px;
  margin: 0;
  width: 20%;
  bottom: 0;
  color: rgb(142, 146, 151);
  z-index: 10000;
  overflow-x: hidden;
}

.trade-log-container h6 {
  padding: 14px 30px;
  margin: 0 -30px;
  border-bottom: 2px solid #37393e;
}

.trade-log-container hr {
  margin: 0.5rem 0;
}

header {
  position: fixed;
  z-index: 1024!important;
  background: #37393e;
  margin: 0;
  right: 0;
  top: 0;
  max-height: 50px;
  padding: 6px 0;
  border-bottom: 2px solid #2f3136;
  left: 0;
}

.site-header .logs .button a {
  line-height: 2.3rem;
}
      `);
    tag.appendChild(text);
    var element = document.querySelector("body");
    element.appendChild(tag);

    createTradeLog();
  }, 1000);
})();