The Deadlock Wiki - User contributions [en]

Template:AbilitySection/styles.css

2026-07-12T14:44:44Z

~2026-PurpleDynamoLeap628: Add .ability-section-main flex rule so card + hint rail group together (gap matches existing spacing) (with help from vergir-bot LLM)

/* Make ability name match in-game look and align with the card */
.ability-section-wrapper .ability-name {
margin-left: 20px;
font-size: 1.5rem;
font-weight: normal;
font-family: "Valve Occult","Retail Demo","Open Sans";
}

/* a dirty-ish hack to recreate yellow text color on Icon next to ability name */
.ability-section-wrapper .ability-name img {
filter: brightness(0) saturate(100%) invert(87%) sepia(17%) saturate(354%) hue-rotate(335deg) brightness(107%) contrast(104%);
}

/* Outer two-column flex wrapper */
.ability-section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
margin-top: 4px;
margin-bottom: 8px;
}

/* Left column: the ability card */
.ability-section-card {
flex: 0 1 auto;
}

/* Card + hint rail grouped so the rail wraps together with the card and never
lands on the notes' line. Only rendered when hints are present.
gap matches the old section gap so card/rail spacing is unchanged. */
.ability-section-main {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
flex: 0 1 auto;
align-items: flex-start;
}

/* Right column: tabbed details panel */
.ability-section-details {
flex: 1 1 280px;
min-width: 280px;
}

.ability-section-details .tabber {
margin: 0;
}

.ability-section-details .tabber .tabber__tabs {
background: unset;
}

.ability-section-details .tabber .tabber__tab {
flex: 0;
padding: 8px 32px;
}

/* make underline for active section thinner
todo: can't use var for color because TemplateStyles. */
.ability-section-details .tabber__tab[aria-selected="true"] {
box-shadow: inset #92e3b2 0 -1px 0 0;
}

/* If there's only one section make it look less like a tab since there are no other section tabs to move to */
.ability-section-details .single-tabbed .tabber__tab {
box-shadow: unset;
pointer-events: none;
}

/* Constrain the first tab panel with a scrollbar if content overflows.
Value is chosen to approximate the average ability card height — adjust if card
sizes change significantly. */
.ability-section-details .tabber__panel:first-child {
max-height: 400px;
overflow-y: auto;
}

/* Section header inside Show All tab */
.ability-details-section-header {
font-weight: bold;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #aaa;
padding: 8px 4px 2px;
border-bottom: 1px solid #444;
margin-bottom: 4px;
}

.ability-details-section-header:first-child {
padding-top: 0;
}

/* Content block inside each Show All section — matches individual tab panel padding */
.ability-details-section-content {
display: block;
padding: 0 4px;
}

/* ABILITY CARD V2 Overrides
Write styles here only if they are custom to AbililtySection.
If you want to change AbililtyCard styles everywhere go to
https://deadlock.wiki/Template:Ability_card_v2/Card/styles.css
*/

/* Hide Ability Title, it's written above as heading */
.ability-section .ac-title {
display: none;
}

/* move charge indicators to be on the same height as other indicators */
.ability-section .ac-header-right {
flex-direction: row
}
.ability-section .ac-charge-row {
margin-bottom: unset;
}

/* add some margin since title that was providing it is gone */
.ability-section .ac-header {
margin-top: 20px;
}

