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.