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 {

frontend/js/menu_console/console_interface_menu.js

@@ -16,28 +16,39 @@ document.addEventListener("keypress", (event) => {
 
 
 
-rect = new Rectangle(70,0,100,100, "red");
+rect1 = new Rectangle(70,0,100,100, "red");
+rect2 = new Rectangle(10,10,50,50, "red");
 
-rect.update = () => {
+rect3 = new Rectangle(10,200,50,50, "red");
-    rect.rotation += 0.01;
+rect4 = new Rectangle(70,200,50,50, "red");
-    rect.translateX(rect.startX + 0.5);
-    rect.setCenterOrigin();
-}
 
-menu.addElement(rect);
+menu.addElement(rect1);
-menu.addElement( new Circle());
+menu.addElement(rect2);
+menu.addElement(rect3);
+menu.addElement(rect4);
 
-menu.makeSelectable(rect);
+menu.makeSelectable(rect1);
+menu.makeSelectable(rect2);
+menu.makeSelectable(rect3);
+menu.makeSelectable(rect4);
 
-rect.setCenterOrigin();
+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});
 
-rect.draw_selection = (ctx) => { rect.drawStroke(ctx)}
+//rect1.setCenterOrigin();
 
-menu.select(rect);
+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();
+   // menu.unselect();
 }, 3000);