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

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

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

const windowSize = canvas.getBoundingClientRect(); 

menu = new MainMenu(ctx);

document.addEventListener("keypress", (event) => {
    console.log(event.key);
    
})



rect1 = new Rectangle(70,0,100,100, "red");
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;

//menu.select(rect2);

menu.load();


setTimeout(() => {
   // menu.unselect();
}, 3000);