How to use the phaser.GameObjects function in phaser

tokens.forEach((type, i) => {
            // @ts-ignore // TODO
            if (tokenData[type] > 0) {
                const position = tokenPositions[tokens.length - 1].slice(i * 2)

                const token = new Phaser.GameObjects.Image(this.scene, position[0], position[1], `${type}-token`)
                token.setDisplaySize(CARD_WIDTH * 0.3, CARD_WIDTH * 0.3)
                this.add(token)

                if (type !== "stun") {
                    const text = new Phaser.GameObjects.Text(this.scene, position[0], position[1], tokenData[type], {
                        color: "#fff",
                        stroke: "#000",
                        strokeThickness: 4,
                        fontSize: "16px"
                    })
                    text.setOrigin(0.5)
                    this.add(text)
                }
            }
        })
    }

getImage() {
        this.setCardImageName();

        // const image = this.scene.add.image(CARD_W / 2, CARD_H / 2, this.imageName);
        if (typeof this.imageName === 'undefined') {
            throw new Error('"this.imageName" is undefined in the "getImage()" function.');
        }
        const image = new Phaser.GameObjects.Image(this.scene, 0, 0, this.imageName);
        image.setScale(this.scale);
        return image;
    }

this.cardImages = cards.map((card, i) => {
            const image = new Phaser.GameObjects.Image(scene, 0, 0, card.id)
            image.setDisplaySize(CARD_WIDTH, CARD_HEIGHT)
            image.setInteractive({ cursor: "pointer" })
            image.addListener("pointermove", (pointer: Phaser.Input.Pointer) => {
                this.onMouseOverCard(image, pointer)
            })
            image.addListener("pointerout", () => {
                this.onMouseOutCard(image)
            })
            image.addListener("pointerup", () => {
                const card = cards[i]
                this.onClickCard(card, i)
            })
            return image
        })

constructor(scene: Phaser.Scene, x: number, y: number, public id: string, public house: string, public isMaverick: boolean, public back: string = "cardback", public faceup: boolean = true) {
        super(scene, x, y)
        this.cardImage = new Phaser.GameObjects.Image(scene, 0, 0, id)
        this.backgroundImage = new Phaser.GameObjects.Image(this.scene, 0, 0, id)
        this.interactiveZone = new Phaser.GameObjects.Rectangle(scene, 0, 0, SMALL_CARD_WIDTH, SMALL_CARD_HEIGHT)
        this.interactiveZone.setInteractive({ cursor: "pointer" })
        this.scene.input.setDraggable(this.interactiveZone)
        this.greenGlow = new Phaser.GameObjects.Image(this.scene, 0, 0, ImageKey.GREEN_CARD_GLOW)
        this.orangeGlow = new Phaser.GameObjects.Image(this.scene, 0, 0, ImageKey.ORANGE_CARD_GLOW)
        this.blueGlow = new Phaser.GameObjects.Image(this.scene, 0, 2, ImageKey.BLUE_CARD_GLOW_SMALL)
        this.blueGlow.setDisplaySize(SMALL_CARD_WIDTH * 1.35, SMALL_CARD_HEIGHT * 1.55)

        this.maverick = new Phaser.GameObjects.Image(this.scene, 0, -(SMALL_CARD_HEIGHT - CARD_HEIGHT) / 2, ImageKey.MAVERICK)
        this.maverick.setDisplaySize(CARD_WIDTH, CARD_HEIGHT)

        scene.load.image(house, require(`../../images/maverick/${house}.png`))
        this.maverickHouse = new Phaser.GameObjects.Image(this.scene, 0, -(SMALL_CARD_HEIGHT - CARD_HEIGHT) / 2, house)
        this.maverickHouse.setDisplaySize(CARD_WIDTH, CARD_HEIGHT)
    }