/* ABILITY HINTS */
.ability-section-hints {
display: flex;
flex-direction: column;
gap: 6px;
flex: 0 0 auto;
justify-content: flex-start;
padding: 3px 0;
margin-left: -8px;
margin-right: 8px;
}
.ability-hint {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ability-hint img {
border-radius: 2px;
}
.ability-hint .ability-hint-tip {
position: absolute;
left: 50%;
bottom: 130%;
transform: translateX(-50%);
background: #1c1a1d;
color: #FFEFD7;
border: 1px solid #45414a;
border-radius: 5px;
padding: 5px 9px;
font-size: 12px;
line-height: 1.3;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .12s;
z-index: 20;
box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.ability-hint:hover .ability-hint-tip {
opacity: 1;
}

/* On narrow screens the rail wraps under the card; lay the icons out in a row
there instead of a column. */
@media (max-width: 560px) {
.ability-section-hints {
flex-direction: row;
flex-wrap: wrap;
margin: -6px 0 0 0;
padding: 0;
}
}

/* MISC */

/* The only ability in the game with not top indicators (range/duration/cd) at all. Custom hack to cut empty space. */
#hero_atlas\:citadel_ability_passive_beefy .ac-header-wrapper,
#hero_viper\:ability_viper_snakedash .ac-header-wrapper {
height: 10px;
}

Module:AbilitySection

2026-07-12T14:43:09Z

~2026-PurpleDynamoLeap628: Group card and hint rail in .ability-section-main (only when hints present) so the rail wraps with the card and never lands beside the notes (with help from vergir-bot LLM)

-- 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

Template:AbilitySection/styles.css

2026-07-12T14:20:43Z

~2026-PurpleDynamoLeap628: Mobile: hints rail becomes a horizontal row on narrow screens (viewport media query; TemplateStyles lacks container queries) (with help from vergir-bot LLM)

/* Make ability name match in-game look and align with the card */
.ability-section-wrapper .ability-name {
margin-left: 20px;
font-size: 1.5rem;
font-weight: normal;
font-family: "Valve Occult","Retail Demo","Open Sans";
}

/* a dirty-ish hack to recreate yellow text color on Icon next to ability name */
.ability-section-wrapper .ability-name img {
filter: brightness(0) saturate(100%) invert(87%) sepia(17%) saturate(354%) hue-rotate(335deg) brightness(107%) contrast(104%);
}

/* Outer two-column flex wrapper */
.ability-section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
margin-top: 4px;
margin-bottom: 8px;
}

/* Left column: the ability card */
.ability-section-card {
flex: 0 1 auto;
}

/* Right column: tabbed details panel */
.ability-section-details {
flex: 1 1 280px;
min-width: 280px;
}

.ability-section-details .tabber {
margin: 0;
}

.ability-section-details .tabber .tabber__tabs {
background: unset;
}

.ability-section-details .tabber .tabber__tab {
flex: 0;
padding: 8px 32px;
}

/* make underline for active section thinner
todo: can't use var for color because TemplateStyles. */
.ability-section-details .tabber__tab[aria-selected="true"] {
box-shadow: inset #92e3b2 0 -1px 0 0;
}

/* If there's only one section make it look less like a tab since there are no other section tabs to move to */
.ability-section-details .single-tabbed .tabber__tab {
box-shadow: unset;
pointer-events: none;
}

/* Constrain the first tab panel with a scrollbar if content overflows.
Value is chosen to approximate the average ability card height — adjust if card
sizes change significantly. */
.ability-section-details .tabber__panel:first-child {
max-height: 400px;
overflow-y: auto;
}

/* Section header inside Show All tab */
.ability-details-section-header {
font-weight: bold;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #aaa;
padding: 8px 4px 2px;
border-bottom: 1px solid #444;
margin-bottom: 4px;
}

.ability-details-section-header:first-child {
padding-top: 0;
}

/* Content block inside each Show All section — matches individual tab panel padding */
.ability-details-section-content {
display: block;
padding: 0 4px;
}

/* ABILITY CARD V2 Overrides
Write styles here only if they are custom to AbililtySection.
If you want to change AbililtyCard styles everywhere go to
https://deadlock.wiki/Template:Ability_card_v2/Card/styles.css
*/

/* Hide Ability Title, it's written above as heading */
.ability-section .ac-title {
display: none;
}

/* move charge indicators to be on the same height as other indicators */
.ability-section .ac-header-right {
flex-direction: row
}
.ability-section .ac-charge-row {
margin-bottom: unset;
}

/* add some margin since title that was providing it is gone */
.ability-section .ac-header {
margin-top: 20px;
}

