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;
@@ -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{