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-18 提交的版本。查看最新版本。
安装此脚本 ?
提问、发表评价，或者举报这个脚本。
换行
// ==UserScript==
// @name         Animate Triple and Highlight Letters for Autodarts
// @version      0.2
// @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:not(.suggestion.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:not(.suggestion.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; }
}


.outline {
  color: currentColor;
  -webkit-text-stroke: currentColor 2px;
  -webkit-text-fill-color: transparent;
  text-stroke: currentColor 2px;
  text-fill-color: transparent;
}

        `;

    const style = document.createElement("style");
    style.textContent = css;
    document.head.appendChild(style);
  }

  function higlighter(target) {
    console.log("called higlighter");
    const toHighlight = [
      "T20",
      "T19",
      "T18",
      "T17",
      "T16",
      "T15",
      "25",
      "BULL",
    ];
    const pElement = target.querySelector("p.chakra-text");
    if (toHighlight.includes(pElement.textContent)) {
      if (target && !target.classList.contains("triple")) {
        target.classList.add("triple");
      }
    }
  }

  function outlineLetter(target) {
    console.log("called outline");
    if (!target.innerHTML.includes('<span class="outline">')) {
      const updatedHTML = target.textContent.replace(
        /([TDSM])/,
        '<span class="outline">$1</span>'
      );
      target.innerHTML = updatedHTML;
    }
  }

  function outlineAndHighlight() {
    Array.from(document.querySelectorAll(".ad-ext-turn-throw p.chakra-text"))
      .filter((el) => !el.querySelector(".outline"))
      .forEach((el) => outlineLetter(el));
    Array.from(document
      .querySelectorAll(".suggestion p.chakra-text"))
      .filter((el) => !el.querySelector(".outline"))
      .forEach((el) => outlineLetter(el));
    document
      .querySelectorAll(".ad-ext-turn-throw:not(.triple)")
      .forEach((el) => higlighter(el));
  }

  window.onload = () => {
    injectCSS();
    setInterval(outlineAndHighlight, 50);
  };
})();
欢迎访问Greasy Fork镜像