/* ABILITY HINTS */
.ability-section-hints {
display: flex;
flex-direction: column;
gap: 6px;
flex: 0 0 auto;
justify-content: flex-start;
padding: 3px 0;
margin-left: -6px;
margin-right: 6px;
}
.ability-hint {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ability-hint img {
border-radius: 2px;
}
.ability-hint .ability-hint-tip {
position: absolute;
left: 50%;
bottom: 130%;
transform: translateX(-50%);
background: #1c1a1d;
color: #FFEFD7;
border: 1px solid #45414a;
border-radius: 5px;
padding: 5px 9px;
font-size: 12px;
line-height: 1.3;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .12s;
z-index: 20;
box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.ability-hint:hover .ability-hint-tip {
opacity: 1;
}

/* On narrow screens the rail wraps under the card; lay the icons out in a row
there instead of a column. (TemplateStyles has no container queries, so this
keys off viewport width — tune the breakpoint if needed.) */
@media (max-width: 560px) {
.ability-section-hints {
flex-direction: row;
flex-wrap: wrap;
margin-left: 0;
margin-right: 0;
padding: 4px 0 0;
}
}

/* MISC */

/* The only ability in the game with not top indicators (range/duration/cd) at all. Custom hack to cut empty space. */
#hero_atlas\:citadel_ability_passive_beefy .ac-header-wrapper,
#hero_viper\:ability_viper_snakedash .ac-header-wrapper {
height: 10px;
}

Module:AbilityHints

2026-07-12T14:10:09Z

~2026-PurpleDynamoLeap628: Revert groups/combinations: reactivebarrier and indomitable are plain separate icons again (with help from vergir-bot LLM)

Module:AbilityHints

2026-07-12T13:34:12Z

~2026-PurpleDynamoLeap628: Replace the reactive/indomitable split icon with a grouped single icon whose image and tooltip depend on which of the two lists match (with help from vergir-bot LLM)

-- Ability interaction hints: small item icons on ability cards showing how an
-- ability interacts with items (dispellable, reduced, blocked, etc.).
-- Membership is decided by Module:AbilityTable.is_member so these icons always
-- agree with the dynamic ability-interaction tables.

local AbilityTable = require("Module:AbilityTable")
local icon_module = require("Module:Icon")
local ability_data = mw.loadJsonData("Data:AbilityData.json")

local p = {}

-- Display order. Each entry is either:
-- { list = "...", item = "...", tip = "..." } a single icon shown when the ability is in `list`
-- { group = "..." } a grouped relationship (see GROUPS)
local CONFIG = {
{ list = "melee", item = "Melee Lifesteal", tip = "Benefits from melee items" },
{ list = "movementbased", item = "Slowing Hex", tip = "Disabled by Slowing Hex" },
{ list = "debuffresist", item = "Debuff Reducer", tip = "Duration reduced by Debuff Resist" },
{ list = "heal", item = "Healing Booster", tip = "Healing amplified by Healing Booster and affected by healing reduction" },
{ group = "reactive_indomitable" },
{ list = "dispelmagic", item = "Dispel Magic", tip = "Effect can be dispelled" },
{ list = "unstoppable", item = "Unstoppable", tip = "Disable prevented by Unstoppable" },
{ list = "platedarmor", item = "Plated Armor", tip = "On-shot effect prevented by Plated Armor" },
}

-- Grouped relationships: two related lists collapse into ONE full-size icon
-- whose item and tooltip depend on which of the two the ability matches.
local GROUPS = {
reactive_indomitable = {
a = "reactivebarrier",
b = "indomitable",
a_only = { item = "Reactive Barrier", tip = "Triggers Reactive Barrier<br>does <b>not</b> trigger Indomitable" },
b_only = { item = "Indomitable", tip = "Blocked by Indomitable<br>does <b>not</b> trigger Reactive Barrier" },
both = { item = "Reactive Barrier", tip = "Triggers Reactive Barrier<br>Blocked by Indomitable" },
},
}

-- Renders one item icon as a title-less external link (so Page Previews / Popups
-- ignores it) wrapping just the image.
local function icon_img(item)
local url = tostring(mw.uri.canonicalUrl(item))
return icon_module._render(item, { size = '24px', ['icon-only'] = 'true', link = url })
end

-- One full-size hint icon with a tooltip.
local function hint_icon(item, tip)
return '<span class="ability-hint">' .. icon_img(item)
.. '<span class="ability-hint-tip">' .. tip .. '</span></span>'
end

-- Renders the interaction icon rail for one ability.
-- ability_key the ability's internal key (AbilityCards .Key)
-- ability_num the ability's slot (1-4); coerced to number
-- Returns rail HTML, or '' when the ability has no interactions.
function p.get_icons(ability_key, ability_num)
local record = ability_data[ability_key]
if record == nil then return '' end
local num = tonumber(ability_num)

-- Membership for every list referenced by CONFIG or GROUPS.
local member = {}
local function check(list)
if list ~= nil and member[list] == nil then
member[list] = AbilityTable.is_member(list, record, num)
end
end
for _, def in ipairs(CONFIG) do
if def.list then
check(def.list)
elseif def.group then
local g = GROUPS[def.group]
check(g.a)
check(g.b)
end
end

local icons = {}
for _, def in ipairs(CONFIG) do
if def.group then
local g = GROUPS[def.group]
local ma, mb = member[g.a], member[g.b]
local case
if ma and mb then
case = g.both
elseif ma then
case = g.a_only
elseif mb then
case = g.b_only
end
if case then
table.insert(icons, hint_icon(case.item, case.tip))
end
elseif def.list and member[def.list] then
table.insert(icons, hint_icon(def.item, def.tip))
end
end

if #icons == 0 then return '' end
return '<div class="ability-section-hints">' .. table.concat(icons) .. '</div>'
end

return p

Template:AbilitySection/styles.css

2026-07-12T13:15:16Z

~2026-PurpleDynamoLeap628: Add CSS for diagonally-split combined hint icons (clip-path triangles) (with help from vergir-bot LLM)

/* Make ability name match in-game look and align with the card */
.ability-section-wrapper .ability-name {
margin-left: 20px;
font-size: 1.5rem;
font-weight: normal;
font-family: "Valve Occult","Retail Demo","Open Sans";
}

/* a dirty-ish hack to recreate yellow text color on Icon next to ability name */
.ability-section-wrapper .ability-name img {
filter: brightness(0) saturate(100%) invert(87%) sepia(17%) saturate(354%) hue-rotate(335deg) brightness(107%) contrast(104%);
}

/* Outer two-column flex wrapper */
.ability-section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
margin-top: 4px;
margin-bottom: 8px;
}

