Greasy Fork is available in English.

DH3 chat overhaul

lol

As of 2020-07-06. See the latest version.

// ==UserScript==
// @name         DH3 chat overhaul
// @namespace    FileFace
// @version      1.0.71
// @description  lol
// @author       donald trump
// @match        dh3.diamondhunt.co
// @grant        none
// ==/UserScript==
/*jshint multistr: true */
/*jslint es5: true */


(function() {
    'use strict';

    const audio = new Audio('./sounds/success.wav')
    const menuButtons = [{
        id: 'pinging-button',
        key:'pinging'},{
        id: 'pm-pinging-button',
        key:'pm'},{
        id: 'set-words-button',
        key:'words'},{
        id: 'emoji-button',
        key:'emoji'},{
        id: 'chat-friendlist',
        key:'friends'},{
        id: 'twitchemotes-button',
        key:'twitch'},{
        id: 'chat-ignorelist',
        key:'ignore'}]

    var playerIsMod = false
    var chatSettings = {}
    var twitchEmotes = []
    // wait for game to load
    const startThing = () => {
        if(window.var_username){
            pogchamp()
        }else{
            setTimeout(startThing, 1000)
        }
    }
    startThing()

    // run all functions when game is loaded
    function pogchamp(){
        loadSettingsFromStorage()
        createChatSettingsButton()
        createMainContainer()
        createChatSettings('dialogue-extra-chat-settings','things-for-dh3')
        createChatSettings('dialogue-set-words','things-for-dh3','words')
        createChatSettings('dialogue-friendlist','things-for-dh3','friends')
        createChatSettings('dialogue-ignorelist','things-for-dh3','ignore')
        updateFriendList('','load')
        updateIgnoreList('','load')
        chatSettings.volume ? audio.volume = chatSettings.volume : audio.volume = 0.1
        darkMode()
        typeof var_chatTag !== 'undefined' ? var_chatTag = 'Moderator' ? playerIsMod = true : playerIsMod = false : playerIsMod = false
        addEmojiScripts()
        getTwitchEmotes()
        createRightClickMenu()
        createMenuButtons()
        createMuteMenu()
        addStyle(`a{
color:cyan
}
a:visited{
color:darkcyan
}`)
        chatPinging()
    }
    function addStyle(styleString) {
        const style = document.createElement('style');
        style.textContent = styleString;
        document.head.append(style);
    }
    function getTwitchEmotes(){
        fetch('https://api.twitchemotes.com/api/v4/channels/0')
            .then(response=> response.json())
            .then(data=> {twitchEmotes = data.emotes})}

    function addEmojiScripts(){
        let link = document.createElement('link')
        link.rel = 'stylesheet'
        link.href = "//cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/css/basic/emojify.min.css"
        document.getElementById('body').appendChild(link)
        let script = document.createElement('script')
        script.src = "//cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/js/emojify.min.js"
        document.getElementById('body').appendChild(script)
        link.rel = 'stylesheet'
        link.href = "https://emoji-css.afeld.me/emoji.css"
        document.getElementById('body').appendChild(link)
    }

    // chat pinging
    // style of pinged message
    function ping(msg){
        audio.play()
        // background color, rgb, last value is opacity
        msg[0].parentNode.style.background = 'rgba(255, 0, 0, 0.3)'
        // color of text
        msg[0].parentNode.style.color = 'white'
    }

    // pinging logic
    function chatPinging(){
        const observer = new MutationObserver(messages=>{
            //console.log(messages)
            messages.forEach((mutation,index)=>{
                if (mutation.addedNodes.length === 1){
                    let x = mutation.addedNodes[0]
                    let parentElement = mutation.addedNodes[0].querySelectorAll('span') !== null ? mutation.addedNodes[0].querySelectorAll('span') : null
                    let images = mutation.addedNodes[0].querySelectorAll('img') !== null ? mutation.addedNodes[0].querySelectorAll('img') : null
                    let nameElement = mutation.addedNodes[0].querySelectorAll('b')[0]
                    let messageElement = parentElement.length === 2 ? mutation.addedNodes[0].querySelectorAll('span')[1] : mutation.addedNodes[0].querySelectorAll('span')[2]
                    let message = analyzeMessage(parentElement, nameElement, messageElement, images)
                    // check if ignored
                    message.isIgnored ? x.style.display = 'none' : null
                    //dark mode settings
                    parentElement[0].style.color = 'darkgrey'
                    parentElement[0].parentNode.style.padding = '2px'
                    if (document.querySelectorAll('#chat-area-view > div').length % 2 === 1){
                        parentElement[0].parentNode.style.background = '#32363d'
                    }
                    if (!message.isPM){
                        message.isFriend ? nameElement.style.color = '#38f9b5' : nameElement.style.color = '#e7ae68'
                        if (message.playerName === var_username){
                            nameElement.style.color = '#00ffff'
                        }
                        if (message.tag && message.playerName !== var_username){
                            switch (message.tag){
                                case 'Dev':
                                    messageElement.style.color = '#dbb639'
                                    nameElement.style.color = '#dbb639'
                                    break
                                case 'Moderator':
                                    messageElement.style.color = '#eeeeee'
                                    nameElement.style.color = '#189531'
                                    break
                                case 'Server Message':
                                    nameElement.style.color = '#C04238'
                                    break
                                case 'Financier':
                                    messageElement.style.color = '#3e9dc0'
                                    nameElement.style.color = '#3e9dc0'
                                    break
                                case 'Investor':
                                    console.log(message.tag)
                                    messageElement.style.color = '#cc66ff'
                                    nameElement.style.color = '#cc66ff'
                                    break
                            }
                        }

                    }else if(message.isPM && !message.isPMsent){
                        messageElement.style.color = '#68d140'
                    }else{
                        messageElement.style.color = '#47902b'
                    }
                    if(!message.isPM && chatSettings.pingingOn && !message.isIgnored){
                        let messageWords = message.content.split(' ')
                        // check if user has set any exactwords
                        if (chatSettings.exactWords.length>0){
                            messageWords.forEach(messageWord=>{
                                chatSettings.exactWords.forEach(exactWord=>{
                                    // check if a word matches predefined ping words
                                    if(exactWord === messageWord.toLowerCase()){
                                        ping(parentElement)
                                    }
                                })
                            })
                        }
                        // check if user has set any matchwords
                        if(chatSettings.matchWords.length>0){
                            chatSettings.matchWords.forEach(matchWord=>{
                                // check if a message contains any form of predefined words
                                message.content.toLowerCase().includes(matchWord) ? ping(parentElement) : null
                            })
                        }
                        // ping if message is a pm and user has pms on
                    }else if(message.isPM && !message.isPMsent && chatSettings.pingPM && !message.isIgnored){
                        ping(parentElement)
                    }
                    if (chatSettings.twitchEmotes){
                        message.words.forEach(word=>{
                            twitchEmotes.forEach(emote=>{
                                if (word === emote.code){
                                    let prefix = parentElement[1].innerHTML.substring(0,parentElement[1].innerHTML.indexOf('</b>')+4)
                                    let emoji = message.content.replace(word,`<img src="https://static-cdn.jtvnw.net/emoticons/v1/${emote.id}/1.0" style="vertical-align:middle;height: 32px" title="${word}"></img>`)
                                    parentElement[1].innerHTML = prefix + emoji
                                }
                            })
                        })
                    }
                    if (chatSettings.emoji){
                        let prefix = parentElement[1].innerHTML.substring(0,parentElement[1].innerHTML.indexOf('</b>')+4)
                        let emoji = emojify.replace(parentElement[1].innerHTML.substring(parentElement[1].innerHTML.indexOf('</b>')+4), emojiReplacer)
                        parentElement[1].innerHTML = prefix + emoji
                    }
                    if (!message.isPM && message.tag != 'Server Message'){
                        nameElement = mutation.addedNodes[0].querySelectorAll('b')[0]
                        nameElement.oncontextmenu = (event) => {event.preventDefault();showChatMenu(event,message.playerName)}
                    }else if (message.isPM && !message.isPMsent){
                        messageElement.oncontextmenu = (event) => {event.preventDefault();showChatMenu(event,message.playerName)}
                    }else {
                        messageElement.oncontextmenu = (event) => {event.preventDefault()}
                    }
                }
            })
        })

        // observer configs
        const chat = document.getElementById('chat-area-view')
        const config = { attributes: true, childList: true, characterData: true }
        observer.observe(chat, config)
    }

    function emojiReplacer(emoji,name){
        return '<i class="em em-'+name+'"></i>'
    }

    function analyzeMessage(parentElement,nameElement,messageElement,img){
        let message = {}
        message.time = parentElement[0].textContent.substring(6,parentElement[0].textContent.indexOf('[')+1)
        message.playerName = typeof nameElement !== 'undefined' ? nameElement.textContent.substring(0,nameElement.textContent.indexOf('(')-1).replace(/ /g,'_') : null
        message.playerLevel = typeof nameElement !== 'undefined' ? nameElement.textContent.substring(nameElement.textContent.indexOf('(')+1,nameElement.textContent.indexOf(')')) : null
        message.content = messageElement.textContent.substring(messageElement.textContent.indexOf(':')+2)
        if (parentElement.length === 3){
            message.tag = parentElement[1].textContent
        }else if(img.length === 2){
            message.tag = img[1].src.includes('investor') ? 'Investor' : null
        }else if(img.length === 1){
            message.tag = img[0].src.includes('investor') ? 'Investor' : null
        }
        //console.log(message.tag)
        let msg = messageElement.textContent
        message.words = message.content.split(' ')
        if (msg.replace(' ','').startsWith('[')){
            if (msg.replace(' ','').substring(1).startsWith('PM')){
                message.isPM = true
                message.isPMsent = false
                message.playerName = msg.substring(msg.indexOf('m')+2,msg.indexOf(']')).replace(/ /g,'_')
            }else{
                message.isPM = true
                message.isPMsent = true
                message.playerName = msg.substring(msg.indexOf('o')+2,msg.indexOf(']')).replace(/ /g,'_')
            }
        }else{
            message.isPM = false
        }
        chatSettings.friendList.every(friend=>{
            if (friend === message.playerName){
                message.isFriend = true
                return false
            }
            else{
                message.isFriend = false
                return true
            }
        })
        chatSettings.ignoreList.every(enemy=>{
            if (enemy === message.playerName){
                message.isIgnored = true
                return false
            }
            else{
                message.isIgnored = false
                return true
            }
        })
        return message
    }

    // clicking buttons
    function changeSettings(id, key, event){
        let volume;
        switch (key){
            case 'pinging':
                chatSettings.pingingOn ? chatSettings.pingingOn = false : chatSettings.pingingOn = true
                break
            case 'pm':
                chatSettings.pingPM ? chatSettings.pingPM = false : chatSettings.pingPM = true
                break
            case 'words':
                document.getElementById('dialogue-extra-chat-settings').style.display = 'none'
                document.getElementById('dialogue-set-words').style.display = ''
                break
            case 'volume':
                volume = document.getElementById(id).value
                if (volume<0){volume=0}
                else if(volume>1){volume=1}
                isNaN(volume) ? null : chatSettings.volume = volume
                audio.volume = chatSettings.volume
                break
            case 'friends':
                document.getElementById('dialogue-extra-chat-settings').style.display = 'none'
                document.getElementById('dialogue-friendlist').style.display = 'flex'
                break
            case 'emoji':
                chatSettings.emoji ? chatSettings.emoji = false : chatSettings.emoji = true
                break
            case 'twitch':
                chatSettings.twitchEmotes ? chatSettings.twitchEmotes = false : chatSettings.twitchEmotes = true
                break
            case 'ignore':
                document.getElementById('dialogue-extra-chat-settings').style.display = 'none'
                document.getElementById('dialogue-ignorelist').style.display = 'flex'
                break
        }
        styleButtons()
        updateSettings()
    }

    // change styling depending on current state (yeah I wish I could actually use react for that)
    function styleButtons(){
        menuButtons.forEach(button=>{
            let div = document.getElementById(button.id)
            switch (button.key){
                case 'pinging':
                    if (chatSettings.pingingOn){
                        div.style.color = 'green'
                    }else{
                        div.style.color = 'red'
                    }
                    break
                case 'pm':
                    if (chatSettings.pingPM){
                        div.style.color = 'green'
                    }else{
                        div.style.color = 'red'
                    }
                    break
                case 'words':
                    div.style.color = 'black'
                    break
                case 'emoji':
                    if (chatSettings.emoji){
                        div.style.color = 'green'
                    }else{
                        div.style.color = 'red'
                    }
                    break
                case 'friends':
                    div.style.color = 'black'
                    break
                case 'twitch':
                    if (chatSettings.twitchEmotes){
                        div.style.color = 'green'
                    }else{
                        div.style.color = 'red'
                    }
                    break
                case 'ignore':
                    div.style.color = 'black'
                    break
        }})
    }

    // add words from inputs to settings
    function addWords(id, key){
        event.preventDefault()
        let input = document.getElementById(id)
        let words = input.value.replace(/\s/g, '').split(',')
        words.forEach((word,index)=>{
            if (word == ''){
            words.splice(index,1)}
        })
        switch (key){
            case 'exact':
                chatSettings.exactWords = words
                break
            case 'match':
                chatSettings.matchWords = words
                break
        }
        updateSettings()
    }

    // add friend to storage
    function addFriend(key, name){
        //let friendlist = document.querySelectorAll('#dialogue-friendlist > input')
        let friend
        if (!key){
            friend = document.querySelectorAll('#dialogue-friendlist > input')[0].value
        }else{
            friend = name
        }
        if(chatSettings.friendList.filter(f=>f === friend).length === 0){
            chatSettings.friendList.push(friend)
            updateFriendList(friend, 'add')
        }
        updateSettings()
    }
    function addIgnore(key, name){
        let enemy
        if (!key){
            enemy = document.querySelectorAll('#dialogue-ignorelist > input')[0].value
        }else{
            enemy = name
        }
        if(chatSettings.ignoreList.filter(i=>i.name === enemy).length === 0){
            chatSettings.ignoreList.push(enemy)
            updateIgnoreList(enemy, 'add')
        }
        updateSettings()
    }
    // add friend to friendlist
    function updateFriendList(friend, key){
        if (key == 'add'){
            createFriendDiv(friend)
        }else if(key == 'remove'){
            document.getElementById(friend).remove()
        }else{
            chatSettings.friendList.forEach(f=>{
                createFriendDiv(f)
            })
        }
    }
    function updateIgnoreList(enemy, key){
        if (key == 'add'){
            createIgnoreDiv(enemy)
        }else if(key == 'remove'){
            document.getElementById(enemy).remove()
        }else{
            chatSettings.ignoreList.forEach(i=>{
                createIgnoreDiv(i)
            })
        }}

    function removeFriend(id){
        let name = id.split('-')[1]
        chatSettings.friendList.forEach((friend,index)=>{
            friend === name ? chatSettings.friendList.splice(index,1) : null
        })
        updateFriendList(id,'remove')
        updateSettings()
    }
    function removeIgnore(id){
        let name = id.split('-')[1]
        chatSettings.ignoreList.forEach((enemy,index)=>{
            enemy === name ? chatSettings.ignoreList.splice(index,1) : null
        })
        updateIgnoreList(id,'remove')
        updateSettings()
    }
    // store values in localstorage
    function loadSettingsFromStorage(key){
        if (localStorage.getItem('chat-extra-settings') == null || key==='reset'){
            chatSettings = {
                pingingOn: false,
                pingPM: false,
                volume: 0.1,
                exactWords: [var_username, '@' + var_username],
                matchWords: [],
                friendList: [],
                ignoreList: [],
                emoji: false,
                twitchEmotes: false,
            }
            localStorage.setItem('chat-extra-settings',JSON.stringify(chatSettings))
        }else{
            chatSettings = JSON.parse(localStorage.getItem('chat-extra-settings'))}
        if (chatSettings.emoji === undefined){
            chatSettings.emoji = false
            localStorage.setItem('chat-extra-settings',JSON.stringify(chatSettings))
        }
        if (chatSettings.twitchEmotes === undefined){
            chatSettings.twitchEmotes = false
            localStorage.setItem('chat-extra-settings',JSON.stringify(chatSettings))
        }
        if (chatSettings.ignoreList === undefined){
            chatSettings.ignoreList = []
            localStorage.setItem('chat-extra-settings',JSON.stringify(chatSettings))
        }
    }

    function openChatSettings(event,id){
        if (document.getElementById(id).style.display == 'none'){
            document.getElementById(id).style.display = 'flex'
            document.getElementById(id).style.top = (event.pageY-285) + 'px'
            document.getElementById(id).style.left = (event.pageX-254)+ 'px'
            document.getElementById('dialogue-set-words').style.top = (event.pageY-285) + 'px'
            document.getElementById('dialogue-set-words').style.left = (event.pageX-254)+ 'px'
            document.getElementById('dialogue-friendlist').style.top = (event.pageY-285) + 'px'
            document.getElementById('dialogue-friendlist').style.left = (event.pageX-254)+ 'px'
            document.getElementById('dialogue-ignorelist').style.top = (event.pageY-285) + 'px'
            document.getElementById('dialogue-ignorelist').style.left = (event.pageX-254)+ 'px'
        }
    }

    function backButton(ID, parentID){
        document.getElementById(parentID).style.display = 'flex'
        document.getElementById(ID).style.display = 'none'
    }

    // update localstorage with new values
    function updateSettings(){
        localStorage.setItem('chat-extra-settings',JSON.stringify(chatSettings))
    }

    // dark mode
    function darkMode(){
        document.getElementById('chat-area').style.color = '#eeeeee'
        document.getElementById('chat-area').style.background = '#222831'
        document.getElementById('chat-area-input').style.background = '#393e46'
        document.getElementById('chat-area-input').style.color = '#eeeeee'
        document.getElementById('chat-area-input').style.padding = '10px'
        document.getElementById('chat-area-input').style.border = '1px solid #c99024'
        document.getElementById('chat-area-view').style.background = '#393e46'
        document.getElementById('chat-area-view').style.color = '#eeeeee'
        document.getElementById('chat-area-view').style.marginTop = '5px'
        document.querySelectorAll('.custom-chat-button').forEach((e,index)=>{
            e.style.border = '1px solid #c99024'
            if (index < 2){
                e.style.background = '#c99024'
            }
            e.style.padding = '10px'
            e.style.fontSize = '20px'
            e.style.lineHeight = '0.9'
            if (index > 1){
                e.onmouseover = (event) => {
                    if (!event.target.src){
                        event.target.style.background = '#c99024'
                        event.target.style.color = 'black'
                    }
                }
                e.onmouseleave = (event) => {
                    if (!event.target.src){
                        event.target.style.background = '#222831'
                        event.target.style.color = '#eeeeee'
                    }
                }
            }
        })
        document.querySelectorAll('.chat-area-send-button').forEach(e=>{
            e.style.padding = "10px"
            e.style.background = '#393e46'
            e.style.color = '#eeeeee'
            e.style.border = '1px solid #c99024'
            e.value = e.value.charAt(0).toUpperCase() + e.value.slice(1) // e.value.toUpperCase()
        })
    }
    function showChatMenu(event,playerName){
        if (document.getElementById('chat-rightclick-menu').style.display == 'none' && playerName !== var_username){
            document.getElementById('chat-rightclick-menu').style.top = (event.pageY-10) + 'px'
            document.getElementById('chat-rightclick-menu').style.left = (event.pageX-10)+ 'px'
            document.getElementById('chat-rightclick-menu-mute-settings').style.top = (event.pageY-300) + 'px'
            document.getElementById('chat-rightclick-menu-mute-settings').style.left = (event.pageX+400)+ 'px'
            document.getElementById('chat-rightclick-menu').style.display = 'flex'
            document.getElementById('chat-rightclick-menu').className = playerName
        }
    }
    function changeMenu(key){
        let playerName = document.getElementById('chat-rightclick-menu').className
        switch(key){
            case 'pm':
                document.getElementById('chat-rightclick-menu').style.display = 'none'
                document.getElementById('chat-area-input').value = '/pm ' + playerName + ' '
                break
            case 'add friend':
                document.getElementById('chat-rightclick-menu').style.display = 'none'
                addFriend('rightclick',playerName)
                break
            case 'ignore':
                document.getElementById('chat-rightclick-menu').style.display = 'none'
                addIgnore('rightclick',playerName)
                break
            case 'mute':
                document.getElementById('chat-rightclick-menu').style.display = 'none'
                document.getElementById('chat-rightclick-menu-mute-settings').style.display = 'flex'
                break
            case 'ban':
                document.getElementById('chat-rightclick-menu').style.display = 'none'
                document.getElementById('chat-area-input').value = '/smute ' + playerName + ' -1 0 '
                break
        }
    }
    function mutePlayer(configs){
        let playerName = document.getElementById('chat-rightclick-menu').className
        let chat = document.getElementById('chat-area-input')
        chat.value = '/smute ' + playerName + ' '
        configs.forEach(config=>{
            chat.value += config.value + ' '
        })
    }
    function inputClear(){
        document.getElementById('chat-rightclick-menu-mute-settings').style.display = 'none'
        document.querySelectorAll('#chat-rightclick-menu-mute-sub > input').forEach(input=>{input.value = ''})
    }
    // CREATING HTML ELEMENTS

    // create main element in body
    function createMainContainer(){
        let div = document.createElement('div')
        div.id = 'things-for-dh3'
        document.getElementById('body').appendChild(div)
        // $(div).insertBefore(document.querySelector('body > link'))
    }
    //create button in chat window
    function createChatSettings(ID,parentID,key){
        let div = document.createElement("div")
        let id = ID
        div.id = ID
        div.className = "dialogue"
        div.style.width = "400px"
        div.style.paddingBottom = "50px"
        div.style.display = 'none'
        div.style.flexDirection = 'row'
        div.style.flexWrap = 'wrap'
        div.style.fontFamily = 'sans-serif'
        div.style.justifyContent = 'center'
        // main menu
        if (!key){
            let button = addButtonToSettings('pinging-button','Pinging','pinging',()=>changeSettings('pinging-button','pinging',event))
            div.appendChild(button)
            button = addButtonToSettings('pm-pinging-button','PM Pinging','pm',()=>changeSettings('pm-pinging-button','pm'))
            div.appendChild(button)
            button = addVolumeButton();
            div.appendChild(button)
            button = addButtonToSettings('set-words-button','Set words','words',()=>changeSettings('set-words-button','words'))
            div.appendChild(button)
            button = addButtonToSettings('twitchemotes-button','Twitch Emotes','twitch',()=>changeSettings('twitchemotes-button','twitch'))
            div.appendChild(button)

            button = addButtonToSettings('emoji-button','Emoji','emoji',()=>changeSettings('emoji-button','emoji'))
            div.appendChild(button)
            button = addButtonToSettings('chat-friendlist','Friend List','friends',()=>changeSettings('chat-friendlist','friends'))
            div.appendChild(button)
            button = addButtonToSettings('chat-ignorelist','Ignore List','ignore',()=>changeSettings('chat-ignorelist','ignore'))
            div.appendChild(button)

            // reset to default button
            let resetButton = document.createElement("div")
            resetButton.style.cursor = "pointer"
            resetButton.style.position = 'absolute'
            resetButton.style.top = "90%"
            resetButton.style.left = '85%'
            resetButton.textContent = 'RESET'
            resetButton.style.color = 'red'
            resetButton.style.background = 'black'
            resetButton.style.border = '1px solid white'
            resetButton.style.borderRadius = '5px'
            resetButton.onclick = ()=>{
                loadSettingsFromStorage('reset')
                styleButtons()
            }
            div.appendChild(resetButton)
            // words menu
        }else if (key=='words'){
            let divChild = addForms('exact-words','Ping exactly those words:')
            div.appendChild(divChild)
            divChild = addForms('match-words','Ping any form of chosen words:')
            div.appendChild(divChild)
            //back button
            let backDiv = document.createElement("div")
            backDiv.onclick = () => {backButton('dialogue-set-words','dialogue-extra-chat-settings')}
            backDiv.className = "dialogue-button"
            backDiv.appendChild(document.createTextNode("Back"))
            backDiv.style.cursor = "pointer"
            backDiv.style.position = 'absolute'
            backDiv.style.top = "80%"
            backDiv.style.left = '240px'
            div.appendChild(backDiv)
            // friends menu
        }else if (key=='friends'){
            // inputs for friends
            div.style.justifyContent = 'center'
            div.style.margin = '0'
            let input = createInput('friendlist-name')
            div.appendChild(input)
            /*let friendInputArray = ['friendlist-name','friendlist-color','friendlist-textColor']
            friendInputArray.forEach(id=>{
                let input = createInput(id)
                div.appendChild(input)
            })*/
            let button = document.createElement("button")
            button.textContent = 'Add'
            button.style.height = '36px'
            button.onclick = () => {addFriend()}
            div.appendChild(button)
            let divChild = document.createElement('div')
            divChild.id = 'friend-list'
            divChild.style.height = '100px'
            divChild.style.width = '500px'
            divChild.style.marginTop = '5px'
            divChild.style.overflowY = 'scroll'
            div.appendChild(divChild)
            //back button
            let backDiv = document.createElement("div")
            backDiv.onclick = () => {backButton('dialogue-friendlist','dialogue-extra-chat-settings')}
            backDiv.className = "dialogue-button"
            backDiv.appendChild(document.createTextNode("Back"))
            backDiv.style.cursor = "pointer"
            backDiv.style.position = 'absolute'
            backDiv.style.top = "80%"
            backDiv.style.left = '240px'
            div.appendChild(backDiv)
        }else if (key=='ignore'){
            // inputs for ignored
            div.style.justifyContent = 'center'
            div.style.margin = '0'
            let input = createInput('ignorelist-name')
            div.appendChild(input)
            let button = document.createElement("button")
            button.textContent = 'Add'
            button.style.height = '36px'
            button.onclick = () => {addIgnore()}
            div.appendChild(button)
            let divChild = document.createElement('div')
            divChild.id = 'ignore-list'
            divChild.style.height = '100px'
            divChild.style.width = '500px'
            divChild.style.marginTop = '5px'
            divChild.style.overflowY = 'scroll'
            div.appendChild(divChild)
            //back button
            let backDiv = document.createElement("div")
            backDiv.onclick = () => {backButton('dialogue-ignorelist','dialogue-extra-chat-settings')}
            backDiv.className = "dialogue-button"
            backDiv.appendChild(document.createTextNode("Back"))
            backDiv.style.cursor = "pointer"
            backDiv.style.position = 'absolute'
            backDiv.style.top = "80%"
            backDiv.style.left = '240px'
            div.appendChild(backDiv)
                }
        //close button
        let closeDiv = document.createElement("div")
        closeDiv.onclick = () => {div.style.display = "none"}
        closeDiv.className = "dialogue-button"
        closeDiv.appendChild(document.createTextNode("Close"))
        closeDiv.style.cursor = "pointer"
        closeDiv.style.position = 'absolute'
        closeDiv.style.top = "80%"
        closeDiv.style.left = '169px'
        div.appendChild(closeDiv)
        document.getElementById(parentID).appendChild(div)
        styleButtons()
    }

    // create button above chat
    function createChatSettingsButton(){
        const chat = document.getElementById('chat-area-view')
        let button = document.createElement('span')
        button.onclick = (event) => openChatSettings(event,'dialogue-extra-chat-settings');
        button.id = 'extra-chat-settings'
        button.className = 'custom-chat-button'
        button.appendChild(document.createTextNode("Chat Settings"))
        button.style = "width: 120px; font-size: 12pt;margin-left: 5px;"
        $(button).insertBefore(chat)
    }

    // add buttons to main menu
    function addButtonToSettings(id,text,key,onclick){
        let div = document.createElement('div')
        let button =document.createElement('button')
        button.id = id
        button.onclick = onclick
        button.style.fontSize = '16px'
        button.style.width = '100px'
        button.style.height = '50px'
        button.style.borderRadius = '5px'
        button.style.marginLeft = '5px'
        button.style.color = 'red'
        button.textContent = text
        div.appendChild(button)

        return div
    }

    // create set words forms
    function addForms(key,text){
        let div = document.createElement('div')
        let span = document.createElement('span')
        span.textContent = text + '(commas between words)'
        div.appendChild(span)
        let form = document.createElement('form')
        form.id = key+'-form'
        form.style.display = 'flex'
        form.style.flexDirection = 'row'
        form.style.alignItems = 'center'
        let input = document.createElement('input')
        input.id = key+'-input'
        input.style.width = '300px'
        input.style.height = '35px'
        input.style.fontSize = '20px'
        let button = document.createElement('button')
        button.textContent = 'Save'
        button.style.height = '37px'
        switch (key){
            case 'exact-words':
                input.value = chatSettings.exactWords
                button.onclick = (event) => addWords(key+'-input','exact')
                break
            case 'match-words':
                input.value = chatSettings.matchWords
                button.onclick = (event) => addWords(key+'-input','match')
                break
        }
        form.appendChild(input)
        form.appendChild(button)
        div.appendChild(form)
        return div
    }

    // create volume change element
    function addVolumeButton(){
        let div = document.createElement('div')
        div.style.fontSize = '16px'
        div.style.width = '100px'
        div.style.height = '50px'
        div.style.borderRaduis = '2px'
        div.style.backgroundColor = '#f0f0f0'
        div.style.border = '1px solid #adadad'
        div.style.borderRadius = '5px'
        div.style.display = 'flex'
        div.style.marginLeft = '5px'
        div.style.flexDirection = 'column'
        div.style.justifyContent = 'center'
        div.style.alignItems = 'center'
        let span = document.createElement('span')
        span.textContent = 'Volume 0 to 1'
        let divChild = document.createElement('div')
        divChild.style.display = 'flex'
        divChild.style.flexDirection = 'row'
        divChild.style.justifyContent = 'center'
        divChild.style.alignItems = 'center'
        let input = document.createElement('input')
        input.id = 'ping-volume'
        input.value = chatSettings.volume
        input.style.maxWidth = '25px'
        input.setAttribute('maxlength','4')
        let button = document.createElement('button')
        button.onclick = ()=>{changeSettings('ping-volume','volume')}
        button.textContent = 'Save'
        div.appendChild(span)
        divChild.appendChild(input)
        divChild.appendChild(button)
        div.appendChild(divChild)
        return div
    }

    function createFriendDiv(friend){
        let friendlist = document.getElementById('friend-list')
        let div = document.createElement('div')
        div.style.display = 'flex'
        div.style.flexDirection = 'row'
        div.style.height = '18px'
        div.id = 'friend-'+friend
        div.style.justifyContent = 'space-between'
        let span = document.createElement('span')
        span.style.textAlign = 'center'
        span.style.fontSize = '16px'
        span.style.height = '18px'
        span.style.borderBottom = '2px solid white'
        span.textContent = friend
        div.appendChild(span)
        let button = document.createElement('button')
        button.textContent = 'Remove'
        button.style.height = '20px'
        button.onclick = (event) =>{removeFriend(event.target.parentNode.id)}
        div.appendChild(button)
        friendlist.appendChild(div)
    }
    function createIgnoreDiv(enemy){
        let ignorelist = document.getElementById('ignore-list')
        let div = document.createElement('div')
        div.style.display = 'flex'
        div.style.flexDirection = 'row'
        div.style.height = '18px'
        div.id = 'ignored-' + enemy
        div.style.justifyContent = 'space-between'
        let span = document.createElement('span')
        span.style.textAlign = 'center'
        span.style.fontSize = '16px'
        span.style.height = '18px'
        span.style.borderBottom = '2px solid white'
        span.textContent = enemy
        div.appendChild(span)
        let button = document.createElement('button')
        button.textContent = 'Remove'
        button.style.height = '20px'
        button.onclick = (event) =>{removeIgnore(event.target.parentNode.id)}
        div.appendChild(button)
        ignorelist.appendChild(div)
    }
    // create inputs for friend list
    function createInput(id){
        let input = document.createElement('input')
        input.id = id
        input.style.height = '35px'
        input.style.width = '100px'
        input.style.fontSize = '20px'
        return input
    }
    function createRightClickMenu(){
        let div = document.createElement('div')
        div.id = 'chat-rightclick-menu'
        if (playerIsMod || var_username === 'shtos'){
            div.style.height = '150px'
        }else{
            div.style.height = '90px'
        }
        div.style.width = '150px'
        div.style.position = 'absolute'
        div.style.display = 'none'
        div.style.flexDirection = 'column'
        div.style.alignItems = 'center'
        div.style.background = '#e1e1e1'
        div.style.border = '1px solid black'
        div.style.borderRadius = '4px'
        div.style.fontFamily = 'sans-serif'
        div.style.fontSize = '16px'
        div.onmouseleave = () => {document.getElementById('chat-rightclick-menu').style.display = 'none'}
        document.getElementById('things-for-dh3').appendChild(div)
    }

    function createMenuButtons(){
        let rightClickButtons
        if (playerIsMod || var_username === 'shtos'){
            rightClickButtons = ['pm','add friend','ignore','mute','ban']
        }else{
            rightClickButtons = ['pm','add friend','ignore']
        }
        rightClickButtons.forEach(id=>{
            let button = document.createElement('div')
            button.id = 'chat-rightclick-menu-'+id
            button.style.height = '30px'
            button.style.width = '147px'
            button.style.fontFamily = 'sans-serif'
            button.style.fontSize = '20px'
            button.style.color = 'black'
            button.style.borderRadius = '4px'
            button.style.cursor = 'pointer'
            button.style.marginLeft = '1px'
            button.style.paddingLeft = '2px'
            button.textContent = id.charAt(0).toUpperCase() + id.slice(1)
            button.onclick = () => {changeMenu(id)}
            button.onmouseenter = () => {button.style.background = '#37dde6'}
            button.onmouseleave = () => {button.style.background = '#e1e1e1'}
            document.getElementById('chat-rightclick-menu').appendChild(button)
        })
    }
    function createMuteMenu(){
        let div = document.createElement('div')
        div.id = 'chat-rightclick-menu-mute-settings'
        div.style.height = '180px'
        div.style.width = '300px'
        div.style.position = 'absolute'
        div.style.display = 'none'
        div.style.flexDirection = 'column'
        div.style.alignItems = 'center'
        div.style.justifyContent = 'center'
        div.style.background = '#e1e1e1'
        div.style.border = '3px solid #F56387'
        div.style.borderRaduis = '4px'
        div.style.borderRadius = '2px'
        div.style.fontFamily = 'sans-serif'
        div.style.fontSize = '16px'
        div.style.zIndex = '100'
        let inputDiv = document.createElement('div')
        inputDiv.id = 'chat-rightclick-menu-mute-sub'
        inputDiv.style.display = 'flex'
        inputDiv.style.flexDirection = 'column'
        inputDiv.style.flexWrap = 'wrap'
        inputDiv.style.justifyContent = 'center'
        let input = document.createElement('input')
        input.id = 'chat-rightclick-menu-mute-time'
        input.placeholder = 'Hours'
        input.style.width = '250px'
        input.style.height = '30px'
        input.style.fontSize = '25px'
        input.style.marginTop = '3px'
        inputDiv.appendChild(input)
        input = document.createElement('input')
        input.id = 'chat-rightclick-menu-mute-type'
        input.style.width = '250px'
        input.style.height = '30px'
        input.style.fontSize = '25px'
        input.style.marginTop = '3px'
        input.placeholder = 'Normal or IP mute'
        inputDiv.appendChild(input)
        input = document.createElement('input')
        input.id = 'chat-rightclick-menu-mute-reason'
        input.placeholder = 'Reason'
        input.style.width = '250px'
        input.style.height = '30px'
        input.style.fontSize = '25px'
        input.style.marginTop = '3px'
        inputDiv.appendChild(input)
        let button = document.createElement('button')
        button.textContent = 'Mute'
        button.style.border = '1px solid #F56387'
        button.style.marginTop = '2px'
        button.onclick = () => {
            mutePlayer(document.querySelectorAll('#chat-rightclick-menu-mute-sub > input'))
            inputClear()
        }
        inputDiv.appendChild(button)
        button = document.createElement('button')
        button.style.border = '1px solid #F56387'
        button.style.marginTop = '2px'
        button.textContent = 'Cancel'
        button.onclick = () => {inputClear()}
        inputDiv.appendChild(button)
        div.appendChild(inputDiv)
        document.getElementById('things-for-dh3').appendChild(div)
    }
})();