☰

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.

  1. // ==UserScript==
  2. // @name         MoveChat · Bonk.io
  3. // @namespace    https://greatest.deepsurf.us/en/users/962705
  4. // @version      1.2.0
  5. // @license      GPL-3.0
  6. // @description  Adds a button to the top bar to move the chat position.  Click to rotate through the four corners and full screen.
  7. // @author       rrreddd
  8. // @match        https://bonk.io/*
  9. // @run-at       document-end
  10. // @grant        GM_addStyle
  11. // @grant        GM_getValue
  12. // @grant        GM_setValue
  13. // ==/UserScript==
  14.  
  15. var chatBtn = document.createElement ('div');
  16. var topBar = document.getElementById ('pretty_top_bar');
  17. var chatBox = document.getElementById ('ingamechatbox');
  18. var chatCont = document.getElementById ('ingamechatcontent');
  19. var chatAnchor = GM_getValue ('chatAnchor');
  20. var chatWidth = GM_getValue ('chatWidth');
  21. var chatHeight = GM_getValue ('chatHeight');
  22. var defChatWidth = '50%';
  23. var defChatHeight = '250';
  24. var chatCoord = [];
  25.  
  26. if (!chatAnchor) chatAnchor = 'BL';
  27. if (!chatWidth) chatWidth = defChatWidth;
  28. if (!chatHeight) chatHeight = defChatHeight;
  29.  
  30. chatBtn.setAttribute ('id', 'pretty_top_movechat');
  31. chatBtn.setAttribute ('class', 'pretty_top_button niceborderleft');
  32. topBar.appendChild (chatBtn);
  33.  
  34. chatBtn.style.cssText = (`
  35.     position: absolute;
  36.     top: 0;
  37.     right: 290px;
  38.     height: 34px;
  39.     width: 58px;
  40.     background-image: url(https://i.imgur.com/gXPdjBE.png);
  41.     background-repeat: no-repeat;
  42.     background-position: center;
  43. `);
  44.  
  45. setChatPos();
  46.  
  47. document.getElementById ("pretty_top_movechat").addEventListener ("click", setChatPos, false);
  48.  
  49. function setChatPos () {
  50.     GM_setValue ('chatAnchor', chatAnchor);
  51.  
  52.     switch (chatAnchor) {
  53.         case 'BL':
  54.             chatCoord = ['10px', 'unset', '10px', 'unset', 'unset'];
  55.             chatWidth = defChatWidth;
  56.             chatHeight = defChatHeight;
  57.             chatAnchor = 'TL';
  58.             break;
  59.         case 'TL':
  60.             chatCoord = ['unset', '10px', '10px', 'unset', '0px'];
  61.             chatWidth = defChatWidth;
  62.             chatHeight = defChatHeight;
  63.             chatAnchor = 'TR';
  64.             break;
  65.         case 'TR':
  66.             chatCoord = ['unset', '10px', 'unset', '10px', '0px'];
  67.             chatWidth = defChatWidth;
  68.             chatHeight = defChatHeight;
  69.             chatAnchor = 'BR';
  70.             break;
  71.         case 'BR':
  72.             chatCoord = ['10px', 'unset', 'unset', '10px', 'unset'];
  73.             chatWidth = defChatWidth;
  74.             chatHeight = defChatHeight;
  75.             chatAnchor = 'FS';
  76.             break;
  77.         case 'FS':
  78.             chatCoord = ['unset', '0px', '0px', 'unset', '0px'];
  79.             chatWidth = '100%';
  80.             chatHeight = '100%';
  81.             chatAnchor = 'BL';
  82.             break;
  83.     };
  84.  
  85.     GM_addStyle (`
  86.         #ingamechatbox {
  87.             bottom: ${chatCoord[0]} !important;
  88.             top: ${chatCoord[1]} !important;
  89.             left: ${chatCoord[2]} !important;
  90.             right: ${chatCoord[3]} !important;
  91.             width: ${chatWidth} !important;
  92.             height: ${chatHeight} !important;
  93.         }
  94.  
  95.         #ingamechatcontent {
  96.             top: ${chatCoord[4]} !important;
  97.             max-height: ${chatHeight} !important;
  98.             margin: 5px !important;
  99.         }
  100.     `);
  101.  
  102. };