Card Creator

On this page, all commands and syntax for the Card Creator will be explained.

Syntax

Basic Actions

Syntax	Description	Example	Result
- attack: [value]	Creates an attack ability with a value of [value]	- attack: 3	3
- move: [value]	Creates a move ability with a value of [value]	- move: 3	3
- teleport: [value]	Creates a teleport ability with a value of [value]	- teleport: 3	3
- shield: [value]	Creates a shield ability with a value of [value]	- shield: 1	1
- retaliate: [value]	Creates a retaliate ability with a value of [value]	- retaliate: 1	1
- loot: [value]	Creates a loot ability with a value of [value]	- loot: 1	1
- heal: [value]	Creates a heal ability with a value of [value]	- heal: 1	1

Syntax

Description

Example

Result

- attack: [value]

Creates an attack ability with a value of [value]

- attack: 3

attack 3

- move: [value]

Creates a move ability with a value of [value]

- move: 3

move 3

- teleport: [value]

Creates a teleport ability with a value of [value]

- teleport: 3

teleport 3

- shield: [value]

Creates a shield ability with a value of [value]

- shield: 1

shield 1

- retaliate: [value]

Creates a retaliate ability with a value of [value]

- retaliate: 1

retaliate 1

- loot: [value]

Creates a loot ability with a value of [value]

- loot: 1

loot 1

- heal: [value]

Creates a heal ability with a value of [value]

- heal: 1

heal 1

Conditions

The [condition] can take any of the following values:

bane
bless
brittle
chill
curse
disarm
dodge
empower
enfeeble
immobilize
impair
infect
invisible
muddle
pierce
poison
pull
push
regenerate
rupture
safeguard
strengthen
stun
swing
ward
wound

Syntax	Description	Example	Result
- [condition] : [value]	Creates a [condition] with the value [value]. If [value] is omitted only [condition] is rendered	- poison - pierce: 1	1

Syntax

Description

Example

Result

- [condition] : [value]

Creates a [condition] with the value [value].
If [value] is omitted only [condition] is rendered

- poison
- pierce: 1

poison
pierce 1

Elements

The [element] in this section can take any of the following values:

earth
fire
air (or wind)
ice
light
dark
wild
any combination of elements separated by '/' will generate an or element

Syntax	Description	Example	Result
- [element]	Renders the icon for the element [element].	- earth
- [element]: consume	Renders the icon for the element [element] and adds a consume x. This is usually used within an optional block.	- earth: consume
infuse: [ [elements..] ]	This is a modifier of the actions block, and will create a mandatory box with the specified [elements..]-list. As a modifier, this does not use a '-' in front of it	infuse: [earth, wild]	[!]

Syntax

Description

Example

Result

- [element]

Renders the icon for the element [element].

- earth

earth

- [element]: consume

Renders the icon for the element [element] and adds a consume x. This is usually used within an optional block.

- earth: consume

earth consume

infuse: [ [elements..] ]

This is a modifier of the actions block, and will create a mandatory box with the specified [elements..]-list.

As a modifier, this does not use a '-' in front of it

infuse: [earth, wild]

[! earth wild ]

Styles

You can add modifieres to help with fineplacement, relocation, manipulating the element and much more. To use modifiers all blocks need to be an object, this means it needs a ':'' in the block. Single word blocks like - earth will need to add a ':' to use modifiers. - earth: '' Here is a list of styles each block can take:

Syntax Description Example Result

Syntax	Description	Example
margin	Adds a buffer space on all sides of an element. The first value is for spacing on top, then right, bottom and the last one is for spacing to the left.	`- earth: '' margin: 5px 0px 0px 0px`
margin[direction]	Adds a buffer space on the specified side of an element. [direction] can be either Top, Left, Right or Bottom	`- earth: '' marginTop: 5px`
padding	Include a buffer space on all sides of an element. the first value is for spacing on top, then right, and bottom and the last one is for spacing to the left.	`- earth: '' padding: 0px 0px 0px 0px`
padding[direction]	Include a buffer space on the specified side of an element. [direction] can be either Top, Left, Right or Bottom	`- earth: '' paddingTop: 5px`

margin

Adds a buffer space on all sides of an element. The first value is for spacing on top, then right, bottom and the last one is for spacing to the left.

- earth: ''
  margin: 5px 0px 0px 0px

margin[direction]

Adds a buffer space on the specified side of an element. [direction] can be either Top, Left, Right or Bottom

