Template:ItemBox: Difference between revisionsGive feedback
mNo edit summary |
Make the name area a query container so the measured name size can be emitted in cqw (with help from vergir-bot LLM) |
||
| (26 intermediate revisions by 2 users not shown) | |||
| Line 8: | Line 8: | ||
-->{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}<!-- | -->{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}<!-- | ||
Measured name size ( | 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}}}}}}<!-- | ||
Modifier classes: slot (Weapon/Armor/Tech -> weapon/vitality/spirit), tier, tags. | Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -> weapon/vitality/spirit), tier, tags. | ||
-->{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor=itembox-vitality|Tech=itembox-spirit}}}}<!-- | -->{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}<!-- | ||
-->{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}<!-- | -->{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}<!-- | ||
-->{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}<!-- | -->{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}<!-- | ||
| Line 20: | Line 20: | ||
-->{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}<!-- | -->{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}<!-- | ||
-->{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}<!-- | -->{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}<!-- | ||
lowGraphics=true is for callers that place dozens of cards on one page (the | |||
card navboxes). It swaps the paper texture from the normal-mode multiply, | |||
which blends two images and so is re-rasterised every scrolled frame, to a | |||
transparent-paper overlay that is a single cacheable image. On the profiled | |||
navbox this took the render thread's OpenGL work from ~230 ms/s to ~10 and | |||
roughly doubled the frame rate. The wear and icon masks are clips of a | |||
single image, not blends, so they cache once rasterised and stay at full | |||
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 | |||
across both modes. | |||
-->{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-lowgfx}}}}<!-- | |||
Links. | Links. | ||
| Line 26: | 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}}" 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 36: | Line 48: | ||
<div class="itembox-tier-badge-number"></div> | <div class="itembox-tier-badge-number"></div> | ||
</div> | </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}} | <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> | ||
<div class="itembox-texture"></div> | <div class="itembox-texture"></div> | ||
<div class="itembox-bevel"></div> | <div class="itembox-bevel"></div> | ||
< | <div class="itembox-active-tag">{{#invoke:Lang|get_string|item_info_active}}</div> | ||
<div class="itembox-outline"></div> | <div class="itembox-outline"></div> | ||
</div> | </div> | ||