MediaWiki:TierListMaker.js

(function() {
    'use strict';
    
    // 仅在 TierListMaker 页面运行
    if (mw.config.get('wgPageName') !== '节奏榜') {
        return;
    }
    
    // 等待页面加载完成
    $(function() {
        initTierListMaker();
    });
    
    function initTierListMaker() {
        // 添加控制按钮
        addControlButtons();
        
        // 初始化拖拽功能
        initDragAndDrop();
        
        // 添加样式
        addCustomStyles();
    }
    
    function addControlButtons() {
        var $buttonContainer = $('<div>')
            .attr('id', 'tier-list-controls')
            .css({
                'margin': '10px 0',
                'padding': '10px',
                'background': '#f0f0f0',
                'border-radius': '5px'
            });
        
        var $saveButton = $('<button>')
            .text('保存为PNG')
            .addClass('tier-list-save-btn')
            .click(saveTierListAsPNG);
        
        var $clearButton = $('<button>')
            .text('清空所有')
            .addClass('tier-list-clear-btn')
            .click(clearAllTiers);
        
        var $resetButton = $('<button>')
            .text('重置')
            .addClass('tier-list-reset-btn')
            .click(function() {
                location.reload();
            });
        
        $buttonContainer.append($saveButton, ' ', $clearButton, ' ', $resetButton);
        $('.wikitable').before($buttonContainer);
    }
    
    function addCustomStyles() {
        var styles = `
            <style>
                .tier-list-save-btn, .tier-list-clear-btn, .tier-list-reset-btn {
                    padding: 8px 16px;
                    margin: 0 5px;
                    font-size: 14px;
                    font-weight: bold;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                    transition: all 0.3s;
                }
                
                .tier-list-save-btn {
                    background: #4CAF50;
                    color: white;
                }
                
                .tier-list-save-btn:hover {
                    background: #45a049;
                }
                
                .tier-list-clear-btn {
                    background: #f44336;
                    color: white;
                }
                
                .tier-list-clear-btn:hover {
                    background: #da190b;
                }
                
                .tier-list-reset-btn {
                    background: #2196F3;
                    color: white;
                }
                
                .tier-list-reset-btn:hover {
                    background: #0b7dda;
                }
                
                .wikitable td {
                    min-height: 120px;
                    min-width: 300px;
                    padding: 10px;
                    vertical-align: top;
                    position: relative;
                }
                
                .tier-row-drop-zone {
                    border: 2px dashed transparent;
                    transition: all 0.3s;
                }
                
                .tier-row-drop-zone.drag-over {
                    border-color: #2196F3;
                    background-color: rgba(33, 150, 243, 0.1);
                }
                
                .avatar-frame {
                    cursor: move;
                    transition: transform 0.2s, opacity 0.2s;
                    user-select: none;
                }
                
                .avatar-frame:hover {
                    transform: scale(1.05);
                }
                
                .avatar-frame.dragging {
                    opacity: 0.5;
                }
                
                .avatar-frame.in-tier {
                    margin: 5px;
                }
                
                #avatar-pool {
                    border: 2px solid #ddd;
                    padding: 10px;
                    margin: 10px 0;
                    border-radius: 5px;
                    background: #fafafa;
                    min-height: 150px;
                }
                
                #avatar-pool-title {
                    font-size: 16px;
                    font-weight: bold;
                    margin-bottom: 10px;
                    color: #333;
                }
            </style>
        `;
        $('head').append(styles);
    }
    
    function initDragAndDrop() {
        // 创建头像池容器
        var $avatarPool = $('<div>')
            .attr('id', 'avatar-pool')
            .addClass('tier-row-drop-zone');
        
        var $poolTitle = $('<div>')
            .attr('id', 'avatar-pool-title')
            .text('角色池（拖动到上方表格）');
        
        $avatarPool.append($poolTitle);
        
        // 将所有头像移动到头像池
        var $avatars = $('.avatar-frame');
        $avatars.each(function() {
            $(this).addClass('avatar-item').appendTo($avatarPool);
        });
        
        $('.wikitable').after($avatarPool);
        
        // 为表格单元格添加drop-zone类
        $('.wikitable td').addClass('tier-row-drop-zone');
        
        // 初始化所有头像的拖拽
        initAvatarDrag();
        
        // 初始化所有drop zone
        initDropZones();
    }
    
    function initAvatarDrag() {
        $('.avatar-frame').each(function() {
            var $avatar = $(this);
            
            $avatar.attr('draggable', 'true');
            
            $avatar.on('dragstart', function(e) {
                $(this).addClass('dragging');
                e.originalEvent.dataTransfer.effectAllowed = 'move';
                e.originalEvent.dataTransfer.setData('text/html', this.outerHTML);
            });
            
            $avatar.on('dragend', function(e) {
                $(this).removeClass('dragging');
            });
        });
    }
    
    function initDropZones() {
        $('.tier-row-drop-zone').each(function() {
            var $zone = $(this);
            
            $zone.on('dragover', function(e) {
                e.preventDefault();
                e.originalEvent.dataTransfer.dropEffect = 'move';
                $(this).addClass('drag-over');
            });
            
            $zone.on('dragleave', function(e) {
                $(this).removeClass('drag-over');
            });
            
            $zone.on('drop', function(e) {
                e.preventDefault();
                $(this).removeClass('drag-over');
                
                var $dragging = $('.avatar-frame.dragging');
                
                if ($dragging.length) {
                    // 移动现有元素
                    $dragging.removeClass('dragging');
                    
                    // 如果是在tier中，添加样式
                    if ($(this).hasClass('wikitable')) {
                        $dragging.addClass('in-tier');
                    } else if ($(this).attr('id') === 'avatar-pool') {
                        $dragging.removeClass('in-tier');
                    } else {
                        $dragging.addClass('in-tier');
                    }
                    
                    $(this).append($dragging);
                }
            });
        });
    }
    
    function clearAllTiers() {
        if (!confirm('确定要清空所有分级吗？')) {
            return;
        }
        
        // 将所有tier中的头像移回头像池
        $('.wikitable td .avatar-frame').each(function() {
            $(this).removeClass('in-tier');
            $('#avatar-pool').append($(this));
        });
    }
    
    function saveTierListAsPNG() {
        // 检查是否已加载html2canvas库
        if (typeof html2canvas === 'undefined') {
            loadHtml2Canvas(function() {
                captureTierList();
            });
        } else {
            captureTierList();
        }
    }
    
    function loadHtml2Canvas(callback) {
        mw.loader.using('jquery', function() {
            $.getScript('https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js')
                .done(function() {
                    callback();
                })
                .fail(function() {
                    alert('加载截图库失败，请检查网络连接');
                });
        });
    }
    
    function captureTierList() {
        var $table = $('.wikitable');
        
        if ($table.length === 0) {
            alert('未找到表格');
            return;
        }
        
        // 显示加载提示
        var $loading = $('<div>')
            .css({
                'position': 'fixed',
                'top': '50%',
                'left': '50%',
                'transform': 'translate(-50%, -50%)',
                'background': 'rgba(0,0,0,0.8)',
                'color': 'white',
                'padding': '20px 40px',
                'border-radius': '10px',
                'z-index': 9999,
                'font-size': '18px'
            })
            .text('正在生成图片...')
            .appendTo('body');
        
        html2canvas($table[0], {
            backgroundColor: '#ffffff',
            scale: 2,
            logging: false,
            useCORS: true,
            allowTaint: true
        }).then(function(canvas) {
            $loading.remove();
            
            // 转换为blob并下载
            canvas.toBlob(function(blob) {
                var url = URL.createObjectURL(blob);
                var link = document.createElement('a');
                var timestamp = new Date().toISOString().slice(0,19).replace(/:/g,'-');
                link.download = 'tier-list-' + timestamp + '.png';
                link.href = url;
                link.click();
                URL.revokeObjectURL(url);
            });
        }).catch(function(error) {
            $loading.remove();
            console.error('截图失败:', error);
            alert('生成图片失败，请重试');
        });
    }
    
})();