Big chain timer

Large chain timer when counting down, colour changing.
换行
// ==UserScript==
// @name         Big chain timer
// @namespace    big chain timer
// @version      1.2.0
// @description  Large chain timer when counting down, colour changing.
// @author       Pint-Shot-Riot
// @match        https://www.torn.com/*
// @license      MIT
// @grant        none
// ==/UserScript==

(() => {
  'use strict';

  const STYLE_ID = 'bigger-active-chain-timer-style';
  const BIG_CLASS = 'chain-timer-big';
  const STATS_BIG_CLASS = 'chain-stats-big';
  const GREEN_CLASS = 'chain-timer-green';
  const WARNING_CLASS = 'chain-timer-warning';
  const CRITICAL_CLASS = 'chain-timer-critical';
  const FLASH_CLASS = 'chain-timer-flash';

  function addStyle() {
    if (document.getElementById(STYLE_ID)) return;

    const style = document.createElement('style');
    style.id = STYLE_ID;
    style.textContent = `
      .${BIG_CLASS} {
        display: block !important;
        flex-basis: 100% !important;
        width: 100% !important;
        font-size: 60px !important;
        line-height: 1 !important;
        height: 62px !important;
        margin-top: 10px !important;
        margin-left: 0 !important;
        position: relative !important;
        left: 0 !important;
      }

      .${STATS_BIG_CLASS} {
        flex-wrap: wrap !important;
      }

      .${GREEN_CLASS} {
        color: #00ff00 !important;
        text-shadow: -3px -3px 5px rgba(0, 255, 0, .15), 3px 3px 5px rgba(0, 255, 0, .15) !important;
      }

      .${WARNING_CLASS} {
        color: yellow !important;
        text-shadow: -3px -3px 5px rgba(255, 255, 0, .15), 3px 3px 5px rgba(255, 255, 0, .15) !important;
      }

      .${CRITICAL_CLASS} {
        color: #ff3333 !important;
        text-shadow: -3px -3px 5px rgba(255, 51, 51, .15), 3px 3px 5px rgba(255, 51, 51, .15) !important;
      }

      @keyframes subtleUrgentPulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.08); }
        100% { transform: scale(1); }
      }

      .${FLASH_CLASS} {
        display: inline-block !important;
        transform-origin: center center !important;
        animation: subtleUrgentPulse 0.75s infinite !important;
      }
    `;
    document.head.appendChild(style);
  }

  function getSecondsRemaining(text) {
    const parts = text.trim().split(':');

    if (parts.length !== 2) {
      return null;
    }

    const minutes = parseInt(parts[0], 10);
    const seconds = parseInt(parts[1], 10);

    if (Number.isNaN(minutes) || Number.isNaN(seconds)) {
      return null;
    }

    return (minutes * 60) + seconds;
  }

  function isActiveTimerText(text) {
    const trimmed = text.trim();

    return trimmed !== ''
      && trimmed !== '0'
      && trimmed !== '00'
      && trimmed !== '0:00'
      && trimmed !== '00:00'
      && trimmed !== '00:00:00';
  }

  function getTimerElement() {
    return document.querySelector('[class*="bar-timeleft"]');
  }

  function getSpeedElement() {
    return document.querySelector('[class*="speed___"]');
  }

  function updateTimerSize() {
    const timer = getTimerElement();
    if (!timer) return;

    const speed = getSpeedElement();
    const stats = timer.closest('[class*="bar-stats"]');
    const isActive = isActiveTimerText(timer.textContent);
    const secondsLeft = getSecondsRemaining(timer.textContent);

    let isGreen = false;
    let isYellow = false;
    let isRed = false;
    let shouldFlash = false;

    if (isActive && secondsLeft !== null) {
      if (secondsLeft <= 15) {
        isRed = true;
        shouldFlash = true;
      } else if (secondsLeft <= 60) {
        isRed = true;
      } else if (secondsLeft <= 120) {
        isYellow = true;
      } else {
        isGreen = true;
      }
    }

    timer.classList.toggle(BIG_CLASS, isActive);
    timer.classList.toggle(GREEN_CLASS, isGreen);
    timer.classList.toggle(WARNING_CLASS, isYellow);
    timer.classList.toggle(CRITICAL_CLASS, isRed);
    timer.classList.toggle(FLASH_CLASS, shouldFlash);

    if (stats) {
      stats.classList.toggle(STATS_BIG_CLASS, isActive);
    }

    if (speed) {
      speed.style.top = isActive ? 'auto' : '';
    }
  }

  function start() {
    addStyle();
    updateTimerSize();

    const observer = new MutationObserver(updateTimerSize);

    observer.observe(document.body, {
      childList: true,
      subtree: true,
      characterData: true
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', start);
  } else {
    start();
  }
})();