React GUI

dominx99

Hello,

I copied code from documentation:

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

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

  useEffect(() => {
    rpgCurrentPlayer.subscribe(({ object }) => {
      setHp(object.hp);
    });

    return () => {
        rpgCurrentPlayer.unsubscribe();
    };
  }, []);

  return (
    <div style={{ marginLeft: '500px' }}>
      <h1>HP IS = {hp}</h1>
    </div>
  );
}

and I am getting such an error:

Uncaught TypeError: rpgCurrentPlayer.unsubscribe is not a function
    at InventoryGUI.tsx:16:26
    at safelyCallDestroy (react-dom.development.js:22932:5)
    at commitHookEffectListUnmount (react-dom.development.js:23100:11)
    at commitPassiveUnmountInsideDeletedTreeOnFiber (react-dom.development.js:25098:11)
    at commitPassiveUnmountEffectsInsideOfDeletedTree_begin (react-dom.development.js:25048:5)
    at commitPassiveUnmountEffects_begin (react-dom.development.js:24956:11)
    at commitPassiveUnmountEffects (react-dom.development.js:24941:3)
    at flushPassiveEffectsImpl (react-dom.development.js:27038:3)
    at flushPassiveEffects (react-dom.development.js:26984:14)
    at react-dom.development.js:26769:9

issue

This issue occurs when I close the GUI:

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

const player: RpgPlayerHooks = {
    onJoinMap(player: RpgPlayer) {
        player.gui('inventory-gui').open();

        setTimeout(() => {
            player.gui('inventory-gui').close();
        }, 5000);
    }
}

export default player;

Samarium

Thank you,

it's an error in the documentation, it should be

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

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

  useEffect(() => {
    const subscription = rpgCurrentPlayer.subscribe(({ object }) => {
      setHp(object.hp);
    });

    return () => {
        subscription.unsubscribe();
    };
  }, []);

  return (
    <div style={{ marginLeft: '500px' }}>
      <h1>HP IS = {hp}</h1>
    </div>
  );
}

dominx99

Samarium

Indeed, it worked. Thank you

dominx99

@Samarium

I was able to rewrite my inventory GUI from Vue to React, so my feedback is that the new React functionality works very well so far 🚀

dominx99

@Samarium

I am struggling with one thing:

Locally I set the background image this way:

backgroundImage: url('modules/config/assets/gui/inventory/inventory.png');

or this way:

backgroundImage: url('/modules/config/assets/gui/inventory/inventory.png');

Then it works.

but after building on the production it cannot load the image

In Vue components, I used this:

backgroundImage: url('@/modules/config/assets/gui/inventory/inventory.png');

but in the React components, it does not work locally nor does on the prod

Is there @ alternative for react?

Samarium

Normally, we should have @ on React. I'll check it out.

Samarium

Could you show a more complete code? Is this in order to use the "style" tag in React?

If so, perhaps we can consider :

import imgUrl from '@/modules/config/assets/gui/inventory/inventory.png'

// ...

backgroundImage: `url(${imgUrl})`

dominx99

Samarium

Thank you, it worked.

I use styled-components:

import inventoryImage from '@/modules/config/assets/gui/inventory/inventory.png';

export const Inventory = styled.div`
    position: absolute;
    right: 30px;
    bottom: 30px;
    width: 400px;
    height: 780px;
    z-index: 2;
    background-image: url(${inventoryImage});
    background-size: 100% 100%;
`