☰

Opacity

A mod to toggle visibility settings in Bonk.io using BonkHUD

  1. // ==UserScript==
  2. // @name         Opacity
  3. // @version      2.3.0
  4. // @description  A mod to toggle visibility settings in Bonk.io using BonkHUD
  5. // @author       FeiFei + Blu
  6. // @match        https://bonk.io/gameframe-release.html
  7. // @run-at       document-end
  8. // @grant        none
  9. // @namespace https://greasyfork.org/users/1366475
  10. // ==/UserScript==
  11.  
  12. "use strict";
  13.  
  14. window.opacity = {};
  15.  
  16. opacity.windowConfigs = {
  17.     windowName: "Opacity",
  18.     windowId: "opacity_window",
  19.     modVersion: "2.3.0",
  20.     bonkLIBVersion: "1.1.3",
  21.     bonkVersion: "49",
  22.     windowContent: null,
  23. };
  24.  
  25. // Initialize default settings
  26. opacity.defaultSettings = {
  27.     players: {
  28.         skins: true,
  29.         visible: true,
  30.         alpha: 1,
  31.         usernames: {
  32.             visible: true,
  33.             alpha: 1,
  34.         },
  35.         teamOutline: {
  36.             visible: true,
  37.             alpha: 1,
  38.         },
  39.     },
  40.     chat: {
  41.         visible: true,
  42.         alpha: 1,
  43.     },
  44. };
  45.  
  46. // Initialize settings
  47. opacity.settings = JSON.parse(JSON.stringify(opacity.defaultSettings));
  48.  
  49. // Function to save settings to localStorage
  50. opacity.saveSettings = function () {
  51.     localStorage.setItem('opacitySettings', JSON.stringify(this.settings));
  52. };
  53.  
  54. // Function to load settings from localStorage
  55. opacity.loadSettings = function () {
  56.     const savedSettings = localStorage.getItem('opacitySettings');
  57.     if (savedSettings) {
  58.         try {
  59.             this.settings = JSON.parse(savedSettings);
  60.         } catch (e) {
  61.             console.error('Failed to parse saved settings:', e);
  62.             this.settings = JSON.parse(JSON.stringify(this.defaultSettings));
  63.         }
  64.     }
  65. };
  66.  
  67. // Create the mod window using BonkHUD
  68. opacity.createWindow = function () {
  69.     // Create the window using BonkHUD
  70.     const modIndex = bonkHUD.createMod(this.windowConfigs.windowName, this.windowConfigs);
  71.  
  72.     let opacityWindow = bonkHUD.getElementByIndex(modIndex);
  73.  
  74.     opacityWindow.style.padding = "0"; // Example: set padding
  75.     opacityWindow.style.width = "100%"; // Example: set width to match padding
  76.     opacityWindow.style.height = "calc(100% - 32px)"; // Example: set height to match padding and header
  77.  
  78.     // Load UI settings if available
  79.     bonkHUD.loadUISetting(modIndex);
  80. };
  81.  
  82. opacity.setWindowContent = function () {
  83.     // Get current settings values
  84.     const playersSkinsChecked = this.settings.players.skins ? "checked" : "";
  85.     const playersVisibleChecked = this.settings.players.visible ? "checked" : "";
  86.     const playersAlphaValue = this.settings.players.alpha * 100;
  87.     const usernamesVisibleChecked = this.settings.players.usernames.visible ? "checked" : "";
  88.     const usernamesAlphaValue = this.settings.players.usernames.alpha * 100;
  89.     const teamOutlineVisibleChecked = this.settings.players.teamOutline.visible ? "checked" : "";
  90.     const teamOutlineAlphaValue = this.settings.players.teamOutline.alpha * 100;
  91.     const chatVisibleChecked = this.settings.chat.visible ? "checked" : "";
  92.     const chatAlphaValue = this.settings.chat.alpha * 100;
  93.  
  94.     let windowHTML = document.createElement("div");
  95.  
  96.     let playersButtonDiv = document.createElement("div");
  97.     playersButtonDiv.classList.add("bonkhud-header-color");
  98.     playersButtonDiv.classList.add("bonkhud-title-color");
  99.     playersButtonDiv.style.borderBottomLeftRadius = "8px";
  100.     playersButtonDiv.style.borderBottomRightRadius = "8px";
  101.     playersButtonDiv.style.padding = "5px";
  102.  
  103.     let playersLabel = document.createElement("span");
  104.     playersLabel.textContent = "Players";
  105.  
  106.     playersButtonDiv.appendChild(playersLabel);
  107.  
  108.     let playersDropDiv = bonkHUD.generateSection();
  109.     playersDropDiv.style.paddingTop = "2px";
  110.  
  111.     //----------------------------------------------
  112.  
  113.     let playersSkinsDiv = document.createElement("div");
  114.     playersSkinsDiv.style.marginTop = "5px";
  115.  
  116.     let playersSkinsLabel = document.createElement("label");
  117.     playersSkinsLabel.classList.add("bonkhud-text-color");
  118.     playersSkinsLabel.classList.add("bonkhud-settings-label");
  119.     playersSkinsLabel.style.marginRight = "5px";
  120.     playersSkinsLabel.textContent = "Skins";
  121.  
  122.     let playersSkinsCheckbox = document.createElement("input");
  123.     playersSkinsCheckbox.type = "checkbox";
  124.     playersSkinsCheckbox.checked = playersSkinsChecked;
  125.     playersSkinsCheckbox.onchange = (e) => {
  126.         window.opacity.settings.players.skins = e.target.checked;
  127.         window.opacity.saveSettings();
  128.     };
  129.  
  130.     playersSkinsDiv.appendChild(playersSkinsLabel);
  131.     playersSkinsDiv.appendChild(playersSkinsCheckbox);
  132.  
  133.     //---------------------------------------------
  134.  
  135.     let playersVisibleDiv = document.createElement("div");
  136.     playersVisibleDiv.style.marginTop = "5px";
  137.  
  138.     let playersVisibleLabel = document.createElement("label");
  139.     playersVisibleLabel.classList.add("bonkhud-text-color");
  140.     playersVisibleLabel.classList.add("bonkhud-settings-label");
  141.     playersVisibleLabel.style.marginRight = "5px";
  142.     playersVisibleLabel.textContent = "Visible";
  143.  
  144.     let playersVisibleCheckbox = document.createElement("input");
  145.     playersVisibleCheckbox.type = "checkbox";
  146.     playersVisibleCheckbox.checked = playersVisibleChecked;
  147.     playersVisibleCheckbox.onchange = (e) => {
  148.         window.opacity.settings.players.visible = e.target.checked;
  149.         window.opacity.saveSettings();
  150.     };
  151.  
  152.     playersVisibleDiv.appendChild(playersVisibleLabel);
  153.     playersVisibleDiv.appendChild(playersVisibleCheckbox);
  154.  
  155.     //-------------------------------------------------
  156.     
  157.     let playersAlphaDiv = document.createElement("div");
  158.     playersAlphaDiv.style.marginTop = "5px";
  159.     playersAlphaDiv.style.display = "flex";
  160.     playersAlphaDiv.style.alignContent = "center";
  161.  
  162.     let playersAlphaLabel = document.createElement("label");
  163.     playersAlphaLabel.classList.add("bonkhud-settings-label");
  164.     playersAlphaLabel.textContent = "Opacity";
  165.  
  166.     let playersAlphaSlider = document.createElement("input");
  167.     playersAlphaSlider.type = "range"; // Slider type for range selection
  168.     playersAlphaSlider.min = "0"; // Minimum opacity value
  169.     playersAlphaSlider.max = "100"; // Maximum opacity value (fully opaque)
  170.     playersAlphaSlider.value = playersAlphaValue; // Default value set to fully opaque
  171.     playersAlphaSlider.style.minWidth = "0";
  172.     playersAlphaSlider.style.flexGrow = "1";
  173.     playersAlphaSlider.style.marginLeft = "0.5rem";
  174.     playersAlphaSlider.oninput = (e) => {
  175.         window.opacity.settings.players.alpha = e.target.value/100;
  176.         window.opacity.saveSettings();
  177.     };
  178.  
  179.     playersAlphaDiv.appendChild(playersAlphaLabel);
  180.     playersAlphaDiv.appendChild(playersAlphaSlider);
  181.  
  182.     playersDropDiv.appendChild(playersSkinsDiv);
  183.     playersDropDiv.appendChild(playersVisibleDiv);
  184.     playersDropDiv.appendChild(playersAlphaDiv);
  185.  
  186.     let usernamesButtonDiv = document.createElement("div");
  187.     usernamesButtonDiv.classList.add("bonkhud-header-color");
  188.     usernamesButtonDiv.classList.add("bonkhud-title-color");
  189.     usernamesButtonDiv.style.borderBottomLeftRadius = "8px";
  190.     usernamesButtonDiv.style.borderBottomRightRadius = "8px";
  191.     usernamesButtonDiv.style.padding = "5px";
  192.  
  193.     let usernamesLabel = document.createElement("span");
  194.     usernamesLabel.textContent = "Usernames";
  195.  
  196.     usernamesButtonDiv.appendChild(usernamesLabel);
  197.  
  198.     let usernamesDropDiv = bonkHUD.generateSection();
  199.     usernamesDropDiv.style.paddingTop = "2px";
  200.  
  201.     //----------------------------------------------
  202.  
  203.     let usernamesVisDiv = document.createElement("div");
  204.     usernamesVisDiv.style.marginTop = "5px";
  205.  
  206.     let usernamesVisLabel = document.createElement("label");
  207.     usernamesVisLabel.classList.add("bonkhud-text-color");
  208.     usernamesVisLabel.classList.add("bonkhud-settings-label");
  209.     usernamesVisLabel.style.marginRight = "5px";
  210.     usernamesVisLabel.textContent = "Visible";
  211.  
  212.     let usernamesVisCheckbox = document.createElement("input");
  213.     usernamesVisCheckbox.type = "checkbox";
  214.     usernamesVisCheckbox.checked = usernamesVisibleChecked;
  215.     usernamesVisCheckbox.onchange = (e) => {
  216.         window.opacity.settings.players.usernames.visible = e.target.checked;
  217.         window.opacity.saveSettings();
  218.     };
  219.  
  220.     usernamesVisDiv.appendChild(usernamesVisLabel);
  221.     usernamesVisDiv.appendChild(usernamesVisCheckbox);
  222.  
  223.     //-------------------------------------------------
  224.     
  225.     let usernamesAlphaDiv = document.createElement("div");
  226.     usernamesAlphaDiv.style.marginTop = "5px";
  227.     usernamesAlphaDiv.style.display = "flex";
  228.     usernamesAlphaDiv.style.alignContent = "center";
  229.  
  230.     let usernamesAlphaLabel = document.createElement("label");
  231.     usernamesAlphaLabel.classList.add("bonkhud-settings-label");
  232.     usernamesAlphaLabel.textContent = "Opacity";
  233.  
  234.     let usernamesAlphaSlider = document.createElement("input");
  235.     usernamesAlphaSlider.type = "range"; // Slider type for range selection
  236.     usernamesAlphaSlider.min = "0"; // Minimum opacity value
  237.     usernamesAlphaSlider.max = "100"; // Maximum opacity value (fully opaque)
  238.     usernamesAlphaSlider.value = usernamesAlphaValue; // Default value set to fully opaque
  239.     usernamesAlphaSlider.style.minWidth = "0";
  240.     usernamesAlphaSlider.style.flexGrow = "1";
  241.     usernamesAlphaSlider.style.marginLeft = "0.5rem";
  242.     usernamesAlphaSlider.oninput = (e) => {
  243.         window.opacity.settings.players.usernames.alpha = e.target.value/100;
  244.         window.opacity.saveSettings();
  245.     };
  246.  
  247.     usernamesAlphaDiv.appendChild(usernamesAlphaLabel);
  248.     usernamesAlphaDiv.appendChild(usernamesAlphaSlider);
  249.  
  250.     usernamesDropDiv.appendChild(usernamesVisDiv);
  251.     usernamesDropDiv.appendChild(usernamesAlphaDiv);
  252.  
  253.     //:::::::::::::::::::::::::::::::::::::::::::::::::
  254.  
  255.     let teamButtonDiv = document.createElement("div");
  256.     teamButtonDiv.classList.add("bonkhud-header-color");
  257.     teamButtonDiv.classList.add("bonkhud-title-color");
  258.     teamButtonDiv.style.borderBottomLeftRadius = "8px";
  259.     teamButtonDiv.style.borderBottomRightRadius = "8px";
  260.     teamButtonDiv.style.padding = "5px";
  261.  
  262.     let teamLabel = document.createElement("span");
  263.     teamLabel.textContent = "Team Outline";
  264.  
  265.     teamButtonDiv.appendChild(teamLabel);
  266.  
  267.     let teamDropDiv = bonkHUD.generateSection();
  268.     teamDropDiv.style.paddingTop = "2px";
  269.  
  270.     //----------------------------------------------
  271.  
  272.     let teamVisDiv = document.createElement("div");
  273.     teamVisDiv.style.marginTop = "5px";
  274.  
  275.     let teamVisLabel = document.createElement("label");
  276.     teamVisLabel.classList.add("bonkhud-text-color");
  277.     teamVisLabel.classList.add("bonkhud-settings-label");
  278.     teamVisLabel.style.marginRight = "5px";
  279.     teamVisLabel.textContent = "Visible";
  280.  
  281.     let teamVisCheckbox = document.createElement("input");
  282.     teamVisCheckbox.type = "checkbox";
  283.     teamVisCheckbox.checked = teamOutlineVisibleChecked;
  284.     teamVisCheckbox.onchange = (e) => {
  285.         window.opacity.settings.players.teamOutline.visible = e.target.checked;
  286.         window.opacity.saveSettings();
  287.     };
  288.  
  289.     teamVisDiv.appendChild(teamVisLabel);
  290.     teamVisDiv.appendChild(teamVisCheckbox);
  291.  
  292.     //-------------------------------------------------
  293.     
  294.     let teamAlphaDiv = document.createElement("div");
  295.     teamAlphaDiv.style.marginTop = "5px";
  296.     teamAlphaDiv.style.display = "flex";
  297.     teamAlphaDiv.style.alignContent = "center";
  298.  
  299.     let teamAlphaLabel = document.createElement("label");
  300.     teamAlphaLabel.classList.add("bonkhud-settings-label");
  301.     teamAlphaLabel.textContent = "Opacity";
  302.  
  303.     let teamAlphaSlider = document.createElement("input");
  304.     teamAlphaSlider.type = "range"; // Slider type for range selection
  305.     teamAlphaSlider.min = "0"; // Minimum opacity value
  306.     teamAlphaSlider.max = "100"; // Maximum opacity value (fully opaque)
  307.     teamAlphaSlider.value = teamOutlineAlphaValue; // Default value set to fully opaque
  308.     teamAlphaSlider.style.minWidth = "0";
  309.     teamAlphaSlider.style.flexGrow = "1";
  310.     teamAlphaSlider.style.marginLeft = "0.5rem";
  311.     teamAlphaSlider.oninput = (e) => {
  312.         window.opacity.settings.players.teamOutline.alpha = e.target.value/100;
  313.         window.opacity.saveSettings();
  314.     };
  315.  
  316.     teamAlphaDiv.appendChild(teamAlphaLabel);
  317.     teamAlphaDiv.appendChild(teamAlphaSlider);
  318.  
  319.     teamDropDiv.appendChild(teamVisDiv);
  320.     teamDropDiv.appendChild(teamAlphaDiv);
  321.  
  322.     //:::::::::::::::::::::::::::::::::::::::::::::::::
  323.  
  324.     let chatButtonDiv = document.createElement("div");
  325.     chatButtonDiv.classList.add("bonkhud-header-color");
  326.     chatButtonDiv.classList.add("bonkhud-title-color");
  327.     chatButtonDiv.style.borderBottomLeftRadius = "8px";
  328.     chatButtonDiv.style.borderBottomRightRadius = "8px";
  329.     chatButtonDiv.style.padding = "5px";
  330.  
  331.     let chatLabel = document.createElement("span");
  332.     chatLabel.textContent = "Chat";
  333.  
  334.     chatButtonDiv.appendChild(chatLabel);
  335.  
  336.     let chatDropDiv = bonkHUD.generateSection();
  337.     chatDropDiv.style.paddingTop = "2px";
  338.  
  339.     //----------------------------------------------
  340.  
  341.     let chatVisDiv = document.createElement("div");
  342.     chatVisDiv.style.marginTop = "5px";
  343.  
  344.     let chatVisLabel = document.createElement("label");
  345.     chatVisLabel.classList.add("bonkhud-text-color");
  346.     chatVisLabel.classList.add("bonkhud-settings-label");
  347.     chatVisLabel.style.marginRight = "5px";
  348.     chatVisLabel.textContent = "Visible";
  349.  
  350.     let chatVisCheckbox = document.createElement("input");
  351.     chatVisCheckbox.type = "checkbox";
  352.     chatVisCheckbox.checked = chatVisibleChecked;
  353.     chatVisCheckbox.onchange = (e) => {
  354.         window.opacity.settings.chat.visible = e.target.checked;
  355.         if (window.opacity.chatWindow) { 
  356.             window.opacity.chatWindow.style.opacity = window.opacity.settings.chat.visible ? 1 : 0;
  357.         } 
  358.         window.opacity.saveSettings();
  359.     };
  360.  
  361.     chatVisDiv.appendChild(chatVisLabel);
  362.     chatVisDiv.appendChild(chatVisCheckbox);
  363.  
  364.     //-------------------------------------------------
  365.     
  366.     let chatAlphaDiv = document.createElement("div");
  367.     chatAlphaDiv.style.marginTop = "5px";
  368.     chatAlphaDiv.style.display = "flex";
  369.     chatAlphaDiv.style.alignContent = "center";
  370.  
  371.     let chatAlphaLabel = document.createElement("label");
  372.     chatAlphaLabel.classList.add("bonkhud-settings-label");
  373.     chatAlphaLabel.textContent = "Opacity";
  374.  
  375.     let chatAlphaSlider = document.createElement("input");
  376.     chatAlphaSlider.type = "range"; // Slider type for range selection
  377.     chatAlphaSlider.min = "0"; // Minimum opacity value
  378.     chatAlphaSlider.max = "100"; // Maximum opacity value (fully opaque)
  379.     chatAlphaSlider.value = chatAlphaValue; // Default value set to fully opaque
  380.     chatAlphaSlider.style.minWidth = "0";
  381.     chatAlphaSlider.style.flexGrow = "1";
  382.     chatAlphaSlider.style.marginLeft = "0.5rem";
  383.     chatAlphaSlider.oninput = (e) => {
  384.         window.opacity.settings.chat.alpha = e.target.value/100;
  385.         if (window.opacity.chatWindow) {
  386.             window.opacity.chatWindow.style.opacity = window.opacity.settings.chat.alpha;
  387.         }
  388.         window.opacity.saveSettings();
  389.     };
  390.  
  391.     chatAlphaDiv.appendChild(chatAlphaLabel);
  392.     chatAlphaDiv.appendChild(chatAlphaSlider);
  393.  
  394.     chatDropDiv.appendChild(chatVisDiv);
  395.     chatDropDiv.appendChild(chatAlphaDiv);
  396.  
  397.     windowHTML.appendChild(playersButtonDiv);
  398.     windowHTML.appendChild(playersDropDiv);
  399.     windowHTML.appendChild(usernamesButtonDiv);
  400.     windowHTML.appendChild(usernamesDropDiv);
  401.     windowHTML.appendChild(teamButtonDiv);
  402.     windowHTML.appendChild(teamDropDiv);
  403.     windowHTML.appendChild(chatButtonDiv);
  404.     windowHTML.appendChild(chatDropDiv);
  405.  
  406.     // Set the windowContent to the container
  407.     this.windowConfigs.windowContent = windowHTML;
  408. };
  409.  
  410. // Injector function to inject code into the game code
  411. opacity.injector = function (src) {
  412.     let newSrc = src;
  413.  
  414.     // Control player and username visibility
  415.     let discID = newSrc.match(/this\.discGraphics\[([\w$]{2,4})\]=null;\}/)[1];
  416.     newSrc = newSrc.replace(
  417.         `this.discGraphics[${discID}]=null;}`,
  418.         `this.discGraphics[${discID}]=null;
  419.         } else {
  420.             if(this.discGraphics[${discID}]){
  421.                 if(this.discGraphics[${discID}].sfwSkin){
  422.                     // control skin visibility
  423.                     this.discGraphics[${discID}].playerGraphic.alpha = window.opacity.settings.players.skins ? 1 : 0;
  424.                     this.discGraphics[${discID}].sfwSkin.visible = !window.opacity.settings.players.skins;
  425.                 // gotta wait for avatar to be created
  426.                 } else if(this.discGraphics[${discID}].avatar?.bc != undefined){
  427.                     // create sfwSkin
  428.                     this.discGraphics[${discID}].sfwSkin = new PIXI.Graphics;
  429.                     this.discGraphics[${discID}].sfwSkin.beginFill(this.discGraphics[${discID}].teamify(this.discGraphics[${discID}].avatar.bc, this.discGraphics[${discID}].team));
  430.                     this.discGraphics[${discID}].sfwSkin.drawCircle(0,0,this.discGraphics[${discID}].radius);
  431.                     this.discGraphics[${discID}].sfwSkin.endFill();
  432.                     this.discGraphics[${discID}].container.addChildAt(this.discGraphics[${discID}].sfwSkin, 3);
  433.                 }
  434.  
  435.                 // everything else
  436.                 this.discGraphics[${discID}].nameText.alpha = window.opacity.settings.players.usernames.visible ? window.opacity.settings.players.usernames.alpha : 0;
  437.                 
  438.                 // Team outline
  439.                 if (this.discGraphics[${discID}].teamOutline != null) {
  440.                     this.discGraphics[${discID}].teamOutline.visible = window.opacity.settings.players.teamOutline.visible;
  441.                     this.discGraphics[${discID}].teamOutline.alpha = window.opacity.settings.players.teamOutline.alpha;
  442.                 }
  443.                 
  444.                 if(this.discGraphics[${discID}].playerID != this.localPlayerID){
  445.                     this.discGraphics[${discID}].container.visible = window.opacity.settings.players.visible;
  446.                     this.discGraphics[${discID}].container.alpha = window.opacity.settings.players.alpha;
  447.                 }
  448.             }
  449.         }`
  450.     );
  451.  
  452.     // Get chat window when building renderer
  453.     let buildRendererFunction = newSrc.match(
  454.         /(build\([\w$]{2,4},[\w$]{2,4}\)) \{.{30,150}=new [\w$]{2,4}\[[0-9]+\]\(/
  455.     )[1];
  456.  
  457.     newSrc = newSrc.replace(
  458.         `${buildRendererFunction} {`,
  459.         `${buildRendererFunction} {
  460.         window.opacity.chatWindow = document.querySelector('#ingamechatbox');`
  461.     );
  462.  
  463.     if (src === newSrc) throw "Injection failed!";
  464.     return newSrc;
  465. };
  466.  
  467. // Initialize the mod (run when document is ready)
  468. opacity.initMod = function () {
  469.     // Ensure BonkHUD is available
  470.     if (!window.bonkHUD) {
  471.         console.error("BonkHUD is not loaded. Please make sure BonkHUD is installed.");
  472.         return;
  473.     }
  474.  
  475.     // Load settings from localStorage
  476.     this.loadSettings();
  477.     
  478.     this.setWindowContent();
  479.     this.createWindow();
  480.  
  481.     console.log(this.windowConfigs.windowName + " initialized");
  482. };
  483.  
  484. // Function to handle document readiness and initialize the mod
  485. opacity.onDocumentReady = function () {
  486.     if (document.readyState === "complete" || document.readyState === "interactive") {
  487.         this.initMod();
  488.     } else {
  489.         document.addEventListener("DOMContentLoaded", () => {
  490.             this.initMod();
  491.         });
  492.     }
  493. };
  494.  
  495. // Compatibility with Excigma's code injector userscript
  496. if (!window.bonkCodeInjectors) window.bonkCodeInjectors = [];
  497. window.bonkCodeInjectors.push((bonkCode) => {
  498.     try {
  499.         return opacity.injector(bonkCode);
  500.     } catch (error) {
  501.         throw error;
  502.     }
  503. });
  504.  
  505. console.log("Opacity injector loaded");
  506.  
  507. // Call the function to check document readiness and initialize the mod
  508. opacity.onDocumentReady();