Chat Box Section

Creates a separated section for the chat box

As of 2025-01-06. See the latest version.

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name        Chat Box Section
// @namespace   Violentmonkey Scripts
// @match       https://web.simple-mmo.com/*
// @grant       none
// @license     GPL-v3
// @version     1.4.0
// @author      Freaky Fingers
// @description Creates a separated section for the chat box
// ==/UserScript==
//Startup Sequence Variables
let allxinits = document.querySelectorAll("[x-init]")
let smmoChat = null

allxinits.forEach(xinit => {
  if (xinit.outerHTML.includes("chat:false,chatSrc:'about:blank;'")){
    smmoChat = xinit
  }
})

if (smmoChat == null) return;
smmoChat.style = "position: fixed; height: 100%";

//Config Variables
let chatWidth = 20
let chatHeight = 94

//Script Variables
let newButton = document.createElement("div")
let newHTML = document.createElement("chatArea")
let show_hide_chat_btns = document.getElementsByClassName("mr-1")
let chatBox = document.getElementById("chatBox")
let chatButton = document.getElementById("show_hide_chat_btn")
let buttonAttrib = null

chatBox.style = `position: relative; height: ${chatHeight}%; width: ${chatWidth}vw; padding: 0rem`;
chatButton.style.visibility = 'hidden';

//Functions

function findButtonAttrib() {
  for (let i = 0; i < show_hide_chat_btns.length; i++) {
    if (show_hide_chat_btns[i].outerHTML.includes("!chat") == false) return;
    buttonAttrib = show_hide_chat_btns[i].outerHTML
  }
}

function show_hide_chat (){
  findButtonAttrib();
  if (buttonAttrib.includes("display: none")) {
    newHTML.style.display = "none";
    chatButton.click()
  } else {
    newHTML.style.display = "block";
    chatButton.click()
  }
}

//Main Script
newButton.innerHTML = `<button id="newChatButton" style="position: fixed; padding: 0.5rem; background-color: #000; border: 2px solid #C0C0C0; right: 5rem; top: 0.6rem; border-radius: 0.5rem; color: #C0C0C0; z-index: 100">Show/Hide Chat</button>`;
newButton.onmousedown = show_hide_chat;
newHTML.innerHTML = `
<div id="chatParent">
  <section id="chatHeader"></section>
  <section id="chatSection"></section>
</div>
`;  //create new div
newHTML.style = `background-color: #0000; height: ${chatHeight}vh; width: ${chatWidth}vw; float: right; position: sticky; z-index: 1; display: none`; //Style new div

document.addEventListener('keydown', function (event) {
  if (event.code === 'NumpadEnter') {
    show_hide_chat()
  }
})

window.addEventListener('load', function () {
  findButtonAttrib();
  if (buttonAttrib.includes("display: none")) {
  newHTML.style.display = "block"
  }
});

document.getElementsByClassName("h-screen flex overflow-hidden bg-gray-100")[0].style = `z-index: 2; position: relative`;  //Increases the z-index of the main game, thereby fixing a bug of being unable interact with the Buy Item popout
document.getElementById("app").insertBefore(newHTML, document.getElementsByClassName("h-screen flex overflow-hidden bg-gray-100")[0]); //Insert new div into page at correct position
document.getElementsByClassName("web-app-container")[0].insertAdjacentElement(`afterbegin`, newButton);
document.getElementById("chatHeader").style = `background-color: rgb(17 17 17 / var(--tw-bg-opacity)); height: 4rem`;
document.getElementById("chatSection").appendChild(smmoChat); //Add the chat to new div