Documentation: Add guide on how to network sync objects (#34)

Author: Chylum

content/docs/world/meta.json

@@ -1,5 +1,5 @@
 {
   "title": "World",
   "icon": "Globe",
-  "pages": ["index", "setup", "building", "testing"]
+  "pages": ["index", "setup", "building", "testing", "props"]
 }

content/docs/world/props.mdx

@@ -0,0 +1,104 @@
+---
+title: Props
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+
+## What Are Props?
+
+Props are interactive objects which can be loaded into a Basis scene and synchronised across a network.
+
+## How to Create a Prop
+
+- Select a game object and add a Basis Prop component to it.
+- Enter an Asset Bundle Name.
+- Optionally, add an Asset Bundle Description.
+- Press the 'Create Prop Bee File' button and wait for this process to complete.
+
+![Inspector Window at Armature Gameobject](/img/props/1-.png)
+
+- The results will be opened in a new window automatically as shown below. 
+
+![Inspector Window at Armature Gameobject](/img/props/3.png)
+
+## How to Create a Network Synced Prop
+
+Props can be network synced and generated at runtime. Below is example of how to load a network synced Pickup Interactable cube:
+
+- Add a cube object in the scene hierarchy.
+
+![Inspector Window at Cube](/img/props/2AA.png)
+
+- Add a Basis Pickup Interactable component. This allows a local player to pick up and move the cube.
+
+![Inspector Window at Basis Pickup Interactable component](/img/props/2B.png)
+
+- Add a Basis Object Sync Networking component. This allows the cube to be synced for all players.
+
+![Inspector Window at Basic Object Sync Networking component](/img/props/2C.png)
+
+- Add a Basis Prop component, enter an Asset Bundle Name and press the 'Create Prop Bee File' button. The generated .bee files will be used by the Basis Runtime Loader to load the network synced cube into a scene.
+
+![Inspector Window at Basic Object Sync Networking component](/img/props/2D.png)
+
+### Spawning the Prop into a Scene Using the Runtime Loader
+
+- Create an empty game object and give it a suitable name.
+
+- Attach the Runtime Loader component to it.
+
+- Enter your generated prop password and .bee url.
+
+- Select Persistent to ensure synced changes persist for late-joining players.
+
+![Inspector Window at Basic Object Sync Networking component](/img/props/3A.png)
+
+- In the Unity Editor toolbar, select Basis and click on the Loadable Config Editor. This Basis config editor is used to genertate XML files which Basis can use to spawn props into a scene.
+
+![Inspector Window at Basic Object Sync Networking component](/img/props/4B-.png)
+
+- Enter 0 for the mode value. The 0 simply means that this is a loadable prop.
+
+- Enter the same generated password and .bee url used previously.
+
+- Select Persist to ensure synced changes persist for late-joining players.
+
+- Click 'Save XML' and enter an appropriate file name to generate an XML file for the network synced pickup cube 
+
+![Inspector Window at Basic Object Sync Networking component](/img/props/4C.png)
+
+- The generated XML will be located in: *Basis\Basis Server\BasisServerConsole\bin\Debug\net9.0\initialresources*
+
+![Inspector Window at Basic Object Sync Networking component](/img/props/4D.png)
+
+- Its output should look something like this:
+
+![Inspector Window at Basic Object Sync Networking component](/img/props/4E.png)
+
+### Checking the Server to Confirm the Prop Loads
+
+- You can check if your prop is loaded correctly by the server. To do so, run the *BasisNetworkConsole.exe*, which is located at *Basis\Basis Server\BasisServerConsole\bin\Debug\net9.0*.
+
+- *Note:* 
+  - You will need to register yourself as an admin for the prop to be able to load. You can do this by entering entering the command */admin add* did:key:\<YOUR-KEY\> or by editing *Basis\Basis Server\BasisServerConsole\bin\Debug\net9.0\config\admins.xml*. 
+  - You can find your key by opening up the Basis application and selecting your player's UUID in the Admin settings.
+
+![Inspector Window at Basic Object Sync Networking component](/img/props/5A.png)
+
+### Setting up the Basis Scene and Testing the Pickup Cube
+
+- Before you can test out the network synced pickup cube, ensure that your scene has a Basis Scene component attached to an empty game object.
+
+- Click 'Create Scene Bee File'.
+
+- Open up the Load Config editor again.
+
+- Enter your generated scene password and .bee url.
+
+- Ensure Persistent is selected so that synced changes persist for late-joining players.
+
+![Inspector Window at Basic Object Sync Networking component](/img/props/5B.png)
+
+- Open up the 'Initialization' scene and press play. This initialises the created scene and network objects. The next time when you load the scene through the server while running the basis application, all players will be able to interact with the network synced cube.
+
+![Inspector Window at Basic Object Sync Networking component](/img/props/5C.png)

package-lock.json

@@ -15,21 +15,21 @@
     "fumadocs-mdx": "13.0.8",
     "fumadocs-ui": "16.0.11",
     "lucide-react": "^0.552.0",
-    "next": "16.0.1",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "next": "^16.0.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
   },
   "devDependencies": {
+    "@eslint/eslintrc": "^3.3.1",
     "@tailwindcss/postcss": "^4.1.16",
     "@types/mdx": "^2.0.13",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
+    "eslint": "^9.39.1",
+    "eslint-config-next": "16.0.1",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.16",
-    "typescript": "^5.9.3",
-    "eslint-config-next": "16.0.1",
-    "eslint": "^9.39.1",
-    "@eslint/eslintrc": "^3.3.1"
+    "typescript": "^5.9.3"
   }
-}
+}