模块:卡牌/display

此模块的文档可以在模块:卡牌/display/doc创建

local p = {}

local function escFile(s)
    s = tostring(s or '')
    s = mw.text.trim(s)
    s = s:gsub('[%[%]%{%}%|]', '')
    return s
end

local function escText(s)
    return mw.text.encode(tostring(s or ''))
end

-- 确保模板与解析函数在内容中被展开
local function expandWikitext(s)
    if s == nil or s == '' then
        return ''
    end
    local ok, frame = pcall(mw.getCurrentFrame)
    if not ok or not frame then
        return tostring(s)
    end
    return frame:preprocess(tostring(s))
end

-- 稀有度统一
local function normalizeRarity(r)
    local s = tostring(r or ''):gsub('%s+', '')
    if s == '' then return nil end
    if s == '白' then return '白' end
    if s == '蓝' then return '蓝' end
    if s == '橙' or s == '橙色' then return '橙' end
    if s == '彩' or s == '彩虹' then return '彩' end
    return nil
end

-- 稀有度对应的标题背景条颜色
local function rarityBarColor(r)
    local key = normalizeRarity(r) or '蓝'
    local map = {
        ['白'] = 'rgba(239, 237, 237, 0.6)',
        ['蓝'] = 'rgba(119, 236, 254, 0.6)',
        ['橙'] = 'rgba(255, 200, 110, 0.6)',
        ['彩'] = 'rgba(180, 125, 242, 0.6)',
    }
    return map[key] or map['蓝']
end

-- 稀有度对应的卡牌名称颜色
local function rarityNameColor(r)
    local key = normalizeRarity(r) or '蓝'
    local map = {
        ['白'] = '#cccccc',
        ['蓝'] = '#73ecfe',
        ['橙'] = '#ffc86e',
        ['彩'] = '#a37df7',
    }
    return map[key] or map['蓝']
end

-- 根据外框宽度返回标题背景条几何尺寸
local function getBarGeom(width)
    width = tonumber(width) or 160
    if width <= 160 then
        return { top = 22, left = 5, w = 150, h = 8 }
    elseif width >= 320 then
        return { top = 44, left = 5, w = 305, h = 16 }
    else
        return { top = 33, left = 5, w = 230, h = 12 }
    end
end

-- 渲染标题背景条层级,art 之上,其余元素之下
local function renderRarityBar(info, width)
    local g = getBarGeom(width)
    local color = rarityBarColor(info.rarity)
    return string.format(
        '<div style="position:absolute;z-index:1;top:%dpx;left:%dpx;width:%dpx;height:%dpx;background-color:%s"></div>',
        g.top, g.left, g.w, g.h, color
    )
end

-- 仅渲染立绘层(最低层)
local function renderArtLayer(info, width)
    return '<div style="position: absolute; top: 0; left: 0; z-index:0;">[[File:' .. escFile(info.art) .. '|' .. width .. 'px|link=]]</div>'
end

-- 渲染覆盖层(横条之上)
local function renderOverlayLayers(info, width)
    local t = {}
    table.insert(t, '<div style="position: absolute; top: 0; left: 0; z-index:2;">[[File:card_黑色蒙版.png|' .. width .. 'px|link=]]</div>')
    table.insert(t, '<div style="position: absolute; top: 0; left: 0; z-index:3;">[[File:card_ego_' .. escFile(info.ego) .. '.png|' .. width .. 'px|link=]]</div>')
    table.insert(t, '<div style="position: absolute; top: 0; left: 0; z-index:4;">[[File:card_rarity_' .. escFile(info.rarity) .. '.png|' .. width .. 'px|link=]]</div>')
    table.insert(t, '<div style="position: absolute; top: 0; left: 0; z-index:5;">[[File:card_顶层蒙版.png|' .. width .. 'px|link=]]</div>')
    return table.concat(t, '')
end

