added selection feature

frontend/js/menu_console/console_interface_classes.js

@@ -1,6 +1,24 @@
+class Selectable {
+    is_selected = false;
+
+
+    select() {
+        this.is_selected = true;
+    }
+    unselect() {
+        this.is_selected = false;
+    }
+    draw_selection() {
+
+    }
+}
+
 
 class Screen {
     elements = [];
+
+    selectable_objects = [];
+    current_selected_element;
     ctx;
 
     constructor(ctx) {
@@ -38,6 +56,24 @@ class Screen {
 
         requestAnimationFrame(this.onFrame);
     }
+
+    select(obj) {
+        obj.select();
+        this.current_selected_element = obj;
+    }
+    unselect() {
+        this.current_selected_element.unselect();
+        this.current_selected_element = null;
+    }
+    makeSelectable(obj) {
+        var select_obj = new Selectable();
+        Object.assign(obj, select_obj);
+        obj.select = select_obj.select;
+        obj.unselect = select_obj.unselect;
+        obj.draw_selection = select_obj.draw_selection;
+        
+        
+    }
 }
 
 class MainMenu extends Screen{
@@ -48,6 +84,8 @@ class MainMenu extends Screen{
 
     load() {
         requestAnimationFrame(this.onFrame);
+
+        
     }
 
     
@@ -77,14 +115,16 @@ class Shape {
     rotation = 0;
 
     draw(ctx) {
-        console.log("No Draw Function Set");
+       
     }
 
     update() {
-        console.log("No Update Function Set");
+        
         
     }
 
+    
+
     translate(x, y) {
         this.startX = x;
         this.startY = y;
@@ -119,6 +159,18 @@ class Rectangle extends Shape{
         ctx.translate(-(this.originX), -(this.originY)); 
         ctx.fillStyle = this.color;
         ctx.fillRect(this.startX,this.startY, this.width,this.height);
+
+        if("is_selected" in this) {
+            if(this.is_selected) {
+                this.draw_selection(ctx);
+            }
+            
+        }
+    }
+    drawStroke(ctx) {
+        ctx.strokeStyle = "blue";
+        ctx.lineWidth = 5;
+        ctx.strokeRect(this.startX, this.startY,this.width,this.height);
     }
 
     setCenterOrigin() {

frontend/js/menu_console/console_interface_menu.js

@@ -27,8 +27,17 @@ rect.update = () => {
 menu.addElement(rect);
 menu.addElement( new Circle());
 
+menu.makeSelectable(rect);
+
 rect.setCenterOrigin();
 
+rect.draw_selection = (ctx) => { rect.drawStroke(ctx)}
 
+menu.select(rect);
 
 menu.load();
+
+
+setTimeout(() => {
+    menu.unselect();
+}, 3000);