Module:GuyPerfect

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

local GAMES = {
    S  = "Splatoon",
    S2 = "Splatoon 2"
}

function ParamRow(color, label, content)

    -- Outer label container, styles the left vertical edge
    local ret = "<div style=\"border: 1px solid rgb(" .. color .. "); " ..
        "border-width: 0 0 0 4px; border-radius: 4px;\">"

    -- Inner label container, styles the horizontal edges and background
    ret = ret .. "<div style=\"border: 1px solid red; " ..
        "border-width: 1px 0 1px 0; font-weight: bold; " ..
        "padding: 4px 8px 4px 4px; " ..
        "background: linear-gradient(90deg, rgba(" .. color .. ", 0.5), " ..
        "rgba(" .. color .. ", 0.5) 25%, rgba(" .. color .. ", 0)); " ..
        "border-image: linear-gradient(90deg, rgb(" .. color .. "), " ..
        "rgba(" .. color .. ", 0)) 1;\">"

    -- Parameter contents
    return ret .. label .. "</div></div><div>" .. content .. "</div>"
end

return {
    gear = function(frame)
        local color = frame:expandTemplate
            { title = "SiteColor", args = { GAMES[frame.args.game] } }

        -- Outer container
        local ret = "<div style=\"border: 1px solid rgb(" .. color ..
            "); border-width: 8px 1px; border-radius: 8px; " ..
            "background: #ffffff; display: inline-block; width: 300px;\">"

        -- Inner client area
        ret = ret .. "<div style=\"background: rgba(" .. color .. ", 0.25); " ..
            "box-shadow: 0 0 16px #ffffff inset; padding: 8px;\">"

        -- Name
        ret = ret .. "<div style=\"border: 1px solid rgb(" .. color .. "); " ..
            "border-width: 1px 4px; border-radius: 4px; " ..
            "background: rgba(" .. color .. ", 0.25); text-align: center; " ..
            "font-size: 20px; font-weight: bold; padding: 8px;\">" ..
            frame.args.name .. "</div>"

        -- Image
        ret = ret .. "<div style=\"display: flex; align-items: center; " ..
            "justify-content: center;\">[[File:" .. frame.args.game .. 
            "_Gear_" .. frame.args.category .. "_" .. frame.args.name .. 
            ".png|128x128px]]</div>"

        -- Parameters
        ret = ret .. "<div style=\"display: grid; " ..
            "grid-template-columns: max-content auto; grid-gap: 4px; " ..
            "align-items: center;\">"

        if frame.args.category then
            ret = ret .. ParamRow(color, "Category",
                "<span style=\"opacity: 0.5;\">" .. "[[File:S2_Icon_" ..
                frame.args.category .. ".png|x24px]]</span> " ..
                frame.args.category
            )
        end

        ret = ret .. "</div></div></div>"
        return ret
    end
}