-- 将 tokens 渲染为可调用模板的短标识
local function dictSpanFromTokens(tokens, color)
    if type(tokens) ~= 'table' or #tokens == 0 then
        return ''
    end
    local parts = {}
    for _, t in ipairs(tokens) do
        local key = mw.text.trim(t or '')
        if key ~= '' then
            table.insert(parts, '{{词典|' .. key .. '}}')
        end
    end
    if #parts == 0 then return '' end

    local colorMap = {
        default = '#f2ba02',
        green = '#22bb66'
    }
    local c = colorMap[color or 'default'] or colorMap.default

    return '<span style="color: ' .. c .. '">[' .. table.concat(parts, '/') .. ']</span><br>'
end

local function generateUniqueId(cardInfo)
    local timestamp = os.time()
    local random = math.random(1000, 9999)
    local base = (cardInfo.moduleName or '') .. '-' .. (cardInfo.cardName or '') .. (cardInfo.variantSuffix or '')
    local safeName = mw.uri.anchorEncode(base):gsub("%%", "-")
    return "card-" .. safeName .. "-" .. timestamp .. "-" .. random
end

-- AP 发光样式
local function apTextShadow(style)
    if style == 'red' then
        return 'text-shadow:0 0 10px #7a0e0e,0 0 20px #7a0e0e,0 0 30px #ff3030,0 0 40px #ff3030,0 0 50px #ff3030,0 0 60px #ff3030,0 0 70px #ff3030;'
    elseif style == 'green' then
        return 'text-shadow:0 0 10px #0e6f36,0 0 20px #0e6f36,0 0 30px #29ff85,0 0 40px #29ff85,0 0 50px #29ff85,0 0 60px #29ff85,0 0 70px #29ff85;'
    elseif style == 'blue' then
        return 'text-shadow:0 0 10px #132cbf,0 0 20px #132cbf,0 0 30px #4169ff,0 0 40px #4169ff,0 0 50px #4169ff,0 0 60px #4169ff,0 0 70px #4169ff;'
    else
        return '' -- gray: no glow
    end
end

local function renderApDiv(content, top, left, fontSize, style)
    content = tostring(content or '')
    local shadow = apTextShadow(style)
    local color = (style == 'gray') and '#cfcfcf' or 'white'
    return string.format(
        '<div style="position:absolute;z-index:10;top:%s;left:%s;font-family:number;font-size:%s;color:%s;%s">%s</div>',
        top, left, fontSize, color, shadow, content
    )
end

-- 单个机制卡片(固定 250px 宽度)
local function renderMechanismCard(title, desc)
    title = escText(title or '')
    local d = tostring(desc or '')
    if d == '' then
        d = '暂无详细说明'
    end
    -- 展开词典说明中的模板
    local body = expandWikitext(d)

    local dhtml = {}
    table.insert(dhtml, '<div class="mechanism-card" style="width: 250px;">')
    table.insert(dhtml, '<div style="width: 266px; height: 2px; background-color: #f2ba02;"></div>')
    table.insert(dhtml, '<div style="width: 100%; background-color: #343434; color: white; padding: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.3);  line-height: 1.6;">')
    table.insert(dhtml, '<div style="font-weight: bold;">' .. title .. '</div>')
    table.insert(dhtml, '<div>' .. body .. '</div>')
    table.insert(dhtml, '</div>')
    table.insert(dhtml, '</div>')
    return table.concat(dhtml, '')
end

-- 右侧词典说明容器
local function renderDictMechanisms(dictEntries)
    if type(dictEntries) ~= 'table' or #dictEntries == 0 then return '' end

    local html = {}
    -- 固定宽度 250px
    table.insert(html, '<div class="dict-mechanisms" style="display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-left:10px;width:250px;flex:0 0 250px;overflow:visible;">')
    for _, entry in ipairs(dictEntries) do
        table.insert(html, renderMechanismCard(entry.key, entry.desc))
    end
    table.insert(html, '</div>')
    return table.concat(html, '')
end

function p.render(cardInfo, subCardInfo)
    local dictDisplay = dictSpanFromTokens(cardInfo.dictTokens, cardInfo.dictColor)
    local cardId = generateUniqueId(cardInfo)
    local html = {}
    
    -- 渲染小卡片
    table.insert(html, p.renderSmallCard(cardInfo, cardId, dictDisplay))
    -- 渲染模态框(单独输出)
    table.insert(html, p.renderModal(cardInfo, cardId, dictDisplay, subCardInfo))
    
    return table.concat(html, '')
