Extend data to inject for GUI

dominx99

Is it possible to extend information send to GUI about items that the player has?

Currently, it is:

        this.obsCurrentPlayer = this.rpgCurrentPlayer
            .subscribe((obj) => {
                if (!obj || !obj.object) return;

                this.items = obj.object.items;
            })

consumable: null
description: "Gives 10 atk"
id: "sword-id"
name: "Sword"
price: 2000

I would like to build GUI with graphics of items.
I extended the decorator on the backend to set graphic on an item, described here: https://community.rpgjs.dev/d/142-mobs-dropping-items
And now I would like to display inventory with graphics of those items.

Is it possible to include a graphic name in the data returned to the client?

Later I would need more info than graphics.
At first, I wanted to set graphics based on id, but I want to have unique items, for example with custom bonuses, so I will generate uuid here.

I see that I can pass data through gui.open({ items: mapItems(player.items) })

and then on client side take it from props:

    props: ['items'],

but if my player will pick up something this won't be updated to this variable.

Is it possible to implement a custom inject by myself?

Samarium

It is possible to synchronise custom properties (or override properties) with props:

const itemSchemas = {
    ...RpgPlayer.schemas.items[0].item, // keep properties synchronised by default
    graphic: String // add this
}

const player: RpgPlayerHooks = {
    props: {
        items: [{ nb: Number, item: itemSchemas }],
        equipments: [itemSchemas]
    }
}
```

dominx99

Samarium

Thank you, it works, awesome.

dominx99

Samarium

Hello,
Is it possible to add custom schema?
I added inventory

    props: {
        items: [{ nb: Number, item: itemSchemas }],
        equipments: [itemSchemas],
        inventory: inventorySchemas,
    },

and it's perfectly passed to the GUI, but this property is not updated when a change occurs on the server side.

I use this code to pass data from client to server

const socket = this.rpgSocket();
socket.emit('inventory.replaced', { oldSlot, newSlot })

Then I catch it on the server side

player.on('inventory.replaced', ...);

and here I update this inventory property on the player which is not synced back to the GUI.

dominx99

Ok it worked, but I had to move player.on hook to onJoinMap instead of onConnected 🤔

Samarium

dominx99 I don't have any problems of my own. If you put player.on in onConnected, it works fine.

dominx99

In case someone wonders why it works for onJoinMap and not for onConnected

as I suppose it is because synchronization is made for the map and not the game as a whole.

and then it should be recommended (I think) to listen for events from client in onJoinMap hook (?)

in this way:

onJoinMap(player: RPGPlayer) {
  player.off('some-event')
  player.on('some-event', () => console.log('some event occurred'))
}

@Samarium please confirm.

Samarium

With on/off methods, it must not be the synchronization problem.

I'll have a look, as I don't have an explanation at the moment.