text and sprite implementation

frontend/js/menu_console/console_interface_classes.js

@@ -288,6 +288,82 @@ class Rectangle extends Shape{
     }
 }
 
+class Text extends Shape{
+    value;
+    font;
+
+    constructor(value, x,y, font, color) {
+        super();
+        this.value = value;
+        this.font = font;
+        this.x = x;
+        this.y = y;
+        this.color = color;
+    }
+
+    draw(ctx) {
+        ctx.font = this.font;
+        ctx.fillStyle = this.color;
+        ctx.fillText(this.value, this.x, this.y);
+    }
+
+    setValue(newValue) {
+        this.value = newValue;
+    }
+    getValue() {
+        return this.value;
+    }
+
+    getWidth(ctx) {
+        return ctx.measureText(this.value);
+    }
+    getCenterXFrom(ctx, x, maxWidth) {
+        let width = this.getWidth(ctx).width;
+        let a = x + (maxWidth / 1);     
+        return (a + (width / (this.value.length + 1)));
+    }
+}
+
+class Sprite extends Rectangle {
+    img;
+    src;
+
+    constructor(x,y,w,h,src) {
+        super(x,y,w,h,"green");
+        this.src = src;
+
+        this.img = new Image();
+        this.img.src = this.src;
+    }
+
+    draw(ctx) {
+        ctx.translate(this.originX, this.originY); 
+        ctx.rotate(this.rotation);
+        ctx.translate(-(this.originX), -(this.originY)); 
+
+        ctx.drawImage(this.img,this.startX,this.startY, this.width,this.height);
+
+        if("is_selected" in this) {
+            if(this.is_selected) {
+                this.draw_selection(ctx);
+            }
+            
+        }
+    }
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
 class Circle  extends Shape{
     radius;
 }

frontend/js/menu_console/console_interface_menu.js

@@ -21,7 +21,7 @@ menu.load = () => {
     document.addEventListener("keypress" , e => { menu.keypress(e)});
     menu.user_can_select = true;
 
-    rect1 = new Rectangle(70,0,100,100, "red");
+    rect1 = new Rectangle(70,20,100,100, "green");
     rect2 = new Rectangle(10,10,50,50, "red");
 
     rect3 = new Rectangle(10,200,50,50, "red");
@@ -48,6 +48,21 @@ menu.load = () => {
     rect2.draw_selection = rect2.drawStroke;
     rect3.draw_selection = rect3.drawStroke;
     rect4.draw_selection = rect4.drawStroke;
+
+
+
+    text = new Text("Tessst" ,10,400, "16px serif" , "rgb(100,100,100)");
+    menu.addElement(text);
+    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();
+    //img.img.src = "../../img/test2.jpg";
+   // menu.ctx.drawImage(img2, 200,200);
+    //menu.addElement(img);
 };