☰

Animate Triple Autodarts

Animate the border on Triple Hits

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

  1. // ==UserScript==
  2. // @name         Animate Triple Autodarts
  3. // @version      0.3
  4. // @description  Animate the border on Triple Hits
  5. // @author       aMAZiNGJiN
  6. // @match        *://play.autodarts.io/*
  7. // @grant        none
  8. // @license      MIT
  9. // @namespace    https://greasyfork.org/users/1275557
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     function injectCSS() {
  16.         const css = `
  17.   .highlight {
  18.   color: red;
  19.   font-weight:bold;
  20. }
  21.  
  22.  .glowing-border {
  23.   border: unset;
  24.   outline: unset;
  25.   position: relative;
  26.   color: #fff;
  27.   font-size: 20px;
  28.   font-weight: 400;
  29.   letter-spacing: 2px;
  30.   word-spacing: 4px;
  31.   text-transform: uppercase;
  32.   background: linear-gradient(70deg, #0ebeff, #ffdd40, #ae63e4, #47cf73, #0ebeff, #ffdd40, #ae63e4, #47cf73);
  33.   animation: rainbow-border 1.5s linear infinite;
  34.   background-size: 200% 200%;
  35.   z-index: 1;
  36. }
  37.  
  38. .glowing-border::before, .glowing-border::after {
  39.   content: "";
  40.   position: absolute;
  41.   inset: 0;
  42.   z-index: -1;
  43. }
  44.  
  45. .glowing-border::before {
  46.   animation: rainbow-border 1.5s linear infinite;
  47.   border-radius: 4px;
  48.   background: linear-gradient(70deg, #0ebeff, #ffdd40, #ae63e4, #47cf73, #0ebeff, #ffdd40, #ae63e4, #47cf73);
  49.   width: 100%;
  50.   height: 100%;
  51.   background-size: 200% 200%;
  52. }
  53.  
  54. .glowing-border::after {
  55.   border-radius: 3px;
  56.   margin: 3px;
  57.   background: inherit;
  58. }
  59.  
  60. @keyframes rainbow-border {
  61.   0% {
  62.     background-position: 0% 50%;
  63.   }
  64.   50% {
  65.     background-position: 100% 50%;
  66.   }
  67.   100% {
  68.     background-position: 0% 50%;
  69.   }
  70. }
  71.         `;
  72.  
  73.         const style = document.createElement('style');
  74.         style.type = 'text/css';
  75.         style.textContent = css;
  76.         document.head.appendChild(style);
  77.     }
  78.  
  79.  
  80.     function animateTriple() {
  81.         document.querySelectorAll('.ad-ext-turn-throw p.chakra-text').forEach(pElement => {
  82.             if (pElement.textContent.startsWith('T')) {
  83.                 const parentDiv = pElement.closest('.ad-ext-turn-throw');
  84.                 if (parentDiv) {
  85.                     parentDiv.classList.add('glowing-border');
  86.                     if (!pElement.innerHTML.includes('<span class="highlight">')) {
  87.                         const updatedHTML = pElement.textContent.replace(/^T/, '<span class="highlight">T</span>');
  88.                         pElement.innerHTML = updatedHTML;
  89.                     }
  90.                 }
  91.             }
  92.         });
  93.     }
  94.  
  95.     const observer = new MutationObserver(mutationsList => {
  96.         let isRelevantMutation = mutationsList.some(mutation =>
  97.             Array.from(mutation.addedNodes).some(node =>
  98.                 node.nodeType === Node.ELEMENT_NODE &&
  99.                 (node.matches('.chakra-text') || node.querySelector('.chakra-text'))
  100.             )
  101.         );
  102.  
  103.         if (isRelevantMutation) {
  104.             animateTriple();
  105.         }
  106.     });
  107.  
  108.    function periodicCheck() {
  109.     animateTriple();
  110. }
  111.  
  112.     window.onload = () => {
  113.     injectCSS();
  114.     animateTriple();
  115.     observer.observe(document.body, { childList: true, subtree: true, characterData: true });
  116.     setInterval(periodicCheck, 5000);
  117.     };
  118. })();