DM improvement script

    // ==UserScript==
// @name         dm-log
// @namespace    http://tampermonkey.net/
// @version      0.0.1
// @description  log previous DMs in case you are forgetful
// @author       isabelle
// @match        https://brainworm.surgery
// @icon         https://brainworm.surgery/src/40ab5a51d61fd1e6.gif
// @grant        none
// ==/UserScript==

(function() {
    // 'use strict';
    const require = window.require
    const MAX_MESSAGES = 4
    const handleDM = require.config("dm").handleDM // original function
    const BannerModal = require.config("base/banner").BannerModal

    class dmLogClass extends BannerModal {
        constructor() { super(document.getElementById("dmlog")) }
    }

    // render the list of messages inside #dm-list
    function updateDMList() {
        let dms = JSON.parse(localStorage.getItem("scriptanon_dms")) || []
        let list = document.getElementById("dmlog-list")
        list.innerHTML = ""
        for (let i=0; i < dms.length; i++) {
            let msg = dms[i]
            // list item
            let li = document.createElement("li")
            // post link
            let sameBoard = window.pagestate.board === msg.board
            let link = document.createElement("a")
            // >>>/board/num notation might not be valid, but i think it looks nice.
            // on brainworm posts are global so nobody ends up typing like this
            link.innerText = sameBoard ? `>>${msg.from}` : `>>>/${msg.board}/${msg.from}`
            link.href = `#p${msg.from}`
            //  brainworm yses data-id to show the post on hover. very cool!
            link.setAttribute("data-id", msg.from)
            link.classList.add("post-link")

            // appending stuff
            // staff marker
            if (msg.staff) {
                // <b> inside an <li>.. that's legal, right?
                let staffText = document.createElement("b")
                staffText.innerText = "(s) "
                staffText.style.color = "#ff0c0c"
                li.appendChild(staffText)
            }
            // link and message
            li.appendChild(link)
            li.appendChild(document.createTextNode(`: ${msg.text}`))

            // add to real list
            list.appendChild(li)
        }
    }

    // store messages when they are recieved, and update the UI
    function newHandleDM(m) {
        // pass the message on to the original function
        handleDM(m)
        console.log(m)
        let dms = JSON.parse(localStorage.getItem("scriptanon_dms")) || []
        dms.push(m)
        console.log(dms)
        // store the array of DMs. note to self: i do -MAX + 1 because messages are 0-indexed and not 1-indexed;
        // also negative array slices start from the end of the array
        localStorage.setItem("scriptanon_dms", JSON.stringify(dms.slice(-MAX_MESSAGES)))
        // update list so users can see
        updateDMList()
    }

    // create the box with the DMs inside. apparently the page is allergic to just appending the HTML,
    // which is probably not good for some reason anyway
    function createDiv() {
        let div = document.createElement("div")
        div.id = "dmlog"
        div.classList.add("modal", "glass")
        let title = document.createElement("h3")
        title.classList.add("info-header")
        title.innerText = "DMs"
        let ul = document.createElement("ul")
        ul.id = "dmlog-list"
        ul.style = "list-style: none; padding-left: 0;"
        div.appendChild(title)
        div.appendChild(ul)
        return div
    }

    //
    // when the site is loaded, add the panel and button, populate it, then set up logging of messages
    // TODO: find out when to run this
    //

    // set up the HTML stuff
    let modalOverlay = document.getElementById("modal-overlay")
    let buttonRow = document.getElementById("banner").getElementsByClassName("center-vertically")[1]

    let button = document.createElement("a")
    button.id = "banner-dmlog"
    button.innerText = "DMs"

    modalOverlay.appendChild(createDiv())
    buttonRow.appendChild(button)

    // make it work
    let dmLog = new dmLogClass()

    // set the DM handler to our own
    let conn = require.config("connection/index")
    conn.handlers[conn.message.sendDM] = newHandleDM

    // load saved DMs
    updateDMList()

    // show the DM list when a keybind is pressed
    document.addEventListener("keydown", (e) => {
        if (e.key === "a" && e.altKey === true) {
            document.getElementById("dmlog").classList.toggle("show")
        }
    })

})();