Template:ItemBox: Difference between revisions

(21 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 drops~~ the ~~mask~~ from the wear ~~tint three different ways:~~

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

~~no - tint moves behind the artwork~~, so ~~only the card stock~~ is ~~coloured~~

navbox this took the render thread's OpenGL work from ~230 ms/s to ~10 and

~~ramp~~ - ~~tint stays on top~~, ~~fading in from the~~ card~~'s edges~~

roughly doubled the frame rate. The wear and icon masks are clips of a

~~soft - tint stays on top but uniform and lighter, with the name lifted clear~~

single image, not blends, so they cache once rasterised and stay at full

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

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 35:

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 47:

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 drops the mask from the wear tint three different ways:
+     transparent-paper overlay that is a single cacheable image. On the profiled
-      no   - tint moves behind the artwork, so only the card stock is coloured
+      navbox this took the render thread's OpenGL work from ~230 ms/s to ~10 and
-      ramp - tint stays on top, fading in from the card's edges
+     roughly doubled the frame rate. The wear and icon masks are clips of a
-      soft - tint stays on top but uniform and lighter, with the name lifted clear
+      single image, not blends, so they cache once rasterised and stay at full
--->{{#vardefine:lite|{{#switch:{{{wearMask|}}}|no=itembox-flat-wear|ramp=itembox-ramp-wear|soft=itembox-soft-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#ifeq:{{{texture|}}}|no|itembox-no-texture}}}}<!--
+     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 35: / 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 47: / 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>