progress

docs/tutorial/en/05-tictactoe/command.md

@@ -1,6 +1,6 @@
 ---
-title: commands
-sidebar_position: 1
+title: command
+sidebar_position: 2
 ---
 
 # Commands 
@@ -22,19 +22,6 @@ In this tutorial, maybe you were smart enough to guess, but we'll be making tict
 - Instead of **CommandType.Both**, `type` property should be **CommandType.Slash**
     - This is to keep it simple. You'll see later, but slash commands work well with message components.
 - Give it a description.
-
-#### Halfway
-This is what your command should look like:
-
-```js title=./commands/tictactoe.js
-export default commandModule({ 
-    type: CommandType.Slash,
-    description: "I do tictactoe.",
-    execute: async (ctx, args) => {
-        await ctx.reply('Pong 🏓');
-    }
-})
-```
 - run `npm run commands:publish`
 - Your command should be usable on discord now!
 
@@ -43,7 +30,7 @@ Your command should now look something along the lines of this:
 ```js title=./commands/tictactoe.js
 export default commandModule({ 
     type: CommandType.Slash,
-    description: "I do tictactoe."
+    description: "I do tictactoe.",
     execute: async (ctx) => {
         await ctx.reply("Pwease wait. dis command in pwogwess"); // 👻
     }

docs/tutorial/en/05-tictactoe/logic.md

@@ -0,0 +1,5 @@
+---
+title: Logic 
+sidebar_position: 5
+---
+

docs/tutorial/en/05-tictactoe/plugins.md

@@ -1,6 +1,6 @@
 ---
 title: plugins
-sidebar_position: 2
+sidebar_position: 3
 ---
 
 

docs/tutorial/en/05-tictactoe/tictactoe.md

@@ -1,9 +1,8 @@
 ---
-title: TicTacToe 
-sidebar_position: 3
+title: intro
+sidebar_position: 1
 ---
 
-## Tic Tac Toe
 > How hard can this be?
 
 This will probably be the longest chapter in the book. Don't worry though, once we're done, making commands is [**fodder**](https://www.merriam-webster.com/dictionary/fodder).
@@ -15,6 +14,7 @@ Here are some inspirational quotes to make you get motivated.
 
 > "Never let the future disturb you. You will meet it, if you have to, with the same weapons of reason which today arm you against the present." ― Marcus Aurelius, Meditations 
 
-If you want to add more, feel free to pull request this, but not too many please
+If you want to add more, feel free to pull request this, but not too many please.
 
 
+TODO!!! - ADD TIC TAC TOE GIF HERE

docs/tutorial/en/05-tictactoe/ui.md

@@ -0,0 +1,80 @@
+---
+title: UI 
+sidebar_position: 4
+---
+
+
+## Message Components
+
+Discord has a rich api for developers, and they allow bots to use and interact with certain UI components. 
+Some of these include
+
+- Buttons
+- Modals (technically not a component)
+- Select Menu
+- Action Rows
+
+Let's use the mush we call [**brain**](https://www.ninds.nih.gov/health-information/public-education/brain-basics/brain-basics-know-your-brain).
+
+> **Question**: What components do we need to create a tic tac toe game?
+
+> **Answer**: Buttons!!!!
+
+
+### Rules
+Obviously we can't spam the user interface with lots of components; Discord knows this as well.
+
+Per the [**discord api documentation**](https://discord.com/developers/docs/interactions/message-components#action-rows):
+- You can have up to 5 Action Rows per message
+- Maximum of **5** components in an Action Row
+- An Action Row cannot contain another Action Row
+- Select Menus take up an entire Action Row, and cannot have buttons
+
+
+Do the math, and we can have up to 5 (action rows) times 5 (per row), 25 buttons in one message 
+
+### Custom Ids 
+We also need some way to distinguish buttons between other buttons. Whenever a user clicks a button, we are notified that **some** interaction has happened, but from **where?** Custom ids to the rescue. Think of these like 'classes' or 'ids' on html tags. **Each component that we need to handle
+will have to be retrieved by their custom id in order to properly handle it**
+
+
+We'll get more into this in the next chapter.
+
+
+### Design
+Our UI will contain a message, and a total of 9 buttons, laid out in a 3x3 grid.
+
+TODO!!! PICTURE HERE
+
+
+### Implementation
+
+How do we represent this in code? In discord.js, the library we're using, we can represent this via their builder api. Let's create some utility functions before diving straight in.
+
+```js title="tictactoe.js"
+const createButton = (customId, label) => {
+   return ButtonBuilder.from({ 
+        customId,
+        label,
+        style: ButtonStyle.Secondary
+   }); 
+}
+```
+The name is pretty self explanatory.
+
+In our **execute** function, let's build the Action Rows.
+```js
+const message = "Tic Tac Toe";
+const rows = [];
+for(let i = 0; i < 3; i++) {
+    rows.push(new ActionRowBuilder([ 
+        createButton(i),
+        createButton(i+1),
+        createButton(i+2),
+    ]));
+}
+```
+> Question: Does this satisfy the rules stated above?
+
+> Answer: Yes! We have 3 Action Rows in total, with 3 Buttons in each.
+