☰

Animate Triple Autodarts

Animate Triple, Double and Bull hits

// ==UserScript==
// @name         Animate Triple Autodarts
// @version      0.4
// @description  Animate Triple, Double and Bull hits
// @author       aMAZiNGJiN
// @match        *://play.autodarts.io/*
// @grant        none
// @license      MIT
// @namespace    https://greasyfork.org/users/1275557
// ==/UserScript==

(function() {
    'use strict';

    // Settings
    const triplesToAnimate = [20, 19, 18, 17, 16, 15]; // Add the triples you like to animate
    const doublesToAnimate = [20, 16, 12, 8, 4, 1]; // Add the doubles you like to animate
    const animateBull = true; // Enable or disable the bull animation

    function injectCSS() {
        const css = `
        .highlight {
            color: red;
            font-weight: bold;
        }

        .animate-hit {
            border: unset;
            outline: unset;
            position: relative;
            color: #fff;
            font-size: 20px;
            font-weight: 400;
            letter-spacing: 2px;
            word-spacing: 4px;
            text-transform: uppercase;
            background: linear-gradient(270deg, #0ebeff, #ffdd40, #ae63e4, #47cf73, #0ebeff, #ffdd40, #ae63e4, #47cf73);
            animation: rainbow-border 5s ease-in-out infinite;
            background-size: 400% 400%;
            z-index: 1;
        }

        .animate-hit::before, .glowing-border::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
        }

        .animate-hit::before {
            animation: rainbow-border 5s ease-in-out infinite;
            border-radius: 4px;
            background: linear-gradient(270deg, #0ebeff, #ffdd40, #ae63e4, #47cf73, #0ebeff, #ffdd40, #ae63e4, #47cf73);
            width: 100%;
            height: 100%;
            background-size: 400% 400%;
        }

        .animate-hit::after {
            border-radius: 3px;
            margin: 3px;
            background: inherit;
        }

        @keyframes rainbow-border {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        `;

        const style = document.createElement('style');
        style.type = 'text/css';
        style.textContent = css;
        document.head.appendChild(style);
    }

    function animateHits() {
        document.querySelectorAll('.ad-ext-turn-throw p.chakra-text').forEach(pElement => {
            let shouldAnimate = false;
            let prefix = '';
            let hitNumber = 0;

            if (pElement.textContent.startsWith('T')) {
                prefix = 'T';
                hitNumber = parseInt(pElement.textContent.slice(1), 10);
                shouldAnimate = triplesToAnimate.includes(hitNumber);
            } else if (pElement.textContent.startsWith('D')) {
                prefix = 'D';
                hitNumber = parseInt(pElement.textContent.slice(1), 10);
                shouldAnimate = doublesToAnimate.includes(hitNumber);
            } else if (animateBull && pElement.textContent === 'BULL') {
                shouldAnimate = true;
            }

            if (shouldAnimate) {
                const parentDiv = pElement.closest('.ad-ext-turn-throw');
                if (parentDiv) {
                    parentDiv.classList.add('animate-hit');
                    if (prefix && !pElement.innerHTML.includes('<span class="highlight">')) {
                        const updatedHTML = pElement.textContent.replace(new RegExp(`^${prefix}`), `<span class="highlight">${prefix}</span>`);
                        pElement.innerHTML = updatedHTML;
                    } else if (pElement.textContent === 'BULL' && !pElement.innerHTML.includes('<span class="highlight">')) {
                        pElement.innerHTML = '<span class="">BULL</span>';
                    }
                }
            }
        });
    }

    const observer = new MutationObserver(mutationsList => {
        let isRelevantMutation = mutationsList.some(mutation =>
            Array.from(mutation.addedNodes).some(node =>
                node.nodeType === Node.ELEMENT_NODE &&
                (node.matches('.chakra-text') || node.querySelector('.chakra-text'))
            )
        );

        if (isRelevantMutation) {
            animateHits();
        }
    });

    function periodicCheck() {
        animateHits();
    }

    window.onload = () => {
        injectCSS();
        animateHits();
        observer.observe(document.body, { childList: true, subtree: true, characterData: true });
        setInterval(periodicCheck, 3000);
    };
})();