Template:ItemBox: Difference between revisions

Test whether the paper blend is what keeps picture cache tiles invalid: drop it from lowGraphics (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)
 
(18 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. The paper blend is dropped too: mix-blend-mode stops
     which blends two images and so is re-rasterised every scrolled frame, to a
     WebRender caching those regions as static tiles, so every scrolled frame
     transparent-paper overlay that is a single cacheable image. On the profiled
     re-rasterises and re-uploads them. That is measured as ~93 ms/s of memcpy
    navbox this took the render thread's OpenGL work from ~230 ms/s to ~10 and
     inside the render thread and ~76 picture cache invalidations per second.
     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-no-texture}}}}<!--
     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>