Animate Triple and Highlight Letters for Autodarts

SLAM that Triple down and make it shine, also makes the letters have an outline to better distinguish them from the numbers
目前为 2024-06-15 提交的版本。查看最新版本。
安装此脚本 ?
提问、发表评价，或者举报这个脚本。
换行
// ==UserScript==
// @name         Animate Triple and Highlight Letters for Autodarts
// @version      0.1.1
// @description  SLAM that Triple down and make it shine, also makes the letters have an outline to better distinguish them from the numbers
// @author       Dotty
// @match        *://play.autodarts.io/*
// @grant        none
// @license      MIT
// @namespace    https://gf.qytechs.cn/en/users/913506-dotty-dev
// ==/UserScript==

(function () {
  "use strict";

  function injectCSS() {
    const css = /*css*/ `

.triple {
  -webkit-mask:linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/300% 100%;
  background-repeat: no-repeat;
  animation: shimmer 3s infinite, rattle 0.5s;
  animation-delay: 2s;
  overflow: visible;
}

.triple p {
  animation: slam 2s;
  animation-timing-function: ease-in;
  font-weight: 900 !important;
}

@keyframes shimmer {
  100% {-webkit-mask-position:left}
}

@keyframes slam
{
  0%
  {
    transform: scale(10, 10);
    opacity: 0;
  }

  40%
  {
    opacity: 0;
  }

  100%
  {
    transform: scale(1, 1);
    opacity: 1;
  }
}

@keyframes rattle
{
  0% { margin-top: 0; margin-left: 0; }
  10% { margin-top: -5px; margin-left: 0; }
  20% { margin-top: 0; margin-left: -5px; }
  30% { margin-top: 5px; margin-left: 0; }
  40% { margin-top: 0; margin-left: 5px; }
  50% { margin-top: -2px; margin-left: 0; }
  60% { margin-top: 0; margin-left: -2px; }
  70% { margin-top: 2px; margin-left: 0; }
  80% { margin-top: 0; margin-left: 2px; }
  90% { margin-top: -1px; margin-left: 0; }
  100% { margin-top: 0; margin-left: 0; }
}

.highlight {
  color: white;
  -webkit-text-stroke: white 2px;
  -webkit-text-fill-color: transparent;
  text-stroke: white 2px;
  text-fill-color: transparent;
}
        `;

    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 (
          ["T20", "T19", "T18", "T17", "T16", "T15", "25", "BULL"].includes(
            pElement.textContent
          )
        ) {
          const parentDiv = pElement.closest(".ad-ext-turn-throw");
          if (parentDiv) {
            parentDiv.classList.add("triple");
            if (!pElement.innerHTML.includes('<span class="highlight">')) {
              const updatedHTML = pElement.textContent.replace(
                /^T/,
                '<span class="highlight">T</span>'
              );
              pElement.innerHTML = updatedHTML;
            }
          }
        }
      });
  }

  function highlightLetter() {
    document
      .querySelectorAll(".ad-ext-turn-throw p.chakra-text")
      .forEach((pElement) => {
        if (!pElement.innerHTML.includes('<span class="highlight">')) {
              const updatedHTML = pElement.textContent.replace(
                /([TDSM])/,
                '<span class="highlight">$1</span>'
              );
              pElement.innerHTML = updatedHTML;
            }
      });

      document
      .querySelectorAll(".suggestion p.chakra-text")
      .forEach((pElement) => {
        if (!pElement.innerHTML.includes('<span class="highlight">')) {
              const updatedHTML = pElement.textContent.replace(
                /([TDSM])/,
                '<span class="highlight">$1</span>'
              );
              pElement.innerHTML = updatedHTML;
            }
      });
  }

  const observer = new MutationObserver((mutationsList) => {
    let isRelevantMutation = mutationsList.some((mutation) =>
      mutation.target.classList ? mutation.target?.classList.contains("ad-ext-turn-throw") || mutation.target?.classList.contains("suggestion") : false
    );


    if (isRelevantMutation) {
      animateTriple();
      highlightLetter();
    }
  });

  // function periodicCheck() {
  //   animateTriple();
  //   removeS();
  // }

  window.onload = () => {
    injectCSS();
    animateTriple();
    highlightLetter();
    observer.observe(document.body, {
      childList: true,
      subtree: true,
      characterData: true,
    });
    // setInterval(periodicCheck, 50);
    setTimeout(animateTriple, 3000);
    setTimeout(highlightLetter, 3000);
  };
})();
欢迎访问Greasy Fork镜像
