Skip to content

M
magicseteditor
Commit 74ded82e authored by twanvl's avatar twanvl
Browse files
Options

Documented style type

parent 2dc75137
Hide whitespace changes
Inline Side-by-side
Showing with 267 additions and 8 deletions
doc/type/choice_render_style.txt 0 → 100644
View file @ 74ded82e
Enumeration: render style
A way to render a choice [[type:field]], see [[type:style]].
--Possible values--
! Value Sketch Description
| @text@ <img src="choice-render-style-text.png" alt=""/>
Rendered as text
| @image@ <img src="choice-render-style-image.png" alt=""/>
Rendered as an image
| @both@ <img src="choice-render-style-both.png" alt=""/>
Both an image and text
| @hidden@ <img src="choice-render-style-hidden.png" alt=""/>
The box is hidden, but the value can still be edited.
| @image hidden@ <img src="choice-render-style-hidden.png" alt=""/>
The box is hidden, but the value can still be edited.
| @checklist@ <img src="choice-render-style-checklist-text.png" alt=""/>
A list of checkboxes, for multiple choice styles.
| @image checklist@ <img src="choice-render-style-checklist-image.png" alt=""/>
A list of checkboxes with images instead of text.
| @both checklist@ <img src="choice-render-style-checklist-both.png" alt=""/>
A list of checkboxes with both images and text.
| @text list@ <img src="choice-render-style-list-text.png" alt=""/>
A list of the selected items, for multiple choice styles.
| @image list@ <img src="choice-render-style-list-image.png" alt=""/>
A list of the selected items with images instead of text.
| @both list@ <img src="choice-render-style-list-both.png" alt=""/>
A list of the selected items with both images and text.
--Examples--
> render style: image
doc/type/field.txt
View file @ 74ded82e
...@@ -43,14 +43,15 @@ Fields are part of the [[file:style triangle]]: ...@@ -43,14 +43,15 @@ Fields are part of the [[file:style triangle]]:
| @tab index@ [[type:int]] @0@ Index for moving through the fields with the tab key. The default is from left to right and then top to bottom. | @tab index@ [[type:int]] @0@ Index for moving through the fields with the tab key. The default is from left to right and then top to bottom.
The @type@ determines what values of this field contain: The @type@ determines what values of this field contain:
! Type Values contain ! Type Values contain Displayed as
| @text@ Text with markup (a [[type:tagged string]]) | @text@ Text with markup (a [[type:tagged string]]) Text
| @choice@ A choice from a list | @choice@ A choice from a list Text or an image
| @multiple choice@ Zero or more choices from a list | @multiple choice@ Zero or more choices from a list A single image or multiple images
| @boolean@ @yes@ or @no@ | @boolean@ @yes@ or @no@ Text or an image or both
| @image@ Any image | @color@ Any color or a restricted selection from a list A box filled with the color
| @symbol@ A [[type:symbol]] edited with the symbol editor | @image@ Any image The image
| @info@ An informational message, for example to group fields together. | @symbol@ A [[type:symbol]] edited with the symbol editor The image
| @info@ An informational message, for example to group fields together. A box containing the label
Additional properties are available, depending on the type of field: Additional properties are available, depending on the type of field:
......
doc/type/script.txt
View file @ 74ded82e
Data type: script
--Overview--
A script object is a piece of code written in the [[script:index|MSE scripting language]].
--File syntax--
A script is given in the same way as a [[type:string]].
--Example--
A simple [[type:field]] script that converts everything to upper case:
>script: to_upper(value)
A larger script, changes @"y"@s to @"x"@s and @"a"@s to @"b"@s:
>script:
> new_value := replace(value, match: "x", replace: "y")
> new_value := replace(value, match: "a", replace: "b")
> new_value
doc/type/scriptable.txt
View file @ 74ded82e
Data type: scriptable
--Overview--
Many [[type:style]] properties are ''scriptable''; their value can be changed by a script.
Consider for example:
>left: 123
This defines that the left coordinate of a field is 123 pixels.
To script this you can write:
>left: { if card.name == "" then 100 else 123 }
Now the left position depends on whether or not the name is empty.
--File syntax--
A 'scriptable something' can take three forms:
# It can be a regular 'something'
>something: 123
# It can be a script that produces 'something', enclosed in curly braces:
>something: {100 + 23}
# It can be a script that produces 'something', indented and preceded by @script:@:
>something:
> script: 100 + 23
Note: To use a multiline script the following does not work:
>something: { 100 +
> 23 }
If the script has multiple lines, it must start on a new line, and be indented with a TAB:
>something:
> { 100 +
> 23 }
or
>something:
> script: 100 +
> 23
doc/type/style.txt
View file @ 74ded82e
Data type: style
--Overview--
A style specifies how a [[type:field]] should look,
things like position, size, fonts, colors, etc.
Styles are part of the [[file:style triangle]]:
| Description Looks Data
| [[type:Game]] [[type:Stylesheet]] [[type:Set]]
| [[type:Field]] '''Style''' [[type:Value]]
--Positioning--
<img src="style-positioning.png" alt="" style="float:right;border:1px solid #ccc;"/>
A style specifies the position of a box for the content.
To specify the horizontal location ''two'' of @left@, @width@ and @right@ must be specified.
For example:
> left: 10
> width: 20
Implies that @right@ is 30 pixels if the card is 60 pixels wide.
Similairly:
> left: 10
> right: 30
Implies the @width@ is 20.
The same holds for the vertical location and size; @top@, @height@ and @bottom@.
--Rotation--
Some types of styles allow an @angle@ to be specified.
The angle gives a counter clockwise rotation in degrees of the ''contents'' of the box.
For example, a text field with style:
>example:
> width: 60
> height: 40
> alignment: top left
Would, with different angles, look like:<br/>
<img src="style-angle.png" alt=""/>
--Properties--
! Property Type Default Description
| @z index@ [[type:int]] @0@ Stacking of this box, fields with a heigher @z index@ are placed on top of those with a lower index.
| @left@ [[type:scriptable]] [[type:double]] ''Required'' Distance between left edge of the box and the left of the card in pixels.
| @width@ [[type:scriptable]] [[type:double]] ''Required'' Width of the box in pixels.
| @right@ [[type:scriptable]] [[type:double]] ''Required'' Distance between right edge of the box and the right of the card in pixels.
| @top@ [[type:scriptable]] [[type:double]] ''Required'' Distance between top edge of the box and the top of the card in pixels.
| @height@ [[type:scriptable]] [[type:double]] ''Required'' Height of the box in pixels.
| @bottom@ [[type:scriptable]] [[type:double]] ''Required'' Distance between bottom edge of the box and the bottom of the card in pixels.
| @visible@ [[type:scriptable]] [[type:boolean]] @true@ Is this field visible at all?
The rest of the properties depend on the type of [[type:field]] this style is for.
! Type Property Type Default Description
| @"text"@ @font@ [[type:font]] ''Required'' Font to render the text.
| ^^^ @symbol font@ [[type:symbol font]] Font to render symbols in the text (optional).
| ^^^ @always symbol@ [[type:boolean]] @false@ Should all text be rendered with symbols?<br/>If set, @font@ is not needed.
| ^^^ @allow formating@ [[type:boolean]] @true@ Is custom formating (bold, italic) allowed?
| ^^^ @alignment@ [[type:scriptable]] [[type:alignment]] @top left@ Alignment of the text.
| ^^^ @angle@ [[type:scriptable]] [[type:int]] @0@ Rotation of the text inside the box, in degrees.
| ^^^ @direction@ [[type:direction]] @"left to right"@ Direction in which the text flows. If set to @"vertical"@ it is as if a line break is inserted after each character.
| ^^^ @padding left@ [[type:double]] @0@ Padding between the text and the border of the box, in pixels.
| ^^^ @padding right@ ^^^ ^^^ ^^^
| ^^^ @padding top@ ^^^ ^^^ ^^^
| ^^^ @padding bottom@ ^^^ ^^^ ^^^
| ^^^ @padding left min@ [[type:double]] &infin; Minimal padding around the field.<br/> When the text is scalled down the padding is scalled as well, but it becomes no smaller than this.
| ^^^ @padding right min@ ^^^ ^^^ ^^^
| ^^^ @padding top min@ ^^^ ^^^ ^^^
| ^^^ @padding bottom min@ ^^^ ^^^ ^^^
| ^^^ @line height soft@ [[type:double]] @1@ Multiplier for the line height of 'soft' line breaks. These are breaks caused by wrapping around lines that are too long.<br/>
A line height of @0@ means all lines are in the same position, @1@ is normal behaviour, @2@ skips a line, etc.
| ^^^ @line height hard@ [[type:double]] @1@ Multiplier for the line height of 'hard' line breaks. These are breaks caused by the enter key.
| ^^^ @line height line@ [[type:double]] @1@ Multiplier for the line height of 'soft' line breaks. These are breaks caused by @"<line>\n</line>"@ tags.
| ^^^ @mask@ [[type:filename]] ''none'' A mask that indicates where in the box text can be placed.<br/>
Text is never put in black areas of the box:<br/>
<img src="style-text-mask.png" alt=""/>
| ^^^ @content width@ [[type:double]] ''automatic'' When read from a script, gives the width of the current content in this box.
| ^^^ @content height@ [[type:double]] ''automatic'' When read from a script, gives the height of the current content in this box.
| ^^^ @content lines@ [[type:int]] ''automatic'' When read from a script, gives the number of lines of the current content in this box.
! <<< <<< <<< <<<
| @"choice"@, @"multiple choice"@, @"boolean"@
@popup style@ @"drop down"@ or @"in place"@ @"drop down"@ Where to place the drop down box for editing the value.<br/>
@"drop down"@ places the box below the field, similair to normal combo boxes.<br/>
@"in place"@ places the box at the mouse coordinates.
| ^^^ @render style@ [[type:choice render style]] @"text"@ How should the field be rendered?
| ^^^ @mask@ [[type:scriptable]] [[type:filename]] ''none'' A mask to apply to the image, black areas in the mask become transparent, similair to [[fun:set_mask]].
| ^^^ @combine@ [[type:combine]] @"normal"@ How to combine the image with the background? Can be overriden using the [[fun:set_combine]] function.
| ^^^ @alignment@ [[type:alignment]] Alignment of text and images in the box.
| ^^^ @angle@ [[type:int]] @0@ Rotation of the text and images inside the box, in degrees.
| ^^^ @font@ [[type:font]] Font to use for rendering text (depending on @render style@)
| ^^^ @image@ [[type:image|scriptable image]] Image to show (depending on @render style@).<br/>
The script will be called with @input@ set to the value to determine an image for.
| ^^^ @choice images@ [[type:map]] of [[type:image]]s An alternative way to specify what image to show.<br/>
For each [[type:choice]] a separate image is specified.
| @"multiple choice"@
@direction@ [[type:direction]] @"left to right"@ Direction the items are layed out in, only when @render style@ is @list@.
| ^^^ @spacing@ [[type:double]] @0@ Spacing between the items.
! <<< <<< <<< <<<
| @"color"@ @radius@ [[type:script]] @0@ Radius of rounded corners for the box in pixels.
| ^^^ @left width@ [[type:double]] &infin; Draw only this many pixels from the side, creating a box with a hole in it, or a card border.
| ^^^ @right width@ ^^^ ^^^ ^^^
| ^^^ @top width@ ^^^ ^^^ ^^^
| ^^^ @bottom width@ ^^^ ^^^ ^^^
| ^^^ @mask@ [[type:scriptable]] [[type:filename]] ''none'' A mask to apply to the box, black areas in the mask become transparent.
! <<< <<< <<< <<<
| @"image"@ @mask@ [[type:scriptable]] [[type:filename]] ''none'' A mask to apply to the image, black areas in the mask become transparent, similair to [[fun:set_mask]].
@default@ [[type:image|scriptable image]] ''none'' A default image to use when the card has none.
! <<< <<< <<< <<<
| @"symbol"@ @variations@ [[type:list]] of [[type:symbol variation]]s Available variations of the symbol, a variation describes color and border size.
| @min aspec ratio@ [[type:double]] @1@ Bounds for the aspect ratio, @width/height@ symbols can take. This can be used to make non-squary symbols.
| @max aspec ratio@ [[type:double]] @1@ ^^^
! <<< <<< <<< <<<
| @"info"@ @font@ [[type:font]] ''Required'' Font to render the text.
| ^^^ @alignment@ [[type:scriptable]] [[type:alignment]] @top left@ Alignment of the text.
| ^^^ @padding left@ [[type:double]] @0@ Padding between the text and the border of the box, in pixels.
| ^^^ @padding right@ ^^^ ^^^ ^^^
| ^^^ @padding top@ ^^^ ^^^ ^^^
| ^^^ @padding bottom@ ^^^ ^^^ ^^^
| ^^^ @background color@ [[type:color]] @rgb(255,255,255)@ Background color for the box, can be used to make it stand out.
--Example--
doc/type/symbol_variation.txt
View file @ 74ded82e
Data type: symbol variation
--Overview--
A variation of a symbol, describes color and border.
--Properties--
! Property Type Default Description
| @name@ [[type:string]] ''Required'' Name of this variation, refered to by the [[fun:symbol_variation]] function.
| @border radius@ [[type:double]] @0.05@ Border radius of the symbol.
| @fill type@ @solid@ or @linear gradient@ or @radial gradient@
@"solid"@ How to fill the symbol.
Depending on the @fill type@ there are additional properties:
! Fill type Property Type Description
| @"solid"@ @fill color@ [[type:color]] Color to use for filling the symbol.
| ^^^ @border color@ [[type:color]] Color to use for the border of the symbol.
| @"linear gradient"@ @fill color 1@ [[type:color]] Color to use for filling the symbol at the center of the gradient.
| ^^^ @border color 1@ [[type:color]] Color to use for the border of the symbol at the center of the gradient.
| ^^^ @fill color 2@ [[type:color]] Color to use for filling the symbol at the ends of the gradient.
| ^^^ @border color 2@ [[type:color]] Color to use for the border of the symbol at the ends of the gradient.
| ^^^ @center x@, @center y@ [[type:double]] Position of the center point of the gradient (in the range 0 to 1)
| ^^^ @end x@, @end y@ [[type:double]] Position of the end point of the gradient (in the range 0 to 1)
| @"radial gradient"@ @fill color 1@ [[type:color]] Color to use for filling the symbol at the center of the symbol.
| ^^^ @border color 1@ [[type:color]] Color to use for the border of the symbol at the center of the symbol.
| ^^^ @fill color 2@ [[type:color]] Color to use for filling the symbol at the edges of the symbol.
| ^^^ @border color 2@ [[type:color]] Color to use for the border of the symbol at the edges of the symbol.
--Examples--
'Common' and 'uncommon' magic expansion symbol styles:
>variation:
> name: common
> border radius: 0.10
> # White border, black fill
> fill type: solid
> fill color: rgb(0,0,0)
> border color: rgb(255,255,255)
>variation:
> name: uncommon
> border radius: 0.05
> fill type: linear gradient
> # Black border, silver gradient fill
> fill color 1: rgb(224,224,224)
> fill color 2: rgb(84, 84, 84)
> border color 1: rgb(0, 0, 0)
> border color 2: rgb(0, 0, 0)
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment