Module:ChampionIconTable

Overview

This module creates a responsive grid display of champions icons with automatic categorization into their houses.
It pulls data from Liquipedia's database and applies theme-appropriate styling.
By default this module show all heroes available.

You can either use invoke or simple template. For invoke use:

• {{#invoke:Lua|invoke|module=ChampionIconTable|fn=display}} (All Heroes)
• {{#invoke:Lua|invoke|module=ChampionIconTable|house=Malus|fn=display}}
• {{#invoke:Lua|invoke|module=ChampionIconTable|house=Lubabub|fn=display}}
• {{#invoke:Lua|invoke|module=ChampionIconTable|house=Chronos|fn=display}}

Parameters

|house= (optional)

Malus: Shows only champions within Malus house (cinnabar-theme-dark-bg)

Lubabub: Shows only champions within Lubabub house (forest-theme-dark-bg)

Chronos: Shows only champions within Chronos house (gold-bg-alt)

Usage Examples

• All Champions

{{ChampionIconTable}}

All Champions (6)

Bolgar

Gane

Lily

Locke

Neva

Ragna

• Only Champions in Malus House

{{ChampionIconTable|house=Malus}}

 Malus (2)

Gane

Ragna

Copy/Paste

All Champions

{{ChampionIconTable}}

Categorized Champions

{{ChampionIconTable|house=Malus}}
{{ChampionIconTable|house=Chronos}}
{{ChampionIconTable|house=Lubabub}}

For more information on how to contribute, please refer to our Help:Edit an Article.

---

local Class = require('Module:Class')
local ChampionIcon = require('Module:CharacterIcon')
local Lua = require('Module:Lua')
local HtmlWidgets = Lua.import('Module:Widget/Html/All')
local Br = HtmlWidgets.Br
local Div = HtmlWidgets.Div
local Span = HtmlWidgets.Span
local ChampionIconTable = {}

-- Constants for house themes and icons
local DEFAULT = {theme = 'gray-theme-dark-bg', text = 'All Champions'}
local CHAMPION_HOUSE = {
	['malus'] = {
		theme = 'wildcard-malus-theme',
		text = 'Malus',
		icon = 'File:Wildcard_gameasset_Malus_Faction_Icon_White.png'
	},
	['chronos'] = {
		theme = 'wildcard-chronos-theme',
		text = 'Chronos',
		icon = 'File:Wildcard_gameasset_Chronos_Faction_Icon_White.png'
	},
	['lubabub'] = {
		theme = 'wildcard-lubabub-theme',
		text = 'Lubabub',
		icon = 'File:Wildcard_gameasset_Lubabub_Faction_Icon_White.png'
	}
}

function ChampionIconTable.display(args)
	args = args or {}
	local conditions = ChampionIconTable._buildConditions(args)
	local champions = mw.ext.LiquipediaDB.lpdb('datapoint', {
		conditions = conditions,
		order = 'name asc',
		limit = 5000
	})

	-- Normalize results if single item
	if type(champions) == 'table' and champions.name then
		champions = {champions}
	elseif type(champions) ~= 'table' then
		champions = {}
	end

	local count = #champions
	local data = ChampionIconTable._getCategoryData(args)
	return Div{
		classes = {'white-text'},
		css = {['text-align'] = 'center', ['font-weight'] = 'bold'},
		children = {
			ChampionIconTable._createHeader(data, count),
			ChampionIconTable._createBody(champions)
		}
	}
end

function ChampionIconTable._getCategoryData(args)
	local house = args.house and string.lower(args.house) or nil
	return CHAMPION_HOUSE[house] or DEFAULT
end

function ChampionIconTable._createHeader(data, count)
	local headerText = data.text
	local headerChildren = {}

	-- Add House Icon if available in data and it's not the default "All Champions"
	if data.icon and data.text ~= DEFAULT.text then
		table.insert(headerChildren,
			'[[' .. data.icon .. '|30x30px|link=]] '
		)
	end

	table.insert(headerChildren, string.format('%s (%d)', headerText, count))


	return Div{
		classes = {data.theme},
		css = {padding = '5px 10px', ['font-size'] = '18px', ['border-radius'] = '0.5rem'},
		children = headerChildren
	}
end

function ChampionIconTable._createBody(champions)
	return Div{
		css = {
			gap = '8px',
			padding = '8px 6px',
			display = 'flex',
			['justify-content'] = 'center',
			['align-items'] = 'center',
			['flex-wrap'] = 'wrap'
		},
		children = ChampionIconTable._generateChampionIcons(champions)
	}
end

function ChampionIconTable._generateChampionIcons(champions)
	local icons = {}
	for _, entry in ipairs(champions) do
		if entry.name then
			-- Determine house-based theme
			local championTheme = DEFAULT.theme
			if entry.extradata and entry.extradata.house then
				local house = string.lower(entry.extradata.house)
				if CHAMPION_HOUSE[house] then
					championTheme = CHAMPION_HOUSE[house].theme
				end
			end

			table.insert(icons, Div{
				classes = {'zoom-container'},
				css = {width = '85px', display = 'inline-block'},
				children = {
					Div{
						classes = {championTheme},
						css = {
							['border-radius'] = '0.5rem 0.5rem 0 0',
							overflow = 'hidden',
							['margin-bottom'] = '2px',
							['text-align'] = 'center'
						},
						children = {ChampionIconTable._getChampionIcon(entry)}
					},
					Div{
						classes = {championTheme},
						css = {
							['border-radius'] = '0 0 0.5rem 0.5rem',
							overflow = 'hidden',
							padding = '2px',
							['margin-bottom'] = '10px',
							['text-align'] = 'center'
						},
						children = {
							Span{
								css = {
									['font-size'] = '13.5px',
									['font-weight'] = 'bold',
									['word-break'] = 'break-word'
								},
								children = {entry.name}
							}
						}
					}
				}
			})
		end
	end
	return icons
end

function ChampionIconTable._getChampionIcon(entry)
	return ChampionIcon.Icon{
		character = entry.name,
		size = 'x85px'
	}
end

function ChampionIconTable._buildConditions(args)
	local conditions = {
		'[[type::character]]',
		'[[name::!]]'
	}
	if args.house then
		table.insert(conditions, '[[extradata_house::' .. args.house .. ']]')
	end
	return table.concat(conditions, ' AND ')
end

return Class.export(ChampionIconTable)