first frontend upload

frontend/js/menu_console/console_interface_classes.js

@@ -0,0 +1,132 @@
+
+class Screen {
+    elements = [];
+    ctx;
+
+    constructor(ctx) {
+        this.ctx = ctx;
+
+        this.onFrame = this.onFrame.bind(this);
+    }
+
+    addElement(elem) {
+        this.elements.push(elem);
+    }
+
+    drawAll() {
+        this.ctx.clearRect(0,0, windowSize.width, windowSize.height);
+        this.elements.forEach(element => {
+            this.ctx.save();
+            element?.draw(this.ctx);
+            this.ctx.restore();
+        });
+    }
+
+
+    updateAll() {
+        
+        this.elements.forEach(element => {
+            element?.update();
+        });
+    }
+
+
+    onFrame() {
+        this.drawAll();
+        
+        this.updateAll();
+
+        requestAnimationFrame(this.onFrame);
+    }
+}
+
+class MainMenu extends Screen{
+
+    constructor(ctx) {
+        super(ctx);
+    }
+
+    load() {
+        requestAnimationFrame(this.onFrame);
+    }
+
+    
+}
+
+
+
+
+
+
+
+
+class Sprite {
+
+}
+
+
+class Shape {
+    startX;
+    startY;
+
+    originX;
+    originY;
+    
+    color;
+
+    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;
+    }
+    translateX(x) {
+        this.startX = x;
+    }
+    translateY(y) {
+        this.startY = y;
+    } 
+
+}
+class Rectangle extends Shape{
+    width;
+    height;
+
+    constructor(startX, startY, width, height, color) {
+        super()
+        this.startX = startX;
+        this.startY = startY;
+        this.width = width;
+        this.height = height;
+        this.color = color;
+
+        this.originX = startX;
+        this.originY = startY;
+    }
+
+    draw(ctx) {
+        ctx.translate(this.originX, this.originY); 
+        ctx.rotate(this.rotation);
+        ctx.translate(-(this.originX), -(this.originY)); 
+        ctx.fillStyle = this.color;
+        ctx.fillRect(this.startX,this.startY, this.width,this.height);
+    }
+
+    setCenterOrigin() {
+        this.originX = this.startX + this.width / 2;
+        this.originY = this.startY + this.height / 2;
+    }
+}
+
+class Circle  extends Shape{
+    radius;
+}