diff --git a/doc/type/choice-render-style-both.png b/doc/type/choice-render-style-both.png new file mode 100644 index 00000000..02b3b54f Binary files /dev/null and b/doc/type/choice-render-style-both.png differ diff --git a/doc/type/choice-render-style-checklist-both.png b/doc/type/choice-render-style-checklist-both.png new file mode 100644 index 00000000..5506a0f2 Binary files /dev/null and b/doc/type/choice-render-style-checklist-both.png differ diff --git a/doc/type/choice-render-style-checklist-image.png b/doc/type/choice-render-style-checklist-image.png new file mode 100644 index 00000000..5045e2e1 Binary files /dev/null and b/doc/type/choice-render-style-checklist-image.png differ diff --git a/doc/type/choice-render-style-checklist-text.png b/doc/type/choice-render-style-checklist-text.png new file mode 100644 index 00000000..0e40d153 Binary files /dev/null and b/doc/type/choice-render-style-checklist-text.png differ diff --git a/doc/type/choice-render-style-hidden.png b/doc/type/choice-render-style-hidden.png new file mode 100644 index 00000000..d0dbf443 Binary files /dev/null and b/doc/type/choice-render-style-hidden.png differ diff --git a/doc/type/choice-render-style-image.png b/doc/type/choice-render-style-image.png new file mode 100644 index 00000000..8250a40c Binary files /dev/null and b/doc/type/choice-render-style-image.png differ diff --git a/doc/type/choice-render-style-list-both.png b/doc/type/choice-render-style-list-both.png new file mode 100644 index 00000000..031b03ce Binary files /dev/null and b/doc/type/choice-render-style-list-both.png differ diff --git a/doc/type/choice-render-style-list-image.png b/doc/type/choice-render-style-list-image.png new file mode 100644 index 00000000..b71b1eae Binary files /dev/null and b/doc/type/choice-render-style-list-image.png differ diff --git a/doc/type/choice-render-style-list-text.png b/doc/type/choice-render-style-list-text.png new file mode 100644 index 00000000..0aa759f5 Binary files /dev/null and b/doc/type/choice-render-style-list-text.png differ diff --git a/doc/type/choice-render-style-text.png b/doc/type/choice-render-style-text.png new file mode 100644 index 00000000..05382aef Binary files /dev/null and b/doc/type/choice-render-style-text.png differ diff --git a/doc/type/choice_render_style.txt b/doc/type/choice_render_style.txt new file mode 100644 index 00000000..6a0e174b --- /dev/null +++ b/doc/type/choice_render_style.txt @@ -0,0 +1,31 @@ +Enumeration: render style + +A way to render a choice [[type:field]], see [[type:style]]. + +--Possible values-- +! Value Sketch Description +| @text@ + Rendered as text +| @image@ + Rendered as an image +| @both@ + Both an image and text +| @hidden@ + The box is hidden, but the value can still be edited. +| @image hidden@ + The box is hidden, but the value can still be edited. +| @checklist@ + A list of checkboxes, for multiple choice styles. +| @image checklist@ + A list of checkboxes with images instead of text. +| @both checklist@ + A list of checkboxes with both images and text. +| @text list@ + A list of the selected items, for multiple choice styles. +| @image list@ + A list of the selected items with images instead of text. +| @both list@ + A list of the selected items with both images and text. + +--Examples-- +> render style: image diff --git a/doc/type/field.txt b/doc/type/field.txt index 3acaf5e7..3efc93a6 100644 --- a/doc/type/field.txt +++ b/doc/type/field.txt @@ -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. The @type@ determines what values of this field contain: -! Type Values contain -| @text@ Text with markup (a [[type:tagged string]]) -| @choice@ A choice from a list -| @multiple choice@ Zero or more choices from a list -| @boolean@ @yes@ or @no@ -| @image@ Any image -| @symbol@ A [[type:symbol]] edited with the symbol editor -| @info@ An informational message, for example to group fields together. +! Type Values contain Displayed as +| @text@ Text with markup (a [[type:tagged string]]) Text +| @choice@ A choice from a list Text or an image +| @multiple choice@ Zero or more choices from a list A single image or multiple images +| @boolean@ @yes@ or @no@ Text or an image or both +| @color@ Any color or a restricted selection from a list A box filled with the color +| @image@ Any image The image +| @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: diff --git a/doc/type/script.txt b/doc/type/script.txt index e69de29b..171605a5 100644 --- a/doc/type/script.txt +++ b/doc/type/script.txt @@ -0,0 +1,19 @@ +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 diff --git a/doc/type/scriptable.txt b/doc/type/scriptable.txt index e69de29b..b0f4e973 100644 --- a/doc/type/scriptable.txt +++ b/doc/type/scriptable.txt @@ -0,0 +1,34 @@ +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 diff --git a/doc/type/style-angle.png b/doc/type/style-angle.png new file mode 100644 index 00000000..b8abd76c Binary files /dev/null and b/doc/type/style-angle.png differ diff --git a/doc/type/style-positioning.png b/doc/type/style-positioning.png new file mode 100644 index 00000000..46219974 Binary files /dev/null and b/doc/type/style-positioning.png differ diff --git a/doc/type/style-text-mask.png b/doc/type/style-text-mask.png new file mode 100644 index 00000000..50b5d726 Binary files /dev/null and b/doc/type/style-text-mask.png differ diff --git a/doc/type/style.txt b/doc/type/style.txt index e69de29b..d11d8aa4 100644 --- a/doc/type/style.txt +++ b/doc/type/style.txt @@ -0,0 +1,128 @@ +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-- + + +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:
+ + +--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?
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]] ∞ Minimal padding around the field.
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.
+ 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 @"\n"@ tags. +| ^^^ @mask@ [[type:filename]] ''none'' A mask that indicates where in the box text can be placed.
+ Text is never put in black areas of the box:
+ +| ^^^ @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.
+ @"drop down"@ places the box below the field, similair to normal combo boxes.
+ @"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@).
+ 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.
+ 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]] ∞ 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-- + diff --git a/doc/type/symbol_filter.txt b/doc/type/symbol_filter.txt deleted file mode 100644 index e69de29b..00000000 diff --git a/doc/type/symbol_variation.txt b/doc/type/symbol_variation.txt index e69de29b..cc237af6 100644 --- a/doc/type/symbol_variation.txt +++ b/doc/type/symbol_variation.txt @@ -0,0 +1,46 @@ +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)