Template:Ability card v2/Card: Difference between revisions

From The Deadlock Wiki
Jump to navigation Jump to search
Browse history interactively
← Older editNewer edit →

Vergir (talk | contribs)

2 user groups
1,631 edits
undo
VisualWikitext
Vergir (talk | contribs)
Contributors, Interface administrators
1,631 edits
Move AbilityCardV2 template to use CSS-classes instead of inline styling. Ability card's look can now be customized.
Vergir (talk | contribs)
Contributors, Interface administrators
1,631 edits
m undo last, test something quick
Tag: Undo
Line 1: Line 1:
<includeonly><templatestyles src="Ability card v2/Card/styles.css" />{{anchor|{{{name}}}}}<div id="{{{id|}}}" class="ability-card">
<includeonly>{{anchor|{{{name}}}}}<div id="{{{id|}}}" class="ability-card" style="font-size: 0.9rem; line-height: 1.4; font-family: 'Retail Demo', 'Open Sans', 'PT Serif', serif; color: #FFEFD7; display:flex; flex-direction:column; background: #121013; align-items: center; width: 100%; max-width: 500px; border-radius: 13px 13px 4px 4px">


   <!-- HEADER -->
   <!-- HEADER -->
   <div class="ac-header-wrapper">
   <div style="width: 100%">
     <div class="ac-header">     
     <div style="display:flex; flex-direction:row; justify-content: space-between; background: #121013; font-size: calc(1em - 2px); border-radius: 13px 13px 0 0; padding: 0 8px 14px 8px">     
       <div class="ac-header-left">
       <div style="display:flex; flex-direction:column;">
         <div class="ac-title">
         <div style="font-size: 2rem;">
