Merge pull request #52 from xpquiz/develop

v1.3.3

Author: isahann

package.json

@@ -1,6 +1,6 @@
 {
   "name": "xpquiz.github.io",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/about-window/about-window.component.html

@@ -1,7 +1,7 @@
 <div class="window">
   <app-window-title-bar iconPath="about.png" title="About XPQuiz"></app-window-title-bar>
   <div class="window-body">
-    <label><b>XPQuiz</b>&nbsp;- Version 1.3.2</label>
+    <label><b>XPQuiz</b>&nbsp;- Version 1.3.3</label>
     <label class="main">Created by&nbsp;<b><a href="https://isahann.github.io">Isahann Hanacleto</a></b></label>
 
     <label>Source code at&nbsp;<b><a href="https://github.com/xpquiz/xpquiz.github.io">GitHub</a></b></label>

src/app/main-window/main-window.component.ts

@@ -34,30 +34,27 @@ export class MainWindowComponent implements OnInit {
     await this.router.navigateByUrl(route);
   }
 
-  private startCountdown(): void {
+  private async startCountdown(): Promise<void> {
     const appStorage: AppStorage = this.appStorageService.retrieveAppStorage();
 
     if (appStorage.lastQuizResponseDate === null) return;
 
     const nextResponseMinimumDate: Moment = moment(appStorage.lastQuizResponseDate).add(3, "hours");
 
-    new Promise<void>(async (resolve): Promise<void> => {
-      while (true) {
-        const now: Moment = moment();
+    while (true) {
+      const now: Moment = moment();
 
-        if (now.isSame(nextResponseMinimumDate) || now.isAfter(nextResponseMinimumDate)) {
-          this.quizCanBeAnswered = true;
-          this.appStorageService.clearLastAnsweredDate();
-          resolve();
-          break;
-        }
+      if (now.isSame(nextResponseMinimumDate) || now.isAfter(nextResponseMinimumDate)) {
+        this.quizCanBeAnswered = true;
+        this.appStorageService.clearLastAnsweredDate();
+        break;
+      }
 
-        const timeLeft: Duration = moment.duration(nextResponseMinimumDate.valueOf() - now.valueOf());
+      const timeLeft: Duration = moment.duration(nextResponseMinimumDate.valueOf() - now.valueOf());
 
-        this.remainingTime = `${timeLeft.hours()} hours, ${timeLeft.minutes()} minutes, ${timeLeft.seconds()} seconds`
+      this.remainingTime = `${timeLeft.hours()} hours, ${timeLeft.minutes()} minutes, ${timeLeft.seconds()} seconds`
 
-        await new Promise(f => setTimeout(f, 1000));
-      }
-    });
+      await new Promise(f => setTimeout(f, 1000));
+    }
   }
 }

src/app/question-window/question-window.component.html

@@ -2,14 +2,14 @@
   <div class="window window_question">
     <app-window-title-bar iconPath="question.png" title="Question!"></app-window-title-bar>
     <div class="window-body window_question_body">
-      <ng-container *ngIf="!this.questionLoaded">
+      <ng-container *ngIf="!this.showQuestion">
         <div class="window_question_body_loading">
           <label class="window_question_body_loading_title">Loading your question, please hold on a moment...</label>
           <progress class="window_question_body_loading_progress" max="100" [value]="this.loadingProgressBar"></progress>
         </div>
       </ng-container>
 
-      <ng-container *ngIf="this.questionLoaded">
+      <ng-container *ngIf="this.showQuestion">
         <div class="window_question_body_loaded">
           <label class="window_question_body_loaded_title">{{this.question}}</label>
           <label class="window_question_body_loaded_points">[{{this.questionPoints}} point(s) for this question]</label>

src/app/question-window/question-window.component.ts

@@ -1,20 +1,22 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {TriviaService} from "../../service/trivia.service";
 import {TriviaResponse} from "../../model/TriviaResponse";
 import {Router} from "@angular/router";
 import {PathsEnum} from "../../model/enums/PathsEnum";
 import {AppStorageService} from "../../service/app-storage.service";
 import {QuestionResultTemplateParams} from "../../model/Template";
 import {EncryptionService} from "../../service/encryption.service";
+import {Subscription} from "rxjs";
 
 @Component({
   selector: 'app-question-window',
   templateUrl: './question-window.component.html',
   styleUrls: ['./question-window.component.sass']
 })
-export class QuestionWindowComponent implements OnInit {
+export class QuestionWindowComponent implements OnInit, OnDestroy {
 
   public questionLoaded: boolean = false;
+  public showQuestion: boolean = false;
   public question: string = '';
   public questionPoints: number = 0;
   public answers: string[] = [];
@@ -27,6 +29,7 @@ export class QuestionWindowComponent implements OnInit {
   private questionReadySound: HTMLAudioElement = new Audio('assets/sounds/logon.wav');
   private confirmAnswerSound: HTMLAudioElement = new Audio('assets/sounds/exclamation.wav');
   private correctAnswer: string = '';
+  private getQuizzesSubscription: Subscription | undefined;
 
   constructor(
     private readonly triviaService: TriviaService,
@@ -43,7 +46,11 @@ export class QuestionWindowComponent implements OnInit {
     }
 
     this.startLoadingProgressBar();
-    await this.loadQuestion();
+    this.loadQuestion();
+  }
+
+  public ngOnDestroy() {
+    this.getQuizzesSubscription?.unsubscribe();
   }
 
   public async onClickAnswer(selectedAnswer: string) {
@@ -57,8 +64,8 @@ export class QuestionWindowComponent implements OnInit {
     return selectedAnswer ? `> ${answer} <` : answer;
   }
 
-  private async loadQuestion() {
-    this.triviaService.getQuizzes().subscribe(async (response: TriviaResponse[]): Promise<void> => {
+  private loadQuestion(): void {
+    this.getQuizzesSubscription = this.triviaService.getQuizzes().subscribe((response: TriviaResponse[]): void => {
       const singleQuiz: TriviaResponse = response[0];
 
       this.question = singleQuiz.question.text;
@@ -68,13 +75,8 @@ export class QuestionWindowComponent implements OnInit {
         .sort((a, b) => a.sort - b.sort)
         .map(({value}) => value);
 
-      await new Promise(f => setTimeout(f, 3000));
-
-      this.questionLoaded = true;
-
-      await this.questionReadySound.play();
-
       this.questionPoints = this.sumQuestionPoints(singleQuiz.difficulty, singleQuiz.isNiche);
+      this.questionLoaded = true;
     });
   }
 
@@ -124,19 +126,26 @@ export class QuestionWindowComponent implements OnInit {
     return questionPoints + nichePoints;
   }
 
-  private startLoadingProgressBar(): void {
-    new Promise<void>(async (resolve, reject): Promise<void> => {
-      while (true) {
-        this.loadingProgressBar += 10;
+  private async startLoadingProgressBar(): Promise<void> {
+    let revertProgressBar: boolean = false;
 
-        if (this.loadingProgressBar === this.progressBarMax) {
-          resolve();
+    while (true) {
+      if(this.loadingProgressBar === 100) {
+        revertProgressBar = true;
+
+        if(this.questionLoaded){
+          this.showQuestion = true;
+          await this.questionReadySound.play();
           break;
         }
-
-        await new Promise(f => setTimeout(f, 300));
+      } else if(this.loadingProgressBar === 0) {
+        revertProgressBar = false;
       }
-    });
+
+      this.loadingProgressBar += revertProgressBar ? -10 : 10;
+
+      await new Promise(f => setTimeout(f, 300));
+    }
   }
 
   private async returnHome() {