☰

Animate Triple Autodarts

Animate the border on Triple Hits

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

// ==UserScript==
// @name         Animate Triple Autodarts
// @version      0.1
// @description  Animate the border on Triple Hits
// @author       aMAZiNGJiN
// @match        *://play.autodarts.io/*
// @grant        none
// @license      MIT

// @namespace https://greasyfork.org/users/1275557
// ==/UserScript==

document.addEventListener('DOMContentLoaded', function() {
    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.appendChild(document.createTextNode(css));
   document.head.appendChild(style);
    }

    injectCSS();


    function animateTriple() {
        document.querySelectorAll('.ad-ext-turn-throw p.chakra-text').forEach(pElement => {
            if (pElement.textContent.startsWith('T')) {
                pElement.closest('.ad-ext-turn-throw.css-1fzu0fr').classList.add('glowing-border');
                const updatedHTML = pElement.textContent.replace(/^T/, '<span class="highlight">T</span>');
                pElement.innerHTML = updatedHTML;
            }
        });
    }


    const observer = new MutationObserver(function(mutationsList) {
        mutationsList.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                if (node.nodeType === Node.ELEMENT_NODE) {
                    if (node.matches('.chakra-text') || node.querySelector('.chakra-text')) {
                        animateTriple();
                    }
                }
            });
        });
    });


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


    observer.observe(document.body, config);


    animateTriple();
});