0

I'm currently developing a multiplayer Blackjack game for university project.

Unfortunately I'm getting an error "TypeError: card.getImagemCarta() is not a function ... "

My server holds a list of Games. Each game holds players that hold a Baralho which is "Hand" in Portuguese. Each baralho holds an array of Cards

Here is my class Card:

class Carta {
    get hidden() {
        return this._hidden;
    }

    constructor(__valor, __naipe) {
        this.naipe = __naipe;
        this.valorCarta = __valor;
        this.pontos = this.getValorCarta();
        this._hidden = true;
    }

    clear() {
        this.naipe = -1;
        this.valorCarta = -1;
        this.pontos = -1;
    }

    showCard() {
        this._hidden = false;
    }

    hideCard() {
        this._hidden = true;
    }

    toString() {
        var s = "";
        switch (this.valorCarta) {
            case 1: s += "Ás"; break;
            case 11: s += "Valete"; break;
            case 12: s += "Rainha"; break;
            case 13: s += "Rei"; break;
            default: s += this.value; break;
        }
        s += " de ";
        switch (this.naipe) {
            case 1: s += "Paus"; break;
            case 2: s += "Ouros"; break;
            case 3: s += "Copas"; break;
            case 4: s += "Espadas"; break;
        }
        return s;
    }

    //retrieving the value of the cards from the deal function
    getValorCarta() {
        var valor = this.valorCarta;
        if (valor % 13 === 0 || valor % 13 === 11 || valor % 13 === 12) {
            return 10;
        }
        if (valor % 13 === 1) {
            return 11;
        }
        return valor % 13;
    }

    getImagemCarta() {
        var s = '';
        switch (this.naipe) {
            case 1: s += "p"; break;
            case 2: s += "o"; break;
            case 3: s += "c"; break;
            case 4: s += "e"; break;
        }
        s += this.valorCarta;
        return s;
    }
}
module.exports = Carta;

On my client when I try to list all the players and their cards

<div v-for="player of this.game.players" >
                <h4>{{player.playerName}}</h4>
                <h6>Valor: {{ player._pontos }}</h6>
                <div v-for="card of player._mao">
                    <img v-bind:src="pieceImageURL(card.getImagemCarta())">
                </div>
            </div>

On my vue methods I have a pieceImageURL which returns the correct path for the card image.

methods: {
        closeGame (){
            this.$parent.close(this.game);
        },

        pieceImageURL: function(imgSrc) {
            return 'img/' + imgSrc + '.png';
        },
        clickPiece: function (index){
            if(!this.game.gameEnded){
                if(this.game.playerTurn != this.ownPlayerNumber){
                    alert("It's not your turn to play.");
                }else{

                    if(this.game.board[index]===0){
                        this.$parent.play(this.game,index);
                    }
                }
            }
        },

When I check what card object holds I see that all the parameters are correct yet the prototype holds no methods, so when I try to call the methods they don't exist. This is not the first time this happens to me yet I can't grasp the problem and solve it.

It is as if I loose the information in the prototype.

Am I getting this all wrong?

Thank you very much.

Kevin Boucher
  • 16,426
  • 3
  • 48
  • 55
Luis Valdez
  • 2,339
  • 4
  • 16
  • 21
  • 1
    What is `_mao`? Where did you define it? – trincot Jan 24 '18 at 19:32
  • 1
    Are you transferring data over a network? You don't pass objects over a network, but you can pass serialized objects as JSON. However, JSON doesn't have a concept of prototypes, so that information is lost. You can solve this by creating a new prototyped object using the non-prototyped data that arrives from the network. – apsillers Jan 24 '18 at 19:41
  • 1
    Closely related: [sending data to client (data is an object with a big protoype)](https://stackoverflow.com/a/16439592/710446) – apsillers Jan 24 '18 at 19:44
  • @trincot _mao is the hand of cards the player holds. It's defined in the Player class. I'm sorry I didn't include it – Luis Valdez Jan 24 '18 at 19:57
  • @apsillers Oh. I didn't know that. Thank you so much – Luis Valdez Jan 24 '18 at 19:58
  • 1
    Without seeing how `_mao` is defined, it is hardly possible to pinpoint the error. It looks like `_mao` contains values that are not of the class `Carta`, which anyway is a server-sided class, so the client does not know about it. – trincot Jan 24 '18 at 20:01
  • check this: `` you are passing `card.getImagemCarta()`, but you must pass function name – Moher Jan 24 '18 at 22:18

0 Answers0