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
    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