☰

Path Of Exile Trade Aggregator

Aggregates the number of listings per account name and displays a whisper button for each account name in the Path Of Exile trade site.

// ==UserScript==
// @name        Path Of Exile Trade Aggregator
// @namespace   Violentmonkey Scripts
// @match       https://www.pathofexile.com/trade*
// @grant       none
// @version     1.0.2.1
// @author      CerikNguyen
// @license MIT
// @description Aggregates the number of listings per account name and displays a whisper button for each account name in the Path Of Exile trade site.
// ==/UserScript==

// ------------------------------------------------- helper functions -------------------------------------------------

// helper function to add an element to the DOM
function addElement(parent, elm) {
    const tmp = parent.querySelector(`#${elm.id}`);
    if (tmp) {
        tmp.remove();
    }
    parent.appendChild(elm);
}

function resetCountByListing(accountName, listingKey) {
    delete accountData[accountName][listingKey];
}

function resetCount(accountName) {
    delete accountData[accountName];
}

function resetAllCounts() {
    for (const accountName in accountData) {
        resetCount(accountName);
    }
    listings.clear();
}

function extractResultsDiv() {
    const results = document.body.querySelectorAll('.resultset');
    if (results.length === 0) {
        return null;
    }

    // Collect arrays of child nodes
    const childNodesArrays = Array.from(results).map(result => Array.from(result.childNodes));

    // Flatten the array of arrays into a single array
    const flattened = childNodesArrays.flat();

    return flattened;
}

function extractResults() {
    const res = extractResultsDiv();
    if (!res) {
        return [];
    }
    return res;
}

// Object to hold the counts and whisper button links of each account name
const accountData = {};

// Set to hold listing keys to avoid duplicates
const listings = new Set();

// Extract the logged-in user's account name, preventing aggregated search of own listings
const loggedInUserElement = document.querySelector('.loggedInStatus .profile-link a');
const loggedInUsername = loggedInUserElement ? loggedInUserElement.textContent : null;

// ------------------------------------------------- element initialization ------------------------------------------------
// styling css
const style = document.createElement('style');
style.id = 'aggregator-style';

style.innerHTML = `

#aggregator {
    position: fixed;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 5px;
    z-index: 1000;
    transition: right 0.2s ease 0s;
}

#showAggregator {
    position: fixed;
    top: 50px;
    right: 0;
    z-index: 1001;
    transition: right 0.2s ease 0s;
}

/*
compatibility with Better Trading
*/

.bt-body > #aggregator,
.bt-body > #showAggregator {
    right: 400px; /* Adjust based on the width of the other extension */
    top: 100px;
}

.bt-is-collapsed > #aggregator,
.bt-is-collapsed > #showAggregator {
    right: 0; /* Move it back when the other extension is collapsed */
    top: 100px;
}

#results-table {
    border-spacing: 0 0.4em;
    border-collapse: separate;
}

.actions-cell {
    display: flex;
    justify-content: center;
    padding-left: 5px;
    padding-right: 5px;
}

.text-cell {
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

.action-button{
    margin-left: 2px;
    margin-right: 2px;
}

.thead-cell{
    padding: 5px;
}

tbody tr:nth-child(even) {
    background-color: rgba(50, 50, 50, 0.7);
}

#hide-about {
    margin: 5px;
}

.aboutDiv {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 1);
    padding: 5px;
    z-index: 1000;
    display: none;
}

.hidden {
    display: none;
}

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

`;

addElement(document.head, style);

//initializing  the main injecting div
const aggregator = document.createElement('div');
aggregator.id = 'aggregator';
aggregator.classList.add('aggregator', 'results', 'bt-body');

