gonza7aav · July 14, 2024 06:01
diff --git a/SteamCardExchangeEnhancer.user.js b/SteamCardExchangeEnhancer.user.js
 // ==UserScript==
 // @name         Steam Card Exchange Enhancer
 // @description  This will add the column 'Price per Badge' to Inventory Watchlist in Steam Card Exchange
 // @version      2.0.5
 // @author       gonza7aav
 // @match        https://www.steamcardexchange.net/index.php?userlist
 // @grant        none
 // @run-at       context-menu
 // @icon         https://www.steamcardexchange.net/include/design/img/favicon_blue_small.png
 // ==/UserScript==

 (function () {
  'use strict';

  const table = document.querySelector('#private_watchlist');

  addNewColumn(table);
  fillNewColumn(table);

  // refills when any switch state is changed
  [...document.querySelectorAll('[type=checkbox]')].forEach((x) => {
    x.addEventListener('change', () => fillNewColumn(table));
  });

  // refills when the table length is changed
  document
    .querySelector('[name=private_watchlist_length]')
    .addEventListener('change', () => fillNewColumn(table));

  // refills when search something
  document
    .querySelector('[type=search]')
    .addEventListener('input', () => fillNewColumn(table));

  // refills when the page is changed
  document
    .querySelector('#private_watchlist_paginate')
    .addEventListener('click', (event) => {
      if (event.target.className?.includes('paginate_button')) fillNewColumn(table);
    });
 })();

 function addNewColumn (table) {
  const tableHeader = table.children[0];

  // adds a new column header
  const newColumnHeader = document.createElement('th');
  newColumnHeader.innerHTML = 'Price per Badge';
  newColumnHeader.id = 'price_per_badge_header';
  newColumnHeader.className = 'w-36 sorting';
  tableHeader.children[0].appendChild(newColumnHeader);

  // fixes style of name column
  // tableHeader.children[0].children[0].style = 'width: 45%';

  const otherColumnHeaders = [
    ...document.querySelectorAll('.sorting'),
    ...document.querySelectorAll('.sorting_asc'),
    ...document.querySelectorAll('.sorting_desc'),
  ].filter((x) => x.id != 'price_per_badge_header');

  // adds behavior to a click in the new header
  newColumnHeader.addEventListener('click', () => {
    // changes style and sorts
    const order = newColumnHeader.className.includes('sorting_asc') ? 'desc' : 'asc';
    newColumnHeader.className = newColumnHeader.className.replace(/sorting_?(asc|desc)?/, `sorting_${order}`);
    sortNewColumn(table, order);

    // changes style in the others headers
    otherColumnHeaders.forEach((x) => {
      x.className = x.className.replace(/sorting_(asc|desc)?/, 'sorting');
    });
  });

  // sorting others columns will make changes in the new column
  otherColumnHeaders.forEach((x) => {
    x.addEventListener('click', () => {
      // style
      newColumnHeader.className = newColumnHeader.className.replace(/sorting_(asc|desc)?/, 'sorting');

      // content
      fillNewColumn(table);
    });
  });
 };

 // function to sort the body of the table
 function sortNewColumn (table, order) {
  const tableBody = table.children[1];

  const rows = [...tableBody.rows];

  while (tableBody.length > 0) {
    tableBody.deleteRow(0);
  }

  rows.sort((a, b) => {
    if (order == 'asc') {
      return (
        Number.parseInt(a.children[5].innerText) -
        Number.parseInt(b.children[5].innerText)
      );
    } else {
      return (
        Number.parseInt(b.children[5].innerText) -
        Number.parseInt(a.children[5].innerText)
      );
    }
  });

  for (let i = 0; i < rows.length; i++) {
    // i + 1 because the array start at 0
    if ((i + 1) % 2 == 0) {
      rows[i].className = 'even';
    } else {
      rows[i].className = 'odd';
    }

    tableBody.appendChild(rows[i]);
  }
 };

 function fillNewColumn (table) {
  const tableBody = table.children[1];

  // empties the content of the column
  [...document.querySelectorAll('#price_per_badge_cell')].forEach((x) => x.remove());

  // adds body entries to Price per Badge column
  for (const row of tableBody.rows) {
    // gets cards info
    const cardPrice = Number.parseInt(row.cells[1].innerText);
    const cardsPerBadge = Number.parseInt(row.cells[3].innerText);
    const pricePerBadge = cardPrice * cardsPerBadge;

    // creates a cell and append it
    const newCell = document.createElement('td');
    newCell.innerText = pricePerBadge;
    newCell.id = 'price_per_badge_cell';
    row.appendChild(newCell);
  }
 };
	// ==UserScript==
	// @name Steam Card Exchange Enhancer
	// @description This will add the column 'Price per Badge' to Inventory Watchlist in Steam Card Exchange
	// @version 2.0.5
	// @author gonza7aav
	// @match https://www.steamcardexchange.net/index.php?userlist
	// @grant none
	// @run-at context-menu
	// @icon https://www.steamcardexchange.net/include/design/img/favicon_blue_small.png
	// ==/UserScript==

	(function () {
	'use strict';

	const table = document.querySelector('#private_watchlist');

	addNewColumn(table);
	fillNewColumn(table);

	// refills when any switch state is changed
	[...document.querySelectorAll('[type=checkbox]')].forEach((x) => {
	x.addEventListener('change', () => fillNewColumn(table));
	});

	// refills when the table length is changed
	document
	.querySelector('[name=private_watchlist_length]')
	.addEventListener('change', () => fillNewColumn(table));

	// refills when search something
	document
	.querySelector('[type=search]')
	.addEventListener('input', () => fillNewColumn(table));

	// refills when the page is changed
	document
	.querySelector('#private_watchlist_paginate')
	.addEventListener('click', (event) => {
	if (event.target.className?.includes('paginate_button')) fillNewColumn(table);
	});
	})();

	function addNewColumn (table) {
	const tableHeader = table.children[0];

	// adds a new column header
	const newColumnHeader = document.createElement('th');
	newColumnHeader.innerHTML = 'Price per Badge';
	newColumnHeader.id = 'price_per_badge_header';
	newColumnHeader.className = 'w-36 sorting';
	tableHeader.children[0].appendChild(newColumnHeader);

	// fixes style of name column
	// tableHeader.children[0].children[0].style = 'width: 45%';

	const otherColumnHeaders = [
	...document.querySelectorAll('.sorting'),
	...document.querySelectorAll('.sorting_asc'),
	...document.querySelectorAll('.sorting_desc'),
	].filter((x) => x.id != 'price_per_badge_header');

	// adds behavior to a click in the new header
	newColumnHeader.addEventListener('click', () => {
	// changes style and sorts
	const order = newColumnHeader.className.includes('sorting_asc') ? 'desc' : 'asc';
	newColumnHeader.className = newColumnHeader.className.replace(/sorting_?(asc\|desc)?/, `sorting_${order}`);
	sortNewColumn(table, order);

	// changes style in the others headers
	otherColumnHeaders.forEach((x) => {
	x.className = x.className.replace(/sorting_(asc\|desc)?/, 'sorting');
	});
	});

	// sorting others columns will make changes in the new column
	otherColumnHeaders.forEach((x) => {
	x.addEventListener('click', () => {
	// style
	newColumnHeader.className = newColumnHeader.className.replace(/sorting_(asc\|desc)?/, 'sorting');

	// content
	fillNewColumn(table);
	});
	});
	};

	// function to sort the body of the table
	function sortNewColumn (table, order) {
	const tableBody = table.children[1];

	const rows = [...tableBody.rows];

	while (tableBody.length > 0) {
	tableBody.deleteRow(0);
	}

	rows.sort((a, b) => {
	if (order == 'asc') {
	return (
	Number.parseInt(a.children[5].innerText) -
	Number.parseInt(b.children[5].innerText)
	);
	} else {
	return (
	Number.parseInt(b.children[5].innerText) -
	Number.parseInt(a.children[5].innerText)
	);
	}
	});

	for (let i = 0; i < rows.length; i++) {
	// i + 1 because the array start at 0
	if ((i + 1) % 2 == 0) {
	rows[i].className = 'even';
	} else {
	rows[i].className = 'odd';
	}

	tableBody.appendChild(rows[i]);
	}
	};

	function fillNewColumn (table) {
	const tableBody = table.children[1];

	// empties the content of the column
	[...document.querySelectorAll('#price_per_badge_cell')].forEach((x) => x.remove());

	// adds body entries to Price per Badge column
	for (const row of tableBody.rows) {
	// gets cards info
	const cardPrice = Number.parseInt(row.cells[1].innerText);
	const cardsPerBadge = Number.parseInt(row.cells[3].innerText);
	const pricePerBadge = cardPrice * cardsPerBadge;

	// creates a cell and append it
	const newCell = document.createElement('td');
	newCell.innerText = pricePerBadge;
	newCell.id = 'price_per_badge_cell';
	row.appendChild(newCell);
	}
	};