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,14 +7,19 @@ 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);
-    
-})
 
+//menu.select(rect2);
 
+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");
@@ -43,12 +48,18 @@ 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);
+currentScene.load();
+function onFrame() {
+
+    currentScene.drawAll();
+    currentScene.updateAll();
+
+    requestAnimationFrame(onFrame);
+}
+
+requestAnimationFrame(onFrame);