Module:AbilitySectionGive feedback

Overview

Lua backend for Template:AbilitySection. Renders a two-column layout with the ability card on the left and an optional tabbed details panel on the right.

Between the card and the details panel, an interaction-hint rail of small item icons is rendered via Module:AbilityHints (showing how the ability interacts with items — dispellable, reduced, blocked, etc.). When a rail is present, the card and rail are grouped in a .ability-section-main wrapper so the rail always wraps together with the card rather than onto the details' line; abilities with no interactions keep the flat single-card structure.

Only tabs with non-empty content are shown. If two or more tabs have content, a Show All tab is automatically appended that stacks all content in sequence with section headers between them.

The Notes tab is height-constrained with a scrollbar when content overflows (see Template:AbilitySection/styles.css). Other tabs are unconstrained.

If no content params are provided, no details panel is rendered at all — only the ability card (and its hint rail, if any).

Entry point

`p.render(frame)`

Called via {{#invoke:AbilitySection|render}}.

Argument	Required	Description
`hero_name`	Yes	Passed through to Template:Ability card v2.
`ability_num`	Yes	Passed through to Template:Ability card v2.
`notes`	No	Wikitext for the Notes tab.
`tips`	No	Wikitext for the Tips tab.

Constants

`TABS`

Defines list of possible tabs. Order here determines display order in the tabber.

local TABS = {
    { key = 'notes',        label = 'Notes'        },
    { key = 'tips',         label = 'Tips'         },
}

Example

{{AbilitySection
| hero_name   = Abrams
| ability_num = 1
| notes =
* This is an example of a note.
| tips =
* This is an example of a tip.
}}

Siphon Life

Drain health from nearby enemies, dealing

spirit damage over time and

healing for a portion of the damage dealt.

x0.6

22

Damage Per Second

4s

Duration

On Hit:

70%

Lifesteal

35% Lifesteal vs Non-Heroes

1

-20s Cooldown

2

2s Duration

5

+2m Radius and +18 DPS with improved Spirit scaling

This is an example of a note.

This is an example of a tip.

Notes

This is an example of a note.

Tips

This is an example of a tip.

Related pages

Template:AbilitySection — template that invokes this module
Module:AbilityHints — interaction-hint icons rendered beside the card
Template:AbilitySection/styles.css — CSS for the layout

-- see /doc for docs

local p = {}
local utils           = require "Module:Abilities/utils"
local lang            = require "Module:Lang"
local icon_module     = require "Module:Icon"
local AbilityHints    = require "Module:AbilityHints"
local resource_lookup = mw.loadJsonData("Data:ResourceLookup.json")

-- Tab definitions — order here determines display order.
local TABS = {
	{ key = 'notes', label = 'Notes' },
	{ key = 'tips',  label = 'Tips'  },
}

local function get_hero_key(hero_name)
	if hero_name == nil or hero_name == '' then return nil end
	if string.sub(hero_name, 1, 5) == "hero_" then return hero_name end
	local entry = resource_lookup[hero_name:lower()]
	if entry == nil then return nil end
	return entry.key
end

local function trim(s)
	return s:match('^%s*(.-)%s*$')
end

local function build_tabber(wikitext_map)
	local filled = {}
	for _, tab in ipairs(TABS) do
		if wikitext_map[tab.key] ~= '' then
			table.insert(filled, { key = tab.key, label = tab.label, wikitext = wikitext_map[tab.key] })
		end
	end

	if #filled == 0 then
		return ''
	end

	local tabs = {}
	for _, section in ipairs(filled) do
		table.insert(tabs, {
			label   = section.label,
			content = '<div class="ability-details-panel">\n' .. section.wikitext .. '\n</div>',
		})
	end

	-- "Show All" tab wraps each section's wikitext in a <div> to give the parser
	-- a fresh block context per section, preventing html mangling.
	if #filled >= 2 then
		local all_parts = {}
		for _, section in ipairs(filled) do
			table.insert(all_parts,
				'<div class="ability-details-section-header">' .. section.label .. '</div>'
				.. '<div class="ability-details-section-content">\n' .. section.wikitext .. '\n</div>'
			)
		end
		table.insert(tabs, {
			label   = 'Show All',
			content = '<div class="ability-details-panel">' .. table.concat(all_parts) .. '</div>',
		})
	end

	local rendered = mw.ext.tabber.render(tabs)
	if #filled == 1 then
		return '<div class="single-tabbed">' .. rendered .. '</div>'
	end
	return rendered
end

-- Entry point. Called via {{#invoke:AbilitySection|render}}.
function p.render(frame)
	local args        = frame.args
	local hero_name   = trim(args.hero_name or '')
	local ability_num = trim(args.ability_num or '')
	local notes       = trim(args.notes or '')
	local tips        = trim(args.tips or '')
	local hints       = trim(args.hints or '')

	local hero_key    = get_hero_key(hero_name)
	local heading     = ''
	local ability_key = nil
	if hero_key ~= nil then
		local ability = utils.get_ability_card_data(hero_key, ability_num)
		if ability ~= nil then
			ability_key = ability.Key
			local ability_name = lang.get_string(ability.Key)
			-- Use the English ability key for icon render; icon module indexes by English name
			local ability_name_en = lang.get_string(ability.Key, 'en', ability.Key)
			local icon_html = icon_module._render(ability_name_en, { size = '30px', ['icon-only'] = 'true', ['no-link'] = 'true' })
			heading = '<h3 class="ability-name">' .. icon_html .. ' ' .. ability_name .. '</h3>'
		end
	end

	local card = frame:expandTemplate{
		title = 'Ability card v2',
		args  = { hero_name = hero_name, ability_num = ability_num, link_name = 'false' }
	}

	-- Ability interaction hints. Gated for staged rollout:
	-- delete the `hints ~= ''` guard to enable on all hero pages.
	local hints_col = ''
	if hints ~= '' and ability_key ~= nil then
		hints_col = AbilityHints.get_icons(ability_key, ability_num)
	end

	local wikitext_map = {
		notes = notes,
		tips  = tips,
	}

	local tabber = build_tabber(wikitext_map)
	local details_col = ''
	if tabber ~= '' then
		details_col = '<div class="ability-section-details">' .. tabber .. '</div>'
	end

	-- When hints are present, group the card and the hint rail together so the
	-- rail wraps together with the card (and never onto the notes' line).
	-- Without hints the structure stays flat, so real pages are unchanged.
	local card_block = '<div class="ability-section-card">' .. card .. '</div>'
	local left_col
	if hints_col ~= '' then
		left_col = '<div class="ability-section-main">' .. card_block .. hints_col .. '</div>'
	else
		left_col = card_block
	end

	local ability_section = '<div class="ability-section">'
		.. left_col
		.. details_col
		.. '</div>'

	return '<div class="ability-section-wrapper">'
		.. heading
		.. ability_section
		.. '</div>'
end

return p