MediaWiki:TierListMaker.js
来自卡厄思梦境WIKI
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/**
* Tier List Maker
* 为角色列表添加拖拽排序功能
*/
(function() {
'use strict';
// 检查是否在正确的页面
if (!$('.wikitable').length) {
return;
}
// 加载必要的库
loadDragula(function() {
initTierList();
});
function loadDragula(callback) {
// 加载CSS
if (!$('#dragula-css').length) {
$('<link>')
.attr('id', 'dragula-css')
.attr('rel', 'stylesheet')
.attr('href', 'https://cdn.jsdelivr.net/npm/dragula@3.7.3/dist/dragula.min.css')
.appendTo('head');
}
// 加载JS
if (typeof dragula === 'undefined') {
$.getScript('https://cdn.jsdelivr.net/npm/dragula@3.7.3/dist/dragula.min.js')
.done(function() {
callback();
})
.fail(function() {
console.error('加载Dragula失败');
});
} else {
callback();
}
}
function initTierList() {
addStyles();
createAvatarPool();
processAvatars();
setupDragAndDrop();
addExportButton();
addSaveLoadButtons();
checkUrlForTierList();
}
function addStyles() {
var css = `
#avatar-pool {
background: #f5f5f5;
border: 2px dashed #ccc;
border-radius: 8px;
padding: 15px;
margin: 20px 0;
min-height: 120px;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: flex-start;
}
#avatar-pool.gu-over {
background: #e8f4f8;
border-color: #4a9eff;
}
.avatar-frame {
display: inline-flex;
flex-direction: column;
align-items: center;
padding: 8px;
background: white;
border: 2px solid #ddd;
border-radius: 8px;
cursor: move;
transition: all 0.2s;
margin: 4px;
min-width: 80px;
}
.avatar-frame:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
border-color: #4a9eff;
}
.avatar-frame.gu-transit {
opacity: 0.8;
transform: scale(1.05);
}
.avatar-frame img {
width: 64px;
height: 64px;
border-radius: 4px;
margin-bottom: 5px;
}
.avatar-name {
font-size: 12px;
text-align: center;
color: #333;
word-break: break-word;
max-width: 80px;
}
.wikitable td {
vertical-align: top;
min-height: 100px;
}
.wikitable td:nth-child(2) {
background: #fafafa;
padding: 10px;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-content: flex-start;
}
.wikitable td:nth-child(2).gu-over {
background: #e8f4f8;
}
.gu-mirror {
cursor: grabbing !important;
opacity: 0.9;
z-index: 9999 !important;
}
#export-tierlist-btn,
#save-tierlist-btn,
#load-tierlist-btn,
#share-tierlist-btn {
margin: 10px 5px;
padding: 12px 24px;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s;
color: white;
}
#export-tierlist-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
#export-tierlist-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
#save-tierlist-btn {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
#save-tierlist-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(245, 87, 108, 0.4);
}
#load-tierlist-btn {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
#load-tierlist-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(79, 172, 254, 0.4);
}
#share-tierlist-btn {
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
#share-tierlist-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(67, 233, 123, 0.4);
}
.tier-dialog-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
animation: fadeIn 0.3s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.tier-dialog {
background: white;
border-radius: 12px;
padding: 30px;
max-width: 500px;
width: 90%;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
animation: slideUp 0.3s;
}
@keyframes slideUp {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.tier-dialog h3 {
margin: 0 0 20px 0;
color: #333;
font-size: 24px;
}
.tier-dialog input {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 6px;
font-size: 16px;
margin-bottom: 20px;
box-sizing: border-box;
}
.tier-dialog input:focus {
outline: none;
border-color: #4a9eff;
}
.tier-dialog-buttons {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.tier-dialog-btn {
padding: 10px 20px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
}
.tier-dialog-btn-primary {
background: #4a9eff;
color: white;
}
.tier-dialog-btn-primary:hover {
background: #3a8eef;
}
.tier-dialog-btn-secondary {
background: #e0e0e0;
color: #333;
}
.tier-dialog-btn-secondary:hover {
background: #d0d0d0;
}
.tier-info-box {
background: #f0f8ff;
border: 2px solid #4a9eff;
border-radius: 8px;
padding: 15px;
margin: 15px 0;
}
.tier-info-box p {
margin: 8px 0;
color: #333;
}
.tier-info-box strong {
color: #4a9eff;
}
.tier-copy-btn {
background: #4a9eff;
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
margin-left: 10px;
font-size: 14px;
}
.tier-copy-btn:hover {
background: #3a8eef;
}
.tier-notification {
position: fixed;
top: 20px;
right: 20px;
padding: 15px 25px;
border-radius: 8px;
color: white;
font-size: 16px;
z-index: 10001;
animation: slideInRight 0.3s;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.tier-notification.success {
background: #4caf50;
}
.tier-notification.error {
background: #f44336;
}
.tier-notification.info {
background: #2196f3;
}
`;
$('<style>').text(css).appendTo('head');
}
function createAvatarPool() {
var $pool = $('<div>')
.attr('id', 'avatar-pool')
.html('<h3 style="width: 100%; margin: 0 0 10px 0; color: #666;">角色池 - 拖拽角色到对应层级</h3>');
$('.wikitable').before($pool);
}
function processAvatars() {
var avatarSelector = '.wikitable td a[href*="character"] img, .wikitable td img[src*="Face_character"]';
$(avatarSelector).each(function() {
var $img = $(this);
var $link = $img.closest('a');
var $td = $img.closest('td');
// 获取角色名称
var name = $img.attr('alt') || $img.attr('title') || $link.attr('title') || '';
// 创建头像框架
var $frame = $('<div>')
.addClass('avatar-frame')
.append($img.clone())
.append($('<div>').addClass('avatar-name').text(name));
// 添加唯一标识
var uniqueId = 'avatar_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
$frame.attr('data-tier-id', uniqueId);
// 移除原始内容
if ($link.length) {
$link.remove();
} else {
$img.remove();
}
// 添加到头像池
$('#avatar-pool').append($frame);
});
// 清理空的td
$('.wikitable td').each(function() {
var $td = $(this);
if ($td.children().length === 0 && $td.text().trim() === '') {
// 不删除，只是清空
}
});
}
function setupDragAndDrop() {
var containers = [$('#avatar-pool')[0]].concat($('.wikitable td:nth-child(2)').toArray());
var drake = dragula(containers, {
isContainer: function (el) {
return $(el).is('#avatar-pool') || $(el).is('.wikitable td:nth-child(2)');
},
moves: function (el, container, handle) {
return $(el).hasClass('avatar-frame');
},
accepts: function (el, target) {
return $(target).is('#avatar-pool') || $(target).is('.wikitable td:nth-child(2)');
},
copy: false,
revertOnSpill: true
});
drake.on('drop', function(el, target, source, sibling) {
var $el = $(el);
var $target = $(target);
console.log('角色被拖放');
console.log('目标容器:', $target.prop('tagName'), $target.attr('class') || $target.attr('id'));
// 如果放到tier中，添加标记
if ($target.is('.wikitable td:nth-child(2)')) {
$el.addClass('in-tier');
console.log('角色放入层级，添加 in-tier 类');
} else if ($target.is('#avatar-pool')) {
$el.removeClass('in-tier');
console.log('角色放回池中，移除 in-tier 类');
}
});
}
function addExportButton() {
var $button = $('<button>')
.attr('id', 'export-tierlist-btn')
.text('📸 导出为图片')
.click(function() {
loadHtml2Canvas(function() {
captureTierList();
});
});
$('.wikitable').after($button);
}
function addSaveLoadButtons() {
var $saveBtn = $('<button>')
.attr('id', 'save-tierlist-btn')
.text('💾 保存榜单')
.click(function() {
saveTierList();
});
var $loadBtn = $('<button>')
.attr('id', 'load-tierlist-btn')
.text('📂 加载榜单')
.click(function() {
showLoadDialog();
});
var $shareBtn = $('<button>')
.attr('id', 'share-tierlist-btn')
.text('🔗 分享榜单')
.click(function() {
showShareDialog();
});
$('#export-tierlist-btn').after($saveBtn).after($loadBtn).after($shareBtn);
}
function saveTierList() {
var tierData = collectTierData();
console.log('=== 开始保存榜单 ===');
console.log('收集到的层级数:', tierData.tiers.length);
console.log('池中角色数:', tierData.pool.length);
// 检查是否有数据要保存
var totalAvatars = tierData.pool.length;
tierData.tiers.forEach(function(tier) {
totalAvatars += tier.avatars.length;
});
console.log('总角色数:', totalAvatars);
if (totalAvatars === 0) {
alert('没有检测到任何角色数据！');
return;
}
if (tierData.tiers.length === 0) {
var confirm = window.confirm('您还没有将任何角色放入层级中，确定要保存空榜单吗？');
if (!confirm) {
return;
}
}
var listId = generateUniqueId();
var timestamp = new Date().toISOString();
var saveData = {
id: listId,
timestamp: timestamp,
data: tierData
};
console.log('保存的数据:', saveData);
localStorage.setItem('tierlist_' + listId, JSON.stringify(saveData));
console.log('已保存到 localStorage，key:', 'tierlist_' + listId);
// 验证保存
var saved = localStorage.getItem('tierlist_' + listId);
console.log('验证保存成功:', saved ? '是' : '否');
showSaveSuccessDialog(listId);
}
function collectTierData() {
var data = {
tiers: [],
pool: []
};
// 收集各个tier中的数据
$('.wikitable tr').each(function() {
var $cells = $(this).find('td');
if ($cells.length >= 2) {
var tierName = $cells.eq(0).text().trim();
var $tierCell = $cells.eq(1);
// 检查这个单元格是否包含头像
var $avatarsInTier = $tierCell.find('.avatar-frame');
console.log('检查层级:', tierName, '包含', $avatarsInTier.length, '个角色');
if ($avatarsInTier.length > 0) {
var avatars = [];
$avatarsInTier.each(function() {
var avatarId = getAvatarIdentifier($(this));
if (avatarId) {
avatars.push(avatarId);
console.log('收集角色:', avatarId);
}
});
if (avatars.length > 0) {
data.tiers.push({
name: tierName,
avatars: avatars
});
console.log('保存层级:', tierName, '共', avatars.length, '个角色');
}
}
}
});
// 收集头像池中的数据
$('#avatar-pool .avatar-frame').each(function() {
var avatarId = getAvatarIdentifier($(this));
if (avatarId) {
data.pool.push(avatarId);
}
});
console.log('最终收集的数据:', data);
console.log('层级数量:', data.tiers.length);
console.log('池中角色数量:', data.pool.length);
return data;
}
function getAvatarIdentifier($avatar) {
// 优先使用稳定的标识符
var identifier = {};
// 获取图片信息
var $img = $avatar.find('img');
if ($img.length > 0) {
identifier.src = $img.attr('src') || '';
identifier.alt = $img.attr('alt') || '';
identifier.title = $img.attr('title') || '';
}
// 获取文本内容
var $text = $avatar.find('.avatar-name');
if ($text.length > 0) {
identifier.name = $text.text().trim();
}
// 获取data属性
if ($avatar.attr('data-avatar-id')) {
identifier.dataId = $avatar.attr('data-avatar-id');
}
// 如果没有找到任何标识，使用outerHTML
if (Object.keys(identifier).length === 0) {
identifier.html = $avatar.prop('outerHTML');
}
// 添加一个唯一的data属性用于后续查找
if (!$avatar.attr('data-tier-id')) {
var uniqueId = 'avatar_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
$avatar.attr('data-tier-id', uniqueId);
identifier.tierId = uniqueId;
} else {
identifier.tierId = $avatar.attr('data-tier-id');
}
return JSON.stringify(identifier);
}
function showSaveSuccessDialog(listId) {
var pageUrl = window.location.origin + window.location.pathname;
var fullUrl = pageUrl + '?tierlist=' + listId;
var $overlay = $('<div>')
.addClass('tier-dialog-overlay')
.click(function(e) {
if (e.target === this) {
$(this).remove();
}
});
var $dialog = $('<div>').addClass('tier-dialog');
$dialog.html(`
<h3>✅ 榜单保存成功！</h3>
<div class="tier-info-box">
<p><strong>榜单ID:</strong> ${listId}</p>
<p><strong>分享链接:</strong></p>
<input type="text" value="${fullUrl}" readonly style="margin-bottom: 10px;">
</div>
<p style="color: #666; font-size: 14px;">您可以通过以下方式访问这个榜单：</p>
<ul style="color: #666; font-size: 14px; margin: 10px 0;">
<li>点击"加载榜单"按钮，输入ID：<code style="background: #f0f0f0; padding: 2px 6px; border-radius: 3px;">${listId}</code></li>
<li>复制分享链接发送给其他人</li>
</ul>
<div class="tier-dialog-buttons">
<button class="tier-dialog-btn tier-dialog-btn-secondary" onclick="this.closest('.tier-dialog-overlay').remove()">关闭</button>
<button class="tier-dialog-btn tier-dialog-btn-primary" id="copy-url-btn">复制链接</button>
</div>
`);
$overlay.append($dialog);
$('body').append($overlay);
// 复制链接按钮
$('#copy-url-btn').click(function() {
var $input = $dialog.find('input');
$input.select();
document.execCommand('copy');
showNotification('链接已复制到剪贴板！', 'success');
});
// 自动选中链接
setTimeout(function() {
$dialog.find('input').select();
}, 100);
}
function showLoadDialog() {
var $overlay = $('<div>')
.addClass('tier-dialog-overlay')
.click(function(e) {
if (e.target === this) {
$(this).remove();
}
});
var $dialog = $('<div>').addClass('tier-dialog');
// 获取所有保存的榜单
var savedLists = [];
for (var i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i);
if (key.startsWith('tierlist_')) {
try {
var data = JSON.parse(localStorage.getItem(key));
savedLists.push(data);
} catch (e) {
console.error('解析榜单失败:', key, e);
}
}
}
// 按时间排序
savedLists.sort(function(a, b) {
return new Date(b.timestamp) - new Date(a.timestamp);
});
var listHtml = '';
if (savedLists.length > 0) {
listHtml = '<div style="max-height: 300px; overflow-y: auto; margin: 15px 0;">';
savedLists.forEach(function(list) {
var date = new Date(list.timestamp).toLocaleString('zh-CN');
var tierCount = list.data.tiers.length;
var avatarCount = list.data.pool.length;
list.data.tiers.forEach(function(tier) {
avatarCount += tier.avatars.length;
});
listHtml += `
<div style="border: 1px solid #ddd; border-radius: 6px; padding: 10px; margin-bottom: 10px; cursor: pointer; transition: all 0.2s;"
class="saved-list-item"
data-list-id="${list.id}"
onmouseover="this.style.background='#f0f8ff'; this.style.borderColor='#4a9eff';"
onmouseout="this.style.background='white'; this.style.borderColor='#ddd';">
<div style="font-weight: bold; margin-bottom: 5px;">ID: ${list.id}</div>
<div style="font-size: 12px; color: #666;">保存时间: ${date}</div>
<div style="font-size: 12px; color: #666;">包含 ${tierCount} 个层级，${avatarCount} 个角色</div>
</div>
`;
});
listHtml += '</div>';
}
$dialog.html(`
<h3>📂 加载榜单</h3>
<p style="color: #666; margin-bottom: 15px;">输入榜单ID或从下方选择：</p>
<input type="text" id="tierlist-id-input" placeholder="输入榜单ID" style="margin-bottom: 15px;">
${listHtml || '<p style="color: #999; text-align: center; padding: 20px;">暂无保存的榜单</p>'}
<div class="tier-dialog-buttons">
<button class="tier-dialog-btn tier-dialog-btn-secondary" onclick="this.closest('.tier-dialog-overlay').remove()">取消</button>
<button class="tier-dialog-btn tier-dialog-btn-primary" id="load-btn">加载</button>
</div>
`);
$overlay.append($dialog);
$('body').append($overlay);
// 点击列表项选择
$('.saved-list-item').click(function() {
$('.saved-list-item').css('background', 'white').css('border-color', '#ddd');
$(this).css('background', '#e8f4f8').css('border-color', '#4a9eff');
$('#tierlist-id-input').val($(this).data('list-id'));
});
// 加载按钮
$('#load-btn').click(function() {
var listId = $('#tierlist-id-input').val().trim();
if (!listId) {
alert('请输入或选择榜单ID');
return;
}
if (loadTierListData(listId)) {
$overlay.remove();
} else {
alert('加载失败：未找到该榜单');
}
});
// 回车加载
$('#tierlist-id-input').keypress(function(e) {
if (e.which === 13) {
$('#load-btn').click();
}
});
}
function loadTierListData(listId) {
var savedData = localStorage.getItem('tierlist_' + listId);
console.log('尝试加载榜单 ID:', listId);
console.log('本地存储数据:', savedData);
if (!savedData) {
console.error('未找到榜单数据');
return false;
}
try {
var saveData = JSON.parse(savedData);
console.log('解析后的数据:', saveData);
applyTierData(saveData.data);
showNotification('榜单加载成功！', 'success');
return true;
} catch (e) {
console.error('加载榜单失败:', e);
return false;
}
}
function applyTierData(tierData) {
console.log('应用榜单数据:', tierData);
// 首先清空所有层级，将所有角色移回池中
$('.wikitable td:nth-child(2) .avatar-frame').each(function() {
$(this).removeClass('in-tier');
$('#avatar-pool').append($(this));
});
console.log('总共需要恢复', tierData.tiers.length, '个层级');
// 应用tier数据
tierData.tiers.forEach(function(tier, index) {
console.log('处理层级', index, ':', tier.name, '包含', tier.avatars.length, '个角色');
var $targetCell = null;
// 查找对应的tier单元格
$('.wikitable tr').each(function() {
var $cells = $(this).find('td');
if ($cells.length > 0) {
var tierName = $cells.eq(0).text().trim();
if (tierName === tier.name) {
$targetCell = $cells.eq(1);
console.log('找到目标单元格:', tierName);
return false;
}
}
});
if ($targetCell) {
tier.avatars.forEach(function(avatarId, avatarIndex) {
console.log('查找角色', avatarIndex, ':', avatarId);
var $avatar = findAvatarByIdentifier(avatarId);
if ($avatar) {
console.log('找到角色，移动到', tier.name);
$avatar.addClass('in-tier');
$targetCell.append($avatar);
} else {
console.warn('未找到角色:', avatarId);
}
});
} else {
console.warn('未找到层级单元格:', tier.name);
}
});
console.log('榜单应用完成');
}
function findAvatarByIdentifier(identifierStr) {
try {
var identifier = JSON.parse(identifierStr);
var $found = null;
$('.avatar-frame').each(function() {
var $avatar = $(this);
// 优先通过 tierId 匹配
if (identifier.tierId && $avatar.attr('data-tier-id') === identifier.tierId) {
$found = $avatar;
return false;
}
// 通过图片src匹配
var $img = $avatar.find('img');
if (identifier.src && $img.attr('src') === identifier.src) {
// 进一步验证name
var $name = $avatar.find('.avatar-name');
if (identifier.name && $name.text().trim() === identifier.name) {
$found = $avatar;
// 设置tierId以便下次快速查找
if (identifier.tierId) {
$avatar.attr('data-tier-id', identifier.tierId);
}
return false;
}
}
// 通过name匹配（备用方案）
if (identifier.name) {
var $name = $avatar.find('.avatar-name');
if ($name.text().trim() === identifier.name) {
$found = $avatar;
return false;
}
}
});
return $found;
} catch (e) {
console.error('解析角色标识符失败:', e);
return null;
}
}
function showShareDialog() {
// 先保存当前榜单
var tierData = collectTierData();
var listId = generateUniqueId();
var timestamp = new Date().toISOString();
var saveData = {
id: listId,
timestamp: timestamp,
data: tierData
};
localStorage.setItem('tierlist_' + listId, JSON.stringify(saveData));
// 生成分享链接
var pageUrl = window.location.origin + window.location.pathname;
var fullUrl = pageUrl + '?tierlist=' + listId;
var $overlay = $('<div>')
.addClass('tier-dialog-overlay')
.click(function(e) {
if (e.target === this) {
$(this).remove();
}
});
var $dialog = $('<div>').addClass('tier-dialog');
$dialog.html(`
<h3>🔗 分享榜单</h3>
<div class="tier-info-box">
<p><strong>分享链接:</strong></p>
<input type="text" value="${fullUrl}" readonly id="share-url-input">
<p style="margin-top: 10px; font-size: 14px; color: #666;">
将此链接发送给好友，他们打开后可以看到您的榜单排序。
</p>
</div>
<div class="tier-dialog-buttons">
<button class="tier-dialog-btn tier-dialog-btn-secondary" onclick="this.closest('.tier-dialog-overlay').remove()">关闭</button>
<button class="tier-dialog-btn tier-dialog-btn-primary" id="share-copy-btn">复制链接</button>
</div>
`);
$overlay.append($dialog);
$('body').append($overlay);
// 复制按钮
$('#share-copy-btn').click(function() {
var $input = $('#share-url-input');
$input.select();
document.execCommand('copy');
showNotification('分享链接已复制！', 'success');
});
// 自动选中
setTimeout(function() {
$('#share-url-input').select();
}, 100);
}
function checkUrlForTierList() {
var urlParams = new URLSearchParams(window.location.search);
var tierlistId = urlParams.get('tierlist');
if (tierlistId) {
console.log('检测到URL中的榜单ID:', tierlistId);
setTimeout(function() {
if (loadTierListData(tierlistId)) {
showNotification('已自动加载分享的榜单', 'info');
} else {
showNotification('无法加载分享的榜单', 'error');
}
}, 500);
}
}
function generateUniqueId() {
return Date.now().toString(36) + Math.random().toString(36).substr(2, 9);
}
function showNotification(message, type) {
var $notification = $('<div>')
.addClass('tier-notification')
.addClass(type || 'info')
.text(message);
$('body').append($notification);
setTimeout(function() {
$notification.fadeOut(300, function() {
$(this).remove();
});
}, 3000);
}
function loadHtml2Canvas(callback) {
if (typeof html2canvas === 'undefined') {
$.getScript('https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js')
.done(function() {
callback();
})
.fail(function() {
alert('加载html2canvas失败，请检查网络连接');
});
} else {
callback();
}
}
function captureTierList() {
var $table = $('.wikitable').first().clone();
// 移除空的tier单元格中的占位内容
$table.find('td:nth-child(2)').each(function() {
if ($(this).find('.avatar-frame').length === 0) {
$(this).empty();
}
});
// 创建临时容器
var $container = $('<div>')
.css({
position: 'fixed',
left: '-9999px',
top: '0',
background: 'white',
padding: '20px',
minWidth: '800px'
})
.append($table);
$('body').append($container);
// 添加标题
var $title = $('<h2>')
.text('我的Tier榜单')
.css({
textAlign: 'center',
marginBottom: '20px',
color: '#333'
});
$container.prepend($title);
html2canvas($container[0], {
backgroundColor: '#ffffff',
scale: 2,
logging: false,
useCORS: true,
allowTaint: true
}).then(function(canvas) {
$container.remove();
// 转换为blob并下载
canvas.toBlob(function(blob) {
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'tierlist_' + Date.now() + '.png';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
showNotification('榜单图片已导出！', 'success');
});
}).catch(function(error) {
$container.remove();
console.error('导出失败:', error);
alert('导出图片失败：' + error.message);
});
}
})();
/**
* 使用说明：
*
* 1. 拖拽功能：
* - 从角色池拖拽角色到对应的层级
* - 在层级之间拖拽调整
* - 拖回角色池移除
*
* 2. 保存功能：
* - 点击"保存榜单"保存当前排序
* - 系统会生成唯一ID
* - 数据保存在浏览器本地存储中
*
* 3. 加载功能：
* - 点击"加载榜单"查看所有已保存的榜单
* - 可以选择榜单或输入ID加载
* - 支持从URL参数自动加载
*
* 4. 分享功能：
* - 点击"分享榜单"生成分享链接
* - 复制链接发送给他人
* - 他人打开链接自动加载您的榜单
*
* 5. 导出功能：
* - 点击"导出为图片"将榜单保存为PNG图片
* - 图片包含所有层级和角色排序
*
* 技术特性：
* - 使用 dragula.js 实现拖拽
* - 使用 html2canvas 实现截图
* - 使用 localStorage 保存数据
* - 支持 URL 参数传递榜单
* - 响应式设计，支持移动端
*
* 数据格式：
* {
* "id": "唯一标识",
* "timestamp": "保存时间",
* "data": {
* "tiers": [
* {
* "name": "层级名称",
* "avatars": ["角色标识1", "角色标识2", ...]
* }
* ],
* "pool": ["未分配的角色标识"]
* }
* }
*
* 角色标识格式：
* {
* "src": "图片路径",
* "name": "角色名称",
* "tierId": "唯一ID"
* }
*/