Template:ItemBox: Difference between revisionsGive feedback
texture now also accepts 1, 2 or 3 to force a single paper texture on every card (with help from vergir-bot LLM) |
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) |
||
| 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 | |||
one page. It bundles the cheap variants below and drops the icon request to | |||
1:1 with the card, which is the single largest saving: at the default 160px | |||
wearMask drops the mask from the wear tint three | the browser's 2x pick exceeds the source image and it decodes the original | ||
PNG rather than a thumbnail. Each piece is a render pass, a backdrop read or | |||
a texture upload the GPU would otherwise repeat for every card on screen. | |||
-->{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-ramp-wear itembox-flat-icon itembox-force-tex-3}}}}<!-- | |||
-->{{#vardefine:iconPx|{{#ifeq:{{{lowGraphics|}}}|true|{{#expr: 80 * {{#if:{{{size|}}}|{{{size}}}|1}} }}|160}}}}<!-- | |||
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 | 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 | ramp - tint stays on top, fading in from the card's edges | ||
| Line 37: | Line 44: | ||
-->{{#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: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}} {{#var:lite}}" 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| | <div class="itembox-icon">[[File:{{#var:linkImage}}.png|{{#var:iconPx}}px|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> | ||