☰

Nodeloc抽奖帖子排序器

为nodeloc.com论坛的抽奖帖子添加参与者排序功能，按照奖券数量排序

// ==UserScript==
// @name         Nodeloc抽奖帖子排序器
// @namespace    http://www.nodeloc.com/
// @version      1.0.0
// @description  为nodeloc.com论坛的抽奖帖子添加参与者排序功能，按照奖券数量排序
// @author       Assistant
// @match        https://www.nodeloc.com/t/topic/*
// @match        https://nodeloc.cc/t/topic/*
// @license      MIT
// @icon         https://www.nodeloc.com/uploads/default/original/1X/8ab9e33c8eed4135d9f2b8af6e6b7cc16ec4228e.png
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let isSorted = false;
    let originalOrder = [];

    // 检查是否为抽奖帖子
    function isLotteryPost() {
        const lotteryContainer = document.querySelector('#post_1 > div.post__row.row > div.post__body.topic-body.clearfix > div.post__regular.regular.post__contents.contents > div > div.lottery-container');
        return !!lotteryContainer;
    }

    // 获取参与者列表容器
    function getParticipantContainer() {
        return document.querySelector('#post_1 > div.post__row.row > div.post__body.topic-body.clearfix > div.post__regular.regular.post__contents.contents > div > div.lottery-container > div.lottery-participants > div');
    }

    // 创建查看排序按钮
    function createSortButton() {
        const button = document.createElement('button');
        button.innerHTML = `
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="margin-right: 6px; vertical-align: middle;">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
            </svg>
            查看排行榜
        `;
        button.id = 'lottery-sort-button';
        button.style.cssText = `
            padding: 8px 16px;
            font-size: 12px;
            font-weight: 600;
            color: #ffffff;
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
            display: inline-flex;
            align-items: center;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
            user-select: none;
            margin-left: 10px;
            margin-top: 5px;
        `;

        // 悬停效果
        button.onmouseover = function() {
            this.style.background = 'linear-gradient(135deg, #2563eb 0%, #1e40af 100%)';
            this.style.transform = 'scale(1.05)';
            this.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.45)';
        };
        button.onmouseout = function() {
            this.style.background = 'linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)';
            this.style.transform = 'scale(1)';
            this.style.boxShadow = '0 2px 8px rgba(59, 130, 246, 0.35)';
        };

        // 点击效果
        button.onmousedown = function() {
            this.style.transform = 'scale(0.95)';
        };
        button.onmouseup = function() {
            this.style.transform = 'scale(1.05)';
        };

        return button;
    }

    // 提取参与者信息
    function extractParticipantInfo(participantElement) {
        const titleAttr = participantElement.getAttribute('title');
        if (!titleAttr) return null;

        // 匹配格式：用户名（数字 奖券）
        const match = titleAttr.match(/^(.+?)（(\d+)\s*奖券\)$/);
        if (!match) return null;

        // 获取头像
        const img = participantElement.querySelector('img');
        const avatar = img ? img.getAttribute('src') : '';
        const userUrl = participantElement.getAttribute('href') || '';

        return {
            username: match[1],
            tickets: parseInt(match[2]),
            avatar: avatar,
            userUrl: userUrl,
            element: participantElement
        };
    }

    // 获取所有参与者
    function getAllParticipants(container) {
        const participantLinks = container.querySelectorAll('a[title*="奖券"]');
        const participants = [];

        participantLinks.forEach(link => {
            const info = extractParticipantInfo(link);
            if (info) {
                participants.push(info);
            }
        });

        return participants;
    }

    // 排序参与者（按奖券数量从大到小）
    function sortParticipants(participants) {
        return participants.sort((a, b) => b.tickets - a.tickets);
    }

    // 创建排行榜对话框
    function createRankingDialog(participants) {
        // 创建背景遮罩
        const overlay = document.createElement('div');
        overlay.id = 'lottery-ranking-overlay';
        overlay.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(4px);
        `;

        // 创建对话框
        const dialog = document.createElement('div');
        dialog.style.cssText = `
            background: white;
            border-radius: 12px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            max-width: 600px;
            max-height: 80vh;
            width: 90%;
            overflow: hidden;
            position: relative;
        `;

        // 创建标题栏
        const header = document.createElement('div');
        header.style.cssText = `
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            color: white;
            padding: 20px 24px;
            font-size: 18px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
        `;
        header.innerHTML = `
            <span>🏆 抽奖排行榜 (共 ${participants.length} 人参与)</span>
            <button id="close-ranking-dialog" style="
                background: none;
                border: none;
                color: white;
                font-size: 24px;
                cursor: pointer;
                padding: 0;
                width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                transition: background 0.2s;
            " onmouseover="this.style.background='rgba(255,255,255,0.2)'" onmouseout="this.style.background='none'">×</button>
        `;

        // 创建内容区域
        const content = document.createElement('div');
        content.style.cssText = `
            max-height: 500px;
            overflow-y: auto;
            padding: 0;
        `;

        // 创建表格
        const table = document.createElement('table');
        table.style.cssText = `
            width: 100%;
            border-collapse: collapse;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
        `;

        // 创建表头
        const thead = document.createElement('thead');
        thead.innerHTML = `
            <tr style="background: #f8fafc; border-bottom: 2px solid #e2e8f0;">
                <th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #374151; width: 60px;">排名</th>
                <th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #374151; width: 60px;">头像</th>
                <th style="padding: 12px 16px; text-align: left; font-weight: 600; color: #374151;">用户名</th>
                <th style="padding: 12px 16px; text-align: center; font-weight: 600; color: #374151; width: 100px;">奖券数</th>
            </tr>
        `;
        table.appendChild(thead);

        // 创建表体
        const tbody = document.createElement('tbody');
        participants.forEach((participant, index) => {
            const row = document.createElement('tr');
            row.style.cssText = `
                border-bottom: 1px solid #e2e8f0;
                transition: background 0.2s;
            `;
            row.onmouseover = function() { this.style.background = '#f8fafc'; };
            row.onmouseout = function() { this.style.background = 'white'; };

            // 排名徽章样式
            let rankBadge = `<span style="
                background: #e2e8f0;
                color: #64748b;
                padding: 4px 8px;
                border-radius: 12px;
                font-size: 12px;
                font-weight: 600;
            ">${index + 1}</span>`;

            if (index === 0) {
                rankBadge = `<span style="
                    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
                    color: white;
                    padding: 4px 8px;
                    border-radius: 12px;
                    font-size: 12px;
                    font-weight: 600;
                ">🥇 ${index + 1}</span>`;
            } else if (index === 1) {
                rankBadge = `<span style="
                    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
                    color: white;
                    padding: 4px 8px;
                    border-radius: 12px;
                    font-size: 12px;
                    font-weight: 600;
                ">🥈 ${index + 1}</span>`;
            } else if (index === 2) {
                rankBadge = `<span style="
                    background: linear-gradient(135deg, #cd7c0f 0%, #92400e 100%);
                    color: white;
                    padding: 4px 8px;
                    border-radius: 12px;
                    font-size: 12px;
                    font-weight: 600;
                ">🥉 ${index + 1}</span>`;
            }

            row.innerHTML = `
                <td style="padding: 12px 16px; text-align: left;">${rankBadge}</td>
                <td style="padding: 12px 16px; text-align: left;">
                    <img src="${participant.avatar}" style="
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        border: 2px solid #e2e8f0;
                    " onerror="this.style.display='none'">
                </td>
                <td style="padding: 12px 16px; text-align: left;">
                    <a href="${participant.userUrl}" target="_blank" style="
                        color: #3b82f6;
                        text-decoration: none;
                        font-weight: 500;
                    " onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">
                        ${participant.username}
                    </a>
                </td>
                <td style="padding: 12px 16px; text-align: center;">
                    <span style="
                        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
                        color: white;
                        padding: 4px 12px;
                        border-radius: 16px;
                        font-size: 12px;
                        font-weight: 600;
                    ">${participant.tickets} 张</span>
                </td>
            `;
            tbody.appendChild(row);
        });
        table.appendChild(tbody);
        content.appendChild(table);

        dialog.appendChild(header);
        dialog.appendChild(content);
        overlay.appendChild(dialog);

        // 关闭对话框事件
        const closeButton = header.querySelector('#close-ranking-dialog');
        const closeDialog = () => {
            overlay.style.opacity = '0';
            setTimeout(() => {
                if (overlay.parentNode) {
                    overlay.remove();
                }
            }, 200);
        };

        closeButton.addEventListener('click', closeDialog);
        overlay.addEventListener('click', (e) => {
            if (e.target === overlay) {
                closeDialog();
            }
        });

        // 显示动画
        overlay.style.opacity = '0';
        overlay.style.transition = 'opacity 0.2s ease-out';
        document.body.appendChild(overlay);
        setTimeout(() => {
            overlay.style.opacity = '1';
        }, 10);

        return overlay;
    }

    // 显示成功提示
    function showToast(message, type = 'success') {
        // 移除已存在的提示
        const existingToast = document.getElementById('lottery-sort-toast');
        if (existingToast) {
            existingToast.remove();
        }

        const toast = document.createElement('div');
        toast.id = 'lottery-sort-toast';
        
        const bgColor = type === 'success' 
            ? 'linear-gradient(135deg, #22c55e 0%, #16a34a 100%)'
            : 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)';
        
        const icon = type === 'success'
            ? '<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>'
            : '<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>';

        toast.innerHTML = `
            <div style="display: flex; align-items: center;">
                ${icon}
                <span style="color: #ffffff; font-weight: 500; margin-left: 8px;">${message}</span>
            </div>
        `;
        toast.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            background: ${bgColor};
            color: white;
            padding: 12px 20px;
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
            z-index: 10000;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
            font-size: 14px;
            transform: translateX(100%);
            transition: transform 0.3s ease-out;
        `;

        document.body.appendChild(toast);

        // 显示动画
        setTimeout(() => {
            toast.style.transform = 'translateX(0)';
        }, 100);

        // 自动隐藏
        setTimeout(() => {
            toast.style.transform = 'translateX(100%)';
            setTimeout(() => {
                if (toast.parentNode) {
                    toast.remove();
                }
            }, 300);
        }, 3000);
    }

    // 处理查看排行榜点击
    function handleRankingClick() {
        const container = getParticipantContainer();
        if (!container) {
            showToast('未找到参与者列表', 'error');
            return;
        }

        // 获取参与者信息
        const participants = getAllParticipants(container);
        
        if (participants.length === 0) {
            showToast('未找到参与者信息', 'error');
            return;
        }

        // 排序
        const sortedParticipants = sortParticipants(participants);

        // 显示排行榜对话框
        createRankingDialog(sortedParticipants);
    }

    // 初始化脚本
    function init() {
        // 等待页面加载完成
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', init);
            return;
        }

        // 检查是否为抽奖帖子
        if (!isLotteryPost()) {
            console.log('当前不是抽奖帖子');
            return;
        }

        // 查找参与者容器
        const container = getParticipantContainer();
        if (!container) {
            console.log('未找到参与者列表容器');
            return;
        }

        // 检查是否已经添加了排序按钮
        if (document.getElementById('lottery-sort-button')) {
            return;
        }

        // 创建并添加查看排行榜按钮
        const sortButton = createSortButton();
        sortButton.addEventListener('click', handleRankingClick);

        // 将按钮添加到参与者容器后面
        container.parentNode.insertBefore(sortButton, container.nextSibling);

        console.log('抽奖排序按钮已添加');
    }

    // 监听页面变化（处理SPA导航）
    function observePageChanges() {
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.type === 'childList') {
                    // 检查是否有新的内容加载
                    setTimeout(init, 1000); // 延迟执行，确保内容完全加载
                }
            });
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    }

    // 启动脚本
    init();
    observePageChanges();

})();