Template:ItemBox: Difference between revisions

Jump to navigation Jump to search
Vergir (talk | contribs)
Add |size= param (scales the whole card via em base); apply name font-size in em so it scales; request larger icon for crisp scaling; drop resolved TODO (with help from vergir-bot LLM)
Vergir (talk | contribs)
Rename to kebab-case itembox-* classes; map slot Weapon/Armor/Tech to weapon/vitality/spirit; wire per-item texture variants; balance name wrapping inline; reformat for legibility (with help from vergir-bot LLM)
Line 1: Line 1:
<templatestyles src="Template:ItemBox/styles.css" /><includeonly><!--
<templatestyles src="Template:ItemBox/styles.css" /><includeonly><!--
vars:
  itemName
  showTierTag
  size


   overrideDisplayName
   ItemBox renders a Deadlock shop item card. Item data is pulled from
  Module:ItemData by item name.


   overrideTier
   Parameters
  overrideSlot
    itemName (or 1)      item name; keys into Module:ItemData
    size                card scale — 1 = default (80px), 1.5 = 150%, 0.75 = 75%
    showTierTag          "true" to show the tier corner badge
    overrideDisplayName  name shown on the card
    overrideTier         tier, 1-5
    overrideSlot         slot: Weapon / Armor / Tech
    overrideIsActive    "true"/"false" to force the ACTIVE tag
    overrideIsImbue      "true"/"false" to force the IMBUE tag
    overrideLinkTooltip  page the tooltip reads from
    overrideLinkImage    icon image
    overrideLinkClick    click-through target


   overrideIsActive
   The <!-- --> joins strip the newlines between #vardefines so no stray
   overrideIsImbue
   whitespace lands before the card markup.
 
  overrideLinkTooltip
  overrideLinkImage
  overrideLinkClick


-->{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}<!--
-->{{#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 (em) 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 -> 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=itembox-vitality|Tech=itembox-spirit}}}}<!--
 
-->{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}<!--
-->{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}<!-- true / false
-->{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}<!--
-->{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|isActiveItem}}}}<!-- isActiveItem / ''
-->{{#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}}}}}}}<!-- true / false
-->{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}<!--
-->{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|isImbueItem}}}}<!-- isImbueItem / ''
-->{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}<!--


    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}}{{If lang}}}}}}}<!--
-->{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}<!--
-->
 
<div class="CitadelShopMod {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}}" 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}}" 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|160px|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>
<p class="itembox-imbue-tag">{{#invoke:Lang|get_string|item_info_imbue}}</p>
          </div>
</div>
          <div class="mod_name_area">
<div class="itembox-name-area">
              <p class="modName" style="font-size:{{#var:fontSize}}em;">{{#var:displayName}}</p>
<p class="itembox-name" style="font-size:{{#var:fontSize}}em;text-wrap:balance;">{{#var:displayName}}</p>
          </div>
</div>
          <div class="paperWear"></div>
<div class="itembox-wear"></div>
          <div class="paperTexture"></div>
<div class="itembox-texture"></div>
          <div class="paperBevel"></div>
<div class="itembox-bevel"></div>
          <p class="active_tag">{{#invoke:Lang|get_string|item_info_active}}</p>
<p class="itembox-active-tag">{{#invoke:Lang|get_string|item_info_active}}</p>
          <div class="Outline"></div>
<div class="itembox-outline"></div>
      </div>
</div>
  </div>
</div>
  <div class="item-link-wrapper" data-item-name="{{#var:linkTooltip}}">[[{{#var:linkClick}}|<span></span>]]</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>