Update match and condition node docs

Author: jonnydgreen

docs/latest/getting-started/create-condition-node.md

@@ -3,9 +3,6 @@ description: |
   Create a Condition Node
 ---
 
-<!-- TODO: add Parley examples folder -->
-<!-- TODO: redo screenshots as they will be out of date now -->
-
 Condition Nodes can be used to conditionally direct users down different
 dialogue branches or even conditionally render options. They are designed to be
 infinitely nested in theory and you can find all sorts of Dialogue Sequence
@@ -25,61 +22,38 @@ folder.
 
 ## Instructions
 
-- Create a Condition Node using the `Insert` dropdown:
-
-![Create Condition Node](../../../www/static/docs/create-condition-node/create-condition-node-button.png)
-
-- Click on the created Condition Node in the graph view to open up the Condition
-  Node Editor:
-
-![Condition Node Editor](../../../www/static/docs/create-condition-node/condition-node-editor.png)
-
-- Enter a high-level descriptive name for what the Condition Node represents.
-  This is because it can be sometimes hard to work out what conditions are doing
-  so the more info you can provide up front the better!
-
-![Condition Node Editor Description](../../../www/static/docs/create-condition-node/condition-node-editor-description.png)
-
-- Now choose a combiner for all of your conditions. Here we will choose `All`
-  which means that all of the conditions have to pass in order for the Condition
-  Node to be `true`.
-
-![Condition Node Editor Combiner](../../../www/static/docs/create-condition-node/condition-node-editor-combiner.png)
-
-- Next up is to define the conditions for the combiner. Click `Add Condition`.
-  During the running of a dialogue sequence, each condition will be evaluated in
-  turn and sent to the combiner to calculate whether the Condition Node is
-  truthy (or not). Note, you create more than one condition for the combiner.
-
-![Condition Node Editor Add Condition](../../../www/static/docs/create-condition-node/condition-node-editor-add-condition.png)
-
-- Select a fact using the dropdown. In this case, we will select the
-  `Alice gave coffee` fact. Facts are manually defined scripts that execute when
-  a condition is evaluated and return a value to be checked later in the
-  condition.
-
-![Condition Node Editor Select Fact](../../../www/static/docs/create-condition-node/condition-node-editor-select-fact.png)
-
-- Next, choose an operator. Here, we will use the `Equal` operator. This will be
-  used to compare the result of the fact against a defined value (coming next!).
-
-![Condition Node Editor Select Operator](../../../www/static/docs/create-condition-node/condition-node-editor-select-operator.png)
-
-<!-- TODO: update the coercion note when this is finalised. -->
-
-- Finally, choose a value to compare with. Here we set the value to `true`.
-  Please note, Parley does perform a basic level of coercion so in this case,
-  this will be a GDScript `bool`.
-
-![Condition Node Editor Define Value](../../../www/static/docs/create-condition-node/condition-node-editor-define-value.png)
-
-- Click the `Save` button in the Parley editor and there we have it! Our first
-  Condition Node. Now connect this Node up with other Nodes (here, we define a
-  basic setup for each possible input and output of the Condition Node):
-
-![Define other Nodes](../../../www/static/docs/create-condition-node/define-other-nodes.png)
-
-- You can test out your Dialogue Sequence by clicking the Test Dialogue Sequence
-  from start button:
-
-![Test Dialogue Sequence](../../../www/static/docs/create-condition-node/test-dialogue-sequence.png)
+![Create a Condition Node](../../../www/static/docs/create-condition-node/create-condition-node.gif)
+
+1. Create a Condition Node using the `Insert` dropdown.
+2. Click on the created Condition Node in the graph view to open up the
+   Condition Node Editor.
+3. Enter a high-level descriptive name for what the Condition Node represents.
+   This is because it can be sometimes hard to work out what conditions are
+   doing so the more info you can provide up front the better! In this example,
+   we write: `Alice gave coffee`.
+4. Now choose a combiner for all of your conditions. Here we will choose `All`
+   which means that all of the conditions have to pass in order for the
+   Condition Node to be `true`.
+5. Next up is to define the conditions for the combiner. Click `Add Condition`.
+   During the running of a dialogue sequence, each condition will be evaluated
+   in turn and sent to the combiner to calculate whether the Condition Node is
+   truthy (or not). Note, you create more than one condition for the combiner.
+6. Select a fact using the dropdown. In this case, we will select the
+   `Alice gave coffee` fact. Facts are manually defined scripts that execute
+   when a condition is evaluated and return a value to be checked later in the
+   condition.
+
+> [tip]: You can click on the pencil icon to the right of the Fact to view the
+> selected fact in the Godot GDScript editor and optionally edit it.
+
+7. Next, choose an operator. Here, we will use the `Equal` operator. This will
+   be used to compare the result of the fact against a defined value (coming
+   next!).
+8. Finally, choose a value to compare with. Here we set the value to `true`.
+   Please note, Parley does perform a basic level of coercion so in this case,
+   this will be a GDScript `bool`.
+9. Click the `Save` button in the Parley editor and there we have it! Our first
+   Condition Node. Now connect this Node up with other Nodes (here, we define a
+   basic setup for each possible input and output of the Condition Node).
+10. You can test out your Dialogue Sequence by clicking the Test Dialogue
+    Sequence from start button.

docs/latest/getting-started/create-end-node.md

@@ -3,8 +3,6 @@ description: |
   Create an End Node
 ---
 
-<!-- TODO: add Parley examples folder -->
-
 An End Node defines the end of the Dialogue Sequence. Although Dialogue
 Sequences do not require the presence of End Nodes to end a running Dialogue
 Sequence, it is recommended to do so to make it clear to the Dialogue Sequence

docs/latest/getting-started/create-match-node.md