/* Left column: the ability card */
.ability-section-card {
flex: 0 1 auto;
}

/* Right column: tabbed details panel */
.ability-section-details {
flex: 1 1 280px;
min-width: 280px;
}

.ability-section-details .tabber {
margin: 0;
}

.ability-section-details .tabber .tabber__tabs {
background: unset;
}

.ability-section-details .tabber .tabber__tab {
flex: 0;
padding: 8px 32px;
}

/* make underline for active section thinner
todo: can't use var for color because TemplateStyles. */
.ability-section-details .tabber__tab[aria-selected="true"] {
box-shadow: inset #92e3b2 0 -1px 0 0;
}

/* If there's only one section make it look less like a tab since there are no other section tabs to move to */
.ability-section-details .single-tabbed .tabber__tab {
box-shadow: unset;
pointer-events: none;
}

/* Constrain the first tab panel with a scrollbar if content overflows.
Value is chosen to approximate the average ability card height — adjust if card
sizes change significantly. */
.ability-section-details .tabber__panel:first-child {
max-height: 400px;
overflow-y: auto;
}

/* Section header inside Show All tab */
.ability-details-section-header {
font-weight: bold;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #aaa;
padding: 8px 4px 2px;
border-bottom: 1px solid #444;
margin-bottom: 4px;
}

.ability-details-section-header:first-child {
padding-top: 0;
}

/* Content block inside each Show All section — matches individual tab panel padding */
.ability-details-section-content {
display: block;
padding: 0 4px;
}

/* ABILITY CARD V2 Overrides
Write styles here only if they are custom to AbililtySection.
If you want to change AbililtyCard styles everywhere go to
https://deadlock.wiki/Template:Ability_card_v2/Card/styles.css
*/

/* Hide Ability Title, it's written above as heading */
.ability-section .ac-title {
display: none;
}

/* move charge indicators to be on the same height as other indicators */
.ability-section .ac-header-right {
flex-direction: row
}
.ability-section .ac-charge-row {
margin-bottom: unset;
}

/* add some margin since title that was providing it is gone */
.ability-section .ac-header {
margin-top: 20px;
}

