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();
}
})();