I have a state.js file for the back-end of socket.io files. I have defined a list for all the Players, Player class, and an extended Character class where I inherited all the methods from the Player class.

Below is my code for the class Player on the server side:

class Player {
constructor(x,y){
    this.x = x;
    this.y = y;
    this.radius = 20;
    this.xVel = 4;
    this.yVel = 4;
    this.usingSuper = false;
    this.superLeft = 3;
    this.immune = false;
    this.shield = false;
    this.duration = 3000;
    this.cooldown = 5000;
}

draw() {
    ctx.beginPath();
    ctx.fillStyle = this.color;
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);
    ctx.fill();
    ctx.closePath();
}

Here is my code for the extended class "Max":

class Max extends Player { // superspeed character
constructor(x,y){
    super(x,y);
    this.color = 'yellow';
}

useSuper(){
    this.superLeft --;
    this.usingSuper = true;
    this.xVel = 15;
    this.yVel = 15;
    // 5 lines below turns the player color to white for a split second
    let originalColor = this.color;
    this.color = 'white';
    setTimeout(()=>{
        this.color = originalColor;
    }, 500);
    setTimeout(()=>{
        this.xVel = 4;
        this.yVel = 4;
        setTimeout(()=>{
            this.usingSuper = false;
        }, this.cooldown);
    }, this.duration);
}

And this is when I call the draw function on the client-side in the main.js

socket.on('state', (gameState)=>{
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let player in gameState.players){
    gameState.players[player].draw();
    }
})

When I run this code, it gives me this error in the browser console:

Uncaught TypeError: gameState.players[player].draw is not a function at Socket. (main.js:13:35) at Socket.Emitter.emit (index.mjs:136:20) at Socket.emitEvent (socket.js:278:20) at Socket.onevent (socket.js:265:18) at Socket.onpacket (socket.js:235:22) at Manager.Emitter.emit (index.mjs:136:20) at Manager.ondecoded (manager.js:200:14) at Decoder.Emitter.emit (index.mjs:136:20) at Decoder.add (index.js:124:17) at Manager.ondata (manager.js:192:22)

The draw function is still undefined even when I directly override it in the subclass Max. How can I fix this issue?