<span class="ac-icon">[[File:{{{icon}}}|45px|link=]]</span><span class="ac-name">{{#if:{{{name_link|}}}|[[{{{name_link}}}|{{{name}}}]]|{{uc:{{{name}}}}}}}</span>
<span style="filter: brightness(0) saturate(100%) invert(98%) sepia(19%) saturate(1458%) hue-rotate(301deg) brightness(102%) contrast(109%); padding: 0 5px 0 7px">[[File:{{{icon}}}|45px|link=]]</span><span style="font-family: 'Valve Occult','Retail Demo','Open Sans'; font-weight:bold">{{#if:{{{name_link|}}}|[[{{{name_link}}}|{{{name}}}]]|{{uc:{{{name}}}}}}}</span>
     </div>
     </div>
         <div class="ac-header-attrs">
         <div style="display:flex; flex-direction:row; margin-left: 10px; height: 40px">
           {{Ability_card_v2/Card/HeaderAttr|{{{channel_time|}}}|id=AbilityChannelTime|uom=s|ss={{{channel_time_ss|}}}|icon=[[File:AttributeIconMaxChargesIncrease.png|Channel Time|20px|link=]]}}
           {{Ability_card_v2/Card/HeaderAttr|{{{channel_time|}}}|id=AbilityChannelTime|uom=s|ss={{{channel_time_ss|}}}|icon=[[File:AttributeIconMaxChargesIncrease.png|Channel Time|20px|link=]]}}
           {{Ability_card_v2/Card/HeaderAttr|{{{range|}}}|id=AbilityCastRange|ss={{{range_ss|}}}|uom=m|icon=[[File:CastRange.png|Cast Range|20px|link=]]}}
           {{Ability_card_v2/Card/HeaderAttr|{{{range|}}}|id=AbilityCastRange|ss={{{range_ss|}}}|uom=m|icon=[[File:CastRange.png|Cast Range|20px|link=]]}}
Line 16: Line 16:
         </div>
         </div>
       </div>
       </div>
       <div class="ac-header-right">
       <div style="display:flex; flex-direction:column; align-items: end; justify-content: flex-end;">
         <div class="ac-charge-row">
         <div style="display:flex; flex-direction:row; justify-content: flex-end; margin-bottom: 5px; margin-right: 20px;">
           {{Ability_card_v2/Card/HeaderAttr|{{{num_of_charges|}}}|id=AbilityCharges|icon=[[File:AttributeIconMaxChargesIncrease.png|Number of Charges|20px|link=]]|style=margin-right: 0;}}
           {{Ability_card_v2/Card/HeaderAttr|{{{num_of_charges|}}}|id=AbilityCharges|icon=[[File:AttributeIconMaxChargesIncrease.png|Number of Charges|20px|link=]]|style=margin-right: 0;}}
           {{Ability_card_v2/Card/HeaderAttr|{{{charge_cooldown|}}}|id=AbilityCooldownBetweenCharge|ss={{{charge_cooldown_ss|}}}|uom=s|icon=[[File:AttributeIconTechCooldownBetweenChargeUses.png|Charge Cooldown|16px|link=]]|style=margin-left: 1px; margin-right: 0}}
           {{Ability_card_v2/Card/HeaderAttr|{{{charge_cooldown|}}}|id=AbilityCooldownBetweenCharge|ss={{{charge_cooldown_ss|}}}|uom=s|icon=[[File:AttributeIconTechCooldownBetweenChargeUses.png|Charge Cooldown|16px|link=]]|style=margin-left: 1px; margin-right: 0}}
Line 27: Line 27:
    
    
<!-- INFO SECTIONS -->
<!-- INFO SECTIONS -->
<div class="ac-info-outer">
<div style="margin: 5px 10px 0px 10px; padding: 3px 0 5px 0; width: calc(100% - 18px); box-sizing: border-box;">
   <!-- Info Section #1 -->
   <!-- Info Section #1 -->
   <div id="ability-info1" class="ability-info ac-info-section {{#ifeq:{{{hide_info1|}}}|true|hide}}">
   <div id="ability-info1" class="ability-info {{#ifeq:{{{hide_info1|}}}|true|hide}}" style="display:flex; flex-direction:column; align-items: center; width: 100%">
     <div class="ac-info-desc">{{{info1_desc|}}}</div>
     <div style="padding: 0 10px 0 10px">{{{info1_desc|}}}</div>
       <!-- Main Info -->
       <!-- Main Info -->
       <div class="ac-info-main">
       <div style="display:flex; flex-direction:row; flex-wrap: wrap; justify-content: center; width: calc(97% - 5px); min-width: 280px;">
         {{{info1_mainbox1|}}}{{{info1_mainbox2|}}}{{{info1_mainbox3|}}}{{{info1_mainbox4|}}}{{{info1_mainbox5|}}}
         {{{info1_mainbox1|}}}{{{info1_mainbox2|}}}{{{info1_mainbox3|}}}{{{info1_mainbox4|}}}{{{info1_mainbox5|}}}
       </div>
       </div>


       <!-- Alt Info -->
       <!-- Alt Info -->
       <div class="ac-info-alt">
       <div style="display:flex; flex-direction:row; flex-wrap: wrap; justify-content: center; align-items: center; background-color: #2A2A2A; width: calc(97% - 19px); min-width: 267px; padding: 0 4px 0 4px; column-gap: 15px">
         {{{info1_altbox1|}}}{{{info1_altbox2|}}}{{{info1_altbox3|}}}{{{info1_altbox4|}}}{{{info1_altbox5|}}}{{{info1_altbox6|}}}{{{info1_altbox7|}}}
         {{{info1_altbox1|}}}{{{info1_altbox2|}}}{{{info1_altbox3|}}}{{{info1_altbox4|}}}{{{info1_altbox5|}}}{{{info1_altbox6|}}}{{{info1_altbox7|}}}
       </div>
       </div>
Line 43: Line 43:
    
    
   <!-- Info Section #2 -->
   <!-- Info Section #2 -->
   <div id="ability-info2" class="ability-info ac-info-section ac-info-section--padded {{#ifeq:{{{hide_info2|}}}|true|hide}}">
   <div id="ability-info2" class="ability-info {{#ifeq:{{{hide_info2|}}}|true|hide}}" style="display:flex; flex-direction:column; align-items: center; width: 100%; padding-top: 8px">
     <div class="ac-info-desc">{{{info2_desc|}}}</div>
     <div style="padding: 0 10px 0 10px">{{{info2_desc|}}}</div>
       <!-- Main Info -->
       <!-- Main Info -->
       <div class="ac-info-main">
       <div style="display:flex; flex-direction:row; flex-wrap: wrap; justify-content: center; width: calc(97% - 5px); min-width: 280px;">
         {{{info2_mainbox1|}}}{{{info2_mainbox2|}}}{{{info2_mainbox3|}}}{{{info2_mainbox4|}}}{{{info2_mainbox5|}}}
         {{{info2_mainbox1|}}}{{{info2_mainbox2|}}}{{{info2_mainbox3|}}}{{{info2_mainbox4|}}}{{{info2_mainbox5|}}}
       </div>
       </div>
    
    
       <!-- Alt Info -->
       <!-- Alt Info -->
       <div class="ac-info-alt">
       <div style="display:flex; flex-direction:row; flex-wrap: wrap; justify-content: center; align-items: center; background-color: #2A2A2A; width: calc(97% - 19px); min-width: 267px; padding: 0 4px 0 4px; column-gap: 15px">
         {{{info2_altbox1|}}}{{{info2_altbox2|}}}{{{info2_altbox3|}}}{{{info2_altbox4|}}}{{{info2_altbox5|}}}{{{info2_altbox6|}}}{{{info2_altbox7|}}}
         {{{info2_altbox1|}}}{{{info2_altbox2|}}}{{{info2_altbox3|}}}{{{info2_altbox4|}}}{{{info2_altbox5|}}}{{{info2_altbox6|}}}{{{info2_altbox7|}}}
       </div>
       </div>
Line 57: Line 57:
    
    
     <!-- Info Section #3 -->
     <!-- Info Section #3 -->
   <div id="ability-info3" class="ability-info ac-info-section ac-info-section--padded {{#ifeq:{{{hide_info3|}}}|true|hide}}">
   <div id="ability-info3" class="ability-info {{#ifeq:{{{hide_info3|}}}|true|hide}}" style="display:flex; flex-direction:column; align-items: center; width: 100%; padding-top: 8px">
     <div class="ac-info-desc">{{{info3_desc|}}}</div>
     <div style="padding: 0 10px 0 10px">{{{info3_desc|}}}</div>
       <!-- Main Info -->
       <!-- Main Info -->
       <div class="ac-info-main">
       <div style="display:flex; flex-direction:row; flex-wrap: wrap; justify-content: center; width: calc(97% - 5px); min-width: 280px;">
         {{{info3_mainbox1|}}}{{{info3_mainbox2|}}}{{{info3_mainbox3|}}}{{{info3_mainbox4|}}}{{{info3_mainbox5|}}}
         {{{info3_mainbox1|}}}{{{info3_mainbox2|}}}{{{info3_mainbox3|}}}{{{info3_mainbox4|}}}{{{info3_mainbox5|}}}
       </div>
       </div>
        
        
       <!-- Alt Info -->
       <!-- Alt Info -->
       <div class="ac-info-alt">
       <div style="display:flex; flex-direction:row; flex-wrap: wrap; justify-content: center; align-items: center; background-color: #2A2A2A; width: calc(97% - 19px); min-width: 267px; padding: 0 4px 0 4px; column-gap: 15px">
         {{{info3_altbox1|}}}{{{info3_altbox2|}}}{{{info3_altbox3|}}}{{{info3_altbox4|}}}{{{info3_altbox5|}}}{{{info3_altbox6|}}}{{{info3_altbox7|}}}
         {{{info3_altbox1|}}}{{{info3_altbox2|}}}{{{info3_altbox3|}}}{{{info3_altbox4|}}}{{{info3_altbox5|}}}{{{info3_altbox6|}}}{{{info3_altbox7|}}}
       </div>
       </div>
Line 72: Line 72:


   <!-- UPGRADES -->
   <!-- UPGRADES -->
   <div class="ac-upgrades">
   <div style="display:flex; flex-direction:row; flex-wrap: wrap; margin-bottom: 5px; justify-content: center; width: calc(97% - 16px); min-width: 280px;">
     {{{upgrade1}}}{{{upgrade2}}}{{{upgrade3}}}
     {{{upgrade1}}}{{{upgrade2}}}{{{upgrade3}}}
   </div>
   </div>
Line 78: Line 78:
   <!-- NOTES -->
   <!-- NOTES -->
   {{#if: {{{notes|}}}|
   {{#if: {{{notes|}}}|
   <div class="ac-notes-wrapper">
   <div style="align-self: flex-start; margin: 10px 0 10px 20px; font-size: 0.8rem;">
     <div><span class="ac-notes-title"> {{#if: {{{name_link|}}}|
     <div><span style="font-size:1.15rem;"> {{#if: {{{name_link|}}}|
     {{#vardefine:notes_localized|{{#invoke:Dictionary|translate|Notes|show_needs_translation=false}}}}
     {{#vardefine:notes_localized|{{#invoke:Dictionary|translate|Notes|show_needs_translation=false}}}}
[[{{{name_link}}}/{{#var:notes_localized}}|{{#var:notes_localized}}]]  
[[{{{name_link}}}/{{#var:notes_localized}}|{{#var:notes_localized}}]]  
Line 86: Line 86:
}}</span>
}}</span>
{{#if:{{{notes_source_page|}}}
{{#if:{{{notes_source_page|}}}
|  <span class="ac-notes-edit">[[{{{notes_source_page}}}|{{#invoke:Dictionary|translate|edit}}]]</span>}}</div>
|  <span style="font-size:.7rem;">[[{{{notes_source_page}}}|{{#invoke:Dictionary|translate|edit}}]]</span>}}</div>
</div>
</div>
<div class="mw-collapsible mw-collapsed ac-notes-body">
<div class="mw-collapsible mw-collapsed" style="align-self: flex-start; margin: 10px 0 10px 20px; font-size: 0.8rem;">
<div>
<div>
{{{notes}}}
{{{notes}}}

Revision as of 14:29, 2 May 2026

SEISMIC IMPACT






Number of Charges 0


Cooldown 215s
Leap high into the air before crashing into the ground, dealing spirit damage and applying stun.


Unstoppable
0s
Immunity Duration

x2.33


100

Damage
On Hit:



Stun
1.6s
Stun Duration
On Hero Hit:

0

Max Health
On Hero Hit:

0%

Fire Rate
On Hero Hit:

0s

Buff Duration
Ability Point1
-30s Cooldown
Ability Point2
0.8s Stun Duration
Ability Point5
On cast, become Unstoppable for 6s and +6m Impact Radius
Template documentation [view] [edit] [history] [purge]
CSS3 logo.svg
This template uses CSS found at Ability card v2/Card/styles.css.

Overview

This template is designed to be used via Template:AbilitySection, Template:Ability tabs and Template:Ability_card_v2. In cases where the ability data is not available, we can instead use this template to build the ability card more manually.

This template allows building the ability card manually. Many arguments are templates, so refer to Template:Ability card v2/Card/HeaderAttr, Template:Ability card v2/Card/Info section,Template:Ability card v2/Card/MainBox, Template:Ability card v2/Card/AltBox, Template:Ability card v2/Card/UpgradeBox and Template:Ability card v2/Card/Scaling for their specific documentation.

The ability upgrade buttons are handled by MediaWiki:Gadget-ability-upgrades.js.

Examples

SOME ABILITY


Cast Range 99m
Radius 99m


Duration 99s
Number of Charges 99
Charge Cooldown 99s
Cooldown 99s
This ability does something


50

Damage Per Second


99

Health Regen

10%  Move Speed

22.5%  Fire Rate Bonus

100  Positive Vibes

Ability Point1
An upgrade

x0.123

Ability Point2
An upgrade

x0.123

Ability Point5
An upgrade

x0.123 

Eg. 
{{Ability card v2/Card
  | name=Some Ability
  | icon=Catalyst.png
  | range=99
  | radius=99
  | duration=99
  | num_of_charges=99
  | charge_cooldown=99
  | cooldown=99
  | duration=99
  
  | info1_desc=This ability does something
  | info1_mainbox1=
    {{Template:Ability card v2/Card/MainBox
      | value=50 
      | key=DPS
      | type=tech_damage
      | icon_color=Purple
    }}
  | info1_mainbox2=
    {{Template:Ability card v2/Card/MainBox
      | value=99 
      | key=HealthRegen
      | type=healing  
    }}
    
  | info1_altbox1=
    {{Template:Ability card v2/Card/AltBox
      | value=10 
      | key=BonusMoveSpeedPercent
      | type=move_speed 
    }}
  
  | info1_altbox2=
    {{Template:Ability card v2/Card/AltBox
      | value=22.5 
      | key=FireRateBonus
      | type=fire_rate  
    }}
    
  | info1_altbox3=
    {{Template:Ability card v2/Card/AltBox
      | value=100 
      | label=Positive Vibes
    }}
    
   | upgrade1=
    {{Template:Ability card v2/Card/UpgradeBox
      | cost = 1
      | description = An upgrade
      | scale_value = 0.123
      | scale_type =  spirit
    }}
    
   | upgrade2=
    {{Template:Ability card v2/Card/UpgradeBox
      | cost = 2
      | description = An upgrade
      | scale_value = 0.123
      | scale_type =  spirit
    }}
    
   | upgrade3=
    {{Template:Ability card v2/Card/UpgradeBox
      | cost = 5
      | description = An upgrade
      | scale_value = 0.123
      | scale_type =  spirit
    }}
}}

bleh

Template parameters[Edit template data]

ParameterDescriptionTypeStatus
Barbed Wire WallBarbed Wire Wall

Name of the ability

Stringrequired
iconicon

Icon file name of the ability

Example
Catalyst.png
Stringrequired
rangerange

Cast range of ability

Numberoptional
range_ssrange_ss

Range spirit scale multiplier

Numberoptional
radiusradius

Radius of ability's effect

Numberoptional
radius_ssradius_ss

Radius spirit scale multiplier

Numberoptional
durationduration

Duration of ability's effect

Numberoptional
duration_ssduration_ss

Duration spirit scale multiplier

Numberoptional
num_of_chargesnum_of_charges

Total number of charges

Numberoptional
charge_cooldowncharge_cooldown

no description

Example
Cooldown of ability after a charge is used
Numberoptional
charge_cooldown_sscharge_cooldown_ss

Charge cooldown spirit scale multiplier

Numberoptional
cooldowncooldown

Cooldown of ability

Numberoptional
cooldown_sscooldown_ss

Cooldown spirit scale multiplier

Numberoptional
info1_descinfo1_desc

Description for Infobox #1

Stringoptional
info1_mainbox1info1_mainbox1

Mainbox #1 for Infobox #1

Example
{{Ability card v2/Card/MainBox ...}}
Templateoptional
info1_mainbox2info1_mainbox2

Mainbox #2 for Infobox #1

Example
{{Ability card v2/Card/MainBox ...}}
Templateoptional
info1_mainbox3info1_mainbox3

Mainbox #3 for Infobox #1

Example
{{Ability card v2/Card/MainBox ...}}
Templateoptional
info1_altbox1info1_altbox1

Altbox #1 for Infobox #1

Example
{{Ability card v2/Card/AltBox ...}}
Templateoptional
info1_altbox2info1_altbox2

Altbox #2 for Infobox #1

Example
{{Ability card v2/Card/AltBox ...}}
Templateoptional
info1_altbox3info1_altbox3

Altbox #3 for Infobox #1

Example
{{Ability card v2/Card/AltBox ...}}
Templateoptional
info1_altbox4info1_altbox4

Altbox #4 for Infobox #1

Example
{{Ability card v2/Card/AltBox ...}}
Templateoptional
info1_altbox5info1_altbox5

Altbox #5 for Infobox #1

Example
{{Ability card v2/Card/AltBox ...}}
Templateoptional
info1_altbox6info1_altbox6

Altbox #6 for Infobox #1

Example
{{Ability card v2/Card/AltBox ...}}
Templateoptional
info2_descinfo2_desc

Description for Infobox #2

Stringoptional
info2_mainbox1info2_mainbox1

Mainbox #1 for Infobox #2

Example
{{Ability card v2/Card/MainBox ...}}
Templateoptional
info2_mainbox2info2_mainbox2

Mainbox #2 for Infobox #2

Example
{{Ability card v2/Card/MainBox ...}}
Templateoptional
info2_mainbox3info2_mainbox3

Mainbox #3 for Infobox #2

Example
{{Ability card v2/Card/MainBox ...}}
Templateoptional
info2_altbox1info2_altbox1

Altbox #1 for Infobox #2

Example
{{Ability card v2/Card/AltBox ...}}
Templateoptional
info2_altbox2info2_altbox2

Altbox #2 for Infobox #2

Example
{{Ability card v2/Card/AltBox ...}}
Templateoptional
info2_altbox3info2_altbox3

Altbox #3 for Infobox #2

Example
{{Ability card v2/Card/AltBox ...}}
Templateoptional
info2_altbox4info2_altbox4

Altbox #4 for Infobox #2

Example
{{Ability card v2/Card/AltBox ...}}
Templateoptional
info2_altbox5info2_altbox5

Altbox #5 for Infobox #2

Example
{{Ability card v2/Card/AltBox ...}}
Templateoptional
info2_altbox6info2_altbox6

Altbox #6 for Infobox #2

Example
{{Ability card v2/Card/AltBox ...}}
Templateoptional
info3_descinfo3_desc

Description for Infobox #3

Stringoptional
info3_mainbox1info3_mainbox1

Mainbox #1 for Infobox #3

Example
{{Ability card v2/Card/MainBox ...}}
Templateoptional
info3_mainbox2info3_mainbox2

Mainbox #2 for Infobox #3

Example
{{Ability card v2/Card/MainBox ...}}
Templateoptional
info3_mainbox3info3_mainbox3

Mainbox #3 for Infobox #3

Example
{{Ability card v2/Card/MainBox ...}}
Templateoptional
info3_altbox1info3_altbox1

Altbox #1 for Infobox #3

Example
{{Ability card v2/Card/AltBox ...}}
Templateoptional
info3_altbox2info3_altbox2

Altbox #2 for Infobox #3

Example
{{Ability card v2/Card/AltBox ...}}
Templateoptional
info3_altbox3info3_altbox3

Altbox #3 for Infobox #3

Example
{{Ability card v2/Card/AltBox ...}}
Templateoptional
info3_altbox5info3_altbox5

Altbox #5 for Infobox #3

Example
{{Ability card v2/Card/AltBox ...}}
Templateoptional
info3_altbox6info3_altbox6

Altbox #6 for Infobox #3

Example
{{Ability card v2/Card/AltBox ...}}
Templateoptional
upgrade1upgrade1

Upgrade box #1

Example
{{Ability card v2/Card/UpgradeBox ...}}
Templaterequired
upgrade2upgrade2

Upgrade box #2

Example
{{Ability card v2/Card/UpgradeBox ...}}
Templaterequired
upgrade3upgrade3

Upgrade box #3

Example
{{Ability card v2/Card/UpgradeBox ...}}
Templaterequired
notesnotes

User-defined notes to display in the footer

Stringoptional


Retrieved from "https://deadlock.wiki/Template:Ability_card_v2/Card?oldid=67596"