tr nq stats

nq stats
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         tr nq stats
// @namespace    http://tampermonkey.net/
// @version      11.0
// @description  nq stats
// @author       aaaaaa
// @match        https://play.typeracer.com/*
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_addStyle
// @run-at       document-idle
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // basic script settings things like debug mode and animation speed
    const showDebugMessages = true;
    const popupAnimationDuration = 2000; // how long those little numbers fly up
    const statsBoxDefaultRight = '15px';
    const statsBoxRacingRight = '220px'; // how far it's shifting when in a race

    function logMessage(message) {
        if (showDebugMessages) {
            console.log('[TR NQ Stats v11] ' + message);
        }
    }
    // these vars hold all the stats we're tracking like wpm and streak
    let cumulativeWPM = parseFloat(GM_getValue('tr_totalWPM_v11', '0.0'));
    let cumulativeAccuracy = parseFloat(GM_getValue('tr_totalAccuracy_v11', '0.0'));
    let completedRaceCount = parseInt(GM_getValue('tr_racesCompleted_v11', '0'));
    let consecutiveWins = parseInt(GM_getValue('tr_currentStreak_v11', '0'));
    let lowestWPMSpeed = parseFloat(GM_getValue('tr_worstWPM_v11', 'Infinity')); // start high so any race is lower
    let highestWPMSpeed = parseFloat(GM_getValue('tr_bestWPM_v11', '-Infinity')); // start low so any race is higher

    let isPlayerRacing = false; // simple flag are we in a race right now
    let resultsLoggedForCurrentRace = false; // did we already grab stats for this one race
    let trackedMainMenuButton = null; // keep a reference to the main menu button so we only attach the event listener once

    // this is the div element for our stats display box
    const statsDisplayElement = document.createElement('div');
    statsDisplayElement.id = 'tr_nq_stats_blackout_v11';

    // function to update the html inside the stats box with current numbers
    function refreshStatsPanel() {
        const averageWPMToDisplay = completedRaceCount > 0 ? (cumulativeWPM / completedRaceCount).toFixed(1) : '---';
        const averageAccuracyToDisplay = completedRaceCount > 0 ? (cumulativeAccuracy / completedRaceCount).toFixed(1) : '---';
        const worstWPMToDisplay = (completedRaceCount > 0 && lowestWPMSpeed !== Infinity) ? lowestWPMSpeed.toFixed(1) : '---';
        const bestWPMToDisplay = (completedRaceCount > 0 && highestWPMSpeed !== -Infinity) ? highestWPMSpeed.toFixed(1) : '---';

        statsDisplayElement.innerHTML = `
            <div class="nq-item-blackout">
                <span>Avg WPM:</span>
                <span id="nq-value-avg-wpm">${averageWPMToDisplay}</span>
            </div>
            <div class="nq-item-blackout">
                <span>Avg Acc:</span>
                <span id="nq-value-avg-acc">${averageAccuracyToDisplay}%</span>
            </div>
            <div class="nq-item-blackout">
                <span>Streak:</span>
                <span id="nq-value-streak">${consecutiveWins}</span>
            </div>
            <div class="nq-item-blackout nq-separator-blackout"></div>
            <div class="nq-item-blackout">
                <span>Worst:</span>
                <span id="nq-value-worst-wpm">${worstWPMToDisplay}</span>
            </div>
            <div class="nq-item-blackout">
                <span>Best:</span>
                <span id="nq-value-best-wpm">${bestWPMToDisplay}</span>
            </div>
        `;
    }

    // css stuff
    function setupStatsPanel() {
        GM_addStyle(`
            #tr_nq_stats_blackout_v11 {
                position: fixed;
                top: 70px;
                right: ${statsBoxDefaultRight};
                background-color: #0A0A0A;
                color: #AAAAAA;
                padding: 8px 12px;
                border-radius: 4px;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 12px;
                line-height: 1.4;
                z-index: 10010;
                border: 1px solid #222222;
                min-width: 135px;
                box-shadow: 0 1px 3px rgba(0,0,0,0.3);
                display: block !important;
                transition: right 0.3s ease-in-out; /* for that smooth slide */
            }
            /* just item styling */
            .nq-item-blackout {
                display: flex; justify-content: space-between; margin-bottom: 3px;
            }
            .nq-item-blackout:last-child { margin-bottom: 0; }
            .nq-item-blackout span:first-child { color: #888888; } /* label color */
            .nq-item-blackout span:last-child { color: #BBBBBB; font-weight: bold; } /* value color */
            .nq-separator-blackout { height: 1px; background-color: #333333; margin-top: 5px; margin-bottom: 5px; }

            /* for the stat change popups */
            .stat-diff-animation {
                position: fixed; font-size: 11px; font-weight: bold; padding: 1px 3px;
                border-radius: 2px; opacity: 0;
                animation: popAndFade ${popupAnimationDuration / 1000}s ease-out forwards;
                pointer-events: none; z-index: 10011; /* needs to be above the stats box */
            }
            @keyframes popAndFade { /* define the actual animation */
                0% { opacity: 0; transform: translateY(5px) scale(0.8); }
                20% { opacity: 1; transform: translateY(-8px) scale(1.1); }
                80% { opacity: 1; transform: translateY(-12px) scale(1); }
                100% { opacity: 0; transform: translateY(-20px) scale(0.9); }
            }
        `);
        document.body.appendChild(statsDisplayElement); // stick it on the page
        statsDisplayElement.style.display = 'block';
        refreshStatsPanel(); // fill it with initial data
        logMessage("Stats display initialized.");
    }

    function createStatPopupAnimation(displayValueElementId, valueDifference, isValuePercentage = false) {
        const animatedElement = document.getElementById(displayValueElementId); // find where the stat number is
        if (!animatedElement || isNaN(valueDifference) || valueDifference === 0) return; // no point if no change or can't find it

        const targetElementRect = animatedElement.getBoundingClientRect(); // get its position
        const animationPopup = document.createElement('span');
        animationPopup.className = 'stat-diff-animation';
        const plusOrMinusSign = valueDifference > 0 ? '+' : '';
        animationPopup.textContent = `${plusOrMinusSign}${valueDifference.toFixed(1)}${isValuePercentage ? '%' : ''}`;

        // color it green for good red for bad
        if (valueDifference > 0) {
            animationPopup.style.color = '#4CAF50'; animationPopup.style.backgroundColor = 'rgba(76, 175, 80, 0.1)';
        } else {
            animationPopup.style.color = '#F44336'; animationPopup.style.backgroundColor = 'rgba(244, 67, 54, 0.1)';
        }

        // position it next to the stat
        animationPopup.style.top = `${targetElementRect.top + (targetElementRect.height / 2) - 7}px`;
        animationPopup.style.left = `${targetElementRect.right + 5}px`;

        document.body.appendChild(animationPopup);
        setTimeout(() => { // clean it up after animation
            if (animationPopup.parentNode) animationPopup.parentNode.removeChild(animationPopup);
        }, popupAnimationDuration);
    }

    // writes the current stats to GM_setValue so they persist across sessions
    function saveCurrentStats() {
        GM_setValue('tr_totalWPM_v11', cumulativeWPM.toString());
        GM_setValue('tr_totalAccuracy_v11', cumulativeAccuracy.toString());
        GM_setValue('tr_racesCompleted_v11', completedRaceCount.toString());
        GM_setValue('tr_currentStreak_v11', consecutiveWins.toString());
        GM_setValue('tr_worstWPM_v11', lowestWPMSpeed.toString());
        GM_setValue('tr_bestWPM_v11', highestWPMSpeed.toString());
    }

    // handles what happens if the user bails on a race via the main menu button
    function processMainMenuClick(event) {
        logMessage('Main Menu (leave race) clicked.');
        if (isPlayerRacing) { // only if they were actually in a race
            logMessage('Quit detected: Resetting ALL stats and position.');
            consecutiveWins = 0; cumulativeWPM = 0.0; cumulativeAccuracy = 0.0; completedRaceCount = 0;
            lowestWPMSpeed = Infinity; highestWPMSpeed = -Infinity; // full reset
            isPlayerRacing = false; resultsLoggedForCurrentRace = true; // pretend race ended so it doesnt try to parse again
            statsDisplayElement.style.right = statsBoxDefaultRight; // slide box back
            saveCurrentStats(); refreshStatsPanel();
        }
    }

    // finds the "leave race"  link and makes sure our click handler is on it
    // also makes sure not to add it multiple times if the button object changes
    function setupMainMenuButtonListener() {
        const mainMenuLinkElement = document.querySelector('a.raceLeaveLink'); // the actual typeracer button
        if (mainMenuLinkElement) {
            if (trackedMainMenuButton !== mainMenuLinkElement) { // only if its a new button or first time
                if (trackedMainMenuButton) trackedMainMenuButton.removeEventListener('click', processMainMenuClick); // remove old one if any
                mainMenuLinkElement.addEventListener('click', processMainMenuClick);
                trackedMainMenuButton = mainMenuLinkElement; // remember this button
            }
        } else { // if button disappeared remove listener from old one
             if (trackedMainMenuButton) {
                trackedMainMenuButton.removeEventListener('click', processMainMenuClick);
                trackedMainMenuButton = null;
            }
        }
    }

    // tries to find the wpm and accuracy figures from the page after a race finishes
    function parseAndStoreRaceResults() {
        logMessage('Extracting race results.');
        let wpm, accuracy;
        // these selectors are specific to how typeracer shows your stats post-race
        const raceWpmElement = document.querySelector('div.tblOwnStatsNumber[title*="wpm"]');
        const raceAccuracyElement = Array.from(document.querySelectorAll('div.tblOwnStatsNumber')).find(el => el.textContent.includes('%'));

        if (raceWpmElement) wpm = parseFloat(raceWpmElement.getAttribute('title')) || parseFloat(raceWpmElement.textContent); // try title first then text
        if (raceAccuracyElement) accuracy = parseFloat(raceAccuracyElement.textContent);

        if (!isNaN(wpm) && !isNaN(accuracy)) { // got valid numbers
            let oldAverageWPM = NaN, oldAverageAccuracy = NaN;
            const previousRaceCount = completedRaceCount;
            if (previousRaceCount > 0) { // need this to calculate change in average
                oldAverageWPM = cumulativeWPM / previousRaceCount;
                oldAverageAccuracy = cumulativeAccuracy / previousRaceCount;
            }

            // update records
            if (wpm > highestWPMSpeed) highestWPMSpeed = wpm;
            if (wpm < lowestWPMSpeed) lowestWPMSpeed = wpm;
            cumulativeWPM += wpm; cumulativeAccuracy += accuracy; completedRaceCount++; consecutiveWins++;

            logMessage(`Race recorded: WPM=${wpm.toFixed(1)}, Acc=${accuracy.toFixed(1)}%.`);
            saveCurrentStats(); refreshStatsPanel(); // save and show new numbers

            // animate the changes
            if (previousRaceCount > 0) {
                const newAverageWPM = cumulativeWPM / completedRaceCount;
                const newAverageAccuracy = cumulativeAccuracy / completedRaceCount;
                createStatPopupAnimation('nq-value-avg-wpm', newAverageWPM - oldAverageWPM);
                createStatPopupAnimation('nq-value-avg-acc', newAverageAccuracy - oldAverageAccuracy, true);
            } else if (completedRaceCount === 1) { // special handling for the very first race since there's no old average
                 createStatPopupAnimation('nq-value-avg-wpm', wpm);
                 createStatPopupAnimation('nq-value-avg-acc', accuracy, true);
            }
        } else {
            logMessage(`Error parsing WPM/Accuracy. WPM: ${wpm}, Acc: ${accuracy}`);
            refreshStatsPanel(); // important to refresh the panel even if parsing fails so it doesn't look stuck
        }
    }

    // this is the core logic checks page elements to see if we are in a race or not
    function updateRaceActivityStatus() {
        const statusLabel = document.querySelector('.gameStatusLabel'); // like "Go!" or "The race is on"
        const statusText = statusLabel ? statusLabel.innerText.trim() : '';
        const textInputElement = document.querySelector('input.txtInput');
        // checks if the text input field is actually enabled and visible good indicator of race active
        const isTypingInputActive = textInputElement && !textInputElement.disabled && textInputElement.offsetParent !== null;
        // check if the results table numbers are visible
        const areResultsDisplayed = document.querySelector('div.tblOwnStatsNumber[title*="wpm"]') && Array.from(document.querySelectorAll('div.tblOwnStatsNumber')).find(el => el.textContent.includes('%'));

        let hasRaceJustStarted = false;
        let hasRaceJustEnded = false;

        // race start detection: not racing now but game status says go and input is active
        if (!isPlayerRacing && (statusText === 'Go!' || statusText.startsWith('The race is on'))) {
            if (isTypingInputActive) {
                hasRaceJustStarted = true;
                isPlayerRacing = true; resultsLoggedForCurrentRace = false; // reset for new race
                if (showDebugMessages) logMessage('Race started.');
            }
        } else if (isPlayerRacing) { // if we think we're racing check for end conditions
            // race end detection (option 1): results table is visible and we havent parsed them yet
            if (areResultsDisplayed && !resultsLoggedForCurrentRace) {
                hasRaceJustEnded = true;
                if (showDebugMessages) logMessage('Race finished: Results visible.');
                parseAndStoreRaceResults();
            }
            // race end detection (option 2): input is inactive game status says finished and not parsed yet
            else if (!isTypingInputActive && (statusText.startsWith('You finished') || statusText === 'The race has ended.') && !resultsLoggedForCurrentRace) {
                hasRaceJustEnded = true;
                if (showDebugMessages) logMessage('Race finished: Status label & input inactive.');
                setTimeout(() => { // sometimes the results aren't instantly in the dom so a small delay helps
                    if (document.querySelector('div.tblOwnStatsNumber[title*="wpm"]')) parseAndStoreRaceResults();
                    else { if (showDebugMessages) logMessage('Results not found after delay.'); refreshStatsPanel(); saveCurrentStats(); }
                }, 250);
            }
            // race end detection (option 3): fallback if critical race elements disappear suggesting user left the race page
            else if (!statusLabel && !isTypingInputActive && !resultsLoggedForCurrentRace && !window.location.hash.includes("#!race")) {
                hasRaceJustEnded = true;
                if (showDebugMessages) logMessage('Race likely ended abruptly (navigated away or context lost).');
                refreshStatsPanel(); saveCurrentStats(); // save whatever we had
            }

            if (hasRaceJustEnded) {
                isPlayerRacing = false;
                resultsLoggedForCurrentRace = true; // mark as done for this race
            }
        }

        // logic for shifting the stats box left during a race and back again after
        if (isPlayerRacing && statsDisplayElement.style.right !== statsBoxRacingRight) {
            if (showDebugMessages) logMessage('Shifting stats display left for race.');
            statsDisplayElement.style.right = statsBoxRacingRight;
        } else if (!isPlayerRacing && statsDisplayElement.style.right !== statsBoxDefaultRight) {
             // dont want it snapping back if the user is just looking at post-race stats
             if (!areResultsDisplayed && (!statusLabel || !(statusText.startsWith('You finished') || statusText === 'The race has ended.'))) {
                if (showDebugMessages) logMessage('Resetting stats display to default position.');
                statsDisplayElement.style.right = statsBoxDefaultRight;
             }
        }

        if(hasRaceJustStarted || hasRaceJustEnded) refreshStatsPanel(); // call refreshStatsPanel if the race state changed to show new data
        setupMainMenuButtonListener(); // re-check the main menu button listener just in case it got removed or changed by TR's js
    }

    logMessage('Script starting (NQ Stats Final Tweaks v11).');
    setupStatsPanel(); // call to initialize the stats display when the script loads

    // MutationObserver is pretty handy for reacting to dynamic page updates on typeracer
    const pageChangeObserver = new MutationObserver(updateRaceActivityStatus);
    // watch pretty much everything for changes
    pageChangeObserver.observe(document.documentElement, { childList: true, subtree: true });
    // initial check after page load sometimes stuff isnt ready immediately
    setTimeout(updateRaceActivityStatus, 750);

    // START: Added code for resetting stats on page unload during a race
    window.addEventListener('beforeunload', function (e) {
        if (isPlayerRacing) {
            logMessage('Page is being unloaded (refresh/close) while player is racing. Resetting all stats.');
            // Reset local script variables to their initial states
            cumulativeWPM = 0.0;
            cumulativeAccuracy = 0.0;
            completedRaceCount = 0;
            consecutiveWins = 0;
            lowestWPMSpeed = Infinity;
            highestWPMSpeed = -Infinity;

            // Persist these reset values
            saveCurrentStats();
            // Note: No need to call refreshStatsPanel() as the page is unloading.
        } else {
            logMessage('Page is being unloaded (refresh/close) while player is NOT racing. Stats will be preserved.');
            // Stats are saved after each race, so they should be up-to-date.
        }
    });
    // END: Added code

})();