diff --git a/src/keybindsInput.js b/src/keybindsInput.js index 6085470..0add513 100644 --- a/src/keybindsInput.js +++ b/src/keybindsInput.js @@ -1,4 +1,7 @@ +const truncate = n => parseFloat(n.toFixed(12)); + export function KeybindsInput(/** @type {HTMLElement} */ containerElement) { + const header = document.createElement("p"); header.innerText = "Attack Percentage Keybinds"; const keybindContainer = document.createElement("div"); @@ -6,61 +9,70 @@ export function KeybindsInput(/** @type {HTMLElement} */ containerElement) { const keybindAddButton = document.createElement("button"); keybindAddButton.innerText = "Add"; containerElement.append(header, keybindContainer, keybindAddButton); + containerElement.className = "keybinds-input"; this.container = keybindContainer; - this.keys = [ "key", "type", "value" ]; + this.objectKeys = ["key", "type", "value"]; this.objectArray = []; this.addObject = function () { this.objectArray.push({ key: "", type: "absolute", value: 0.8 }); - this.displayObjects(); + this.container.appendChild(createInputRow(this.objectArray.length - 1)); keybindAddButton.scrollIntoView(false); }; + keybindAddButton.addEventListener("click", this.addObject.bind(this)); this.update = function (settings) { this.objectArray = settings.attackPercentageKeybinds; this.displayObjects(); } - keybindAddButton.addEventListener("click", this.addObject.bind(this)); this.displayObjects = function () { // Clear the content of the container this.container.innerHTML = ""; if (this.objectArray.length === 0) return this.container.innerText = "No custom attack percentage keybinds added"; // Loop through the array and display input fields for each object for (var i = 0; i < this.objectArray.length; i++) { - var objectDiv = document.createElement("div"); - // Create input fields for each key - this.keys.forEach(function (key) { - let inputField = document.createElement(key === "type" ? "select" : "input"); - if (key === "type") { - inputField.innerHTML = ''; - inputField.addEventListener("change", this.updateObject.bind(this, i, key)); - } else if (key === "key") { - inputField.type = "text"; - inputField.setAttribute("readonly", ""); - inputField.setAttribute("placeholder", "No key set"); - inputField.addEventListener("click", this.startKeyInput.bind(this, i, key)); - } else { // key === "value" - const isAbsolute = this.objectArray[i].type === "absolute"; - inputField.type = isAbsolute ? "text" : "number"; - if (isAbsolute) inputField.addEventListener("click", this.convertIntoNumberInput.bind(this, i, key), { once: true }); - else inputField.setAttribute("step", "0.1"); - inputField.addEventListener("input", this.updateObject.bind(this, i, key)); - } - if (key === "value" && this.objectArray[i].type === "absolute") - inputField.value = this.objectArray[i][key] * 100 + "%"; - else inputField.value = this.objectArray[i][key]; - // Append input field to the object div - objectDiv.appendChild(inputField); - }, this); - // Button to delete the object - var deleteButton = document.createElement("button"); - deleteButton.textContent = "Delete"; - deleteButton.addEventListener("click", this.deleteObject.bind(this, i)); - // Append delete button to the object div - objectDiv.appendChild(deleteButton); - // Append the object div to the container - this.container.appendChild(objectDiv); + this.container.appendChild(createInputRow(i)); } }; + const createInputRow = (i) => { + var objectDiv = document.createElement("div"); + // Create input fields for each modifiable parameter + this.objectKeys.forEach(key => { + objectDiv.appendChild(this.createInputField(i, key)) + }); + // Button to delete the object + var deleteButton = document.createElement("button"); + deleteButton.textContent = "Delete"; + deleteButton.addEventListener("click", this.deleteObject.bind(this, i)); + objectDiv.appendChild(deleteButton); + + return objectDiv; + } + this.createInputField = function (i, property) { + let inputField = document.createElement(property === "type" ? "select" : "input"); + if (property === "type") { + inputField.innerHTML = ''; + inputField.addEventListener("change", this.updateObject.bind(this, i, property)); + } else if (property === "key") { + inputField.type = "text"; + inputField.setAttribute("readonly", ""); + inputField.setAttribute("placeholder", "No key set"); + inputField.addEventListener("click", this.startKeyInput.bind(this, i, property)); + } else { // property === "value" + const isAbsolute = this.objectArray[i].type === "absolute"; + inputField.type = isAbsolute ? "text" : "number"; + if (isAbsolute) inputField.addEventListener("click", this.convertIntoNumberInput.bind(this, i, property), { once: true }); + else inputField.setAttribute("step", "0.1"); + inputField.addEventListener("input", this.updateObject.bind(this, i, property)); + } + if (property === "value" && this.objectArray[i].type === "absolute") + inputField.value = truncate(this.objectArray[i][property] * 100) + "%"; + else inputField.value = this.objectArray[i][property]; + + return inputField; + }; + this.recreateInputField = function (index, property) { + this.container.children[index].children[this.objectKeys.indexOf(property)].replaceWith(this.createInputField(index, property)) + }; this.startKeyInput = function (index, property, event) { event.target.value = "Press any key"; const handler = this.updateObject.bind(this, index, property); @@ -68,25 +80,28 @@ export function KeybindsInput(/** @type {HTMLElement} */ containerElement) { event.target.addEventListener("blur", () => { event.target.removeEventListener('keydown', handler); event.target.value = this.objectArray[index][property]; - //this.displayObjects(); }, { once: true }); }; this.convertIntoNumberInput = function (index, property, event) { event.target.value = event.target.value.slice(0, -1); event.target.type = "number"; event.target.addEventListener("blur", () => { - //event.target.value = this.objectArray[index][property]; - this.displayObjects(); + this.recreateInputField(index, property); }, { once: true }); }; this.updateObject = function (index, property, event) { if (index >= this.objectArray.length) return; // Update the corresponding property of the object in the array const value = property === "value" ? ( - this.objectArray[index].type === "absolute" ? parseFloat(event.target.value) / 100 : parseFloat(event.target.value) + this.objectArray[index].type === "absolute" + ? truncate(parseFloat(event.target.value) / 100) + : parseFloat(event.target.value) ) : property === "key" ? event.key : event.target.value; this.objectArray[index][property] = value; - if (property === "key") this.displayObjects(); + + if (property === "key") this.recreateInputField(index, property); + // when the keybind's type (absolute or relative) is changed + else if (property === "type") this.recreateInputField(index, "value"); }; this.deleteObject = function (index) { // Remove the object from the array