Moving Items between ArraySchemas issues

I have an issue with moving items between ArraySchemas in my project. Client-side has issues getting all the values of the item and just fills them with undefined.

I modified colyseus-examples to reproduce it and its worse, I get more errors on the client: https://github.com/Zielak/colyseus-examples (in 02-state-handler):

• addItem - button adds new Item to current player
• moveItem - moves one item from current player to some other random player

On the first “moveItem” I get this error in browser:

Uncaught TypeError: Cannot read property '_schema' of undefined
    at colyseus.js:1
    at t.e.decode (colyseus.js:1)
    at colyseus.js:1
    at t.e.decode (colyseus.js:1)
    at e.patch (colyseus.js:1)
    at e.patch (colyseus.js:1)
    at e.onMessageCallback (colyseus.js:1)
    at t.value (colyseus.js:1)

Here’s what I do on server-side:

// Pick an item
const item = this.players[id].items[itemIdx];

// Remove that item from myself
this.players[id].items.splice(itemIdx, 1);

// Add it to the other player
targetPlayer.items.push(item);

and the changes on server-side are all there, I explore the state and all the items are in the correct position after “moving”, and with correct values.

I added tests on colyseus/schema with the same use case and the tests pass: https://github.com/Zielak/schema/commit/c2c2eabd2f5e72dd3b92c44ba22ae0a6ecf95f40

[Zielak]

Yes we can!

[Zielak]

Just an update on what I found while debugging Colyseus. Here’s the case:

• I’m listening for onStateChange room event
• I’m moving one item, a playing card, to different ArrayScheme
• It’s got properties like: x, y, angle, idx, suit and rank. (‘idx’ is its true position in hand)

In the browser, decoding stops after x, y, angle and idx. Thats why I have a bunch of undefined values for this card.

On server side, at the moment of encoding this one card, I can see that Colyseus choses to encode only properties saved in $changes.changes, which contains only x, y, angle and idx.

// Schema.ts:509
const keys = (encodeAll || client)
    ? value.$changes.allChanges
    : value.$changes.changes;

Which kinda makes sense, because while moving this card to another container:

• it’s position changes - x, y
• it’s angle changes - cards are rotated differently when in hand or on the pile of cards)
• it’s idx changes - in my case, I choose 8th card in my hand to be moved to empty container, so its new idx becomes 0

The name, suit and rank don’t actually change, it’s still 8 of hearts.

I don’t feel confident enough with Colyseus codebase to try my own fix, but hopefully you’ll find some use in my investigation. 🤗