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
    local mwHtml = require('mw.html')
    local util = require('libraryUtil')
    
    -- Validación básica
    if not args.nome or args.nome == '' then
        return '<div class="error">Falta el nombre del personaje</div>'
    end

    -- Construir estructura de datos
    local data = {
        nome = args.nome,
        tier = args.tier or '',
        classe = args.classe or '',
        image = args.image or '',  -- URL completa directamente
        habilidades = {},
        skins = {}
    }

    -- Procesar habilidades (1-15)
    for i = 1, 15 do
        if args['hab'..i..'-nome'] then
            table.insert(data.habilidades, {
                nome = args['hab'..i..'-nome'],
                icon = args['hab'..i..'-icon'],  -- URL completa directamente
                level = tonumber(args['hab'..i..'-level']) or 0,
                desc = args['hab'..i..'-desc'] or '',
                atr = args['hab'..i..'-atr'] or '',
                video = args['hab'..i..'-video'] or ''  -- URL completa directamente
            })
        end
    end

    -- Procesar skins (1-5)
    for i = 1, 5 do
        if args['skin'..i..'-image'] then
            table.insert(data.skins, {
                image = args['skin'..i..'-image'],  -- URL completa directamente
                tooltip = (args['skin'..i..'-tooltip'] or ''):gsub('\n', '<br>')
            })
        end
    end

    -- Construir HTML
    local html = mwHtml.create('div')
        :addClass('personaje-box')
        :addClass('tier-' .. (data.tier:lower() or ''))
        
    -- Cabecera
    local header = html:tag('div')
        :addClass('personaje-header')
        
    header:tag('div')
        :addClass('personaje-topbar')
        :wikitext(string.format([[
            <div class="personaje-nome-box">
                <img src="/images/6/63/Franky_ts_medal.png" class="topbar-icon" loading="lazy">
                <div class="personaje-nome-category">
                    <div class="nome">%s</div>
                    <div class="classes">%s</div>
                </div>
            </div>
            <div class="topbar-description">%s é um personagem do tier %s.</div>
        ]], data.nome, data.classe, data.nome, data.tier))
        
    -- Tabs
    header:tag('div')
        :addClass('personaje-tabs')
        :wikitext([[
            <button class="tab-btn" data-tab="arma">Arma</button>
            <button class="tab-btn active" data-tab="habilidades">Habilidades</button>
            <button class="tab-btn" data-tab="skins">Skins</button>
        ]])
    
    -- Precargar imagen principal
    if data.image ~= '' then
        html:tag('link')
            :attr('rel', 'preload')
            :attr('href', data.image)
            :attr('as', 'image')
            :done()
    end
        
    html:tag('img')
        :addClass('art-personaje')
        :attr('src', data.image)
        :attr('alt', data.nome)
        :attr('loading', 'eager')
    
    -- Precarga de recursos importantes
    if #data.habilidades > 0 then
        -- Precargar primeros 3 iconos de habilidades
        for i = 1, math.min(3, #data.habilidades) do
            if data.habilidades[i].icon ~= '' then
                html:tag('link')
                    :attr('rel', 'preload')
                    :attr('href', data.habilidades[i].icon)
                    :attr('as', 'image')
                    :done()
            end
        end
        
        -- Precargar primer video
        if data.habilidades[1].video ~= '' then
            html:tag('link')
                :attr('rel', 'preload')
                :attr('href', data.habilidades[1].video)
                :attr('as', 'video')
                :done()
        end
    end
    
    -- Contenedor de habilidades
    local habilidadesContainer = html:tag('div')
        :addClass('tab-content')
        :addClass('active')
        :attr('id', 'habilidades')
        
    local cuadrosContainer = habilidadesContainer:tag('div')
        :addClass('cuadros-container')
    
    for i, hab in ipairs(data.habilidades) do
        cuadrosContainer:tag('div')
            :addClass('cuadro')
            :attr('data-index', i)
            :attr('title', hab.nome)
            :wikitext(string.format(
                '<img src="%s" alt="%s" loading="lazy">',
                hab.icon, hab.nome
            ))
    end
    
    -- Contenedor de detalles de habilidades
    habilidadesContainer:tag('div')
        :addClass('habilidades-container')
        :wikitext([[
            <div class="habilidades-details">
                <div class="descripcion-container"></div>
            </div>
            <div class="video-container"></div>
        ]])
    
    -- Contenedor de skins
    local skinsContainer = html:tag('div')
        :addClass('tab-content')
        :attr('id', 'skins')
    
    if #data.skins > 0 then
        skinsContainer:wikitext([[
            <div class="card-skins">
                <span class="card-skins-title">SKINS & SPOTLIGHTS</span>
                <div class="skins-carousel-wrapper">
                    <button class="skins-arrow left">«</button>
                    <div class="skins-carousel">
        ]])
        
        for _, skin in ipairs(data.skins) do
            skinsContainer:wikitext(string.format([[
                <div class="skin-card" title="%s">
                    <img class="skins--imageBanner" src="/images/default-skin-banner.jpg" loading="lazy">
                    <img class="skins--imageSkin" src="%s" loading="lazy">
                </div>
            ]], skin.tooltip, skin.image))
        end
        
        skinsContainer:wikitext([[
                    </div>
                    <button class="skins-arrow right">»</button>
                </div>
            </div>
        ]])
    end
    
    -- Incluir datos para JS
    html:tag('script')
        :attr('type', 'application/json')
        :attr('id', 'personaje-data-json')
        :wikitext(mw.text.jsonEncode(data))
    
    return tostring(html)
end
return p