查看“︁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: move;
    margin: 2px;
}
.avatar-frame:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 10;
}
.avatar-frame.dragging {
    opacity: 0.5;
}
.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-content {
    min-height: 120px;
    transition: background-color 0.3s;
}
.tier-content.drag-over {
    background-color: #e3f2fd !important;
    border: 2px dashed #2196F3;
}
.tier-header {
    position: relative;
    user-select: none;
}
.tier-label {
    display: inline-block;
    padding: 5px;
}
.tier-label:focus {
    outline: 2px solid white;
    outline-offset: -2px;
}
.color-picker-trigger {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 16px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
}
.color-picker-trigger:hover {
    opacity: 1;
}
.control-button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
.control-button:active {
    transform: translateY(0);
}
#tierlist-table {
    border: 2px solid #ddd;
}
.tier-remove-btn {
    position: absolute;
    top: 5px;
    left: 5px;
    background: #f44336;
    color: white;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 12px;
    cursor: pointer;
    opacity: 0.7;
}
.tier-remove-btn:hover {
    opacity: 1;
}
</style>


<script>
let draggedElement = null;
let currentEditingTier = null;
// 初始化拖拽功能
function initDragAndDrop() {
    const avatars = document.querySelectorAll('.avatar-frame');
    const tierContents = document.querySelectorAll('.tier-content');
    
    avatars.forEach(avatar => {
        avatar.setAttribute('draggable', 'true');
        
        avatar.addEventListener('dragstart', function(e) {
            draggedElement = this;
            this.classList.add('dragging');
            e.dataTransfer.effectAllowed = 'move';
            e.dataTransfer.setData('text/html', this.outerHTML);
        });
        
        avatar.addEventListener('dragend', function(e) {
            this.classList.remove('dragging');
        });
    });
    
    tierContents.forEach(content => {
        content.addEventListener('dragover', function(e) {
            e.preventDefault();
            e.dataTransfer.dropEffect = 'move';
            this.classList.add('drag-over');
        });
        
        content.addEventListener('dragleave', function(e) {
            this.classList.remove('drag-over');
        });
        
        content.addEventListener('drop', function(e) {
            e.preventDefault();
            this.classList.remove('drag-over');
            
            if (draggedElement) {
                this.appendChild(draggedElement);
                draggedElement = null;
            }
        });
    });
}
// 添加新行
function addNewTier() {
    const table = document.getElementById('tierlist-table');
    const tbody = table.querySelector('tbody');
    const tierCount = document.querySelectorAll('.tier-header').length;
    
    const newRow = tbody.insertRow(-1);
    
    const headerCell = newRow.insertCell(0);
    headerCell.className = 'tier-header';
    headerCell.setAttribute('data-tier', tierCount);
    headerCell.style = 'width: 100px; background-color: #9e9e9e; color: white; font-size: 20px; text-align: center; cursor: pointer; position: relative;';
    headerCell.innerHTML = '<div class="tier-label" contenteditable="true">新行</div><div class="color-picker-trigger" onclick="showColorPicker(this, ' + tierCount + ')">🎨</div><div class="tier-remove-btn" onclick="removeTier(this)">删除</div>';
    
    const contentCell = newRow.insertCell(1);
    contentCell.className = 'tier-content';
    contentCell.setAttribute('data-tier', tierCount);
    contentCell.style = 'min-height: 120px; padding: 10px; background: #fff;';
    
    initDragAndDrop();
}
// 删除行
function removeTier(btn) {
    if (confirm('确定要删除这一行吗？')) {
        const row = btn.closest('tr');
        row.remove();
    }
}
// 显示颜色选择器
function showColorPicker(trigger, tier) {
    event.stopPropagation();
    currentEditingTier = tier;
    
    const header = document.querySelector('.tier-header[data-tier="' + tier + '"]');
    const bgColor = rgbToHex(header.style.backgroundColor);
    const textColor = rgbToHex(header.style.color);
    
    document.getElementById('bg-color-picker').value = bgColor;
    document.getElementById('text-color-picker').value = textColor;
    document.getElementById('color-picker-modal').style.display = 'block';
    document.getElementById('modal-overlay').style.display = 'block';
}
// 应用颜色
function applyColor() {
    if (currentEditingTier !== null) {
        const bgColor = document.getElementById('bg-color-picker').value;
        const textColor = document.getElementById('text-color-picker').value;
        const header = document.querySelector('.tier-header[data-tier="' + currentEditingTier + '"]');
        
        header.style.backgroundColor = bgColor;
        header.style.color = textColor;
    }
    closeColorPicker();
}
// 关闭颜色选择器
function closeColorPicker() {
    document.getElementById('color-picker-modal').style.display = 'none';
    document.getElementById('modal-overlay').style.display = 'none';
    currentEditingTier = null;
}
// RGB转HEX
function rgbToHex(rgb) {
    if (!rgb || rgb.indexOf('rgb') === -1) return '#000000';
    
    const values = rgb.match(/\d+/g);
    if (!values) return '#000000';
    
    const hex = values.map(x => {
        const hexValue = parseInt(x).toString(16);
        return hexValue.length === 1 ? '0' + hexValue : hexValue;
    });
    
    return '#' + hex.join('');
}
// 导出为PNG
function exportToPNG() {
    const container = document.getElementById('tier-list-container');
    
    // 使用html2canvas库
    if (typeof html2canvas === 'undefined') {
        // 动态加载html2canvas
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js';
        script.onload = function() {
            captureAndDownload(container);
        };
        document.head.appendChild(script);
    } else {
        captureAndDownload(container);
    }
}
function captureAndDownload(container) {
    html2canvas(container, {
        backgroundColor: '#ffffff',
        scale: 2,
        logging: false,
        useCORS: true
    }).then(canvas => {
        canvas.toBlob(function(blob) {
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'tier-list-' + new Date().getTime() + '.png';
            a.click();
            URL.revokeObjectURL(url);
        });
    });
}
// 页面加载完成后初始化
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initDragAndDrop);
} else {
    initDragAndDrop();
}
// 监听动态添加的元素
const observer = new MutationObserver(function(mutations) {
    initDragAndDrop();
});
observer.observe(document.body, {
    childList: true,
    subtree: true
});
</script>
</includeonly>