/* ABILITY HINTS */
.ability-section-hints {
display: flex;
flex-direction: column;
gap: 6px;
flex: 0 0 auto;
justify-content: flex-start;
padding: 3px 0;
margin-left: -6px;
margin-right: 6px;
}
.ability-hint {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: help;
}
.ability-hint img {
border-radius: 2px;
}
.ability-hint .ability-hint-tip {
position: absolute;
left: 50%;
bottom: 130%;
transform: translateX(-50%);
background: #1c1a1d;
color: #FFEFD7;
border: 1px solid #45414a;
border-radius: 5px;
padding: 5px 9px;
font-size: 12px;
line-height: 1.3;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .12s;
z-index: 20;
box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.ability-hint:hover .ability-hint-tip {
opacity: 1;
}

/* Combined diagonally-split hint icon (two items sharing one 24px box) */
.ability-hint--split {
width: 24px;
height: 24px;
}
.ability-hint--split .ability-hint-half {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
line-height: 0;
}
/* neutralise Module:Icon's inline bottom:2px nudge so the clip aligns to the box */
.ability-hint--split .ability-hint-half > span {
position: static !important;
bottom: auto !important;
}
.ability-hint-half--tl {
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.ability-hint-half--br {
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* MISC */

/* The only ability in the game with not top indicators (range/duration/cd) at all. Custom hack to cut empty space. */
#hero_atlas\:citadel_ability_passive_beefy .ac-header-wrapper,
#hero_viper\:ability_viper_snakedash .ac-header-wrapper {
height: 10px;
}

Module:AbilityHints

2026-07-12T13:14:06Z

~2026-PurpleDynamoLeap628: Replace reactivebarrier/indomitable suppression with a diagonally-split combined icon (clip-path); tooltip shows both notes (with help from vergir-bot LLM)

-- Ability interaction hints: small item icons on ability cards showing how an
-- ability interacts with items (dispellable, reduced, blocked, etc.).
-- Membership is decided by Module:AbilityTable.is_member so these icons always
-- agree with the dynamic ability-interaction tables.

local AbilityTable = require("Module:AbilityTable")
local icon_module = require("Module:Icon")
local ability_data = mw.loadJsonData("Data:AbilityData.json")

local p = {}

-- Display order. Each entry:
-- list AbilityTable list name (Module:AbilityTable/Lists)
-- item item whose icon represents the interaction
-- tip short hover text
-- suppressed_by optional: hide this icon when the named list is also a member
local CONFIG = {
{ list = "melee", item = "Melee Lifesteal", tip = "Benefits from melee items" },
{ list = "reactivebarrier", item = "Reactive Barrier", tip = "Triggers Reactive Barrier" },
{ list = "debuffresist", item = "Debuff Reducer", tip = "Duration reduced by Debuff Resist" },
{ list = "movementbased", item = "Slowing Hex", tip = "Disabled by Slowing Hex" },
{ list = "heal", item = "Healing Booster", tip = "Healing amplified by Healing Booster and affected by healing reduction" },
{ list = "dispelmagic", item = "Dispel Magic", tip = "Effect can be dispelled" },
{ list = "indomitable", item = "Indomitable", tip = "Effect blocked by Indomitable" },
{ list = "unstoppable", item = "Unstoppable", tip = "Disable prevented by Unstoppable" },
{ list = "platedarmor", item = "Plated Armor", tip = "Bullet effect prevented by Plated Armor" },
}

-- Pairs that merge into ONE diagonally-split icon when BOTH match the ability:
-- the first list fills the upper-left triangle, the second the lower-right.
-- (Replaces suppressed_by for these pairs.)
local COMBINE = {
{ "reactivebarrier", "indomitable" },
}

local DEF_BY_LIST = {}
for _, def in ipairs(CONFIG) do
DEF_BY_LIST[def.list] = def
end

-- Renders one item icon as a title-less external link (so Page Previews / Popups
-- ignores it) wrapping just the image.
local function icon_img(item)
local url = tostring(mw.uri.canonicalUrl(item))
return icon_module._render(item, { size = '24px', ['icon-only'] = 'true', link = url })
end

-- A normal single hint icon.
local function single_icon(def)
return '<span class="ability-hint">' .. icon_img(def.item)
.. '<span class="ability-hint-tip">' .. def.tip .. '</span></span>'
end

-- A combined icon split along the diagonal: tl = upper-left, br = lower-right.
-- Each half links to its own item; the tooltip lists both notes.
local function split_icon(tl, br)
return '<span class="ability-hint ability-hint--split">'
.. '<span class="ability-hint-half ability-hint-half--tl">' .. icon_img(tl.item) .. '</span>'
.. '<span class="ability-hint-half ability-hint-half--br">' .. icon_img(br.item) .. '</span>'
.. '<span class="ability-hint-tip">' .. tl.tip .. '<br>' .. br.tip .. '</span>'
.. '</span>'
end

-- Renders the interaction icon rail for one ability.
-- ability_key the ability's internal key (AbilityCards .Key)
-- ability_num the ability's slot (1-4); coerced to number
-- Returns rail HTML, or '' when the ability has no interactions.
function p.get_icons(ability_key, ability_num)
local record = ability_data[ability_key]
if record == nil then return '' end
local num = tonumber(ability_num)

local member = {}
for _, def in ipairs(CONFIG) do
member[def.list] = AbilityTable.is_member(def.list, record, num)
end

-- Resolve combos: when both lists match, the second is consumed and drawn as
-- the lower-right half of the first list's icon.
local split_with = {}
local consumed = {}
for _, c in ipairs(COMBINE) do
local tl, br = c[1], c[2]
if member[tl] and member[br] then
split_with[tl] = br
consumed[br] = true
end
end

local icons = {}
for _, def in ipairs(CONFIG) do
if member[def.list] and not consumed[def.list]
and not (def.suppressed_by and member[def.suppressed_by]) then
if split_with[def.list] then
table.insert(icons, split_icon(def, DEF_BY_LIST[split_with[def.list]]))
else
table.insert(icons, single_icon(def))
end
end
end

if #icons == 0 then return '' end
return '<div class="ability-section-hints">' .. table.concat(icons) .. '</div>'
end

return p

Module:AbilityHints

2026-07-12T12:22:55Z

~2026-PurpleDynamoLeap628: Test: link hint icons via full URL so the anchor has no title attribute, which Page Previews (Popups) requires to fire — keeps click-through without the preview popup (with help from vergir-bot LLM)

-- Ability interaction hints: small item icons on ability cards showing how an
-- ability interacts with items (dispellable, reduced, blocked, etc.).
-- Membership is decided by Module:AbilityTable.is_member so these icons always
-- agree with the dynamic ability-interaction tables.

local AbilityTable = require("Module:AbilityTable")
local icon_module = require("Module:Icon")
local ability_data = mw.loadJsonData("Data:AbilityData.json")

local p = {}

-- Display order. Each entry:
-- list AbilityTable list name (Module:AbilityTable/Lists)
-- item item whose icon represents the interaction
-- tip short hover text
-- suppressed_by optional: hide this icon when the named list is also a member
local CONFIG = {
{ list = "melee", item = "Melee Lifesteal", tip = "Benefits from Melee Damage" },
{ list = "reactivebarrier", item = "Reactive Barrier", tip = "Blocked by Reactive Barrier" },
{ list = "debuffresist", item = "Debuff Reducer", tip = "Duration reduced by Debuff Reducer" },
{ list = "movementbased", item = "Slowing Hex", tip = "Disabled by Slowing Hex" },
{ list = "heal", item = "Healing Booster", tip = "Amplified by Healing Booster" },
{ list = "dispelmagic", item = "Dispel Magic", tip = "Effect can be dispelled by Dispel Magic" },
{ list = "charges", item = "Rapid Recharge", tip = "Charged ability" },
{ list = "divinebarrier", item = "Divine Barrier", tip = "Effect can be dispelled by Divine Barrier", suppressed_by = "dispelmagic" },
{ list = "indomitable", item = "Indomitable", tip = "Duration reduced by Indomitable", suppressed_by = "reactivebarrier" },
{ list = "unstoppable", item = "Unstoppable", tip = "Prevented by Unstoppable" },
{ list = "cursedrelic", item = "Cursed Relic", tip = "Interrupted by Cursed Relic" },
{ list = "platedarmor", item = "Plated Armor", tip = "Prevented by Plated Armor" },
}

-- Renders the interaction icon rail for one ability.
-- ability_key the ability's internal key (AbilityCards .Key)
-- ability_num the ability's slot (1-4); coerced to number
-- Returns rail HTML, or '' when the ability has no interactions.
function p.get_icons(ability_key, ability_num)
local record = ability_data[ability_key]
if record == nil then return '' end
local num = tonumber(ability_num)

local member = {}
for _, def in ipairs(CONFIG) do
member[def.list] = AbilityTable.is_member(def.list, record, num)
end

local icons = {}
for _, def in ipairs(CONFIG) do
if member[def.list] and not (def.suppressed_by and member[def.suppressed_by]) then
-- Link via a full URL so the anchor has NO title attribute — that's
-- what Page Previews (Popups) keys off of — while staying clickable.
local url = tostring(mw.uri.canonicalUrl(def.item))
local img = icon_module._render(def.item, { size = '24px', ['icon-only'] = 'true', link = url })
table.insert(icons,
'<span class="ability-hint">' .. img
.. '<span class="ability-hint-tip">' .. def.tip .. '</span></span>'
)
end
end

if #icons == 0 then return '' end
return '<div class="ability-section-hints">' .. table.concat(icons) .. '</div>'
end

return p

Template:AbilitySection/styles.css

2026-07-12T12:16:35Z

~2026-PurpleDynamoLeap628: Remove dead anchor-only styles from .ability-hint now that icons are spans again (with help from vergir-bot LLM)

/* Make ability name match in-game look and align with the card */
.ability-section-wrapper .ability-name {
margin-left: 20px;
font-size: 1.5rem;
font-weight: normal;
font-family: "Valve Occult","Retail Demo","Open Sans";
}

/* a dirty-ish hack to recreate yellow text color on Icon next to ability name */
.ability-section-wrapper .ability-name img {
filter: brightness(0) saturate(100%) invert(87%) sepia(17%) saturate(354%) hue-rotate(335deg) brightness(107%) contrast(104%);
}

/* Outer two-column flex wrapper */
.ability-section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
margin-top: 4px;
margin-bottom: 8px;
}

/* Left column: the ability card */
.ability-section-card {
flex: 0 1 auto;
}

/* Right column: tabbed details panel */
.ability-section-details {
flex: 1 1 280px;
min-width: 280px;
}

.ability-section-details .tabber {
margin: 0;
}

.ability-section-details .tabber .tabber__tabs {
background: unset;
}

.ability-section-details .tabber .tabber__tab {
flex: 0;
padding: 8px 32px;
}

/* make underline for active section thinner
todo: can't use var for color because TemplateStyles. */
.ability-section-details .tabber__tab[aria-selected="true"] {
box-shadow: inset #92e3b2 0 -1px 0 0;
}

/* If there's only one section make it look less like a tab since there are no other section tabs to move to */
.ability-section-details .single-tabbed .tabber__tab {
box-shadow: unset;
pointer-events: none;
}

/* Constrain the first tab panel with a scrollbar if content overflows.
Value is chosen to approximate the average ability card height — adjust if card
sizes change significantly. */
.ability-section-details .tabber__panel:first-child {
max-height: 400px;
overflow-y: auto;
}

/* Section header inside Show All tab */
.ability-details-section-header {
font-weight: bold;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #aaa;
padding: 8px 4px 2px;
border-bottom: 1px solid #444;
margin-bottom: 4px;
}

.ability-details-section-header:first-child {
padding-top: 0;
}

/* Content block inside each Show All section — matches individual tab panel padding */
.ability-details-section-content {
display: block;
padding: 0 4px;
}

/* ABILITY CARD V2 Overrides
Write styles here only if they are custom to AbililtySection.
If you want to change AbililtyCard styles everywhere go to
https://deadlock.wiki/Template:Ability_card_v2/Card/styles.css
*/

/* Hide Ability Title, it's written above as heading */
.ability-section .ac-title {
display: none;
}

/* move charge indicators to be on the same height as other indicators */
.ability-section .ac-header-right {
flex-direction: row
}
.ability-section .ac-charge-row {
margin-bottom: unset;
}

/* add some margin since title that was providing it is gone */
.ability-section .ac-header {
margin-top: 20px;
}

/* ABILITY HINTS */
.ability-section-hints {
display: flex;
flex-direction: column;
gap: 6px;
flex: 0 0 auto;
justify-content: flex-start;
padding: 3px 0;
margin-left: -6px;
margin-right: 6px;
}
.ability-hint {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: help;
}
.ability-hint img {
border-radius: 2px;
}
.ability-hint .ability-hint-tip {
position: absolute;
left: 50%;
bottom: 130%;
transform: translateX(-50%);
background: #1c1a1d;
color: #FFEFD7;
border: 1px solid #45414a;
border-radius: 5px;
padding: 5px 9px;
font-size: 12px;
line-height: 1.3;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .12s;
z-index: 20;
box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.ability-hint:hover .ability-hint-tip {
opacity: 1;
}

/* MISC */

/* The only ability in the game with not top indicators (range/duration/cd) at all. Custom hack to cut empty space. */
#hero_atlas\:citadel_ability_passive_beefy .ac-header-wrapper,
#hero_viper\:ability_viper_snakedash .ac-header-wrapper {
height: 10px;
}

Module:AbilityHints

2026-07-12T11:54:39Z

~2026-PurpleDynamoLeap628: Revert to span-wrapped icons: MediaWiki escapes raw anchor tags in module output, so the custom-link approach renders as broken text. Back to the working no-link version (with help from vergir-bot LLM)

Template:AbilitySection/styles.css

2026-07-12T11:51:14Z

~2026-PurpleDynamoLeap628: Reset link styling on hint icons now that they wrap in an anchor (with help from vergir-bot LLM)

/* Make ability name match in-game look and align with the card */
.ability-section-wrapper .ability-name {
margin-left: 20px;
font-size: 1.5rem;
font-weight: normal;
font-family: "Valve Occult","Retail Demo","Open Sans";
}

/* a dirty-ish hack to recreate yellow text color on Icon next to ability name */
.ability-section-wrapper .ability-name img {
filter: brightness(0) saturate(100%) invert(87%) sepia(17%) saturate(354%) hue-rotate(335deg) brightness(107%) contrast(104%);
}

/* Outer two-column flex wrapper */
.ability-section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
margin-top: 4px;
margin-bottom: 8px;
}

