Add new pages and headers (#27)

documentation/SUMMARY.md

@@ -5,6 +5,8 @@
 
 - [Character & Portraits](characters-and-portraits.md)
 - [Styles & Layouts](styles-and-layouts.md)
+- [Variables](variables.md)
+- [Timeline Text Syntax](timeline-text-syntax.md)
 - [Dialogic Nodes](dialogic-nodes.md)
 - [Dialogic Signals](dialogic-signals.md)
 - [Custom Portraits](custom-portraits.md)

documentation/styles-and-layouts.md

@@ -1,54 +1,79 @@
+![header_text_syntax](media/headers/styles_and_layouts.png)
 # Styles & Layouts
 
-![header_style-editor](/media/headers/styles_and_layouts.png)
+## Introduction
 
-## 📜 Content
+One important aspect of dialogic is how it allows you to display your timelines. To achieve this there is a number of systems working together: Dialogic Nodes, Layout Scenes and Styles.
 
-- [1. Styles & Layouts](#1-styles--layouts)
-- [2. The style editor](#2-the-style-editor)
+**Dialogic Nodes** are nodes can be placed in any scene. These nodes will be activated by dialogic and do wildly different things, from displaying text, labels or choices to playing sounds or defining a clickable area.
 
-# 1. Styles & Layouts
+**Layout Scenes** are scenes that contain both Dialogic Nodes, other godot Control nodes and custom scripts and provide a standalone UI-part. For example there is a `VisualNovel Textbox Scene`, a `Glossary Popup Scene` or a `Centered Choices Scene`.
 
-- A **style** is a combination of a layout scene (preset or custom) and a set of settings.
-- A **layout** is a scene that can display dialog ingame.
+**Dialogic Styles** are a resource that holds a combination of layout scenes and allows applying settings to them. This is the easiest way of modifying the look of dialogic, as styles can be edited in dialogics Style editor.
 
-Dialogic comes with some **preset layouts**, but you can create your own using DialogicNodes. Learn more about [custom layouts here](/documentation/dialogic-nodes).
+## Working with styles
 
-![layout_presets](/media/layout_presets.png)
+[You can find a video walktrough of dialogic styles here.]([Dialogic 2 - New Style System - YouTube](https://www.youtube.com/watch?v=TLnzSzqBwu4))
 
-*You can add more presets with extensions. Feel free to share cool layouts you've made via the [discord](https://discord.gg/2hHQzkf2pX).*
+A style is made up of
 
-# 2. The style editor
+- One `Base` layout scene (of type DialogicLayoutBase) and settings for that scene.
 
-The style editor allows you to create and edit styles. By default you only have the `Default` style that uses the VisualNovel layout.
+- A list of `Layer` layout scenes (of type DialogicLayoutLayer) and settings for each layer.
 
-<img src="/media/style_editor.png" width="600"/>
+In the style editor you can
 
-### Style list
+- Add new styles (either starting empty or from a premade style)
 
-The style list section lets you:
+- Rename Styles
 
-- add new styles
-- duplicate styles
-- add a new style that inherits the current one
-- delete styles
-- mark the current style as default
+- Add/Replace/Remove layers (both premade scenes and custom scenes)
 
-### Changing the Layout
+- Set all kinds of settings on any of the scenes that are part of that style
 
-You can change the layout the current style uses by clicking `Change` next to the layout thumbnail. This will open a layout selection page:
+- Make one of the premade layers or a whole style custom
 
-<img src="/media/style_editor_layout_selection.png" width="600"/>
+- Make an inherited style from another style (inherits scenes and default settings)
 
-- Select Custom will allow you to select a scene from your project
-- Clicking a preset will show info about that preset and allow you to select it
+- Change the default style
 
-*If your style inherits from another style, the layout is determined by the "parent"-style and cannot be changed.*
+### Using styles in game
 
-### Inheritance
+You can switch between different styles with the `Change Style` event, by calling `Dialogic.Styles.load_style()` before calling `Dialogic.start()`, or by assigning a style to a character.
 
-You can set a style to inherit from another one. A style will inherit the layout and the settings from it's parent style.
+## Custom Styles & Layouts
 
-### Settings
+You can pretty much customize any or all parts of this "Displaying" part of dialogic.
 
-Layouts can expose settings to the editor. These can easily be changed for each style and allow customizing a style. The presets each come with different settings.
+### Custom styles
+
+The simplest is creating a custom style, combining different layers and changing their settings.
+
+### Custom Layout Scenes
+
+The next step would be to customize part of your layout (one of the scenes) beyond what's possible with the provided settings.
+
+An easy way to do this is to use the "Make Custom" button above the layer list and selecting "Current Layer". This will create a copy of that layers scene which you can edit in godot. This is what you would do if you generally like e.g. the textbox, but would like to change something about it that's impossible with just the settings.
+
+```
+```admonish info
+When editing a layout that's been made custom, be careful which sub-resources (e.g. scripts, fonts, images, etc.) might still be inside the addons/dialogic folder. If you modify these the changes might be lost when updating dialogic. I recommend making any sub-resource "unique" before modifying it. Some, like the scenes root-script however are usually made custom automatically when using "Make Custom".
+```
+
+```
+Alternatively you can start a custom layout scene from scratch. 
+
+- Your scene's root node has to have a script that extends from either `DialogicLayoutBase` or `DialogicLayoutLayer` depending on your use-case. 
+
+- In your scenes root script you can export variables which will appear as settings in dialogics style editor. Grouping them with @export_group and @export_subgroup makes it even nicer. Note that not all types are supported here. 
+
+- If you want to utilize dialogics style system then you should apply any @exported settings in a method called `_apply_export_overrides()` which is called whenever the style changes. 
+
+You can add your custom scene in very easily by either using `Add Layer` or `Replace Layer` above the layer list.
+
+### Custom nodes
+
+While dialogics modules usually expect the nodes that display them to be made in a certain way, that doesn't prevent you from actually customizing the nodes themselves. Each dialogic node is just a normal control node with a script attached to it. Usually dialogic nodes interact with dialogic subsystems through a group they add themselves to.
+
+Note that in most cases reacting to some of dialogic signals (or signals of existing dialogic nodes) can be way easier then creating a custom version of a dialogic node.
+```

documentation/timeline-text-syntax.md

@@ -0,0 +1,124 @@
+![header_text_syntax](media/headers/text_syntax.png)
+
+Timelines are saved in a text format, which means that you can use any text-editing software to edit and create them. The built in text editor provides useful autocompletion and syntax highlighting.
+📜 
+*Info: For dialogic to register your timeline file, it has to use the `.dtl` extension!*
+
+<details open>
+<summary>📜 Content</summary>
+
+- [About shortcode events](#about-shortcode-events)
+
+- [About special events](#about-special-events)
+
+- [About Indentation](#about-indentation)
+
+- [Example Timeline](#Example-timeline)
+
+  </details>
+
+## About shortcode events
+
+Most events follow a shortcodes-like style:
+
+```
+[background path="res://icon.png" fade="1.0"]
+```
+
+The order of the parameters does not matter, but they have to be separated by at least one space. All parameters regardless of type have to be contained in double quotation marks.
+
+To find all of the parameters you can use on each event, check out their documentation by searching for their class in the godot help or this documentation.
+
+## About special events
+
+Some events have a custom syntax, to make writing them easier. This includes:
+
+- Character event: 
+
+  - `join Emilio (happy) 3 [animation="Bounce In"]`
+  - `leave Emilio [animation="Bounce Out" length="0.3"]`
+  - `update Emilio (excited) 4 [animation="Tada" wait="true" repeat="3" move_time="0.3"]`
+
+- Text event: 
+
+  - `A wonderful text event, said by noone in particular.`
+  - `Emilio (excited): Hello and welcome!`
+  - Ending a text event with \ will make it include the next line as well.
+
+- Choice event:
+
+  - `- I don't know about that`
+  - `- Yes [if {John.Relationship} > 23]`
+  - `- Sure, I'm the great wizard [if {Stats.Charisma} > 10] [else="disable" alt_text="I'm the great wizard [to insecure]"]`
+
+- Condition event: 
+
+  - `if {Player.Wisdom} > 3:`
+  - `elif {Player.Health} <= 10:`
+  - `else:`
+
+- Set Variable event: 
+
+  - `set {MyVariable} += 10`
+  - Supported Operators are =, += , -= , *=, /=
+
+- Comment event:
+
+  - `# Todo: Finnish this!!!!`
+
+- Label event:
+
+  - `label MyLabelName`
+
+- Jump event:
+
+  - `jump MyLabelName`
+  - `jump TimelineName/` # the slash is mandatory to clarify this is a timeline not a label
+  - `jump TimelineName/LabelName`
+
+- Return event:
+
+  - `return`
+
+## About indentation
+
+Timelines use TAB indentation to know what events belong to a choice or condition block. Only changes in indentation are considered, so it doesn't really matter how much you indent as long as you are consistent within one block.
+
+## Example timeline
+
+```
+[background path="res://assets/backgroudns/dialogic_factory.png"]
+
+join Jowan 4
+jowan (exited): Hello and welcome to[portrait=confused]...[pause=0.5] Wait? What is this?
+
+Join Emilio (happy) 1
+Emilio: Well, this is is the example timeline.
+
+Jowan: I thought this was a cool new feature?
+
+Emilio: Nah, sorry.
+
+Jowan (sad): It's okay.
+
+# Some choices jump back to this
+label WhatAbout
+
+Jowan (default): So what should this example be about?
+- How to bake cookies
+    Emilio (confused): Wait that hasn't to do with dialogic?!
+    jump WhatAbout
+
+- How to reach the moon [if {Player.Name} == "NASA"]
+    Jowan (angry): NASA! It's you again. This is for making dialogs!\
+    Please ask someone else about the moon!.
+    
+    jump WhatAbout
+
+- How to write timelines in text format
+    Jowan: Oh, well it's pretty intuitive.[pause= 0.2][portrait=questioning] I hope.
+    
+    Emilio: Let's hope it's easy as well.
+
+[end_timeline]
+```