class Loader{

    pos: p5.Vector
    c: any
    radius: number
    center: p5.Vector
    angle: number
    progress: number
    message: string

    constructor(pos: p5.Vector, radius: number){
        this.pos = pos;
        this.c = p.createGraphics(radius * 2, radius * 2);
        this.radius = radius;
        this.center = p.createVector(radius, radius);
        this.message = 'Loading...';
        this.progress = 0;
        this.angle = 0;
    }

    update(){
        this.angle += Math.PI / 10;
    }

    display(){
        let c = this.c;
        c.clear();
        c.noFill();
        c.stroke(20, 100, 200);
        c.strokeWeight(this.radius * 0.025);
        //c.arc(this.center.x, this.center.y, this.radius * 2, this.radius * 2, this.angle, this.angle + Math.PI * 1.5);
        c.strokeWeight(2);
        c.rect(this.center.x - this.radius + 5, this.center.y - 25, this.radius * 2 - 50, 50);
        c.fill(50, 150, 255);
        c.rect(this.center.x - this.radius + 5, this.center.y - 25, (this.radius - 50) * this.progress, 50);

        c.textAlign(p.CENTER, p.CENTER);
        c.textSize(25);
        c.fill(220);
        c.strokeWeight(4);
        c.text(this.message, this.radius, this.radius * 1.5);

        c.textSize(40);
        c.text(Math.floor(this.progress * 100) + '%', this.radius, this.radius / 2);

        p.imageMode(p.CENTER);
        p.image(c, this.pos.x, this.pos.y);
    }

    destroy(){
        this.c.remove();
    }

}