// ==UserScript==
// @name         精致鼠标动效
// @namespace    https://bbs.tampermonkey.net.cn/
// @version      1.3.0
// @description  为所有网页添加精致鼠标动效
// @author       雪中明月
// @match        *
// ==/UserScript==

(function () {
    'use strict';

    // 变量
    var mouse_circle_1 = ''
    var mouse_circle_2 = ''
    var cx = 0, cy = 0
    var mouseX = 0, mouseY = 0

    function hideCursor() {
        // 设置默认光标隐藏
        document.querySelectorAll("*")
            .forEach(element => {
                element.style.cursor = "none"
            });
    }

    function creatNewCursor() {
        // 创建元素
        mouse_circle_1 = document.createElement("div")
        mouse_circle_2 = document.createElement("div")

        mouse_circle_1.style = `
    position: fixed;
    background: rgba(255, 255, 255,0.6);
    backdrop-filter: blur(10px);
    border-radius: 999px;
    height: 20px;
    width: 20px;
    opacity: 0;
    transition: transform 0.5s,opacity 0.3s;
    z-index: 999;
    pointer-events: none;
    transform: translate(-50%, -50%);
    `

        mouse_circle_2.style = `
    position: fixed;
    background: transparent;
    border: rgba(255, 255, 255,0.3) 2px solid;
    border-radius: 999px;
    height: 50px;
    width: 50px;
    opacity: 0;
    transition: transform 0.2s,opacity 0.3s;
    z-index: 999;
    pointer-events: none;
    transform: translate(-50%, -50%);
    `
        document.body.appendChild(mouse_circle_1)
        document.body.appendChild(mouse_circle_2)
    }

    function smallCircleMove() {
        // 鼠标移动监听事件
        document.addEventListener("mousemove", function (e) {
            mouseX = e.clientX    // 获取当前鼠标位置
            mouseY = e.clientY

            mouse_circle_1.style.opacity = 1    // 移动时光标淡入
            mouse_circle_2.style.opacity = 1

            mouse_circle_1.style.left = `${mouseX}px`    // 小圆的移动
            mouse_circle_1.style.top = `${mouseY}px`

        })

        // 鼠标出入监听事件
        document.addEventListener("mouseleave", function () {
            mouse_circle_1.style.opacity = 0    // 离开网页光标淡出
            mouse_circle_2.style.opacity = 0
        })

        // 鼠标点击监听事件
        document.addEventListener("mousedown", function () {
            mouse_circle_1.style.transform = "translate(-50%, -50%) scale(0.8)"   // 缩小
            setTimeout(() => {
                mouse_circle_2.style.transform = "translate(-50%, -50%) scale(0.8)"
            }, 200);

        })
        document.addEventListener("mouseup", function () {
            mouse_circle_1.style.transform = "translate(-50%, -50%) scale(1)"     // 回正
            setTimeout(() => {
                mouse_circle_2.style.transform = "translate(-50%, -50%) scale(1)"
            }, 200);
        })
    }

    function bigCircleMove() {
        // 大圆的延迟移动
        var ca = () => {
            cx += (mouseX - cx) / 10
            cy += (mouseY - cy) / 10
            mouse_circle_2.style.left = `${cx}px`
            mouse_circle_2.style.top = `${cy}px`
            window.requestAnimationFrame(ca)
        }
        window.requestAnimationFrame(ca)
    }

    function initCursorAutoDark() {
        // 检测是否深色
        if (!window.matchMedia) { return }

        function change_cursor() {
            if (!darkModeQuery.matches) {
                mouse_circle_1.style.background = "rgba(0, 0, 0,0.6)"
                mouse_circle_2.style.border = "rgba(0, 0, 0,0.3) 2px solid"

            } else {
                mouse_circle_1.style.background = "rgba(255, 255, 255,0.6)"
                mouse_circle_2.style.border = "rgba(255, 255, 255,0.3) 2px solid"
            }
        }

        var darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
        change_cursor()

        darkModeQuery.addListener(function () {
            change_cursor()
        });
    }


    // 检测是否桌面端
    var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    if (!isMobile) {
        // 创建光标元素
        hideCursor()
        creatNewCursor()
        // 添加内圈跟随
        smallCircleMove()
        // 设置外圈跟随
        bigCircleMove()
        // 自动深色
        initCursorAutoDark()
    }


})();