Processing An Event tutorial.

iChun · May 28, 2021 · 7114c76 · 7114c76
1 parent 757c9a3
commit 7114c76
Show file tree

Hide file tree

Showing 18 changed files with 110 additions and 4 deletions.
diff --git a/docs/gettingstarted/eventconfiguration.md b/docs/gettingstarted/eventconfiguration.md
@@ -19,7 +19,7 @@ Very quickly, you can see the full tree of this Event Configuration on the left,
 
 As Chat's Event Configuration is shared between Twitch and YouTube, one Configuration is used for Twitch, and one Configuration is used for YouTube. For the purposes of this guide, we will be focusing on Twitch's Configuration, the first one in the Navigator.
 
-Twitch chat's stream events generally fall under two categories, a `message` and an `action`. `message` type Stream Events are usually the normal messages you see in chat, and sometimes, channel rewards that contain text. Differentiating the two will be explained later. `action` type Stream Events are when a user does `/me` before sending a message into Twitch chat.
+Twitch chat's stream events generally fall under two categories, a `message` and an `action`. `message` type Stream Events are usually the normal messages you see in chat, and sometimes, channel point rewards that contain text. Differentiating the two will be explained later. `action` type Stream Events are when a user does `/me` before sending a message into Twitch chat.
 
 CCI processes the Stream Event to determine which platform it's from, and what type it is, and then passes this to the Event Configuration, which automatically filters this and then tests it against the Config Events. Here you can see that both `message` and `action` only have one Config Event attached. 
 
@@ -31,7 +31,7 @@ Let's have a look at the Config Event for `message`:
 
 There's a lot to take in here, but I want you to focus on three things: `conditions`, `outcomes`, `allowsOtherEventsToTrigger`. 
 
