class Screen {
    elements = [];
    ctx;

    constructor(ctx) {
        this.ctx = ctx;

        this.onFrame = this.onFrame.bind(this);
    }

    addElement(elem) {
        this.elements.push(elem);
    }

    drawAll() {
        this.ctx.clearRect(0,0, windowSize.width, windowSize.height);
        this.elements.forEach(element => {
            this.ctx.save();
            element?.draw(this.ctx);
            this.ctx.restore();
        });
    }


    updateAll() {
        
        this.elements.forEach(element => {
            element?.update();
        });
    }


    onFrame() {
        this.drawAll();
        
        this.updateAll();

        requestAnimationFrame(this.onFrame);
    }
}

class MainMenu extends Screen{

    constructor(ctx) {
        super(ctx);
    }

    load() {
        requestAnimationFrame(this.onFrame);
    }

    
}








class Sprite {

}


class Shape {
    startX;
    startY;

    originX;
    originY;
    
    color;

    rotation = 0;

    draw(ctx) {
        console.log("No Draw Function Set");
    }

    update() {
        console.log("No Update Function Set");
        
    }

    translate(x, y) {
        this.startX = x;
        this.startY = y;
    }
    translateX(x) {
        this.startX = x;
    }
    translateY(y) {
        this.startY = y;
    } 

}
class Rectangle extends Shape{
    width;
    height;

    constructor(startX, startY, width, height, color) {
        super()
        this.startX = startX;
        this.startY = startY;
        this.width = width;
        this.height = height;
        this.color = color;

        this.originX = startX;
        this.originY = startY;
    }

    draw(ctx) {
        ctx.translate(this.originX, this.originY); 
        ctx.rotate(this.rotation);
        ctx.translate(-(this.originX), -(this.originY)); 
        ctx.fillStyle = this.color;
        ctx.fillRect(this.startX,this.startY, this.width,this.height);
    }

    setCenterOrigin() {
        this.originX = this.startX + this.width / 2;
        this.originY = this.startY + this.height / 2;
    }
}

class Circle  extends Shape{
    radius;
}