The Deadlock Wiki

Template:ItemBox: Difference between revisions

Browse history interactively
← Older edit

Vergir (talk | contribs)

2 user groups
1,637 edits
undo
VisualWikitext
QuinnBinn (talk | contribs)
537 edits
m Reset bottom box to 50px for uniformity
Vergir (talk | contribs)
Contributors, Interface administrators
1,637 edits
Make the name area a query container so the measured name size can be emitted in cqw (with help from vergir-bot LLM)
 
(73 intermediate revisions by 13 users not shown)
Line 1: Line 1:
<onlyinclude>
<templatestyles src="Template:ItemBox/styles.css" /><includeonly>
<div style="display:inline-block; margin-left: 5px">
{|- style="text-align:center; border-collapse:collapse; border-radius: 7px; width:100px; max-width:200px; height:2px; font-size: 12px;{{
#switch: {{{item_type}}}|
| Weapon = background-color: #C97A03;
| Vitality = background-color: #659818;
| Spirit = background-color: #8B56B4;
| background-color: #C97A03;}}"
! {{souls|{{{item_price}}}}}
|- style="text-align:center; width:100px; max-width:200px; height:60px; {{
#switch: {{{item_type}}}
| Weapon = background-color: #FCAC4D; color: #3A2B08;
| Vitality = background-color: #86C921; color: #233A00;
| Spirit = background-color: #DE9CFF; color: #3C254E;
| background-color: #FCAC4D; color: #3A2B08;}}"
| <span style="filter: brightness(0) saturate(100%); transition: 0.1s transform ease-in-out; "{{
#switch: {{{item_type}}}
| Weapon = color: #3A2B08;
| Vitality = color: #233A00;
| Spirit = color: #3C254E;
| color: #3A2B08;}}">[[File:{{{item_name}}}.png|50px|link={{{item_name}}}]]</span>
{{#ifeq:{{{active|}}}|true
|<tr style="text-align:center; width:100px; max-width:200px; height:6px; font-size:12px;><th><span style="color:#FFF0D7"> Active </span></th></tr>}}
|-
{{#if:{{{componentOf|}}}
|<tr style="text-align:center; width:100px; max-width:200px; height:6px; font-size:12px;><th>[[{{{componentOf}}}|<span style="color:#FFF0D7"> Component </span>]]</th></tr>}}
|- style="text-align: center; height:50px; font-size: 14px; {{
#switch: {{{item_type}}}
| Weapon = background-color: #FFF0D7; color: #151912;
| Vitality = background-color: #FFFFE7; color: #1C1E18;
| Spirit = background-color: #FFEFD7; color: #131610;
| background-color: #FFF0D7; color: #151912;}}"
! {{#if:{{{display_name|}}}|[[{{{item_name}}}|{{{display_name}}}]]|[[{{{item_name}}}]]}}
|}</div></onlyinclude>


{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}<!--


A port of the initial box in [[Template:Infobox item]] with links, for use on pages that could use it without the whole infobox.
    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|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}<!--
-->{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}<!--


{{ItemBox|item_name = Healbane|item_type = Vitality|item_price = 1250|display_name = Healbane}} {{ItemBox|item_name = Alchemical Fire|active = true|item_type = Weapon|item_imagefilepath = Basic Magazine|item_price = 500}} {{ItemBox|item_name = Duration Extender|componentOf = Superior Duration|item_type = Spirit|item_price = 1250}}
    Measured name size (cqw) and stable per-item texture variety.
<noinclude>
-->{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}<!--
<templatedata>
-->{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}<!--
{
 
"params": {
    Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -> weapon/vitality/spirit), tier, tags.
"item_type": {
-->{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}<!--
"description": "What category of Item is this?",
-->{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}<!--
"example": "Spirit",
-->{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}<!--
"type": "string",
-->{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}<!--
"suggestedvalues": [
-->{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}<!--
"Weapon",
-->{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}<!--
"Vitality",
-->{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}<!--
"Spirit"
 
],
    lowGraphics=true is for callers that place dozens of cards on one page (the
"required": true
    card navboxes). It swaps the paper texture from the normal-mode multiply,
},
    which blends two images and so is re-rasterised every scrolled frame, to a
"item_price": {
    transparent-paper overlay that is a single cacheable image. On the profiled
"description": "How much does this item cost in souls?",
    navbox this took the render thread's OpenGL work from ~230 ms/s to ~10 and
"example": "500",
    roughly doubled the frame rate. The wear and icon masks are clips of a
"type": "number",
    single image, not blends, so they cache once rasterised and stay at full
"required": true
    detail. The overlay itself is defined in [[Template:ItemBox/styles.css]] and
},
    keyed off the same per-item texture-vN class, so a card keeps its paper
"item_name": {
    across both modes.
"description": "Name of the item",
-->{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-lowgfx}}}}<!--
"example": "Basic Magazine",
 
"type": "string",
    Links.
"required": true
-->{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}<!--
},
-->{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}<!--
"display_name": {
-->{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}<!--
"description": "The display name of the item (for special cases such as Bullet Lifesteal (item) or Spirit Lifesteal (item))",
 
"example": "Bullet Lifesteal",
--><div class="itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}}" style="font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;">
"type": "string"
<div class="itembox-background">
},
<div class="itembox-card">
"active": {
<div class="itembox-icon-area">
"description": "Whether or not this is an active item",
<div class="itembox-icon">[[File:{{#var:linkImage}}.png|160px|link=]]</div>
"example": "true",
<div class="itembox-tier-badge">
"type": "boolean",
<div class="itembox-tier-badge-shadow"></div>
"default": "false"
<div class="itembox-tier-badge-fill"></div>
},
<div class="itembox-tier-badge-number"></div>
"componentOf": {
</div>
"description": "The name of the item this is a component of, for linking",
<div class="itembox-imbue-tag">{{#invoke:Lang|get_string|item_info_imbue}}</div>
"example": "Headhunter",
</div>
"type": "string"
<!-- container-type is inline because TemplateStyles strips it; the name's cqw size measures against this box. -->
}
<div class="itembox-name-area" style="container-type: inline-size;">
},
<p class="itembox-name" style="font-size:{{#var:fontSize}};text-wrap:balance;">{{#var:displayName}}</p>
"paramOrder": [
</div>
"item_name",
<div class="itembox-wear"></div>
"item_type",
<div class="itembox-texture"></div>
"item_price",
<div class="itembox-bevel"></div>
"display_name",
<div class="itembox-active-tag">{{#invoke:Lang|get_string|item_info_active}}</div>
"active",
<div class="itembox-outline"></div>
"componentOf"
</div>
]
</div>
}
<div class="item-link-wrapper" data-item-name="{{#var:linkTooltip}}">[[{{#var:linkClick}}|<span></span>]]</div>
</templatedata>
</div></includeonly><noinclude>{{Documentation}}</noinclude>
</noinclude>
Retrieved from "https://deadlock.wiki/Template:ItemBox"