Template:ItemBox: Difference between revisions

m use ifeq true for is_active
Vergir (talk | contribs)
Make the name area a query container so the measured name size can be emitted in cqw (with help from vergir-bot LLM)
 
(69 intermediate revisions by 12 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: {{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name}}}}}}}
| Weapon = background-color: #C97A03;
| Vitality = background-color: #659818;
| Spirit = background-color: #8B56B4;
| background-color: #C97A03;}}"
! {{souls|{{#if: {{{item_price|}}}|{{{item_price}}}|{{#invoke:ItemData|get_cost|{{{item_name}}}}}}}}}
|- style="text-align:center; width:100px; max-width:200px; height:60px; {{
#switch: {{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name}}}}}}}
| 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: {{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name}}}}}}}
| Weapon = color: #3A2B08;
| Vitality = color: #233A00;
| Spirit = color: #3C254E;
| color: #3A2B08;}}">[[File:{{{item_name}}}.png|50px|link={{{item_name}}}]]</span>{{#ifeq: {{#invoke:ItemData|is_active|{{{item_name}}}}}|true|<div style="position: relative; display: flex; justify-content: center; align-items: center;"><div style="background-color: #161A13; color: #FFFFF5; border-radius:5px; padding: 1px 8px 1px 8px; font-size:10px; margin: 0; width: 40px; height: 14px; position: absolute; bottom: -14px">'''ACTIVE'''</div></div>}}
{{#if:{{#invoke:ItemData|get_component_name|{{{item_name}}}}}|<div style="position: relative; display: flex; justify-content: center; align-items: center;"><div style="background-color: #161A13; color: #FFFFF5; border-radius:50%; padding: 5px; font-size:10px; margin: 0; width: 20px; height: 20px; position: absolute; bottom: -7px; right: 3px;{{
#switch: {{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name}}}}}}}
| Weapon = background-color: #FFF0D7; color: #151912;
| Vitality = background-color: #FFFFE7; color: #1C1E18;
| Spirit = background-color: #FFEFD7; color: #131610;
| background-color: #FFF0D7; color: #151912;}}">{{Icon/Black|[[File:{{#invoke:ItemData|get_component_name|{{{item_name}}}}}.png|20px|link={{#invoke:ItemData|get_component_name|{{{item_name}}}}}]]}}</div></div>
}}
|- style="text-align: center; height:60px; font-size: 14px; {{
#switch: {{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name}}}}}}}
| 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}}  
    Measured name size (cqw) and stable per-item texture variety.
{{ItemBox|item_name = Shadow Weave}}
-->{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}<!--
{{ItemBox|item_name = Duration Extender}}
-->{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}<!--
<noinclude>
 
<templatedata>
    Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -> weapon/vitality/spirit), tier, tags.
{
-->{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}<!--
"params": {
-->{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}<!--
        "item_name": {
-->{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}<!--
"description": "Name of the item",
-->{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}<!--
"example": "Basic Magazine",
-->{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}<!--
"type": "string",
-->{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}<!--
"required": true
-->{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}<!--
},
 
        "display_name": {
    lowGraphics=true is for callers that place dozens of cards on one page (the
"description": "The display name of the item (for special cases such as Bullet Lifesteal (item) or Spirit Lifesteal (item))",
    card navboxes). It swaps the paper texture from the normal-mode multiply,
"example": "Bullet Lifesteal",
    which blends two images and so is re-rasterised every scrolled frame, to a
"type": "string"
    transparent-paper overlay that is a single cacheable image. On the profiled
},
    navbox this took the render thread's OpenGL work from ~230 ms/s to ~10 and
"componentOf": {
    roughly doubled the frame rate. The wear and icon masks are clips of a
"description": "The name of the item this is a component of, for linking",
    single image, not blends, so they cache once rasterised and stay at full
"example": "Headhunter",
    detail. The overlay itself is defined in [[Template:ItemBox/styles.css]] and
"type": "string"
    keyed off the same per-item texture-vN class, so a card keeps its paper
},
    across both modes.
"item_type": {
-->{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-lowgfx}}}}<!--
"description": "Overrides default item type. See Module:ItemData",
 
"example": "Spirit",
    Links.
"type": "string",
-->{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}<!--
"suggestedvalues": [
-->{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}<!--
"Weapon",
-->{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}<!--
"Vitality",
 
"Spirit"
--><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;">
]
<div class="itembox-background">
},
<div class="itembox-card">
"item_price": {
<div class="itembox-icon-area">
"description": "Overrides default item price. See Module:ItemData",
<div class="itembox-icon">[[File:{{#var:linkImage}}.png|160px|link=]]</div>
"example": "500",
<div class="itembox-tier-badge">
"type": "number"
<div class="itembox-tier-badge-shadow"></div>
},
<div class="itembox-tier-badge-fill"></div>
"active": {
<div class="itembox-tier-badge-number"></div>
"description": "Overrides default item active status. See Module:ItemData",
</div>
"example": "true",
<div class="itembox-imbue-tag">{{#invoke:Lang|get_string|item_info_imbue}}</div>
"type": "boolean"
</div>
}
<!-- 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;">
"paramOrder": [
<p class="itembox-name" style="font-size:{{#var:fontSize}};text-wrap:balance;">{{#var:displayName}}</p>
"item_name",
</div>
        "display_name",
<div class="itembox-wear"></div>
        "componentOf",
<div class="itembox-texture"></div>
"item_type",
<div class="itembox-bevel"></div>
"item_price",
<div class="itembox-active-tag">{{#invoke:Lang|get_string|item_info_active}}</div>
"active"
<div class="itembox-outline"></div>
]
</div>
}
</div>
</templatedata>
<div class="item-link-wrapper" data-item-name="{{#var:linkTooltip}}">[[{{#var:linkClick}}|<span></span>]]</div>
</noinclude>
</div></includeonly><noinclude>{{Documentation}}</noinclude>