const aggregatorInnerHTML = `
    <button id="hide" class="btn btn-default">Hide</button>
    <button id="clear-all" class="btn btn-default">Clear All</button>
    <button id="refresh" class="btn btn-default">Refresh</button>
    <button id="about" class="btn btn-default">About</button>
    <div class="table-responsive" style="margin: 5px">
        <table id="results-table" class="table">
            <thead>
                <tr>
                    <th class="thead-cell">Account Name</th>
                    <th class="thead-cell">Amount Listed</th>
                    <th class="thead-cell">Count</th>
                    <th class="thead-cell">Total</th>
                    <th class="thead-cell">Actions</th>
                </tr>
            </thead>
            <tbody id="results-list">
            </tbody>
        </table>
    </div>
`;

addElement(document.body, aggregator);

const aboutDiv = document.createElement('div');
aboutDiv.id = 'aboutDiv';
aboutDiv.classList.add('aboutDiv');
aboutDiv.innerHTML = `

    <button id="hide-about" class="btn btn-default">Close</button>
    <h3> Path Of Exile Trade Aggregator </h3>
    <br/>
    <span> This extension aggregates the all listings under the same account name and displays a whisper button for each account name in the Path Of Exile trade site. </span>
    <br/>
    <br/>
    <span> Changelog: </span>
    <br/>
    <ul>
        <li> Minor UI tweaks </li>
        <li> "Whisper" now becomes "Whispered" after clicking </li>
        <li> Alternate row color for better readability </li>
        <li> Added an about section </li>
        <li> Added a Kofi link for donation. Thank you for your support! </li>
    </ul>
    <br/>
    <a href='https://ko-fi.com/H2H4WPVOX' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi2.png?v=3' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>

`;

aboutDiv.querySelector('#hide-about').addEventListener('click', () => {
    aboutDiv.style.display = 'none';
});

const showButton = document.createElement('button');
showButton.id = 'showAggregator';
showButton.classList.add('btn', 'btn-default');
showButton.textContent = 'Show Aggregator';

showButton.addEventListener('click', () => {
    aggregator.classList.remove('hidden');
    showButton.classList.add('hidden');
    localStorage.setItem('aggregatorState', 'open'); // Update localStorage
});

addElement(document.body, showButton);

function initAggregator() {
    aggregator.innerHTML = aggregatorInnerHTML;

    addElement(aggregator, aboutDiv);

    aggregator.querySelector('#about').addEventListener('click', () => {
        aboutDiv.style.display = 'block';
    });

    // Check localStorage for the aggregator's state
    const aggregatorState = localStorage.getItem('aggregatorState');

    if (aggregatorState === 'closed') {
        aggregator.classList.add('hidden');
        showButton.classList.remove('hidden');
    } else {
        // By default or if the state is 'open', the aggregator is visible
        aggregator.classList.remove('hidden');
        showButton.classList.add('hidden');
    }

    document.getElementById('hide').addEventListener('click', () => {
        aggregator.classList.add('hidden');
        showButton.classList.remove('hidden');
        localStorage.setItem('aggregatorState', 'closed');
    });

    document.getElementById('clear-all').addEventListener('click', () => {
        resetAllCounts();
        updateAggregator();
    });

    document.getElementById('refresh').addEventListener('click', () => {
        // Reset the counts and reprocess the nodes to get the latest counts
        resetAllCounts();
        const results = extractResults();
        // console.log(results);
        processNodes(results);
        updateAggregator();
    });

    // Initial check in case the page has already loaded
    processNodes(extractResults());
    updateAggregator();
}