end

function p.renderSmallCard(cardInfo, cardId, dictDisplay)
    local html = {}
    local apDisplay = cardInfo.apText or ''
    local nameColor = rarityNameColor(cardInfo.rarity)

    table.insert(html, '<div class="card-small-wrapper" data-card-id="' .. escText(cardId) .. '" style="display:inline-block;vertical-align:top;position:relative;width:160px;height:230px;overflow:hidden;cursor:pointer;">')

    table.insert(html, renderArtLayer(cardInfo, 160))
    table.insert(html, renderRarityBar(cardInfo, 160))
    table.insert(html, renderOverlayLayers(cardInfo, 160))

    table.insert(html, renderApDiv(apDisplay, '5px', '25px', '36px', cardInfo.apStyle or 'blue'))
    table.insert(html, renderApDiv('—', '23px', '23px', '32px', cardInfo.apStyle or 'blue'))

    table.insert(html, '<div style="position:absolute;z-index:10;top:12px;left:50px;color:' .. nameColor .. ';font-size:18px">' .. escText(cardInfo.displayTitleShort or cardInfo.displayTitle or cardInfo.cardName) .. '</div>')

    table.insert(html, '<div style="position:absolute;z-index:10;top:33px;left:49px;">[[File:card_type_' .. escFile(cardInfo.cardType) .. '.png|18px|link=]]</div>')
    table.insert(html, '<div style="position:absolute;z-index:10;top:32px;left:67px;font-size:14px;color:white">' .. escText(cardInfo.cardType) .. '</div>')

    table.insert(html, '<div style="position:absolute;z-index:10;top:110px;left:20px;width:130px;height:115px;color:white;text-align:center;font-size:13px;line-height:15px;">')
    local smallContent = expandWikitext((dictDisplay or '') .. (cardInfo.desc or ''))
    table.insert(html, '<div class="scroll-text"><div class="scroll-text-content">' .. smallContent .. '</div></div>')
    table.insert(html, '</div>')
    table.insert(html, '</div>')
    
    return table.concat(html, '')
end

