Module ${count}

`; bold.style = "text-align: center; font-size: 18px;"; col1.appendChild(bold); const pricing = document.createElement("div"); pricing.innerHTML = ""; // + (Thumbstick **) pricing.classList.add("pricing-div"); pricing.id = `module-${count}-pricing`; col1.appendChild(pricing); const mechTypeDiv = document.createElement("div"); const mechType = document.createElement("select"); mechType.id = `module-${count}-mech-type`; mechType.classList.add("form-control"); generateOptions(mechType, [ ["", "Select Mechanism Type", true], ["No Service Needed", "$0 - No Service Needed"], ["TMR", "$25 - Magneto Mechanism (TMR)"], ["Alps", "$20 - OEM/Analog Mechanism"] ] ); const mechTypeLabel = document.createElement("label"); mechTypeLabel.classList.add("fitText"); mechTypeLabel.classList.add("block_label"); mechTypeLabel.htmlFor = `module-${count}-mech-type`; mechTypeLabel.tabIndex = -1; mechTypeLabel.innerText = "Replacement Thumbstick Mechanism*"; mechTypeLabel.style = "display: inline;"; mechTypeDiv.appendChild(mechTypeLabel); mechTypeDiv.appendChild(mechType); col1.appendChild(mechTypeDiv); const tensionDiv = document.createElement("div"); const tension = document.createElement("select"); tension.id = `module-${count}-tension`; tension.classList.add("form-control"); tension.disabled = true; generateOptions(tension, [ ["", "Select Tension", true], ["Decreased", "+$5 - Decreased Tension (-40%)"], ["Light", "+$5 - Light Tension (-20%)"], ["Stock", "+$0 - Stock Tension"], ["Increased", "+$5 - Increased Tension (+75%)"], ["Heavy", "+$5 - Heavy Tension (+150%)"] ] ); const tensionLabel = document.createElement("label"); tensionLabel.classList.add("fitText"); tensionLabel.classList.add("block_label"); tensionLabel.htmlFor = `module-${count}-tension`; tensionLabel.tabIndex = -1; tensionLabel.innerText = "Tension*"; tensionLabel.style = "display: inline;"; tensionDiv.appendChild(tensionLabel); tensionDiv.appendChild(tension); col1.appendChild(tensionDiv); const stickClickDiv = document.createElement("div"); const stickClick = document.createElement("select"); stickClick.id = `module-${count}-stick-click`; stickClick.classList.add("form-control"); stickClick.disabled = true; generateOptions(stickClick, [ ["", "Select Stick Click", true], ["Smart Stick Click", "+$15 - Smart Stick Click"], ["Stock Stick Click", "+$0 - Stock Stick Click"] ] ); const stickClickLabel = document.createElement("label"); stickClickLabel.classList.add("fitText"); stickClickLabel.classList.add("block_label"); stickClickLabel.htmlFor = `module-${count}-stick-click`; stickClickLabel.tabIndex = -1; stickClickLabel.innerText = "Add Smart Stick Click?*"; stickClickLabel.style = "display: inline;"; stickClickDiv.appendChild(stickClickLabel); stickClickDiv.appendChild(stickClick); col1.appendChild(stickClickDiv); const stickTypeDiv = document.createElement("div"); const stickType = document.createElement("input"); stickType.type = "text"; stickType.classList.add("autocomplete"); stickType.classList.add("validate"); stickType.classList.add("form-control"); stickType.id = `module-${count}-stick-type`; stickType.placeholder = "Ex: OEM Edge, PS5 Solid Blue, Clear/Black Z-Stick, etc."; //stickType.autocomplete = "off"; const stickTypeLabel = document.createElement("label"); stickTypeLabel.classList.add("fitText"); stickTypeLabel.classList.add("block_label"); stickTypeLabel.htmlFor = `module-${count}-stick-type`; stickTypeLabel.tabIndex = -1; stickTypeLabel.style = "width: 100%; display: inline;"; stickTypeLabel.innerHTML = "Replacement Thumbstick ** See Available Thumbsticks"; const stickTypeFooter = document.createElement("p"); stickTypeFooter.innerText = "** Edge Modules are only compatible with OEM Edge Sticks ($5), PS5 OEM Black Sticks ($0), PS5 Solid Sticks ($7), Z-Sticks ($10), Pro Sticks ($10), and Interchangeable Sticks ($15)."; stickTypeFooter.style = "font-size: 12px; line-height: 1.5; margin-bottom: 0; margin-top: 5px;"; stickTypeDiv.appendChild(stickTypeLabel); stickTypeDiv.appendChild(stickType); stickTypeDiv.appendChild(stickTypeFooter); col1.appendChild(stickTypeDiv); stickType.addEventListener("keydown", function(event) { if (event.key === "'" || event.key === "(" || event.key === ")") { event.preventDefault(); } }); stickType.addEventListener("keydown", function(event) { if (event.key === "Enter" || event.key === "\\" || event.key === "{" || event.key === "}" || event.key === "[" || event.key === "]" || event.key === "`" || event.key === '"') { event.preventDefault(); } }); stickType.addEventListener("paste", function(event) { event.preventDefault(); const clipboardData = event.clipboardData || window.clipboardData; const pastedText = clipboardData.getData('text/plain'); const modifiedText = pastedText .replace(/"/g, "") .replace(/`/g, "") .replace(/{/g, "") .replace(/}/g, "") .replace(/'/g, "") .replace(/$/g, "") .replace(/$/g, "") .replace(/\[/g, "") .replace(/]/g, "") .replace(/\\/g, "") .replace(/\n/g, ""); document.execCommand('insertText', false, modifiedText); }); const toastContainer = document.createElement("div"); toastContainer.id = `module-${count}-toast-container`; toastContainer.classList.add("toast-container"); div.appendChild(toastContainer); div.appendChild(col1); parent.appendChild(div); stickType.oninput = function() {outputData();}; mechType.onchange = function() {handleMech(mechType, tension, stickClick, toastContainer); outputData();}; tension.onchange = function() {handleMech(mechType, tension, stickClick, toastContainer); outputData();}; stickClick.onchange = function() {handleMech(mechType, tension, stickClick, toastContainer); outputData();}; outputData(); document.getElementById("form-height-reset-checkbox-1").click(); document.getElementById("form-height-reset-checkbox-1").click(); } function outputData() { const count = document.getElementById('module-count').value; var output = document.getElementById("modules-data"); var mechTypeValidation = ""; var tensionValidation = ""; var stickClickValidation = ""; var pricing = document.getElementById("pricing-div"); pricing.innerHTML = ""; var pricingString = ""; var pricingArray = []; var totalPrice = 0; var grandTotalPrice = 0; output.value = ""; if (count == 0) {return;} for (var i = 1; i <= count; i++) { output.value += `${(i > 1 ? ", " : "")}'Module ${i}': ('Mech Type': '${document.getElementById(`module-${i}-mech-type`).value}', 'Tension': '${document.getElementById(`module-${i}-tension`).value}', 'Stick Click': '${document.getElementById(`module-${i}-stick-click`).value}', 'Thumbstick': '${document.getElementById(`module-${i}-stick-type`).value}')`; if (document.getElementById(`module-${i}-mech-type`).value === "") {mechTypeValidation += "Missing Data";} else if (document.getElementById(`module-${i}-mech-type`).value.includes("TMR")) {pricingArray.push([25, "$25 Magneto Mechanism"]);} else if (document.getElementById(`module-${i}-mech-type`).value.includes("Alps")) {pricingArray.push([20, "$20 OEM Mechanism"]);} else if (document.getElementById(`module-${i}-mech-type`).value.includes("No Service Needed")) {pricingArray.push([0, "$0 No Mechanism Service"]);} if (!document.getElementById(`module-${i}-tension`).disabled && document.getElementById(`module-${i}-tension`).value === "") {tensionValidation += "Missing Data";} else if (!document.getElementById(`module-${i}-tension`).disabled) { if (document.getElementById(`module-${i}-tension`).value.includes("Stock")) {pricingArray.push([0, " + $0 Stock Tension"]);} else {pricingArray.push([5, ` + $5 ${document.getElementById(`module-${i}-tension`).value} Tension`]);} } if (!document.getElementById(`module-${i}-stick-click`).disabled && document.getElementById(`module-${i}-stick-click`).value === "") {stickClickValidation += "Missing Data";} else if (!document.getElementById(`module-${i}-stick-click`).disabled) { if (document.getElementById(`module-${i}-stick-click`).value.includes("Smart")) {pricingArray.push([15, " + $15 Smart Stick Click"]);} else {pricingArray.push([0, " + $0 Stock Stick Click"]);} } pricingArray.forEach(price => {totalPrice += price[0];}); pricingString += `

Module ${i} ≈ $${totalPrice} ≈ `; pricingArray.forEach(price => {pricingString += price[1];}); pricingString += "

"; document.getElementById(`module-${i}-pricing`).innerHTML = `≈ $${totalPrice}`; pricingArray = []; grandTotalPrice += totalPrice; totalPrice = 0; } output.value = `(${output.value})`; if (mechTypeValidation !== "") {document.getElementById("mech-type-data-validation").value = "";} else {document.getElementById("mech-type-data-validation").value = "Validated";} if (tensionValidation !== "") {document.getElementById("tension-data-validation").value = "";} else {document.getElementById("tension-data-validation").value = "Validated";} if (stickClickValidation !== "") {document.getElementById("stick-click-data-validation").value = "";} else {document.getElementById("stick-click-data-validation").value = "Validated";} pricingString += `

--------------------

Grand Total ≈ $${grandTotalPrice} ***

*** Price does not include the cost of Replacement Thumbsticks or the cost of shipping. Price is subject to change. Payment will be due when the Service Center emails you your invoice after the Service Center has received your shipped module(s) and checked them into our system. Orders below $15 may have a processing fee applied.

*** We are only able to fulfil requests for total modules received. Any missing modules will not have requested repairs fulfilled.

`; pricing.innerHTML = pricingString; } function handleMech(mechType, tension, stickClick, toastContainer) { if (mechType.value === "" || mechType.value.includes("No Service Needed")) { tension.selectedIndex = 0; stickClick.selectedIndex = 0; tension.disabled = true; stickClick.disabled = true; } else { tension.disabled = false; } if (tension.value === "") { stickClick.selectedIndex = 0; stickClick.disabled = true; } else if (tension.value.includes("Increased") || tension.value.includes("Heavy")) { stickClick.selectedIndex = 0; stickClick.disabled = true; // Add toast or something to tell customer that Smart Click isn't available w/ Incr./Heavy showToast(toastContainer, 'Smart Stick Click is not available for Increased or Heavy Tension.', 'error'); } else { stickClick.disabled = false; } } function generateOptions(container, values) { // const container = document.currentScript.previousElementSibling; values.forEach(function(value) { const option = document.createElement("option"); option.value = value[0]; option.innerText = (value[1] ? value[1] : value[0]); option.selected = (value[2] ? true : false); if (value[0] === "line break") { console.log("test") option.innerText = "------------------------------"; option.disabled = true; } /// Change this to listen for domContentLoaded and manually edit the .dropdown-content li to add the

element container.appendChild(option); }); } function showToast(toastContainer, message, type = 'info') { if (!toastContainer) { console.error("Toast container not found."); return; } const toast = document.createElement('div'); toast.classList.add('toast'); toast.textContent = message; // Add type-specific classes for styling (e.g., 'success', 'error', 'warning') if (type === 'success') { toast.style.backgroundColor = '#4CAF50'; // Green } else if (type === 'error') { toast.style.backgroundColor = '#f44336'; // Red } else if (type === 'warning') { toast.style.backgroundColor = '#ff9800'; // Orange } toastContainer.appendChild(toast); // Remove the toast after a few seconds setTimeout(() => { toast.remove(); }, 6000); // 6 seconds } })

BUILD YOURS NOW

QUICK PICKS

PRE-BUILTS

CONTROLLER BUILDER

QUICK PICKS

PRE-BUILTS

BUILD YOURS NOW

QUICK PICKS

PRE-BUILTS

Magneto Mech Quick Picks