// Function to update the floating div with the latest counts and whisper buttons
function updateAggregator() {
    const resultsList = document.getElementById('results-list');

    if (!resultsList) {
        initAggregator();
        return;
    }

    resultsList.innerHTML = ''; // Clear previous results

    // Calculate total listings per account
    const accountsTotalListings = Object.entries(accountData).map(([account, listings]) => {
        const totalListings = Object.values(listings).reduce((sum, { count }) => sum + count, 0);
        return { account, totalListings, listings };
    });

    // Sort accounts by total listings and keep only the top 10
    const topAccounts = accountsTotalListings.sort((a, b) => b.totalListings - a.totalListings).slice(0, 10);


    // Iterate and display sorted accounts
    topAccounts.forEach(({ account, listings }) => {
        Object.entries(listings).forEach(([listingKey, data]) => {
            const row = document.createElement('tr');

            const accountCell = document.createElement('td');
            accountCell.classList.add('text-cell');
            accountCell.textContent = account;

            const amountListedCell = document.createElement('td');
            amountListedCell.classList.add('text-cell');
            amountListedCell.textContent = listingKey;

            const countCell = document.createElement('td');
            countCell.classList.add('text-cell');
            countCell.textContent = data.count;

            const totalCell = document.createElement('td');
            totalCell.classList.add('text-cell');
            listingPrice = Number.parseFloat(listingKey.split(" ")[0]);
            //get currency as the rest of the string
            listingCurrency = listingKey.split(" ").slice(1).join(" ");
            totalCell.textContent = `${listingPrice * data.count} ${listingCurrency}`;


            const actionsCell = document.createElement('td');
            actionsCell.classList.add('actions-cell');

            const whisperButton = document.createElement('button');
            whisperButton.classList.add('btn', 'btn-xs', 'btn-default', 'action-button');
            whisperButton.textContent = 'Whisper';
            whisperButton.addEventListener('click', () => {
                row.classList.add('whispered');
                whisperButton.textContent = 'Whispered';
                data.whisperButton.click();
            });

            const resetButton = document.createElement('button');
            resetButton.classList.add('btn', 'btn-xs', 'btn-default', 'action-button');
            resetButton.textContent = 'Clear';
            resetButton.addEventListener('click', () => {
                delete accountData[account][listingKey];
                updateAggregator();
            });
            actionsCell.appendChild(whisperButton);
            actionsCell.appendChild(resetButton);

            row.appendChild(accountCell);
            row.appendChild(amountListedCell);
            row.appendChild(countCell);
            row.appendChild(totalCell);
            row.appendChild(actionsCell);

            resultsList.appendChild(row);
        });
    });
}

// Flag to check if the aggregator has been updated
var updated = false;

// Function to process added nodes
function processNodes(addedNodes) {
    addedNodes.forEach(node => {
        if (node.parentElement && !node.parentElement.classList.contains('resultset')) return;

        if (listings.has(node)) {
            return; // Skip nodes that have already been processed
        }

        listings.add(node);

        const profileLink = node.querySelector ? node.querySelector('span.profile-link a') : null;
        const whisperButton = node.querySelector ? node.querySelector('button.direct-btn') : null;
        const priceField = node.querySelector ? node.querySelector('div.price span[data-field="price"]') : null;
        if (!priceField) return;
        const priceSpan = priceField.querySelector ? priceField.childNodes[3] : null;
        const currencySpan = priceField.querySelector ? priceField.childNodes[5] : null;
        const errorSpan = node.querySelector ? node.querySelector('span.error') : null;

        if (errorSpan) {
            return;
        }

        if (profileLink && whisperButton && priceSpan && currencySpan) {
            const accountName = profileLink.textContent.trim();
            if (accountName === loggedInUsername) return;

            const quantity = priceSpan.textContent.trim();
            const currencyType = currencySpan.textContent.trim();
            const listingKey = `${quantity} ${currencyType}`;

            if (!accountData[accountName]) {
                accountData[accountName] = {};
            }

            if (!accountData[accountName][listingKey]) {
                // console.log("Adding new listing for " + accountName + " " + listingKey);
                accountData[accountName][listingKey] = { count: 1, whisperButton: whisperButton };
            } else {
                // console.log("Incrementing count for " + accountName + " " + listingKey);
                accountData[accountName][listingKey].count += 1;
            }

            updated = true;
        }

    });
}

// observer to watch for changes in the DOM
const observer = new MutationObserver(mutations => {
    updated = false;
    mutations.forEach(mutation => {
        processNodes(mutation.addedNodes);
    });
    if (updated) {
        updateAggregator();
    }
});

// Configuration of the observer:
const config = { childList: true, subtree: true };

// Start observing the body for changes
observer.observe(document.body, config);

initAggregator();