-
Notifications
You must be signed in to change notification settings - Fork 205
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #282 from RSamaium/v4.3.0
V4.3.0
- Loading branch information
Showing
92 changed files
with
27,486 additions
and
1,485 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| # Integrating RpgGame Component into a React App | ||
|
|
||
| This guide provides step-by-step instructions on how to insert an `RpgGame` component into a React application using ViteJS. | ||
|
|
||
| ## Prerequisites | ||
|
|
||
| Ensure that you have a React application set up with ViteJS. Your `package.json` should include the following scripts: | ||
|
|
||
| ```json | ||
| "scripts": { | ||
| "dev": "rpgjs dev", | ||
| "build": "rpgjs build" | ||
| } | ||
| ``` | ||
|
|
||
| ## Step 1: Create the Game Directory | ||
|
|
||
| Create a new directory within your source folder: | ||
|
|
||
| ``` | ||
| src/game | ||
| ``` | ||
|
|
||
| ## Step 2: Configure RPG Module | ||
|
|
||
| In your `rpg.toml` file, set the module root and disable autostart: | ||
|
|
||
| ```toml | ||
| modulesRoot = './src/game' | ||
| autostart = false | ||
| ``` | ||
|
|
||
| > The `autostart` option prevents the engine from automatically searching for a div with the id `#rpg`. Instead, it will use the React component. | ||
| ## Step 3: Import RpgGame Component | ||
|
|
||
| Import the `RpgGame` component from the RPGJS client package for React: | ||
|
|
||
| ```javascript | ||
| import { RpgGame } from '@rpgjs/client/react'; | ||
| ``` | ||
|
|
||
| ## Step 4: Utilize RpgGame Component | ||
|
|
||
| Implement the `RpgGame` component with an `onReady` function: | ||
|
|
||
| ```jsx | ||
| const onReady = ({ server, client }) => { | ||
| // server is an instance of RpgServerEngine or null | ||
| // client is an instance of RpgClientEngine | ||
| }; | ||
|
|
||
| <RpgGame onReady={onReady} /> | ||
| ``` | ||
|
|
||
| In MMORPG mode, `server` will be null. In RPG mode, you can access both client and server sides. | ||
|
|
||
| ## Step 5: Advanced Configuration | ||
|
|
||
| To add modules via the React app, use the following setup: | ||
|
|
||
| ```javascript | ||
| const [modules, setModules] = useState<any[]>([ | ||
| { | ||
| server: { | ||
| player: { | ||
| onConnected(player) { | ||
| player.setHitbox(24, 24); | ||
| player.speed = 4; | ||
| player.setGraphic('hero'); | ||
| } | ||
| } | ||
| }, | ||
| client: { | ||
| engine: { | ||
| onStart() { | ||
| console.log('started') | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ]); | ||
|
|
||
| <RpgGame | ||
| onReady={onReady} | ||
| modules={modules} | ||
| /> | ||
| ``` | ||
|
|
||
| > In MMORPG mode, you only have access to the client API. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| # Authentification Integrating Web3 into RPGJS | ||
|
|
||
| ::: warning | ||
| The module is not complete. Further developments are in progress | ||
| ::: | ||
|
|
||
| ## Overview | ||
|
|
||
| By following this guide, you'll be able to connect to a digital wallet like MetaMask and implement Web3 capabilities both on the client and server sides. | ||
|
|
||
| ### Prerequisites | ||
| - Basic knowledge of RPGJS | ||
| - Familiarity with Web3 concepts | ||
| - MetaMask or similar digital wallet installed | ||
|
|
||
| ## Frontend Integration | ||
|
|
||
| ### Customization | ||
| You are free to customize the frontend as per your needs. However, an example is provided here for guidance. | ||
|
|
||
| ### Example: | ||
|
|
||
| https://github.com/RSamaium/RPG-JS/tree/v4/packages/sample3 | ||
|
|
||
| ## Server-Side Integration | ||
|
|
||
| ### Installation | ||
|
|
||
| Install the `@rpgjs/web3` plugin: | ||
|
|
||
| ```bash | ||
| npx rpgjs add @rpgjs/web3 | ||
| ``` | ||
|
|
||
| Ensure that the `@rpgjs/web3` module is the first in the list: | ||
|
|
||
| Example: | ||
| ```toml | ||
| modules = [ | ||
| '@rpgjs/web3', | ||
| './main', | ||
| '@rpgjs/default-gui', | ||
| ] | ||
| ``` | ||
|
|
||
| ### Setting up Configuration | ||
|
|
||
| Add the following configurations: | ||
|
|
||
| ```toml | ||
| [auth] | ||
| jwtSecret = 'mysecret' | ||
|
|
||
| [express.cors] | ||
| origin = '$ENV:VITE_GAME_URL' | ||
| credentials = true | ||
|
|
||
| [express.socketIo.cors] | ||
| origin = '$ENV:VITE_GAME_URL' | ||
| credentials = true | ||
|
|
||
| [socketIoClient] | ||
| withCredentials = true | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| ### Endpoints | ||
| The integration introduces two endpoints: | ||
|
|
||
| - `SERVER_URL + '/nonce'` | ||
| - `SERVER_URL + '/verify'` | ||
|
|
||
| These endpoints help in creating an HTTP-only cookie containing a JWT (JSON Web Token). | ||
|
|
||
| ### API Utilization | ||
| This integration extends the `RpgPlayer` type with Web3 functionalities: | ||
|
|
||
| - `player.web3.walletAddress`: Allows access to the player's wallet address. |
Oops, something went wrong.