selection navigation between elements

frontend/js/menu_console/console_interface_classes.js

@@ -1,6 +1,7 @@
 class Selectable {
     is_selected = false;
-
+    x = 0;
+    y = 0;    
 
     select() {
         this.is_selected = true;
@@ -11,6 +12,10 @@ class Selectable {
     draw_selection() {
 
     }
+    setSelectPosition(X ,Y) {
+        this.x = X;
+        this.y = Y;
+    }
 }
 
 
@@ -19,6 +24,12 @@ class Screen {
 
     selectable_objects = [];
     current_selected_element;
+    user_select_position = {x: 0, y: 0};
+    max_select_position = {x: 2, y: 2};
+
+    user_can_select=false; // user can choose elements
+    user_can_navigate=false; // user can go to another screen
+    
     ctx;
 
     constructor(ctx) {
@@ -57,6 +68,92 @@ class Screen {
         requestAnimationFrame(this.onFrame);
     }
 
+    keypress(event) {
+        console.log(event);
+
+        if(this.user_can_select == true) {
+            this.select_key_event(event.key);
+           
+            
+        }
+    }
+    
+    select_key_event(key) {
+        if(key == "d") {
+            this.select_go_right();
+        }
+        if(key == "a") {
+            this.select_go_left();
+        }
+        if(key == "s") {
+            this.select_go_down();
+        }
+        if(key == "w") {
+            this.select_go_up();
+        }
+    }
+    
+    
+
+    
+
+    select_go_right() {
+        if(this.user_select_position.x == this.max_select_position.x - 1) {
+               this.set_select_positionX(0);
+        }
+        else {
+            this.set_select_positionX(this.user_select_position.x + 1);
+        }
+    }
+    select_go_left() {
+        if(this.user_select_position.x == 0) {
+               this.set_select_positionX(this.max_select_position.x - 1);
+        }
+        else {
+            this.set_select_positionX(this.user_select_position.x - 1);
+        }
+    }
+    select_go_down() {
+        if(this.user_select_position.y == this.max_select_position.y - 1) {
+               this.set_select_positionY(0);
+        }
+        else {
+            this.set_select_positionY(this.user_select_position.y + 1);
+        }
+    }
+    select_go_up() {
+        if(this.user_select_position.y == 0) {
+               this.set_select_positionY(this.max_select_position.y - 1);
+        }
+        else {
+            this.set_select_positionY(this.user_select_position.y - 1);
+        }
+    }
+    set_select_positionX(x) {
+        this.user_select_position.x = x;
+        this.select_position_changed();
+    }
+    set_select_positionY(y) {
+        this.user_select_position.y = y;
+        this.select_position_changed();
+    }
+    select_position_changed() {
+        if(this.current_selected_element != null) {
+            this.current_selected_element.unselect();
+        }
+        this.select(this.get_select_object(this.user_select_position))
+        
+    }
+    get_select_object(pos) {
+        var result = null;
+        
+        this.selectable_objects.forEach(element => {
+            if(element.x == pos.x && element.y == pos.y) {
+                result = element;        
+            }
+        })
+        return result;
+    }
     select(obj) {
         obj.select();
         this.current_selected_element = obj;
@@ -71,8 +168,12 @@ class Screen {
         obj.select = select_obj.select;
         obj.unselect = select_obj.unselect;
         obj.draw_selection = select_obj.draw_selection;
+        obj.setSelectPosition  = select_obj.setSelectPosition;
         
-        
+    }
+    addToSelectable(obj, pos) {
+        obj.setSelectPosition(pos.x, pos.y);
+        this.selectable_objects.push(obj);
     }
 }
 
@@ -84,7 +185,9 @@ class MainMenu extends Screen{
 
     load() {
         requestAnimationFrame(this.onFrame);
-
+        document.addEventListener("keypress" , e => { this.keypress(e)});
+        this.user_can_select = true;
+        console.log(this);
         
     }
 
@@ -97,10 +200,10 @@ class MainMenu extends Screen{
 
 
 
+/* Sprite, must place after Rectangle
+class Sprite extends Rectangle{
 
-class Sprite {
-
-}
+} */
 
 
 class Shape {