/* Left column: the ability card */
.ability-section-card {
flex: 0 1 auto;
}

/* Right column: tabbed details panel */
.ability-section-details {
flex: 1 1 280px;
min-width: 280px;
}

.ability-section-details .tabber {
margin: 0;
}

.ability-section-details .tabber .tabber__tabs {
background: unset;
}

.ability-section-details .tabber .tabber__tab {
flex: 0;
padding: 8px 32px;
}

/* make underline for active section thinner
todo: can't use var for color because TemplateStyles. */
.ability-section-details .tabber__tab[aria-selected="true"] {
box-shadow: inset #92e3b2 0 -1px 0 0;
}

/* If there's only one section make it look less like a tab since there are no other section tabs to move to */
.ability-section-details .single-tabbed .tabber__tab {
box-shadow: unset;
pointer-events: none;
}

/* Constrain the first tab panel with a scrollbar if content overflows.
Value is chosen to approximate the average ability card height — adjust if card
sizes change significantly. */
.ability-section-details .tabber__panel:first-child {
max-height: 400px;
overflow-y: auto;
}

/* Section header inside Show All tab */
.ability-details-section-header {
font-weight: bold;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #aaa;
padding: 8px 4px 2px;
border-bottom: 1px solid #444;
margin-bottom: 4px;
}