-- 新增:独立的模态框渲染函数
function p.renderModal(cardInfo, cardId, dictDisplay, subCardInfos)
    local html = {}
    local apDisplay = cardInfo.apText or ''
    local nameColor = rarityNameColor(cardInfo.rarity)

    table.insert(html, '<div id="' .. escText(cardId) .. '-modal" class="card-modal" style="display:none;position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.8);">')
    table.insert(html, '<div class="modal-close-button" style="position:fixed;top:20px;right:20px;z-index:10001;width:40px;height:40px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s;">')
    table.insert(html, '<span style="color:white;font-size:24px;line-height:1;">×</span>')
    table.insert(html, '</div>')

    table.insert(html, '<div class="card-modal-inner" style="height:100vh;display:flex;align-items:center;justify-content:center;">')
    table.insert(html, '<div class="original-card-view" style="display:flex;align-items:flex-start;justify-content:center;gap:10px;flex-wrap:wrap;">')

    -- 左侧:衍生卡牌
    if subCardInfos and #subCardInfos > 0 then
        table.insert(html, '<div class="ocv-col-left" style="display:flex;flex-direction:column;align-items:center;gap:10px;max-width:240px;">')
        table.insert(html, p.renderSubCard(subCardInfos[1]))
        if #subCardInfos > 1 then
            table.insert(html, '<div class="subcards-button" style="display:inline-block;padding:10px 10px;background:linear-gradient(135deg,#6fd8fe 0%,#4da6cc 100%);color:white;font-size:18px;font-weight:bold;border-radius:8px;cursor:pointer;box-shadow:0 4px 6px rgba(0,0,0,0.3);transition:all 0.3s;user-select:none;">查看所有衍生卡牌</div>')
        end
        table.insert(html, '</div>')
    end

    -- 中间:放大卡片
    table.insert(html, '<div class="ocv-col-center" style="display:flex;flex-direction:column;align-items:center;gap:10px;max-width:320px;">')
    table.insert(html, '<div style="display:inline-block;vertical-align:top;position:relative;width:320px;height:460px;overflow:hidden;">')
    table.insert(html, renderArtLayer(cardInfo, 320))
    table.insert(html, renderRarityBar(cardInfo, 320))
    table.insert(html, renderOverlayLayers(cardInfo, 320))

    table.insert(html, renderApDiv(apDisplay, '18px', '45px', '58px', cardInfo.apStyle or 'blue'))
    table.insert(html, renderApDiv('__', '48px', '40px', '32px', cardInfo.apStyle or 'blue'))

    table.insert(html, '<div style="position:absolute;z-index:10;top:28px;left:80px;color:' .. nameColor .. ';font-size:32px">' .. escText(cardInfo.displayTitleShort or cardInfo.displayTitle or cardInfo.cardName) .. '</div>')

    table.insert(html, '<div style="position:absolute;z-index:10;top:68px;left:79px;">[[File:card_type_' .. escFile(cardInfo.cardType) .. '.png|24px|link=]]</div>')
    table.insert(html, '<div style="position:absolute;z-index:10;top:65px;left:105px;font-size:20px;color:white">' .. escText(cardInfo.cardType) .. '</div>')
    table.insert(html, '<div style="position:absolute;z-index:10;top:250px;left:30px;width:300px;height:210px;color:white;text-align:center;font-size:28px;line-height:30px;">')
    local largeContent = expandWikitext((dictDisplay or '') .. (cardInfo.desc or ''))
    table.insert(html, '<div class="scroll-text" style="width:280px;height:200px"><div class="scroll-text-content">' .. largeContent .. '</div></div>')
    table.insert(html, '</div>')
    table.insert(html, '</div>')

    if cardInfo.hasInspiration or cardInfo.hasGodInspiration then
        table.insert(html, '<div class="variant-buttons" style="display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;">')
        if cardInfo.hasInspiration then
            table.insert(html, '<div class="inspiration-button" style="display:inline-block;padding:10px 10px;background:linear-gradient(135deg,#6fd8fe 0%,#4da6cc 100%);color:white;font-size:18px;font-weight:bold;border-radius:8px;cursor:pointer;box-shadow:0 4px 6px rgba(0,0,0,0.3);transition:all 0.3s;user-select:none;">灵光一闪</div>')
        end
        if cardInfo.hasGodInspiration then
            table.insert(html, '<div class="god-inspiration-button" style="display:inline-block;padding:10px 10px;background:linear-gradient(135deg,#ffd36a 0%,#e6a600 100%);color:white;font-size:18px;font-weight:bold;border-radius:8px;cursor:pointer;box-shadow:0 4px 6px rgba(0,0,0,0.3);transition:all 0.3s;user-select:none;">神光一闪</div>')
        end
        table.insert(html, '</div>')
    end
    table.insert(html, '</div>') -- 结束中间列

    -- 右侧:词典机制说明
    table.insert(html, '<div class="ocv-col-right" style="display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:250px;">')
    table.insert(html, renderDictMechanisms(cardInfo.dictEntries))
    table.insert(html, '</div>')

    table.insert(html, '</div>') -- original-card-view
    table.insert(html, '</div>') -- card-modal-inner

    -- 其他视图
    if subCardInfos and #subCardInfos > 1 then
        table.insert(html, p.renderSubcardsView(subCardInfos))
    end

    if cardInfo.hasInspiration and cardInfo.inspirationVariants then
        table.insert(html, '<div class="inspiration-view" style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:center;">')
        table.insert(html, '<div class="back-to-card-button" style="position:fixed;top:20px;left:20px;z-index:10001;padding:10px 25px;background:linear-gradient(135deg,#ff6b6b 0%,#cc5555 100%);color:white;font-size:16px;font-weight:bold;border-radius:8px;cursor:pointer;box-shadow:0 4px 6px rgba(0,0,0,0.3);transition:all 0.3s;user-select:none;">← 返回卡牌</div>')
        table.insert(html, '<div style="color:white;font-size:24px;margin-bottom:20px;">灵光一闪</div>')
        table.insert(html, '<div class="inspiration-cards-wrapper" style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:90vw;align-items:flex-start;">')
        for i, variantInfo in ipairs(cardInfo.inspirationVariants) do
            table.insert(html, p.renderInspirationVariant(variantInfo, i))
        end
        table.insert(html, '</div>')
        table.insert(html, '</div>')
        for i, variantInfo in ipairs(cardInfo.inspirationVariants) do
            if variantInfo.subCards and #variantInfo.subCards > 0 then
                table.insert(html, p.renderInspirationSubcardsView(variantInfo, i))
                for j, subCardInfo in ipairs(variantInfo.subCards) do
                    if subCardInfo.subCards and #subCardInfo.subCards > 0 then
                        table.insert(html, p.renderInspirationNestedSubcardsView(variantInfo, i, subCardInfo, j))
                    end
                end
            end
        end
    end

    if cardInfo.hasGodInspiration and cardInfo.godInspirationGroups and cardInfo.godInspirationGroupOrder then
        table.insert(html, '<div class="god-inspiration-view" style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:flex-start;">')
        table.insert(html, '<div class="back-to-card-button" style="position:fixed;top:20px;left:20px;z-index:10001;padding:10px 25px;background:linear-gradient(135deg,#ff6b6b 0%,#cc5555 100%);color:white;font-size:16px;font-weight:bold;border-radius:8px;cursor:pointer;box-shadow:0 4px 6px rgba(0,0,0,0.3);transition:all 0.3s;user-select:none;">← 返回卡牌</div>')
        table.insert(html, '<div style="color:white;font-size:24px;margin-top: 24px;">神光一闪</div>')
        for _, groupName in ipairs(cardInfo.godInspirationGroupOrder) do
            local groupList = cardInfo.godInspirationGroups[groupName]
            if groupList and #groupList > 0 then
                table.insert(html, '<div style="color:#ffd36a;font-size:20px;margin:8px 0;">' .. escText(groupName) .. '</div>')
                table.insert(html, '<div class="god-inspiration-row" style="display:flex;gap:10px;justify-content:center;flex-wrap:nowrap;max-width:90vw;">')
                for _, variantInfo in ipairs(groupList) do
                    table.insert(html, p.renderGodVariantCard(variantInfo))
                end
                table.insert(html, '</div>')
            end
        end
        table.insert(html, '</div>')
    end

    table.insert(html, '</div>') -- card-modal
    return table.concat(html, '')
