微件

TierListMaker：修订间差异

来自卡厄思梦境WIKI

←上一编辑下一编辑→
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
4,127次编辑
无编辑摘要
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
4,127次编辑
无编辑摘要
第103行： 第103行：
}
}
</style>
</style>


<script>
<script>
let draggedElement = null;
let draggedElement = null;
let currentEditingTier = null;
let currentEditingTier = null;
// 默认层级配置
const defaultTiers = [
    { label: 'S', bgColor: '#ff4444', textColor: '#ffffff' },
    { label: 'A', bgColor: '#ff9800', textColor: '#ffffff' },
    { label: 'B', bgColor: '#ffeb3b', textColor: '#000000' },
    { label: 'C', bgColor: '#8bc34a', textColor: '#ffffff' },
    { label: 'D', bgColor: '#2196F3', textColor: '#ffffff' }
];
// 初始化拖拽功能
// 初始化拖拽功能
function initDragAndDrop() {
function initDragAndDrop() {
第150行： 第159行：
     });
     });
}
}
// 添加新行
// 添加新行
function addNewTier() {
function addNewTier() {
第171行： 第181行：
     initDragAndDrop();
     initDragAndDrop();
}
}
// 删除行
// 删除行
function removeTier(btn) {
function removeTier(btn) {
第178行： 第189行：
     }
     }
}
}
// 重置功能
function resetTierList() {
    if (!confirm('确定要重置吗？所有角色将返回角色池，自定义行将被删除。')) {
        return;
    }
   
    const characterPool = document.getElementById('character-pool');
    const table = document.getElementById('tierlist-table');
    const tbody = table.querySelector('tbody');
   
    // 收集所有角色
    const allAvatars = document.querySelectorAll('.tier-content .avatar-frame');
    allAvatars.forEach(avatar => {
        characterPool.appendChild(avatar);
    });
   
    // 清空表格
    tbody.innerHTML = '';
   
    // 重建默认行
    defaultTiers.forEach((tier, index) => {
        const newRow = tbody.insertRow(-1);
       
        const headerCell = newRow.insertCell(0);
        headerCell.className = 'tier-header';
        headerCell.setAttribute('data-tier', index);
        headerCell.style = `width: 100px; background-color: ${tier.bgColor}; color: ${tier.textColor}; font-size: 20px; text-align: center; cursor: pointer; position: relative;`;
        headerCell.innerHTML = `<div class="tier-label" contenteditable="true">${tier.label}</div><div class="color-picker-trigger" onclick="showColorPicker(this, ${index})">🎨</div>`;
       
        const contentCell = newRow.insertCell(1);
        contentCell.className = 'tier-content';
        contentCell.setAttribute('data-tier', index);
        contentCell.style = 'min-height: 120px; padding: 10px; background: #fff;';
    });
   
    initDragAndDrop();
}
// 显示颜色选择器
// 显示颜色选择器
function showColorPicker(trigger, tier) {
function showColorPicker(trigger, tier) {
第192行： 第242行：
     document.getElementById('modal-overlay').style.display = 'block';
     document.getElementById('modal-overlay').style.display = 'block';
}
}
// 应用颜色
// 应用颜色
function applyColor() {
function applyColor() {
第204行： 第255行：
     closeColorPicker();
     closeColorPicker();
}
}
// 关闭颜色选择器
// 关闭颜色选择器
function closeColorPicker() {
function closeColorPicker() {
第210行： 第262行：
     currentEditingTier = null;
     currentEditingTier = null;
}
}
// RGB转HEX
// RGB转HEX
function rgbToHex(rgb) {
function rgbToHex(rgb) {
第224行： 第277行：
     return '#' + hex.join('');
     return '#' + hex.join('');
}
}
// 导出为PNG
// 导出为PNG
function exportToPNG() {
function exportToPNG() {
第241行： 第295行：
     }
     }
}
}
function captureAndDownload(container) {
function captureAndDownload(container) {
     html2canvas(container, {
     html2canvas(container, {
第258行： 第313行：
     });
     });
}
}
// 页面加载完成后初始化
// 页面加载完成后初始化
if (document.readyState === 'loading') {
if (document.readyState === 'loading') {
第264行： 第320行：
     initDragAndDrop();
     initDragAndDrop();
}
}
// 监听动态添加的元素
// 监听动态添加的元素
const observer = new MutationObserver(function(mutations) {
const observer = new MutationObserver(function(mutations) {
     initDragAndDrop();
     initDragAndDrop();
});
});
observer.observe(document.body, {
observer.observe(document.body, {
     childList: true,
     childList: true,

2025年10月20日 (一) 22:20的版本

检索自“http://cznwiki.com/index.php?title=微件:TierListMaker&oldid=3538”