Template:ItemBox: Difference between revisionsGive feedback
m resize |
make parameter name optional |
||
| Line 2: | Line 2: | ||
<div style="display:inline-block; margin-left: 5px"> | <div style="display:inline-block; margin-left: 5px"> | ||
{|- style="text-align:center; border-collapse:collapse; border-radius: 5px; width:100px !important; max-width:200px; height:2px; font-size: 12px;{{ | {|- style="text-align:center; border-collapse:collapse; border-radius: 5px; width:100px !important; max-width:200px; height:2px; font-size: 12px;{{ | ||
#switch: {{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name}}}}}}} | #switch: {{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name|{{{1}}}}}}}}}} | ||
| Weapon = background-color: #C97A03; | | Weapon = background-color: #C97A03; | ||
| Vitality = background-color: #659818; | | Vitality = background-color: #659818; | ||
| Spirit = background-color: #8B56B4; | | Spirit = background-color: #8B56B4; | ||
| background-color: #C97A03;}}" | | background-color: #C97A03;}}" | ||
! {{souls|{{#if: {{{item_price|}}}|{{{item_price}}}|{{#invoke:ItemData|get_cost|{{{item_name}}}}}}}}} | ! {{souls|{{#if: {{{item_price|}}}|{{{item_price}}}|{{#invoke:ItemData|get_cost|{{{item_name|{{{1}}}}}}}}}}}} | ||
|- style="text-align:center; width:100px; max-width:200px; height:60px; {{ | |- style="text-align:center; width:100px; max-width:200px; height:60px; {{ | ||
#switch: {{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name}}}}}}} | #switch: {{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name|{{{1}}}}}}}}}} | ||
| Weapon = background-color: #FCAC4D; color: #3A2B08; | | Weapon = background-color: #FCAC4D; color: #3A2B08; | ||
| Vitality = background-color: #86C921; color: #233A00; | | Vitality = background-color: #86C921; color: #233A00; | ||
| Line 16: | Line 16: | ||
| <span style="filter: brightness(0) saturate(100%); transition: 0.1s transform ease-in-out;" | | <span style="filter: brightness(0) saturate(100%); transition: 0.1s transform ease-in-out;" | ||
{{ | {{ | ||
#switch: {{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name}}}}}}} | #switch: {{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name|{{{1}}}}}}}}}} | ||
| Weapon = color: #3A2B08; | | Weapon = color: #3A2B08; | ||
| Vitality = color: #233A00; | | Vitality = color: #233A00; | ||
| Spirit = color: #3C254E; | | Spirit = color: #3C254E; | ||
| color: #3A2B08;}}">[[File:{{{item_name}}}.png|50px|link={{#if:{{{link|}}}|{{{link}}}|{{{item_name}}}}}]]</span>{{#ifeq: {{#invoke:ItemData|is_active|{{{item_name}}}}}|true|<div style="position: relative; display: flex; justify-content: center; align-items: center;"><div style="background-color: #161A13; color: #FFFFF5; border-radius:5px; padding: 1px 8px 3px 8px; font-size:10px; margin: 0; width: 40px; height: 14px; position: absolute; bottom: -14px">'''ACTIVE'''</div></div>}} | | color: #3A2B08;}}">[[File:{{{item_name|{{{1}}}}}}.png|50px|link={{#if:{{{link|}}}|{{{link}}}|{{{item_name|{{{1}}}}}}}}]]</span>{{#ifeq: {{#invoke:ItemData|is_active|{{{item_name|{{{1}}}}}}}}|true|<div style="position: relative; display: flex; justify-content: center; align-items: center;"><div style="background-color: #161A13; color: #FFFFF5; border-radius:5px; padding: 1px 8px 3px 8px; font-size:10px; margin: 0; width: 40px; height: 14px; position: absolute; bottom: -14px">'''ACTIVE'''</div></div>}} | ||
{{#if:{{#invoke:ItemData|get_component_name|{{{item_name}}}}}|<div style="position: relative; display: flex; justify-content: center; align-items: center;"><div style="background-color: #161A13; color: #FFFFF5; border-radius:50%; padding: 5px; font-size:10px; margin: 0; width: 20px; height: 20px; position: absolute; bottom: -7px; right: 3px;{{ | {{#if:{{#invoke:ItemData|get_component_name|{{{item_name|{{{1}}}}}}}}|<div style="position: relative; display: flex; justify-content: center; align-items: center;"><div style="background-color: #161A13; color: #FFFFF5; border-radius:50%; padding: 5px; font-size:10px; margin: 0; width: 20px; height: 20px; position: absolute; bottom: -7px; right: 3px;{{ | ||
#switch: {{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name}}}}}}} | #switch: {{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name|{{{1}}}}}}}}}} | ||
| Weapon = background-color: #FFF0D7; color: #151912; | | Weapon = background-color: #FFF0D7; color: #151912; | ||
| Vitality = background-color: #FFFFE7; color: #1C1E18; | | Vitality = background-color: #FFFFE7; color: #1C1E18; | ||
| Spirit = background-color: #FFEFD7; color: #131610; | | Spirit = background-color: #FFEFD7; color: #131610; | ||
| background-color: #FFF0D7; color: #151912;}}">{{Icon/Black|[[File:{{#invoke:ItemData|get_component_name|{{{item_name}}}}}.png|20px|link={{#invoke:ItemData|get_component_name|{{{item_name}}}}}]]}}</div></div> | | background-color: #FFF0D7; color: #151912;}}">{{Icon/Black|[[File:{{#invoke:ItemData|get_component_name|{{{item_name|{{{1}}}}}}}}.png|20px|link={{#invoke:ItemData|get_component_name|{{{item_name|{{{1}}}}}}}}]]}}</div></div> | ||
}} | }} | ||
|- style="text-align: center; height:60px; font-size: 14px; {{ | |- style="text-align: center; height:60px; font-size: 14px; {{ | ||
#switch: {{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name}}}}}}} | #switch: {{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name|{{{1}}}}}}}}}} | ||
| Weapon = background-color: #FFF0D7; color: #151912; | | Weapon = background-color: #FFF0D7; color: #151912; | ||
| Vitality = background-color: #FFFFE7; color: #1C1E18; | | Vitality = background-color: #FFFFE7; color: #1C1E18; | ||
| Spirit = background-color: #FFEFD7; color: #131610; | | Spirit = background-color: #FFEFD7; color: #131610; | ||
| background-color: #FFF0D7; color: #151912;}}" | | background-color: #FFF0D7; color: #151912;}}" | ||
! {{#if:{{{link|}}}|[[{{{link}}}|{{{item_name}}}]]|[[{{{item_name}}}]]}} | ! {{#if:{{{link|}}}|[[{{{link}}}|{{{item_name|{{{1}}}}}}]]|[[{{{item_name|{{{1}}}}}}]]}} | ||
|}</div></onlyinclude><noinclude>{{Documentation}}</noinclude> | |}</div></onlyinclude><noinclude>{{Documentation}}</noinclude> | ||
Revision as of 06:48, 24 September 2024
| [[File:{{{1}}}.png|50px|link={{{1}}}]]
[[File:Item Not Found..png|20px|link=Item Not Found.]] |
| [[{{{1}}}]] |
Usage
{{ItemBox}} renders a Deadlock shop item as a card: icon, tier art, and the item name auto-sized to fit. Pass an item name and everything else — tier, slot, tags, image — is pulled from Module:ItemData.
{{ItemBox|Extended Magazine}}
Parameters
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| itemName | itemName 1 | Item name; keys into Module:ItemData. Positional.
| String | required |
| size | size | Scales the whole card. 1 = default (80px wide), 1.5 = 150%, 0.75 = 75%.
| Number | optional |
| showTierTag | showTierTag | Set to true to show the tier corner badge.
| Boolean | optional |
| lowGraphics | lowGraphics | Set to true for pages that place many cards at once (the card navboxes). Swaps the paper texture to a cacheable overlay so scrolling stays smooth; the look is nearly identical.
| Boolean | optional |
| overrideDisplayName | overrideDisplayName | Replaces the name shown on the card.
| String | optional |
| overrideTier | overrideTier | Replaces the card's tier.
| Number | optional |
| overrideSlot | overrideSlot | Replaces the card's background (type).
| String | optional |
| overrideIsActive | overrideIsActive | Forces the ACTIVE tag on or off.
| Boolean | optional |
| overrideIsImbue | overrideIsImbue | Forces the IMBUE tag on or off.
| Boolean | optional |
| overrideLinkTooltip | overrideLinkTooltip | Page the hover tooltip reads its info from.
| String | optional |
| overrideLinkImage | overrideLinkImage | Page/file the icon image comes from.
| String | optional |
| overrideLinkClick | overrideLinkClick | Page the card links to when clicked.
| String | optional |
Examples
Basic
{{ItemBox|Close Quarters}}
{{ItemBox|Spirit Shredder Bullets}}
{{ItemBox|Silencer}}
{{ItemBox|Extra Health}}
{{ItemBox|Echo Shard}}
{{ItemBox|Celestial Blessing}}
| Close Quarters |
|---|
| Spirit Shredder Bullets |
|---|
| Silencer |
|---|
| Extra Health |
|---|
ACTIVE |
| Echo Shard |
ACTIVE |
| Celestial Blessing |
Tier tag
{{ItemBox|Extended Magazine|showTierTag = true}}
{{ItemBox|Berserker|showTierTag = true}}
{{ItemBox|Echo Shard|showTierTag = true}}
{{ItemBox|Celestial Blessing|showTierTag = true}}
| Berserker |
|---|
ACTIVE |
| Echo Shard |
ACTIVE |
| Celestial Blessing |
Size
{{ItemBox|Extended Magazine|size = 0.75}}
{{ItemBox|Extended Magazine}}
{{ItemBox|Extended Magazine|size = 1.5}}
Low graphics
For pages that place many cards at once. The paper texture becomes a single cacheable overlay so scrolling stays smooth; the look is nearly identical.
{{ItemBox|Extra Health}}
{{ItemBox|Kinetic Dash}}
{{ItemBox|Metal Skin}}
{{ItemBox|Echo Shard}}
{{ItemBox|Extra Health|lowGraphics = true}}
{{ItemBox|Kinetic Dash|lowGraphics = true}}
{{ItemBox|Metal Skin|lowGraphics = true}}
{{ItemBox|Echo Shard|lowGraphics = true}}
Normal
| Extra Health |
|---|
| Kinetic Dash |
|---|
ACTIVE |
| Metal Skin |
ACTIVE |
| Echo Shard |
Low graphics
| Extra Health |
|---|
| Kinetic Dash |
|---|
ACTIVE |
| Metal Skin |
ACTIVE |
| Echo Shard |
Overrides
{{ItemBox|High-Velocity Rounds|overrideDisplayName = Test Name}}
{{ItemBox|Intensifying Magazine|overrideTier = 4}}
{{ItemBox|Weakening Headshot|overrideSlot = Spirit}}
{{ItemBox|Recharging Rush|overrideIsActive = true}}
{{ItemBox|Alchemical Fire|overrideIsImbue = true}}
{{ItemBox|Bullet Lifesteal|overrideLinkClick = Heroes}}
| Intensifying Magazine |
|---|
| Weakening Headshot |
|---|
| Recharging Rush |
|---|
ACTIVE |
| Alchemical Fire |
| Bullet Lifesteal |
|---|
References
- Item data — Data:ItemData.json, read by Module:ItemData
- Name sizing and texture variety — Module:ItemBox
- Card styling — Template:ItemBox/styles.css