☰

No Usernames

A userscript to toggle visibility settings in bonk

  1. // ==UserScript==
  2. // @name         No Usernames
  3. // @version      1.5.0
  4. // @author       Blu
  5. // @description  A userscript to toggle visibility settings in bonk
  6. // @match        https://bonk.io/gameframe-release.html
  7. // @run-at       document-start
  8. // @grant        none
  9. // @namespace https://greasyfork.org/users/826975
  10. // ==/UserScript==
  11.  
  12. // for use as a userscript ensure you have Excigma's code injector userscript
  13. // https://greasyfork.org/en/scripts/433861-code-injector-bonk-io
  14.  
  15. const injectorName = `NoUsernames`;
  16. const errorMsg = `Whoops! ${injectorName} was unable to load.
  17. This may be due to an update to Bonk.io. If so, please report this error!
  18. This could also be because you have an extension that is incompatible with \
  19. ${injectorName}`;
  20.  
  21. // global variables for mod contained within object under this namespace
  22. window[injectorName] = {
  23.   players: {
  24.     usernames: {
  25.       visible: true,
  26.       alpha: 1
  27.     },
  28.     skins: true,
  29.     visible: true,
  30.     alpha: 1
  31.   },
  32.   chat: {
  33.     visible: true,
  34.     alpha: 1
  35.   }
  36. };
  37.  
  38. function injector(src){
  39.   let newSrc = src;
  40.  
  41.   parent.document.querySelector('#adboxverticalCurse').style.zIndex = -1;
  42.  
  43.   let guiCSS = document.createElement('style');
  44.   guiCSS.innerHTML = `
  45.   .${injectorName}Menu {
  46.     background-color: #cfd8cd;
  47.     width: calc(35.2vw - 400px);
  48.     min-width: 154px;
  49.     max-width: 260px;
  50.     position: absolute;
  51.     right: 1%;
  52.     border-radius: 7px;
  53.     display: unset;
  54.     transition: ease-in-out 100ms;
  55.     bottom: auto;
  56.     height: auto;
  57.     max-height: 100%;
  58.     overflow-y: visible;
  59.   }
  60.  
  61.   #${injectorName}MenuCollapse {
  62.       position: absolute;
  63.       right: 3px;
  64.       top: 3px;
  65.       width: 26px;
  66.       height: 26px;
  67.       border-radius: 2px;
  68.       text-transform: full-width;
  69.       visibility: visible;
  70.   }
  71.  
  72.   #${injectorName}MenuControls {
  73.       width:100%;
  74.   }
  75.  
  76.   .${injectorName}SubMenu {
  77.     margin: 2%;
  78.     background: rgba(94, 114, 90, .15);
  79.     border-radius: 2px;
  80.     overflow-x: hidden;
  81.   }
  82.  
  83.   element::-webkit-scrollbar {
  84.     display: none; /* for Chrome, Safari, and Opera */
  85.   }
  86.  
  87.   .${injectorName}SubMenu p {
  88.     text-align: left;
  89.     padding-left: 5%;
  90.     margin: 0;
  91.   }
  92.  
  93.   .${injectorName}SubMenu td:nth-child(2) {
  94.     text-align: right;
  95.   }`;
  96.   document.getElementsByTagName('head')[0].appendChild(guiCSS);
  97.  
  98.   let gui = document.createElement('div');
  99.   document.getElementById('pagecontainer').appendChild(gui);
  100.  
  101.   let collapseMenu = `
  102.     let menu = document.querySelector('#${injectorName}Menu');
  103.     let submenus = [...menu.querySelectorAll('.NoUsernamesSubMenu')];
  104.     let button = document.querySelector('#${injectorName}MenuCollapse');
  105.     // maximize menu
  106.     if(menu.style.visibility == 'hidden'){
  107.       menu.style.minWidth = '';
  108.       menu.style.width = '';
  109.       menu.style.minHeight = '';
  110.       menu.style.maxHeight = '';
  111.       menu.style.visibility = '';
  112.       submenus.forEach(n=>n.style.visibility='');
  113.       button.innerText = '-';
  114.     // minimize menu
  115.     } else {
  116.       menu.style.minWidth = 0;
  117.       menu.style.width = 0;
  118.       menu.style.minHeight = 0;
  119.       menu.style.maxHeight = 0;
  120.       menu.style.visibility = 'hidden';
  121.       submenus.forEach(n=>n.style.visibility='hidden');
  122.       button.innerText = '+';
  123.     }
  124.   `;
  125.  
  126.   let startDrag = `
  127.     // start drag
  128.     let e = arguments[0];
  129.     e.preventDefault();
  130.     let d = document.querySelector('#${injectorName}Menu');
  131.     let offsetx = d.getBoundingClientRect().left - e.clientX;
  132.     let offsety = d.getBoundingClientRect().top - e.clientY;
  133.     d.style.transition = '0ms';
  134.     // drag
  135.     document.onmousemove = (e) => {
  136.       let d = document.querySelector('#${injectorName}Menu');
  137.       d.style.left = e.clientX + offsetx + 'px';
  138.       d.style.top = e.clientY + offsety + 'px';
  139.     };
  140.     // stop drag
  141.     document.onmouseup = () => {
  142.       document.onmousemove = null;
  143.       document.onmouseup = null;
  144.       let d = document.querySelector('#${injectorName}Menu');
  145.       d.style.transition = '';
  146.       localStorage.setItem('${injectorName}Coords', d.style.left + ':' + d.style.top);
  147.     };
  148.   `;
  149.  
  150.   let savedLocation = localStorage.getItem(`${injectorName}Coords`);
  151.   if(savedLocation){
  152.     savedLocation = savedLocation.split(':');
  153.   }
  154.  
  155.   gui.outerHTML = `
  156.   <div class="windowShadow ${injectorName}Menu newbonklobby_elementcontainer" id="${injectorName}Menu" style="left: ${savedLocation?.[0] ?? "auto"}; top: ${savedLocation?.[1] ?? "60px"};">
  157.     <div class="newbonklobby_boxtop newbonklobby_boxtop_classic" style='overflow-x: auto; cursor: pointer;' onmousedown="${startDrag}">
  158.       <div id="${injectorName}MenuCollapse" class="newbonklobby_settings_button brownButton brownButton_classic buttonShadow" onclick="${collapseMenu}">-</div>
  159.       Settings
  160.     </div>
  161.     <div class="${injectorName}SubMenu">
  162.       <div class="newbonklobby_boxtop newbonklobby_boxtop_classic">
  163.         <p>Players</p>
  164.       </div>
  165.       <table>
  166.         <tr>
  167.           <td class="mapeditor_rightbox_table">
  168.             Skins
  169.           </td>
  170.           <td>
  171.             <input type="checkbox" checked onchange="window.${injectorName}.players.skins = !window.${injectorName}.players.skins">
  172.           </td>
  173.         </tr>
  174.         <tr>
  175.           <td class="mapeditor_rightbox_table">
  176.             Visible
  177.           </td>
  178.           <td>
  179.             <input type="checkbox" checked onchange="window.${injectorName}.players.visible = !window.${injectorName}.players.visible">
  180.           </td>
  181.         </tr>
  182.         <tr>
  183.           <td class="mapeditor_rightbox_table">
  184.             Opacity
  185.           </td>
  186.           <td>
  187.             <input type="range" style="width: 5vw" value=100 oninput="window.${injectorName}.players.alpha = this.value/100">
  188.           </td>
  189.         </tr>
  190.         <tr>
  191.           <td colspan="2">
  192.             <div class="${injectorName}SubMenu">
  193.               <div class="newbonklobby_boxtop newbonklobby_boxtop_classic">
  194.                 <p>Usernames</p>
  195.               </div>
  196.               <table>
  197.                 <tr>
  198.                   <td class="mapeditor_rightbox_table">
  199.                     Visible
  200.                   </td>
  201.                   <td>
  202.                     <input type="checkbox" checked onchange="window.${injectorName}.players.usernames.visible = !window.${injectorName}.players.usernames.visible">
  203.                   </td>
  204.                 </tr>
  205.                 <tr>
  206.                   <td class="mapeditor_rightbox_table">
  207.                     Opacity
  208.                   </td>
  209.                   <td>
  210.                     <input type="range" style="width: 5vw" value=100 oninput="window.${injectorName}.players.usernames.alpha = this.value/100">
  211.                   </td>
  212.                 </tr>
  213.               </table>
  214.             </div>
  215.           </td>
  216.         </tr>
  217.       </table>
  218.     </div>
  219.     <div class="${injectorName}SubMenu">
  220.       <div class="newbonklobby_boxtop newbonklobby_boxtop_classic">
  221.         <p>Chat</p>
  222.       </div>
  223.       <table>
  224.         <tr>
  225.           <td class="mapeditor_rightbox_table">
  226.             Visible
  227.           </td>
  228.           <td>
  229.             <input type="checkbox" checked onchange="window.${injectorName}.chat.visible = !window.${injectorName}.chat.visible; window.${injectorName}.chatWindow.style.opacity = +window.${injectorName}.chat.visible;">
  230.           </td>
  231.         </tr>
  232.         <tr>
  233.           <td class="mapeditor_rightbox_table">
  234.             Opacity
  235.           </td>
  236.           <td>
  237.             <input type="range" style="width: 5vw" value=100 oninput="window.${injectorName}.chat.alpha = this.value/100; window.${injectorName}.chatWindow.style.opacity = window.${injectorName}.chat.alpha;">
  238.           </td>
  239.         </tr>
  240.       </table>
  241.     </div>
  242.   </div>`;
  243.  
  244.   // control player and username visibility
  245.   let discID =  newSrc.match(/this.discGraphics\[([\w$]{2,4})\]=null;\}/)[1];
  246.   newSrc = newSrc.replace(`this.discGraphics[${discID}]=null;}`, `this.discGraphics[${discID}]=null;} else {
  247.     if(this.discGraphics[${discID}]){
  248.       if(this.discGraphics[${discID}].sfwSkin){
  249.         // control skin visibility
  250.         this.discGraphics[${discID}].playerGraphic.alpha = window.${injectorName}.players.skins ? 1 : 0;
  251.         this.discGraphics[${discID}].sfwSkin.visible = !window.${injectorName}.players.skins;
  252.       // gotta wait for avatar to be created
  253.       } else if(this.discGraphics[${discID}]?.avatar?.bc != undefined){
  254.         // create sfwSkin
  255.         this.discGraphics[${discID}].sfwSkin = new PIXI.Graphics;
  256.         this.discGraphics[${discID}].sfwSkin.beginFill(this.discGraphics[${discID}].teamify(this.discGraphics[${discID}].avatar.bc, this.discGraphics[${discID}].team));
  257.         this.discGraphics[${discID}].sfwSkin.drawCircle(0,0,this.discGraphics[${discID}].radius);
  258.         this.discGraphics[${discID}].sfwSkin.endFill();
  259.         this.discGraphics[${discID}].container.addChildAt(this.discGraphics[${discID}].sfwSkin, 3);
  260.       }
  261.  
  262.       // everything else
  263.       this.discGraphics[${discID}].nameText.alpha = window.${injectorName}.players.usernames.visible ? window.${injectorName}.players.usernames.alpha : 0;
  264.       if(this.discGraphics[${discID}].playerID != this.localPlayerID){
  265.         this.discGraphics[${discID}].container.visible = window.${injectorName}.players.visible;
  266.         this.discGraphics[${discID}].container.alpha = window.${injectorName}.players.alpha;
  267.       }
  268.     }
  269.   }`);
  270.   
  271.   // get chat window when building renderer
  272.   let buildRendererFunction = newSrc.match(/(build\([\w$]{2,4},[\w$]{2,4}\)) \{.{30,150}=new [\w$]{2,4}\[[0-9]+\]\(/)[1];
  273.   newSrc = newSrc.replace(`${buildRendererFunction} {`, `${buildRendererFunction} {
  274.     window.${injectorName}.chatWindow = document.querySelector('#ingamechatbox');
  275.   `);
  276.  
  277.   if(src === newSrc) throw "Injection failed!";
  278.   console.log(injectorName+" injector run");
  279.   return newSrc;
  280. }
  281.  
  282. // Compatibility with Excigma's code injector userscript
  283. if(!window.bonkCodeInjectors) window.bonkCodeInjectors = [];
  284. window.bonkCodeInjectors.push(bonkCode => {
  285. 	try {
  286. 		return injector(bonkCode);
  287. 	} catch (error) {
  288. 		alert(errorMsg);
  289. 		throw error;
  290. 	}
  291. });
  292.  
  293. console.log(injectorName+" injector loaded");