Filter auctions by star rating and sort by time remaining on Zed Champions
// ==UserScript==
// @name Zed Champions Auction Filter and Sort
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Filter auctions by star rating and sort by time remaining on Zed Champions
// @author You
// @match https://app.zedchampions.com/auctions
// @icon https://www.google.com/s2/favicons?sz=64&domain=zedchampions.com
// @license MIT
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Configuration
const REFRESH_INTERVAL = 1000; // Check for new auctions every 1 second
const DEBOUNCE_TIME = 300; // Debounce time in ms for handling multiple rapid changes
const STATUS_HIDE_DELAY = 2000; // Hide status message after 2 seconds of no changes
const STYLE = `
.zed-filter-container {
position: sticky;
top: 0;
background-color: #1A202C;
padding: 12px 20px;
z-index: 1000;
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
border-bottom: 1px solid #2D3748;
align-items: center;
}
.zed-filter-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
flex: 1;
align-items: center;
}
.zed-filter-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.zed-filter-group label {
font-weight: bold;
color: white;
font-size: 13px;
white-space: nowrap;
}
.zed-filter-buttons {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.zed-filter-btn {
background-color: #2D3748;
color: white;
border: none;
padding: 6px 10px;
border-radius: 4px;
cursor: pointer;
min-width: 40px;
text-align: center;
font-size: 13px;
transition: background-color 0.2s;
}
.zed-filter-btn.active {
background-color: #4299E1;
}
.zed-bloodline-btn {
min-width: 90px;
}
.zed-controls-group {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
margin-left: auto;
}
.zed-controls-group button {
margin: 0;
}
.zed-sort-btn {
background-color: #2D3748;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
font-size: 13px;
white-space: nowrap;
}
.zed-sort-btn.active {
background-color: #4299E1;
}
.zed-reset-btn {
background-color: #E53E3E;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
font-size: 13px;
white-space: nowrap;
}
.zed-card-hidden {
display: none !important;
}
.zed-status-box {
background-color: rgba(74, 85, 104, 0.9);
color: white;
padding: 8px 15px;
border-radius: 4px;
font-size: 13px;
font-weight: bold;
display: none;
align-self: flex-start;
min-width: 160px;
text-align: center;
animation: fadeIn 0.3s ease;
}
.zed-status-container {
display: flex;
align-items: center;
margin-left: auto;
margin-right: 20px;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
`;
// State
let activeStarFilters = [];
let activeBloodlineFilters = [];
let sortByTimeAsc = false;
let isProcessing = false;
let debounceTimer = null;
let processQueue = 0;
let lastTotalAuctions = 0;
let statusHideTimer = null;
let statusElement = null;
let isScanning = false;
// Add a debounce function to prevent excessive processing
function debounce(func, wait) {
return function() {
const context = this;
const args = arguments;
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
func.apply(context, args);
}, wait);
};
}
// Core processing logic
function processAuctionsCore() {
// Store all cards before we make any changes
const auctionCards = document.querySelectorAll('.css-4k37cb, [class*="auction-card"]');
const totalAuctions = auctionCards.length;
// Check if total auctions has changed
if (totalAuctions !== lastTotalAuctions) {
// Show scanning message only when total count changes
showScanningMessage(totalAuctions);
lastTotalAuctions = totalAuctions;
isScanning = true;
}
// Store original positions if not already stored
auctionCards.forEach((card, index) => {
if (!card.dataset.originalIndex) {
card.dataset.originalIndex = index;
}
});
// Apply filters
auctionCards.forEach(card => {
const starRating = getStarRating(card);
const bloodline = getBloodline(card);
// Check if filters are active
const hasStarFilters = activeStarFilters.length > 0;
const hasBloodlineFilters = activeBloodlineFilters.length > 0;
// Star rating filter check
const matchesStarFilter = !hasStarFilters || activeStarFilters.includes(starRating.toString());
// Bloodline filter check
const matchesBloodlineFilter = !hasBloodlineFilters || (bloodline && activeBloodlineFilters.includes(bloodline));
// Apply combined filters (AND logic)
card.classList.toggle('zed-card-hidden', !(matchesStarFilter && matchesBloodlineFilter));
});
// Apply sorting if enabled
if (sortByTimeAsc) {
sortCardsByTimeRemaining();
}
// Count visible auctions
const visibleAuctions = document.querySelectorAll('.css-4k37cb:not(.zed-card-hidden), [class*="auction-card"]:not(.zed-card-hidden)').length;
// Update status message with count
updateStatusMessage(`${visibleAuctions} out of ${totalAuctions} auctions`);
// Reset the hide timer since we've updated the message
resetStatusHideTimer();
}
// Show scanning message
function showScanningMessage(totalAuctions) {
if (!statusElement) {
return;
}
statusElement.textContent = `Scanning ${totalAuctions} auctions...`;
statusElement.style.display = 'block';
}
// Show status message
function showStatusMessage(message) {
if (!statusElement) {
return;
}
statusElement.textContent = message;
statusElement.style.display = 'block';
}
// Update status message
function updateStatusMessage(message) {
if (!statusElement) {
return;
}
statusElement.textContent = message;
statusElement.style.display = 'block';
}
// Reset the timer that hides the status message
function resetStatusHideTimer() {
if (statusHideTimer) {
clearTimeout(statusHideTimer);
}
// Only hide the scanning message after delay
// Keep the auction count visible
statusHideTimer = setTimeout(() => {
if (statusElement && isScanning) {
isScanning = false;
// Get current counts to display after scanning
const totalAuctions = document.querySelectorAll('.css-4k37cb, [class*="auction-card"]').length;
const visibleAuctions = document.querySelectorAll('.css-4k37cb:not(.zed-card-hidden), [class*="auction-card"]:not(.zed-card-hidden)').length;
// Update the message
updateStatusMessage(`${visibleAuctions} out of ${totalAuctions} auctions`);
}
}, STATUS_HIDE_DELAY);
}
// Enhanced process auctions function with debounce
const debouncedProcessAuctions = debounce(() => {
// If we're already processing, increment the queue
if (isProcessing) {
processQueue++;
return;
}
isProcessing = true;
try {
// Actual processing logic
processAuctionsCore();
} finally {
isProcessing = false;
// If we have queued processing requests, process again
if (processQueue > 0) {
processQueue = 0;
setTimeout(debouncedProcessAuctions, 50);
}
}
}, DEBOUNCE_TIME);
// Toggle bloodline filter
function toggleBloodlineFilter(event) {
const bloodlineValue = event.target.dataset.bloodline;
if (activeBloodlineFilters.includes(bloodlineValue)) {
// Remove filter
activeBloodlineFilters = activeBloodlineFilters.filter(b => b !== bloodlineValue);
event.target.classList.remove('active');
} else {
// Add filter
activeBloodlineFilters.push(bloodlineValue);
event.target.classList.add('active');
}
debouncedProcessAuctions();
}
// Toggle star rating filter
function toggleStarFilter(event) {
const starValue = event.target.dataset.stars;
if (activeStarFilters.includes(starValue)) {
// Remove filter
activeStarFilters = activeStarFilters.filter(s => s !== starValue);
event.target.classList.remove('active');
} else {
// Add filter
activeStarFilters.push(starValue);
event.target.classList.add('active');
}
debouncedProcessAuctions();
}
// Toggle time sort
function toggleTimeSort(event) {
sortByTimeAsc = !sortByTimeAsc;
// Update button text
event.target.textContent = sortByTimeAsc ? 'Sort by Time ↓' : 'Sort by Time ↑';
event.target.classList.toggle('active', sortByTimeAsc);
debouncedProcessAuctions();
}
// Reset all filters and sorting
function resetFilters() {
// Clear star filters
activeStarFilters = [];
document.querySelectorAll('.zed-filter-btn[data-stars]').forEach(btn => {
btn.classList.remove('active');
});
// Clear bloodline filters
activeBloodlineFilters = [];
document.querySelectorAll('.zed-filter-btn[data-bloodline]').forEach(btn => {
btn.classList.remove('active');
});
// Reset sort
sortByTimeAsc = false;
const sortBtn = document.querySelector('.zed-sort-btn');
if (sortBtn) {
sortBtn.textContent = 'Sort by Time ↑';
sortBtn.classList.remove('active');
}
// Reset visibility of cards
document.querySelectorAll('.css-4k37cb').forEach(card => {
card.classList.remove('zed-card-hidden');
});
// Reset sort order
const auctionContainer = document.querySelector('#auctionlist-container') ||
document.querySelector('.css-1v5qfvc') ||
document.querySelector('.css-14v29z6') ||
document.querySelector('.css-1tvu0bo');
if (auctionContainer) {
// Sort back to original order
const cards = Array.from(auctionContainer.querySelectorAll('.css-4k37cb'));
cards.sort((a, b) => {
return parseInt(a.dataset.originalIndex || 0) - parseInt(b.dataset.originalIndex || 0);
});
// Re-append in original order
cards.forEach(card => {
auctionContainer.appendChild(card);
});
}
// Show message after reset
const totalAuctions = document.querySelectorAll('.css-4k37cb, [class*="auction-card"]').length;
updateStatusMessage(`${totalAuctions} out of ${totalAuctions} auctions`);
// Process auctions to update status
debouncedProcessAuctions();
}
// Create the filter UI
function createFilterUI() {
const container = document.createElement('div');
container.className = 'zed-filter-container';
// Create a filter row for all filters
const filterRow = document.createElement('div');
filterRow.className = 'zed-filter-row';
container.appendChild(filterRow);
// Star rating filter group
const starFilterGroup = document.createElement('div');
starFilterGroup.className = 'zed-filter-group';
const starLabel = document.createElement('label');
starLabel.textContent = 'Filter by Star Rating:';
starFilterGroup.appendChild(starLabel);
const starButtons = document.createElement('div');
starButtons.className = 'zed-filter-buttons';
// Create buttons for whole and half star ratings from 1 to 5
for (let i = 1; i <= 5; i++) {
// Whole number
const wholeBtn = document.createElement('button');
wholeBtn.className = 'zed-filter-btn';
wholeBtn.textContent = i.toString();
wholeBtn.dataset.stars = i.toString();
wholeBtn.addEventListener('click', toggleStarFilter);
starButtons.appendChild(wholeBtn);
// Half star
if (i < 5) {
const halfBtn = document.createElement('button');
halfBtn.className = 'zed-filter-btn';
halfBtn.textContent = (i + 0.5).toString();
halfBtn.dataset.stars = (i + 0.5).toString();
halfBtn.addEventListener('click', toggleStarFilter);
starButtons.appendChild(halfBtn);
}
}
starFilterGroup.appendChild(starButtons);
filterRow.appendChild(starFilterGroup);
// Bloodline filter group
const bloodlineFilterGroup = document.createElement('div');
bloodlineFilterGroup.className = 'zed-filter-group';
const bloodlineLabel = document.createElement('label');
bloodlineLabel.textContent = 'Filter by Bloodline:';
bloodlineFilterGroup.appendChild(bloodlineLabel);
const bloodlineButtons = document.createElement('div');
bloodlineButtons.className = 'zed-filter-buttons';
// Create buttons for each bloodline
const bloodlines = ['NAKAMOTO', 'SZABO', 'FINNEY', 'BUTERIN'];
bloodlines.forEach(bloodline => {
const btn = document.createElement('button');
btn.className = 'zed-filter-btn zed-bloodline-btn';
btn.textContent = bloodline;
btn.dataset.bloodline = bloodline;
btn.addEventListener('click', toggleBloodlineFilter);
bloodlineButtons.appendChild(btn);
});
bloodlineFilterGroup.appendChild(bloodlineButtons);
filterRow.appendChild(bloodlineFilterGroup);
// Status container for better positioning
const statusContainer = document.createElement('div');
statusContainer.className = 'zed-status-container';
// Status message box
statusElement = document.createElement('div');
statusElement.className = 'zed-status-box';
statusElement.textContent = 'Ready';
statusContainer.appendChild(statusElement);
// Add status container to filter row
filterRow.appendChild(statusContainer);
// Controls group (for sort/reset buttons)
const controlsGroup = document.createElement('div');
controlsGroup.className = 'zed-controls-group';
// Sort by time button
const sortBtn = document.createElement('button');
sortBtn.className = 'zed-sort-btn';
sortBtn.textContent = 'Sort by Time ↑';
sortBtn.addEventListener('click', toggleTimeSort);
controlsGroup.appendChild(sortBtn);
// Reset button
const resetBtn = document.createElement('button');
resetBtn.className = 'zed-reset-btn';
resetBtn.textContent = 'Reset All';
resetBtn.addEventListener('click', resetFilters);
controlsGroup.appendChild(resetBtn);
container.appendChild(controlsGroup);
// Insert the filter container at the top of the page
const targetElement = document.querySelector('main') || document.body;
targetElement.insertBefore(container, targetElement.firstChild);
}
// Function to get the star rating from an auction card
function getStarRating(card) {
// Find all star elements in the card
const starContainer = card.querySelector('.css-k008qs, [class*="star-rating"]');
if (!starContainer) return 0;
// First try the new UI format (count filled stars)
const starElements = starContainer.querySelectorAll('*');
let rating = 0;
if (starElements.length > 0) {
// Try to count filled stars from text content
const ratingText = starContainer.textContent.trim();
// Look for patterns like "★★★☆☆" or "3.5" or "★★★½"
if (ratingText.match(/^[\d\.]+$/)) {
// If it's a numeric rating (e.g., "3.5")
rating = parseFloat(ratingText);
} else if (ratingText.includes('★')) {
// Count full stars
rating = (ratingText.match(/★/g) || []).length;
// Check for half star (½ or ☆)
if (ratingText.includes('½') || (ratingText.includes('☆') && rating > 0)) {
rating += 0.5;
}
} else {
// Fall back to original method for the old UI
let fullStars = 0;
let hasHalfStar = false;
// Look for star containers with css-1o988h9 class
const oldStarElements = starContainer.querySelectorAll('.css-1o988h9');
oldStarElements.forEach(starElement => {
// If it has a fully filled star (css-1tt5dvj)
if (starElement.querySelector('.css-1tt5dvj')) {
fullStars++;
}
// If it has a half-filled star (css-139eomv)
else if (starElement.querySelector('.css-139eomv')) {
hasHalfStar = true;
}
});
rating = fullStars + (hasHalfStar ? 0.5 : 0);
}
}
return rating;
}
// Function to get the bloodline from an auction card
function getBloodline(card) {
// Look for text that might contain a bloodline
const textElements = card.querySelectorAll('p, div, span');
const bloodlines = ['NAKAMOTO', 'SZABO', 'FINNEY', 'BUTERIN'];
for (const element of textElements) {
const text = element.textContent.trim().toUpperCase();
for (const bloodline of bloodlines) {
if (text === bloodline) {
return bloodline;
}
}
}
return null;
}
// Function to get time remaining in minutes from an auction card
function getTimeRemainingInMinutes(card) {
// Find the time element using multiple possible selectors
const timeElement = card.querySelector('.css-1baulvz, .css-1fb8s8w span, [class*="time-remaining"], div[class*="Time"] span');
if (!timeElement) return Infinity;
const timeText = timeElement.textContent.trim();
// Parse the time string (format: "1d 3h 5m 30s" or similar)
let days = 0, hours = 0, minutes = 0, seconds = 0;
// Check for days
if (timeText.includes('d')) {
const dayMatch = timeText.match(/(\d+)d/);
if (dayMatch && dayMatch[1]) {
days = parseInt(dayMatch[1]) || 0;
}
}
// Check for hours
if (timeText.includes('h')) {
const hourMatch = timeText.match(/(\d+)h/);
if (hourMatch && hourMatch[1]) {
hours = parseInt(hourMatch[1]) || 0;
}
}
// Check for minutes
if (timeText.includes('m')) {
const minuteMatch = timeText.match(/(\d+)m/);
if (minuteMatch && minuteMatch[1]) {
minutes = parseInt(minuteMatch[1]) || 0;
}
}
// Check for seconds
if (timeText.includes('s')) {
const secondMatch = timeText.match(/(\d+)s/);
if (secondMatch && secondMatch[1]) {
seconds = parseInt(secondMatch[1]) || 0;
}
}
// Convert to total minutes (including a fraction for seconds)
return (days * 24 * 60) + (hours * 60) + minutes + (seconds / 60);
}
// Function to sort cards by time remaining
function sortCardsByTimeRemaining() {
// Find auction container
const auctionContainer = document.querySelector('#auctionlist-container') ||
document.querySelector('.css-1v5qfvc') ||
document.querySelector('.css-14v29z6') ||
document.querySelector('.css-1tvu0bo');
if (!auctionContainer) {
console.error('Auction container not found. Unable to sort cards.');
return;
}
// Process sorting with the found container
processSort(auctionContainer);
// Function to handle the actual sorting logic
function processSort(container) {
const cards = Array.from(container.querySelectorAll('.css-4k37cb'))
.filter(card => !card.classList.contains('zed-card-hidden'));
if (cards.length === 0) {
return; // Don't proceed if no cards
}
cards.sort((a, b) => {
const timeA = getTimeRemainingInMinutes(a);
const timeB = getTimeRemainingInMinutes(b);
return timeA - timeB; // Low to high
});
// Re-append sorted cards
cards.forEach(card => {
container.appendChild(card);
});
}
}
// Initialize the script
function init() {
// Check if we're on the right page
if (window.location.href !== "https://app.zedchampions.com/auctions") {
console.log('Not on the auctions page, skipping initialization');
return;
}
// Add styles
addStyles();
// Add filter UI
createFilterUI();
// Initial processing
debouncedProcessAuctions();
// Set up observer for new auctions
const targetNode = document.body;
const observer = new MutationObserver(() => {
debouncedProcessAuctions();
});
// Start observing
observer.observe(targetNode, {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ['class']
});
// Also set up regular refreshes as fallback
setInterval(debouncedProcessAuctions, REFRESH_INTERVAL);
}
// Add styles to the page
function addStyles() {
const styleElement = document.createElement('style');
styleElement.textContent = STYLE;
document.head.appendChild(styleElement);
}
// Wait for page to load
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();