模块:战斗员/display/立绘
来自卡厄思梦境WIKI
此模块的文档可以在模块:战斗员/display/立绘/doc创建
local p = {}
function p.display(frame)
-- 从模板参数获取数据
local args = frame:getParent().args
local data = {}
-- 复制所有参数到data表
for k, v in pairs(args) do
data[k] = mw.text.trim(v)
end
-- 如果名称未设置，使用默认值
if not data["名称"] or data["名称"] == "" then
data["名称"] = "未命名角色"
end
-- 收集所有可用的图片标签页
local tabs = {}
-- 默认标签
if data["默认"] and data["默认"] ~= "" then
table.insert(tabs, {name = "默认", key = "默认", index = #tabs})
end
-- 立绘标签
if data["立绘"] and data["立绘"] ~= "" then
table.insert(tabs, {name = "立绘", key = "立绘", index = #tabs})
end
-- 皮肤标签
for i = 1, 3 do
local skinKey = "皮肤" .. i
if data[skinKey] and data[skinKey] ~= "" then
table.insert(tabs, {name = "皮肤" .. i, key = skinKey, index = #tabs})
end
end
-- 创建PC端布局
local html = p.createDesktopLayout(data, tabs)
return tostring(html)
end
-- 创建PC端布局
function p.createDesktopLayout(data, tabs)
-- 构建HTML结构
local html = mw.html.create('div')
:attr('style', 'position: relative; width: 100%; height: 585px; margin: 0 auto; overflow: hidden;')
-- 背景图片
html:tag('div')
:attr('style', 'position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat;')
:wikitext('[[File:bg_character_info.png|link=]]')
-- 切换标签
local tabsDiv = html:tag('div')
:attr('class', 'main-line-wrap')
:attr('style', 'position: absolute; top: 10px; left: 10px; z-index: 10; margin: 0;')
local respTabs = tabsDiv:tag('div')
:attr('class', 'resp-tabs')
local tabsList = respTabs:tag('ul')
:attr('class', 'resp-tabs-list')
-- 生成标签页
for i, tab in ipairs(tabs) do
local li = tabsList:tag('li')
:attr('class', i == 1 and 'active czn-list-style' or 'czn-list-style')
:attr('onclick', 'switchPortrait(' .. (tab.index) .. ')')
:attr('style', 'cursor: pointer;')
li:tag('span')
:attr('class', 'tab-panel')
:wikitext(tab.name)
end
-- 左侧内容 - 职业和属性图标
if data["职业"] and data["职业"] ~= "" then
html:tag('div')
:attr('style', 'position: absolute; left: 32px; top: 155px; z-index: 2;')
:wikitext('[[File:icon_职业_' .. data["职业"] .. '.png|35px|link=]]')
end
if data["属性"] and data["属性"] ~= "" then
html:tag('div')
:attr('style', 'position: absolute; left: 72px; top: 155px; z-index: 2;')
:wikitext('[[File:icon_属性_' .. data["属性"] .. '.png|35px|link=]]')
end
-- 角色名称
html:tag('div')
:attr('style', 'position: absolute; left: 30px; top: 180px; color: white; font-size: 68px; font-weight: bold; text-shadow: 2px 2px 5px #000000; z-index: 2;')
:wikitext(data["名称"] or "")
-- 声优信息
if data["声优_韩"] or data["声优_日"] or data["声优_英"] then
html:tag('div')
:attr('style', 'position: absolute; left: 30px; top: 270px; z-index: 2;')
:wikitext('[[File:icon_CV.png|28px|link=]]')
local cvText = (data["声优_韩"] or "") .. "（韩）、" .. (data["声优_日"] or "") .. "（日）、" .. (data["声优_英"] or "") .. "（英）"
html:tag('div')
:attr('style', 'position: absolute; left: 63px; top: 273px; z-index: 2; color: #9d9e9e;')
:wikitext(cvText)
end
-- 信息框架
local infoItems = {
{label = "实装日期", value = data["实装日期"] or "", width = "310px"},
{label = "种族", value = data["种族"] or "", width = "100px"},
{label = "生日", value = data["生日"] or "", width = "100px"},
{label = "异能", value = data["异能"] or "", width = "100px"},
{label = "所属势力", value = data["所属势力"] or "", width = "100px"}
}
local yPos = 300
for i, item in ipairs(infoItems) do
if i == 1 then
-- 实装日期标签
html:tag('div')
:attr('style', 'position: absolute; left: 30px; top: ' .. yPos .. 'px; background-color: rgba(0, 0, 0, 0.5); color: white; text-align: center; padding:2px 5px 2px 5px; width: 100px; height:30px; z-index: 2;')
:wikitext(item.label)
html:tag('div')
:attr('style', 'position: absolute; left: 135px; top: ' .. yPos .. 'px; background-color: rgba(0, 0, 0, 0.5); color: white; text-align: center; padding:2px 5px 2px 5px; width: ' .. item.width .. '; height:30px; z-index: 2;')
:wikitext(item.value)
elseif i == 2 or i == 4 then
-- 种族和异能
html:tag('div')
:attr('style', 'position: absolute; left: 30px; top: ' .. yPos .. 'px; background-color: rgba(0, 0, 0, 0.5); color: white; text-align: center; padding:2px 5px 2px 5px; width: 100px; height:30px; z-index: 2;')
:wikitext(item.label)
html:tag('div')
:attr('style', 'position: absolute; left: 135px; top: ' .. yPos .. 'px; background-color: rgba(0, 0, 0, 0.5); color: white; text-align: center; padding:2px 5px 2px 5px; width: ' .. item.width .. '; height:30px; z-index: 2;')
:wikitext(item.value)
else
-- 生日和所属势力
html:tag('div')
:attr('style', 'position: absolute; left: 240px; top: ' .. (yPos - 35) .. 'px; background-color: rgba(0, 0, 0, 0.5); color: white; text-align: center; padding:2px 5px 2px 5px; width: 100px; height:30px; z-index: 2;')
:wikitext(item.label)
html:tag('div')
:attr('style', 'position: absolute; left: 345px; top: ' .. (yPos - 35) .. 'px; background-color: rgba(0, 0, 0, 0.5); color: white; text-align: center; padding:2px 5px 2px 5px; width: ' .. item.width .. '; height:30px; z-index: 2;')
:wikitext(item.value)
end
if i ~= 3 and i ~= 5 then
yPos = yPos + 35
end
end
-- 档案信息
if data["档案"] and data["档案"] ~= "" then
html:tag('div')
:attr('style', 'position: absolute; left: 30px; top: 405px; background-color: rgba(0, 0, 0, 0.5); color: white; text-align: left; padding:2px 5px 2px 5px; width: 415px; height:auto; z-index: 2;')
:wikitext(data["档案"])
end
-- 右侧属性列表
local attributes = {
{name = "攻击力", key = "攻击力_1级"},
{name = "防御力", key = "防御力_1级"},
{name = "HP", key = "HP_1级"},
{name = "暴击率", key = "暴击率_1级"},
{name = "暴击伤害", key = "暴击伤害_1级"},
{name = "弱点伤害率", key = "弱点伤害率_1级"},
{name = "自我意识恢复力", key = "自我意识恢复力_1级"},
{name = "热情属性伤害量", key = "热情属性伤害量_1级"},
{name = "正义属性伤害量", key = "正义属性伤害量_1级"},
{name = "秩序属性伤害量", key = "秩序属性伤害量_1级"},
{name = "本能属性伤害量", key = "本能属性伤害量_1级"},
{name = "虚无属性伤害量", key = "虚无属性伤害量_1级"},
{name = "额外伤害量", key = "额外伤害量_1级"},
{name = "持续伤害量", key = "持续伤害量_1级"},
{name = "分析", key = "分析_1级"}
}
local startY = 100
for i, attr in ipairs(attributes) do
local value = data[attr.key] or "0"
-- 只显示有值的属性
if value ~= "" then
local yPosition = startY + (i - 1) * 30
local isEven = (i % 2 == 0)
local bgStyle = isEven and "background-color: #dfe1e3; border-radius: 3px 0px 0px 3px;" or ""
local bgStyleRight = isEven and "background-color: #dfe1e3; border-radius: 0px 3px 3px 0px;" or ""
-- 属性名称
html:tag('div')
:attr('style', 'position: absolute; right: 150px; top: ' .. yPosition .. 'px; width: 200px; height: 25px; ' .. bgStyle .. ' color: #666666; padding-left: 5px; z-index: 2;')
:wikitext(attr.name)
-- 属性值
html:tag('div')
:attr('style', 'position: absolute; right: 50px; top: ' .. yPosition .. 'px; width: 100px; height: 25px; ' .. bgStyleRight .. ' color: #666666; padding-right: 5px; z-index: 2; text-align: right;')
:wikitext(value)
end
end
-- 立绘图片容器
local portraitContainer = html:tag('div')
:attr('id', 'portrait-container')
:attr('style', 'position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-height: 100%; max-width: 100%; z-index: 1;')
-- 生成所有可用的立绘图片
for i, tab in ipairs(tabs) do
local imageDiv = portraitContainer:tag('div')
:attr('class', 'portrait-image')
:attr('data-index', tostring(tab.index))
:attr('style', i == 1 and 'display: block;' or 'display: none;')
if data[tab.key] and data[tab.key] ~= "" then
imageDiv:wikitext('[[File:' .. data[tab.key] .. '|center|link=]]')
end
end
-- 添加JavaScript代码
local script = html:tag('script')
script:wikitext([[
function switchPortrait(index) {
// 隐藏所有图片
var images = document.querySelectorAll('.portrait-image');
images.forEach(function(img) {
img.style.display = 'none';
});
// 显示选中的图片
var selectedImage = document.querySelector('.portrait-image[data-index="' + index + '"]');
if (selectedImage) {
selectedImage.style.display = 'block';
}
// 更新标签页状态
var tabs = document.querySelectorAll('.resp-tabs-list li');
tabs.forEach(function(tab, i) {
if (i === index) {
tab.classList.add('active');
} else {
tab.classList.remove('active');
}
});
}
]])
return html
end
return p