Javascript TypeError, can’t access methods of object

Question

I am using the p5.js, node.js and socket.io to make a small multiplayer game in the browser. An object called 'player' is passed from one to the other client to sync both clients. This works fine for other code that doesn't rely on method calls. But now that I also want to access methods of stored objects within the player object, it doesn't work anymore.

This would be the object that stores all the variables and the array with objects between the two clients:

var player = {
  structures: []
};

Now if I add an object called campfire to it like this:

player.structures.push(new campfire(mouseX,mouseY));

And try to call the draw() method of the object campfire which looks like this:

class campfire {
constructor(x,y){
    this.scale = 40;
    this.x = x;
    this.y = y;
    this.maxLevel = 3;
    this.button = new button(this.x, this.y+50, this.x-50, this.y-70, upgrade, upgrade_hover, this);
    this.show_upgrade_button = true;
}

draw(){
    switch(player.campfire.level){
        case 1: image(fire, this.x, this.y, this.scale, this.scale);break;
        case 2: image(campfire_2, this.x, this.y, this.scale, this.scale);break;
        case 3: image(campfire_3, this.x, this.y, this.scale, this.scale);break;
        default: console.log("cant upgrade, this shouldn't happen.");
    }
    if(this.show_upgrade_button){
        this.button.draw();
    }
}

trigger(){      
    if(player.campfire.level + 1 <= this.maxLevel && this.show_upgrade_button == true){
        this.button.trigger();
    }
}}

using

player.structures[i].draw();

The console (of the client not ushing the object 'campfire' to the array 'structures') prints the following error:

gui.js:38 Uncaught TypeError: player.structures[i].draw is not a function

The client that is pushing the campfire object to the array is able to make the draw() call and doesn't print an error message. However, the other client that has not pushed the object to the array is not able to use the method and prints out the error, even though they both share the same 'player' object. What's weird is that the one printing out the error is still able to access all variables of the campfire object so it seems to only affect methods.

The only resource I found about this was this article https://airbrake.io/blog/javascript-error-handling/x-is-not-a-function-typeerror I tried to rename the function to draw = function(){} and campfire.prototype.draw = function(){} but it doesn't make a difference for me. I think the functions are not declared right? That would be the only possible explanation for me right now.

Thank you for the time you took to read my question!

EDIT: here is the link to the project: https://github.com/Mayhoon/Multiplayer-Browsergame

Answer 1

I think your problem is more on a design level. Socket.io (or any other sync library) is not really meant to push entire pieces of code back and forth. In your case that would be the functions of the campfire.

I would advise only pushing state back and forth. Does a player have a hammer? How many lives does the player have? Does the player have a campfire? In other words, only sync data that changes constantly.

Since the functionality of the campfire (the draw function) is the same for all players, there is no need to keep pushing that code back and forth every few seconds! It's quite inefficient!

Instead, you can create campfire instances in the client when your sync object says that the player has a campfire.

In code that could look like this (just an idea):

Syncing object for socket.io

var player = {
  structures: {campfire:true}
};

Client code

// create campfire instances, tell the campfire which player it belongs to
if(player.structures.campfire) {
    let cf = new Campfire(player)
    cf.draw()
}

note: it could very well be that socket.io strips out executable code