Intractability with Custom Classes

Phaser 3
1

Hello! I’m trying to make a simple card game where players can draw cards and then click on a specific card in order to use it. I’ve decided to approach this by making a custom class that extends the Sprite class and having it be clickable so when its clicked, its used. For whatever reason, I can’t get any kind of intractability with this class working, at least not within the class itself where it would be the most useful. Here’s the code for that custom class:

import Card from './card';

export default class VisualCard extends Phaser.GameObjects.Sprite {
    card: Card;

    constructor(scene, x: number, y: number, card: Card){
        super(scene, x, y, 'card' + card.getIndex());
        this.setDisplaySize(130, 150);
        this.setOrigin(0, 1);
        this.card = card;

        this.setInteractive();
        this.on('pointerdown', () => console.log(card.getName() + ' was clicked'));

        scene.add.existing(this);
    }
}

and the code for the Card object:

export default class Card {

  name: string;
  cost : number;
  effect: number;
  index: number;
  type: string;

  constructor(name: string, type:string, cost: number, effect : number, index: number){
    this.name = name;
    this.cost = cost;
    this.effect = effect;
    this.index = index;
    this.type = type;
  }

  public getName(): string{
    return this.name;
  }

  public getCost(): number{
    return this.cost;
  }

  public getEffect(): number{
    return this.effect;
  }

  public getIndex(): number{
    return this.index;
  }
}

Any help would be greatly appreciated!