TCG Player Sales Display Data

Remove obfuscation around TCG Player Sales Data

当前为 2024-10-13 提交的版本,查看 最新版本

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