[FIXED] Rout 66 Chat Mode Mod

[mrparker]

Updates:
- Added /say as an alternative to /chat
- Added command aliases /s and /c for /say and /chat! Shorter to type!
- forgot to up the version number again

I made a script that allows you to chat, and to click links in the Melonland chat when in Rout 66 mode.

Some people wanted to be able to click links, and I personally wanted to be able to chat - both without leaving Rout 66 mode. So I made this userscript to allow you to do both.

If you don't have it already, you'll need to use a plugin for your browser called ViolentMonkey, which can be found here:
https://violentmonkey.github.io/

Quick little tutorial on how to use:

- To send a chat message in the normal chat, use the /chat command with your message added
- To click links, click the "Toggle Links" button at the bottom

This script took me an embarrassingly long time to make, primarily cause I had no idea how keyboard input was handled with iframes - something I wish browsers had documentation for!

Anyways, here's the userscript:

Code

// ==UserScript==
// @name        Rout 66 chat enhancer
// @namespace   Violentmonkey Scripts
// @icon        https://forum.melonland.net/apple-touch-icon.png
// @version     1.1.0
//
// @match       https://forum.melonland.net/chat.php*
// @homepageURL https://forum.melonland.net/index.php?topic=5760.msg56075
// @grant       none
// @run-at      document-idle
//
// @author      mrparker
// @description Allows you to still chat and click links in the melonland chat when in Rout 66 mode
// ==/UserScript==

const chatBarSelector = `input[placeholder="Send a chat message... or /help"]` // chatbar inside the route frame
const inputBarInFrame = `div.shoutbox_input_bar` // inside chat iframe (contains chat box and submit buttons)
const melonStreetPaneId = "melon-street-plane" // overlay that prevents clicking links

// Shouldn't ever need to edit anything below
const chatBar = document.querySelector(chatBarSelector)
const melonStreetPane = document.getElementById(melonStreetPaneId)

const setPointerEvents = (enabled) => {
  const autoOrNot = enabled == true ? "auto" : "none"
  const currentlyEnabled = autoOrNot == "auto" ? "none" : "auto"

  melonStreetPane.setAttribute("style", melonStreetPane.getAttribute("style").replace(`pointer-events: ${currentlyEnabled};`, `pointer-events: ${autoOrNot};`))
}

let toggleButton = document.createElement("button")
toggleButton.setAttribute("style", `width: 120px; background-color: blue; color: white; pointer-events: auto; cursor: pointer; border-radius: 12px; height: 25px; margin: 2px 8px;`)
toggleButton.innerHTML = "Toggle Links"
chatBar.parentElement.appendChild(toggleButton)

toggleButton.addEventListener("click", () => { setPointerEvents(melonStreetPane.getAttribute("style").indexOf("pointer-events: none;") != -1 ? true : false) })

document.getElementById("chat-window").addEventListener("load", (e) => {
  const contentDocument = e.target.contentDocument
  const contentWindow = e.target.contentWindow

  const chatBarSubmit = contentDocument.querySelector(`${inputBarInFrame} input[type="submit"]`)
  const chatBarTextBox = contentDocument.querySelector(`${inputBarInFrame} input[type="text"]`)

  const sendMessage = (message) => {
    chatBarTextBox.value = message
    chatBarSubmit.click()

    chatBar.focus()
  }

  Street.registerCommand("chat", sendMessage)
  Street.registerCommand("say", sendMessage)

  Street.registerCommand("s", sendMessage)
  Street.registerCommand("c", sendMessage)
})

Enjoy!