`;
}
- // 羁绊描述作为补充信息 - 如果有额外的描述信息
- if (details.description && details.description !== details.introduce) {
- content += `
`;
- }
-
- // 等级效果
+ // 羁绊激活条件
if (details.levels && details.levels.length > 0) {
- content += `
激活条件:
`;
- // 按等级排序
- const sortedLevels = [...details.levels].sort((a, b) => {
- return parseInt(a.level) - parseInt(b.level);
- });
-
- sortedLevels.forEach(levelInfo => {
+ // 添加激活条件卡片
+ details.levels.forEach(level => {
+ // 检查激活数量可能的字段名
+ let activateCount = null;
+ if (level.level) {
+ activateCount = level.level;
+ } else if (level.count) {
+ activateCount = level.count;
+ } else if (level.num) {
+ activateCount = level.num;
+ } else if (level.number) {
+ activateCount = level.number;
+ }
+
content += `
-
-
${levelInfo.level}人口：
-
${levelInfo.effect}
+
+
+ ${activateCount}个
+
+ ${level.level ? `等级 ${level.level}` : ''}
+
+
+
${level.effect}
`;
});
+
+ content += `
`;
}
// 相关棋子
if (details.related_chess && details.related_chess.length > 0) {
- content += `
相关棋子 (${details.related_chess.length})：
`;
+ content += `
相关棋子:
`;
- // 按费用排序
- const sortedChess = [...details.related_chess].sort((a, b) => {
- return parseInt(a.cost) - parseInt(b.cost);
+ // 根据费用对棋子进行分组
+ const chessByPrice = {};
+ details.related_chess.forEach(chess => {
+ const price = chess.cost || 0;
+ if (!chessByPrice[price]) {
+ chessByPrice[price] = [];
+ }
+ chessByPrice[price].push(chess);
});
- // 保持两列布局，因为棋子卡片较小
- content += `
`;
- sortedChess.forEach(chess => {
- const costClass = `cost-${chess.cost}`;
- content += `
-
- ${chess.name}
- ${chess.cost}费
-
- `;
+ // 按费用从低到高排序并添加棋子
+ Object.keys(chessByPrice).sort((a, b) => Number(a) - Number(b)).forEach(price => {
+ const priceChess = chessByPrice[price];
+
+ content += `
`;
+ content += `
`;
+
+ priceChess.forEach(chess => {
+ content += `
+
+
${chess.cost}
+
${chess.name}
+
+ `;
+ });
+
+ content += `
`;
});
- content += `
`;
}
- // 隐藏加载中状态
- loadingSpinner.addClass('hidden');
-
- // 设置内容并显示提示框
- tooltipContent.html(content);
-
- // 显示返回按钮
- showTooltipBackButton(tooltipContent);
-
- // 绑定交互事件
- bindTooltipInteractions(tooltipContent);
-
- // 所有内容准备好后显示提示框
- tooltip.removeClass('hidden');
- } else {
- // 处理错误
- tooltipContent.html(`
获取详情失败
`);
- loadingSpinner.addClass('hidden');
- tooltip.removeClass('hidden');
+ // 隐藏加载动画并更新内容
+ setTimeout(() => {
+ loadingSpinner.addClass('hidden');
+
+ // 模拟内容加载完成的淡入效果
+ modalContent.fadeOut(100, function() {
+ $(this).html(content).fadeIn(150);
+
+ // 显示返回按钮（如果有历史记录）
+ showTooltipBackButton(modalContent);
+
+ // 绑定棋子点击事件
+ bindTooltipInteractions(modalContent);
+ });
+ }, 100);
}
}).catch(error => {
// 处理错误
- tooltipContent.html(`
请求出错
`);
- loadingSpinner.addClass('hidden');
- tooltip.removeClass('hidden');
+ setTimeout(() => {
+ loadingSpinner.addClass('hidden');
+ modalContent.html(`
请求出错: ${error.message || '未知错误'}
`);
+ modalContent.fadeIn(150);
+ }, 100);
+
console.error('获取羁绊详情失败:', error);
});
}
/**
- * 显示棋子悬停提示
+ * 显示棋子模态框
* @param {string} chessId 棋子ID
* @param {Element} element 触发元素
*/
function showChessTooltip(chessId, element) {
- const tooltip = $('#tft-tooltip');
- const tooltipContent = tooltip.find('.tooltip-content');
- const loadingSpinner = tooltip.find('.loading-spinner');
-
- // 先隐藏提示框，在数据加载完成后再显示
- tooltip.addClass('hidden');
+ const modal = $('#tft-modal');
+ const modalContent = modal.find('.modal-content');
+ const loadingSpinner = modal.find('.loading-spinner');
// 重置历史记录
tooltipHistory = [];
// 使用共享方法显示内容
- showChessTooltipContent(chessId, element, tooltipContent);
+ showChessTooltipContent(chessId, element, modalContent);
}
/**
- * 显示羁绊悬停提示
+ * 显示羁绊模态框
* @param {string} synergyId 羁绊ID
* @param {Element} element 触发元素
*/
function showSynergyTooltip(synergyId, element) {
- const tooltip = $('#tft-tooltip');
- const tooltipContent = tooltip.find('.tooltip-content');
- const loadingSpinner = tooltip.find('.loading-spinner');
-
- // 先隐藏提示框，在数据加载完成后再显示
- tooltip.addClass('hidden');
+ const modal = $('#tft-modal');
+ const modalContent = modal.find('.modal-content');
+ const loadingSpinner = modal.find('.loading-spinner');
// 重置历史记录
tooltipHistory = [];
// 使用共享方法显示内容
- showSynergyTooltipContent(synergyId, element, tooltipContent);
+ showSynergyTooltipContent(synergyId, element, modalContent);
}
+// 存储当前悬停元素ID
+let currentHoveredId = null;
+
/**
- * 定位提示框
- * @param {jQuery} tooltip 提示元素
- * @param {Element} element 触发元素
+ * 初始化模态框交互
*/
-function positionTooltip(tooltip, element) {
- const rect = element.getBoundingClientRect();
+function initTooltips() {
+ // 初始化模态框
+ createTooltip();
+
+ // 检测是否为移动设备
const isMobile = window.matchMedia("(max-width: 768px)").matches ||
('ontouchstart' in window) ||
(navigator.maxTouchPoints > 0);
- // 移动设备始终居中显示
- if (isMobile) {
- // 移动设备上使用CSS定位在屏幕中央
- // 样式表中已经设置了固定位置，这里不需要设置left和top
- tooltip.css({
- // 重置定位，让CSS的固定定位生效
- transform: '',
- maxHeight: `${window.innerHeight * 0.7}px`,
- zIndex: 1000
- });
- } else {
- // 桌面设备的定位逻辑
- const tooltipWidth = 320; // 提示框宽度
-
- // 计算水平位置，优先显示在右侧
- let left = rect.right + 10;
- if (left + tooltipWidth > window.innerWidth) {
- // 右侧空间不足，显示在左侧
- left = rect.left - tooltipWidth - 10;
- // 如果左侧也没有足够空间
- if (left < 0) {
- left = Math.max(10, (window.innerWidth - tooltipWidth) / 2); // 居中显示
- }
+ // 处理棋子触发事件 - 统一使用点击事件
+ $(document).on('click', '.chess-item', function(e) {
+ // 避免在点击移除按钮时显示提示
+ if ($(e.target).closest('.remove-chess').length) {
+ return;
}
- // 计算垂直位置，考虑提示框不超出屏幕
- let top = rect.top;
- const tooltipHeight = Math.min(500, window.innerHeight * 0.8); // 预估高度
+ e.stopPropagation();
- if (top + tooltipHeight > window.innerHeight) {
- // 尝试显示在元素上方
- top = Math.max(10, rect.top - tooltipHeight);
+ // 如果已经点击过同一个元素，则关闭模态框
+ if (currentHoveredId === $(this).data('chess-id') && $('#tft-modal').hasClass('open')) {
+ closeModal();
+ return;
}
- // 设置位置
- tooltip.css({
- left: `${left}px`,
- top: `${top}px`,
- width: 'auto',
- maxHeight: `${window.innerHeight - 20}px` // 防止溢出屏幕
- });
- }
-}
-
-// 防抖函数
-function debounce(func, wait) {
- let timeout;
- return function(...args) {
- const context = this;
- clearTimeout(timeout);
- timeout = setTimeout(() => func.apply(context, args), wait);
- };
+ const chessId = $(this).data('chess-id');
+ if (chessId) {
+ // 关闭之前可能打开的提示
+ $('.tooltip-active').removeClass('tooltip-active');
+
+ currentHoveredId = chessId;
+ showChessTooltip(chessId, this);
+
+ // 添加活跃状态
+ $(this).addClass('tooltip-active');
+ }
+ });
+
+ // 处理羁绊触发事件 - 统一使用点击事件
+ $(document).on('click', '.synergy-item', function(e) {
+ // 避免在点击移除按钮时显示提示
+ if ($(e.target).closest('.remove-synergy').length) {
+ return;
+ }
+
+ e.stopPropagation();
+
+ // 如果已经点击过同一个元素，则关闭模态框
+ if (currentHoveredId === $(this).data('synergy-id') && $('#tft-modal').hasClass('open')) {
+ closeModal();
+ return;
+ }
+
+ const synergyId = $(this).data('synergy-id');
+ if (synergyId) {
+ // 关闭之前可能打开的提示
+ $('.tooltip-active').removeClass('tooltip-active');
+
+ currentHoveredId = synergyId;
+ showSynergyTooltip(synergyId, this);
+
+ // 添加活跃状态
+ $(this).addClass('tooltip-active');
+ }
+ });
+
+ // 点击文档其它位置关闭模态框
+ $(document).on('click', function(e) {
+ if (!$(e.target).closest('#tft-modal, .chess-item, .synergy-item').length) {
+ closeModal();
+ }
+ });
+
+ // ESC键关闭模态框
+ $(document).on('keydown', function(e) {
+ if (e.key === 'Escape' && $('#tft-modal').hasClass('open')) {
+ closeModal();
+ }
+ });
+
+ // 处理点击事件，避免与模态框冲突
+ $(document).on('click', '.remove-chess, .remove-synergy', function(e) {
+ e.stopPropagation();
+ closeModal();
+ });
+
+ // 处理窗口滚动时隐藏模态框
+ $(window).on('scroll', function() {
+ if ($('#tft-modal').hasClass('open')) {
+ closeModal();
+ }
+ });
}
/**
@@ -1295,153 +1366,4 @@ function fetchItemDetails(type, id) {
error: reject
});
});
-}
-
-// 存储当前悬停元素ID
-let currentHoveredId = null;
-
-/**
- * 初始化悬停提示
- */
-function initTooltips() {
- // 创建提示框
- createTooltip();
-
- const tooltipElement = $('#tft-tooltip');
-
- // 检测是否为移动设备
- const isMobile = window.matchMedia("(max-width: 768px)").matches ||
- ('ontouchstart' in window) ||
- (navigator.maxTouchPoints > 0);
-
- // 点击文档其它位置关闭提示框
- $(document).on('click touchend', function(e) {
- if (!$(e.target).closest('#tft-tooltip, .chess-item, .synergy-item').length) {
- tooltipElement.addClass('hidden');
- currentHoveredId = null;
- $('.tooltip-active').removeClass('tooltip-active');
- }
- });
-
- // 处理棋子触发事件
- $(document).on(isMobile ? 'click' : 'mouseenter', '.chess-item', function(e) {
- // 避免在点击移除按钮时显示提示
- if ($(e.target).closest('.remove-chess').length) {
- return;
- }
-
- // 在移动设备上点击时阻止冒泡
- if (isMobile) {
- e.stopPropagation();
- // 如果已经点击过同一个元素，则关闭提示
- if (currentHoveredId === $(this).data('chess-id') && tooltipElement.is(':visible')) {
- tooltipElement.addClass('hidden');
- currentHoveredId = null;
- $(this).removeClass('tooltip-active');
- return;
- }
- }
-
- const chessId = $(this).data('chess-id');
- if (chessId) {
- // 关闭之前可能打开的提示
- $('.tooltip-active').removeClass('tooltip-active');
-
- currentHoveredId = chessId;
-
- // 在移动设备上直接显示，非移动设备使用防抖
- if (isMobile) {
- showChessTooltip(chessId, this);
- } else {
- // 使用防抖函数延迟显示提示
- debounce((id, element) => {
- if (currentHoveredId === id) {
- showChessTooltip(id, element);
- }
- }, 50)(chessId, this);
- }
-
- // 添加活跃状态
- $(this).addClass('tooltip-active');
- }
- });
-
- // 处理羁绊触发事件
- $(document).on(isMobile ? 'click' : 'mouseenter', '.synergy-item', function(e) {
- // 避免在点击移除按钮时显示提示
- if ($(e.target).closest('.remove-synergy').length) {
- return;
- }
-
- // 在移动设备上点击时阻止冒泡
- if (isMobile) {
- e.stopPropagation();
- // 如果已经点击过同一个元素，则关闭提示
- if (currentHoveredId === $(this).data('synergy-id') && tooltipElement.is(':visible')) {
- tooltipElement.addClass('hidden');
- currentHoveredId = null;
- $(this).removeClass('tooltip-active');
- return;
- }
- }
-
- const synergyId = $(this).data('synergy-id');
- if (synergyId) {
- // 关闭之前可能打开的提示
- $('.tooltip-active').removeClass('tooltip-active');
-
- currentHoveredId = synergyId;
-
- // 在移动设备上直接显示，非移动设备使用防抖
- if (isMobile) {
- showSynergyTooltip(synergyId, this);
- } else {
- // 使用防抖函数延迟显示提示
- debounce((id, element) => {
- if (currentHoveredId === id) {
- showSynergyTooltip(id, element);
- }
- }, 50)(synergyId, this);
- }
-
- // 添加活跃状态
- $(this).addClass('tooltip-active');
- }
- });
-
- // 非移动设备的鼠标离开事件
- if (!isMobile) {
- $(document).on('mouseleave', '.chess-item, .synergy-item', function() {
- currentHoveredId = null;
- // 移除活跃状态
- $(this).removeClass('tooltip-active');
-
- // 检查鼠标是否在提示框上
- if (!tooltipElement.is(':hover')) {
- tooltipElement.addClass('hidden');
- }
- });
-
- // 避免提示框本身触发悬停事件
- tooltipElement.on('mouseenter', function() {
- // 保持显示
- }).on('mouseleave', function() {
- $(this).addClass('hidden');
- currentHoveredId = null;
- $('.tooltip-active').removeClass('tooltip-active');
- });
- }
-
- // 处理点击事件，避免与提示框冲突
- $(document).on('click', '.remove-chess, .remove-synergy', function(e) {
- e.stopPropagation();
- tooltipElement.addClass('hidden');
- currentHoveredId = null;
- });
-
- // 处理窗口滚动时隐藏提示
- $(window).on('scroll', function() {
- tooltipElement.addClass('hidden');
- currentHoveredId = null;
- });
}
\ No newline at end of file
diff --git a/src/web/templates/index.html b/src/web/templates/index.html
index 61bf1c3..bebd70e 100644
--- a/src/web/templates/index.html
+++ b/src/web/templates/index.html
@@ -140,6 +140,25 @@