Custom Token Rain with Spinner

Click button to start token rain with your chosen token image, bigger and spinning!
换行
// ==UserScript==
// @name         Custom Token Rain with Spinner
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Click button to start token rain with your chosen token image, bigger and spinning!
// @author       ChatGPT
// @match        *://blacket.org/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Container to hold drag bar + button
    const container = document.createElement('div');
    container.style.position = 'fixed';
    container.style.top = '10px';
    container.style.right = '10px';
    container.style.zIndex = '999999';
    container.style.userSelect = 'none';
    container.style.width = 'max-content';
    container.style.cursor = 'default';

    // Drag bar
    const dragBar = document.createElement('div');
    dragBar.textContent = '☰ Drag Here';
    dragBar.style.background = '#444';
    dragBar.style.color = 'white';
    dragBar.style.padding = '4px 10px';
    dragBar.style.borderTopLeftRadius = '6px';
    dragBar.style.borderTopRightRadius = '6px';
    dragBar.style.fontSize = '12px';
    dragBar.style.fontWeight = 'bold';
    dragBar.style.textAlign = 'center';
    dragBar.style.cursor = 'grab';
    dragBar.style.userSelect = 'none';

    // Button
    const btn = document.createElement('button');
    btn.textContent = 'Start Custom Token Rain';
    btn.style.padding = '8px 12px';
    btn.style.background = '#222';
    btn.style.color = 'white';
    btn.style.border = 'none';
    btn.style.borderBottomLeftRadius = '6px';
    btn.style.borderBottomRightRadius = '6px';
    btn.style.cursor = 'pointer';
    btn.style.userSelect = 'none';
    btn.style.transition = 'background 0.3s';
    btn.style.display = 'block';
    btn.style.width = '100%';

    container.appendChild(dragBar);
    container.appendChild(btn);
    document.body.appendChild(container);

    let tokenRainContainer = null;
    let spawnInterval = null;
    let raining = false;

    // Add CSS for spinning and falling tokens
    const styleId = 'customTokenRainStyle';
    if (!document.getElementById(styleId)) {
        const style = document.createElement('style');
        style.id = styleId;
        style.textContent = `
            @keyframes fallspin {
                0% { transform: translateY(0) rotate(0deg); }
                100% { transform: translateY(100vh) rotate(360deg); }
            }
            .token-rain-token {
                position: absolute;
                width: 48px !important;
                height: 48px !important;
                pointer-events: none;
                animation: fallspin 4s linear forwards;
            }
        `;
        document.head.appendChild(style);
    }

    function startTokenRain(imgSrc) {
        if (tokenRainContainer) {
            tokenRainContainer.remove();
            tokenRainContainer = null;
        }
        if (spawnInterval) {
            clearInterval(spawnInterval);
            spawnInterval = null;
        }

        tokenRainContainer = document.createElement('div');
        tokenRainContainer.style.position = 'fixed';
        tokenRainContainer.style.top = '0';
        tokenRainContainer.style.left = '0';
        tokenRainContainer.style.width = '100vw';
        tokenRainContainer.style.height = '100vh';
        tokenRainContainer.style.pointerEvents = 'none';
        tokenRainContainer.style.zIndex = '999998';
        document.body.appendChild(tokenRainContainer);

        spawnInterval = setInterval(() => {
            const token = document.createElement('img');
            token.src = imgSrc;
            token.className = 'token-rain-token';

            token.style.left = Math.random() * (window.innerWidth - 48) + 'px';
            token.style.top = '-50px';

            token.addEventListener('animationend', () => token.remove());

            tokenRainContainer.appendChild(token);
        }, 150);
    }

    function stopTokenRain() {
        if (spawnInterval) {
            clearInterval(spawnInterval);
            spawnInterval = null;
        }
        if (tokenRainContainer) {
            tokenRainContainer.remove();
            tokenRainContainer = null;
        }
    }

    btn.addEventListener('click', () => {
        if (!raining) {
            const url = prompt('Enter the URL of the token image you want to use:', 'https://blacket.org/content/tokenIcon.webp');
            if (url && url.trim() !== '') {
                startTokenRain(url.trim());
                btn.textContent = 'Stop Token Rain';
                btn.style.background = '#b22222';
                raining = true;
            }
        } else {
            stopTokenRain();
            btn.textContent = 'Start Custom Token Rain';
            btn.style.background = '#222';
            raining = false;
        }
    });

    // Make the container draggable by dragBar only
    let isDragging = false;
    let dragStartX, dragStartY;
    let containerStartX, containerStartY;

    dragBar.addEventListener('mousedown', (e) => {
        isDragging = true;
        dragStartX = e.clientX;
        dragStartY = e.clientY;

        const rect = container.getBoundingClientRect();
        containerStartX = rect.left;
        containerStartY = rect.top;

        dragBar.style.cursor = 'grabbing';
        e.preventDefault();
    });

    window.addEventListener('mousemove', (e) => {
        if (!isDragging) return;
        let newX = containerStartX + (e.clientX - dragStartX);
        let newY = containerStartY + (e.clientY - dragStartY);

        // Keep container inside viewport
        newX = Math.min(window.innerWidth - container.offsetWidth, Math.max(0, newX));
        newY = Math.min(window.innerHeight - container.offsetHeight, Math.max(0, newY));

        container.style.left = newX + 'px';
        container.style.top = newY + 'px';
        container.style.right = 'auto';
        container.style.bottom = 'auto';
        container.style.position = 'fixed';
    });

    window.addEventListener('mouseup', () => {
        if (isDragging) {
            isDragging = false;
            dragBar.style.cursor = 'grab';
        }
    });
})();
欢迎访问Greasy Fork镜像
