☰

TCG Player Sales Display Data

Remove obfuscation around TCG Player Sales Data

当前为 2024-11-15 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         TCG Player Sales Display Data
  3. // @namespace    https://www.tcgplayer.com/
  4. // @version      0.47
  5. // @description  Remove obfuscation around TCG Player Sales Data
  6. // @author       Peter Creutzberger
  7. // @match        https://www.tcgplayer.com/product/*
  8. // @icon         https://www.tcgplayer.com/favicon.ico
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.     writeDataRequestButton();
  15.  
  16.     const addCondition = () => ({
  17.         totalSpend: 0,
  18.         totalQtySold: 0,
  19.         totalOrders:0,
  20.         historicSalesData: {daysAgo:{}},
  21.         orderQtyOverFour: 0,
  22.         avgQtyPerOrder: function(totalQtySold,totalOrders ) {
  23.             return (totalQtySold / totalOrders) > 0 ? (totalQtySold / totalOrders).toFixed(2) : 0;
  24.         },
  25.         marketPriceByOrder: function(totalSpend, totalOrders) {
  26.             return (totalSpend / totalOrders).toFixed(2);
  27.         }
  28.     });
  29.  
  30.     const cleanPriceValue = (price) => +price.replace(/[^0-9.]/g,'');
  31.  
  32.     const strToInt = (str) => +str;
  33.  
  34.     const shapeSalesData = (salesData) => {
  35.         return salesData[0]?.children[0]?.className !== 'tcg-icon' ? {date: salesData[0].innerText, condition: mapCondition(salesData[1].innerText.split('\n')[1]), quantity: salesData[3].innerText, price: salesData[4].innerText} :
  36.             {date: salesData[0].innerText, condition: `${ mapCondition( salesData[1].innerText.split('\n')[1]) } with Photo`, quantity: salesData[3].innerText, price: salesData[4].innerText};
  37.     }
  38.  
  39.     const checkSaleDate = (salesArray, saleDate, price) => {
  40.         if (!salesArray.earliestSaleDateData || !salesArray.latestSaleDateData) { return {earliestSaleDateData: {date: saleDate, price: price}, latestSaleDateData: {date: saleDate, price: price}}; }
  41.         const dateFromSaleDate = new Date(saleDate).getTime();
  42.         const dateFromEarliestSaleDate = new Date(salesArray.earliestSaleDateData.date).getTime();
  43.         if (dateFromSaleDate < dateFromEarliestSaleDate || dateFromSaleDate === dateFromEarliestSaleDate) { return Object.assign(salesArray, {earliestSaleDateData: {date: saleDate, price: price}}); }
  44.         const dateFromLatestSaleDate = new Date(salesArray.latestSaleDateData.date).getTime();
  45.         if (dateFromSaleDate > dateFromLatestSaleDate || dateFromSaleDate === dateFromLatestSaleDate) { return Object.assign(salesArray, {latestSaleDateData: {date: saleDate, price: price}}); }
  46.     }
  47.  
  48.     const checkOrderQty = (salesArray, date, qty, price) => { if ( !salesArray.largestQtySold || salesArray.largestQtySold.qty < qty) { return {largestQtySold: {date: date, qty: qty, price: price}}; } }
  49.  
  50.     const historicDataSetting = (salesArray, saleDate, dateDiff, price, qty) => {
  51.         if (!salesArray.historicSalesData.daysAgo || !salesArray.historicSalesData.daysAgo[dateDiff]) { return {totalSpend: price, totalQtySold: qty, totalOrders: 1, saleDate: saleDate}; }
  52.         const historicSalesDataStatus = salesArray.historicSalesData.daysAgo[dateDiff];
  53.         return {totalSpend: historicSalesDataStatus.totalSpend += price, totalQtySold: historicSalesDataStatus.totalQtySold += qty, totalOrders: historicSalesDataStatus.totalOrders += 1, saleDate: saleDate};
  54.     }
  55.  
  56.     const updateSalesTotals = (salesArray, price, qty) => {
  57.         salesArray.totalSpend += (price * qty);
  58.         salesArray.totalQtySold += qty;
  59.         salesArray.totalOrders += 1;
  60.         salesArray.orderQtyOverFour += qty < 4 ? 0 : 1
  61.     }
  62.  
  63.     const gatherSalesData = () => {
  64.         const salesByCondition = {};
  65.         const historicDateArr = setHistoricDateArr(daysToLookBack());
  66.         Array.from(document.getElementsByClassName('latest-sales-table__tbody')[0].children).forEach( listOfSales => {
  67.             const reshapedSalesData = shapeSalesData( Array.from(listOfSales.getElementsByTagName('td')) );
  68.             const currentCondition = reshapedSalesData.condition;
  69.             if ( !Object.keys(salesByCondition).includes(currentCondition) ) { salesByCondition[currentCondition] = addCondition(); }
  70.             const cleanPrice = cleanPriceValue(reshapedSalesData.price);
  71.             Object.assign(salesByCondition[currentCondition],
  72.                 checkOrderQty(salesByCondition[currentCondition], reshapedSalesData.date, strToInt(reshapedSalesData.quantity), cleanPrice),
  73.                 checkSaleDate(salesByCondition[currentCondition], reshapedSalesData.date, cleanPrice)
  74.             );
  75.             updateSalesTotals(salesByCondition[currentCondition], cleanPrice, strToInt(reshapedSalesData.quantity));
  76.             const saleDateDiff = historicDateArr.includes(reshapedSalesData.date) ? getSaleDateDiff(todaysDate, reshapedSalesData.date) : -1;
  77.             if ( saleDateDiff > -1 ) {
  78.                 salesByCondition[currentCondition].historicSalesData.daysAgo[saleDateDiff] = historicDataSetting(salesByCondition[currentCondition], reshapedSalesData.date, saleDateDiff, cleanPrice, strToInt(reshapedSalesData.quantity));
  79.             }
  80.         })
  81.         return salesByCondition;
  82.     }
  83.  
  84.     const adjustSalesDataDivHeight = (div, timesToAdjustHeight) => (parseInt(div.style.height.replace(/[^0-9]/g,'')) + 115 * timesToAdjustHeight) + "px";
  85.  
  86.     const writeSalesDataContainer = () => {
  87.         const div = document.createElement('div');
  88.         const setBottom = document.getElementsByClassName("_hj_feedback_container")[0] ? 'bottom:100px' : 'bottom:0';
  89.         div.innerHTML = (`<div class="salesDataDisplay" style="position:fixed;${setBottom};left:0;z-index:8888;width:auto;height:0;min-height:300px;max-height:600px;overflow-y:scroll;padding:0 5px 0 0;border:1px solid #d00;background:#999;color:#fff;line-height:normal"></div>`);
  90.         document.body.prepend(div);
  91.     }
  92.  
  93.     const displaySalesData = (salesByCondition) => {
  94.         const div = document.getElementsByClassName('salesDataDisplay')[0];
  95.         const qtyInViewByCondition = getQtyInViewByCondition();
  96.         const totalQtyInView = getTotalQtyInView(qtyInViewByCondition);
  97.         div.innerHTML += `<strong>Total copies in view: </strong>${totalQtyInView}<br />\
  98.         <strong>Condition breakout:</strong><br />${buildQtyInViewDisplay(qtyInViewByCondition)}<br />`;
  99.         salesByCondition.forEach(cardConditionData => {
  100.             const cardDisplayData = buildSalesDataDisplay(cardConditionData[0], cardConditionData[1]);
  101.             div.innerHTML += cardDisplayData.cardDisplayData;
  102.             div.style.height = adjustSalesDataDivHeight(div, cardDisplayData.timesToAdjustHeight);
  103.         });
  104.     }
  105.  
  106.     const buildSalesDataDisplay = (cardCondition, cardConditionData) => {
  107.         let heightAdjustmentCount = 1;
  108.         let cardDisplayString = `<div class="displayContainer"><strong>${cardCondition}</strong><br />
  109.                 <span id="salesHeader" style="margin-left: 20px;"><strong>Overall Sales Data</strong></span><br />
  110.                 <span id="totalSold" style="margin-left: 40px;">Total Sold: ${cardConditionData.totalQtySold} - Total Orders: ${cardConditionData.totalOrders} - Total Spend: ${cardConditionData.totalSpend.toFixed(2)}</span><br />
  111.                 <span id="avgQtyPerOrder" style="margin-left: 40px;">Avg Qty Per Order: ${cardConditionData.avgQtyPerOrder(cardConditionData.totalQtySold, cardConditionData.totalOrders)}</span><br />
  112.                 <span id="orderQtyOverFour" style="margin-left: 40px;">Orders with Qty 4+... ${cardConditionData.orderQtyOverFour}</span><br />
  113.                 <span id="earliestSaleDate" style="margin-left: 40px;">Earliest Sale Date: ${cardConditionData.earliestSaleDateData.date} - Sale Price ${cardConditionData.earliestSaleDateData?.price}</span><br />
  114.                 <span id="latestSaleData" style="margin-left: 40px;">Latest Sale Date: ${cardConditionData.latestSaleDateData.date} - Sale Price: ${cardConditionData.latestSaleDateData?.price}</span><br />
  115.                 <span id="largestOrderInfo" style="margin-left: 40px;">Largest Order... Date: ${cardConditionData.largestQtySold.date} - Qty: ${cardConditionData.largestQtySold.qty} - Price Per: ${cardConditionData.largestQtySold.price}</span><br />`;
  116.         if ( Object.keys(cardConditionData.historicSalesData.daysAgo).length ) {
  117.             heightAdjustmentCount++;
  118.             cardDisplayString += `<br /><span id="historicSalesHeader" style="margin-left: 20px;"><strong>Historic Sales Data</strong></span><br />`;
  119.             const historicSalesData = cardConditionData.historicSalesData;
  120.             Object.keys(historicSalesData.daysAgo).forEach( daysAgo =>
  121.                 cardDisplayString += `<span id="${daysAgo}-daysAgoMarker" style="margin-left: 30px;"><strong>Days Ago: ${daysAgo} - ${historicSalesData.daysAgo[daysAgo].saleDate}</strong></span><br />
  122.                         <span id="${daysAgo}-dayAgo-TotalSold" style="margin-left: 40px;">Total Orders: ${historicSalesData.daysAgo[daysAgo].totalOrders} - Total Spend: ${historicSalesData.daysAgo[daysAgo].totalSpend.toFixed(2)} - Total Qty Sold: ${historicSalesData.daysAgo[daysAgo].totalQtySold}</span><br />
  123.                         <span id="${daysAgo}-dayAgo-AvgQtyPerOrder" style="margin-left: 40px;">Avg Qty Per Order: ${cardConditionData.avgQtyPerOrder(historicSalesData.daysAgo[daysAgo].totalQtySold, historicSalesData.daysAgo[daysAgo].totalOrders)}</span><br />
  124.                         <span id="${daysAgo}-dayAgo-MarketPrice" style="margin-left: 40px;">Market Price: ${cardConditionData.marketPriceByOrder( historicSalesData.daysAgo[daysAgo].totalSpend, historicSalesData.daysAgo[daysAgo].totalOrders ) }</span><br />`
  125.             );
  126.         };
  127.         cardDisplayString += `</div><br />`;
  128.         return {cardDisplayData: cardDisplayString, timesToAdjustHeight: heightAdjustmentCount};
  129.     }
  130.  
  131.     const decorateSalesHistoryHeader = (clickCount = 0) => {
  132.         const fontColor = '#fa7ad0';
  133.         const backgroundColor = '#7afaa4';
  134.         document.getElementsByClassName('modal__title')[0].children[0].innerHTML = `<div style="color:${fontColor};background:${backgroundColor}">GATHERING SALES DATA - Click Count: ${clickCount}</span>`;
  135.     }
  136.  
  137.     const toggleGatherDataButton = () => { document.getElementsByClassName('dataRequestButton')[0].disabled = !document.getElementsByClassName('dataRequestButton')[0].disabled; }
  138.  
  139.     async function loadSalesDataSplash() {
  140.         //open sales modal
  141.         document.getElementsByClassName("modal__activator")[0].click();
  142.         await loadMoreSalesData();
  143.         return gatherSalesData();
  144.     }
  145.  
  146.     const beginSalesDataDisplay = (salesByCondition) => {
  147.         //close sales modal
  148.         document.getElementsByClassName('modal__close')[0].click()
  149.         writeSalesDataContainer();
  150.         displaySalesData(Object.entries(salesByCondition).sort((conditionOne, conditionTwo) => conditionOne[1].totalQtySold - conditionTwo[1].totalQtySold ).reverse());
  151.     }
  152.  
  153.     async function loadMoreSalesData() {
  154.         const maxClicks = 50;
  155.         await sleep(500);
  156.         for (let clickCount = 0; clickCount < maxClicks; clickCount++) {
  157.             await sleep(500);
  158.             decorateSalesHistoryHeader(clickCount);
  159.             if ( document.getElementsByClassName("sales-history-snapshot__load-more")[0] ) { document.getElementsByClassName("sales-history-snapshot__load-more")[0].click(); }
  160.             else {clickCount = maxClicks; }
  161.         }
  162.     }
  163.  
  164.     const sleep = (milliseconds) => { return new Promise(resolve => setTimeout(resolve, milliseconds)); }
  165.  
  166.     const missingDomElements = ( elemsToCheck) => {
  167.         let missingElements = 0;
  168.         elemsToCheck.forEach( domElement => missingElements += domElement ? 0 : 1 );
  169.         return missingElements > elemsToCheck.length;
  170.     }
  171.  
  172.     window.startDataRequest = function() {
  173.         clearHtmlElements();
  174.         const priceGuide = document.getElementsByClassName("price-guide__more")[0]?.children[0];
  175.         const modalActivator = document.getElementsByClassName("modal__activator");
  176.         if ( missingDomElements( [priceGuide, modalActivator] ) ) { alert('TCGPlayer DOM Elements are out of alignment. This script must be updated to function properly.'); }
  177.         else {
  178.             toggleGatherDataButton();
  179.             loadSalesDataSplash()
  180.                 .then(result => beginSalesDataDisplay(result))
  181.                 .then(() => writeSalesToggle())
  182.                 .finally(() => toggleGatherDataButton())
  183.         }
  184.     }
  185.  
  186.     /********************
  187.      Pull in current quantity for sale in view
  188.      ********************/
  189.  
  190.     const setQtyInViewByCondition = (condition, qty, qtyInView) => {
  191.         const shorthandCondition = mapCondition(condition);
  192.         if (Object.keys(qtyInView).includes(shorthandCondition)) {
  193.             qtyInView[shorthandCondition].quantity += qty;
  194.             qtyInView[shorthandCondition].vendorCount += 1;
  195.             if( !qtyInView[shorthandCondition].largestQuantity || qtyInView[shorthandCondition].largestQuantity < qty) { qtyInView[shorthandCondition].largestQuantity = qty; }
  196.         }
  197.         else { qtyInView[shorthandCondition] = {quantity: qty, vendorCount: 1, largestQuantity: qty}; }
  198.     }
  199.  
  200.     const mapCondition = (condition) => {
  201.         const hasFoil = condition.includes('Foil') ? ' Foil' : '';
  202.         const conditionMap = {
  203.             'Near Mint': 'NM',
  204.             'Lightly Played': 'LP',
  205.             'Moderately Played': 'MP',
  206.             'Heavily Played': 'HP',
  207.             'Damaged': 'DMG',
  208.             'Unopened': 'Sealed'
  209.         };
  210.         return (conditionMap[condition.replace(' Foil', '')] || 'Unlisted') + hasFoil;
  211.     }
  212.  
  213.     const getTotalQtyInView = (qtyInView) => Object.keys(qtyInView).reduce( (prevVal, conditionKey) => prevVal + qtyInView[conditionKey].quantity, 0);
  214.  
  215.     const getQtyInViewByCondition = () => {
  216.         const qtyInView = {};
  217.         if( document.getElementsByClassName('listing-item product-details__listings-results').length ) {
  218.             Array.from(document.getElementsByClassName('listing-item product-details__listings-results')).forEach( listingItem => {
  219.                 const condition = listingItem.getElementsByClassName('listing-item__listing-data__info__condition')[0].innerText;
  220.                 const quantity = +listingItem.getElementsByClassName('add-to-cart__available')[0].innerText.split(' ')[1];
  221.                 setQtyInViewByCondition(condition, quantity, qtyInView );
  222.             });
  223.         } else {
  224.             Array.from(document.getElementsByClassName('listing-item__listing-data')).forEach( listingItem => {
  225.                 let condition = '';
  226.                 // desktop classing
  227.                 if ( listingItem.getElementsByClassName('listing-item__listing-data__info__condition').length ) {
  228.                     condition = listingItem.getElementsByClassName('listing-item__listing-data__info__condition')[0].innerText;
  229.                 }
  230.                 // mobile/small resolution classing
  231.                 if ( listingItem.getElementsByClassName('listing-item__listing-data__condition').length ) {
  232.                     condition = listingItem.getElementsByClassName('listing-item__listing-data__condition')[0].innerText;
  233.                 }
  234.                 const quantity = +listingItem.getElementsByClassName('add-to-cart__available')[0].innerText.split(' ')[1];
  235.                 setQtyInViewByCondition(condition, quantity, qtyInView );
  236.             });
  237.         }
  238.         return qtyInView;
  239.     }
  240.  
  241.     const buildQtyInViewDisplay = (qtyInView) => Object.entries(qtyInView).reduce( (prevQtyData, currQty) => prevQtyData.concat(`<span style="margin-left: 20px;">${currQty[0]}: ${currQty[1].quantity} - Vendor Count: ${currQty[1].vendorCount} - Largest Qty: ${currQty[1].largestQuantity}</span><br />`), '');
  242.  
  243.     /********************
  244.      HTML element interaction
  245.      ********************/
  246.  
  247.     const clearHtmlElements = () => {
  248.         ['salesDataDisplay', 'salesDataToggle'].forEach( selector => {
  249.             if ( document.getElementsByClassName(selector)[0] ) { document.getElementsByClassName(selector)[0].remove(); }
  250.         });
  251.     }
  252.  
  253.     window.toggleSalesData = function() {
  254.         const display = document.getElementsByClassName('salesDataDisplay')[0].style.display;
  255.         document.getElementsByClassName('salesDataDisplay')[0].style.display = display === 'none' ? 'inline' : 'none';
  256.     }
  257.  
  258.     /********************
  259.      Write interactive HTML elements
  260.      ********************/
  261.  
  262.     const writeSalesToggle = () => {
  263.         const div = document.createElement('div');
  264.         div.innerHTML = ('<button class="salesDataToggle" style="position:fixed;top:40px;left:0;z-index:9999;width:auto;height:20px;padding:0 5px 0 0;background:#0b0;color:#fff;font-weight:bold;" onclick="toggleSalesData()">Toggle Sales Data Display</button>');
  265.         document.body.prepend(div);
  266.     }
  267.  
  268.     function writeDaysToLookBackSpinner() {
  269.         const div = document.createElement('div');
  270.         div.style.cssText = 'position:fixed;top:0;left:0;z-index:9999;width:auto;height:20px;padding:0 5px 0 0;background:#a00;color:#fff;font-size:10pt;font-weight:bold;appearance:inherit;';
  271.         div.innerHTML = ('Days to Look Back <input type="number" class="daysToLookBack" id="daysToLookBack" min="0" max="7" step="1" value="2" style="height:20px;font-size:10pt!important"/>');
  272.         document.body.prepend(div);
  273.     }
  274.  
  275.     function writeDataRequestButton() {
  276.         writeDaysToLookBackSpinner();
  277.         const div = document.createElement('div');
  278.         div.innerHTML = ('<button class="dataRequestButton" style="position:fixed;top:20px;left:0;z-index:9999;width:auto;height:20px;padding:0 5px 0 0;background:#00b;color:#fff;font-weight:bold;" onclick="startDataRequest()">Gather Sales Data</button>');
  279.         document.body.prepend(div);
  280.     }
  281.  
  282.     /********************
  283.      Re-inventing the wheel of time because we are not importing the moment library.
  284.      ********************/
  285.  
  286.     const setHistoricDateArr = (daysToLookBack) => {
  287.         let historicDatesArr = [];
  288.         for (let dayCount = 0; dayCount <= daysToLookBack; dayCount++) {
  289.             historicDatesArr.push( formatDateToTCG( new Date(Date.now() - (daysInMilliseconds(dayCount) ))) );
  290.         }
  291.         return historicDatesArr;
  292.     }
  293.  
  294.     const formatDateToTCG = (date) => (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear().toString().slice(2);
  295.  
  296.     const parseStrDate = (stringDate) => {
  297.         const dateArr = stringDate.split('/');
  298.         return new Date(dateArr[2], dateArr[0] - 1, dateArr[1]);
  299.     }
  300.  
  301.     const getSaleDateDiff = (firstDate, secondDate) => Math.ceil((parseStrDate(firstDate) - parseStrDate(secondDate)) / daysInMilliseconds(1) );
  302.  
  303.     const daysInMilliseconds = (days = 1) => 1000 * 60 * 60 * (24 * days);
  304.  
  305.     const daysToLookBack = () => +document.getElementsByClassName('daysToLookBack')[0].value >= 0 ? +document.getElementsByClassName('daysToLookBack')[0].value : 2;
  306.  
  307.     const todaysDate = formatDateToTCG(new Date());
  308. })();