docs: discord activities overview and multiplayer docs

docs/docs/discord-activities/multiplayer.mdx

@@ -0,0 +1,143 @@
+import { Card } from '@site/src/components/shared/Card'
+import { CardRow } from '@site/src/components/shared/CardRow'
+
+# ⚔️ Multiplayer
+
+Discord Activities are a great way to create multiplayer games and experiences. Even if you're not building a game, you can still use multiplayer features to create collaborative activities or experiences.
+
+Multiplayer features often involve websockets for real-time communication between clients. There are many ways to implement features like this. Depending on what you're building, we recommend either using our **[@robojs/sync](#sync-plugin)** plugin or a more powerful solution like **[Colyseus](https://colyseus.io/)**.
+
+## Sync Plugin
+
+If you're building a **[React](https://react.dev)** app, you can use the **[@robojs/sync](../plugins/sync)** plugin to sync state across clients in real-time. This is the easiest way to add multiplayer functionality to your Discord Activity.
+
+Websocket features can be complex to set up, but **[@robojs/sync](../plugins/sync)** handles all of that for you. Robo.js plugins are designed to work out of the box, no matter how powerful, so you can focus on features!
+
+### Setup
+
+To install, run the following command:
+
+```bash
+npx robo add @robojs/sync
+```
+
+You will need to wrap your app with the `<SyncProvider>` component. This will handle state synchronization for you.
+
+```tsx title="/src/app/App.tsx"
+import { SyncProvider } from '@robojs/sync'
+
+export function App() {
+	return (
+		<SyncProvider>
+			<Activity />
+		</SyncProvider>
+	)
+}
+```
+
+### Usage
+
+If you're already familiar with React's `useState` hook, then you'll feel right at home with `useSyncState`. You can use it just like React's `useState` hook, but the state will be synced across all clients in real-time. The only difference is that you need to provide a dependency array as the second argument.
+
+```tsx title="/src/components/Player.tsx"
+import { useSyncState } from '@robojs/sync'
+
+export function Player() {
+	const [position, setPosition] = useSyncState({ x: 0, y: 0 }, ['position'])
+
+	const handleMouseMove = (event) => {
+		setPosition({ x: event.clientX, y: event.clientY })
+	}
+
+	return (
+		<div onMouseMove={handleMouseMove}>
+			Position: {position.x}, {position.y}
+		</div>
+	)
+}
+```
+
+Updating the state will cause all clients to receive the new state in real-time. When doing so, we recommend using an updater function to ensure you're always working with the latest state.
+
+```tsx title="/src/components/Player.tsx"
+const handleMouseMove = (event) => {
+	setPosition((prev) => ({ x: event.clientX, y: event.clientY }))
+}
+```
+
+### Dependency Array
+
+The dependency array (`['position']`) is used to determine which clients should share the same state. In this case, all clients with the same dependency array will share the same `position` state. You can use any value in the dependency array, such as the user's ID or a room ID.
+
+```tsx title="/src/components/Player.tsx"
+const { session } = useDiscordSdk()
+const [position, setPosition] = useSyncState({ x: 0, y: 0 }, [session.user.id, 'position'])
+```
+
+### Learn More
+
+<CardRow>
+	<Card
+		href="../plugins/sync"
+		title="🔌 @robojs/sync"
+		description="Real-time state synchronization for multiplayer activities."
+	/>
+</CardRow>
+
+## Colyseus
+
+If you're building a more complex multiplayer game, we recommend using **[Colyseus](https://colyseus.io/)**.
+
+Colyseus is a powerful multiplayer game server that handles real-time communication between clients. It is well tested, scalable, and designed for building real-time multiplayer games. It works great with pretty much any game engine, UI library, or framework. That includes **Robo.js**!
+
+### Setup
+
+Unlike Robo plugins, Colyseus requires a bit more setup. Let's start by installing dependencies:
+
+```bash
+npm install @colyseus/core @colyseus/schema @colyseus/ws-transport colyseus.js
+```
+
+From here on, you'll need to:
+
+1. **Create a Server**: We recommend extending `NodeEngine` in **[@robojs/server](../plugins/server)** to work with Colyseus.
+2. **Define Schemas**: Use **[@colyseus/schema](https://docs.colyseus.io/schema/)** to define your state schemas.
+3. **Define Rooms**: Create rooms that handle game logic and state synchronization.
+4. **Connect Clients**: Use **[Colyseus.js](https://docs.colyseus.io/client/)** to connect clients to your server.
+
+If the above sounds complicated, don't worry! We've created a template to help you get started!
+
+<CardRow>
+	<Card
+		href="https://github.com/Wave-Play/robo.js/tree/main/templates/activity-ts-colyseus-react"
+		title="📚 Template"
+		description="A template to help you get started with Colyseus and Robo.js."
+	/>
+</CardRow>
+
+### Usage
+
+Once you've set up your server and rooms, you can start using Colyseus to handle real-time communication between clients. You can use Colyseus to handle game logic, state synchronization, and more.
+
+```ts title="/src/core/colyseus.ts"
+import { Client } from 'colyseus.js'
+
+const client = new Client('ws://localhost:2567')
+const room = client.join('my_room')
+
+room.onStateChange((state) => {
+	console.log('New state:', state)
+})
+```
+
+We recommend creating a **[Context Provider](https://react.dev/learn/passing-data-deeply-with-context)** to manage the Colyseus client and room. This will allow you to access the client and room from anywhere in your activity.
+
+### Learn More
+
+<CardRow>
+	<Card
+		href="https://docs.colyseus.io/"
+		title="⚔️ Colyseus Docs"
+		description="Learn more about Colyseus and its features."
+	/>
+</CardRow>

docs/docs/discord-activities/overview.mdx

@@ -0,0 +1,116 @@
+import { Card } from '@site/src/components/shared/Card'
+import { CardRow } from '@site/src/components/shared/CardRow'
+
+# Discord Activities Overview
+
+Robo.js is a powerful framework that allows you to create Discord activities with ease, **[among other things](../discord-bots/overview)**. This section will explain all the concepts behind **[Discord Activities](https://support.discord.com/hc/en-us/articles/4422142836759-Activities-on-Discord)**, and how they are simplified with Robo.js.
+
+## Getting Started
+
+Ready to embark on this adventure? Creating a Discord Activity with Robo.js is as easy as running one command.
+
+```bash
+npx create-robo <projectName> --kit activity
+```
+
+This will walk you through setting up your project and installing the necessary dependencies. Once selected, you can run and start developing your Discord Activity right away!
+
+<CardRow>
+	<Card
+		href="https://dev.to/waveplay/how-to-build-a-discord-activity-easily-with-robojs-5bng"
+		title="📚 Tutorial"
+		description="How to create a Discord Activity in seconds"
+	/>
+</CardRow>
+
+## What are Discord Activities?
+
+Discord Activities are interactive experiences that users can engage with on Discord. They can be games, quizzes, or any other type of interactive content that users can play with. Basically, they are mini web apps that run inside Discord via iframes!
+
+Just like a regular web app, Discord Activities are built using **[HTML](https://developer.mozilla.org/en-US/docs/Web/HTTP)**, **[CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)**, and **[JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)**. You can use any front-end framework you like, such as **[React](https://react.dev/)**, **[Vue](https://vuejs.org/)**, **[Svelte](https://svelte.dev/)**, or none at all. The only difference is that you need to use **[Discord's Embedded App SDK](https://github.com/discord/embedded-app-sdk/)** to interact with Discord's APIs.
+
+## How does Robo.js help?
+
+Robo.js simplifies the process of creating Discord Activities by providing a file-based structure, an integrated database, TypeScript support, and a multitude of plugin-powered skills to unlock along the way. It is designed to be simple and easy to use.
+
+Here's what you can expect:
+
+- **[Single Project](../robojs/files)**: Everything is in one place, making it easy to manage. No need to set up separate backend and frontend projects then connect them together.
+- **[Integrated Database](../robojs/flashcore)**: Robo.js comes with an optional integrated database, so you don't have to worry about setting up a database server. You can store data directly in your project, or using an external database of your choice via adapters.
+- **[TypeScript Support](../create-robo/typescript)**: TypeScript works out of the box, so you can use it without any additional setup.
+- **[Built-in Tunnels](./tunnels)**: The Robo.js CLI automatically sets up free Cloudflare tunnels for easy testing.
+- **[Plugin System](../plugins/overview)**: Robo.js has a powerful plugin system that allows you to extend your project with additional features. Because of the file-based structure, plugins seamlessly integrate with your project's backend and frontend alike.
+- **[Easy Hosting](../hosting/overview)**: Robo.js makes it easy to deploy your project to the web. Just run `robo deploy` and your project will be live for others to use in seconds.
+- **[Ecosystem](../plugins/overview)**: Robo.js has a growing ecosystem of plugins, templates, and tools to help you build your project faster and more powerful with less effort.
+
+## Documentation
+
+Discord Activities are similar to regular web apps, but there are a few unique things you should know.
+
+This documentation covers everything you need to know about creating Discord Activities with Robo.js, from setting up your project to adding features and deploying it for others to use.
+
+<CardRow>
+	<Card href="../hosting/overview" title="🚀 Hosting" description="Deploy your activity for others to use." />
+	<Card
+		href="./multiplayer"
+		title="⚔️ Multiplayer"
+		description="Add multiplayer functionality to your Discord Activity."
+	/>
+</CardRow>
+
+## Community
+
+Join our Discord server to chat with other developers, ask questions, and share your projects. We're a friendly bunch and always happy to help! Plus, our very own AI Robo, Sage, is there to assist you with any questions you may have.
+
+<CardRow>
+	<Card href="https://roboplay.dev/discord" title="✨ Discord Server" description="Join our Discord community!" />
+</CardRow>
+
+:::tip AI Plugin
+
+Sage is powered by **[@robojs/ai](../plugins/ai)** and can answer your questions about Robo.js, Discord Activities, and more.
+
+:::
+
+## Templates
+
+We have a collection of templates that you can use to kickstart your project or just use as a reference. Check them out on our GitHub repository!
+
+Want to contribute your own? Feel free to submit a pull request!
+
+<CardRow>
+	<Card
+		href="https://github.com/Wave-Play/robo.js/tree/main/templates/starter-app-js-react"
+		title="📚 Starter React Project (JavaScript)"
+		description="A basic JavaScript project using React."
+	/>
+	<Card
+		href="https://github.com/Wave-Play/robo.js/tree/main/templates/starter-app-ts-react"
+		title="📚 Starter React Project (TypeScript)"
+		description="A basic TypeScript project using React."
+	/>
+</CardRow>
+<CardRow>
+	<Card
+		href="https://github.com/Wave-Play/robo.js/tree/main/templates/starter-activity-javascript"
+		title="📚 Starter Vanilla Project (JavaScript)"
+		description="A basic JavaScript project without any frameworks."
+	/>
+	<Card
+		href="https://github.com/Wave-Play/robo.js/tree/main/templates/starter-activity-typescript"
+		title="📚 Starter Vanilla Project (TypeScript)"
+		description="A basic TypeScript project without any frameworks."
+	/>
+</CardRow>
+<CardRow>
+	<Card
+		href="https://github.com/Wave-Play/robo.js/tree/main/templates/starter-activity-javascript"
+		title="📚 Colyseus Project (TypeScript)"
+		description="A simplified TypeScript project using Colyseus."
+	/>
+	<Card
+		href="https://github.com/Wave-Play/robo.js/blob/main/CONTRIBUTING.md"
+		title="📝 Contributing"
+		description="How to contribute to Robo.js"
+	/>
+</CardRow>

docs/sidebars.js

@@ -30,7 +30,8 @@ const sidebars = {
 					id: 'discord-activities/overview',
 					label: '✨ Overview',
 					type: 'doc'
-				}
+				},
+				'discord-activities/multiplayer'
 			]
 		},
 		{