Codeforces Username Alias Column

Adds a new column before "Who" to display custom aliases for Codeforces usernames.

// ==UserScript==
// @name         Codeforces Username Alias Column
// @namespace    http://tampermonkey.net/
// @version      2.2
// @description  Adds a new column before "Who" to display custom aliases for Codeforces usernames.
// @author       Sam5440
// @match        https://codeforces.com/*
// @grant        GM_addStyle
// @grant        GM_setValue
// @grant        GM_getValue
// @license      MIT
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// ==/UserScript==

(function($) {
    'use strict';

    // 默认的用户名映射,如果 localStorage 中没有数据,将使用这个
    const DEFAULT_USERNAME_MAP = {};
    let USERNAME_MAP = GM_getValue('cf_username_map', DEFAULT_USERNAME_MAP);

    // ================== UI 界面部分 ==================

    // 1. 添加设置按钮
    function addSettingsButton() {
        const settingsButton = $('<button class="cf-rename-settings-button">📝Alias</button>');
        settingsButton.css({
            'position': 'fixed',
            'right': '15px',
            'top': '50%', // 垂直居中
            'transform': 'translateY(-50%)', // 精确垂直居中
            'background-color': '#4CAF50',
            'color': 'white',
            'padding': '8px 12px',
            'border': 'none',
            'border-radius': '5px',
            'cursor': 'pointer',
            'font-size': '14px',
            'z-index': '9999',
            'box-shadow': '0 2px 5px rgba(0,0,0,0.2)',
            'opacity': '0.8',
            'transition': 'opacity 0.3s',
        });

        settingsButton.hover(
            function() { $(this).css('opacity', '1'); },
            function() { $(this).css('opacity', '0.8'); }
        );

        $('body').append(settingsButton);

        settingsButton.on('click', showSettingsModal);
    }

    // 2. 显示设置模态框
    function showSettingsModal() {
        // 创建模态框容器
        const modalOverlay = $('<div id="cf-rename-modal-overlay"></div>').css({
            'position': 'fixed',
            'top': '0',
            'left': '0',
            'width': '100%',
            'height': '100%',
            'background-color': 'rgba(0, 0, 0, 0.6)',
            'display': 'flex',
            'justify-content': 'center',
            'align-items': 'center',
            'z-index': '10000',
        });

        // 创建模态框内容框
        const modalContent = $('<div id="cf-rename-modal-content"></div>').css({
            'background-color': 'white',
            'padding': '25px',
            'border-radius': '8px',
            'box-shadow': '0 4px 10px rgba(0, 0, 0, 0.3)',
            'width': '500px',
            'max-width': '90%',
            'display': 'flex',
            'flex-direction': 'column',
            'gap': '15px',
            'position': 'relative',
        });

        // 关闭按钮
        const closeButton = $('<span style="position: absolute; top: 10px; right: 15px; font-size: 28px; cursor: pointer; color: #555;">&times;</span>');
        closeButton.on('click', () => modalOverlay.remove());

        // 标题
        const modalTitle = $('<h3>Codeforces 用户名别名设置</h3>').css({
            'margin': '0',
            'color': '#333',
            'text-align': 'center',
            'font-size': '1.5em',
        });

        // 提示信息
        const modalHint = $('<p>输入 JSON 格式的字典。要求严格json格式,最后一个k-v没有逗号结尾,例如: <br> {"sam5440": "萝卜","yyf": "🐖", "old_name3": "alias3"}</p>').css('font-size', '0.9em; color: #666; margin-bottom: 10px;');

        // 输入框
        const textarea = $('<textarea id="cf-rename-username-dict"></textarea>').css({
            'width': 'calc(100% - 20px)',
            'height': '200px',
            'padding': '10px',
            'border': '1px solid #ccc',
            'border-radius': '4px',
            'font-family': 'monospace',
            'font-size': '14px',
            'resize': 'vertical',
        });
        try {
            textarea.val(JSON.stringify(USERNAME_MAP, null, 2)); // 格式化显示已保存的字典
        } catch (e) {
            textarea.val(JSON.stringify(DEFAULT_USERNAME_MAP, null, 2));
            console.error("Error parsing existing username map from localStorage:", e);
        }

        // 保存按钮
        const saveButton = $('<button>保存设置</button>').css({
            'background-color': '#007bff',
            'color': 'white',
            'padding': '10px 15px',
            'border': 'none',
            'border-radius': '5px',
            'cursor': 'pointer',
            'font-size': '16px',
            'align-self': 'flex-end', // 按钮靠右对齐
            'transition': 'background-color 0.3s',
        });
        saveButton.hover(
            function() { $(this).css('background-color', '#0056b3'); },
            function() { $(this).css('background-color', '#007bff'); }
        );

        saveButton.on('click', () => {
            try {
                const newMap = JSON.parse(textarea.val());
                USERNAME_MAP = newMap;
                GM_setValue('cf_username_map', USERNAME_MAP);
                alert('用户名别名映射已保存!页面将自动刷新以应用更改。');
                modalOverlay.remove();
                location.reload(); // 保存后刷新页面以应用更改
            } catch (e) {
                alert('无效的 JSON 格式!请检查输入。');
                console.error('JSON parse error:', e);
            }
        });

        // 组合模态框内容
        modalContent.append(closeButton, modalTitle, modalHint, textarea, saveButton);
        modalOverlay.append(modalContent);
        $('body').append(modalOverlay);
    }

    // ================== 核心功能部分 ==================

    // 添加新的列头
    function addAliasColumnHeader() {
        // 查找 standings 表格的表头
        let $standingsTable = $('.standings');
        if ($standingsTable.length === 0) return;

        let $whoHeader = $standingsTable.find('th:contains("Who")');
        if ($whoHeader.length > 0 && $whoHeader.prevAll('th.cf-alias-header').length === 0) { // 防止重复添加
            let $aliasHeader = $('<th class="top cf-alias-header" style="text-align:left;width:8em;">Alias</th>');
            $whoHeader.before($aliasHeader);

            // 同时处理统计行(如果有的话)
            let $statsWhoCell = $standingsTable.find('tr.standingsStatisticsRow td:contains("Accepted")').first();
            if ($statsWhoCell.length > 0 && $statsWhoCell.prevAll('td.cf-alias-stats-cell').length === 0) {
                let $aliasStatsCell = $('<td class="smaller bottom cf-alias-stats-cell" style="text-align:left;padding-left:1em;">Alias</td>');
                $statsWhoCell.before($aliasStatsCell);
            }
        }
    }

    // 在每一行添加别名
    function addAliasToRows() {
        // 确保列头已存在
        addAliasColumnHeader();

        $('.standings tr').not('.standingsStatisticsRow, .cf-alias-processed').each(function() {
            let $row = $(this);
            let $whoCell = $row.find('.contestant-cell'); // "Who" 列的 td 元素
            if ($whoCell.length > 0 && $whoCell.prevAll('td.cf-alias-cell').length === 0) { // 检查是否已添加过别名列
                let originalUsernameElement = $whoCell.find('a.rated-user, span.participant').first();
                if (originalUsernameElement.length === 0) {
                    // 对于没有 rated-user 或 participant 的行(可能不是选手行)
                    // 插入一个空的td以保持表格结构
                    $whoCell.before('<td class="cf-alias-cell"></td>');
                    $row.addClass('cf-alias-processed');
                    return;
                }

                let originalUsername = originalUsernameElement.text().trim();
                let alias = USERNAME_MAP[originalUsername] || '';

                let $aliasCell = $('<td class="cf-alias-cell" style="text-align:left;padding-left:1em;"></td>');
                if (alias) {
                    $aliasCell.text(alias);
                } else {
                    $aliasCell.html('&nbsp;'); // 保持高度
                }

                // 复制背景颜色和黑暗类
                if ($whoCell.hasClass('dark')) {
                    $aliasCell.addClass('dark');
                }

                $whoCell.before($aliasCell);
                $row.addClass('cf-alias-processed'); // 标记为已处理,防止重复添加
            }
        });

        // 刷新 datatable 的样式,确保新列的样式正确
        $('.datatable').each(function () {
            // 重新应用交替背景色和边角样式
            $(this).find("th, td")
                .removeClass("top").removeClass("bottom")
                .removeClass("left").removeClass("right")
                .removeClass("dark");
            $(this).find("tr:first th").addClass("top");
            $(this).find("tr:last td").addClass("bottom");
            $(this).find("tr:odd td").addClass("dark");
            $(this).find("tr td:first-child, tr th:first-child").addClass("left");
            $(this).find("tr td:last-child, tr th:last-child").addClass("right");
        });
    }

    // 使用 MutationObserver 监听 DOM 变化
    function observeDOMChanges() {
        const observer = new MutationObserver(mutations => {
            let columnAdded = false;
            mutations.forEach(mutation => {
                if (mutation.type === 'childList') {
                    // 仅当表格内容有变化时才尝试重新添加列头和行别名
                    if ($(mutation.target).closest('.standings').length || $('.standings').length > 0) {
                        addAliasColumnHeader(); // 确保列头始终存在
                        addAliasToRows();
                        columnAdded = true;
                    }
                }
            });
            // if(columnAdded) {
            //     // 触发datatable的样式更新(如果需要)
            //     if (typeof window.updateDatatableFilter === 'function') {
            //         // Codeforces的datatable更新函数可能需要一个参数,通常是触发筛选的input
            //         // 这里我们只是想触发样式更新,可以尝试传入一个空的或不相关的元素
            //         $('.datatable .filter input').each(function() {
            //             window.updateDatatableFilter(this);
            //         });
            //     }
            // }
        });

        // 监听 body 元素及其子元素的任何变化,特别是对 '.standings' 表格
        // 适当调整监听范围以提高性能,避免过度触发
        const standingsTable = $('.standings')[0]; // 仅监听 standings 表格
        if (standingsTable) {
            observer.observe(standingsTable, {
                childList: true,    // 监听子节点的添加或移除 (例如新行)
                subtree: true,      // 监听所有后代节点的添加、移除或内容修改
            });
        } else {
            // 如果一开始没有 standings 表格,监听 body
            observer.observe(document.body, {
                childList: true,
                subtree: true
            });
        }
    }


    // ================== 脚本初始化 ==================

    // 等待页面完全加载 (使用 jQuery ready 确保 DOM 准备好)
    $(document).ready(function() {
        addSettingsButton();
        addAliasColumnHeader(); // 首次加载时添加列头
        addAliasToRows(); // 首次加载时添加别名到现有行
        observeDOMChanges(); // 监听后续的 DOM 变化
    });

})(jQuery);