end

function p.renderSubcardsView(subCardInfos)
    local html = {}
    table.insert(html, '<div class="subcards-view" style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:center;">')
    table.insert(html, '<div class="back-to-card-button" style="position:fixed;top:20px;left:20px;z-index:10001;padding:10px 25px;background:linear-gradient(135deg,#ff6b6b 0%,#cc5555 100%);color:white;font-size:16px;font-weight:bold;border-radius:8px;cursor:pointer;box-shadow:0 4px 6px rgba(0,0,0,0.3);transition:all 0.3s;user-select:none;">← 返回所有衍生</div>')
    table.insert(html, '<div style="color:white;font-size:24px;margin-bottom:20px;">衍生卡牌</div>')
    table.insert(html, '<div class="subcards-wrapper" style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:90vw;">')
    for i, subCardInfo in ipairs(subCardInfos) do
        table.insert(html, '<div style="display:flex;flex-direction:column;align-items:center;gap:10px;">')
        table.insert(html, p.renderSubCard(subCardInfo))
        if subCardInfo.subCards and #subCardInfo.subCards > 0 then
            table.insert(html, '<div class="view-nested-subcards-button" data-subcard-index="' .. i .. '" style="display:inline-block;padding:10px 20px;background:linear-gradient(135deg,#ffa500 0%,#cc8400 100%);color:white;font-size:15px;font-weight:bold;border-radius:8px;cursor:pointer;box-shadow:0 4px 6px rgba(0,0,0,0.3);transition:all 0.3s;user-select:none;">查看衍生卡牌</div>')
        end
        table.insert(html, '</div>')
    end
    table.insert(html, '</div>')
    table.insert(html, '</div>')
    for i, subCardInfo in ipairs(subCardInfos) do
        if subCardInfo.subCards and #subCardInfo.subCards > 0 then
            table.insert(html, p.renderNestedSubcardsView(subCardInfo, i))
        end
    end
    return table.concat(html, '')
