☰

MoveChat · Bonk.io

Adds a button to the top bar to move the chat position. Click to rotate through the four corners and full screen.

// ==UserScript==
// @name         MoveChat · Bonk.io
// @namespace    https://greasyfork.org/en/users/962705
// @version      1.2.0
// @license      GPL-3.0
// @description  Adds a button to the top bar to move the chat position.  Click to rotate through the four corners and full screen.
// @author       rrreddd
// @match        https://bonk.io/*
// @run-at       document-end
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

var chatBtn = document.createElement ('div');
var topBar = document.getElementById ('pretty_top_bar');
var chatBox = document.getElementById ('ingamechatbox');
var chatCont = document.getElementById ('ingamechatcontent');
var chatAnchor = GM_getValue ('chatAnchor');
var chatWidth = GM_getValue ('chatWidth');
var chatHeight = GM_getValue ('chatHeight');
var defChatWidth = '50%';
var defChatHeight = '250';
var chatCoord = [];

if (!chatAnchor) chatAnchor = 'BL';
if (!chatWidth) chatWidth = defChatWidth;
if (!chatHeight) chatHeight = defChatHeight;

chatBtn.setAttribute ('id', 'pretty_top_movechat');
chatBtn.setAttribute ('class', 'pretty_top_button niceborderleft');
topBar.appendChild (chatBtn);

chatBtn.style.cssText = (`
    position: absolute;
    top: 0;
    right: 290px;
    height: 34px;
    width: 58px;
    background-image: url(https://i.imgur.com/gXPdjBE.png);
    background-repeat: no-repeat;
    background-position: center;
`);

setChatPos();

document.getElementById ("pretty_top_movechat").addEventListener ("click", setChatPos, false);

function setChatPos () {
    GM_setValue ('chatAnchor', chatAnchor);

    switch (chatAnchor) {
        case 'BL':
            chatCoord = ['10px', 'unset', '10px', 'unset', 'unset'];
            chatWidth = defChatWidth;
            chatHeight = defChatHeight;
            chatAnchor = 'TL';
            break;
        case 'TL':
            chatCoord = ['unset', '10px', '10px', 'unset', '0px'];
            chatWidth = defChatWidth;
            chatHeight = defChatHeight;
            chatAnchor = 'TR';
            break;
        case 'TR':
            chatCoord = ['unset', '10px', 'unset', '10px', '0px'];
            chatWidth = defChatWidth;
            chatHeight = defChatHeight;
            chatAnchor = 'BR';
            break;
        case 'BR':
            chatCoord = ['10px', 'unset', 'unset', '10px', 'unset'];
            chatWidth = defChatWidth;
            chatHeight = defChatHeight;
            chatAnchor = 'FS';
            break;
        case 'FS':
            chatCoord = ['unset', '0px', '0px', 'unset', '0px'];
            chatWidth = '100%';
            chatHeight = '100%';
            chatAnchor = 'BL';
            break;
    };

    GM_addStyle (`
        #ingamechatbox {
            bottom: ${chatCoord[0]} !important;
            top: ${chatCoord[1]} !important;
            left: ${chatCoord[2]} !important;
            right: ${chatCoord[3]} !important;
            width: ${chatWidth} !important;
            height: ${chatHeight} !important;
        }

        #ingamechatcontent {
            top: ${chatCoord[4]} !important;
            max-height: ${chatHeight} !important;
            margin: 5px !important;
        }
    `);

};