Player items are not properly synced to GUI

[dominx99]

Steps to reproduce:

1. Replace player.ts with:

import { RpgPlayer, RpgPlayerHooks, Control, Components, RpgEvent } from '@rpgjs/server'
import Sword from './database/sword';
import PickUp from './pick-up/PickUp';
import Shield from './database/shield';

const player: RpgPlayerHooks = {
    onConnected(player: RpgPlayer) {
        player.name = 'YourName'
        player.setComponentsTop(Components.text('{name}'))

        player.gui('inventory').open();
    },
    onInput(player: RpgPlayer, { input }) {
        if (input == Control.Back) {
            player.callMainMenu()
        }

        if (input == Control.Action) {
            PickUp.gain(player);
        }
    },
    async onJoinMap(player: RpgPlayer) {
        player.addItem(Sword);
        player.addItem(Shield);
    }
}

export default player

2. Add main/database/sword.ts

import { RpgPlayer } from '@rpgjs/server'
import { Weapon } from '@rpgjs/database'

@Weapon({
    name: 'Sword',
    description: 'Attack 10'
})
export default class Sword {
    onAdd(player: RpgPlayer) {
    }

    onEquip(player: RpgPlayer, equip: boolean) {
    }

    onRemove(player: RpgPlayer) {
    }
}

3. Add main/database/shield.ts

import { RpgPlayer } from '@rpgjs/server'
import { Armor } from '@rpgjs/database'

@Armor({
    id: 'shield',
    name: 'Shield',
})
export default class Shield {
    onAdd(player: RpgPlayer) {
    }

    onEquip(player: RpgPlayer, equip: boolean) {
    }

    onRemove(player: RpgPlayer) {
    }
}

4. Add main/pick-up/PickUp.ts

import { RpgPlayer } from "@rpgjs/server";
import Shield from "../database/shield";

export default class PickUp {
    static gain(player: RpgPlayer) {
        player.addItem(Shield, 1);
    }
}

5. Click space (action button)
6. Check client console logs.

Result: items: [null, item]