Frontend refactoring

src/ui/src/app/modules/user/pages/shared/exercise/exercise.component.scss → src/ui/src/app/modules/user/components/exercise/exercise.component.scss

@@ -1,4 +1,4 @@
-@import "../../game-view/game-view.component";
+@import "../../pages/game-view/game-view.component";
 
 .questions{
   background: var(--background);

src/ui/src/app/modules/user/pages/shared/exercise/exercise.component.ts → src/ui/src/app/modules/user/components/exercise/exercise.component.ts

@@ -1,6 +1,6 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {FormControl} from "@angular/forms";
-import {question} from "../../../../../core/interfaces/question";
+import {question} from "../../../../core/interfaces/question";
 
 @Component({
   selector: 'app-exercise',

src/ui/src/app/modules/user/pages/shared/question-preview/question-preview.component.css → src/ui/src/app/modules/user/components/question-preview/question-preview.component.css

@@ -1,4 +1,4 @@
-@import "../../../../../shared/common-styles.scss";
+@import "../../../../shared/common-styles.scss";
 
 .closeButton:hover{
   background-color: var(--leading-color2);

src/ui/src/app/modules/user/pages/shared/question-preview/question-preview.component.ts → src/ui/src/app/modules/user/components/question-preview/question-preview.component.ts

@@ -1,7 +1,7 @@
 import {Component, Inject, OnInit} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
-import {QuestionEditViewComponent} from "../../teacher-view/question-edit-view/question-edit-view.component";
-import {question} from "../../../../../core/interfaces/question";
+import {QuestionEditViewComponent} from "../../pages/teacher-view/question-edit-view/question-edit-view.component";
+import {question} from "../../../../core/interfaces/question";
 import {FormBuilder} from "@angular/forms";
 
 @Component({

src/ui/src/app/modules/user/pages/game-selection/game-selection.component.ts

@@ -27,7 +27,9 @@ export class GameSelectionComponent implements OnDestroy {
   }
 
   navigate(category : CategoryType){
+    console.log("reached")
     this.gameService.startNewGame(category).subscribe(e => {
+      console.log("reached sub")
       this.router.navigate(["user","game"]);
     });
   }

src/ui/src/app/modules/user/pages/game-view/game-view.component.html

@@ -3,11 +3,9 @@ <h1 class="header">{{ getCategoryName() }}</h1>
   <div class="loading" *ngIf="gameService.loading">
 
   </div>
-  <div *ngIf="!gameService.loading">
+  <div *ngIf="!gameService.loading && !this.currentQuestion.finished">
     <div class="progressBar">
-      <div class="progress">
-  <!--      <img class="knife" src="https://png.pngtree.com/png-clipart/20220730/ourmid/pngtree-cartoon-knife-png-image_6093279.png">-->
-      </div>
+      <div class="progress"></div>
     </div>
     <form>
       <app-exercise [currentQuestion]="currentQuestion" [selectedAnswer]="selectedAnswer"></app-exercise>

src/ui/src/app/modules/user/pages/game-view/game-view.component.ts

@@ -1,14 +1,15 @@
 import {AfterViewInit, Component, Inject, OnDestroy, OnInit} from '@angular/core';
-import {FormBuilder, FormControl} from "@angular/forms";
+import {FormBuilder} from "@angular/forms";
 import {gsap} from "gsap";
 import {question} from "../../../../core/interfaces/question";
 import {GameService} from "../../../../core/services/game.service";
 import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from "@angular/material/dialog";
 import {Router} from "@angular/router";
 import {Subject, Subscription, takeUntil, timer} from 'rxjs'
-import { CategoryType } from 'src/app/core/interfaces/game-session';
-import {ExerciseComponent} from "../shared/exercise/exercise.component";
-import {QuestionPreviewComponent} from "../shared/question-preview/question-preview.component";
+import {CategoryType, GameSession} from 'src/app/core/interfaces/game-session';
+import {QuestionPreviewComponent} from "../../components/question-preview/question-preview.component";
+import {ResultDialogComponent} from "./result-dialog/result-dialog.component";
+import {BaseComponent} from "../../../../shared/components/base/base.component";
 
 
 @Component({
@@ -17,114 +18,100 @@ import {QuestionPreviewComponent} from "../shared/question-preview/question-prev
   styleUrls: ['./game-view.component.scss'],
 })
 
-export class GameViewComponent implements OnInit, AfterViewInit, OnDestroy {
+export class GameViewComponent extends BaseComponent implements OnInit, AfterViewInit, OnDestroy {
 
   currentQuestion: question;
   correctAnswers: Array<boolean> = [];
   gameProgress: Subscription;
   answers: string[] = [];
   questionType: CategoryType;
-
   selectedAnswer = this.formBuilder.control("")
-
-  protected componentDestroyed$: Subject<void> = new Subject<void>();
-
-  newGameSubscription$ : Subscription;
-  endGameSubscription$ : Subscription;
-  routerSubscription$ : Subscription;
-
   currentQuestionTimeStart: number;
-  questionIndex : number = 0;
+  questionIndex: number = 0;
 
   constructor(
     private router: Router,
     public formBuilder: FormBuilder,
     public gameService: GameService,
     public dialog: MatDialog
   ) {
+    super();
   }
 
   ngOnInit(): void {
-    //this.newGameSubscription$ = this.gameService.startNewGame(this.questionType).subscribe(e => {
-      this.newQuestion()
-      // });
-    }
-
-  ngAfterViewInit(): void {
-      this.animate();
+    this.newQuestion()
   }
 
-  ngOnDestroy(){
-    this.componentDestroyed$.next();
-    this.componentDestroyed$.complete();
-    this.newGameSubscription$?.unsubscribe();
-    this.routerSubscription$?.unsubscribe();
-    this.gameProgress?.unsubscribe();
-    //TODO: Analyse if memory leak problem could arise
-    //this.endGameSubscription$?.unsubscribe();
+  ngAfterViewInit(): void {
+    this.animate();
   }
 
   newQuestion() {
     this.currentQuestion = this.gameService.getQuestion();
     if (this.currentQuestion.finished) {
-      const dialogRef = this.dialog.open(AnswerDialog, {
-        data: {answers: this.correctAnswers, questions: this.gameService.questions}, panelClass: 'mat-dialog-class'}
+      const dialogRef = this.dialog.open(ResultDialogComponent, {
+          data: {answers: this.correctAnswers, questions: this.gameService.questions}, panelClass: 'mat-dialog-class'
+        }
       );
 
-      this.routerSubscription$ = dialogRef.afterClosed().pipe(takeUntil(this.componentDestroyed$)).subscribe(() => {
+      dialogRef.afterClosed().pipe(takeUntil(this.componentDestroyed$)).subscribe(() => {
         this.router.navigate([""])
       });
 
-      this.endGameSubscription$ = this.gameService.endGame().subscribe();
-
+      this.gameService.endGame().pipe(takeUntil(this.componentDestroyed$)).subscribe();
     } else {
       this.currentQuestionTimeStart = new Date().getTime();
       this.questionIndex++;
       this.animate();
-      this.gameProgress = timer(this.currentQuestion.getTime() * 1000).pipe(takeUntil(this.componentDestroyed$)).subscribe(() => {
+      this.gameProgress = timer(this.currentQuestion.getTime() * 1000).pipe().subscribe(() => {
         this.submit()
       })
     }
     this.answers = this.currentQuestion.getMultipleChoiceAnswers();
   }
 
   animate() {
-    // gsap.fromTo(".knife",{ rotate:0},{ rotate: 765, duration:this.time})
     gsap.fromTo(".progress", {width: "0%"}, {width: "100%", duration: this.currentQuestion.getTime()})
-
   }
 
   submit() {
     const session = this.gameService.getSession();
     this.gameProgress?.unsubscribe();
     const correctAnswer = this.currentQuestion.answer === this.selectedAnswer.value
+
     if (correctAnswer) {
       this.correctAnswers.push(true);
       session.correctAnswersCount++;
     } else {
       this.correctAnswers.push(false);
     }
-    if(this.selectedAnswer) {
+
+    if (this.selectedAnswer) {
       session.givenAnswersCount++;
     }
+
+    this.calculateQuestionStats(session,correctAnswer)
+
+    this.currentQuestion.answer = this.selectedAnswer.value;
+
+    this.selectedAnswer.reset();
+
+    this.newQuestion();
+  }
+
+  calculateQuestionStats(session:GameSession, correctAnswer:boolean){
     const questionTime = new Date().getTime() - this.currentQuestionTimeStart;
     session.averageTimePerQuestion += (questionTime - session.averageTimePerQuestion) / Math.max(this.questionIndex, 1);
-    if(questionTime < session.quickestAnswer && correctAnswer) {
+    if (questionTime < session.quickestAnswer && correctAnswer) {
       session.quickestAnswer = questionTime;
     }
-    if(questionTime > session.slowestAnswer) {
+    if (questionTime > session.slowestAnswer) {
       session.slowestAnswer = questionTime;
     }
-    this.currentQuestion.answer = this.selectedAnswer.value;
-
-    this.selectedAnswer.reset();
-
-    this.newQuestion();
-    this.animate();
   }
 
   getCategoryName() {
-    switch(this.questionType) {
+    switch (this.questionType) {
       case CategoryType.ANALYSIS:
         return "Analysis";
       case CategoryType.GEOMETRY:
@@ -137,33 +124,4 @@ export class GameViewComponent implements OnInit, AfterViewInit, OnDestroy {
         return "Random Insane Mode";
     }
   }
-
-}
-
-@Component({
-  selector: 'answer-dialog',
-  templateUrl: 'answer-dialog.html',
-  styleUrls: ['./game-view.component.scss']
-})
-
-export class AnswerDialog {
-  constructor(
-    public dialogRef: MatDialogRef<AnswerDialog>,
-    public dialog: MatDialog,
-
-  @Inject(MAT_DIALOG_DATA) public data: { answers: Array<boolean>; questions: Array<question> },
-  ) {
-  }
-
-  showQuestion(index:number){
-    this.dialog.open(QuestionPreviewComponent, { data: this.getQuestion(index), width:"40rem", panelClass: 'mat-dialog-class'});
-  }
-
-  getQuestion(index:number): question{
-    return this.data.questions[index]
-  }
-
-  onNoClick(): void {
-    this.dialogRef.close();
-  }
 }

src/ui/src/app/modules/user/pages/game-view/answer-dialog.html → src/ui/src/app/modules/user/pages/game-view/result-dialog/result-dialog.component.html

@@ -1,8 +1,8 @@
 <h1 mat-dialog-title class="header">Result</h1>
 <div mat-dialog-content>
   <div class="resultItem" *ngFor="let answerCorrect of data.answers let i = index">
-    <p *ngIf="answerCorrect" class="correct-highlight">Q{{i}}: Correct!</p>
-    <p *ngIf="!answerCorrect" class="wrong-highlight">Q{{i}}: Incorrect!</p>
+    <p *ngIf="answerCorrect" class="correct-highlight">Question {{i + 1}}: Correct!</p>
+    <p *ngIf="!answerCorrect" class="wrong-highlight">Question {{i + 1}}: Incorrect!</p>
     <button class="previewButton" mat-mini-fab (click)="showQuestion(i)"><mat-icon>preview</mat-icon></button>
   </div>
 </div>

src/ui/src/app/modules/user/pages/game-view/result-dialog/result-dialog.component.scss

@@ -0,0 +1 @@
+@import "../game-view.component";

src/ui/src/app/modules/user/pages/game-view/result-dialog/result-dialog.component.spec.ts

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

src/ui/src/app/modules/user/pages/game-view/result-dialog/result-dialog.component.ts

@@ -0,0 +1,32 @@
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from "@angular/material/dialog";
+import {question} from "../../../../../core/interfaces/question";
+import {QuestionPreviewComponent} from "../../../components/question-preview/question-preview.component";
+
+@Component({
+  selector: 'app-result-dialog',
+  templateUrl: './result-dialog.component.html',
+  styleUrls: ['./result-dialog.component.scss']
+})
+export class ResultDialogComponent{
+
+  constructor(
+    public dialogRef: MatDialogRef<ResultDialogComponent>,
+    public dialog: MatDialog,
+
+    @Inject(MAT_DIALOG_DATA) public data: { answers: Array<boolean>; questions: Array<question> },
+  ) {
+  }
+
+  showQuestion(index:number){
+    this.dialog.open(QuestionPreviewComponent, { data: this.getQuestion(index), width:"40rem", panelClass: 'mat-dialog-class'});
+  }
+
+  getQuestion(index:number): question{
+    return this.data.questions[index]
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+}

src/ui/src/app/modules/user/pages/teacher-view/question/question.component.ts

@@ -3,7 +3,7 @@ import {FormGroup} from "@angular/forms";
 import {TeacherService} from "../../../../../core/services/user/teacher.service";
 import {MatDialog} from "@angular/material/dialog";
 import {QuestionEditViewComponent} from "../question-edit-view/question-edit-view.component";
-import {QuestionPreviewComponent} from "../../shared/question-preview/question-preview.component";
+import {QuestionPreviewComponent} from "../../../components/question-preview/question-preview.component";
 import {question} from "../../../../../core/interfaces/question";
 import {Constants} from "../../../interfaces/selection";
 import { Subscription } from 'rxjs/internal/Subscription';
@@ -21,7 +21,7 @@ export class QuestionComponent implements OnInit, OnDestroy {
   private removeSub$ : Subscription;
 
   constructor(public teacherService:TeacherService, private dialog: MatDialog, private constants: Constants) { }
- 
+
   ngOnDestroy(): void {
     this.removeSub$?.unsubscribe();
   }

src/ui/src/app/modules/user/user.module.ts

@@ -11,7 +11,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { StatsComponent } from './pages/stats/stats.component';
 import { LevelProgressComponent } from './components/level-progress/level-progress.component';
 import { StatsTableComponent } from './components/stats-table/stats-table.component';
-import { AnswerDialog, GameViewComponent } from "./pages/game-view/game-view.component";
+import { GameViewComponent } from "./pages/game-view/game-view.component";
 import { MatCardModule } from "@angular/material/card";
 import { LoginRegisterComponent } from "./pages/login-register/login-register.component";
 import { MatFormFieldModule } from "@angular/material/form-field";
@@ -26,14 +26,14 @@ import {MatSelectModule} from "@angular/material/select";
 import { QuestionEditViewComponent } from './pages/teacher-view/question-edit-view/question-edit-view.component';
 import {QuestionComponent} from './pages/teacher-view/question/question.component';
 import {MatSnackBarModule} from "@angular/material/snack-bar";
-import { ExerciseComponent } from './pages/shared/exercise/exercise.component';
+import { ExerciseComponent } from './components/exercise/exercise.component';
 import { PieGraphComponent } from './components/stats-graphs/pie-graph/pie-graph.component';
 import { LineGraphComponent } from './components/stats-graphs/line-graph/line-graph.component';
-import {MatRippleModule} from "@angular/material/core";
-import {QuestionPreviewComponent} from "./pages/shared/question-preview/question-preview.component";
+import {QuestionPreviewComponent} from "./components/question-preview/question-preview.component";
 import {Constants} from "./interfaces/selection";
 import { SharedModule } from 'src/app/shared/shared.module';
 import {MatTooltipModule} from '@angular/material/tooltip';
+import { ResultDialogComponent } from './pages/game-view/result-dialog/result-dialog.component';
 
 @NgModule({
   declarations: [
@@ -43,7 +43,6 @@ import {MatTooltipModule} from '@angular/material/tooltip';
     StatsTableComponent,
     GameViewComponent,
     LoginRegisterComponent,
-    AnswerDialog,
     GameSelectionComponent,
     TeacherViewComponent,
     QuestionEditViewComponent,
@@ -52,6 +51,7 @@ import {MatTooltipModule} from '@angular/material/tooltip';
     QuestionPreviewComponent,
     PieGraphComponent,
     LineGraphComponent,
+    ResultDialogComponent,
   ],
     imports: [
         CommonModule,

src/ui/src/app/shared/components/text-parallax/text-parallax.component.ts

@@ -24,13 +24,14 @@ export class TextParallaxComponent implements OnInit, OnDestroy {
   async initScrollTriggers() {
     // when removing the revealUp css class has Opacity:0 -> hast to be changed when changing
     // Promise is required to not interrupt the lifecycle of angular -> results in misplaced triggers when routing
-    await new Promise(f => setTimeout(f, 0)).then(()=>{
+    await new Promise(f => setTimeout(f, 50)).then(()=>{
       gsap.registerPlugin(ScrollTrigger)
       gsap.utils.toArray(".revealUp").forEach((elem: any) => {
         ScrollTrigger.create({
           trigger: elem,
           start: "top 90%",
           end: "bottom 10%",
+          markers: true,
           onEnter: () => {
             gsap.fromTo(
               elem,