end

function p.renderNestedSubcardsView(parentCardInfo, parentIndex)
    local html = {}
    table.insert(html, '<div class="nested-subcards-view" data-subcard-index="' .. parentIndex .. '" style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:center;">')
    table.insert(html, '<div class="back-to-subcards-button" style="position:fixed;top:20px;left:20px;z-index:10001;padding:10px 25px;background:linear-gradient(135deg,#ff6b6b 0%,#cc5555 100%);color:white;font-size:16px;font-weight:bold;border-radius:8px;cursor:pointer;box-shadow:0 4px 6px rgba(0,0,0,0.3);transition:all 0.3s;user-select:none;">← 返回所有衍生</div>')
    table.insert(html, '<div style="color:white;font-size:24px;margin-bottom:20px;">' .. escText(parentCardInfo.displayTitle or parentCardInfo.cardName) .. ' 的衍生卡牌</div>')
    table.insert(html, '<div class="nested-subcards-wrapper" style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:90vw;">')
    for _, nestedCardInfo in ipairs(parentCardInfo.subCards) do
        table.insert(html, '<div style="display:flex;flex-direction:column;align-items:center;gap:10px;">')
        table.insert(html, p.renderSubCard(nestedCardInfo))
        table.insert(html, '</div>')
    end
    table.insert(html, '</div>')
    table.insert(html, '</div>')
    return table.concat(html, '')
end

function p.renderInspirationVariant(variantInfo, index)
    local html = {}
    local dictDisplay = dictSpanFromTokens(variantInfo.dictTokens, variantInfo.dictColor)
    local apDisplay = variantInfo.apText or ''
    local nameColor = rarityNameColor(variantInfo.rarity)

    table.insert(html, '<div class="inspiration-variant" style="display:flex;flex-direction:column;align-items:center;gap:8px;width:240px;">')
    table.insert(html, '<div class="inspiration-variant-card" style="display:inline-block;vertical-align:top;position:relative;width:240px;height:345px;overflow:hidden;">')

    table.insert(html, renderArtLayer(variantInfo, 240))
    table.insert(html, renderRarityBar(variantInfo, 240))
    table.insert(html, renderOverlayLayers(variantInfo, 240))

    table.insert(html, renderApDiv(apDisplay, '8px', '31px', '54px', variantInfo.apStyle or 'blue'))
    table.insert(html, renderApDiv('—', '46px', '32px', '32px', variantInfo.apStyle or 'blue'))

    table.insert(html, '<div style="position:absolute;z-index:10;top:18px;left:64px;color:' .. nameColor .. ';font-size:24px">' .. escText(variantInfo.displayTitleShort or variantInfo.displayTitle or variantInfo.cardName) .. '</div>')

    table.insert(html, '<div style="position:absolute;z-index:10;top:50px;left:63px;">[[File:card_type_' .. escFile(variantInfo.cardType) .. '.png|24px]]</div>')
    table.insert(html, '<div style="position:absolute;z-index:10;top:49px;left:90px;font-size:20px;color:white">' .. escText(variantInfo.cardType) .. '</div>')
    table.insert(html, '<div style="position:absolute;z-index:10;top:165px;left:20px;width:220px;height:175px;color:white;text-align:center;font-size:18px;line-height:20px;">')
    local inspContent = expandWikitext((dictDisplay or '') .. (variantInfo.desc or ''))
    table.insert(html, '<div class="scroll-text" style="width:212px;height:170px"><div class="scroll-text-content">' .. inspContent .. '</div></div>')
    table.insert(html, '</div>')
    table.insert(html, '</div>')

    if variantInfo.subCards and #variantInfo.subCards > 0 then
        table.insert(html, '<div class="inspiration-subcards-button" data-variant-index="' .. index .. '" style="display:inline-block;padding:10px 20px;background:linear-gradient(135deg,#6fd8fe 0%,#4da6cc 100%);color:white;font-size:15px;font-weight:bold;border-radius:8px;cursor:pointer;box-shadow:0 4px 6px rgba(0,0,0,0.3);transition:all 0.3s;user-select:none;">查看衍生卡牌</div>')
    end

    table.insert(html, '</div>')
    return table.concat(html, '')
