Object instance is stripped of its methods

Question

For an online board game I am making, I have defined a Tile class, whose instances I use to create a "map". The Tile class has several properties, and a method called show which displays the instance on the canvas.

All the scripts are passed on to the clients as static files via script tags in the index.html which is served by node.js. The instantiation of the Tile class worked properly before I introduced the server. Now it produces some very weird and interesting results.

The HexMap class, creates upon instantiation a 2d array of Tiles as follows:

function HexMap (width, height, image) {
    this.width = width;
    this.height = height;
    this.contents = [];
    for (let i = 0; i < this.width; i++) {
        this.contents[i] = [];
        for (let j = 0; j < this.height; j++)
            this.contents[i].push(new Tile(i, j, size, image, "SEA"));
    }

}

The code for the Tile class is this:

var Tile = function (row, column, side, image, type) {

Vector.call(this, row, column);

this.unit = null;
this.canvas = null;
this.side = side;

this.type = type;

this.startingPoint = new Vector(this.x*Math.sqrt(3)*this.side + (this.y& 1) * this.side*Math.sqrt(3)/2, this.side*1.5*this.y);
this.middlePoint = new Vector(this.startingPoint.x + Math.sqrt(3)*this.side/2, this.startingPoint.y + this.side/2);

this.getOffset = function () {
    return {
        "SEA" : 0,
        "SHORELINE" : 60,
        "PLAINS" : 120,
        "FOREST_LIGHT" : 180,
        "FOREST_HEAVY" : 240,
        "MOUNTAINS" : 300,
        "SWAMP" : 360,
        "MARSH" : 420
    }[this.type];
};

this.getVector = function () {
    return new Vector(this.x, this.y);
};

this.show = function (context) {
    if(!this.canvas){
        this.canvas = makeTemplate(side, this.type, image);
    }
    context.drawImage(this.canvas, this.startingPoint.x - this.getOffset(), this.startingPoint.y);
};

this.getPixelX = function () {
    return this.x*Math.sqrt(3)*this.side + (this.y & 1) * this.side;
};

this.getPixelY = function () {
    return this.side/2 + this.side*2*this.y;
};

this.setType = function (type){
    this.type = type;
};

};

Printing a Tile object in the console would normally display something like this:

Tile {x: 0, y: 0, unit: null, canvas: canvas, side: 15, …}

I tried the same thing using the server this time, and the result is this:

{x: 0, y: 1, unit: null, canvas: null, side: 15, …}

Interestingly enough, the result is indeed an object, but not a Tile object. It has all the properties a Tile object has, but has none of its methods. The error I end up getting is this:

tile.show is not a function

The map object is created and transferred to the server via socket.io sockets. The following piece of code runs on the client (the guest).

function selectGame(id) {
        var hexmap = new HexMap(rowspan, colspan, spritesheet);
        hexmap.generateIsland();
        socket.emit('game-select', {id: id, hexmap: hexmap});
    }

The server then receives the map:

socket.on('game-select', function (data) {

    //The 2 sockets corresponding to the players join the same room
    io.sockets.connected[data.id].join(games[data.id].identifier);
    io.sockets.connected[socket.id].join(games[socket.id].identifier);

    //The start-game event is emitted for just the sockets of the same room
    io.to(games[socket.id].identifier).emit('start-game', {
        map: data.hexmap
    });

});

Then both the clients receive it again:

    socket.on('start-game', function (data) {
        let el = document.getElementById("wrapper");
        el.parentNode.removeChild(el);
        hexmap = data.map;
        contexts = setupCanvas();
        displayMap(hexmap, contexts.mapContext);
    });

What displayMap does is it iterates through the contents of the map, and displays each Tile using its show method.

I cannot pin down the problem no matter how hard i try... Any suggestion on how to solve this?

Object instance is stripped of its methods

0 Answers