☰

Vendor (Optimized)

Custom styling panel for ecsr.io - Optimized version

// ==UserScript==
// @name         Vendor (Optimized)
// @namespace    https://ecsr.io/
// @version      2.0.0
// @description  Custom styling panel for ecsr.io - Optimized version
// @author       ZyyScripts (https://github.com/ZyyScripts) - Optimized by Cascade
// @match        https://ecsr.io/*
// @icon         https://i.imgur.com/lKe4ks1.png
// @grant        none
// @license      MIT
// ==/UserScript==

(() => {
  'use strict';

  // Configuration with validation
  const defaultConfig = {
    bgMedia: '',
    font: 'Arial, sans-serif',
    radius: 0,
    noAds: false,
    noAlerts: false,
    panelPosition: { x: 20, y: 20 }
  };

  let config = {};
  let observers = [];
  let eventListeners = [];

  // Safe config loading with validation
  function loadConfig() {
    try {
      const stored = localStorage.getItem('vendor');
      config = Object.assign({}, defaultConfig, stored ? JSON.parse(stored) : {});

      // Validate config values
      config.radius = Math.max(0, Math.min(50, Number(config.radius) || 0));
      config.font = typeof config.font === 'string' ? config.font : defaultConfig.font;
      config.panelPosition = config.panelPosition || defaultConfig.panelPosition;
    } catch (e) {
      console.warn('Vendor: Failed to load config, using defaults:', e);
      config = { ...defaultConfig };
    }
  }

  function saveConfig() {
    try {
      localStorage.setItem('vendor', JSON.stringify(config));
    } catch (e) {
      console.error('Vendor: Failed to save config:', e);
    }
  }

  // Debounced save function
  const debouncedSave = debounce(saveConfig, 300);

  function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
      const later = () => {
        clearTimeout(timeout);
        func(...args);
      };
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    };
  }

  // CSS injection with better performance
  function injectStyle() {
    const styleId = 'vendor-style';
    let style = document.getElementById(styleId);

    if (!style) {
      style = document.createElement('style');
      style.id = styleId;
      document.head.appendChild(style);
    }

    // Use CSS custom properties for better performance
    style.textContent = `
      @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Share+Tech+Mono&family=Orbitron&family=Pixelify+Sans:wght@400;700&display=swap');

      :root {
        --vendor-font: ${CSS.escape(config.font)};
        --vendor-radius: ${config.radius}px;
        --vendor-bg: ${config.bgMedia ? `url("${CSS.escape(config.bgMedia)}")` : 'none'};
      }

      html, body {
        font-family: var(--vendor-font) !important;
        ${config.bgMedia ? `
          background: var(--vendor-bg) no-repeat center center fixed !important;
          background-size: cover !important;
        ` : ''}
      }

      body *:not(#vendor-panel, #vendor-panel *, .vendor-exclude) {
        font-family: var(--vendor-font) !important;
        border-radius: var(--vendor-radius) !important;
      }

      #vendor-panel {
        position: fixed;
        top: ${config.panelPosition.y}%;
        left: ${config.panelPosition.x}%;
        width: min(500px, 90vw);
        max-height: 80vh;
        overflow-y: auto;
        background: rgba(51, 51, 51, 0.95);
        backdrop-filter: blur(10px);
        border: 2px solid #000;
        padding: 0;
        z-index: 99999;
        color: #fff;
        font-family: var(--vendor-font);
        box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        border-radius: calc(var(--vendor-radius) + 5px);
        transition: all 0.3s ease;
      }

      #vendor-panel .header {
        background: linear-gradient(135deg, #000, #333);
        padding: 12px 15px;
        font-weight: bold;
        font-size: 16px;
        text-align: center;
        color: #fff;
        cursor: move;
        user-select: none;
        border-radius: calc(var(--vendor-radius) + 3px) calc(var(--vendor-radius) + 3px) 0 0;
      }

      #vendor-panel .content {
        padding: 15px;
      }

      #vendor-panel .row {
        margin-bottom: 12px;
        display: flex;
        flex-direction: column;
        gap: 5px;
      }

      #vendor-panel label {
        font-weight: 500;
        font-size: 14px;
      }

      #vendor-panel select,
      #vendor-panel input[type="range"],
      #vendor-panel input[type="file"] {
        width: 100%;
        padding: 8px;
        border: 1px solid #555;
        border-radius: 4px;
        background: #222;
        color: #fff;
        font-family: inherit;
      }

      #vendor-panel input[type="checkbox"] {
        margin-right: 8px;
        transform: scale(1.2);
      }

      #vendor-panel .actions {
        display: flex;
        gap: 10px;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid #555;
      }

      #vendor-panel button {
        flex: 1;
        padding: 10px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.2s ease;
      }

      #vendor-panel #save {
        background: #4CAF50;
        color: white;
      }

      #vendor-panel #save:hover {
        background: #45a049;
      }

      #vendor-panel #reset {
        background: #f44336;
        color: white;
      }

      #vendor-panel #reset:hover {
        background: #da190b;
      }

      #vendor-panel #close-panel {
        float: right;
        cursor: pointer;
        padding: 0 5px;
        border-radius: 3px;
        transition: background 0.2s ease;
      }

      #vendor-panel #close-panel:hover {
        background: rgba(255, 255, 255, 0.2);
      }

      .vendor-range-value {
        font-size: 12px;
        color: #ccc;
        text-align: right;
      }

      /* Hide elements based on config */
      ${config.noAds ? `
        [class*="adWrapper"],
        [class*="ad-"],
        .advertisement,
        [data-ad] {
          display: none !important;
        }
      ` : ''}

      ${config.noAlerts ? `
        .alertBg-0-2-19,
        [class*="alert"],
        .notification-popup {
          display: none !important;
        }
      ` : ''}

      /* Responsive design */
      @media (max-width: 768px) {
        #vendor-panel {
          width: 95vw;
          left: 2.5% !important;
          top: 10% !important;
        }
      }
    `;
  }

  // Optimized DOM updates using CSS custom properties
  function updateStyles() {
    const root = document.documentElement;
    root.style.setProperty('--vendor-font', config.font);
    root.style.setProperty('--vendor-radius', `${config.radius}px`);
    root.style.setProperty('--vendor-bg', config.bgMedia ? `url("${config.bgMedia}")` : 'none');
  }

  // Enhanced panel creation with better event handling
  function createPanel() {
    if (document.getElementById('vendor-panel')) return;

    const panel = document.createElement('div');
    panel.id = 'vendor-panel';
    panel.style.display = 'none';
    panel.className = 'vendor-exclude';

    const fontOptions = [
      'Arial, sans-serif',
      'Verdana, sans-serif',
      'Tahoma, sans-serif',
      'Trebuchet MS, sans-serif',
      'Courier New, monospace',
      'Georgia, serif',
      "'Press Start 2P', monospace",
      "'VT323', monospace",
      "'Share Tech Mono', monospace",
      "'Orbitron', sans-serif",
      "'Pixelify Sans', cursive"
    ];

    panel.innerHTML = `
      <div class="header">
        Vendor
        <span id="close-panel" title="Close Panel">✖</span>
      </div>
      <div class="content">
        <div class="row">
          <label for="font-select">Font Family:</label>
          <select id="font-select">
            ${fontOptions.map(font =>
              `<option value="${font}" ${config.font === font ? 'selected' : ''}>
                ${font.replace(/['"]/g, '').replace(/,.*/, '')}
              </option>`
            ).join('')}
          </select>
        </div>

        <div class="row">
          <label for="radius">Border Radius:</label>
          <input id="radius" type="range" min="0" max="50" value="${config.radius}" step="1">
          <div class="vendor-range-value">${config.radius}px</div>
        </div>

        <div class="row">
          <label>
            <input id="ads" type="checkbox" ${config.noAds ? 'checked' : ''}>
            Hide Advertisements
          </label>
        </div>

        <div class="row">
          <label>
            <input id="alerts" type="checkbox" ${config.noAlerts ? 'checked' : ''}>
            Hide Alert Notifications
          </label>
        </div>

        <div class="row">
          <label for="bg-file">Background Image:</label>
          <input id="bg-file" type="file" accept="image/*" aria-describedby="bg-help">
          <small id="bg-help" style="color: #ccc; font-size: 12px;">
            Supports JPG, PNG, GIF, WebP (max 5MB)
          </small>
        </div>

        <div class="actions">
          <button id="save" type="button">Apply Changes</button>
          <button id="reset" type="button">Reset to Default</button>
        </div>
      </div>
    `;

    document.body.appendChild(panel);
    setupPanelEvents(panel);
  }

  // Centralized event handling with cleanup
  function setupPanelEvents(panel) {
    const elements = {
      closeBtn: panel.querySelector('#close-panel'),
      fontSelect: panel.querySelector('#font-select'),
      radiusInput: panel.querySelector('#radius'),
      radiusValue: panel.querySelector('.vendor-range-value'),
      adsCheckbox: panel.querySelector('#ads'),
      alertsCheckbox: panel.querySelector('#alerts'),
      bgFileInput: panel.querySelector('#bg-file'),
      saveBtn: panel.querySelector('#save'),
      resetBtn: panel.querySelector('#reset'),
      header: panel.querySelector('.header')
    };

    // Close panel
    const closeHandler = () => panel.style.display = 'none';
    elements.closeBtn.addEventListener('click', closeHandler);
    eventListeners.push({ element: elements.closeBtn, event: 'click', handler: closeHandler });

    // Font selection with validation
    const fontHandler = (e) => {
      const selectedFont = e.target.value;
      if (fontOptions.includes(selectedFont)) {
        config.font = selectedFont;
        updateStyles();
        debouncedSave();
      }
    };
    elements.fontSelect.addEventListener('change', fontHandler);
    eventListeners.push({ element: elements.fontSelect, event: 'change', handler: fontHandler });

    // Radius with live preview and validation
    const radiusHandler = (e) => {
      const value = Math.max(0, Math.min(50, parseInt(e.target.value) || 0));
      config.radius = value;
      elements.radiusValue.textContent = `${value}px`;
      updateStyles();
      debouncedSave();
    };
    elements.radiusInput.addEventListener('input', radiusHandler);
    eventListeners.push({ element: elements.radiusInput, event: 'input', handler: radiusHandler });

    // Checkboxes
    const adsHandler = (e) => {
      config.noAds = e.target.checked;
      debouncedSave();
    };
    elements.adsCheckbox.addEventListener('change', adsHandler);
    eventListeners.push({ element: elements.adsCheckbox, event: 'change', handler: adsHandler });

    const alertsHandler = (e) => {
      config.noAlerts = e.target.checked;
      debouncedSave();
    };
    elements.alertsCheckbox.addEventListener('change', alertsHandler);
    eventListeners.push({ element: elements.alertsCheckbox, event: 'change', handler: alertsHandler });

    // File upload with validation and error handling
    const fileHandler = (e) => {
      const file = e.target.files?.[0];
      if (!file) return;

      // Validate file
      const maxSize = 100 * 3840 * 2160; // 5MB
      const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];

      if (file.size > maxSize) {
        alert('File too large. Please select an image under 5MB.');
        e.target.value = '';
        return;
      }

      if (!allowedTypes.includes(file.type)) {
        alert('Invalid file type. Please select a JPG, PNG, GIF, or WebP image.');
        e.target.value = '';
        return;
      }

      const reader = new FileReader();
      reader.onload = (ev) => {
        try {
          config.bgMedia = ev.target.result;
          updateStyles();
          debouncedSave();
        } catch (error) {
          console.error('Vendor: Failed to process image:', error);
          alert('Failed to process image. Please try a different file.');
        }
      };
      reader.onerror = () => {
        console.error('Vendor: Failed to read file');
        alert('Failed to read file. Please try again.');
      };
      reader.readAsDataURL(file);
    };
    elements.bgFileInput.addEventListener('change', fileHandler);
    eventListeners.push({ element: elements.bgFileInput, event: 'change', handler: fileHandler });

    // Save and reset with user feedback
    const saveHandler = () => {
      try {
        injectStyle();
        updateStyles();
        saveConfig();

        // Visual feedback
        elements.saveBtn.textContent = 'Saved!';
        elements.saveBtn.style.background = '#2196F3';
        setTimeout(() => {
          elements.saveBtn.textContent = 'Apply Changes';
          elements.saveBtn.style.background = '#4CAF50';
        }, 1000);

        // Reload only if necessary (ads/alerts changed)
        if (config.noAds || config.noAlerts) {
          setTimeout(() => location.reload(), 1200);
        }
      } catch (error) {
        console.error('Vendor: Save failed:', error);
        alert('Failed to save settings. Please try again.');
      }
    };
    elements.saveBtn.addEventListener('click', saveHandler);
    eventListeners.push({ element: elements.saveBtn, event: 'click', handler: saveHandler });

    const resetHandler = () => {
      if (confirm('Reset all settings to default? This will reload the page.')) {
        try {
          localStorage.removeItem('vendor');
          config = { ...defaultConfig };
          updateStyles();
          injectStyle();
          location.reload();
        } catch (error) {
          console.error('Vendor: Reset failed:', error);
          alert('Failed to reset settings. Please try again.');
        }
      }
    };
    elements.resetBtn.addEventListener('click', resetHandler);
    eventListeners.push({ element: elements.resetBtn, event: 'click', handler: resetHandler });

    // Enhanced draggable functionality
    setupDraggable(panel, elements.header);
  }

  // Improved draggable with position persistence
  function setupDraggable(panel, header) {
    let isDragging = false;
    let startX, startY, startLeft, startTop;

    const mouseDownHandler = (e) => {
      isDragging = true;
      startX = e.clientX;
      startY = e.clientY;
      startLeft = panel.offsetLeft;
      startTop = panel.offsetTop;

      header.style.cursor = 'grabbing';
      document.body.style.userSelect = 'none';
    };

    const mouseMoveHandler = (e) => {
      if (!isDragging) return;

      e.preventDefault();
      const deltaX = e.clientX - startX;
      const deltaY = e.clientY - startY;

      let newLeft = startLeft + deltaX;
      let newTop = startTop + deltaY;

      // Constrain to viewport
      const maxLeft = window.innerWidth - panel.offsetWidth;
      const maxTop = window.innerHeight - panel.offsetHeight;

      newLeft = Math.max(0, Math.min(newLeft, maxLeft));
      newTop = Math.max(0, Math.min(newTop, maxTop));

      panel.style.left = `${newLeft}px`;
      panel.style.top = `${newTop}px`;
    };

    const mouseUpHandler = () => {
      if (isDragging) {
        isDragging = false;
        header.style.cursor = 'move';
        document.body.style.userSelect = '';

        // Save position as percentage
        config.panelPosition = {
          x: (panel.offsetLeft / window.innerWidth) * 100,
          y: (panel.offsetTop / window.innerHeight) * 100
        };
        debouncedSave();
      }
    };

    header.addEventListener('mousedown', mouseDownHandler);
    document.addEventListener('mousemove', mouseMoveHandler);
    document.addEventListener('mouseup', mouseUpHandler);

    eventListeners.push(
      { element: header, event: 'mousedown', handler: mouseDownHandler },
      { element: document, event: 'mousemove', handler: mouseMoveHandler },
      { element: document, event: 'mouseup', handler: mouseUpHandler }
    );
  }

  // Optimized navigation tab injection using MutationObserver
  function addNavTab() {
    if (document.getElementById('vendor-tab')) return;

    const selectors = [
      '.navContainer-0-2-2 .row .col-0-2-15 .row',
      '.row:has(.linkEntry-0-2-13)',
      'nav .row'
    ];

    for (const selector of selectors) {
      try {
        const navRow = document.querySelector(selector);
        if (navRow) {
          const tab = document.createElement('div');
          tab.innerHTML = `<a id="vendor-tab" class="linkEntry-0-2-13 nav-link pt-0 vendor-exclude" href="#" title="Open Vendor Panel">Vendor</a>`;
          navRow.appendChild(tab);

          const clickHandler = (e) => {
            e.preventDefault();
            const panel = document.getElementById('vendor-panel');
            if (panel) {
              const isVisible = panel.style.display !== 'none';
              panel.style.display = isVisible ? 'none' : 'block';
            }
          };

          const tabLink = tab.querySelector('#vendor-tab');
          tabLink.addEventListener('click', clickHandler);
          eventListeners.push({ element: tabLink, event: 'click', handler: clickHandler });

          return true;
        }
      } catch (e) {
        console.warn('Vendor: Failed to find nav with selector:', selector);
      }
    }
    return false;
  }

  // Comprehensive logo replacement for all instances of ECSR logo URL



  // Optimized initialization using MutationObserver
  function observeDOM() {
    const observer = new MutationObserver((mutations) => {
      let shouldCheck = false;

      for (const mutation of mutations) {
        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
          shouldCheck = true;
          break;
        }
      }

      if (shouldCheck) {
        addNavTab();
        replaceLogo();
      }
    });

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

    observers.push(observer);
  }

  // Cleanup function
  function cleanup() {
    // Remove event listeners
    eventListeners.forEach(({ element, event, handler }) => {
      try {
        element.removeEventListener(event, handler);
      } catch (e) {
        console.warn('Vendor: Failed to remove event listener:', e);
      }
    });
    eventListeners = [];

    // Disconnect observers
    observers.forEach(observer => {
      try {
        observer.disconnect();
      } catch (e) {
        console.warn('Vendor: Failed to disconnect observer:', e);
      }
    });
    observers = [];
  }

  // Enhanced initialization
  function init() {
    try {
      loadConfig();
      injectStyle();
      updateStyles();
      createPanel();

      // Initial setup
      addNavTab();


      // Set up DOM observation for dynamic content
      observeDOM();

      // Cleanup on page unload
      window.addEventListener('beforeunload', cleanup);

      console.log('Vendor: Successfully initialized');
    } catch (error) {
      console.error('Vendor: Initialization failed:', error);
    }
  }

  // Robust initialization
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    // Use requestAnimationFrame for better performance
    requestAnimationFrame(init);
  }

  // Global reference for debugging (development only)
  if (typeof window !== 'undefined') {
    window.vendorDebug = {
      config,
      saveConfig,
      loadConfig,
      cleanup,
      version: '2.0.0'
    };
  }
})();