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)

• Only Champions in Malus House

{{ChampionIconTable|house=Malus}}

 Malus (2)

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 Div = HtmlWidgets.Div

local ChampionIconTable = {}

-- Constants for house themes and icons
local DEFAULT_CATEGORY = {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'
	}
}

---Main function to display a table of champion icons based on provided arguments
---@param args table|nil
---@return Html
function ChampionIconTable.display(args)
	args = args or {}
	-- Build conditions for the database query based on the provided arguments
	local conditions = ChampionIconTable._buildConditions(args)
	-- Fetch champions from the database using the built conditions
	local champions = mw.ext.LiquipediaDB.lpdb('datapoint', {
		conditions = conditions,
		order = 'name asc',
		limit = 5000
	})

	-- Normalize results to ensure it's always a table of champions, even for single or invalid results
	if type(champions) == 'table' and champions.name then
		champions = {champions}
	elseif type(champions) ~= 'table' then
		champions = {}
	end

	local count = #champions
	-- Get category data (house or default) based on the arguments
	local categoryData = ChampionIconTable._getCategoryData(args)
	-- Create and return the HTML structure with a header and body containing champion icons
	return Div{
		classes = {'white-text'},
		css = {['text-align'] = 'center', ['font-weight'] = 'bold'},
		children = {
			ChampionIconTable._createHeader(categoryData, count),
			ChampionIconTable._createBody(champions)
		}
	}
end

---Retrieve category data for the specified house, or use default if no house is provided
---@param args table
---@return table
function ChampionIconTable._getCategoryData(args)
	local house = args.house and string.lower(args.house) or nil
	return CHAMPION_HOUSE[house] or DEFAULT_CATEGORY
end

---Create the header section of the table, including house icon and text with champion count
---@param categoryData table
---@param count integer
---@return Html
function ChampionIconTable._createHeader(categoryData, count)
	local headerText = categoryData.text
	local headerChildren = {}

	-- Add the house icon to the header if available
	if categoryData.icon then
		table.insert(headerChildren,
			'[[' .. categoryData.icon .. '|30x30px|link=]] '
		)
	end

	-- Append the formatted text with the total count of champions
	table.insert(headerChildren, string.format('%s (%d)', headerText, count))

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

---Create the body section of the table containing the champion icons
---@param champions table[]
---@return Html
function ChampionIconTable._createBody(champions)
	return Div{
		css = {
			gap = '8px',
			padding = '8px',
			display = 'flex',
			['justify-content'] = 'center',
			['align-items'] = 'center',
			['flex-wrap'] = 'wrap'
		},
		children = ChampionIconTable._generateChampionIcons(champions)
	}
end

---Generate a table of individual champion icon elements for display
---@param champions table[]
---@return table
function ChampionIconTable._generateChampionIcons(champions)
	local icons = {}
	for _, entry in ipairs(champions) do
		if entry.name then
			-- Create a container Div for each champion icon with styling and zoom capability
			table.insert(icons, Div{
				classes = {'zoom-container'},
				css = {
					display = 'inline-block',
					padding = '4px',
					overflow = 'hidden',
					['vertical-align'] = 'middle',
				},
				children = {
					ChampionIcon.Icon{
						character = entry.name,
						size = 'x130px'
					}
				}
			})
		end
	end
	return icons
end

---Build the conditions string for the database query based on arguments
---@param args table
---@return string
function ChampionIconTable._buildConditions(args)
	-- Initialize base conditions to filter for champions with names
	local conditions = {
		'[[type::character]]',
		'[[name::!]]'
	}
	-- Add house-specific condition if a house is provided in the arguments
	if args.house then
		table.insert(conditions, '[[extradata_house::' .. args.house .. ']]')
	end
	-- Concatenate conditions with ' AND ' to form the final query string
	return table.concat(conditions, ' AND ')
end

return Class.export(ChampionIconTable)