The Deadlock Wiki

Template:ItemBox: Difference between revisions

Browse history interactively
← Older edit

Vergir (talk | contribs)

2 user groups
1,631 edits
undo
VisualWikitext
change font, make link noticeable
Vergir (talk | contribs)
Contributors, Interface administrators
1,631 edits
Make the name area a query container so the measured name size can be emitted in cqw (with help from vergir-bot LLM)
 
(50 intermediate revisions by 9 users not shown)
Line 1: Line 1:
<onlyinclude>
<templatestyles src="Template:ItemBox/styles.css" /><includeonly>
<div class="HeroCard2" style="transition: 0.1s transform ease-in-out;display:inline-block; margin-left: 5px; border-radius: 5px;">
 
{|- style="font-family:'Retail Demo Regular',serif;text-align:center; border-collapse:collapse; border-radius: 5px; width:100px !important; max-width:200px; height:2px; font-size: 14px;{{
{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}<!--
#switch: {{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name|{{{1}}}}}}}}}}
 
| Weapon = background-color: #C97A03;
    Display name: Lang string for the codename, else the raw name, then override.
| Vitality = background-color: #659818;
-->{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}<!--
| Spirit = background-color: #8B56B4;
-->{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}<!--
| background-color: #C97A03;}}"
-->{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}<!--
! {{souls|{{#if: {{{item_price|}}}|{{{item_price}}}|{{#invoke:ItemData|get_cost|{{{item_name|{{{1}}}}}}}}}}|size=12px|Shadow=text-shadow: 1.8px 1.8px rgba(0, 0, 0, 0.3);}}
 
|- style="text-align:center; width:100px; max-width:200px; height:60px; {{  
    Measured name size (cqw) and stable per-item texture variety.
#switch: {{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name|{{{1}}}}}}}}}}
-->{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}<!--
| Weapon = background-color: #FCAC4D; color: #3A2B08;
-->{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}<!--
| Vitality = background-color: #86C921; color: #233A00;
 
| Spirit = background-color: #DE9CFF; color: #3C254E;
    Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -> weapon/vitality/spirit), tier, tags.
| background-color: #FCAC4D; color: #3A2B08;}}"
-->{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}<!--
| <span style="filter: brightness(0) saturate(100%); transition: 0.1s transform ease-in-out;"
-->{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}<!--
{{
-->{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}<!--
#switch: {{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name|{{{1}}}}}}}}}}
-->{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}<!--
| Weapon = color: #3A2B08;
-->{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}<!--
| Vitality = color: #233A00;
-->{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}<!--
| Spirit = color: #3C254E;
-->{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}<!--
| color: #3A2B08;}}">[[File:{{{item_name|{{{1}}}}}}.png|50px|link={{#if:{{{link|}}}|{{{link}}}|{{{item_loc|{{{item_name|{{{1}}}}}}}}}}}]]</span>{{#ifeq: {{#invoke:ItemData|is_active|{{{item_name|{{{1}}}}}}}}|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 3px 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|{{{1}}}}}}}}|<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;{{
    lowGraphics=true is for callers that place dozens of cards on one page (the
#switch: {{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name|{{{1}}}}}}}}}}
    card navboxes). It swaps the paper texture from the normal-mode multiply,
| Weapon = background-color: #FFF0D7; color: #151912;
    which blends two images and so is re-rasterised every scrolled frame, to a
| Vitality = background-color: #FFFFE7; color: #1C1E18;
    transparent-paper overlay that is a single cacheable image. On the profiled
| Spirit = background-color: #FFEFD7; color: #131610;
    navbox this took the render thread's OpenGL work from ~230 ms/s to ~10 and
| background-color: #FFF0D7; color: #151912;}}">{{Icon/Black|[[File:{{#invoke:ItemData|get_component_name|{{{item_name|{{{1}}}}}}}}.png|20px|link={{#invoke:ItemData|get_component_name|{{{item_name|{{{1}}}}}}}}]]}}</div></div>
    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
|- style="display:flex;justify-content: center; align-items: center;border-radius: 0px 0px 5px 5px; height:60px; font-size: 12px; {{
    detail. The overlay itself is defined in [[Template:ItemBox/styles.css]] and
#switch: {{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name|{{{1}}}}}}}}}}
    keyed off the same per-item texture-vN class, so a card keeps its paper
| Weapon = background-color: #FFF0D7; color: #151912;
    across both modes.
| Vitality = background-color: #FFFFE7; color: #1C1E18;
-->{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-lowgfx}}}}<!--
| Spirit = background-color: #FFEFD7; color: #131610;
 
| background-color: #FFF0D7; color: #151912;}}"
    Links.
! |{{#if:{{{link|}}}|[[{{{link}}}|{{{item_loc|{{{item_name|{{{1}}}}}}}}}]]|[[{{{item_loc|{{{item_name|{{{1}}}}}}}}}|{{{item_loc|{{{item_name|{{{1}}}}}}}}}]]}}
-->{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}<!--
|}</div></onlyinclude><noinclude>{{Documentation}}</noinclude>
-->{{#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"