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 texture=over-light preset so the lighter overlay can be set without inline style (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)
 
(13 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. The wear tint becomes a gradient and the icon mask is dropped,
     card navboxes). It swaps the paper texture from the normal-mode multiply,
     and the paper texture is composited into the card layer with
     which blends two images and so is re-rasterised every scrolled frame, to a
    background-blend-mode instead of the separate mix-blend-mode overlay. That
     transparent-paper overlay that is a single cacheable image. On the profiled
     is the change that matters: mix-blend-mode reads the page backdrop so
     navbox this took the render thread's OpenGL work from ~230 ms/s to ~10 and
    WebRender re-rasterises those regions every scrolled frame, while a
    roughly doubled the frame rate. The wear and icon masks are clips of a
     same-element blend stays a static tile. Removing the overlay blend cut the
     single image, not blends, so they cache once rasterised and stay at full
     render thread's OpenGL work on the profiled navbox by around 90%.
     detail. The overlay itself is defined in [[Template:ItemBox/styles.css]] and
-->{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-ramp-wear itembox-flat-icon itembox-blend-texture itembox-blend-tex-3}}}}<!--
     keyed off the same per-item texture-vN class, so a card keeps its paper
 
     across both modes.
     The same layers individually, for testing combinations or overriding the
-->{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-lowgfx}}}}<!--
     bundle above. wearMask drops the mask from the wear tint three ways:
    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 handles the paper grain:
    no    - drop it entirely
    1/2/3 - one shared paper via the mix-blend overlay (does not cache)
    blend / blend1..3 - paper multiplied into the card art, cacheable, but
            reaches only the card art, not the icon or name
     over / over1..3 - paper as a plain alpha overlay over the whole card,
            cacheable; lightens instead of multiplying
    over-light - the plain overlay (paper 3) at a lighter opacity
-->{{#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|blend=itembox-blend-texture|blend1=itembox-blend-texture itembox-blend-tex-1|blend2=itembox-blend-texture itembox-blend-tex-2|blend3=itembox-blend-texture itembox-blend-tex-3|over=itembox-over-texture|over1=itembox-over-texture itembox-blend-tex-1|over2=itembox-over-texture itembox-blend-tex-2|over3=itembox-over-texture itembox-blend-tex-3|over-light=itembox-over-texture itembox-blend-tex-3 itembox-over-light}}}}<!--


     Links.
     Links.
Line 51: 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">
Line 63: 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"