☰

KeyTable

Add a customizable key table overlay to the bonk.io game

  1. // ==UserScript==
  2. // @name         KeyTable
  3. // @version      1.4.2
  4. // @description  Add a customizable key table overlay to the bonk.io game
  5. // @author       BZD + Clarifi
  6. // @namespace    http://tampermonkey.net/
  7. // @license      MIT
  8. // @match        https://bonk.io/gameframe-release.html
  9. // @run-at       document-end
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. // ! Compitable with Bonk Version 49
  14. window.KeyTable = {}; // Namespace for encapsulating the UI functions and variables
  15.  
  16. // Use 'strict' mode for safer code by managing silent errors
  17. 'use strict';
  18.  
  19. KeyTable.windowConfigs = {
  20.     windowName: "KeyTable",
  21.     windowId: "keytable_window",
  22.     modVersion: "1.4.2",
  23.     bonkLIBVersion: "1.1.3",
  24.     bonkVersion: "49",
  25. };
  26.  
  27. // Variable to track the most recent key input by the user
  28. KeyTable.latestInput = 0;
  29. KeyTable.currentPlayerID = 0;
  30. KeyTable.frameCount = [0, 0, 0, 0, 0, 0];
  31. // !could make these arrays but better visibly (specific naming)
  32. KeyTable.keys = {};
  33. KeyTable.keyFilter = {
  34.     'left': 1, 'right': 2, 'up': 4, 'down': 8, 'heavy': 16, 'special': 32
  35. };
  36.  
  37. // Refresh the styles for all keys on the UI
  38. KeyTable.updateKeyStyles = () => {
  39.     Object.entries(KeyTable.keys).forEach(([dir, element]) => {
  40.         // Change the key's background color if it's currently pressed
  41.         element.style.backgroundColor = KeyTable.latestInput & KeyTable.keyFilter[dir] ? bonkHUD.styleHold.buttonColorHover.color : bonkHUD.styleHold.buttonColor.color;
  42.     });
  43. };
  44.  
  45. // Reset the background color of all keys to the default state
  46. KeyTable.keyTableReset = () => {
  47.     Object.entries(KeyTable.keys).forEach(([dir, element]) => {
  48.         element.style.backgroundColor = bonkHUD.styleHold.buttonColor.color;
  49.     });
  50. };
  51.  
  52. // Event listener function to change the player selected in the player selector
  53. KeyTable.select_player = () => {
  54.     let player_selector = document.getElementById("player_selector");
  55.     let player_id = player_selector.options[player_selector.selectedIndex].value;
  56.     KeyTable.currentPlayerID = player_id;
  57.     KeyTable.updateKeyStyles();
  58.     //console.log("current Player ID: " + player_id);
  59. };
  60.  
  61. // Create a new option in the player selector
  62. KeyTable.create_option = (userID) => {
  63.     //console.log("userID:" + userID);
  64.     let playerName = bonkAPI.getPlayerNameByID(userID);
  65.     let player_selector = document.getElementById("player_selector");
  66.     let newOption = document.createElement("option");
  67.     newOption.textContent = playerName;
  68.     newOption.value = userID;
  69.     newOption.id = "selector_option_" + userID;
  70.     player_selector.appendChild(newOption);
  71.     KeyTable.updateKeyStyles();
  72.     //console.log("selector_option_" + userID + " added to player_selector");
  73. };
  74.  
  75. // Remove an option from the player selector
  76. KeyTable.remove_option = (userID) => {
  77.     let player_selector = document.getElementById("player_selector");
  78.     let option = document.getElementById("selector_option_" + userID);
  79.     player_selector.removeChild(option);
  80. };
  81.  
  82. // Reset the player selector to the default state
  83. KeyTable.reset_selector = () => {
  84.     // Remove all options except the default one
  85.     let player_selector = document.getElementById("player_selector");
  86.     Array.from(player_selector.options).forEach((option) => {
  87.         if (option.id !== "selector_option_user") {
  88.             player_selector.removeChild(option);
  89.         }
  90.         // Reset the current player ID
  91.         KeyTable.currentPlayerID = bonkAPI.getMyID();
  92.         // Set the selector to the first option as default
  93.         player_selector.selectedIndex = bonkAPI.getMyID();
  94.     });
  95. };
  96.  
  97. // Update the player list in the player selector
  98. KeyTable.update_players = () => {
  99.     // Get the list of players and the current player ID
  100.     let playerList = bonkAPI.getPlayerList();
  101.     let myID = bonkAPI.getMyID();
  102.     // Reset the player selector
  103.     KeyTable.reset_selector();
  104.     // Add all player to the player selector
  105.     playerList.forEach((player, id) => {
  106.         if (player && id !== myID) {
  107.             KeyTable.create_option(id);
  108.         }
  109.     });
  110. };
  111.  
  112. // Process input data and invoke style updates
  113. bonkAPI.addEventListener("gameInputs", (e) => {
  114.     // console.log("gameInputs event received", e);
  115.     if (e.userID == KeyTable.currentPlayerID) {
  116.         // console.log("Updating latestInput for player", readingPlayerID, "with input", e.rawInput);
  117.         KeyTable.latestInput = e.rawInput;
  118.         KeyTable.updateKeyStyles();
  119.     }
  120. });
  121.  
  122. /*bonkAPI.addEventListener("stepEvent", (e) => {
  123.     for(int i = 0; i < KeyTable.keys) {
  124.  
  125.     }
  126. });*/
  127.  
  128. // Event listener for when a user joins the game
  129. bonkAPI.addEventListener("userJoin", (e) => {
  130.     //console.log("User join event received", e);
  131.     //console.log("User ID", e.userID);
  132.     // Add the player to the player selector
  133.     KeyTable.create_option(e.userID);
  134. });
  135.  
  136. // Event listener for when a user leaves the game
  137. bonkAPI.addEventListener("userLeave", (e) => {
  138.     //console.log("User Leave event received", e);
  139.     //console.log("User ID", e.userID);
  140.     // Remove the player from the player selector
  141.     let playerName = bonkAPI.getPlayerNameByID(e.userID);
  142.     let player_selector = document.getElementById("player_selector");
  143.     // If the player is the current player, set the current player to 0 and reset the selector
  144.     if (player_selector.options[player_selector.selectedIndex].value === playerName) {
  145.         KeyTable.currentPlayerID = bonkAPI.getMyID();
  146.         // Set the selector to the first option as default
  147.         player_selector.selectedIndex = 0;
  148.     }
  149.  
  150.     KeyTable.remove_option(e.userID);
  151. });
  152.  
  153. // Event listener for when user(mod user) creates a room
  154. bonkAPI.addEventListener("createRoom", (e) => {
  155.     //console.log("create Room event received", e);
  156.     //console.log("User ID", e);
  157.     // Set the player name in the player selector to the current user
  158.     let option = document.getElementById("selector_option_user");
  159.     let playerName = bonkAPI.getPlayerNameByID(e.userID);
  160.     option.textContent = playerName;
  161.     option.value = e.userID;
  162.     KeyTable.currentPlayerID = e.userID;
  163.     // Reset the player selector to the default state
  164.     KeyTable.reset_selector();
  165. });
  166.  
  167. // Event listener for when user(mod user) joins a room
  168. bonkAPI.addEventListener("joinRoom", (e) => {
  169.     //console.log("on Join event received", e);
  170.     //console.log("User ID", e.userID);
  171.     // Set the player name in the player selector to the current user
  172.     let option = document.getElementById("selector_option_user");
  173.     let playerName = bonkAPI.getPlayerNameByID(bonkAPI.getMyID());
  174.     option.textContent = playerName;
  175.     option.value = bonkAPI.getMyID();
  176.     KeyTable.currentPlayerID = bonkAPI.getMyID();
  177.     // Update the player list in the player selector
  178.     KeyTable.update_players();
  179. });
  180.  
  181. // Main function to construct and add the key table UI to the DOM
  182. const addKeyTable = () => {
  183.     // Create the key table
  184.     let keyTable = document.createElement("div");
  185.  
  186.     let keyHold = document.createElement("table");
  187.     keyHold.style.flex = "1 1 auto";
  188.  
  189.     let tableBody = document.createElement("tbody");
  190.     let topRow = document.createElement("tr");
  191.     KeyTable.keys["special"] = document.createElement("td");
  192.     KeyTable.keys["special"].classList.add("bonkhud-button-color");
  193.     KeyTable.keys["special"].classList.add("bonkhud-text-color");
  194.     KeyTable.keys["special"].style.width = "34%";
  195.     KeyTable.keys["special"].style.textAlign = "center";
  196.     KeyTable.keys["special"].textContent = "Special";
  197.  
  198.     KeyTable.keys["up"] = document.createElement("td");
  199.     KeyTable.keys["up"].classList.add("bonkhud-button-color");
  200.     KeyTable.keys["up"].classList.add("bonkhud-text-color");
  201.     KeyTable.keys["up"].style.width = "34%";
  202.     KeyTable.keys["up"].style.textAlign = "center";
  203.     KeyTable.keys["up"].textContent = "↑";
  204.  
  205.     KeyTable.keys["heavy"] = document.createElement("td");
  206.     KeyTable.keys["heavy"].classList.add("bonkhud-button-color");
  207.     KeyTable.keys["heavy"].classList.add("bonkhud-text-color");
  208.     KeyTable.keys["heavy"].style.width = "34%";
  209.     KeyTable.keys["heavy"].style.textAlign = "center";
  210.     KeyTable.keys["heavy"].textContent = "Heavy";
  211.  
  212.     let botRow = document.createElement("tr");
  213.     KeyTable.keys["left"] = document.createElement("td");
  214.     KeyTable.keys["left"].classList.add("bonkhud-button-color");
  215.     KeyTable.keys["left"].classList.add("bonkhud-text-color");
  216.     KeyTable.keys["left"].style.width = "34%";
  217.     KeyTable.keys["left"].style.textAlign = "center";
  218.     KeyTable.keys["left"].textContent = "←";
  219.  
  220.     KeyTable.keys["down"] = document.createElement("td");
  221.     KeyTable.keys["down"].classList.add("bonkhud-button-color");
  222.     KeyTable.keys["down"].classList.add("bonkhud-text-color");
  223.     KeyTable.keys["down"].style.width = "34%";
  224.     KeyTable.keys["down"].style.textAlign = "center";
  225.     KeyTable.keys["down"].textContent = "↓";
  226.  
  227.     KeyTable.keys["right"] = document.createElement("td");
  228.     KeyTable.keys["right"].classList.add("bonkhud-button-color");
  229.     KeyTable.keys["right"].classList.add("bonkhud-text-color");
  230.     KeyTable.keys["right"].style.width = "34%";
  231.     KeyTable.keys["right"].style.textAlign = "center";
  232.     KeyTable.keys["right"].textContent = "→";
  233.  
  234.     let pSelectorHold = document.createElement("div");
  235.     pSelectorHold.style.flex = "0 1 auto";
  236.     pSelectorHold.style.padding = "10px";
  237.  
  238.     let pSelector = document.createElement("select");
  239.     pSelector.id = "player_selector";
  240.  
  241.     let pOption = document.createElement("option");
  242.     pOption.id = "selector_option_user";
  243.     pOption.textContent = "......";
  244.  
  245.     topRow.appendChild(KeyTable.keys["special"]);
  246.     topRow.appendChild(KeyTable.keys["up"]);
  247.     topRow.appendChild(KeyTable.keys["heavy"]);
  248.  
  249.     botRow.appendChild(KeyTable.keys["left"]);
  250.     botRow.appendChild(KeyTable.keys["down"]);
  251.     botRow.appendChild(KeyTable.keys["right"]);
  252.  
  253.     tableBody.appendChild(topRow);
  254.     tableBody.appendChild(botRow);
  255.  
  256.     pSelector.appendChild(pOption);
  257.  
  258.     pSelectorHold.appendChild(pSelector);
  259.  
  260.     keyHold.appendChild(tableBody);
  261.  
  262.     keyTable.appendChild(keyHold);
  263.     keyTable.appendChild(pSelectorHold);
  264.  
  265.     let keyTableSettings = document.createElement('div');
  266.     keyTableSettings.style.margin = "10px";
  267.  
  268.     let inputTopRow = document.createElement('div');
  269.     inputTopRow.style.display = "flex";
  270.  
  271.     let heavyInput = document.createElement('input');
  272.     heavyInput.setAttribute("type", "text");
  273.     heavyInput.value = "Heavy";
  274.     heavyInput.style.minWidth = "0";
  275.  
  276.     let upInput = document.createElement('input');
  277.     upInput.setAttribute("type", "text");
  278.     upInput.value = "↑";
  279.     upInput.style.minWidth = "0";
  280.  
  281.     let specialInput = document.createElement('input');
  282.     specialInput.setAttribute("type", "text");
  283.     specialInput.value = "Special";
  284.     specialInput.style.minWidth = "0";
  285.  
  286.     let inputBottomRow = document.createElement('div');
  287.     inputBottomRow.style.display = "flex";
  288.  
  289.     let leftInput = document.createElement('input');
  290.     leftInput.setAttribute("type", "text");
  291.     leftInput.value = "←";
  292.     leftInput.style.minWidth = "0";
  293.  
  294.     let downInput = document.createElement('input');
  295.     downInput.setAttribute("type", "text");
  296.     downInput.value = "↓";
  297.     downInput.style.minWidth = "0";
  298.  
  299.     let rightInput = document.createElement('input');
  300.     rightInput.setAttribute("type", "text");
  301.     rightInput.value = "→";
  302.     rightInput.style.minWidth = "0";
  303.  
  304.     inputTopRow.appendChild(specialInput);
  305.     inputTopRow.appendChild(upInput);
  306.     inputTopRow.appendChild(heavyInput);
  307.  
  308.     inputBottomRow.appendChild(leftInput);
  309.     inputBottomRow.appendChild(downInput);
  310.     inputBottomRow.appendChild(rightInput);
  311.  
  312.     keyTableSettings.appendChild(inputTopRow);
  313.     keyTableSettings.appendChild(inputBottomRow);
  314.  
  315.     KeyTable.windowConfigs.settingsContent = keyTableSettings;
  316.  
  317.     let keytable_index = bonkHUD.createWindow(
  318.         KeyTable.windowConfigs.windowName,
  319.         keyTable,
  320.         KeyTable.windowConfigs
  321.     );
  322.     let keytable_window = bonkHUD.getElementByIndex(keytable_index);
  323.     keytable_window.style.width = "100%";
  324.     keytable_window.style.height = "calc(100% - 32px)";
  325.     keytable_window.style.padding = "0";
  326.     keytable_window.style.display = "flex";
  327.     keytable_window.style.flexFlow = "column";
  328.  
  329.     bonkHUD.loadUISetting(keytable_index);
  330.  
  331.     let recoveredSetting = bonkHUD.getModSetting(keytable_index);
  332.     if(recoveredSetting) {
  333.         KeyTable.keys["heavy"].textContent = recoveredSetting["heavy"];
  334.         KeyTable.keys["up"].textContent = recoveredSetting["up"];
  335.         KeyTable.keys["special"].textContent = recoveredSetting["special"];
  336.         KeyTable.keys["left"].textContent = recoveredSetting["left"];
  337.         KeyTable.keys["down"].textContent = recoveredSetting["down"];
  338.         KeyTable.keys["right"].textContent = recoveredSetting["right"];
  339.  
  340.         heavyInput.value = recoveredSetting["heavy"];
  341.         upInput.value = recoveredSetting["up"];
  342.         specialInput.value = recoveredSetting["special"];
  343.         leftInput.value = recoveredSetting["left"];
  344.         downInput.value = recoveredSetting["down"];
  345.         rightInput.value = recoveredSetting["right"];
  346.     }
  347.  
  348.     let saveFunction = function() {
  349.         let setting = {
  350.             "heavy": heavyInput.value,
  351.             "up": upInput.value,
  352.             "special": specialInput.value,
  353.             "left": leftInput.value,
  354.             "down": downInput.value,
  355.             "right": rightInput.value,
  356.         };
  357.         bonkHUD.saveModSetting(keytable_index, setting);
  358.  
  359.         KeyTable.keys["heavy"].textContent = heavyInput.value;
  360.         KeyTable.keys["up"].textContent = upInput.value;
  361.         KeyTable.keys["special"].textContent = specialInput.value;
  362.         KeyTable.keys["left"].textContent = leftInput.value;
  363.         KeyTable.keys["down"].textContent = downInput.value;
  364.         KeyTable.keys["right"].textContent = rightInput.value;
  365.         KeyTable.updateKeyStyles();
  366.     }
  367.  
  368.     heavyInput.onchange = saveFunction;
  369.     upInput.onchange = saveFunction;
  370.     specialInput.onchange = saveFunction;
  371.     leftInput.onchange = saveFunction;
  372.     downInput.onchange = saveFunction;
  373.     rightInput.onchange = saveFunction;
  374.  
  375.     // Initialize the key styles
  376.     KeyTable.updateKeyStyles();
  377. };
  378.  
  379. // Initialization logic to set up the UI once the document is ready
  380. const init = () => {
  381.     addKeyTable();
  382.     let playerSelector = document.getElementById("player_selector");
  383.     if (playerSelector) {
  384.         playerSelector.addEventListener("change", KeyTable.select_player);
  385.     } else {
  386.         console.error("player_selector element not found!");
  387.     }
  388. };
  389.  
  390. if (document.readyState === "complete" || document.readyState === "interactive") {
  391.     init();
  392. } else {
  393.     document.addEventListener("DOMContentLoaded", init);
  394. }