查看“︁TierListMaker”︁的源代码


<includeonly>
<style>
.avatar-frame {
    position: relative;
    display: inline-block;
    vertical-align: top;
    border: 3px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    background: #f5f5f5;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: grab;
    margin: 2px;
}

.avatar-frame:active {
    cursor: grabbing;
}

.avatar-frame.dragging {
    opacity: 0.5;
    transform: scale(1.05);
}

.avatar-frame:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 10;
}

.avatar-frame img {
    display: block;
    width: 100px;
    height: 100px;
    object-fit: cover;
    pointer-events: none;
}

.avatar-name {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 2px 8px;
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 0 2px black, 0 0 2px black;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top-right-radius: 3px;
    pointer-events: none;
}

.tier-row {
    position: relative;
    background-color: #fafafa;
    border: 2px dashed transparent;
    transition: all 0.2s ease;
}

.tier-row.drag-over {
    background-color: #e3f2fd;
    border-color: #2196F3;
}

#character-pool {
    position: relative;
}

#character-pool.drag-over {
    background-color: #fff3e0;
}

.tierlist-table {
    width: 100%;
    table-layout: fixed;
}

.tierlist-table th {
    width: 100px;
}

.tierlist-btn {
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
    transition: all 0.2s ease;
}

.tierlist-btn-save {
    background-color: #4CAF50;
}

.tierlist-btn-save:hover {
    background-color: #45a049;
}

.tierlist-btn-reset {
    background-color: #f44336;
}

.tierlist-btn-reset:hover {
    background-color: #da190b;
}

.tierlist-btn:active {
    transform: scale(0.98);
}

.character-pool-container {
    background-color: #f9f9f9;
    padding: 15px;
    border: 2px dashed #ccc;
    border-radius: 5px;
    margin-top: 20px;
}

.character-pool-container h3 {
    margin-top: 0;
    color: #333;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<script>
(function() {
    'use strict';
    
    // 防止重复初始化
    if (window.TierlistMaker) {
        console.log('TierlistMaker already initialized');
        return;
    }
    
    const TierlistMaker = {
        draggedElement: null,
        sourceContainer: null,
        initialized: false,
        
        init: function() {
            if (this.initialized) return;
            
            // 等待DOM完全加载
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', () => this.setup());
            } else {
                this.setup();
            }
            
            this.initialized = true;
        },
        
        setup: function() {
            this.initDragAndDrop();
            this.initButtons();
        },
        
        initDragAndDrop: function() {
            const avatars = document.querySelectorAll('.avatar-frame');
            
            avatars.forEach(avatar => {
                // 移除旧的事件监听器
                const newAvatar = avatar.cloneNode(true);
                avatar.parentNode.replaceChild(newAvatar, avatar);
                
                newAvatar.setAttribute('draggable', 'true');
                newAvatar.addEventListener('dragstart', (e) => this.handleDragStart(e, newAvatar));
                newAvatar.addEventListener('dragend', (e) => this.handleDragEnd(e, newAvatar));
            });
            
            // 为tier行添加拖放事件
            const tierRows = document.querySelectorAll('.tier-row');
            tierRows.forEach(row => {
                row.addEventListener('dragover', (e) => this.handleDragOver(e, row));
                row.addEventListener('drop', (e) => this.handleDrop(e, row));
                row.addEventListener('dragleave', (e) => this.handleDragLeave(e, row));
            });
            
            // 为角色池添加拖放事件
            const characterPool = document.getElementById('character-pool');
            if (characterPool) {
                characterPool.addEventListener('dragover', (e) => this.handleDragOver(e, characterPool));
                characterPool.addEventListener('drop', (e) => this.handleDrop(e, characterPool));
                characterPool.addEventListener('dragleave', (e) => this.handleDragLeave(e, characterPool));
            }
        },
        
        handleDragStart: function(e, element) {
            this.draggedElement = element;
            this.sourceContainer = element.parentElement;
            element.classList.add('dragging');
            e.dataTransfer.effectAllowed = 'move';
            e.dataTransfer.setData('text/html', element.innerHTML);
        },
        
        handleDragEnd: function(e, element) {
            element.classList.remove('dragging');
            
            // 移除所有drag-over类
            document.querySelectorAll('.drag-over').forEach(el => {
                el.classList.remove('drag-over');
            });
        },
        
        handleDragOver: function(e, element) {
            if (e.preventDefault) {
                e.preventDefault();
            }
            
            e.dataTransfer.dropEffect = 'move';
            element.classList.add('drag-over');
            
            return false;
        },
        
        handleDragLeave: function(e, element) {
            element.classList.remove('drag-over');
        },
        
        handleDrop: function(e, element) {
            if (e.stopPropagation) {
                e.stopPropagation();
            }
            
            e.preventDefault();
            element.classList.remove('drag-over');
            
            if (this.draggedElement && this.draggedElement !== element) {
                // 移动元素到新位置
                element.appendChild(this.draggedElement);
                
                // 重新初始化拖拽
                this.initDragAndDrop();
            }
            
            return false;
        },
        
        initButtons: function() {
            const saveBtn = document.getElementById('save-tierlist');
            const resetBtn = document.getElementById('reset-tierlist');
            
            if (saveBtn) {
                saveBtn.addEventListener('click', () => this.saveTierlist());
            }
            
            if (resetBtn) {
                resetBtn.addEventListener('click', () => this.resetTierlist());
            }
        },
        
        saveTierlist: function() {
            const table = document.getElementById('tierlist-table');
            if (!table) {
                alert('未找到 Tierlist 表格！');
                return;
            }
            
            // 检查 html2canvas 是否加载
            if (typeof html2canvas === 'undefined') {
                alert('正在加载图片生成库，请稍后再试...');
                return;
            }
            
            // 临时隐藏角色池和按钮
            const poolContainer = document.querySelector('.character-pool-container');
            const originalDisplay = poolContainer ? poolContainer.style.display : '';
            
            if (poolContainer) {
                poolContainer.style.display = 'none';
            }
            
            html2canvas(table, {
                scale: 2,
                backgroundColor: '#ffffff',
                logging: false,
                useCORS: true,
                allowTaint: true
            }).then(canvas => {
                // 恢复显示
                if (poolContainer) {
                    poolContainer.style.display = originalDisplay;
                }
                
                // 下载图片
                const link = document.createElement('a');
                const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5);
                link.download = 'tierlist_' + timestamp + '.png';
                link.href = canvas.toDataURL('image/png');
                link.click();
            }).catch(err => {
                console.error('生成图片失败:', err);
                if (poolContainer) {
                    poolContainer.style.display = originalDisplay;
                }
                alert('生成图片失败，请查看控制台了解详情');
            });
        },
        
        resetTierlist: function() {
            if (!confirm('确定要重置所有排列吗？此操作不可撤销。')) {
                return;
            }
            
            const pool = document.getElementById('character-pool');
            if (!pool) {
                alert('未找到角色池！');
                return;
            }
            
            const allAvatars = document.querySelectorAll('.avatar-frame');
            
            // 清空所有tier行
            document.querySelectorAll('.tier-row').forEach(row => {
                row.innerHTML = '';
            });
            
            // 将所有头像移回角色池
            allAvatars.forEach(avatar => {
                pool.appendChild(avatar);
            });
            
            // 重新初始化
            this.initDragAndDrop();
        }
    };
    
    // 暴露到全局
    window.TierlistMaker = TierlistMaker;
    
    // 自动初始化
    TierlistMaker.init();
})();
</script>
</includeonly>