end

function p.renderInspirationSubcardsView(variantInfo, index)
    local html = {}
    table.insert(html, '<div class="inspiration-subcards-view" data-variant-index="' .. index .. '" style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:center;">')
    table.insert(html, '<div class="back-to-inspiration-button" style="position:fixed;top:20px;left:20px;z-index:10001;padding:10px 25px;background:linear-gradient(135deg,#ff6b6b 0%,#cc5555 100%);color:white;font-size:16px;font-weight:bold;border-radius:8px;cursor:pointer;box-shadow:0 4px 6px rgba(0,0,0,0.3);transition:all 0.3s;user-select:none;">← 返回灵光一闪</div>')
    table.insert(html, '<div style="color:white;font-size:24px;margin-bottom:20px;">' .. escText(variantInfo.displayTitle or variantInfo.cardName) .. '的衍生卡牌</div>')
    table.insert(html, '<div class="inspiration-subcards-wrapper" style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:90vw;">')
    for j, subCardInfo in ipairs(variantInfo.subCards) do
        table.insert(html, '<div style="display:flex;flex-direction:column;align-items:center;gap:10px;">')
        table.insert(html, p.renderSubCard(subCardInfo))
        if subCardInfo.subCards and #subCardInfo.subCards > 0 then
            table.insert(html, '<div class="view-inspiration-nested-subcards-button" data-variant-index="' .. index .. '" data-subcard-index="' .. j .. '" style="display:inline-block;padding:10px 20px;background:linear-gradient(135deg,#ffa500 0%,#cc8400 100%);color:white;font-size:15px;font-weight:bold;border-radius:8px;cursor:pointer;box-shadow:0 4px 6px rgba(0,0,0,0.3);transition:all 0.3s;user-select:none;">查看衍生卡牌</div>')
        end
        table.insert(html, '</div>')
    end
    table.insert(html, '</div>')
    table.insert(html, '</div>')
    return table.concat(html, '')
end

function p.renderInspirationNestedSubcardsView(variantInfo, variantIndex, parentSubCardInfo, parentSubIndex)
    local html = {}
    table.insert(html, '<div class="inspiration-nested-subcards-view" data-variant-index="' .. variantIndex .. '" data-subcard-index="' .. parentSubIndex .. '" style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:center;">')
    table.insert(html, '<div class="back-to-inspiration-subcards-button" data-variant-index="' .. variantIndex .. '" style="position:fixed;top:20px;left:20px;z-index:10001;padding:10px 25px;background:linear-gradient(135deg,#ff6b6b 0%,#cc5555 100%);color:white;font-size:16px;font-weight:bold;border-radius:8px;cursor:pointer;box-shadow:0 4px 6px rgba(0,0,0,0.3);transition:all 0.3s;user-select:none;">← 返回灵光一闪的衍生</div>')
    table.insert(html, '<div style="color:white;font-size:24px;margin-bottom:20px;">' .. escText(parentSubCardInfo.displayTitle or parentSubCardInfo.cardName) .. ' 的衍生卡牌</div>')
    table.insert(html, '<div class="inspiration-nested-subcards-wrapper" style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:90vw;">')
    for _, nestedCardInfo in ipairs(parentSubCardInfo.subCards or {}) do
        table.insert(html, '<div style="display:flex;flex-direction:column;align-items:center;gap:10px;">')
        table.insert(html, p.renderSubCard(nestedCardInfo))
        table.insert(html, '</div>')
    end
    table.insert(html, '</div>')
    table.insert(html, '</div>')
    return table.concat(html, '')
end

