Merge pull request #47 from nullinside-development-group/feature/web-gl

Feature/web gl

Author: ProgrammingByPermutation

src/package-lock.json

@@ -13,35 +13,35 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.2.7",
-    "@angular/cdk": "^18.2.7",
-    "@angular/common": "^18.2.7",
-    "@angular/compiler": "^18.2.7",
-    "@angular/core": "^18.2.7",
-    "@angular/forms": "^18.2.7",
-    "@angular/material": "^18.2.7",
-    "@angular/platform-browser": "^18.2.7",
-    "@angular/platform-browser-dynamic": "^18.2.7",
-    "@angular/router": "^18.2.7",
+    "@angular/animations": "^18.2.8",
+    "@angular/cdk": "^18.2.9",
+    "@angular/common": "^18.2.8",
+    "@angular/compiler": "^18.2.8",
+    "@angular/core": "^18.2.8",
+    "@angular/forms": "^18.2.8",
+    "@angular/material": "^18.2.9",
+    "@angular/platform-browser": "^18.2.8",
+    "@angular/platform-browser-dynamic": "^18.2.8",
+    "@angular/router": "^18.2.8",
     "rxjs": "~7.8.1",
-    "tslib": "^2.7.0",
+    "tslib": "^2.8.0",
     "zone.js": "~0.14.10",
     "webpack-dev-middleware": ">=7.4.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.7",
+    "@angular-devkit/build-angular": "^18.2.9",
     "@angular-eslint/builder": "18.3.1",
     "@angular-eslint/eslint-plugin": "18.3.1",
     "@angular-eslint/eslint-plugin-template": "18.3.1",
     "@angular-eslint/schematics": "18.3.1",
     "@angular-eslint/template-parser": "18.3.1",
-    "@angular/cli": "^18.2.7",
-    "@angular/compiler-cli": "^18.2.7",
+    "@angular/cli": "^18.2.9",
+    "@angular/compiler-cli": "^18.2.8",
     "@types/jasmine": "~5.1.4",
-    "@typescript-eslint/eslint-plugin": "^8.8.0",
-    "@typescript-eslint/parser": "^8.8.0",
-    "eslint": "^9.12.0",
-    "jasmine-core": "~5.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.10.0",
+    "@typescript-eslint/parser": "^8.10.0",
+    "eslint": "^9.13.0",
+    "jasmine-core": "~5.4.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",

src/package.json

@@ -8,9 +8,11 @@ import {LoginComponent} from './view/login/login.component';
 import {TwitchBotIndexComponent} from './view/twitch/twitch-bot-index/twitch-bot-index.component';
 import {TwitchBotConfigComponent} from './view/twitch/twitch-bot-config/twitch-bot-config.component';
 import {ImdbSearchComponent} from './view/imdb-search/imdb-search.component';
+import {BackgroundWebglExampleComponent} from "./view/background-webgl-example/background-webgl-example.component";
 
 export const routes: Routes = [
   {path: '', component: HomeComponent},
+  {path: 'background', component: BackgroundWebglExampleComponent},
   {path: 'user/auth', component: LoginComponent},
   {path: 'user/login', component: LoginLandingComponent},
   {path: 'home', component: HomeComponent},

src/src/app/app.routes.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { LogoComponent } from '../logo/logo.component';
 import { environment } from '../../../../environments/environment';
-import { Router } from '@angular/router';
 import { MatButton } from '@angular/material/button';
 
 @Component({

src/src/app/common/components/standard-banner/standard-banner.component.ts

@@ -0,0 +1,14 @@
+@if(enum === OpenGlBackgrounds.BOX) {
+  <app-background-webgl></app-background-webgl>
+} @else {
+
+}
+
+<app-standard-banner />
+<div class="floating-button">
+  <button mat-stroked-button color="primary" [matMenuTriggerFor]="menu">Menu</button>
+  <mat-menu #menu="matMenu">
+    <button mat-menu-item (click)="this.enum = OpenGlBackgrounds.BOX">Box</button>
+    <button mat-menu-item (click)="this.enum = OpenGlBackgrounds.TEXTURE">Texture</button>
+  </mat-menu>
+</div>

src/src/app/view/background-webgl-example/background-webgl-example.component.html

@@ -0,0 +1,5 @@
+.floating-button {
+  position: absolute;
+  bottom: 0px;
+  right: 50px;
+}

src/src/app/view/background-webgl-example/background-webgl-example.component.scss

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BackgroundWebglExampleComponent } from './background-webgl-example.component';
+
+describe('BackgroundWebglExampleComponent', () => {
+  let component: BackgroundWebglExampleComponent;
+  let fixture: ComponentFixture<BackgroundWebglExampleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BackgroundWebglExampleComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(BackgroundWebglExampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/src/app/view/background-webgl-example/background-webgl-example.component.spec.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import {BackgroundWebglComponent} from "../background-webgl/background-webgl.component";
+import {StandardBannerComponent} from "../../common/components/standard-banner/standard-banner.component";
+import {MatButton} from "@angular/material/button";
+import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
+import {OpenGlBackgrounds} from "./backgrounds";
+
+@Component({
+  selector: 'app-background-webgl-example',
+  standalone: true,
+  imports: [
+    BackgroundWebglComponent,
+    StandardBannerComponent,
+    MatButton,
+    MatMenu,
+    MatMenuItem,
+    MatMenuTrigger
+  ],
+  templateUrl: './background-webgl-example.component.html',
+  styleUrl: './background-webgl-example.component.scss'
+})
+export class BackgroundWebglExampleComponent {
+  public enum: OpenGlBackgrounds = OpenGlBackgrounds.BOX;
+  protected readonly OpenGlBackgrounds = OpenGlBackgrounds;
+}

src/src/app/view/background-webgl-example/background-webgl-example.component.ts

@@ -0,0 +1,4 @@
+export enum OpenGlBackgrounds {
+  BOX,
+  TEXTURE
+}

src/src/app/view/background-webgl-example/backgrounds.ts

@@ -0,0 +1 @@
+<canvas style="position:fixed; top:0;left:0;" #canvas></canvas>