commit bb1675cf816a304234293c62dabeb4e6a05a486f
Author: Nikolai Fesenko <152747946+NikolaiFesenko-code@users.noreply.github.com>
Date: Fri Nov 21 17:36:30 2025 +0100
first frontend upload
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000..f52a49e
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+ Frintend
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/js/menu_console/console_interface_classes.js b/frontend/js/menu_console/console_interface_classes.js
new file mode 100644
index 0000000..25c4113
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/frontend/js/menu_console/console_interface_menu.js b/frontend/js/menu_console/console_interface_menu.js
new file mode 100644
index 0000000..277a93a
--- /dev/null
+++ 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();