Shell Shockers Party Theme 🎉

Boring shell shockers colors? Bore no more! This theme introduces a gui that gives options to change the colors. Some features like the Performance Settings are still in making. Thank you. Make sure to subscribe to my channel.

スクリプトをインストールするには、Tampermonkey, GreasemonkeyViolentmonkey のような拡張機能のインストールが必要です。

You will need to install an extension such as Tampermonkey to install this script.

スクリプトをインストールするには、TampermonkeyViolentmonkey のような拡張機能のインストールが必要です。

スクリプトをインストールするには、TampermonkeyUserscripts のような拡張機能のインストールが必要です。

このスクリプトをインストールするには、Tampermonkeyなどの拡張機能をインストールする必要があります。

このスクリプトをインストールするには、ユーザースクリプト管理ツールの拡張機能をインストールする必要があります。

(ユーザースクリプト管理ツールは設定済みなのでインストール!)

このスタイルをインストールするには、Stylusなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus などの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus tなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

(ユーザースタイル管理ツールは設定済みなのでインストール!)

このスクリプトの質問や評価の投稿はこちら通報はこちらへお寄せください
// ==UserScript==
// @name         Shell Shockers Party Theme 🎉
// @version      1.5
// @namescpace   
// @description  Boring shell shockers colors? Bore no more! This theme introduces a gui that gives options to change the colors. Some features like the Performance Settings are still in making. Thank you. Make sure to subscribe to my channel.
// @match        https://algebra.best/*
// @match        https://algebra.vip/*

// @match        https://biologyclass.club/*

// @match        https://deadlyegg.com/*
// @match        https://deathegg.world/*

// @match        https://egg.dance/*
// @match        https://eggboy.club/*
// @match        https://eggboy.xyz/*
// @match        https://eggcombat.com/*
// @match        https://eggfacts.fun/*
// @match        https://egghead.institute/*
// @match        https://eggisthenewblack.com/*
// @match        https://eggsarecool.com/*
// @match        https://eggshooter.best/*

// @match        https://geometry.best/*
// @match        https://geometry.monster/*
// @match        https://geometry.pw/*
// @match        https://geometry.report/*

// @match        https://hardboiled.life/*
// @match        https://hardshell.life/*
// @match        https://humanorganising.org/*
// @match        https://mathactivity.xyz/*
// @match        https://mathdrills.info/*
// @match        https://mathdrills.life/*
// @match        https://mathfun.rocks/*
// @match        https://mathgames.world/*
// @match        https://math.international/*
// @match        https://mathlete.fun/*
// @match        https://mathlete.pro/*

// @match        https://new.shellshock.io/*

// @match        https://overeasy.club/*

// @match        https://scrambled.best/*
// @match        https://scrambled.tech/*
// @match        https://scrambled.today/*
// @match        https://scrambled.us/*
// @match        https://shellshock.io/*
// @match        https://scrambled.world/*
// @match        https://shellshockers.today/*
// @match        https://shellsocks.com/*
// @match        https://shellshockers.club/*
// @match        https://shellshockers.site/*
// @match        https://shellshockers.today/*
// @match        https://shellshockers.us/*
// @match        https://shellshockers.world/*
// @match        https://shellshockers.xyz/*
// @match        https://softboiled.club/*

// @match        https://urbanegger.com/*

// @match        https://violentegg.club/*
// @match        https://violentegg.fun/*

// @match        https://yolk.best/*
// @match        https://yolk.life/*
// @match        https://yolk.quest/*
// @match        https://yolk.rocks/*
// @match        https://yolk.tech/*
// @match        https://yolk.today/*

// @match        https://zygote.cafe/*

// @license      GPL 3.0

// @grant        none
// @namespace https://greatest.deepsurf.us/users/1374094
// ==/UserScript==

