The Deadlock Wiki

Template:ItemBox: Difference between revisions

Browse history interactively
← Older edit

Vergir (talk | contribs)

2 user groups
1,631 edits
undo
VisualWikitext
Jannepg (talk | contribs)
153 edits
m fix so that if not localization is found itemName gets used
Vergir (talk | contribs)
Contributors, Interface administrators
1,631 edits
Make the name area a query container so the measured name size can be emitted in cqw (with help from vergir-bot LLM)
 
(33 intermediate revisions by 4 users not shown)
Line 1: Line 1:
<templatestyles src="Template:ItemBox/styles.css" /><includeonly><!--
<templatestyles src="Template:ItemBox/styles.css" /><includeonly>
TODO: is imbue
TODO: text scaling with js


vars:
{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}<!--
  itemName
  showTierTag
 
  overrideDisplayName
 
  overrideTier
  overrideSlot
 
  overrideIsActive
  overrideIsImbue
 
  overrideLinkTooltip
  overrideLinkImage
  overrideLinkClick
 
-->{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}<!--
-->{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|showTierTag}}}}<!-- showTierTag / ''


    Display name: Lang string for the codename, else the raw name, then override.
-->{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}<!--
-->{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}<!--
-->{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}<!--
-->{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}<!--
-->{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}<!--
-->{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}<!--


    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:tier|ModTier{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}<!-- ModTier1, ModTier2, ModTier3, ModTier4, ModTier5
    Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -> weapon/vitality/spirit), tier, tags.
-->{{#vardefine:slot|is{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}}}<!-- isWeapon, isArmor, isTech
-->{{#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:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}<!--
-->{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}<!--
-->{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}<!--
-->{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}<!--
-->{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}<!--


-->{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}<!-- true / false
    lowGraphics=true is for callers that place dozens of cards on one page (the
-->{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|isActiveItem}}}}<!-- isActiveItem / ''
    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
-->{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|is_imbue|{{#var:itemName}}}}}}}}}<!-- true / false
    transparent-paper overlay that is a single cacheable image. On the profiled
-->{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|isImbueItem}}}}<!-- isImbueItem / ''
    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.
-->{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}<!--
-->{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}<!--
-->{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}<!--
-->{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}<!--
-->{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}}}}}}<!--
-->{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}<!--
-->
 
<div class="CitadelShopMod {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}}">
--><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="ModBackground">
<div class="itembox-background">
      <div class="ModCard">
<div class="itembox-card">
          <div class="modIconContainer">
<div class="itembox-icon-area">
              <div class="ModIconImage">[[File:{{#var:linkImage}}.png|80px|link=]]</div>
<div class="itembox-icon">[[File:{{#var:linkImage}}.png|160px|link=]]</div>
              <div class="TierContainer">
<div class="itembox-tier-badge">
                  <div class="tier_bg_shadow"></div>
<div class="itembox-tier-badge-shadow"></div>
                  <div class="tier_bg"></div>
<div class="itembox-tier-badge-fill"></div>
                  <div class="mod_tier_label"></div>
<div class="itembox-tier-badge-number"></div>
              </div>
</div>
              <p class="imbue_tag">{{#invoke:Lang|get_string|item_info_imbue}}</p>
<div class="itembox-imbue-tag">{{#invoke:Lang|get_string|item_info_imbue}}</div>
          </div>
</div>
          <div class="mod_name_area">
<!-- container-type is inline because TemplateStyles strips it; the name's cqw size measures against this box. -->
              <p class="modName" style="font-size:{{#var:fontSize}}px;">{{#var:displayName}}</p>
<div class="itembox-name-area" style="container-type: inline-size;">
          </div>
<p class="itembox-name" style="font-size:{{#var:fontSize}};text-wrap:balance;">{{#var:displayName}}</p>
          <div class="paperWear"></div>
</div>
          <div class="paperTexture"></div>
<div class="itembox-wear"></div>
          <div class="paperBevel"></div>
<div class="itembox-texture"></div>
          <p class="active_tag">{{#invoke:Lang|get_string|item_info_active}}</p>
<div class="itembox-bevel"></div>
          <div class="Outline"></div>
<div class="itembox-active-tag">{{#invoke:Lang|get_string|item_info_active}}</div>
      </div>
<div class="itembox-outline"></div>
  </div>
</div>
  <div class="item-link-wrapper" data-item-name="{{#var:linkTooltip}}">[[{{#var:linkClick}}|<span></span>]]</div>
</div>
<div class="item-link-wrapper" data-item-name="{{#var:linkTooltip}}">[[{{#var:linkClick}}|<span></span>]]</div>
</div></includeonly><noinclude>{{Documentation}}</noinclude>
</div></includeonly><noinclude>{{Documentation}}</noinclude>
Retrieved from "https://deadlock.wiki/Template:ItemBox"