Módulo:Droflax
Ir para navegação
Ir para pesquisar
A documentação para este módulo pode ser criada em Módulo:Droflax/doc
local p = {}
function p.render(frame)
local args = frame:getParent().args
-- Datos básicos
local nome = args.nome or ''
local tier = args.tier or ''
local classe = args.classe or ''
local image = args.image or ''
-- Procesar habilidades
local habilidades = {}
for i = 1, 21 do
local hab = {
nome = args['hab' .. i .. '-nome'],
icon = args['hab' .. i .. '-icon'],
level = args['hab' .. i .. '-level'],
desc = args['hab' .. i .. '-desc'],
atr = args['hab' .. i .. '-atr'],
video = args['hab' .. i .. '-video']
}
if hab.nome and hab.nome ~= '' then
table.insert(habilidades, hab)
end
end
-- Procesar skins
local skins = {}
for i = 1, 11 do
local skin = {
image = args['skin' .. i .. '-image'],
banner = args['skin' .. i .. '-banner'],
tooltip = args['skin' .. i .. '-tooltip']
}
if skin.image and skin.image ~= '' then
table.insert(skins, skin)
end
end
-- Generar HTML
local html = mw.html.create('div')
:addClass('personaje-box')
:attr('id', 'personaje-' .. mw.uri.encode(nome))
-- Header
local header = html:tag('div'):addClass('personaje-header')
local topbar = header:tag('div'):addClass('personaje-topbar')
local nomeBox = topbar:tag('div'):addClass('personaje-nome-box')
nomeBox:tag('img')
:attr('src', '/images/6/63/Franky_ts_medal.png')
:addClass('topbar-icon')
local nomeCategory = nomeBox:tag('div'):addClass('personaje-nome-category')
nomeCategory:tag('div'):addClass('nome'):wikitext(nome)
nomeCategory:tag('div'):addClass('classes'):wikitext(classe)
header:tag('div')
:addClass('topbar-description')
:wikitext(nome .. ' (' .. tier .. ') é um personagem do tier ' .. tier:lower() .. '.')
-- Tabs
local tabs = header:tag('div'):addClass('personaje-tabs')
tabs:tag('button')
:addClass('tab-btn')
:attr('data-tab', 'arma')
:wikitext('Arma')
tabs:tag('button')
:addClass('tab-btn active')
:attr('data-tab', 'habilidades')
:wikitext('Habilidades')
tabs:tag('button')
:addClass('tab-btn')
:attr('data-tab', 'skins')
:wikitext('Skins')
-- Imagen del personaje
html:tag('img')
:addClass('art-personaje')
:attr('src', image)
:attr('alt', 'Arte del personaje')
-- Tab content: Habilidades
local habContent = html:tag('div')
:addClass('tab-content active')
:attr('id', 'habilidades')
-- Contenedor de cuadros (iconos de habilidades)
local cuadrosContainer = habContent:tag('div'):addClass('cuadros-container')
for i, hab in ipairs(habilidades) do
cuadrosContainer:tag('div')
:addClass('cuadro')
:attr('data-hab-index', i)
:attr('title', hab.nome)
:tag('img')
:attr('src', hab.icon)
:attr('alt', hab.nome)
:css('width', '100%')
:css('height', '100%')
:css('object-fit', 'cover')
end
local habContainer = habContent:tag('div'):addClass('habilidades-container')
-- Detalles de habilidad
local habDetails = habContainer:tag('div'):addClass('habilidades-details')
habDetails:tag('div'):addClass('descripcion-container')
-- Video container
habContainer:tag('div'):addClass('video-container')
-- Tab content: Skins
local skinsContent = html:tag('div')
:addClass('tab-content')
:attr('id', 'skins')
local cardSkins = skinsContent:tag('div'):addClass('card-skins')
cardSkins:tag('span')
:addClass('card-skins-title')
:wikitext('SKINS & SPOTLIGHTS')
local carouselWrapper = cardSkins:tag('div'):addClass('skins-carousel-wrapper')
carouselWrapper:tag('button')
:addClass('skins-arrow left')
:wikitext('«')
local carousel = carouselWrapper:tag('div'):addClass('skins-carousel')
for i, skin in ipairs(skins) do
local skinCard = carousel:tag('div'):addClass('skin-card')
skinCard:tag('img')
:addClass('skins--imageBanner')
:attr('src', skin.banner)
:attr('alt', 'banner')
skinCard:tag('img')
:addClass('skins--imageSkin')
:attr('src', skin.image)
:attr('alt', 'skin')
end
carouselWrapper:tag('button')
:addClass('skins-arrow right')
:wikitext('»')
-- Datos para el widget (JSON en data attributes)
local dataContainer = html:tag('script')
:attr('type', 'application/json')
:attr('id', 'personaje-data-' .. mw.uri.encode(nome))
local data = {
nome = nome,
tier = tier,
classe = classe,
image = image,
habilidades = habilidades,
skins = skins
}
dataContainer:wikitext(mw.text.jsonEncode(data))
-- CSS inline (o mejor referencia a MediaWiki:Common.css)
html:tag('style'):wikitext([[
.personaje-box {
padding: 16px;
color: #000;
font-family: 'Segoe UI', sans-serif;
width: 90%;
margin: auto;
position: relative;
user-select: none;
}
.personaje-topbar {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 8px 16px;
}
.personaje-nome-box {
display: flex;
align-items: center;
gap: 8px;
}
.topbar-icon {
width: 90px;
height: 90px;
object-fit: none;
background: #60dae2;
}
.nome {
font-size: 60px;
font-family: 'Orbitron', sans-serif;
font-weight: 900;
}
.topbar-description {
font-size: 16px;
margin-top: 6px;
background: #6AF3FB;
width: fit-content;
padding-inline: 16px;
border-radius: 0 10px 10px 0;
}
.personaje-tabs {
margin: 4px 0 4px 8px;
display: flex;
gap: 12px;
justify-content: flex-start;
}
.tab-btn {
padding: 8px 20px;
background: #333;
color: white;
border: none;
border-radius: 8px;
font-size: 20px;
cursor: pointer;
}
.tab-btn.active {
background: #156bc7;
font-weight: bold;
}
.tab-content {
display: none;
background: #26211cd6;
padding: 0 8px 8px;
}
.tab-content.active {
display: block;
}
.art-personaje {
width: 665px;
position: absolute;
right: 1rem;
top: 0.4rem;
z-index: 9;
}
.cuadros-container {
display: flex;
flex-wrap: nowrap;
gap: 10px;
width: 56%;
overflow-x: auto;
overflow-y: hidden;
padding: 10px 0 3px 1px;
margin-bottom: 6px;
}
.cuadro {
flex: 0 0 auto;
width: 50px;
height: 50px;
border-radius: 5px;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.cuadro.activo {
box-shadow: 0 0 10px 3px rgba(255, 255, 0, 0.5);
border: 1px solid #FFD700;
}
.habilidades-container {
display: flex;
gap: 20px;
}
.habilidades-details {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
width: 50%;
justify-content: center;
}
.descripcion-container {
min-height: 25.1rem;
max-height: 50%;
padding: 4px 16px;
background: #26211C;
border-radius: 8px;
position: relative;
box-shadow: 0 0 7px rgb(255 255 255 / 82%), 0 0 5px rgb(255 255 255 / 96%);
color: #fff;
backdrop-filter: blur(2px);
}
.video-container {
width: 43%;
height: fit-content;
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
align-self: center;
border-radius: 2%;
box-shadow: 0 0 7px rgb(255 255 255 / 82%), 0 0 5px rgb(255 255 255 / 96%);
}
.tier-diamond .personaje-header {
background: linear-gradient(145deg, rgba(160,250,255,0.2), rgba(80,180,200,0.5));
background-color: #4b8292;
box-shadow: inset 0 0 8px rgba(255,255,255,0.1), 0 0 15px rgba(100,255,255,0.25);
}
]])
-- Agregar clase de tier
local tierClass = {
['bronze'] = 'tier-bronze', ['bronce'] = 'tier-bronze',
['silver'] = 'tier-silver', ['prata'] = 'tier-silver',
['gold'] = 'tier-gold', ['ouro'] = 'tier-gold',
['diamond'] = 'tier-diamond', ['diamante'] = 'tier-diamond'
}
if tierClass[tier:lower()] then
html:addClass(tierClass[tier:lower()])
end
return tostring(html)
end
return p