☰

Nitro Monkey | NT Theme

Custom Nitro Type Theme w/ Font-Size and Height Sliders

目前为 2024-10-14 提交的版本。查看 最新版本。

// ==UserScript==
// @name         Nitro Monkey | NT Theme
// @namespace https://greasyfork.org/users/1331131-tensorflow-dvorak
// @version      2024-10-13
// @description  Custom Nitro Type Theme w/ Font-Size and Height Sliders
// @author       TensorFlow - Dvorak
// @match        *://*.nitrotype.com/race
// @match        *://*.nitrotype.com/race/*
// @license      MIT
// @grant        none
// ==/UserScript==

(function () {

    const dynamicStyle = document.createElement('style');
    document.head.appendChild(dynamicStyle);

    function updateFontSizeRule(fontSize) {
        dynamicStyle.innerHTML = `
            .dash-copy {
                font-size: ${fontSize}px !important;
            }
            .dash-copyContainer {
                background: linear-gradient(to bottom, rgba(6, 5, 22, 0.9) 65%, rgba(6, 5, 22, 0.87) 70%, #060516 100%);
                border-radius: 5px;
                box-shadow: 0 1px 10px rgba(2, 2, 2, 0.14);
                flex: 1;
                overflow: hidden;
                padding: 15px;
                width: 100%;
                display: flex;
            }

            .dash-side, .dash-actions, .dash-nitros {
                display: none;
            }

            .dash:before {
                height: min-content;
            }

            .typing-cursor {
                display: inline-block;
                width: 2px;
                height: 1.2em;
                background-color: #00FF7F;
                animation: blink 1s step-end infinite;
                position: absolute;
                transition: all 0.5s ease-in-out;
            }

            @keyframes blink {
                50% { opacity: 0; }
            }

            .dash-letter {
                position: relative;
                display: inline-block;
                transition: color 0.01s ease-in-out, transform 0.01s ease-in-out;
                color: #acaaff;
            }

            .is-typed {
                color: #00FF7F;
                transition: color 0.11s ease-in-out;
            }

            .is-incorrect {
                color: red;
            }

            .dash-letter.is-incorrect {
                background: #1c99f400;
                color: red;
            }

            .dash-letter.is-waiting {
                color: white;
                background-color: #1c99f400;
            }
            .structure-footer {
                display: flex;
                padding-top: 2rem;
            }
        `;
    }

    const dashElement = document.querySelector('.dash');

    if (dashElement) {
        // Height slider
        const heightSlider = document.createElement('input');
        heightSlider.type = 'range';
        heightSlider.min = '100';
        heightSlider.max = '1000';

        const savedHeight = localStorage.getItem('dashHeight') || '500';
        dashElement.style.height = `${savedHeight}px`;
        heightSlider.value = savedHeight;

        heightSlider.style.width = '100%';
        heightSlider.style.marginTop = '10px';
        heightSlider.style.cursor = 'pointer';

        dashElement.appendChild(heightSlider);

        heightSlider.addEventListener('input', function () {
            const heightValue = heightSlider.value;
            dashElement.style.height = `${heightValue}px`;
            localStorage.setItem('dashHeight', heightValue);
        });

        // Font size slider
        const fontSizeSlider = document.createElement('input');
        fontSizeSlider.type = 'range';
        fontSizeSlider.min = '20';
        fontSizeSlider.max = '80';
        fontSizeSlider.value = localStorage.getItem('dashFontSize') || '40';

        fontSizeSlider.style.width = '100%';
        fontSizeSlider.style.marginTop = '10px';
        fontSizeSlider.style.cursor = 'pointer';

        dashElement.appendChild(fontSizeSlider);

        updateFontSizeRule(fontSizeSlider.value);

        fontSizeSlider.addEventListener('input', function () {
            const newFontSize = fontSizeSlider.value;
            updateFontSizeRule(newFontSize);
            localStorage.setItem('dashFontSize', newFontSize);
        });

        const displayContainer = document.createElement('div');
        displayContainer.style.marginTop = '10px';
        displayContainer.style.fontSize = '20px';
        displayContainer.style.color = '#00FF7F';
        displayContainer.style.background = 'rgba(6, 5, 22, 0.8)';
        displayContainer.style.padding = '10px';
        displayContainer.style.borderRadius = '5px';
        displayContainer.style.zIndex = '9999';
        displayContainer.innerHTML = `
            <div>WPM: 0</div>
            <div>Accuracy: 0%</div>
        `;

        dashElement.appendChild(displayContainer);

        const wpmDisplay = displayContainer.querySelector('div:nth-child(1)');
        const accuracyDisplay = displayContainer.querySelector('div:nth-child(2)');

        const fetchStats = () => {
            const wpmElement = document.querySelector('.dash-metrics .list-item:nth-child(1) .g-b--8of12 .h4');
            const accuracyElement = document.querySelector('.dash-metrics .list-item:nth-child(2) .g-b--8of12 .h4');

            if (wpmElement) {
                const wpmValue = wpmElement.textContent;
                wpmDisplay.textContent = `WPM: ${wpmValue}`;
            }

            if (accuracyElement) {
                const accuracyValue = accuracyElement.textContent;
                accuracyDisplay.textContent = `Accuracy: ${accuracyValue}%`;
            }
        };

        setInterval(fetchStats, 100);
    }
})();