Módulo:Droflax

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 con valores por defecto más robustos
    local nome = args.nome or 'Sem nome'
    local tier = args.tier or ''
    local classe = args.classe or ''
    local image = args.image or 'SemImagem.png'
    
    -- Procesar habilidades de forma más segura
    local habilidades = {}
    for i = 1, 21 do
        local prefix = 'hab' .. i .. '-'
        if args[prefix .. 'nome'] then
            table.insert(habilidades, {
                nome = args[prefix .. 'nome'] or '',
                icon = args[prefix .. 'icon'] or '',
                level = args[prefix .. 'level'] or '',
                desc = args[prefix .. 'desc'] or '',
                atr = args[prefix .. 'atr'] or '',
                video = args[prefix .. 'video'] or ''
            })
        end
    end
    
    -- Procesar skins similar al questlog
    local skins = {}
    for i = 1, 11 do
        local prefix = 'skin' .. i .. '-'
        if args[prefix .. 'image'] then
            table.insert(skins, {
                image = args[prefix .. 'image'],
                banner = args[prefix .. 'banner'] or '',
                tooltip = args[prefix .. 'tooltip'] or ''
            })
        end
    end

    -- Construcción HTML al estilo questlog
    local html = mw.html.create('div')
        :addClass('personaje-wrapper')
    
    -- Cabecera similar al questlog
    html:tag('div')
        :addClass('personaje-header')
        :wikitext('[[Arquivo:' .. image .. '|200px|link=]]')
    
    -- Información básica
    local infoBox = html:tag('div')
        :addClass('personaje-info')
    
    infoBox:tag('div')
        :addClass('personaje-title')
        :wikitext('' .. nome .. '')
    
    infoBox:tag('div')
        :addClass('personaje-subtitle')
        :wikitext(classe .. ' (' .. tier .. ')')
    
    -- Habilidades (adaptado al formato de items del questlog)
    if #habilidades > 0 then
        local habSection = html:tag('div')
            :addClass('personaje-section')
        
        habSection:tag('div')
            :addClass('section-title')
            :wikitext('Habilidades')
        
        local habList = habSection:tag('div')
            :addClass('personaje-habilidades')
        
        for i, hab in ipairs(habilidades) do
            local habItem = habList:tag('div')
                :addClass('habilidad-item')
            
            -- Icono de habilidad
            habItem:tag('div')
                :addClass('habilidad-icon')
                :wikitext('[[Arquivo:' .. hab.icon .. '|32px|link=]]')
            
            -- Detalles de habilidad
            local habDetails = habItem:tag('div')
                :addClass('habilidad-details')
            
            habDetails:tag('div')
                :addClass('habilidad-nome')
                :wikitext(hab.nome .. ' (Nv. ' .. hab.level .. ')')
            
            -- Atributos al estilo questlog
            if hab.atr and hab.atr ~= '' then
                local atrDiv = habDetails:tag('div')
                    :addClass('habilidad-atr')
                
                local atrLabels = {'PVE', 'PVP', 'Energia', 'Recarga'}
                local atrValues = mw.text.split(hab.atr, ',')
                
                for j, val in ipairs(atrValues) do
                    if atrLabels[j] then
                        atrDiv:tag('span')
                            :wikitext(atrLabels[j] .. ': ' .. val .. '  ')
                    end
                end
            end
            
            -- Descripción
            habDetails:tag('div')
                :addClass('habilidad-desc')
                :wikitext(hab.desc)
        end
    end
    
    -- Skins (adaptado al formato de items del questlog)
    if #skins > 0 then
        local skinSection = html:tag('div')
            :addClass('personaje-section')
        
        skinSection:tag('div')
            :addClass('section-title')
            :wikitext('Skins')
        
        local skinList = skinSection:tag('div')
            :addClass('personaje-skins')
        
        for i, skin in ipairs(skins) do
            local skinItem = skinList:tag('div')
                :addClass('skin-item')
            
            skinItem:tag('div')
                :wikitext('[[Arquivo:' .. skin.image .. '|100px|link=]]')
            
            if skin.tooltip and skin.tooltip ~= '' then
                skinItem:tag('div')
                    :addClass('skin-tooltip')
                    :wikitext(skin.tooltip)
            end
        end
    end
    
    -- 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); 
        }
    ]])

    return tostring(html)
end

return p