- // ==UserScript==
- // @name KeyTable
- // @version 1.4.2
- // @description Add a customizable key table overlay to the bonk.io game
- // @author BZD + Clarifi
- // @namespace http://tampermonkey.net/
- // @license MIT
- // @match https://bonk.io/gameframe-release.html
- // @run-at document-end
- // @grant none
- // ==/UserScript==
-
- // ! Compitable with Bonk Version 49
- window.KeyTable = {}; // Namespace for encapsulating the UI functions and variables
-
- // Use 'strict' mode for safer code by managing silent errors
- 'use strict';
-
- KeyTable.windowConfigs = {
- windowName: "KeyTable",
- windowId: "keytable_window",
- modVersion: "1.4.2",
- bonkLIBVersion: "1.1.3",
- bonkVersion: "49",
- };
-
- // Variable to track the most recent key input by the user
- KeyTable.latestInput = 0;
- KeyTable.currentPlayerID = 0;
- KeyTable.frameCount = [0, 0, 0, 0, 0, 0];
- // !could make these arrays but better visibly (specific naming)
- KeyTable.keys = {};
- KeyTable.keyFilter = {
- 'left': 1, 'right': 2, 'up': 4, 'down': 8, 'heavy': 16, 'special': 32
- };
-
- // Refresh the styles for all keys on the UI
- KeyTable.updateKeyStyles = () => {
- Object.entries(KeyTable.keys).forEach(([dir, element]) => {
- // Change the key's background color if it's currently pressed
- element.style.backgroundColor = KeyTable.latestInput & KeyTable.keyFilter[dir] ? bonkHUD.styleHold.buttonColorHover.color : bonkHUD.styleHold.buttonColor.color;
- });
- };
-
- // Reset the background color of all keys to the default state
- KeyTable.keyTableReset = () => {
- Object.entries(KeyTable.keys).forEach(([dir, element]) => {
- element.style.backgroundColor = bonkHUD.styleHold.buttonColor.color;
- });
- };
-
- // Event listener function to change the player selected in the player selector
- KeyTable.select_player = () => {
- let player_selector = document.getElementById("player_selector");
- let player_id = player_selector.options[player_selector.selectedIndex].value;
- KeyTable.currentPlayerID = player_id;
- KeyTable.updateKeyStyles();
- //console.log("current Player ID: " + player_id);
- };
-
- // Create a new option in the player selector
- KeyTable.create_option = (userID) => {
- //console.log("userID:" + userID);
- let playerName = bonkAPI.getPlayerNameByID(userID);
- let player_selector = document.getElementById("player_selector");
- let newOption = document.createElement("option");
- newOption.textContent = playerName;
- newOption.value = userID;
- newOption.id = "selector_option_" + userID;
- player_selector.appendChild(newOption);
- KeyTable.updateKeyStyles();
- //console.log("selector_option_" + userID + " added to player_selector");
- };
-
- // Remove an option from the player selector
- KeyTable.remove_option = (userID) => {
- let player_selector = document.getElementById("player_selector");
- let option = document.getElementById("selector_option_" + userID);
- player_selector.removeChild(option);
- };
-
- // Reset the player selector to the default state
- KeyTable.reset_selector = () => {
- // Remove all options except the default one
- let player_selector = document.getElementById("player_selector");
- Array.from(player_selector.options).forEach((option) => {
- if (option.id !== "selector_option_user") {
- player_selector.removeChild(option);
- }
- // Reset the current player ID
- KeyTable.currentPlayerID = bonkAPI.getMyID();
- // Set the selector to the first option as default
- player_selector.selectedIndex = bonkAPI.getMyID();
- });
- };
-
- // Update the player list in the player selector
- KeyTable.update_players = () => {
- // Get the list of players and the current player ID
- let playerList = bonkAPI.getPlayerList();
- let myID = bonkAPI.getMyID();
- // Reset the player selector
- KeyTable.reset_selector();
- // Add all player to the player selector
- playerList.forEach((player, id) => {
- if (player && id !== myID) {
- KeyTable.create_option(id);
- }
- });
- };
-
- // Process input data and invoke style updates
- bonkAPI.addEventListener("gameInputs", (e) => {
- // console.log("gameInputs event received", e);
- if (e.userID == KeyTable.currentPlayerID) {
- // console.log("Updating latestInput for player", readingPlayerID, "with input", e.rawInput);
- KeyTable.latestInput = e.rawInput;
- KeyTable.updateKeyStyles();
- }
- });
-
- /*bonkAPI.addEventListener("stepEvent", (e) => {
- for(int i = 0; i < KeyTable.keys) {
-
- }
- });*/
-
- // Event listener for when a user joins the game
- bonkAPI.addEventListener("userJoin", (e) => {
- //console.log("User join event received", e);
- //console.log("User ID", e.userID);
- // Add the player to the player selector
- KeyTable.create_option(e.userID);
- });
-
- // Event listener for when a user leaves the game
- bonkAPI.addEventListener("userLeave", (e) => {
- //console.log("User Leave event received", e);
- //console.log("User ID", e.userID);
- // Remove the player from the player selector
- let playerName = bonkAPI.getPlayerNameByID(e.userID);
- let player_selector = document.getElementById("player_selector");
- // If the player is the current player, set the current player to 0 and reset the selector
- if (player_selector.options[player_selector.selectedIndex].value === playerName) {
- KeyTable.currentPlayerID = bonkAPI.getMyID();
- // Set the selector to the first option as default
- player_selector.selectedIndex = 0;
- }
-
- KeyTable.remove_option(e.userID);
- });
-
- // Event listener for when user(mod user) creates a room
- bonkAPI.addEventListener("createRoom", (e) => {
- //console.log("create Room event received", e);
- //console.log("User ID", e);
- // Set the player name in the player selector to the current user
- let option = document.getElementById("selector_option_user");
- let playerName = bonkAPI.getPlayerNameByID(e.userID);
- option.textContent = playerName;
- option.value = e.userID;
- KeyTable.currentPlayerID = e.userID;
- // Reset the player selector to the default state
- KeyTable.reset_selector();
- });
-
- // Event listener for when user(mod user) joins a room
- bonkAPI.addEventListener("joinRoom", (e) => {
- //console.log("on Join event received", e);
- //console.log("User ID", e.userID);
- // Set the player name in the player selector to the current user
- let option = document.getElementById("selector_option_user");
- let playerName = bonkAPI.getPlayerNameByID(bonkAPI.getMyID());
- option.textContent = playerName;
- option.value = bonkAPI.getMyID();
- KeyTable.currentPlayerID = bonkAPI.getMyID();
- // Update the player list in the player selector
- KeyTable.update_players();
- });
-
- // Main function to construct and add the key table UI to the DOM
- const addKeyTable = () => {
- // Create the key table
- let keyTable = document.createElement("div");
-
- let keyHold = document.createElement("table");
- keyHold.style.flex = "1 1 auto";
-
- let tableBody = document.createElement("tbody");
- let topRow = document.createElement("tr");
- KeyTable.keys["special"] = document.createElement("td");
- KeyTable.keys["special"].classList.add("bonkhud-button-color");
- KeyTable.keys["special"].classList.add("bonkhud-text-color");
- KeyTable.keys["special"].style.width = "34%";
- KeyTable.keys["special"].style.textAlign = "center";
- KeyTable.keys["special"].textContent = "Special";
-
- KeyTable.keys["up"] = document.createElement("td");
- KeyTable.keys["up"].classList.add("bonkhud-button-color");
- KeyTable.keys["up"].classList.add("bonkhud-text-color");
- KeyTable.keys["up"].style.width = "34%";
- KeyTable.keys["up"].style.textAlign = "center";
- KeyTable.keys["up"].textContent = "↑";
-
- KeyTable.keys["heavy"] = document.createElement("td");
- KeyTable.keys["heavy"].classList.add("bonkhud-button-color");
- KeyTable.keys["heavy"].classList.add("bonkhud-text-color");
- KeyTable.keys["heavy"].style.width = "34%";
- KeyTable.keys["heavy"].style.textAlign = "center";
- KeyTable.keys["heavy"].textContent = "Heavy";
-
- let botRow = document.createElement("tr");
- KeyTable.keys["left"] = document.createElement("td");
- KeyTable.keys["left"].classList.add("bonkhud-button-color");
- KeyTable.keys["left"].classList.add("bonkhud-text-color");
- KeyTable.keys["left"].style.width = "34%";
- KeyTable.keys["left"].style.textAlign = "center";
- KeyTable.keys["left"].textContent = "←";
-
- KeyTable.keys["down"] = document.createElement("td");
- KeyTable.keys["down"].classList.add("bonkhud-button-color");
- KeyTable.keys["down"].classList.add("bonkhud-text-color");
- KeyTable.keys["down"].style.width = "34%";
- KeyTable.keys["down"].style.textAlign = "center";
- KeyTable.keys["down"].textContent = "↓";
-
- KeyTable.keys["right"] = document.createElement("td");
- KeyTable.keys["right"].classList.add("bonkhud-button-color");
- KeyTable.keys["right"].classList.add("bonkhud-text-color");
- KeyTable.keys["right"].style.width = "34%";
- KeyTable.keys["right"].style.textAlign = "center";
- KeyTable.keys["right"].textContent = "→";
-
- let pSelectorHold = document.createElement("div");
- pSelectorHold.style.flex = "0 1 auto";
- pSelectorHold.style.padding = "10px";
-
- let pSelector = document.createElement("select");
- pSelector.id = "player_selector";
-
- let pOption = document.createElement("option");
- pOption.id = "selector_option_user";
- pOption.textContent = "......";
-
- topRow.appendChild(KeyTable.keys["special"]);
- topRow.appendChild(KeyTable.keys["up"]);
- topRow.appendChild(KeyTable.keys["heavy"]);
-
- botRow.appendChild(KeyTable.keys["left"]);
- botRow.appendChild(KeyTable.keys["down"]);
- botRow.appendChild(KeyTable.keys["right"]);
-
- tableBody.appendChild(topRow);
- tableBody.appendChild(botRow);
-
- pSelector.appendChild(pOption);
-
- pSelectorHold.appendChild(pSelector);
-
- keyHold.appendChild(tableBody);
-
- keyTable.appendChild(keyHold);
- keyTable.appendChild(pSelectorHold);
-
- let keyTableSettings = document.createElement('div');
- keyTableSettings.style.margin = "10px";
-
- let inputTopRow = document.createElement('div');
- inputTopRow.style.display = "flex";
-
- let heavyInput = document.createElement('input');
- heavyInput.setAttribute("type", "text");
- heavyInput.value = "Heavy";
- heavyInput.style.minWidth = "0";
-
- let upInput = document.createElement('input');
- upInput.setAttribute("type", "text");
- upInput.value = "↑";
- upInput.style.minWidth = "0";
-
- let specialInput = document.createElement('input');
- specialInput.setAttribute("type", "text");
- specialInput.value = "Special";
- specialInput.style.minWidth = "0";
-
- let inputBottomRow = document.createElement('div');
- inputBottomRow.style.display = "flex";
-
- let leftInput = document.createElement('input');
- leftInput.setAttribute("type", "text");
- leftInput.value = "←";
- leftInput.style.minWidth = "0";
-
- let downInput = document.createElement('input');
- downInput.setAttribute("type", "text");
- downInput.value = "↓";
- downInput.style.minWidth = "0";
-
- let rightInput = document.createElement('input');
- rightInput.setAttribute("type", "text");
- rightInput.value = "→";
- rightInput.style.minWidth = "0";
-
- inputTopRow.appendChild(specialInput);
- inputTopRow.appendChild(upInput);
- inputTopRow.appendChild(heavyInput);
-
- inputBottomRow.appendChild(leftInput);
- inputBottomRow.appendChild(downInput);
- inputBottomRow.appendChild(rightInput);
-
- keyTableSettings.appendChild(inputTopRow);
- keyTableSettings.appendChild(inputBottomRow);
-
- KeyTable.windowConfigs.settingsContent = keyTableSettings;
-
- let keytable_index = bonkHUD.createWindow(
- KeyTable.windowConfigs.windowName,
- keyTable,
- KeyTable.windowConfigs
- );
- let keytable_window = bonkHUD.getElementByIndex(keytable_index);
- keytable_window.style.width = "100%";
- keytable_window.style.height = "calc(100% - 32px)";
- keytable_window.style.padding = "0";
- keytable_window.style.display = "flex";
- keytable_window.style.flexFlow = "column";
-
- bonkHUD.loadUISetting(keytable_index);
-
- let recoveredSetting = bonkHUD.getModSetting(keytable_index);
- if(recoveredSetting) {
- KeyTable.keys["heavy"].textContent = recoveredSetting["heavy"];
- KeyTable.keys["up"].textContent = recoveredSetting["up"];
- KeyTable.keys["special"].textContent = recoveredSetting["special"];
- KeyTable.keys["left"].textContent = recoveredSetting["left"];
- KeyTable.keys["down"].textContent = recoveredSetting["down"];
- KeyTable.keys["right"].textContent = recoveredSetting["right"];
-
- heavyInput.value = recoveredSetting["heavy"];
- upInput.value = recoveredSetting["up"];
- specialInput.value = recoveredSetting["special"];
- leftInput.value = recoveredSetting["left"];
- downInput.value = recoveredSetting["down"];
- rightInput.value = recoveredSetting["right"];
- }
-
- let saveFunction = function() {
- let setting = {
- "heavy": heavyInput.value,
- "up": upInput.value,
- "special": specialInput.value,
- "left": leftInput.value,
- "down": downInput.value,
- "right": rightInput.value,
- };
- bonkHUD.saveModSetting(keytable_index, setting);
-
- KeyTable.keys["heavy"].textContent = heavyInput.value;
- KeyTable.keys["up"].textContent = upInput.value;
- KeyTable.keys["special"].textContent = specialInput.value;
- KeyTable.keys["left"].textContent = leftInput.value;
- KeyTable.keys["down"].textContent = downInput.value;
- KeyTable.keys["right"].textContent = rightInput.value;
- KeyTable.updateKeyStyles();
- }
-
- heavyInput.onchange = saveFunction;
- upInput.onchange = saveFunction;
- specialInput.onchange = saveFunction;
- leftInput.onchange = saveFunction;
- downInput.onchange = saveFunction;
- rightInput.onchange = saveFunction;
-
- // Initialize the key styles
- KeyTable.updateKeyStyles();
- };
-
- // Initialization logic to set up the UI once the document is ready
- const init = () => {
- addKeyTable();
- let playerSelector = document.getElementById("player_selector");
- if (playerSelector) {
- playerSelector.addEventListener("change", KeyTable.select_player);
- } else {
- console.error("player_selector element not found!");
- }
- };
-
- if (document.readyState === "complete" || document.readyState === "interactive") {
- init();
- } else {
- document.addEventListener("DOMContentLoaded", init);
- }