The Deadlock Wiki

Template:ItemBox: Difference between revisions

Browse history interactively
← Older edit

Vergir (talk | contribs)

2 user groups
1,631 edits
undo
VisualWikitext
Add lowGraphics flag bundling the cheap layers and a 1x icon request, so callers rendering many cards set one parameter (with help from vergir-bot LLM)
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)
 
(19 intermediate revisions by one other user not shown)
Line 8: Line 8:
-->{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}<!--
-->{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}<!--


     Measured name size (em) and stable per-item texture variety.
     Measured name size (cqw) 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:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}<!--
Line 21: Line 21:
-->{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}<!--
-->{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}<!--


     lowGraphics=true is the setting for callers that place dozens of cards on
     lowGraphics=true is for callers that place dozens of cards on one page (the
     one page. It bundles the cheap variants below and drops the icon request to
     card navboxes). It swaps the paper texture from the normal-mode multiply,
     1:1 with the card, which is the single largest saving: at the default 160px
    which blends two images and so is re-rasterised every scrolled frame, to a
     the browser's 2x pick exceeds the source image and it decodes the original
     transparent-paper overlay that is a single cacheable image. On the profiled
     PNG rather than a thumbnail. Each piece is a render pass, a backdrop read or
     navbox this took the render thread's OpenGL work from ~230 ms/s to ~10 and
    a texture upload the GPU would otherwise repeat for every card on screen.
     roughly doubled the frame rate. The wear and icon masks are clips of a
-->{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-ramp-wear itembox-flat-icon itembox-force-tex-3}}}}<!--
     single image, not blends, so they cache once rasterised and stay at full
-->{{#vardefine:iconPx|{{#ifeq:{{{lowGraphics|}}}|true|{{#expr: 80 * {{#if:{{{size|}}}|{{{size}}}|1}} }}|160}}}}<!--
     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
     The same layers individually, for testing combinations or overriding the
     across both modes.
     bundle above. wearMask drops the mask from the wear tint three ways:
-->{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-lowgfx}}}}<!--
     no  - tint moves behind the artwork, so only the card stock is coloured
    ramp - tint stays on top, fading in from the card's edges
    soft - tint stays on top, uniform and lighter, with the name lifted clear
    texture accepts no to drop the paper blend entirely, or 1, 2 or 3 to give
     every card the same paper instead of one picked from the item's name.
-->{{#vardefine:lite|{{#switch:{{{wearMask|}}}|no=itembox-flat-wear|ramp=itembox-ramp-wear|soft=itembox-soft-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#switch:{{{texture|}}}|no=itembox-no-texture|1=itembox-force-tex-1|2=itembox-force-tex-2|3=itembox-force-tex-3}}}}<!--


     Links.
     Links.
Line 44: Line 38:
-->{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}<!--
-->{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}<!--


--><div class="itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}} {{#var:lite}}" style="font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;">
--><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-background">
<div class="itembox-card">
<div class="itembox-card">
<div class="itembox-icon-area">
<div class="itembox-icon-area">
<div class="itembox-icon">[[File:{{#var:linkImage}}.png|{{#var:iconPx}}px|link=]]</div>
<div class="itembox-icon">[[File:{{#var:linkImage}}.png|160px|link=]]</div>
<div class="itembox-tier-badge">
<div class="itembox-tier-badge">
<div class="itembox-tier-badge-shadow"></div>
<div class="itembox-tier-badge-shadow"></div>
Line 56: Line 50:
<div class="itembox-imbue-tag">{{#invoke:Lang|get_string|item_info_imbue}}</div>
<div class="itembox-imbue-tag">{{#invoke:Lang|get_string|item_info_imbue}}</div>
</div>
</div>
<div class="itembox-name-area">
<!-- container-type is inline because TemplateStyles strips it; the name's cqw size measures against this box. -->
<p class="itembox-name" style="font-size:{{#var:fontSize}}em;text-wrap:balance;">{{#var:displayName}}</p>
<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>
<div class="itembox-wear"></div>
<div class="itembox-wear"></div>
Retrieved from "https://deadlock.wiki/Template:ItemBox"