Add Play Time to Steamdb search

Add play time from howlongtobeat.com to Steamdb game row when you search with tags, sales or viewing your own library
换行

    // ==UserScript==
    // @name         Add Play Time to Steamdb search
    // @namespace    http://tampermonkey.net/
    // @version      0.3
    // @description  Add play time from howlongtobeat.com to Steamdb game row when you search with tags, sales or viewing your own library
    // @author       Taha
    // @match        https://steamdb.info/tag/*
    // @match        https://steamdb.info/sales/*
    // @grant        GM_xmlhttpRequest
    // @grant        GM_addStyle
    // @grant        GM_setValue
    // @grant        GM_getValue
    // @license MIT
    // ==/UserScript==

    (function() {
        'use strict';

        // playtime column styles
        GM_addStyle(`
            .playtime-cell {
                text-align: right;
                padding-right: 10px !important;
            }
            .playtime-cell a {
                color: inherit;
                text-decoration: none;
            }
            .playtime-cell a:hover {
                text-decoration: underline;
            }
            .playtime-loading {
                opacity: 0.5;
            }
            th[data-name="playtime"] {
                cursor: pointer;
            }
        `);

        const CACHE_DURATION = 24 * 60 * 60 * 1000;
        const RATE_LIMIT = 100;
        let lastRequestTime = 0;
        let processedGames = new Set(); // Track which games we've already processed

        function basicCleanGameName(name) {
            // Remove content within parentheses and brackets
            let cleaned = name.replace(/[\(\[\{].*?[\)\]\}]/g, '');

            // Remove trademark and copyright symbols
            cleaned = cleaned.replace(/[™®©]/g, '');

            // Remove special characters and extra spaces
            cleaned = cleaned.replace(/[:\-_]/g, ' ').replace(/\s+/g, ' ').trim();

            return cleaned;
        }

        async function searchGameWithFallback(originalName, loadingCell) {
            // First do a basic cleaning
            let searchName = basicCleanGameName(originalName);
            let words = searchName.split(' ');
            let results = null;

            // Try different variations of the name, starting with the full name
            // and removing one word from the end each time
            while (words.length > 0 && !results) {
                const currentSearch = words.join(' ');
    //            console.log(`Trying search with: "${currentSearch}"`);

                results = await searchGame(currentSearch);

                if (!results) {
                    words.pop(); // Remove the last word and try again
                }
            }

            return results;
        }

        async function searchGame(gameName) {
            const url = 'https://howlongtobeat.com/api/search/5356b6994c0cc3eb';
            const headers = {
                'Host': 'howlongtobeat.com',
                'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:132.0) Gecko/20100101 Firefox/132.0',
                'Accept': '*/*',
                'Accept-Language': 'en-US,en;q=0.5',
                'Accept-Encoding': 'gzip, deflate, br, zstd',
                'Referer': 'https://howlongtobeat.com/?q=',
                'Content-Type': 'application/json',
                'Origin': 'https://howlongtobeat.com',
                'Sec-Fetch-Dest': 'empty',
                'Sec-Fetch-Mode': 'cors',
                'Sec-Fetch-Site': 'same-origin',
                'Priority': 'u=4',
                'TE': 'trailers'
            };

            const requestData = {
                "searchType": "games",
                "searchTerms": gameName.split(' '),
                "searchPage": 1,
                "size": 20,
                "searchOptions": {
                    "games": {
                        "userId": 0,
                        "platform": "",
                        "sortCategory": "popular",
                        "rangeCategory": "main",
                        "rangeTime": { "min": null, "max": null },
                        "gameplay": { "perspective": "", "flow": "", "genre": "" },
                        "rangeYear": { "min": "", "max": "" },
                        "modifier": ""
                    },
                    "users": { "sortCategory": "postcount" },
                    "lists": { "sortCategory": "follows" },
                    "filter": "",
                    "sort": 0,
                    "randomizer": 0
                },
                "useCache": true
            };

            // Wait for rate limiting
            const now = Date.now();
            const timeToWait = Math.max(0, RATE_LIMIT - (now - lastRequestTime));
            if (timeToWait > 0) {
                await new Promise(resolve => setTimeout(resolve, timeToWait));
            }
            lastRequestTime = Date.now();

            try {
                const response = await new Promise((resolve, reject) => {
                    GM_xmlhttpRequest({
                        method: 'POST',
                        url: url,
                        headers: headers,
                        data: JSON.stringify(requestData),
                        onload: resolve,
                        onerror: reject
                    });
                });

                const data = JSON.parse(response.responseText);
                if (data.data && data.data.length > 0) {
                    return data.data[0];
                }
            } catch (error) {
                console.error('Error searching for game:', error);
            }

            return null;
        }

        function addPlaytimeHeader() {
            if (!document.querySelector('th[data-name="playtime"]')) {
                const headerRow = document.querySelector('thead tr');
                if (headerRow) {
                    const playtimeHeader = document.createElement('th');
                    playtimeHeader.setAttribute('data-name', 'playtime');
                    playtimeHeader.classList.add('dt-type-numeric');
                    playtimeHeader.textContent = 'Playtime';
                    playtimeHeader.setAttribute('data-sort-direction', 'none');
                    playtimeHeader.addEventListener('click', handleSort);

                    const nameColumn = headerRow.querySelector('[data-name="name"]');
                    if (nameColumn && nameColumn.nextSibling) {
                        headerRow.insertBefore(playtimeHeader, nameColumn.nextSibling);
                    }
                }
            }
        }

        function handleSort(event) {
            const header = event.target;
            const table = document.querySelector('table');
            const tbody = table.querySelector('tbody');
            const rows = Array.from(tbody.querySelectorAll('tr.app'));

            const currentDirection = header.getAttribute('data-sort-direction');
            const newDirection = currentDirection === 'asc' ? 'desc' : 'asc';
            header.setAttribute('data-sort-direction', newDirection);

            rows.sort((a, b) => {
                const timeA = getPlaytimeValue(a);
                const timeB = getPlaytimeValue(b);

                if (isNaN(timeA) && isNaN(timeB)) return 0;
                if (isNaN(timeA)) return 1;
                if (isNaN(timeB)) return -1;

                return newDirection === 'asc' ? timeA - timeB : timeB - timeA;
            });

            rows.forEach(row => tbody.appendChild(row));
        }

        function getPlaytimeValue(row) {
            const cell = row.querySelector('.playtime-cell a');
            if (!cell) return NaN;

            const text = cell.textContent;
            let totalMinutes = 0;

            // Extract hours and minutes if they exist
            const hoursMatch = text.match(/(\d+)h/);
            const minutesMatch = text.match(/(\d+)m/);

            // Convert hours to minutes
            if (hoursMatch) {
                totalMinutes += parseInt(hoursMatch[1], 10) * 60;
            }

            // Add remaining minutes
            if (minutesMatch) {
                totalMinutes += parseInt(minutesMatch[1], 10);
            }

            return totalMinutes;
        }


        function getCachedTime(gameName) {
            const cached = GM_getValue(gameName);
            if (cached) {
                const { timestamp, data } = JSON.parse(cached);
                if (Date.now() - timestamp < CACHE_DURATION) {
                    return data;
                }
            }
            return null;
        }

        function setCachedTime(gameName, data) {
            GM_setValue(gameName, JSON.stringify({
                timestamp: Date.now(),
                data
            }));
        }

        async function fetchGameTime(originalGameName, gameRow) {
            // Skip if we've already processed this game
            if (processedGames.has(originalGameName)) {
                return;
            }
            processedGames.add(originalGameName);

            // Check cache first
            const cachedData = getCachedTime(originalGameName);
            if (cachedData) {
                appendTimeToRow(cachedData.time, gameRow, cachedData.link);
                return;
            }

            // Add loading indicator
            const loadingCell = document.createElement('td');
            loadingCell.classList.add('dt-type-numeric', 'playtime-loading');
            loadingCell.textContent = 'Loading...';
            gameRow.insertBefore(loadingCell, gameRow.querySelector('a.b').parentNode.nextSibling);

            try {
                const gameData = await searchGameWithFallback(originalGameName, loadingCell);

                if (gameData) {
                    const mainTime = gameData.comp_main / 3600;
                    const gameLink = `https://howlongtobeat.com/game/${gameData.game_id}`;

                    setCachedTime(originalGameName, {
                        time: mainTime,
                        link: gameLink,
                        reviewScore: gameData.review_score
                    });

                    loadingCell.remove();
                    appendTimeToRow(mainTime, gameRow, gameLink);

    //                console.log(`Found match for "${originalGameName}": "${gameData.game_name}"`);
                } else {
                    loadingCell.textContent = 'N/A';
                    loadingCell.classList.remove('playtime-loading');
    //                console.log(`No results found for: ${originalGameName}`);
                }
            } catch (error) {
                console.error('Failed to fetch game time:', error);
                loadingCell.textContent = 'Error';
                loadingCell.classList.remove('playtime-loading');
            }
        }

        function appendTimeToRow(time, gameRow, gameLink) {
            // Check if playtime cell already exists
            if (!gameRow.querySelector('.playtime-cell')) {
                const newCell = document.createElement('td');
                newCell.classList.add('dt-type-numeric', 'playtime-cell');

                const link = document.createElement('a');
                link.href = gameLink;
                link.target = '_blank';
                link.title = 'View on HowLongToBeat';

                // Format time as hours and minutes
                const hours = Math.floor(time);
                const minutes = Math.round((time - hours) * 60);
                link.textContent = hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;

                newCell.appendChild(link);

                const nameCell = gameRow.querySelector('a.b').parentNode;
                if (nameCell && nameCell.nextSibling) {
                    gameRow.insertBefore(newCell, nameCell.nextSibling);
                }
            }
        }

        function processNewGames() {
            const gameRows = document.querySelectorAll('tr.app');
            gameRows.forEach(row => {
                const gameNameElement = row.querySelector('a.b');
                if (gameNameElement) {
                    const gameName = gameNameElement.textContent.trim();
                    fetchGameTime(gameName, row);
                }
            });
        }

        // Debounce function to prevent too frequent updates
        function debounce(func, wait) {
            let timeout;
            return function executedFunction(...args) {
                const later = () => {
                    clearTimeout(timeout);
                    func(...args);
                };
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
            };
        }

        // Function to process updates after interactive elements are clicked
        function setupInteractionListeners() {
            // Debounced version of the process function
            const debouncedProcess = debounce(() => {
                addPlaytimeHeader();
                processNewGames();
            }, 1000); // 1 second debounce time

            // List of selectors for interactive elements
            const interactiveSelectors = [
                'a', // Links (including pagination)
                'button', // Buttons
                'select', // Dropdowns
                'input', // Input fields
                'th[data-name]', // Table headers (for sorting)
                '.paginate_button', // Pagination buttons
                '.dt-button', // DataTables buttons
                '.sorting', // Sorting elements
                'label' // Labels (often used for filters)
            ].join(', ');

            // Function to handle mutations
            const mutationCallback = function(mutationsList, observer) {
                for (const mutation of mutationsList) {
                    if (mutation.type === 'childList' &&
                        mutation.addedNodes.length > 0) {
                        debouncedProcess();
                        break;
                    }
                }
            };

            // Create an observer instance
            const observer = new MutationObserver(mutationCallback);

            // Start observing the document with the configured parameters
            observer.observe(document.body, {
                childList: true,
                subtree: true
            });

            // Add click listeners to interactive elements
            document.body.addEventListener('click', (event) => {
                if (event.target.matches(interactiveSelectors) ||
                    event.target.closest(interactiveSelectors)) {
                    debouncedProcess();
                }
            });

            // Listen for select changes
            document.body.addEventListener('change', (event) => {
                if (event.target.matches('select')) {
                    debouncedProcess();
                }
            });

            // Listen for DataTables events
            document.addEventListener('draw.dt', debouncedProcess);
            document.addEventListener('length.dt', debouncedProcess);
            document.addEventListener('page.dt', debouncedProcess);
            document.addEventListener('search.dt', debouncedProcess);
            document.addEventListener('order.dt', debouncedProcess);
        }

        // Initialize
        function init() {
            addPlaytimeHeader();
            processNewGames();
            setupInteractionListeners();
        }

        // Wait for the page to be fully loaded
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', init);
        } else {
            init();
        }
    })();
欢迎访问Greasy Fork镜像
