Module:ElementInfobox

Documentation for this module may be created at Module:ElementInfobox/doc

local p = {}

-- Color mapping with light variants for hover effects
local colors = {
    Fire = {main = '#cc3333', light = '#ff6666', text = 'white'},
    Water = {main = '#3366cc', light = '#6699ff', text = 'white'},
    Wind = {main = '#33cccc', light = '#66ffff', text = 'black'},
    Earth = {main = '#996633', light = '#cc9966', text = 'white'},
    Lightning = {main = '#ffcc00', light = '#ffff66', text = 'black'},
    Ice = {main = '#66ccff', light = '#99ffff', text = 'black'},
    Wood = {main = '#339933', light = '#66cc66', text = 'white'},
    Grass = {main = '#88cc44', light = '#aadd77', text = 'black'}
}

-- Icon mapping (you can add these images later)
local icons = {
    Fire = 'Fire_icon.png',
    Water = 'Water_icon.png',
    Wind = 'Wind_icon.png',
    Earth = 'Earth_icon.png',
    Lightning = 'Lightning_icon.png',
    Ice = 'Ice_icon.png',
    Wood = 'Wood_icon.png',
    Grass = 'Grass_icon.png'
}

function p.infobox(frame)
    local args = frame.args
    local name = args.name or 'Unknown'
    
    -- Get color scheme
    local color = colors[name] or {main = '#666666', light = '#999999', text = 'white'}
    local icon = icons[name] or 'Question_mark.png'
    
    -- Start building the infobox
    local output = {}
    
    -- CSS styling for modern look
    table.insert(output, '<div style="border: 2px solid ' .. color.main .. '; border-radius: 10px; width: 320px; float: right; margin-left: 20px; background: linear-gradient(to bottom, #ffffff 0%, #f9f9f9 100%); box-shadow: 0 4px 8px rgba(0,0,0,0.1); font-family: sans-serif; overflow: hidden;">')
    
    -- Header with gradient
    table.insert(output, '<div style="background: linear-gradient(to right, ' .. color.main .. ' 0%, ' .. color.light .. ' 100%); color: ' .. color.text .. '; padding: 15px; text-align: center; font-size: 1.4em; font-weight: bold; letter-spacing: 1px;">')
    table.insert(output, '[[File:' .. icon .. '|24px|link=|alt=' .. name .. ']] ')
    table.insert(output, name .. ' ELEMENT')
    table.insert(output, '</div>')
    
    -- Image section
    table.insert(output, '<div style="padding: 15px; text-align: center; background: white;">')
    if args.image then
        table.insert(output, '[[File:' .. args.image .. '|220px|class=element-image|alt=' .. name .. ' element]]')
    else
        table.insert(output, '<div style="height: 150px; display: flex; align-items: center; justify-content: center; background: #f0f0f0; border-radius: 5px; color: #666; font-style: italic;">')
        table.insert(output, 'No image available yet')
        table.insert(output, '</div>')
    end
    table.insert(output, '</div>')
    
    -- Info table
    table.insert(output, '<table style="width: 100%; border-collapse: collapse;">')
    
    -- Function to add table rows
    local function addRow(label, value, isImportant)
        local row = '<tr style="border-top: 1px solid #eee;'
        if isImportant then
            row = row .. ' background: #f8f8f8;'
        end
        row = row .. '">'
        row = row .. '<td style="padding: 10px 12px; font-weight: bold; color: #555; width: 35%; vertical-align: top;">' .. label .. '</td>'
        row = row .. '<td style="padding: 10px 12px; color: #333; vertical-align: top;">' .. (value or '<span style="color: #999; font-style: italic;">Unknown</span>') .. '</td>'
        row = row .. '</tr>'
        table.insert(output, row)
    end
    
    -- Add all fields
    addRow('Description', args.description, true)
    addRow('Offensive Spell', args.offensive)
    addRow('Defensive Spell', args.defensive)
    addRow('Curative Spell', args.curative)
    addRow('Enhancement Spell', args.enhancement)
    
    -- Special styling for behavior
    if args.behavior then
        table.insert(output, '<tr style="border-top: 1px solid #eee; background: #f0f7ff;">')
        table.insert(output, '<td style="padding: 12px; font-weight: bold; color: ' .. color.main .. ';" colspan="2">Behavioral Traits</td>')
        table.insert(output, '</tr>')
        table.insert(output, '<tr>')
        table.insert(output, '<td style="padding: 12px; color: #444; font-style: italic; line-height: 1.5;" colspan="2">' .. args.behavior .. '</td>')
        table.insert(output, '</tr>')
    end
    
    table.insert(output, '</table>')
    
    -- Footer with element type
    table.insert(output, '<div style="background: #f5f5f5; padding: 8px 12px; border-top: 1px solid #ddd; font-size: 0.9em; color: #666; text-align: center;">')
    table.insert(output, '<strong>Type:</strong> Main Element • <strong>Status:</strong> ' .. (args.status or 'Active'))
    table.insert(output, '</div>')
    
    table.insert(output, '</div>')
    
    return table.concat(output, '\n')
end

return p