☰

ShellShock.io Complete Custom Theme

Custom theme for ShellShock.io with skybox and blood-red scopes

  1. // ==UserScript==
  2. // @name         ShellShock.io Complete Custom Theme
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.4
  5. // @description  Custom theme for ShellShock.io with skybox and blood-red scopes
  6. // @author       tarry
  7. // @license      MIT
  8. // @include      *
  9. // @icon         https://www.google.com/s2/favicons?sz=64&domain=shellshock.io
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. (function () {
  14.   'use strict';
  15.  
  16.   // URL of the custom background image
  17.   const backgroundImageURL = 'https://i.postimg.cc/hQnSDb4Z/obito-uchiha-background.jpg';
  18.  
  19.   // Function to apply custom styles
  20.   function applyCustomStyles() {
  21.     console.log("Applying custom styles...");
  22.  
  23.     // Create a style element
  24.     const style = document.createElement('style');
  25.     style.innerHTML = `
  26.       /* Custom skybox for inventory and loading screens */
  27.       .inventory-container, .loading-container {
  28.         background: url('${backgroundImageURL}') no-repeat center center fixed !important;
  29.         background-size: cover !important;
  30.       }
  31.  
  32.       /* Blood-red scopes for Free Ranger, RPEGG, and Crackshot */
  33.       .free-ranger-scope, .rpegg-scope, .crackshot-scope {
  34.         background-color: rgba(255, 0, 0, 0.8) !important; /* Blood red */
  35.         border: 2px solid rgba(139, 0, 0, 0.8) !important; /* Darker red border */
  36.         mix-blend-mode: multiply; /* Blend for a more intense red */
  37.       }
  38.     `;
  39.     // Append the style to the document head
  40.     document.head.appendChild(style);
  41.   }
  42.  
  43.   // Function to observe DOM changes
  44.   function observeDOMChanges() {
  45.     console.log("Setting up MutationObserver...");
  46.  
  47.     // Select the target node for observing changes in the DOM
  48.     const targetNode = document.body;
  49.  
  50.     // Create a MutationObserver to watch for changes
  51.     const observer = new MutationObserver((mutationsList) => {
  52.       for (const mutation of mutationsList) {
  53.         if (mutation.type === 'childList') {
  54.           // Apply custom styles when new nodes are added
  55.           applyCustomStyles();
  56.         }
  57.       }
  58.     });
  59.  
  60.     // Configuration options for the observer
  61.     const config = {
  62.       childList: true, // Watch for added/removed child nodes
  63.       subtree: true,   // Watch entire subtree
  64.     };
  65.  
  66.     // Start observing the target node
  67.     observer.observe(targetNode, config);
  68.  
  69.     console.log("MutationObserver is now active.");
  70.   }
  71.  
  72.   // Ensure the page has loaded before setting up the observer
  73.   window.addEventListener('load', function () {
  74.     console.log("Page loaded. Initializing...");
  75.     applyCustomStyles(); // Apply styles immediately
  76.     observeDOMChanges(); // Set up DOM observer
  77.   });
  78. })();