first frontend upload

2025-11-21 17:36:30 +01:00
commit bb1675cf81
3 changed files with 195 additions and 0 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Frintend</title>
+</head>
+<body>
+    <style>
+
+        * {
+            padding: 0;
+            margin: 0;
+        }
+
+        body {
+            overflow-y: hidden;
+        }
+        #main_window {
+            overflow: hidden;
+        }
+    </style>
+    <canvas id="main_window"></canvas>
+
+
+    <script src="js/menu_console/console_interface_classes.js"></script>
+    <script src="js/menu_console/console_interface_menu.js"></script>
+</body>
+</html>
--- a/frontend/js/menu_console/console_interface_classes.js
+++ b/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;
+}
--- a/frontend/js/menu_console/console_interface_menu.js
+++ b/frontend/js/menu_console/console_interface_menu.js
@@ -0,0 +1,34 @@
+const canvas = document.getElementById("main_window");
+
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+const ctx = canvas.getContext("2d");
+
+const windowSize = canvas.getBoundingClientRect(); 
+
+menu = new MainMenu(ctx);
+
+document.addEventListener("keypress", (event) => {
+    console.log(event.key);
+    
+})
+
+
+
+rect = new Rectangle(70,0,100,100, "red");
+
+rect.update = () => {
+    rect.rotation += 0.01;
+    rect.translateX(rect.startX + 0.5);
+    rect.setCenterOrigin();
+}
+
+menu.addElement(rect);
+menu.addElement( new Circle());
+
+rect.setCenterOrigin();
+
+
+
+menu.load();