Migrating to new version of colyseus -> .onAdd broke on the client side (pure js)

[AndadH]

I updated my colyseus package in order to take advantage of the new view features, however after updating it callbacks like .onAdd and .onRemove are no longer working on the client side. I checked and I am recieving the state data from the server.

Here are my current colyseus core dependecies

[email protected] C:\Users\andre\Desktop\server
├─┬ @colyseus/[email protected]
│ └── @colyseus/[email protected] deduped
├── @colyseus/[email protected]
├─┬ @colyseus/[email protected]
│ └── @colyseus/[email protected] deduped
├─┬ @colyseus/[email protected]
│ └── @colyseus/[email protected] deduped
├─┬ @colyseus/[email protected]
│ └── @colyseus/[email protected] deduped
└─┬ [email protected]
└── @colyseus/[email protected] deduped

Here is my client side colyseus package
<script src="https://unpkg.com/[email protected]/dist/colyseus.js"></script>

and here is the offending code.
room.state.players.onAdd ((player, sessionId) => { if(sessionId !== room.sessionId) { playerSprites[sessionId] = createPlayerSprite(sessionId, player.x, player.y, false, player.nickname); } });

The error that I get from the debugger now is that "room.state.players.onAdd is not a function"

is javascript just no longer supported? I'm not sure what happened. I would prefer to not have to refactor my entire client side code.

[endel]

Hi @AndadH, nice to see you're upgrading to latest version! The syntax for schema callbacks had to change in order to decouple the encoding/decoding internally. (Now you don't get .onAdd() auto-completions on the server, which were never supported, for example.)

See docs here: https://docs.colyseus.io/state/callbacks

Let me know if you have any issues during the migration! 🙏

[AndadH]

Hi! Thank you so much!

this.setState(new GameState()) <- here setState is makred as deperacted and says I should use state instead now

this lead me to the docs and it says to use

export class MyRoom extends Room<MyState> {
    state = new MyState();

does this mean I can cut out this helper class?

class GameState extends Schema {
    @type({ map: Player }) players: MapSchema<Player> = new MapSchema<Player>();
    @type({ map: Resource }) resources: MapSchema<Resource> = new MapSchema<Resource>();
    @type({ map: Mob }) mobs: MapSchema<Mob> = new MapSchema<Mob>();
    @type({ map: Item }) items: MapSchema<Item> = new MapSchema<Item>();

    Hash: SpatialHashing;
    keys: any;

    constructor(){
        super();
        this.Hash = new SpatialHashing(1000);
        this.keys = {
          "1234": null,
          "Andrew": null


        };
    }
}

or what's the new way to use it because I depended upon it to store the hash map and some auth keys

[endel]

Hi @AndadH, you can set the values to this.state via another method call instead of within the constructor. Let me know if you have any issues with this.

[AndadH]

Thank you, I'm having I think just one more issue. I think the get function isn't working like it used to for me. Two functions are broken, one on the client side and one on the player side.

'const item = inventory.slots.get(slotName)' this now always returns undefined as well as toss function on the server:

'
this.onMessage("toss",(client) => {
console.log("toss it")
const player = this.state.players.get(client.sessionId);
if (player) {
const item = player.inventory.slots.get(player.select.toString())
console.log("hello?")
console.log(item)
if(item){
console.log("it should toss")
const flooritem = new Item(Math.random.toString(),player.x+player.radius*Math.cos(player.direction-Math.PI/2)1.5,player.y + player.radiusMath.sin(player.direction-Math.PI/2)*1.5, this.state.Hash,item.name,item.quantity,item.durability,item.maxDurability,item.maxStack);
this.state.items.set(flooritem.id, flooritem);
player.inventory.removeSlot(player.select);
player.right = "hand";
}
}
// Ensure the player exists in the state

});
'
here is some context from my Inventory
'export class Inventory extends Schema{
@type({ map: InventoryItem })
slots = new MapSchema();
@type('number') version : number;
// Total number of available slots.
readonly MAX_SLOTS: number = 40;
/**

• Returns the first available slot index (0 .. MAX_SLOTS-1)
• or null if all slots are taken.
  */
  constructor(){
  super();
  this.version = 0;
  }
  getFreeSlot(): number | null {
  for (let i = 0; i < this.MAX_SLOTS; i++) {
  const key = i.toString();
  if (!((this.slots as any)[key])) {
  return i;
  }
  }
  return null;
  }
  '

I'm not sure what's going wrong, I do know that the inventory items still exist because I am still able to draw upon the data to change the players stats when I pick up an item and I'm able to identify what is being held.

which is here:

'updateStats(): void{
let attackmod = 0;

    this.equipment.slots.forEach((item: InventoryItem) => {
      if (item) {
        attackmod += item.dmgmod;
      }
    });
    const selectedKey = this.select.toString();
    const selectedItem: InventoryItem = (this.inventory.slots as any)[selectedKey];
    if (selectedItem && selectedItem.dmgmod) {

'

I'm sorry for all the questions but thank you so much! You are seriously such an expert