Template:ItemBox: Difference between revisions

(23 intermediate revisions by 2 users not shown)

Line 8:

-->{{#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:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}<!--

Line 21:

-->{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}<!--

~~Optional simplifications~~ for callers that ~~render many~~ cards ~~at once~~. ~~Each~~

lowGraphics=true is for callers that place dozens of cards on one page (the

~~masked layer costs~~ the ~~GPU an extra~~ render ~~pass per card~~ and the ~~texture~~

card navboxes). It swaps the paper texture from the normal-mode multiply,

~~costs a backdrop read~~, so ~~dropping them buys frames~~ at ~~the cost of~~ detail.

which blends two images and so is re-rasterised every scrolled frame, to a

~~wearMask=no keeps~~ the per-~~tier tint but loses the worn~~ paper ~~edge~~.

transparent-paper overlay that is a single cacheable image. On the profiled

-->{{#vardefine:~~lite~~|{{#ifeq:{{{~~wearMask~~|}}}|no|itembox-~~flat-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#ifeq:{{{texture|}}}|no|itembox-no-texture~~}}}}<!--

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.

Line 32:

Line 38:

-->{{#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}}" style="font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;">

Line 44:

Line 50:

<div class="itembox-imbue-tag">{{#invoke:Lang|get_string|item_info_imbue}}</div>

</div>

<p class="itembox-name" style="font-size:{{#var:fontSize}}em;text-wrap:balance;">{{#var:displayName}}</p>

<p class="itembox-name" style="font-size:{{#var:fontSize}};text-wrap:balance;">{{#var:displayName}}</p>

</div>

Template:ItemBox: Difference between revisionsGive feedback

Vergir (talk | contribs)

@@ Line 8: / Line 8: @@
 -->{{#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:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}<!--
@@ Line 21: / Line 21: @@
 -->{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}<!--
-      Optional simplifications for callers that render many cards at once. Each
+      lowGraphics=true is for callers that place dozens of cards on one page (the
-      masked layer costs the GPU an extra render pass per card and the texture
+     card navboxes). It swaps the paper texture from the normal-mode multiply,
-      costs a backdrop read, so dropping them buys frames at the cost of detail.
+     which blends two images and so is re-rasterised every scrolled frame, to a
-      wearMask=no keeps the per-tier tint but loses the worn paper edge.
+     transparent-paper overlay that is a single cacheable image. On the profiled
--->{{#vardefine:lite|{{#ifeq:{{{wearMask|}}}|no|itembox-flat-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#ifeq:{{{texture|}}}|no|itembox-no-texture}}}}<!--
+      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.
@@ Line 32: / Line 38: @@
 -->{{#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}}" style="font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;">
 	<div class="itembox-background">
 		<div class="itembox-card">
@@ Line 44: / Line 50: @@
 				<div class="itembox-imbue-tag">{{#invoke:Lang|get_string|item_info_imbue}}</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 class="itembox-wear"></div>