From eea5314454029247d1e1f10b30f1836eca1ac68a Mon Sep 17 00:00:00 2001
From: Mykola <fesenkonikolai0@gmail.com>
Date: Mon, 8 Dec 2025 12:37:10 +0100
Subject: [PATCH] firts interface and elementsgroup imp. + new scenemaster

---
 .../menu_console/console_interface_classes.js |  75 ++++++++++--
 .../js/menu_console/console_interface_menu.js | 111 ++++++++++++++++++
 2 files changed, 178 insertions(+), 8 deletions(-)

diff --git a/frontend/js/menu_console/console_interface_classes.js b/frontend/js/menu_console/console_interface_classes.js
index c3d138f..4e653df 100644
--- a/frontend/js/menu_console/console_interface_classes.js
+++ b/frontend/js/menu_console/console_interface_classes.js
@@ -1,7 +1,7 @@
 class Selectable {
     is_selected = false;
-    x = 0;
-    y = 0;    
+    select_x = 0;
+    select_y = 0;    
 
     select() {
         this.is_selected = true;
@@ -13,8 +13,8 @@ class Selectable {
 
     }
     setSelectPosition(X ,Y) {
-        this.x = X;
-        this.y = Y;
+        this.select_x = X;
+        this.select_y = Y;
     }
 }
 
@@ -30,6 +30,24 @@ class KeyListener {
     }
 }
 
+class SceneMaster {
+
+    currentScene;
+
+    scene_cycle() {
+        this.currentScene.drawAll();
+        this.currentScene.updateAll();
+    }
+
+    setCurrentScene(newScene) {
+        this.currentScene = newScene;
+        this.currentScene.load();
+    }
+
+
+}
+
+
 class Screen {
     elements = [];
 
@@ -57,7 +75,7 @@ class Screen {
         this.ctx.clearRect(0,0, windowSize.width, windowSize.height);
         this.elements.forEach(element => {
             this.ctx.save();
-            element?.draw(this.ctx);
+            element.draw(this.ctx);
             this.ctx.restore();
         });
     }
@@ -70,6 +88,12 @@ class Screen {
         });
     }
 
+     loadAll() {
+        
+        this.elements.forEach(element => {
+            element?.load();
+        });
+    }
 
     onFrame() {
         this.drawAll();
@@ -157,7 +181,7 @@ class Screen {
         var result = null;
         
         this.selectable_objects.forEach(element => {
-            if(element.x == pos.x && element.y == pos.y) {
+            if(element.select_x == pos.x && element.select_y == pos.y) {
                 result = element;        
             }
         })
@@ -261,7 +285,7 @@ class Rectangle extends Shape{
         this.originX = startX;
         this.originY = startY;
     }
-
+    load() {}
     draw(ctx) {
         ctx.translate(this.originX, this.originY); 
         ctx.rotate(this.rotation);
@@ -300,6 +324,7 @@ class Text extends Shape{
         this.y = y;
         this.color = color;
     }
+    load() {}
 
     draw(ctx) {
         ctx.font = this.font;
@@ -376,7 +401,7 @@ class Line extends Shape {
     
         
     }
-
+    load() {}
     draw(ctx) {
         ctx.moveTo(this.startX, this.startY);
         ctx.lineTo(this.endX, this.endY);
@@ -390,7 +415,41 @@ class Line extends Shape {
 
 
 
+class ElementsGroup {
+    elements = [];
 
+    load() {
+
+    }
+
+    draw(ctx) {
+        for (let i = 0; i < this.elements.length; i++) {
+            ctx.save();
+            this.elements[i].draw(ctx);
+            ctx.restore();
+        }
+
+        if("is_selected" in this) {
+            if(this.is_selected) {
+                this.draw_selection(ctx);
+            }
+            
+        }
+    }
+
+    update() {
+        for (let i = 0; i < this.elements.length; i++) {
+ 
+            this.elements[i].update();
+
+        }
+    }
+
+    addElement(newElement) {
+        this.elements.push(newElement);
+    }
+
+}
 
 
 class Circle  extends Shape{
diff --git a/frontend/js/menu_console/console_interface_menu.js b/frontend/js/menu_console/console_interface_menu.js
index 22d13de..9cca931 100644
--- a/frontend/js/menu_console/console_interface_menu.js
+++ b/frontend/js/menu_console/console_interface_menu.js
@@ -1,3 +1,56 @@
+class GameSelectButton extends ElementsGroup {
+    name;
+
+    x;
+    y;
+    width;
+    height;
+
+    constructor(x,y,w,h,name) {
+        super();
+        this.x = x;
+        this.y = y;
+        this.width = w;
+        this.height = h;
+        this.name = name;
+    }
+
+    load() {
+        var logo = new Rectangle(this.x + 10, this.y + 5, 40, this.height - 5, "rgba(245, 245, 245, 1)");
+
+        var text_name = new Text(this.name ,logo.startX + 50,this.y + 30, "16px serif" , "rgba(190, 32, 32, 1)");
+
+        var background = new Rectangle(this.x,this.y, this.width, this.height, "rgba(26, 32, 29, 1)");
+        
+        
+        this.addElement(background);
+
+        this.addElement(logo);
+
+        this.addElement(text_name);
+
+        console.log(this.elements);
+        
+
+        this.draw_selection = (ctx) => {
+            //background.color = "rgba(214, 0, 221, 1)";
+            
+        }
+
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
 const canvas = document.getElementById("main_window");
 
 canvas.width = window.innerWidth;
@@ -21,15 +74,32 @@ var logo = new Rectangle(10,10,100,100, "rgb(100,200,200)");
 var separator = new Line(0, 150, windowSize.width, 150 );
 separator.width = 2;
 
+
+var game1 = new GameSelectButton(20,200,200,50, "Test 1");
+
+
+console.log(game1);
+
+
+
 menu.load = () => {
     document.addEventListener("keypress" , e => { menu.keypress(e)});
     menu.user_can_select = true;
 
+   
+
 
     menu.addElement(logo);
 
     menu.addElement(separator);
 
+    menu.addElement(game1);
+    menu.makeSelectable(game1);
+    menu.addToSelectable(game1, {x:0, y:0});
+
+    menu.select(game1);
+   
+     menu.loadAll();
     /* //rect1 = new Rectangle(70,20,100,100, "green");
     rect2 = new Rectangle(10,10,50,50, "red");
 
@@ -77,6 +147,47 @@ menu.load = () => {
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 currentScene.load();
 function onFrame() {