function p.renderGodVariantCard(variantInfo)
    local html = {}
    local dictDisplay = dictSpanFromTokens(variantInfo.dictTokens, variantInfo.dictColor)
    local apDisplay = variantInfo.apText or ''
    local nameColor = rarityNameColor(variantInfo.rarity)

    table.insert(html, '<div class="god-variant-card" style="display:inline-block;vertical-align:top;position:relative;width:240px;height:345px;overflow:hidden;">')

    table.insert(html, renderArtLayer(variantInfo, 240))
    table.insert(html, renderRarityBar(variantInfo, 240))
    table.insert(html, renderOverlayLayers(variantInfo, 240))

    table.insert(html, renderApDiv(apDisplay, '8px', '31px', '54px', variantInfo.apStyle or 'blue'))
    table.insert(html, renderApDiv('—', '46px', '32px', '32px', variantInfo.apStyle or 'blue'))

    table.insert(html, '<div style="position:absolute;z-index:10;top:18px;left:64px;color:' .. nameColor .. ';font-size:24px">' .. escText(variantInfo.displayTitleShort or variantInfo.displayTitle or variantInfo.cardName) .. '</div>')

    table.insert(html, '<div style="position:absolute;z-index:10;top:50px;left:63px;">[[File:card_type_' .. escFile(variantInfo.cardType) .. '.png|24px]]</div>')
    table.insert(html, '<div style="position:absolute;z-index:10;top:49px;left:90px;font-size:20px;color:white">' .. escText(variantInfo.cardType) .. '</div>')
    table.insert(html, '<div style="position:absolute;z-index:10;top:165px;left:20px;width:220px;height:175px;color:white;text-align:center;font-size:18px;line-height:20px;">')
    local godContent = expandWikitext((dictDisplay or '') .. (variantInfo.desc or ''))
    table.insert(html, '<div class="scroll-text" style="width:212px;height:170px"><div class="scroll-text-content">' .. godContent .. '</div></div>')
    table.insert(html, '</div>')
    table.insert(html, '</div>')
    return table.concat(html, '')
end

function p.renderSubCard(subCardInfo)
    local html = {}
    local dictDisplay = dictSpanFromTokens(subCardInfo.dictTokens, subCardInfo.dictColor)
    local apDisplay = subCardInfo.apText or ''
    local nameColor = rarityNameColor(subCardInfo.rarity)

    table.insert(html, '<div style="display:inline-block;vertical-align:top;position:relative;width:240px;height:345px;overflow:hidden;">')

    table.insert(html, renderArtLayer(subCardInfo, 240))
    table.insert(html, renderRarityBar(subCardInfo, 240))
    table.insert(html, renderOverlayLayers(subCardInfo, 240))

    table.insert(html, renderApDiv(apDisplay, '8px', '31px', '54px', subCardInfo.apStyle or 'blue'))
    table.insert(html, renderApDiv('—', '46px', '32px', '38px', subCardInfo.apStyle or 'blue'))

    table.insert(html, '<div style="position:absolute;z-index:10;top:18px;left:64px;color:' .. nameColor .. ';font-size:24px">' .. escText(subCardInfo.displayTitleShort or subCardInfo.displayTitle or subCardInfo.cardName) .. '</div>')

    table.insert(html, '<div style="position:absolute;z-index:10;top:50px;left:63px;">[[File:card_type_' .. escFile(subCardInfo.cardType) .. '.png|24px]]</div>')
    table.insert(html, '<div style="position:absolute;z-index:10;top:49px;left:90px;font-size:20px;color:white">' .. escText(subCardInfo.cardType) .. '</div>')
    table.insert(html, '<div style="position:absolute;z-index:10;top:165px;left:20px;width:220px;height:175px;color:white;text-align:center;font-size:18px;line-height:20px;">')
    local subContent = expandWikitext((dictDisplay or '') .. (subCardInfo.desc or ''))
    table.insert(html, '<div class="scroll-text" style="width:212px;height:170px"><div class="scroll-text-content">' .. subContent .. '</div></div>')
    table.insert(html, '</div>')
    table.insert(html, '</div>')
    return table.concat(html, '')
end

return p