From 2ebf70c43e6b04b6c8d73082f1497bcdd952cff6 Mon Sep 17 00:00:00 2001 From: Nikolai Fesenko <152747946+NikolaiFesenko-code@users.noreply.github.com> Date: Fri, 28 Nov 2025 13:59:44 +0100 Subject: [PATCH] selection navigation between elements --- .DS_Store | Bin 6148 -> 6148 bytes .../menu_console/console_interface_classes.js | 115 +++++++++++++++++- .../js/menu_console/console_interface_menu.js | 37 ++++-- 3 files changed, 133 insertions(+), 19 deletions(-) diff --git a/.DS_Store b/.DS_Store index ecca49b2e9d3d177e75675f3547cdae6f45d026d..cc72124be9ebd3d5f8b412747afed8e2b857cc62 100644 GIT binary patch delta 15 WcmZoMXffDufr-h?a`Po7BT)b?M+GVX delta 15 WcmZoMXffDufr-h;Wb-8^BT)b?4Fw?p diff --git a/frontend/js/menu_console/console_interface_classes.js b/frontend/js/menu_console/console_interface_classes.js index 9306076..c019cea 100644 --- a/frontend/js/menu_console/console_interface_classes.js +++ b/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 { diff --git a/frontend/js/menu_console/console_interface_menu.js b/frontend/js/menu_console/console_interface_menu.js index 13d0dfa..eab6968 100644 --- a/frontend/js/menu_console/console_interface_menu.js +++ b/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 = () => { - rect.rotation += 0.01; - rect.translateX(rect.startX + 0.5); - rect.setCenterOrigin(); -} +rect3 = new Rectangle(10,200,50,50, "red"); +rect4 = new Rectangle(70,200,50,50, "red"); -menu.addElement(rect); -menu.addElement( new Circle()); +menu.addElement(rect1); +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); \ No newline at end of file