GorkemsCafe/public/classes/Player.js

class Player extends Sprite {
    constructor({position,clickX,clickY,incrementX,incrementY,userId,username,skin,message,atPosition,isCharacter2D,animationColumn,imageSrc,frames,center,sprites}){
        super({position,imageSrc,frames,center,atPosition,sprites,skin})
        // super({imageSrc})
        this.clickX = clickX
        this.clickY = clickY
        this.angleDeg = 90
        this.incrementX = incrementX
        this.incrementY = incrementY
        this.userId = userId
        this.username = username
        this.isCharacter2D = isCharacter2D
        this.message = message
        this.messageSent = false


    }
    
    debug(){

    //     ctx.beginPath()
        
    //     if(!this.atPosition){
    //     if(currentFrame%15==0){
    //         animationFrame++
    //         this.animationColumn = animationFrame
    //     }
    //     if (animationFrame> 2){
    //         animationFrame = 0;
    //     }
    // }else{
    //     this.animationColumn = 0;
    // }
       
        
        // ctx.drawImage(img,this.animationColumn*frameWidth,row*frameHeight, frameWidth, frameHeight, this.position.x-frameWidth/2-8, this.position.y-frameHeight/2,frameWidth*2, frameHeight*2);
        
        // ctx.fillStyle = this.color;
        
        ctx.textAlign = "center";
        ctx.fillStyle = 'hsla(211, 100%, 100%, 0.5)';
        ctx.font = 'normal 12px sans-serif';
       
        ctx.fillText("Click X&Y :"+[this.clickX,this.clickY], this.position.x, this.position.y-110);
        ctx.fillText("Position: "+[Math.round(this.position.x),Math.round(this.position.y)], this.position.x, this.position.y-98);
        ctx.fillText("Inc X&Y :"+[this.incrementX.toFixed(2),this.incrementY.toFixed(2)], this.position.x, this.position.y-85);

        ctx.font = 'Normal 16px sans-serif';
        ctx.textAlign = "center";
        ctx.fillStyle = 'orange';
        ctx.fillText("user ID: " + this.userId, this.position.x, this.position.y+35);

        ctx.fill()
        
        
    }
    update(){
        if(this.message!=''){SpeechBubble(ctx,ctx.measureText(this.message).width-20,20,'hsla(181, 100%, 100%, 0.6)',this.position.x-20,this.position.y-100,10)}
        // CollisionRect(this,"hsla(141, 100%, 52%, 0.5)")

        ctx.beginPath();
        ctx.textAlign = "center";
        ctx.font = 'bold 18px win98';
        ctx.fillStyle = 'white';
        ctx.fillText(this.username, this.position.x, this.position.y+15);
        ctx.font = 'normal 15px sans-serif';
        
        ctx.fillStyle = 'black';
        ctx.fillText(this.message, this.position.x, this.position.y-80);

        ctx.fill()



        
//ctx.measureText(this.message).width
    
    // if((Math.sign(incrementX)==1&&fPlayer.x<clickCoordinates[0])||(Math.sign(incrementX)==-1&&fPlayer.x>clickCoordinates[0])){fPlayer.x += incrementX;fPlayer.atPosition=false;    socket.emit('clickPositionX',fPlayer.x)}else{fPlayer.atPosition=true}
    // if((Math.sign(incrementY)==1&&fPlayer.y<clickCoordinates[1])||(Math.sign(incrementY)==-1&&fPlayer.y>clickCoordinates[1])){fPlayer.y += incrementY;fPlayer.atPosition=false;    socket.emit('clickPositionY',fPlayer.y)}else{fPlayer.atPosition=true}
    calculateIncrement(this);
        if(length>1){
        
            this.atPosition=false

            if(this.isCharacter2D){
                // console.log(this.angleDeg)
            if(90<this.angleDeg && this.angleDeg<270){this.image = this.Left}else{this.image = this.Right}

            }else{

            if(225<this.angleDeg && this.angleDeg<315){this.image = this.Up}else
            if(45<this.angleDeg && this.angleDeg<135){this.image = this.Down}else
            if(135<this.angleDeg && this.angleDeg<225){this.image = this.Left}else{this.image = this.Right}

        }

            this.position.x+=this.incrementX;
            this.position.y+=this.incrementY;
            // console.log('goingtolocation')
        }else{
            this.atPosition=true
        }
    
        function calculateIncrement(player){
            var dx = player.clickX - player.position.x;
            var dy = player.clickY - player.position.y;
            player.angleDeg = Math.atan2(dy, dx); 
            player.angleDeg *= 180 / Math.PI;
            if(player.angleDeg<0) player.angleDeg = 360 + player.angleDeg

            
            // console.log(player.angleDeg)
            length = Math.sqrt(dx * dx + dy * dy);
            // steps = length/speed;
            player.incrementX = dx/length*speed;
            player.incrementY = dy/length*speed;
            // console.log(length)
        }



        
    }




    

}

function SpeechBubble(ctx, width, height, color, x, y, radius, text)
{
  var maxWidth = 300;
  var r = radius;
  var w = (width > maxWidth ? maxWidth : width) + 40;
  var h = ((width > maxWidth ? Math.ceil(width / maxWidth) : 1) * height) + 10;
  var pi2 = Math.PI * 2;
  var ap = w/2-5;
  var aw = 10;
  var ah = 8;
    x = x-(width/2)
  // Speechbubble create start
  ctx.beginPath();
  ctx.arc(x+r, y+r, r, pi2 * 0.5, pi2 * 0.75);
  ctx.arc(x+ w - r, y+ r, r, pi2 * 0.75, pi2);
  ctx.arc(x+w - r,y+ h - r, r, 0, pi2 * 0.25);
  ctx.lineTo(x+w - ap, y+h);
  ctx.lineTo(x+w - ap - (aw / 2),y+ h + ah);
  ctx.lineTo(x+w - ap - aw, y+h);
  ctx.arc(x+r, y+h - r, r, pi2 * 0.25, pi2 * 0.5);
  ctx.fillStyle = color;
  ctx.fill();
  // Speechbubble create end

  // Speechbubble text start
//   ctx.fillStyle = "#fff";
//   wrapText(ctx, text, 25, 17, maxWidth, 16);
  // Speechbubble text end
}

function CollisionRect(object,color){
    ctx.beginPath();
    ctx.fillStyle = color;
    ctx.fillRect(object.position.x, object.position.y, object.width, object.height)
    ctx.fill();
}