firts interface and elementsgroup imp. + new scenemaster

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;
@@ -356,12 +381,75 @@ class Sprite extends Rectangle {
 
 
 
+class Line extends Shape {
+    startX;
+    startY;
+    endX;
+    endY;
+    color;
+
+    width = 5;
+
+    constructor(startX, startY, endX, endY, color) {
+        super();
+        this.startX = startX;
+        this.startY = startY;
+        this.endX = endX;
+        this.endY = endY;
+
+        this.color = color;
+    
+        
+    }
+    load() {}
+    draw(ctx) {
+        ctx.moveTo(this.startX, this.startY);
+        ctx.lineTo(this.endX, this.endY);
+        ctx.lineWidth =  this.width;
+        ctx.stroke();
+    }
+    update() {
+
+    }
+}
 
 
 
+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{

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;
@@ -15,13 +68,39 @@ menu = new MainMenu(ctx);
 
 currentScene = menu;
 
-//menu.select(rect2);
+
+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;
 
-    rect1 = new Rectangle(70,20,100,100, "green");
+   
+
+
+    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");
 
     rect3 = new Rectangle(10,200,50,50, "red");
@@ -56,7 +135,7 @@ menu.load = () => {
     let center  = text.getCenterXFrom(menu.ctx, rect1.x, rect1.width);
     text.x = center;
     text.y = rect1.y + 150;
-    
+     */
     
     //img = new Sprite(400,400,400,400,"../../img/test2.jpg");
     //img.img = new Image();
@@ -68,6 +147,47 @@ menu.load = () => {
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 currentScene.load();
 function onFrame() {