Torn.com Background Theme Editor

Change Torn's background with predefined themes and custom colors

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey, Greasemonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да инсталирате разширение, като например Tampermonkey .

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Userscripts.

За да инсталирате скрипта, трябва да инсталирате разширение като Tampermonkey.

За да инсталирате този скрипт, трябва да имате инсталиран скриптов мениджър.

(Вече имам скриптов мениджър, искам да го инсталирам!)

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

(Вече имам инсталиран мениджър на стиловете, искам да го инсталирам!)

// ==UserScript==
// @name         Torn.com Background Theme Editor
// @namespace    http://tampermonkey.net/
// @version      1.5
// @description  Change Torn's background with predefined themes and custom colors
// @author       TR0LL [2561502]
// @match        https://www.torn.com/*
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_deleteValue
// @license      Proprietary
// ==/UserScript==

(function() {
  "use strict";

  const CONFIG = {
    defaultBgColor: "#191919",
    darkModeBgColor: "#242424",
    selectorContentContainer: ".content.responsive-sidebar-container.logged-in",
    themes: {
      pureBlack: { name: "Pure Black", color: "#000000" },
      midnightBlue: { name: "Midnight Blue", color: "#1a2a42" },
      princess: { name: "Princess", color: "#c80e71" },
      custom: { name: "Custom", color: null }
    }
  };

  const state = {
    bgColor: GM_getValue("bgColor", "#191919"),
    currentTheme: GM_getValue("currentTheme", null),
    isObserving: false,
    isPanelVisible: false
  };

  const domCache = { contentContainer: null, bodyElement: null };

  function getContentContainer() {
    return domCache.contentContainer || (domCache.contentContainer = document.querySelector(CONFIG.selectorContentContainer));
  }

  function getBodyElement() {
    return domCache.bodyElement || (domCache.bodyElement = document.getElementById('body') || document.body);
  }

  function throttle(func, delay) {
    let lastCall = 0;
    return function(...args) {
      const now = Date.now();
      if (now - lastCall >= delay) {
        lastCall = now;
        func.apply(this, args);
      }
    };
  }

  function isDarkModeActive() {
    const bodyElement = getBodyElement();
    return bodyElement && bodyElement.classList.contains('dark-mode');
  }

  function getAutoDetectedColor() {
    return isDarkModeActive() ? CONFIG.darkModeBgColor : CONFIG.defaultBgColor;
  }

  function applyBackgroundColor(color) {
    const contentContainer = getContentContainer();
    if (contentContainer) {
      contentContainer.style.backgroundColor = color;
      return true;
    }
    return false;
  }

  function saveBackgroundColor(color, themeName = null) {
    if (!/^#[0-9A-F]{6}$/i.test(color)) return false;
    state.bgColor = color;
    GM_setValue("bgColor", color);
    if (themeName !== undefined) {
      state.currentTheme = themeName;
      GM_setValue("currentTheme", themeName);
    }
    return applyBackgroundColor(color);
  }

  function getCurrentThemeColor() {
    if (state.currentTheme === "custom") {
      return state.bgColor;
    } else if (state.currentTheme && CONFIG.themes[state.currentTheme]) {
      return CONFIG.themes[state.currentTheme].color;
    } else {
      return getAutoDetectedColor();
    }
  }

  const observer = new MutationObserver((mutations) => {
    const shouldReapply = mutations.some(mutation =>
      (mutation.type === 'childList' && mutation.addedNodes.length > 0) ||
      (mutation.type === 'attributes' &&
       (mutation.attributeName === 'style' ||
        mutation.attributeName === 'class'))
    );

    if (shouldReapply && state.currentTheme) {
      applyBackgroundColor(getCurrentThemeColor());
    }
  });

  function startObserving() {
    if (state.isObserving) return;

    const contentContainer = getContentContainer();
    if (contentContainer) {
      observer.observe(contentContainer, {
        attributes: true,
        attributeFilter: ['style', 'class'],
        childList: true,
        subtree: false
      });

      const bodyElement = getBodyElement();
      if (bodyElement) {
        observer.observe(bodyElement, {
          attributes: true,
          attributeFilter: ['class'],
          subtree: false
        });
      }

      state.isObserving = true;
    }
  }

  function createUI() {
    addStyles();

    const toggleButton = document.createElement("div");
    toggleButton.className = "bg-theme-toggle";
    toggleButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>`;
    document.body.appendChild(toggleButton);

    const panel = document.createElement("div");
    panel.id = "bg-theme-panel";
    panel.className = "bg-theme-panel";

    let panelHTML = `
      <div class="bg-theme-header">
        <span>Background Theme</span>
        <span class="bg-theme-close">×</span>
      </div>
      <div class="bg-theme-content">
        <div class="bg-theme-group">
          <label for="bg-theme-select">Theme:</label>
          <select id="bg-theme-select" class="bg-theme-select">`;

    Object.keys(CONFIG.themes).forEach(themeKey => {
      const selected = themeKey === state.currentTheme ? 'selected' : '';
      panelHTML += `<option value="${themeKey}" ${selected}>${CONFIG.themes[themeKey].name}</option>`;
    });

    panelHTML += `
          </select>
        </div>

        <div id="custom-color-group" class="bg-theme-group" style="display: ${state.currentTheme === 'custom' ? 'block' : 'none'}">
          <label for="bg-theme-color">Custom Color:</label>
          <div class="bg-theme-color-preview" id="color-preview"></div>
          <div class="bg-theme-color-inputs">
            <input type="color" id="bg-theme-color-picker" value="${state.bgColor}">
            <input type="text" id="bg-theme-hex" value="${state.bgColor}" placeholder="#RRGGBB">
          </div>
        </div>

        <div class="bg-theme-buttons">
          <button id="bg-theme-reset" class="bg-theme-button">Reset to Default</button>
          <button id="bg-theme-save" class="bg-theme-button bg-theme-save">Save</button>
        </div>

        <div id="bg-theme-save-indicator" class="bg-theme-save-indicator">Saved!</div>
        <div class="bg-theme-credit">TR0LL [2561502]</div>
      </div>
    `;

    panel.innerHTML = panelHTML;
    document.body.appendChild(panel);

    const themeSelect = document.getElementById('bg-theme-select');
    const colorGroup = document.getElementById('custom-color-group');
    const colorPreview = document.getElementById('color-preview');
    const colorPicker = document.getElementById('bg-theme-color-picker');
    const hexInput = document.getElementById('bg-theme-hex');
    const resetButton = document.getElementById('bg-theme-reset');
    const saveButton = document.getElementById('bg-theme-save');
    const saveIndicator = document.getElementById('bg-theme-save-indicator');

    colorPreview.style.backgroundColor = state.bgColor;

    toggleButton.addEventListener('click', () => {
      state.isPanelVisible = !state.isPanelVisible;
      panel.classList.toggle('visible', state.isPanelVisible);
    });

    panel.querySelector('.bg-theme-close').addEventListener('click', () => {
      state.isPanelVisible = false;
      panel.classList.remove('visible');
    });

    themeSelect.addEventListener('change', function() {
      const selectedTheme = this.value;
      state.currentTheme = selectedTheme;
      colorGroup.style.display = selectedTheme === 'custom' ? 'block' : 'none';

      if (selectedTheme === 'custom') {
        colorPicker.value = state.bgColor;
        hexInput.value = state.bgColor;
        colorPreview.style.backgroundColor = state.bgColor;
        applyBackgroundColor(state.bgColor);
      } else if (selectedTheme && CONFIG.themes[selectedTheme]) {
        const themeColor = CONFIG.themes[selectedTheme].color;
        colorPicker.value = themeColor;
        hexInput.value = themeColor;
        colorPreview.style.backgroundColor = themeColor;
        applyBackgroundColor(themeColor);
      }
    });

    const throttledColorApply = throttle((newColor) => {
      state.bgColor = newColor;
      hexInput.value = newColor;
      colorPreview.style.backgroundColor = newColor;
      applyBackgroundColor(newColor);
    }, 50);

    colorPicker.addEventListener('input', function() {
      throttledColorApply(this.value);
    });

    colorPicker.addEventListener('change', function() {
      const newColor = this.value;
      state.bgColor = newColor;
      hexInput.value = newColor;
      colorPreview.style.backgroundColor = newColor;
      applyBackgroundColor(newColor);
    });

    hexInput.addEventListener('input', function() {
      let value = this.value;
      if (!value.startsWith('#') && value.length > 0) {
        value = '#' + value;
        this.value = value;
      }
      if (/^#[0-9A-Fa-f]{6}$/i.test(value)) {
        colorPicker.value = value;
        colorPreview.style.backgroundColor = value;
        state.bgColor = value;
        applyBackgroundColor(value);
      }
    });

    resetButton.addEventListener('click', () => {
      applyBackgroundColor('');
      state.currentTheme = null;
      GM_setValue("currentTheme", null);

      const themeSelect = document.getElementById('bg-theme-select');
      if (themeSelect) {
        themeSelect.selectedIndex = -1;
      }

      const colorGroup = document.getElementById('custom-color-group');
      if (colorGroup) {
        colorGroup.style.display = 'none';
      }

      const saveIndicator = document.getElementById('bg-theme-save-indicator');
      if (saveIndicator) {
        saveIndicator.textContent = "Reset! Using default background.";
        saveIndicator.classList.add('visible');
        setTimeout(() => {
          saveIndicator.textContent = "Saved!";
          saveIndicator.classList.remove('visible');
        }, 2000);
      }
    });

    saveButton.addEventListener('click', () => {
      if (state.currentTheme === 'custom') {
        saveBackgroundColor(colorPicker.value, 'custom');
      } else if (state.currentTheme && CONFIG.themes[state.currentTheme]) {
        saveBackgroundColor(CONFIG.themes[state.currentTheme].color, state.currentTheme);
      }

      saveIndicator.classList.add('visible');
      setTimeout(() => {
        saveIndicator.classList.remove('visible');
      }, 2000);

      state.isPanelVisible = false;
      panel.classList.remove('visible');
    });

    return panel;
  }

  function addStyles() {
    const styleElement = document.createElement('style');
    styleElement.textContent = `.bg-theme-toggle{position:fixed;right:10px;top:100px;width:32px;height:32px;background-color:#333;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:9998;box-shadow:0 2px 5px rgba(0,0,0,.3);transition:transform .2s}.bg-theme-toggle:hover{transform:scale(1.1)}.bg-theme-panel{position:fixed;right:-250px;top:100px;width:220px;background-color:#222;border-radius:5px;z-index:9999;box-shadow:0 4px 10px rgba(0,0,0,.3);color:#eee;font-family:Arial,sans-serif;font-size:13px;transition:right .3s ease}.bg-theme-panel.visible{right:10px}.bg-theme-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;border-bottom:1px solid #444;font-weight:700}.bg-theme-close{cursor:pointer;font-size:20px;width:20px;height:20px;line-height:20px;text-align:center}.bg-theme-close:hover{color:#f44}.bg-theme-content{padding:15px}.bg-theme-group{margin-bottom:15px}.bg-theme-group label{display:block;margin-bottom:5px;font-weight:700;color:#ccc}.bg-theme-select{width:100%;padding:7px;background-color:#333;border:1px solid #444;color:#eee;border-radius:3px}.bg-theme-color-preview{height:25px;width:100%;margin-bottom:8px;border:1px solid #444;border-radius:3px}.bg-theme-color-inputs{display:flex;gap:8px}#bg-theme-color-picker{width:40px;height:30px;padding:0;border:1px solid #444;cursor:pointer}#bg-theme-hex{flex:1;padding:6px 8px;background-color:#333;border:1px solid #444;color:#eee;border-radius:3px;font-family:monospace}.bg-theme-buttons{display:flex;gap:10px;margin-top:15px}.bg-theme-button{flex:1;padding:8px 0;background-color:#444;border:none;border-radius:3px;color:#eee;font-weight:700;cursor:pointer;transition:background-color .2s}.bg-theme-button:hover{background-color:#555}.bg-theme-save{background-color:#4caf50}.bg-theme-save:hover{background-color:#3e8e41}.bg-theme-save-indicator{text-align:center;margin-top:10px;color:#4caf50;opacity:0;transition:opacity .3s;font-weight:700}.bg-theme-save-indicator.visible{opacity:1}.bg-theme-credit{margin-top:10px;text-align:center;font-size:11px;color:#777}@media (max-width:768px){.bg-theme-toggle{width:28px;height:28px;right:5px;top:70px}.bg-theme-panel{width:190px}.bg-theme-panel.visible{right:5px}}`;
    document.head.appendChild(styleElement);
  }

  function init() {
    if (state.currentTheme) {
      const currentColor = getCurrentThemeColor();

      if (!applyBackgroundColor(currentColor)) {
        window.addEventListener("DOMContentLoaded", () => {
          applyBackgroundColor(getCurrentThemeColor());
          startObserving();
        });
      } else {
        startObserving();
      }
    } else {
      startObserving();
    }

    const currentUrl = window.location.href;
    if (currentUrl.includes("/preferences.php") || currentUrl.includes("/profiles.php?XID=")) {
      if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", createUI);
      } else {
        createUI();
      }
    }
  }

  init();
})();