- earth: ''
  marginTop: 5px

padding

Include a buffer space on all sides of an element. the first value is for spacing on top, then right, and bottom and the last one is for spacing to the left.

- earth: ''
  padding: 0px 0px 0px 0px

padding[direction]

Include a buffer space on the specified side of an element. [direction] can be either Top, Left, Right or Bottom

- earth: ''
  paddingTop: 5px

An important difference between padding and margin is that padding extends the boundingbox of the element, while a margin moves the element by adding a space outside the element. Also, the margin can take negative values to make the element take less space than the boundingbox of the element.

Syntax Description Example Result

Syntax	Description	Example
fontSize	Change the fontSize of the text in the block modified. Icons tend to have a fixed size in different boxes and may not always be changed with this.	`- custom: 'Text' fontSize: 10px`
color	Changes the font color of the section, this will not impact icons.	`- custom: 'Text' color: red`
background	Changes the background of the block.	`- custom: 'Text' background: red`
lineHeight	Changes the space between lines to give either more space or make the text more compact. This is usful for adding icons into text where the lines would render different heights.	`- custom: 'Text to adjust lineheight, should have enought to atleast fill two lines.' lineHeight: 20px`
wordSpacing	Changes the space between words relative to the current spacing.	`- custom: 'Text to show wordSpacing' wordSpacing: 5px`

fontSize

Change the fontSize of the text in the block modified. Icons tend to have a fixed size in different boxes and may not always be changed with this.

- custom: 'Text'
  fontSize: 10px

color

Changes the font color of the section, this will not impact icons.

- custom: 'Text'
  color: red

background

Changes the background of the block.

- custom: 'Text'
  background: red

lineHeight

Changes the space between lines to give either more space or make the text more compact. This is usful for adding icons into text where the lines would render different heights.

- custom: 'Text to adjust lineheight, should have enought to atleast fill two lines.'
  lineHeight: 20px

wordSpacing

Changes the space between words relative to the current spacing.

- custom: 'Text to show wordSpacing'
  wordSpacing: 5px

Position

To change a blocks position or orientation or size use these:

Syntax Description Example Result

Syntax	Description	Example
position	To change a blocks position this must be set to either 'relative' or 'absolute'. relative: will change the position of the element based on its relative position to other elements rendered. absolute: will change the position of the element based on the parent elements position.	`- earth: '' position: relative`
top	Sets the value of its placement on the card either from its relative postion or from the top of the current action.	`- earth: '' position: relative top: 10px`
left	Sets the value of its placement on the card either from its relative postion or from the left side of the current action.	`- earth: '' position: absolute left: 10px`
transform	This modifier is more complex and takes a string as input as shown here: documentation css transform	`- earth: '' transform: rotate(90deg)`

position

To change a blocks position this must be set to either 'relative' or 'absolute'.

relative: will change the position of the element based on its relative position to other elements rendered.

absolute: will change the position of the element based on the parent elements position.

- earth: ''
  position: relative

top

Sets the value of its placement on the card either from its relative postion or from the top of the current action.

- earth: ''
  position: relative
  top: 10px

left

Sets the value of its placement on the card either from its relative postion or from the left side of the current action.

- earth: ''
  position: absolute
  left: 10px

transform

This modifier is more complex and takes a string as input as shown here: documentation css transform

- earth: ''
  transform: rotate(90deg)

Special blocks

This section is for explaning different special code blocks.

Tokens

Syntax Description Example Result

Syntax	Description	Example	Result
- tokens	This block creates token slots. It takes an array of numbers as input, where each number is how much xp that token slot gives.	`- tokens: [0,1,0,1]`

- tokens

This block creates token slots. It takes an array of numbers as input, where each number is how much xp that token slot gives.

- tokens: [0,1,0,1]

Token modifiers

Syntax Description Example Result

Syntax	Description	Example	Result
lines	This is a special modifier for tokens block. Forcing either 3 or 4 tokens to render on 1 or 2 lines. The others are predefined. (1 and 2 tokens on 1 line and 5 and 6 tokens on 2 lines.)	`- tokens: [0,1,0,1] lines: 1`

lines

This is a special modifier for tokens block. Forcing either 3 or 4 tokens to render on 1 or 2 lines. The others are predefined. (1 and 2 tokens on 1 line and 5 and 6 tokens on 2 lines.)

- tokens: [0,1,0,1]
  lines: 1