(function() {
    'use strict';

    const styles = document.createElement('style');
    styles.innerHTML = `
        @keyframes rainbowHue {
            0%   { filter: hue-rotate(0deg); }
            100% { filter: hue-rotate(360deg); }
        }
        @keyframes pulseGlow {
            0%, 100% { filter: brightness(1) contrast(1) saturate(1); }
            50% { filter: brightness(1.4) contrast(1.4) saturate(2); }
        }
        @keyframes synthGlow {
            0%, 100% { filter: brightness(0.9) contrast(1.2) hue-rotate(280deg) saturate(2); }
            50% { filter: brightness(1.1) contrast(1.5) hue-rotate(320deg) saturate(3); }
        }
        @keyframes xrayFlash {
            0% { filter: grayscale(1) contrast(2) hue-rotate(0deg); }
            50% { filter: grayscale(0.5) contrast(2.5) hue-rotate(180deg); }
            100% { filter: grayscale(1) contrast(2) hue-rotate(360deg); }
        }
        @keyframes iceFade {
            0% { filter: hue-rotate(180deg) brightness(0.9); }
            50% { filter: hue-rotate(200deg) brightness(1.1); }
            100% { filter: hue-rotate(180deg) brightness(0.9); }
        }
        @keyframes flameWave {
            0% { filter: hue-rotate(10deg) brightness(1); }
            50% { filter: hue-rotate(30deg) brightness(1.2) saturate(1.5); }
            100% { filter: hue-rotate(10deg) brightness(1); }
        }

        #visual-mode-menu {
            position: fixed;
            top: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 6px;
            border-radius: 8px;
            font-family: sans-serif;
            font-size: 13px;
            z-index: 99999;
            width: 220px;
            overflow-y: auto;
        }
        #visual-mode-menu summary {
            cursor: pointer;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .mode-option, .slider-option {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;
        }
        .mode-option label, .slider-option label {
            flex: 1;
        }
        .mode-option input[type="checkbox"], .slider-option input[type="checkbox"] {
            margin-left: 6px;
        }
        .slider {
            width: 70%;
        }
        .slider-value {
            width: 30%;
            text-align: center;
        }
    `;
    document.head.appendChild(styles);

    const modes = {
        rainbow: { anim: 'rainbowHue 5s linear infinite', key: '1' },
        pulse: { anim: 'pulseGlow 4s ease-in-out infinite', key: '2' },
        synth: { anim: 'synthGlow 6s ease-in-out infinite', key: '3' },
        xray: { anim: 'xrayFlash 3s linear infinite', key: '4' },
        ice: { anim: 'iceFade 5s ease-in-out infinite', key: '5' },
        flame: { anim: 'flameWave 4s ease-in-out infinite', key: '6' },
        disco: { anim: 'disco', key: '7' } // handled separately
    };

    let activeMode = null;
    let settings = {
        animationSpeed: 1,  // 1 is default, can be adjusted with a slider
        animationIntensity: 1,  // 1 is default, can be adjusted with a slider
        disableEffects: [],  // stores the list of effects that are disabled
        guiSize: 220,  // default GUI size
        draggable: false  // draggable option
    };

    const container = document.body;
    const gameElements = ["body", "canvas", "#game-shell"];

    const applyMode = (mode) => {
        clearDisco();
        activeMode = mode;
        gameElements.forEach(sel => {
            const el = document.querySelector(sel);
            if (el) el.style.animation = mode === 'disco' ? '' : modes[mode].anim;
        });

        if (mode === 'disco') {
            startDisco();
        }
    };

    const clearDisco = () => {
        clearInterval(window._discoInterval);
        container.style.filter = '';
    };

    const startDisco = () => {
        window._discoInterval = setInterval(() => {
            const deg = Math.floor(Math.random() * 360);
            container.style.filter = `hue-rotate(${deg}deg) brightness(1.2)`;
        }, 1000);
    };

    const makeGUI = () => {
        const menu = document.createElement('details');
        menu.id = 'visual-mode-menu';
        const summary = document.createElement('summary');
        summary.textContent = '🎉 Party Theme Modes';
        menu.appendChild(summary);

        Object.keys(modes).forEach(mode => {
            const option = document.createElement('div');
            option.className = 'mode-option';

            const label = document.createElement('label');
            label.textContent = `${mode.charAt(0).toUpperCase() + mode.slice(1)} [${modes[mode].key}]`;
            const toggle = document.createElement('input');
            toggle.type = 'checkbox';
            toggle.onchange = () => {
                if (toggle.checked) {
                    applyMode(mode);
                } else {
                    clearDisco();
                    activeMode = null;
                    gameElements.forEach(sel => {
                        const el = document.querySelector(sel);
                        if (el) el.style.animation = '';
                    });
                }
            };

            option.appendChild(label);
            option.appendChild(toggle);
            menu.appendChild(option);
        });

        // Performance Settings Section
        const performanceSection = document.createElement('details');
        performanceSection.innerHTML = '<summary>Performance Settings</summary>';

        const animationSpeedLabel = document.createElement('label');
        animationSpeedLabel.textContent = 'Animation Speed';
        const animationSpeedSlider = document.createElement('input');
        animationSpeedSlider.type = 'range';
        animationSpeedSlider.min = '0.1';
        animationSpeedSlider.max = '2';
        animationSpeedSlider.step = '0.1';
        animationSpeedSlider.value = settings.animationSpeed;
        animationSpeedSlider.className = 'slider';
        const animationSpeedValue = document.createElement('input');
        animationSpeedValue.type = 'number';
        animationSpeedValue.value = settings.animationSpeed;
        animationSpeedValue.className = 'slider-value';
        animationSpeedSlider.oninput = (e) => {
            settings.animationSpeed = e.target.value;
            animationSpeedValue.value = e.target.value;
            updateAnimationSpeed();
        };
        animationSpeedValue.oninput = (e) => {
            settings.animationSpeed = e.target.value;
            animationSpeedSlider.value = e.target.value;
            updateAnimationSpeed();
        };
        const speedOption = document.createElement('div');
        speedOption.className = 'slider-option';
        speedOption.appendChild(animationSpeedLabel);
        speedOption.appendChild(animationSpeedSlider);
        speedOption.appendChild(animationSpeedValue);
        performanceSection.appendChild(speedOption);

        const animationIntensityLabel = document.createElement('label');
        animationIntensityLabel.textContent = 'Animation Intensity';
        const animationIntensitySlider = document.createElement('input');
        animationIntensitySlider.type = 'range';
        animationIntensitySlider.min = '0.1';
        animationIntensitySlider.max = '2';
        animationIntensitySlider.step = '0.1';
        animationIntensitySlider.value = settings.animationIntensity;
        const animationIntensityValue = document.createElement('input');
        animationIntensityValue.type = 'number';
        animationIntensityValue.value = settings.animationIntensity;
        animationIntensityValue.className = 'slider-value';
        animationIntensitySlider.oninput = (e) => {
            settings.animationIntensity = e.target.value;
            animationIntensityValue.value = e.target.value;
            updateAnimationIntensity();
        };
        animationIntensityValue.oninput = (e) => {
            settings.animationIntensity = e.target.value;
            animationIntensitySlider.value = e.target.value;
            updateAnimationIntensity();
        };
        const intensityOption = document.createElement('div');
        intensityOption.className = 'slider-option';
        intensityOption.appendChild(animationIntensityLabel);
        intensityOption.appendChild(animationIntensitySlider);
        intensityOption.appendChild(animationIntensityValue);
        performanceSection.appendChild(intensityOption);

        const disableEffectsLabel = document.createElement('label');
        disableEffectsLabel.textContent = 'Disable Heavy Effects (Disco, X-ray)';
        const disableEffectsCheckbox = document.createElement('input');
        disableEffectsCheckbox.type = 'checkbox';
        disableEffectsCheckbox.onchange = () => {
            if (disableEffectsCheckbox.checked) {
                settings.disableEffects.push('disco', 'xray');
            } else {
                settings.disableEffects = settings.disableEffects.filter(effect => effect !== 'disco' && effect !== 'xray');
            }
        };
        performanceSection.appendChild(disableEffectsLabel);
        performanceSection.appendChild(disableEffectsCheckbox);

        // GUI Settings Section
        const guiSettingsSection = document.createElement('details');
        guiSettingsSection.innerHTML = '<summary>GUI Settings</summary>';

        const draggableLabel = document.createElement('label');
        draggableLabel.textContent = 'Enable Draggable GUI';
        const draggableCheckbox = document.createElement('input');
        draggableCheckbox.type = 'checkbox';
        draggableCheckbox.onchange = () => {
            settings.draggable = draggableCheckbox.checked;
            if (settings.draggable) makeDraggable(menu);
        };
        guiSettingsSection.appendChild(draggableLabel);
        guiSettingsSection.appendChild(draggableCheckbox);

        const guiSizeLabel = document.createElement('label');
        guiSizeLabel.textContent = 'GUI Size';
        const guiSizeSlider = document.createElement('input');
        guiSizeSlider.type = 'range';
        guiSizeSlider.min = '180';
        guiSizeSlider.max = '300';
        guiSizeSlider.step = '10';
        guiSizeSlider.value = settings.guiSize;
        guiSizeSlider.className = 'slider';
        const guiSizeValue = document.createElement('input');
        guiSizeValue.type = 'number';
        guiSizeValue.value = settings.guiSize;
        guiSizeValue.className = 'slider-value';
        guiSizeSlider.oninput = (e) => {
            settings.guiSize = e.target.value;
            guiSizeValue.value = e.target.value;
            updateGUI();
        };
        guiSizeValue.oninput = (e) => {
            settings.guiSize = e.target.value;
            guiSizeSlider.value = e.target.value;
            updateGUI();
        };
        const guiSizeOption = document.createElement('div');
        guiSizeOption.className = 'slider-option';
        guiSizeOption.appendChild(guiSizeLabel);
        guiSizeOption.appendChild(guiSizeSlider);
        guiSizeOption.appendChild(guiSizeValue);
        guiSettingsSection.appendChild(guiSizeOption);

        menu.appendChild(performanceSection);
        menu.appendChild(guiSettingsSection);

        document.body.appendChild(menu);
    };

    const updateGUI = () => {
        const menu = document.getElementById('visual-mode-menu');
        menu.style.width = `${settings.guiSize}px`;
    };

    const updateAnimationSpeed = () => {
        Object.keys(modes).forEach(mode => {
            if (!settings.disableEffects.includes(mode)) {
                const speed = settings.animationSpeed;
                modes[mode].anim = `${modes[mode].anim.split(' ')[0]} ${speed}s linear infinite`;
            }
        });
    };

    const updateAnimationIntensity = () => {
        Object.keys(modes).forEach(mode => {
            if (!settings.disableEffects.includes(mode)) {
                const intensity = settings.animationIntensity;
                // Adjust intensity in your effects here if necessary
            }
        });
    };

    const makeDraggable = (menu) => {
        let isDragging = false;
        let offsetX, offsetY;
        menu.addEventListener('mousedown', (e) => {
            isDragging = true;
            offsetX = e.clientX - menu.getBoundingClientRect().left;
            offsetY = e.clientY - menu.getBoundingClientRect().top;
        });
        window.addEventListener('mousemove', (e) => {
            if (isDragging) {
                menu.style.left = `${e.clientX - offsetX}px`;
                menu.style.top = `${e.clientY - offsetY}px`;
            }
        });
        window.addEventListener('mouseup', () => {
            isDragging = false;
        });
    };

    makeGUI();

    const keybinds = {
        '1': 'rainbow',
        '2': 'pulse',
        '3': 'synth',
        '4': 'xray',
        '5': 'ice',
        '6': 'flame',
        '7': 'disco',
        '0': 'off'
    };

    document.addEventListener('keydown', (e) => {
        const key = e.key;
        if (keybinds[key]) {
            if (keybinds[key] === 'off') {
                clearDisco();
                activeMode = null;
                gameElements.forEach(sel => {
                    const el = document.querySelector(sel);
                    if (el) el.style.animation = '';
                });
                document.querySelectorAll('.mode-option input[type="checkbox"]').forEach(cb => cb.checked = false);
            } else {
                applyMode(keybinds[key]);
                document.querySelectorAll('.mode-option input[type="checkbox"]').forEach(cb => cb.checked = false);
                const label = [...document.querySelectorAll('.mode-option label')].find(l => l.textContent.toLowerCase().startsWith(keybinds[key]));
                if (label && label.nextElementSibling) label.nextElementSibling.checked = true;
            }
        }
    });
})();