chainsImage.setOrigin(0)
        //this.root.add(chainsImage)

        const chainsText = new Phaser.GameObjects.Text(this, originX + 455 + nameWidth + 40, originY + 11, player.chains, {
            color: "#fff",
            stroke: "#000",
            strokeThickness: 3,
            fontSize: "14px"
        })
        chainsText.setOrigin(0.5)
        //this.root.add(chainsText)

        for (let i = 0; i < 3; i++) {
            const textureID = player.keys >= i + 1 ? "forged-key" : "unforged-key"
            const keySize = 30
            const keyImage = new Phaser.GameObjects.Image(this, originX + 710, originY + (keySize + 4) * i + 10, textureID)
            keyImage.setDisplaySize(keySize, keySize)
            keyImage.setOrigin(0)
            this.root.add(keyImage)
        }

        const dispatch = this.data.get("dispatch")
        const height = this.data.get("height")
        const creatureOffsetY = orientation === "top" ? height / 2 - 50 : -height / 2 + 250
        const artifactOffsetY = orientation === "top" ? 200 : -70

        this.createCardDropZone(originX + CARD_WIDTH / 2, originY + creatureOffsetY, (card: Card) => {
            dispatch({
                type: Event.PlayCreature,
                cardID: card.data.get("id"),
                side: "left",
            })

constructor(scene: Phaser.Scene, width: number, height: number, public card: KCard) {
        super(scene)
        this.cardImage = new Phaser.GameObjects.Image(scene, 0, 0, card.keyforgeId)

        this.maverick = new Phaser.GameObjects.Image(this.scene, 0, 0, ImageKey.MAVERICK)
        this.maverick.setDisplaySize(width, height)
        this.legacy = new Phaser.GameObjects.Image(this.scene, 0, 0, ImageKey.LEGACY)
        this.legacy.setDisplaySize(width, height)

        scene.load.image(card.house, require(`../images/card/${card.house}.png`))
        this.maverickHouse = new Phaser.GameObjects.Image(this.scene, 0, 0, card.house)
        this.maverickHouse.setDisplaySize(width, height)
        this.width = width
        this.height = height
        this._originX = 0
        this._originY = 0
    }

import Phaser from "phaser"
import ImageKey from "../ImageKey"
import { CARD_HEIGHT, CARD_WIDTH, } from "../constants"

class CardImage extends Phaser.GameObjects.Container {

    cardImage: Phaser.GameObjects.Image
    interactiveZone: Phaser.GameObjects.Rectangle
    blueGlow: Phaser.GameObjects.Image
    orangeGlow: Phaser.GameObjects.Image
    greenGlow: Phaser.GameObjects.Image
    maverick: Phaser.GameObjects.Image
    maverickHouse: Phaser.GameObjects.Image

    constructor(scene: Phaser.Scene, x: number, y: number, public id: string, public house: string, public isMaverick: boolean, public back: string = "cardback", public faceup: boolean = true) {
        super(scene, x, y)
        this.cardImage = new Phaser.GameObjects.Image(scene, 0, 0, id)
        this.interactiveZone = new Phaser.GameObjects.Rectangle(scene, 0, 0, CARD_WIDTH, CARD_HEIGHT)
        this.interactiveZone.setInteractive({ cursor: "pointer" })
        this.scene.input.setDraggable(this.interactiveZone)

import Phaser from "phaser"
import ImageKey from "./ImageKey"
import { KCard } from "../shared/keyforge/card/KCard"

export class CardImage extends Phaser.GameObjects.Container {
    cardImage: Phaser.GameObjects.Image
    maverick: Phaser.GameObjects.Image
    legacy: Phaser.GameObjects.Image
    maverickHouse: Phaser.GameObjects.Image
    width: number
    height: number
    _originX: number
    _originY: number

    constructor(scene: Phaser.Scene, width: number, height: number, public card: KCard) {
        super(scene)
        this.cardImage = new Phaser.GameObjects.Image(scene, 0, 0, card.keyforgeId)

        this.maverick = new Phaser.GameObjects.Image(this.scene, 0, 0, ImageKey.MAVERICK)
        this.maverick.setDisplaySize(width, height)
        this.legacy = new Phaser.GameObjects.Image(this.scene, 0, 0, ImageKey.LEGACY)

export function drawChatbox(ctx) {
	const graphics = new Phaser.GameObjects.Graphics(ctx);
	graphics.lineStyle(20, 0x2ECC40);
	graphics.strokeRect(50, 50, 100, 40);
}

import Phaser from "phaser"
import ImageKey from "../ImageKey"
import { CARD_HEIGHT, CARD_WIDTH, SMALL_CARD_HEIGHT, SMALL_CARD_WIDTH } from "../constants"

class CardImage extends Phaser.GameObjects.Container {

    cardImage: Phaser.GameObjects.Image
    backgroundImage: Phaser.GameObjects.Image
    interactiveZone: Phaser.GameObjects.Rectangle
    blueGlow: Phaser.GameObjects.Image
    orangeGlow: Phaser.GameObjects.Image
    greenGlow: Phaser.GameObjects.Image
    maverick: Phaser.GameObjects.Image
    maverickHouse: Phaser.GameObjects.Image

    constructor(scene: Phaser.Scene, x: number, y: number, public id: string, public house: string, public isMaverick: boolean, public back: string = "cardback", public faceup: boolean = true) {
        super(scene, x, y)
        this.cardImage = new Phaser.GameObjects.Image(scene, 0, 0, id)
        this.backgroundImage = new Phaser.GameObjects.Image(this.scene, 0, 0, id)
        this.interactiveZone = new Phaser.GameObjects.Rectangle(scene, 0, 0, SMALL_CARD_WIDTH, SMALL_CARD_HEIGHT)
        this.interactiveZone.setInteractive({ cursor: "pointer" })