☰

Animate Triple Autodarts

Animate the border on Triple Hits

目前为 2024-03-17 提交的版本。查看 最新版本。

// ==UserScript==
// @name         Animate Triple Autodarts
// @version      0.2
// @description  Animate the border on Triple Hits
// @author       aMAZiNGJiN
// @match        *://play.autodarts.io/*
// @grant        none
// @license      MIT
// @namespace    https://greasyfork.org/users/1275557
// ==/UserScript==

(function() {
    'use strict';

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

 .glowing-border {
  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(70deg, #0ebeff, #ffdd40, #ae63e4, #47cf73, #0ebeff, #ffdd40, #ae63e4, #47cf73);
  animation: rainbow-border 1.5s linear infinite;
  background-size: 200% 200%;
  z-index: 1;
}

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

.glowing-border::before {
  animation: rainbow-border 1.5s linear infinite;
  border-radius: 4px;
  background: linear-gradient(70deg, #0ebeff, #ffdd40, #ae63e4, #47cf73, #0ebeff, #ffdd40, #ae63e4, #47cf73);
  width: 100%;
  height: 100%;
  background-size: 200% 200%;
}

.glowing-border::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 animateTriple() {
        document.querySelectorAll('.ad-ext-turn-throw p.chakra-text').forEach(pElement => {
            if (pElement.textContent.startsWith('T')) {
                const parentDiv = pElement.closest('.ad-ext-turn-throw');
                if (parentDiv) {
                    parentDiv.classList.add('glowing-border');
                    if (!pElement.innerHTML.includes('<span class="highlight">')) {
                        const updatedHTML = pElement.textContent.replace(/^T/, '<span class="highlight">T</span>');
                        pElement.innerHTML = updatedHTML;
                    }
                }
            }
        });
    }

    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) {
            animateTriple();
        }
    });

    const config = { childList: true, subtree: true };

    document.addEventListener('DOMContentLoaded', () => {
        injectCSS();
        animateTriple();
        observer.observe(document.body, config);
    });
})();