[Docs] Added first join cinematic page

documentation/.vscode/launch.json

@@ -19,6 +19,19 @@
                 "BROWSER_ARGS": "--incognito --remote-debugging-port=3000 --no-first-run --no-default-browser-check --user-data-dir=/tmp/docusaurus-chrome-profile"
             },
             "console": "integratedTerminal" // Use integrated terminal instead of debug console
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Build Production",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run",
+                "serve"
+            ],
+            "cwd": "${workspaceFolder}",
+            "console": "integratedTerminal",
+            "preLaunchTask": "npm run build"
         }
     ]
 }

documentation/.vscode/tasks.json

@@ -0,0 +1,20 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "npm ci",
+            "type": "shell",
+            "command": "npm ci",
+            "group": "build",
+            "problemMatcher": []
+        },
+        {
+            "label": "npm run build",
+            "type": "shell",
+            "command": "npm run build",
+            "group": "build",
+            "problemMatcher": [],
+            "dependsOn": "npm ci"
+        }
+    ]
+}

documentation/docs/docs/03-creating-stories/02-cinematics/03-entities.mdx

@@ -3,7 +3,7 @@ import Player from "@site/src/components/Player";
 # Adding entities
 
 :::info[Before starting]
-It's best to first read [Cinematic](./index.mdx) before starting this tutorial.
+It's best to first read [Cinematics](./index.mdx) before starting this tutorial.
 :::
 
 In this tutorial, you will learn how to add entities to your interactions.
@@ -31,6 +31,9 @@ Now, back on the cinematic page, click on the camera icon in the inspector just
 By clicking on the book, TypeWriter will start recording your movements and items that you were holding before you requested the content mode.
 
 #### Recording the NPC
+:::warning[Items in inventory]
+The items you were holding before you requested the content mode will be the items that the NPC will be holding.
+:::
 <Player url={require("../../assets/cinematics/recording.webm").default}/>
 
 #### Using the playback items

documentation/docs/docs/03-creating-stories/02-cinematics/04-first-join.mdx

@@ -0,0 +1,49 @@
+import Player from "@site/src/components/Player";
+
+# First Join Cinematic Tutorial
+
+:::info[Before Starting]
+Before starting, it's recommended to read the following sections: [Interactions](../01-interactions/index.mdx), [Cinematics](./index.mdx), and [Facts](../03-facts/index.mdx). Ensure you have a sequence and a cinematic page created.
+:::
+
+In this tutorial, you'll learn how to create a cinematic that plays when a player joins the server for the first time.
+
+## Adding the Join Entry
+First, we need to add the `Add On Player Join` entry to our sequence. This can be done by clicking on the + icon in the top right corner of the panel and searching for `Add On Player Join`. Add it to your page by clicking on the + icon.
+
+![Add-On-Player-Join](../../assets/cinematics/add-on-player-join.png)
+
+## Waiting for Interaction
+:::danger[Early Start Cinematic]
+Before a player fully loads the server, it is possible for TypeWriter to start the cinematic prematurely. This can occur if the player has a slow internet connection or a low-performance computer. In such cases, the player may join the server in the middle of the cinematic instead of at the beginning. To address this, it is recommended to add an option or a delay where the player needs to perform an action before the cinematic starts.
+:::
+To add an option to your sequence, it's best to read the [Options](../01-interactions/01-options.mdx) page. For this tutorial, we will have a `New Option` with a `Start Cinematic` option.
+
+### Configuring the Criteria
+Now we need to configure the criteria for the cinematic. This can be done by clicking on the `+` icon in the inspector next to the criteria field.\
+Then, you can select the fact you want to use. For this tutorial, we will use a permanent fact called `First Join` with the group set to a player group.
+
+![first-join-fact](../../assets/cinematics/first-join-fact.png)
+
+Inside the criteria, set the operator to `==` and the value to `0`.
+
+### Configuring the Modifier
+You have configured the criteria, but now we need to modify the fact so that when you join again, the cinematic is not played. This can be done by clicking on the `+` icon in the inspector next to the modifier field.\
+Then, you can select the fact you want to modify. For this tutorial, we will use the same fact as the criteria. Inside the modifier, set the operator to `=` and the value to `1`.
+
+Now your inspector should look like this:
+
+![add-cinematic-fields](../../assets/cinematics/add-cinematic-fields.png)
+
+## Adding the `Add Cinematic` Entry
+Now we need to add the `Add Cinematic` entry to our sequence. This can be done by right-clicking on the `New On Player Join` entry and selecting `+ Link with ...`. Then, search for `Add Cinematic` and click on the + icon to add it to your sequence.\
+Now your sequence page should look like this:
+
+![Add-Cinematic](../../assets/cinematics/add-cinematic.png)
+
+Inside the `New Cinematic`, select the cinematic you want to trigger via the inspector at the page field. For this tutorial, we will use the `Tutorial_Cin` cinematic.
+
+## Result
+Now, when a player joins the server for the first time, the cinematic will play. When the player joins again, the cinematic will not play.
+
+<Player url={require("../../assets/cinematics/first-join-result.webm").default}/>