The Deadlock Wiki

Template:ItemBox: Difference between revisions

Browse history interactively

Vergir (talk | contribs)

2 user groups
1,637 edits
undo
VisualWikitext
QuinnBinn (talk | contribs)
537 edits
Copied the smaller box from Infobox Item into its own template. Figured it might be useful for pages to display multiple items at once without the whole infobox.
 
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)
 
(79 intermediate revisions by 14 users not shown)
Line 1: Line 1:
<onlyinclude>
<templatestyles src="Template:ItemBox/styles.css" /><includeonly>
<div style="display:inline-block">
{|- 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: #FCAC4D; color: #3A2B08;
| Vitality = background-color: #86C921; color: #233A00;
| Spirit = background-color: #DE9CFF; color: #3C254E;
| background-color: #FCAC4D; color: #3A2B08;}}"
! {{souls|{{{item_price}}}}}
|- style="text-align:center; width:100px; max-width:200px;{{
#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>


|- style="text-align: center; height:50px; font-size: 14px; {{
{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}<!--
#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;}}"
! {{{item_name}}}
|}</div></onlyinclude>


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


A port of the initial box in [[Template:Infobox item]] with links, for use on pages that could use it without the whole infobox.
    Measured name size (cqw) and stable per-item texture variety.
-->{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}<!--
-->{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}<!--


{{ItemBox|item_name = Spirit Armor|item_type = Vitality|item_imagefilepath = Spirit Armor|item_price = 1250}} {{ItemBox|item_name = Basic Magazine|item_type = Weapon|item_imagefilepath = Basic Magazine|item_price = 500}} {{ItemBox|item_name = Improved Cooldown|item_type = Spirit|item_price = 1250}}
    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}}}}<!--
-->{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}<!--
-->{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}<!--
-->{{#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|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}<!--
 
    lowGraphics=true is for callers that place dozens of cards on one page (the
    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
    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
    roughly doubled the frame rate. The wear and icon masks are clips of a
    single image, not blends, so they cache once rasterised and stay at full
    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
    across both modes.
-->{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-lowgfx}}}}<!--
 
    Links.
-->{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}<!--
-->{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}<!--
-->{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}<!--
 
--><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">
<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>
<div class="itembox-imbue-tag">{{#invoke:Lang|get_string|item_info_imbue}}</div>
</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;">
<p class="itembox-name" style="font-size:{{#var:fontSize}};text-wrap:balance;">{{#var:displayName}}</p>
</div>
<div class="itembox-wear"></div>
<div class="itembox-texture"></div>
<div class="itembox-bevel"></div>
<div class="itembox-active-tag">{{#invoke:Lang|get_string|item_info_active}}</div>
<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>
Retrieved from "https://deadlock.wiki/Template:ItemBox"