RPGJS v4 Documentation

Appearance

On this page

Building GUI with React ​

Prerequisites ​

  • You must be familiar with the React library
  • Since v4.1.0

WARNING

Experimental Feature: This feature is still in its experimental stage and may not be stable.

Step 1: Installation ​

Begin by installing the necessary dependencies:

bash
npm install react react-dom

Step 2: Set Up a Basic GUI ​

In the file main/client/gui/mygui.tsx, create a simple React component:

tsx
export default function MyGUI() {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}

Name function is used for identifying the GUI. Id is my-gui.

Id is Kebab Case of the name function

Step 3: Incorporate Context ​

For more dynamic data, you can utilize the context from the RPG client and some React hooks.

tsx
import { RpgReactContext } from '@rpgjs/client/react';
import { useContext, useEffect, useState } from 'react';

export default function MyGUI({ foo }) {
  const { rpgCurrentPlayer } = useContext(RpgReactContext);
  const [hp, setHp] = useState(0);

  console.log(foo);

  useEffect(() => {
    const subscription = rpgCurrentPlayer.subscribe(({ object }) => {
      setHp(object.hp);
    });
    
    return () => {
      subscription.unsubscribe();
    };
  }, []);

  return (
    <div>
      <h1>{hp}</h1>
    </div>
  );
}

Step 4: Interact with the Server Side ​

On the server side, you have the capability to open the GUI for players.

In the file main/server/player.ts:

ts
import { RpgPlayer, RpgPlayerHooks } from '@rpgjs/server';

const player: RpgPlayerHooks = {
  onJoinMap(player: RpgPlayer) {
    player.gui('my-gui').open({
      foo: 'bar' // You can send props to the GUI
    }); 
  }
};

export default player;