Nikolai/console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first frontend upload

Browse Source
This commit is contained in:
Nikolai Fesenko
2025-11-21 17:36:30 +01:00
commit bb1675cf81
3 changed files with 195 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/index.html Normal file
View File

@@ -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>

132
frontend/js/menu_console/console_interface_classes.js Normal file
View File

@@ -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;
}

34
frontend/js/menu_console/console_interface_menu.js Normal file
View File

@@ -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();