class GameSelectButton extends ElementsGroup {
    name;

    x;
    y;
    width;
    height;

    constructor(x,y,w,h,name) {
        super();
        this.x = x;
        this.y = y;
        this.width = w;
        this.height = h;
        this.name = name;
    }

    load() {
        var logo = new Rectangle(this.x + 10, this.y + 5, 40, this.height - 5, "rgba(245, 245, 245, 1)");

        var text_name = new Text(this.name ,logo.startX + 50,this.y + 30, "16px serif" , "rgba(190, 32, 32, 1)");

        var background = new Rectangle(this.x,this.y, this.width, this.height, "rgba(26, 32, 29, 1)");
        
        
        this.addElement(background);

        this.addElement(logo);

        this.addElement(text_name);

        console.log(this.elements);
        

        this.draw_selection = (ctx) => {
            //background.color = "rgba(214, 0, 221, 1)";
            
        }

    }
}












const canvas = document.getElementById("main_window");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const ctx = canvas.getContext("2d");

const windowSize = canvas.getBoundingClientRect(); 

var currentScene;



menu = new MainMenu(ctx);

currentScene = menu;


var logo = new Rectangle(10,10,100,100, "rgb(100,200,200)");

var separator = new Line(0, 150, windowSize.width, 150 );
separator.width = 2;


var game1 = new GameSelectButton(20,200,200,50, "Test 1");


console.log(game1);



menu.load = () => {
    document.addEventListener("keypress" , e => { menu.keypress(e)});
    menu.user_can_select = true;

   


    menu.addElement(logo);

    menu.addElement(separator);

    menu.addElement(game1);
    menu.makeSelectable(game1);
    menu.addToSelectable(game1, {x:0, y:0});

    menu.select(game1);
   
     menu.loadAll();
    /* //rect1 = new Rectangle(70,20,100,100, "green");
    rect2 = new Rectangle(10,10,50,50, "red");

    rect3 = new Rectangle(10,200,50,50, "red");
    rect4 = new Rectangle(70,200,50,50, "red");

    menu.addElement(rect1);
    menu.addElement(rect2);
    menu.addElement(rect3);
    menu.addElement(rect4);

    menu.makeSelectable(rect1);
    menu.makeSelectable(rect2);
    menu.makeSelectable(rect3);
    menu.makeSelectable(rect4);

    menu.addToSelectable(rect1, {x:0, y:0});
    menu.addToSelectable(rect2, {x:1, y:0});
    menu.addToSelectable(rect3, {x:0, y:1});
    menu.addToSelectable(rect4, {x:1, y:1});

    //rect1.setCenterOrigin();

    rect1.draw_selection = rect1.drawStroke;
    rect2.draw_selection = rect2.drawStroke;
    rect3.draw_selection = rect3.drawStroke;
    rect4.draw_selection = rect4.drawStroke;



    text = new Text("Tessst" ,10,400, "16px serif" , "rgb(100,100,100)");
    menu.addElement(text);
    let center  = text.getCenterXFrom(menu.ctx, rect1.x, rect1.width);
    text.x = center;
    text.y = rect1.y + 150;
     */
    
    //img = new Sprite(400,400,400,400,"../../img/test2.jpg");
    //img.img = new Image();
    //img.img.src = "../../img/test2.jpg";
   // menu.ctx.drawImage(img2, 200,200);
    //menu.addElement(img);
};













































currentScene.load();
function onFrame() {

    currentScene.drawAll();
    currentScene.updateAll();

    requestAnimationFrame(onFrame);
}

requestAnimationFrame(onFrame);