Template:ItemBox: Difference between revisions

Use per-item paper for the lowGraphics blend rather than forcing one, now that the blend caches regardless of variety (with help from vergir-bot LLM)
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)
 
(10 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, the icon mask is dropped, and
     card navboxes). It swaps the paper texture from the normal-mode multiply,
     the paper texture is composited into the card art with background-blend-mode
     which blends two images and so is re-rasterised every scrolled frame, to a
     instead of the separate mix-blend-mode overlay. That last part is the change
     transparent-paper overlay that is a single cacheable image. On the profiled
    that matters: mix-blend-mode reads the page backdrop so WebRender
    navbox this took the render thread's OpenGL work from ~230 ms/s to ~10 and
    re-rasterises those regions every scrolled frame, while a same-element blend
     roughly doubled the frame rate. The wear and icon masks are clips of a
     stays a static tile. Removing the overlay blend cut the render thread's
     single image, not blends, so they cache once rasterised and stay at full
    OpenGL work on the profiled navbox by around 90%. The blend reaches the card
     detail. The overlay itself is defined in [[Template:ItemBox/styles.css]] and
     art but not the icon or the name, which sit above it as content. Paper is
     keyed off the same per-item texture-vN class, so a card keeps its paper
    still chosen per item, since the blend caches regardless of which one.
     across both modes.
-->{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-ramp-wear itembox-flat-icon itembox-blend-texture}}}}<!--
-->{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-lowgfx}}}}<!--
 
     The same layers individually, for testing combinations or overriding the
     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; reaches
            the card art but not the icon or 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|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}}}}<!--


     Links.
     Links.
Line 50: 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 62: 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>