@@ -3,8 +3,6 @@ description: |
   Create a Match Node
 ---
 
-<!-- TODO: add Parley examples folder -->
-
 A Match Node is useful for selecting the next node based on the well-known value
 of a variable or expression. You can find all sorts of Dialogue Sequence
 examples in the Parley
@@ -23,41 +21,27 @@ folder.
 
 ## Instructions
 
-- Create a Match Node using the `Insert` dropdown:
-
-![Create Match Node](../../../www/static/docs/create-match-node/create-match-node-button.png)
-
-- Click on the created Match Node in the graph view to open up the Match Node
-  Editor:
-
-![Match Node Editor](../../../www/static/docs/create-match-node/match-node-editor.png)
-
-- Enter a high-level descriptive name for what the Match Node represents. This
-  is because it can be sometimes hard to work out what matches are doing so the
-  more info you can provide up front the better!
-
-![Match Node Editor Description](../../../www/static/docs/create-match-node/match-node-editor-description.png)
-
-- Select a fact using the dropdown. In this case, we will select the
-  `Snooker balls` fact. Facts are manually defined scripts that execute when a
-  match is evaluated and return a value to be checked later in the match. These
-  also define well-known values that are used to select against.
-
-![Match Node Editor Select Fact](../../../www/static/docs/create-match-node/match-node-editor-select-fact.png)
-
-- Now choose your cases you want to select against. Here we will choose all of
-  the available cases including the fallback case. This means that even if we
-  don't select on a case, the fallback will be chosen as the next path.
-
-![Match Node Editor Cases](../../../www/static/docs/create-match-node/match-node-editor-cases.png)
-
-- Click the `Save` button in the Parley editor and there we have it! Our first
-  Match Node. Now connect this Node up with other Nodes (here, we define a basic
-  setup for each possible input and output of the Match Node):
-
-![Define other Nodes](../../../www/static/docs/create-match-node/define-other-nodes.png)
-
-- You can test out your Dialogue Sequence by clicking the Test Dialogue Sequence
-  from start button:
-
-![Test Dialogue Sequence](../../../www/static/docs/create-match-node/test-dialogue-sequence.png)
+![Create a Match Node](../../../www/static/docs/create-match-node/create-match-node.gif)
+
+1. Create a Match Node using the `Insert` dropdown.
+2. Click on the created Match Node in the graph view to open up the Match Node
+   Editor.
+3. Enter a high-level descriptive name for what the Match Node represents. This
+   is because it can be sometimes hard to work out what matches are doing so the
+   more info you can provide up front the better! In this example, we write:
+   `Alice coffee status`.
+4. Select a fact using the dropdown. In this case, we will select the
+   `Snooker balls` fact. Facts are manually defined scripts that execute when a
+   match is evaluated and return a value to be checked later in the match. These
+   also define well-known values that are used to select against.
+
+> [tip]: You can click on the pencil icon to the right of the Fact to view the
+> selected fact in the Godot GDScript editor and optionally edit it.
+
+5. Now choose your cases you want to select against. Here we will choose all of
+   the available cases including the fallback case. This means that even if we
+   don't select on a case, the fallback will be chosen as the next path.
+6. Click the `Save` button in the Parley editor and there we have it! Our first
+   Match Node.
+7. You can test out your Dialogue Sequence by clicking the Test Dialogue
+   Sequence from start button.

examples/create-condition-basic.ds

@@ -28,8 +28,8 @@
     {
       "id": "node:5",
       "type": "CONDITION",
-      "position": "(900.0, 400.0)",
-      "description": "Did Alice give coffee",
+      "position": "(920.0, 340.0)",
+      "description": "Alice gave a coffee",
       "combiner": "ALL",
       "conditions": [
         {
@@ -42,46 +42,46 @@
   ],
   "edges": [
     {
-      "id": "edge:1",
-      "from_node": "node:1",
+      "id": "edge:4",
+      "from_node": "node:4",
       "from_slot": 0,
-      "to_node": "node:5",
+      "to_node": "node:2",
       "to_slot": 0,
       "should_override_colour": false,
       "colour_override": "(0.4118, 0.4118, 0.4118, 1.0)"
     },
     {
-      "id": "edge:2",
-      "from_node": "node:5",
+      "id": "edge:5",
+      "from_node": "node:3",
       "from_slot": 0,
-      "to_node": "node:4",
+      "to_node": "node:2",
       "to_slot": 0,
       "should_override_colour": false,
       "colour_override": "(0.4118, 0.4118, 0.4118, 1.0)"
     },
     {
-      "id": "edge:3",
-      "from_node": "node:5",
-      "from_slot": 1,
-      "to_node": "node:3",
+      "id": "edge:6",
+      "from_node": "node:1",
+      "from_slot": 0,
+      "to_node": "node:5",
       "to_slot": 0,
       "should_override_colour": false,
       "colour_override": "(0.4118, 0.4118, 0.4118, 1.0)"
     },
     {
-      "id": "edge:4",
-      "from_node": "node:4",
+      "id": "edge:7",
+      "from_node": "node:5",
       "from_slot": 0,
-      "to_node": "node:2",
+      "to_node": "node:4",
       "to_slot": 0,
       "should_override_colour": false,
       "colour_override": "(0.4118, 0.4118, 0.4118, 1.0)"
     },
     {
-      "id": "edge:5",
-      "from_node": "node:3",
-      "from_slot": 0,
-      "to_node": "node:2",
+      "id": "edge:8",
+      "from_node": "node:5",
+      "from_slot": 1,
+      "to_node": "node:3",
       "to_slot": 0,
       "should_override_colour": false,
       "colour_override": "(0.4118, 0.4118, 0.4118, 1.0)"