-`conditions` are a list of "conditions" that need to be met for this Config Event to trigger. Having no conditions also causes the Config Event to trigger. When the Config Event triggers, it triggers the outcomes in `outcomes`. Both conditions and outcomes have their own special fields to modify their behaviour, but we won't go into detail here. In this instance, since there are no conditions, any chat message triggers the ToastOutcome, which causes a Toast to pop up with the user's name and message.
+`conditions` are a list of "conditions" that need to be met for this Config Event to trigger. Having no conditions also causes the Config Event to trigger. When the Config Event triggers, it triggers the outcomes in `outcomes`. Both conditions and outcomes have their own special fields to modify their behaviour, but we won't go into detail here. A Config Event will always need at least one Outcome or else CCI will consider it invalid. In this instance, since there are no conditions, any chat message triggers the `ToastOutcome`, which causes a Toast to pop up with the user's name and message.
 
 This is where it gets a little complicated (as if it wasn't already), the first Config Event for type `message` is tested, and if it triggers, CCI considers this as a job well done, and stops there. If the Config Event doesn't trigger, eg the conditions aren't met, or it is on cooldown, the next Config Event in the list is tested. CCI works on a top to bottom principle, meaning it tries from the top and works downwards. This applies for Config Events, Conditions, Outcomes, and most other things.
 

diff --git a/docs/gettingstarted/images/processingevent/addcondition.png b/docs/gettingstarted/images/processingevent/addcondition.png
diff --git a/docs/gettingstarted/images/processingevent/addevent.png b/docs/gettingstarted/images/processingevent/addevent.png
diff --git a/docs/gettingstarted/images/processingevent/addoutcome.png b/docs/gettingstarted/images/processingevent/addoutcome.png
diff --git a/docs/gettingstarted/images/processingevent/channelreward.png b/docs/gettingstarted/images/processingevent/channelreward.png
diff --git a/docs/gettingstarted/images/processingevent/eventviewer.png b/docs/gettingstarted/images/processingevent/eventviewer.png
diff --git a/docs/gettingstarted/images/processingevent/examplerewardbase.png b/docs/gettingstarted/images/processingevent/examplerewardbase.png
diff --git a/docs/gettingstarted/images/processingevent/examplerewardcondition.png b/docs/gettingstarted/images/processingevent/examplerewardcondition.png
diff --git a/docs/gettingstarted/images/processingevent/examplerewardsc.png b/docs/gettingstarted/images/processingevent/examplerewardsc.png
diff --git a/docs/gettingstarted/images/processingevent/itworked.png b/docs/gettingstarted/images/processingevent/itworked.png
diff --git a/docs/gettingstarted/images/processingevent/renametoast.png b/docs/gettingstarted/images/processingevent/renametoast.png
diff --git a/docs/gettingstarted/images/processingevent/rewardredeemed.png b/docs/gettingstarted/images/processingevent/rewardredeemed.png
diff --git a/docs/gettingstarted/images/processingevent/toastoutcome.png b/docs/gettingstarted/images/processingevent/toastoutcome.png
diff --git a/docs/gettingstarted/images/processingevent/variablecheckvalues.png b/docs/gettingstarted/images/processingevent/variablecheckvalues.png
diff --git a/docs/gettingstarted/processingevent.md b/docs/gettingstarted/processingevent.md
@@ -0,0 +1,105 @@
+Processing an Event
+===================
+
+In this example, we will run you through setting CCI up too act on a Channel Point Reward on Twitch. If you already have a Channel Point Reward, be sure to force it to require text, and skip ahead to the CCI segment.
+
+## Making the Channel Point Reward
+
+I am presuming you already know how to get to your Channel Point Rewards in your Twitch Dashboard, so I will be skipping that bit.
+
+1. Click on `Add New Custom Reward`, and edit the fields to your liking. Be sure to require the viewer to enter text. CCI needs this. This is the example we will be using:
+
+![](./images/processingevent/channelreward.png){: class="img_center"}
+<br />
+<br />
+
+## Getting the Information Needed
+
+1. Launch up CCI and open up the Editor. 
+
+2. In your Twitch Chat, claim the channel point reward.
+
+![](./images/processingevent/rewardredeemed.png){: class="img_center"}
+<br />
+<br />
+
+3. In CCI's Editor, open up the Event Viewer. That's the `Events` button on the top left. In the `Chat` layer, look for a variable called `custom-reward-id`. We will want both the name and the value. In this example, the value is `a54f1f3d-e05d-46e8-aea9-0285ab9d0266`. Note how `cci-type-event` is `message`.
+
+| Reminder |
+|--------|
+| Click on the Variable listing, and hit Ctrl+C to copy the variable name, Ctrl+Shift+C for the variable value |
+
+![](./images/processingevent/eventviewer.png){: class="img_center"}
+<br />
+<br />
+
+Optional. Go to the existing Config Event and name it `Toast`. This will be helpful later.
+
+![](./images/processingevent/renametoast.png){: class="img_center"}
+<br />
+<br />
+
+4. Go to `message` in the Navigator. Double-click in the Contents window to add a new Config Event. From there, click and drag the first event, `Event: Toast`, down to below the new Event. We want our Channel Point Reward Config Event to trigger first.
+
+![](./images/processingevent/addevent.png){: class="img_center"}
+<br />
+<br />
+
+5. Click on the new Config Event you just created in the Navigator. *(Optional)* Name it `Example Reward`.
+
+![](./images/processingevent/examplerewardbase.png){: class="img_center"}
+<br />
+<br />
+
+6. Double-click on `conditions` to open up the window to add a new Condition. Find `variableCheck` or `VariableCondition` and add it. 
+
+![](./images/processingevent/addcondition.png){: class="img_center"}
+<br />
+<br />
+
+7. Open up the `conditions` tree in the Navigator. Note how `VariableCondition` is red. This means it is invalid. We will fix that in a bit. Click on it.
+
+![](./images/processingevent/examplerewardcondition.png){: class="img_center"}
+<br />
+<br />
+
+8. In `variableName`, set it to the variable name we got earlier, which was `custom-reward-id`. In `variableResult`, set it to the value we also got earlier. Our example's is `a54f1f3d-e05d-46e8-aea9-0285ab9d0266`. Note how when these two were filled in, `VariableCondition` in the Navigator is no longer red.
+
+| Protip |
+|--------|
+| You can select some fields and paste (Ctrl+V) directly into it, rather than double clicking to open the editor. |
+
+![](./images/processingevent/variablecheckvalues.png){: class="img_center"}
+<br />
+<br />
+
+9. Now, go back to the Config Event. Now we add an Outcome. This is where you customise your Outcomes to what is defined in your reward, but for this guide's purposes, we'll use another `ToastOutcome`. Double-click `outcomes` and add a `ToastOutcome` (id: `toast`).
+
+![](./images/processingevent/addoutcome.png){: class="img_center"}
+<br />
+<br />
+
+10. Navigate to the `ToastOutcome`. Set the `toastType` to `2`. Now we show how Variable insertion comes in. Recall from Step 3 where there was a variable called `display-name`. We will be using that here.
+
+    Set `title` to `Example Reward Claimed!`, and `subtitle` to `Claimed by $display-name`. Note how CCI marks all `$` as green, to help you notice variable insertions.
+
+![](./images/processingevent/toastoutcome.png){: class="img_center"}
+<br />
+<br />
+
+11. Go back to your Config Event. We're not done yet. We still want the message to be processed by the other Config Event. Double-click on `allowsOtherEventsToTrigger` to set it to `true`.
+
+![](./images/processingevent/examplerewardsc.png){: class="img_center"}
+<br />
+<br />
+
+12. Hit `Save` on the top right. Your updated Event Configuration is immediately applied. Try to claim your Channel Point Reward and if you followed our example, watch as two Toasts pop up.
+
+![](./images/processingevent/itworked.png){: class="img_center"}
+<br />
+<br />
+<br />
+
+And that concludes our tutorial. Hopefully this Getting Started segment has helped you understand how CCI works and how to use it. The other pages in this segment are additional tidbits that are worth reading, but the basics are done.
+
+Good luck getting things working the way you want it to, this is only the beginning. If you are happy with what the mod does and if this guide has been helpful, do consider giving me a tip via the `Donate` button in `About Project` on the [CurseForge page](https://www.curseforge.com/minecraft/mc-mods/content-creator-integration/).
diff --git a/docs/gettingstarted/socketkey/streamelements.md b/docs/gettingstarted/socketkey/streamelements.md
@@ -3,7 +3,7 @@ Finding your StreamElements JWT Token
 
 | Protip |
 |--------|
-| Playing Test Events work with CCI, but isn't always representative of a live event. Always use live events when making configs where possible. |
+| Playing Test Events work with CCI, but isn't always representative of a live event. StreamElements test events trigger multiple times for multiple listeners, which never happens when live. Always use live events when making configs where possible. |
 
 <br />
 <br />

diff --git a/docs/index.md b/docs/index.md
@@ -11,7 +11,7 @@ Contribute to the docs at [GitHub](https://github.com/iChun/ContentCreatorIntegr
 What is Content Creator Integration?
 ------------------------------------
 
-Content Creator Integration (CCI) is a Minecraft mod made to bridge the gap between content creators/livestreamers and their viewers, with the aim of being as flexible and versatile as possible. It aims to allow stream events (subscriptions, tips, chat messages, etc) to be parsed and acted upon in a sensical and predicable manner.
+Content Creator Integration (CCI) is a Minecraft mod made to bridge the gap between content creators/livestreamers and their viewers, with the aim of being as flexible and versatile as possible. It aims to allow Stream Events (subscriptions, tips, chat messages, etc) to be parsed and acted upon in a sensical and predictable manner.
 
 CCI works on being primarily [Object-oriented](https://en.wikipedia.org/wiki/Object-oriented_programming), configured by [JSON](https://en.wikipedia.org/wiki/JSON) files to define the fields of said objects. No scripting is required, CCI does all of that for you, though some experience with scripting or programming would be invaluable in understanding the workings of this mod.
 

diff --git a/mkdocs.yml b/mkdocs.yml
@@ -11,6 +11,7 @@ pages:
     - The CCI Editor: 'gettingstarted/editor.md'
     - Dissecting an Event: 'gettingstarted/events.md'
     - The Anatomy of an Event Configuration: 'gettingstarted/eventconfiguration.md'
+    - Processing an Event: 'gettingstarted/processingevent.md'
   - Components:
     - Event Configuration & Configuration: 'components/eventconfig.md'
     - Event: 'components/event.md'