Template:ItemBox: Difference between revisionsGive feedback
Add |size= param (scales the whole card via em base); apply name font-size in em so it scales; request larger icon for crisp scaling; drop resolved TODO (with help from vergir-bot LLM) |
Rename to kebab-case itembox-* classes; map slot Weapon/Armor/Tech to weapon/vitality/spirit; wire per-item texture variants; balance name wrapping inline; reformat for legibility (with help from vergir-bot LLM) |
||
| Line 1: | Line 1: | ||
<templatestyles src="Template:ItemBox/styles.css" /><includeonly><!-- | <templatestyles src="Template:ItemBox/styles.css" /><includeonly><!-- | ||
ItemBox renders a Deadlock shop item card. Item data is pulled from | |||
Module:ItemData by item name. | |||
overrideTier | Parameters | ||
itemName (or 1) item name; keys into Module:ItemData | |||
size card scale — 1 = default (80px), 1.5 = 150%, 0.75 = 75% | |||
showTierTag "true" to show the tier corner badge | |||
overrideDisplayName name shown on the card | |||
overrideTier tier, 1-5 | |||
overrideSlot slot: Weapon / Armor / Tech | |||
overrideIsActive "true"/"false" to force the ACTIVE tag | |||
overrideIsImbue "true"/"false" to force the IMBUE tag | |||
overrideLinkTooltip page the tooltip reads from | |||
overrideLinkImage icon image | |||
overrideLinkClick click-through target | |||
The <!-- --> joins strip the newlines between #vardefines so no stray | |||
whitespace lands before the card markup. | |||
-->{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}<!-- | -->{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}<!-- | ||
Display name: Lang string for the codename, else the raw name, then override. | |||
-->{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}<!-- | -->{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}<!-- | ||
-->{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}<!-- | -->{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}<!-- | ||
-->{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}<!-- | -->{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}<!-- | ||
Measured name size (em) and stable per-item texture variety. | |||
-->{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}<!-- | -->{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}<!-- | ||
-->{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}<!-- | |||
-->{{#vardefine: | Modifier classes: slot (Weapon/Armor/Tech -> weapon/vitality/spirit), tier, tags. | ||
-->{{#vardefine: | -->{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor=itembox-vitality|Tech=itembox-spirit}}}}<!-- | ||
-->{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}<!-- | |||
-->{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}<!-- | -->{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}<!-- | ||
-->{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true| | -->{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}<!-- | ||
-->{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}<!-- | |||
-->{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}<!-- | -->{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}<!-- | ||
-->{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true| | -->{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}<!-- | ||
Links. | |||
-->{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}<!-- | -->{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}<!-- | ||
-->{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}<!-- | -->{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}<!-- | ||
-->{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}<!-- | -->{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}<!-- | ||
--> | |||
<div class=" | --><div class="itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}}" style="font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;"> | ||
<div class="itembox-background"> | |||
<div class="itembox-card"> | |||
<div class="itembox-icon-area"> | |||
<div class="itembox-icon">[[File:{{#var:linkImage}}.png|160px|link=]]</div> | |||
<div class="itembox-tier-badge"> | |||
<div class="itembox-tier-badge-shadow"></div> | |||
<div class="itembox-tier-badge-fill"></div> | |||
<div class="itembox-tier-badge-number"></div> | |||
</div> | |||
<p class="itembox-imbue-tag">{{#invoke:Lang|get_string|item_info_imbue}}</p> | |||
</div> | |||
<div class="itembox-name-area"> | |||
<p class="itembox-name" style="font-size:{{#var:fontSize}}em;text-wrap:balance;">{{#var:displayName}}</p> | |||
</div> | |||
<div class="itembox-wear"></div> | |||
<div class="itembox-texture"></div> | |||
<div class="itembox-bevel"></div> | |||
<p class="itembox-active-tag">{{#invoke:Lang|get_string|item_info_active}}</p> | |||
<div class="itembox-outline"></div> | |||
</div> | |||
</div> | |||
<div class="item-link-wrapper" data-item-name="{{#var:linkTooltip}}">[[{{#var:linkClick}}|<span></span>]]</div> | |||
</div></includeonly><noinclude>{{Documentation}}</noinclude> | </div></includeonly><noinclude>{{Documentation}}</noinclude> | ||
Revision as of 17:15, 20 July 2026
Usage
{{ItemBox}} renders a Deadlock shop item as a card: icon, tier art, and the item name auto-sized to fit. Pass an item name and everything else — tier, slot, tags, image — is pulled from Module:ItemData.
{{ItemBox|Extended Magazine}}
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
Parameters
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| itemName | itemName 1 | Item name; keys into Module:ItemData. Positional.
| String | required |
| size | size | Scales the whole card. 1 = default (80px wide), 1.5 = 150%, 0.75 = 75%.
| Number | optional |
| showTierTag | showTierTag | Set to true to show the tier corner badge.
| Boolean | optional |
| lowGraphics | lowGraphics | Set to true for pages that place many cards at once (the card navboxes). Swaps the paper texture to a cacheable overlay so scrolling stays smooth; the look is nearly identical.
| Boolean | optional |
| overrideDisplayName | overrideDisplayName | Replaces the name shown on the card.
| String | optional |
| overrideTier | overrideTier | Replaces the card's tier.
| Number | optional |
| overrideSlot | overrideSlot | Replaces the card's background (type).
| String | optional |
| overrideIsActive | overrideIsActive | Forces the ACTIVE tag on or off.
| Boolean | optional |
| overrideIsImbue | overrideIsImbue | Forces the IMBUE tag on or off.
| Boolean | optional |
| overrideLinkTooltip | overrideLinkTooltip | Page the hover tooltip reads its info from.
| String | optional |
| overrideLinkImage | overrideLinkImage | Page/file the icon image comes from.
| String | optional |
| overrideLinkClick | overrideLinkClick | Page the card links to when clicked.
| String | optional |
Examples
Basic
{{ItemBox|Close Quarters}}
{{ItemBox|Spirit Shredder Bullets}}
{{ItemBox|Silencer}}
{{ItemBox|Extra Health}}
{{ItemBox|Echo Shard}}
{{ItemBox|Celestial Blessing}}
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
Tier tag
{{ItemBox|Extended Magazine|showTierTag = true}}
{{ItemBox|Berserker|showTierTag = true}}
{{ItemBox|Echo Shard|showTierTag = true}}
{{ItemBox|Celestial Blessing|showTierTag = true}}
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
Size
{{ItemBox|Extended Magazine|size = 0.75}}
{{ItemBox|Extended Magazine}}
{{ItemBox|Extended Magazine|size = 1.5}}
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
Low graphics
For pages that place many cards at once. The paper texture becomes a single cacheable overlay so scrolling stays smooth; the look is nearly identical.
{{ItemBox|Extra Health}}
{{ItemBox|Kinetic Dash}}
{{ItemBox|Metal Skin}}
{{ItemBox|Echo Shard}}
{{ItemBox|Extra Health|lowGraphics = true}}
{{ItemBox|Kinetic Dash|lowGraphics = true}}
{{ItemBox|Metal Skin|lowGraphics = true}}
{{ItemBox|Echo Shard|lowGraphics = true}}
Normal
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
Low graphics
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
Overrides
{{ItemBox|High-Velocity Rounds|overrideDisplayName = Test Name}}
{{ItemBox|Intensifying Magazine|overrideTier = 4}}
{{ItemBox|Weakening Headshot|overrideSlot = Spirit}}
{{ItemBox|Recharging Rush|overrideIsActive = true}}
{{ItemBox|Alchemical Fire|overrideIsImbue = true}}
{{ItemBox|Bullet Lifesteal|overrideLinkClick = Heroes}}
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
joins strip the newlines between #vardefines so no stray
whitespace lands before the card markup.-->
References
- Item data — Data:ItemData.json, read by Module:ItemData
- Name sizing and texture variety — Module:ItemBox
- Card styling — Template:ItemBox/styles.css