Shell Shockers Clean Visual Edition

Safe visual-only enhancements (no hooks)
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==yt00770077
// @name         Shell Shockers Clean Visual Edition
// @namespace    http://violentmonkey.github.io/
// @version      2.0
// @description  Safe visual-only enhancements (no hooks)
// @match        https://shellshock.io/*
// @grant        none
// @run-at       document-idle
// ==/UserScript==

(function () {
    'use strict';

    let rainbow = false;
    let hue = 0;
    let fogStrength = 0;
    let contrast = 1;

    // 建立控制面板
    const panel = document.createElement("div");
    panel.style.position = "fixed";
    panel.style.top = "20px";
    panel.style.left = "20px";
    panel.style.zIndex = "9999";
    panel.style.background = "rgba(0,0,0,0.7)";
    panel.style.padding = "12px";
    panel.style.borderRadius = "10px";
    panel.style.color = "white";
    panel.style.fontSize = "13px";
    panel.innerHTML = `
        <div style="margin-bottom:8px;">Clean Visual</div>
        <button id="rainbowBtn">Rainbow Crosshair: OFF</button><br><br>
        Fog Strength <input type="range" id="fog" min="0" max="1" step="0.05" value="0"><br>
        Contrast <input type="range" id="contrast" min="0.8" max="1.5" step="0.05" value="1">
    `;
    document.body.appendChild(panel);

    const rainbowBtn = document.getElementById("rainbowBtn");
    const fogSlider = document.getElementById("fog");
    const contrastSlider = document.getElementById("contrast");

    rainbowBtn.onclick = () => {
        rainbow = !rainbow;
        rainbowBtn.textContent = "Rainbow Crosshair: " + (rainbow ? "ON" : "OFF");
    };

    fogSlider.oninput = e => {
        fogStrength = e.target.value;
    };

    contrastSlider.oninput = e => {
        contrast = e.target.value;
    };

    function applyVisuals() {
        const canvas = document.querySelector("canvas");
        if (!canvas) return;

        canvas.style.filter = `
            blur(${fogStrength * 2}px)
            contrast(${contrast})
        `;
    }

    function animate() {
        if (rainbow) {
            hue += 2;
            if (hue >= 360) hue = 0;

            const color = `hsl(${hue},100%,50%)`;

            document.querySelectorAll("#reticleDot, .crosshair, [class*='reticle']")
                .forEach(el => {
                    el.style.backgroundColor = color;
                    el.style.color = color;
                });
        }

        applyVisuals();
        requestAnimationFrame(animate);
    }

    animate();

})();