Template:ItemBox: Difference between revisions

Add texture=mask, mask-inv and mask-soft switch values (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)
 
(7 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 drops the paper texture, because every way of drawing it as a
     card navboxes). It swaps the paper texture from the normal-mode multiply,
     multiply blends two images together, and WebRender re-rasterises any such
     which blends two images and so is re-rasterised every scrolled frame, to a
    blend on every scrolled frame instead of caching it as a static tile. On the
    transparent-paper overlay that is a single cacheable image. On the profiled
     profiled navbox that blend was the whole cost: dropping it took the render
     navbox this took the render thread's OpenGL work from ~230 ms/s to ~10 and
    thread's OpenGL work from ~230 ms/s to ~10 and roughly doubled the frame
    roughly doubled the frame rate. The wear and icon masks are clips of a
    rate. The wear and icon masks are clips of a single image, not blends of
    single image, not blends, so they cache once rasterised and stay at full
    two, so they cache once rasterised and are kept at full detail here.
    detail. The overlay itself is defined in [[Template:ItemBox/styles.css]] and
-->{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-no-texture}}}}<!--
     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 (does not cache)
    mask / mask-inv / mask-soft - paper used as a mask over a dark tint, a clip
            rather than a blend, so it caches while scrolling. mask and mask-inv
            differ in whether the grain reads from the paper's brightness or its
            alpha; mask-soft is a lighter luminance version.
-->{{#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|mask=itembox-mask-texture itembox-mask-any-texture|mask-inv=itembox-mask-inv-texture itembox-mask-any-texture|mask-soft=itembox-mask-soft-texture itembox-mask-any-texture}}}}<!--


     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>