// ==UserScript==
// @name         简易赛事计时器
// @namespace    http://xiezheyuan.github.io/
// @version      0.2
// @description  在页面左下角添加计时器
// @author       xiezheyuan
// @license      MIT
// @match        *://*/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=luogu.com.cn
// @grant        none
// @downloadURL none
// ==/UserScript==

(function () {
    'use strict';
    const countdown_config = [
        {
            id: "countdown-to-noip",
            date: "2024-11-30T08:00:00Z",
            text: "NOIP 2024",
        },
        {
            id: "countdown-to-hnoi",
            date: "2025-03-01T08:00:00Z",
            text: "HNOI 2025",
        }
    ];
    const time2str = (countDownDate, now) => {
        let distance = countDownDate - now;
        if (distance < 0) {
            return "已经开始";
        }
        let days = Math.floor(distance / (1000 * 60 * 60 * 24));
        let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        let seconds = Math.floor((distance % (1000 * 60)) / 1000);
        return days + "天 " + hours + "小时 " + minutes + "分钟 " + seconds + "秒 ";
    }
    const init = () => {
        let sticky = document.createElement("div");
        sticky.id = "sticky-countdown";
        sticky.style.position = "fixed";
        sticky.style.bottom = "0px";
        sticky.style.left = "10px";
        sticky.style.backgroundColor = "rgba(240, 240, 240, 0.6)";
        sticky.style.padding = "10px";
        sticky.style.borderRadius = "3px";
        sticky.style.zIndex = "999";
        sticky.style.display = "flex";
        sticky.style.flexDirection = "column";
        sticky.style.gap = "5px";
        sticky.style.fontFamily = "Arial, sans-serif";
        sticky.style.color = "#333";
        sticky.style.transition = "max-height 0.3s ease";
        sticky.style.minHeight = "14px";
        sticky.style.maxHeight = "0";
        for (let i = 0; i < countdown_config.length; i++) {
            sticky.innerHTML += `
            <div style="display: flex; align-items: center; gap: 5px;">
                距离 <b>${countdown_config[i].text}</b> 还剩下
                <b id="${countdown_config[i].id}">Loading</b>
            </div>
        `;
        }
        sticky.innerHTML += `<div>
            <p>简易赛事计时器 &copy; xiezheyuan 保留所有权利</p>
        </div>`
        document.body.appendChild(sticky);
        let isMouseOver = false;
        let timeoutId;

        sticky.addEventListener('mouseenter', () => {
            clearTimeout(timeoutId);
            isMouseOver = true;
            timeoutId = setTimeout(() => {
                if (isMouseOver) {
                    sticky.style.maxHeight = `${sticky.scrollHeight}px`;
                }
            }, 100);
        });

        sticky.addEventListener('mouseleave', () => {
            isMouseOver = false;
            timeoutId = setTimeout(() => {
                if (!isMouseOver) {
                    sticky.style.maxHeight = "0";
                }
            }, 500);
        });
        const interval = () => {
            const now = new Date().getTime();
            for (let i = 0; i < countdown_config.length; i++) {
                let countDownDate = new Date(countdown_config[i].date).getTime();
                document.getElementById(countdown_config[i].id).textContent = time2str(countDownDate, now);
            }
        };
        interval();
        setInterval(interval, 1000);
    };
    init();
})();