new draw and update cycle

frontend/js/menu_console/console_interface_classes.js

@@ -18,6 +18,17 @@ class Selectable {
     }
 }
 
+class KeyListener {
+    key;
+    execute() {
+
+    }
+    executeOnKey(event_key) {
+        if(event_key == this.key) {
+            this.execute();
+        }
+    }
+}
 
 class Screen {
     elements = [];
@@ -69,8 +80,6 @@ class Screen {
     }
 
     keypress(event) {
-        console.log(event);
-
         if(this.user_can_select == true) {
             this.select_key_event(event.key);
            
@@ -184,10 +193,7 @@ class MainMenu extends Screen{
     }
 
     load() {
-        requestAnimationFrame(this.onFrame);
+        
-        document.addEventListener("keypress" , e => { this.keypress(e)});
-        this.user_can_select = true;
-        console.log(this);
         
     }
 

frontend/js/menu_console/console_interface_menu.js

@@ -7,48 +7,59 @@ const ctx = canvas.getContext("2d");
 
 const windowSize = canvas.getBoundingClientRect(); 
 
+var currentScene;
+
+
+
 menu = new MainMenu(ctx);
 
-document.addEventListener("keypress", (event) => {
+currentScene = menu;
-    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();
+menu.load = () => {
+    document.addEventListener("keypress" , e => { menu.keypress(e)});
+    menu.user_can_select = true;
+
+    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;
+};
 
 
-setTimeout(() => {
+
-   // menu.unselect();
+
-}, 3000);
+currentScene.load();
+function onFrame() {
+
+    currentScene.drawAll();
+    currentScene.updateAll();
+
+    requestAnimationFrame(onFrame);
+}
+
+requestAnimationFrame(onFrame);