.ability-details-section-header:first-child {
padding-top: 0;
}

/* Content block inside each Show All section — matches individual tab panel padding */
.ability-details-section-content {
display: block;
padding: 0 4px;
}

/* ABILITY CARD V2 Overrides
Write styles here only if they are custom to AbililtySection.
If you want to change AbililtyCard styles everywhere go to
https://deadlock.wiki/Template:Ability_card_v2/Card/styles.css
*/

/* Hide Ability Title, it's written above as heading */
.ability-section .ac-title {
display: none;
}

/* move charge indicators to be on the same height as other indicators */
.ability-section .ac-header-right {
flex-direction: row
}
.ability-section .ac-charge-row {
margin-bottom: unset;
}

/* add some margin since title that was providing it is gone */
.ability-section .ac-header {
margin-top: 20px;
}

/* ABILITY HINTS */
.ability-section-hints {
display: flex;
flex-direction: column;
gap: 6px;
flex: 0 0 auto;
justify-content: flex-start;
padding: 3px 0;
margin-left: -6px;
margin-right: 6px;
}
.ability-hint {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: help;
text-decoration: none;
color: inherit;
}
.ability-hint img {
border-radius: 2px;
}
.ability-hint .ability-hint-tip {
position: absolute;
left: 50%;
bottom: 130%;
transform: translateX(-50%);
background: #1c1a1d;
color: #FFEFD7;
border: 1px solid #45414a;
border-radius: 5px;
padding: 5px 9px;
font-size: 12px;
line-height: 1.3;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .12s;
z-index: 20;
box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.ability-hint:hover .ability-hint-tip {
opacity: 1;
}

/* MISC */

/* The only ability in the game with not top indicators (range/duration/cd) at all. Custom hack to cut empty space. */
#hero_atlas\:citadel_ability_passive_beefy .ac-header-wrapper,
#hero_viper\:ability_viper_snakedash .ac-header-wrapper {
height: 10px;
}

Module:AbilityHints

2026-07-12T11:50:44Z

~2026-PurpleDynamoLeap628: Wrap hint icons in our own link to the item page (keeps click-through while icon still renders link-free) for tooltip testing (with help from vergir-bot LLM)