☰

Animate Triple Autodarts

Animate Triple, Double and Bull hits

  1. // ==UserScript==
  2. // @name         Animate Triple Autodarts
  3. // @version      0.4
  4. // @description  Animate Triple, Double and Bull 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.     // Settings
  16.     const triplesToAnimate = [20, 19, 18, 17, 16, 15]; // Add the triples you like to animate
  17.     const doublesToAnimate = [20, 16, 12, 8, 4, 1]; // Add the doubles you like to animate
  18.     const animateBull = true; // Enable or disable the bull animation
  19.  
  20.     function injectCSS() {
  21.         const css = `
  22.         .highlight {
  23.             color: red;
  24.             font-weight: bold;
  25.         }
  26.  
  27.         .animate-hit {
  28.             border: unset;
  29.             outline: unset;
  30.             position: relative;
  31.             color: #fff;
  32.             font-size: 20px;
  33.             font-weight: 400;
  34.             letter-spacing: 2px;
  35.             word-spacing: 4px;
  36.             text-transform: uppercase;
  37.             background: linear-gradient(270deg, #0ebeff, #ffdd40, #ae63e4, #47cf73, #0ebeff, #ffdd40, #ae63e4, #47cf73);
  38.             animation: rainbow-border 5s ease-in-out infinite;
  39.             background-size: 400% 400%;
  40.             z-index: 1;
  41.         }
  42.  
  43.         .animate-hit::before, .glowing-border::after {
  44.             content: "";
  45.             position: absolute;
  46.             inset: 0;
  47.             z-index: -1;
  48.         }
  49.  
  50.         .animate-hit::before {
  51.             animation: rainbow-border 5s ease-in-out infinite;
  52.             border-radius: 4px;
  53.             background: linear-gradient(270deg, #0ebeff, #ffdd40, #ae63e4, #47cf73, #0ebeff, #ffdd40, #ae63e4, #47cf73);
  54.             width: 100%;
  55.             height: 100%;
  56.             background-size: 400% 400%;
  57.         }
  58.  
  59.         .animate-hit::after {
  60.             border-radius: 3px;
  61.             margin: 3px;
  62.             background: inherit;
  63.         }
  64.  
  65.         @keyframes rainbow-border {
  66.             0% {
  67.                 background-position: 0% 50%;
  68.             }
  69.             50% {
  70.                 background-position: 100% 50%;
  71.             }
  72.             100% {
  73.                 background-position: 0% 50%;
  74.             }
  75.         }
  76.         `;
  77.  
  78.         const style = document.createElement('style');
  79.         style.type = 'text/css';
  80.         style.textContent = css;
  81.         document.head.appendChild(style);
  82.     }
  83.  
  84.     function animateHits() {
  85.         document.querySelectorAll('.ad-ext-turn-throw p.chakra-text').forEach(pElement => {
  86.             let shouldAnimate = false;
  87.             let prefix = '';
  88.             let hitNumber = 0;
  89.  
  90.             if (pElement.textContent.startsWith('T')) {
  91.                 prefix = 'T';
  92.                 hitNumber = parseInt(pElement.textContent.slice(1), 10);
  93.                 shouldAnimate = triplesToAnimate.includes(hitNumber);
  94.             } else if (pElement.textContent.startsWith('D')) {
  95.                 prefix = 'D';
  96.                 hitNumber = parseInt(pElement.textContent.slice(1), 10);
  97.                 shouldAnimate = doublesToAnimate.includes(hitNumber);
  98.             } else if (animateBull && pElement.textContent === 'BULL') {
  99.                 shouldAnimate = true;
  100.             }
  101.  
  102.             if (shouldAnimate) {
  103.                 const parentDiv = pElement.closest('.ad-ext-turn-throw');
  104.                 if (parentDiv) {
  105.                     parentDiv.classList.add('animate-hit');
  106.                     if (prefix && !pElement.innerHTML.includes('<span class="highlight">')) {
  107.                         const updatedHTML = pElement.textContent.replace(new RegExp(`^${prefix}`), `<span class="highlight">${prefix}</span>`);
  108.                         pElement.innerHTML = updatedHTML;
  109.                     } else if (pElement.textContent === 'BULL' && !pElement.innerHTML.includes('<span class="highlight">')) {
  110.                         pElement.innerHTML = '<span class="">BULL</span>';
  111.                     }
  112.                 }
  113.             }
  114.         });
  115.     }
  116.  
  117.     const observer = new MutationObserver(mutationsList => {
  118.         let isRelevantMutation = mutationsList.some(mutation =>
  119.             Array.from(mutation.addedNodes).some(node =>
  120.                 node.nodeType === Node.ELEMENT_NODE &&
  121.                 (node.matches('.chakra-text') || node.querySelector('.chakra-text'))
  122.             )
  123.         );
  124.  
  125.         if (isRelevantMutation) {
  126.             animateHits();
  127.         }
  128.     });
  129.  
  130.     function periodicCheck() {
  131.         animateHits();
  132.     }
  133.  
  134.     window.onload = () => {
  135.         injectCSS();
  136.         animateHits();
  137.         observer.observe(document.body, { childList: true, subtree: true, characterData: true });
  138.         setInterval(periodicCheck, 3000);
  139.     };
  140. })();