☰

Lotto Buttons QoL

Cleanly centers and enlarges Torn lottery Buy buttons for better mobile usability without breaking native styling.

  1. // ==UserScript==
  2. // @name         Lotto Buttons QoL
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Cleanly centers and enlarges Torn lottery Buy buttons for better mobile usability without breaking native styling.
  6. // @author       yoyo
  7. // @match        https://www.torn.com/page.php?sid=lottery
  8. // @grant        none
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.   'use strict';
  14.  
  15.   const lottos = [
  16.     {
  17.       id: 'daily-dime',
  18.       imageSel: '#daily-dime > .lottery-head-wrap > div',
  19.       buttonWrapSel: '#daily-dime > .lottery-foot-wrap .btn-wrap.silver'
  20.     },
  21.     {
  22.       id: 'lucky-shot',
  23.       imageSel: '#lucky-shot > .lottery-head-wrap > div',
  24.       buttonWrapSel: '#lucky-shot > .lottery-foot-wrap .btn-wrap.silver'
  25.     },
  26.     {
  27.       id: 'holy-grail',
  28.       imageSel: '#holy-grail > .lottery-head-wrap > div',
  29.       buttonWrapSel: '#holy-grail > .lottery-foot-wrap .btn-wrap.silver'
  30.     }
  31.   ];
  32.  
  33.   function enhanceLottoButton({ id, imageSel, buttonWrapSel }) {
  34.     const card = document.getElementById(id);
  35.     const imageContainer = document.querySelector(imageSel);
  36.     const originalButtonWrap = document.querySelector(buttonWrapSel);
  37.  
  38.     if (!card || !imageContainer || !originalButtonWrap || originalButtonWrap.classList.contains('enhanced')) return;
  39.  
  40.     // Create centered container
  41.     const newWrapper = document.createElement('div');
  42.     newWrapper.style.display = 'flex';
  43.     newWrapper.style.justifyContent = 'center';
  44.     newWrapper.style.alignItems = 'center';
  45.     newWrapper.style.padding = '10px 0';
  46.  
  47.     newWrapper.appendChild(originalButtonWrap);
  48.     imageContainer.parentElement.insertBefore(newWrapper, imageContainer);
  49.  
  50.     // Style the button
  51.     const button = originalButtonWrap.querySelector('button');
  52.     if (button) {
  53.       Object.assign(button.style, {
  54.         fontSize: '16px',
  55.         minWidth: '120px',
  56.         height: '38px',
  57.         lineHeight: '38px',
  58.         borderRadius: '6px',
  59.         background: 'linear-gradient(180deg, #555 0%, #000 100%)',
  60.         color: '#fff',
  61.         border: '1px solid #888',
  62.         textAlign: 'center',
  63.         whiteSpace: 'nowrap',
  64.         padding: '0 16px',
  65.         boxShadow: '0 0 4px rgba(255,255,255,0.1)',
  66.         cursor: 'pointer'
  67.       });
  68.  
  69.       // Hover effect
  70.       button.addEventListener('mouseenter', () => {
  71.         button.style.background = 'linear-gradient(180deg, #777 0%, #111 100%)';
  72.       });
  73.       button.addEventListener('mouseleave', () => {
  74.         button.style.background = 'linear-gradient(180deg, #555 0%, #000 100%)';
  75.       });
  76.     }
  77.  
  78.     originalButtonWrap.classList.add('enhanced');
  79.   }
  80.  
  81.   const observer = new MutationObserver(() => {
  82.     lottos.forEach(enhanceLottoButton);
  83.   });
  84.  
  85.   observer.observe(document.body, { childList: true, subtree: true });
  86.  
  87.   lottos.forEach(enhanceLottoButton);
  88. })();