☰

Neopets Auction Safely

When you go to start an auction, there will be a popup to double-check values.

// ==UserScript==
// @name         Neopets Auction Safely
// @description  When you go to start an auction, there will be a popup to double-check values.
// @version      2025.02.02
// @license      GNU GPLv3
// @match        https://www.neopets.com/inventory.phtml
// @author       Posterboy
// @icon         https://images.neopets.com/new_shopkeepers/t_1900.gif
// @namespace    https://youtube.com/@Neo_Posterboy
// @run-at       document-end
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // ==============================
    // Styling
    // ==============================
    const style = document.createElement('style');
    style.textContent = `
        .customConfirmDialog {
            max-width: 440px;
            border-radius: 15px;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            z-index: 1000;
            display: none;
        }
        .customConfirmDialog .popup-header__2020 {
            background-color: #E6E4DD;
            border-bottom: 1px solid #949494;
            padding: 10px;
            position: relative;
        }
        .customConfirmDialog .popup-body__2020 {
            padding: 10px;
        }
        .customConfirmDialog .popup-footer__2020 {
            display: flex;
            justify-content: center;
            padding: 10px;
        }
        .customConfirmDialog .button-default__2020 {
            padding: 2px 5px 7px 5px !important;
            border-radius: 12px;
            min-height: 25px;
            cursor: pointer;
            border: none;
            color: #fff;
        }
        .customConfirmDialog .button-yellow__2020 {
            background-color: #ffcc00;
            margin-right: 10px;
        }
        .customConfirmDialog .button-red__2020 {
            background-color: #ff6666;
        }
        .customConfirmDialog .inv-popup-exit {
            position: absolute;
            right: 10px;
            top: 10px;
            cursor: pointer;
        }
        .customButton {
            background-color: #ffcc00;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        .customButton:hover {
            background-color: #e6b800;
        }
    `;
    document.head.appendChild(style);

    // Create the HTML for the custom dialog
    const dialogHtml = `
    <div id="customConfirmDialog" class="customConfirmDialog">
        <div class="popup-header__2020">
            <h3>Confirm Auction</h3>
            <div class="inv-popup-exit button-default__2020 button-red__2020" id="dialogClose">
                <div class="button-x__2020"></div>
            </div>
        </div>
        <div class="popup-body__2020">
            <p id="customDialogMessage"></p>
        </div>
        <div class="popup-footer__2020">
            <button id="customDialogConfirm" class="button-default__2020 button-yellow__2020">Yes</button>
            <button id="customDialogCancel" class="button-default__2020 button-red__2020">No</button>
        </div>
    </div>
    `;
    document.body.insertAdjacentHTML('beforeend', dialogHtml);

    // ==============================
    // Functions
    // ==============================

    // Function to format numbers with commas
    function formatNumberWithCommas(number) {
        return number.toLocaleString();
    }

    // Function to show the custom confirmation dialog
    function showCustomDialog(message, callback) {
        const dialog = document.getElementById('customConfirmDialog');
        const messageElem = document.getElementById('customDialogMessage');
        const confirmButton = document.getElementById('customDialogConfirm');
        const cancelButton = document.getElementById('customDialogCancel');
        const closeButton = document.getElementById('dialogClose');

        console.log('Showing confirmation dialog with message:', message);

        messageElem.textContent = message;
        dialog.style.display = 'block';

        confirmButton.onclick = function() {
            dialog.style.display = 'none';
            callback(true);
        };

        cancelButton.onclick = function() {
            dialog.style.display = 'none';
            callback(false);
        };

        closeButton.onclick = function() {
            dialog.style.display = 'none';
            callback(false);
        };

        window.onclick = function(event) {
            if (event.target === dialog) {
                dialog.style.display = 'none';
                callback(false);
            }
        };
    }

    // Function to replace the submit button
    function replaceButton() {
        // Find the button with the exact onclick attribute
        const existingButton = Array.from(document.querySelectorAll('.button-default__2020.button-yellow__2020.btn-single__2020'))
        .find(button => button.getAttribute('onclick') === 'auctionItem()');

        if (existingButton) {
            console.log('Existing button found:', existingButton);

            // Replace the existing button with the custom button
            existingButton.innerHTML = 'Proceed to Confirmation';
            existingButton.className = 'customButton';
            existingButton.onclick = function(event) {
                event.preventDefault(); // Prevent the default action

                // Retrieve values from input fields
                const startPriceElem = document.querySelector('input[name="start_price"]');
                const minIncrementElem = document.querySelector('input[name="min_increment"]');

                // Remove commas before parsing the values as floats
                let startPrice = parseFloat(startPriceElem ? startPriceElem.value.replace(/,/g, '') : 0);
                let minIncrement = parseFloat(minIncrementElem ? minIncrementElem.value.replace(/,/g, '') : 0);

                // Calculate total and format with commas
                let total = startPrice + minIncrement;
                let formattedTotal = formatNumberWithCommas(total);

                console.log('Start Price:', startPrice, 'Min Increment:', minIncrement);
                console.log('Total:', formattedTotal);

                // Show confirmation dialog with formatted total
                showCustomDialog(`Are you sure you wish to auction this item starting at ${formattedTotal} Neopoints?`, function(confirmed) {
                    if (confirmed) {
                        // Call the original auctionItem function
                        if (typeof auctionItem === 'function') {
                            auctionItem();
                        } else {
                            console.error('auctionItem function not found.');
                        }
                    } else {
                        console.log('User canceled auction.');
                    }
                });
            };
        } else {
            console.error('Specific auction button not found.');
        }
    }

    // Use MutationObserver to handle dynamic content
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList') {
                replaceButton();
            }
        });
    });

    // Start observing the body for changes
    observer.observe(document.body, { childList: true, subtree: true });

    // Initial attempt to replace the button
    replaceButton();

})();