v1.2.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "xpquiz.github.io",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "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.2.0</label>
+    <label><b>XPQuiz</b>&nbsp;- Version 1.2.1</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/correct-answer-window/correct-answer-window.component.ts

@@ -1,10 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from "@angular/router";
 import {PathsEnum} from "../../model/enums/PathsEnum";
-import {StorageService} from "../../service/storage.service";
-import {AppStorage, WeekScore} from "../../model/AppStorage";
-import * as moment from "moment";
-import {Moment} from "moment/moment";
+import {AppStorageService} from "../../service/app-storage.service";
 
 @Component({
   selector: 'app-correct-answer-window',
@@ -20,15 +17,13 @@ export class CorrectAnswerWindowComponent implements OnInit {
   constructor(
     private readonly router: Router,
     private readonly route: ActivatedRoute,
-    private readonly storageService: StorageService
+    private readonly appStorageService: AppStorageService
   ) {
     this.questionScore = parseInt(this.route.snapshot.paramMap.get('points') ?? '0');
   }
 
   public async ngOnInit(): Promise<void> {
-    const quizCanBeAnswered: boolean = this.checkIfQuizCanBeAnswered();
-
-    if (!quizCanBeAnswered) {
+    if (!this.appStorageService.canQuizBeAnswered()) {
       await this.returnHome();
       return;
     }
@@ -37,43 +32,11 @@ export class CorrectAnswerWindowComponent implements OnInit {
     this.saveCurrentScore();
   }
 
-  private checkIfQuizCanBeAnswered(): boolean {
-    const appStorage: AppStorage = this.storageService.get();
-    const lastQuizResponseDate: string | null = appStorage.lastQuizResponseDate;
-
-    if (lastQuizResponseDate === null) return true;
-
-    const now: Moment = moment();
-    const nextResponseMinimumDate: Moment = moment(lastQuizResponseDate).add(3, "hours");
-
-    return now.isSame(nextResponseMinimumDate) || now.isAfter(nextResponseMinimumDate);
-  }
-
   public async returnHome(): Promise<void> {
     await this.router.navigateByUrl(PathsEnum.HOME);
   }
 
   private saveCurrentScore(): void {
-    const appStorage: AppStorage = this.storageService.get();
-    const currentWeek: number = moment().isoWeek();
-    const newCurrentScoreMap: Map<number, WeekScore> = new Map<number, WeekScore>([[currentWeek, {
-      score: 0,
-      rightAnswers: 0,
-      wrongAnswers: 0,
-    }]]);
-    const currentWeekScoreMap: Map<number, WeekScore> = appStorage.weekScoreMap ?? newCurrentScoreMap;
-    const currentWeekScore: WeekScore = currentWeekScoreMap.get(currentWeek)!;
-
-    currentWeekScore.rightAnswers += 1;
-    currentWeekScore.score += this.questionScore;
-    currentWeekScoreMap.set(currentWeek, currentWeekScore!);
-
-    this.storageService.save(
-      {
-        ...appStorage,
-        weekScoreMap: currentWeekScoreMap,
-        lastQuizResponseDate: moment().toISOString()
-      }
-    )
+    this.appStorageService.saveAnswer(true, this.questionScore);
   }
 }

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

@@ -1,10 +1,10 @@
 import {Component, OnInit} from '@angular/core';
-import {StorageService} from "../../service/storage.service";
 import {Router} from "@angular/router";
 import {PathsEnum} from "../../model/enums/PathsEnum";
 import {AppStorage} from "../../model/AppStorage";
 import * as moment from "moment";
 import {Duration, Moment} from "moment";
+import {AppStorageService} from "../../service/app-storage.service";
 
 @Component({
   selector: 'app-main-window',
@@ -19,46 +19,36 @@ export class MainWindowComponent implements OnInit {
   protected readonly PathsEnum = PathsEnum;
 
   constructor(
-    private readonly storageService: StorageService,
-    private readonly router: Router
+    private readonly router: Router,
+    private readonly appStorageService: AppStorageService
   ) {
   }
 
   public async ngOnInit(): Promise<void> {
-    const appStorage: AppStorage = this.storageService.get();
-    const lastQuizResponseDate: string | null = appStorage.lastQuizResponseDate;
-
-    this.quizCanBeAnswered = this.checkIfQuizCanBeAnswered(lastQuizResponseDate);
+    this.quizCanBeAnswered = this.appStorageService.canQuizBeAnswered();
 
     if (!this.quizCanBeAnswered)
-      this.startCountdown(lastQuizResponseDate);
+      this.startCountdown();
   }
 
   public async redirectTo(route: PathsEnum): Promise<void> {
     await this.router.navigateByUrl(route);
   }
 
-  private checkIfQuizCanBeAnswered(lastQuizResponseDate: string | null): boolean {
-    if (lastQuizResponseDate === null) return true;
-
-    const now: Moment = moment();
-    const nextResponseMinimumDate: Moment = moment(lastQuizResponseDate).add(3, "hours");
-
-    return now.isSame(nextResponseMinimumDate) || now.isAfter(nextResponseMinimumDate);
-  }
+  private startCountdown(): void {
+    const appStorage: AppStorage = this.appStorageService.retrieveAppStorage();
 
-  private startCountdown(lastQuizResponseDate: string | null): void {
-    if (lastQuizResponseDate === null) return;
+    if (appStorage.lastQuizResponseDate === null) return;
 
-    const nextResponseMinimumDate: Moment = moment(lastQuizResponseDate).add(3, "hours");
+    const nextResponseMinimumDate: Moment = moment(appStorage.lastQuizResponseDate).add(3, "hours");
 
     new Promise<void>(async (resolve): Promise<void> => {
       while (true) {
         const now: Moment = moment();
 
         if (now.isSame(nextResponseMinimumDate) || now.isAfter(nextResponseMinimumDate)) {
           this.quizCanBeAnswered = true;
-          this.clearLastAnsweredDate();
+          this.appStorageService.clearLastAnsweredDate();
           resolve();
           break;
         }
@@ -71,15 +61,4 @@ export class MainWindowComponent implements OnInit {
       }
     });
   }
-
-  private clearLastAnsweredDate(): void {
-    const appStorage: AppStorage = this.storageService.get();
-
-    this.storageService.save(
-      {
-        ...appStorage,
-        lastQuizResponseDate: null
-      }
-    );
-  }
 }

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

@@ -3,10 +3,7 @@ import {TriviaService} from "../../service/trivia.service";
 import {TriviaResponse} from "../../model/TriviaResponse";
 import {Router} from "@angular/router";
 import {PathsEnum} from "../../model/enums/PathsEnum";
-import {AppStorage} from "../../model/AppStorage";
-import {Moment} from "moment";
-import * as moment from "moment/moment";
-import {StorageService} from "../../service/storage.service";
+import {AppStorageService} from "../../service/app-storage.service";
 
 @Component({
   selector: 'app-question-window',
@@ -32,14 +29,12 @@ export class QuestionWindowComponent implements OnInit {
   constructor(
     private readonly triviaService: TriviaService,
     private readonly router: Router,
-    private readonly storageService: StorageService
+    private readonly appStorageService: AppStorageService
   ) {
   }
 
   public async ngOnInit(): Promise<void> {
-    const quizCanBeAnswered: boolean = this.checkIfQuizCanBeAnswered();
-
-    if (!quizCanBeAnswered) {
+    if (!this.appStorageService.canQuizBeAnswered()) {
       await this.returnHome();
       return;
     }
@@ -48,18 +43,6 @@ export class QuestionWindowComponent implements OnInit {
     await this.loadQuestion();
   }
 
-  private checkIfQuizCanBeAnswered(): boolean {
-    const appStorage: AppStorage = this.storageService.get();
-    const lastQuizResponseDate: string | null = appStorage.lastQuizResponseDate;
-
-    if (lastQuizResponseDate === null) return true;
-
-    const now: Moment = moment();
-    const nextResponseMinimumDate: Moment = moment(lastQuizResponseDate).add(3, "hours");
-
-    return now.isSame(nextResponseMinimumDate) || now.isAfter(nextResponseMinimumDate);
-  }
-
   public async onClickAnswer(selectedAnswer: string) {
     this.selectedAnswer = selectedAnswer;
     await this.confirmAnswerSound.play();

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

@@ -5,9 +5,9 @@
       <label class="window-body_title_main">Here are your results for week&nbsp;<b>[{{this.currentWeek}}]</b>!</label>
       <div class="window-body_title_scores">
         <div class="window-body_title_scores_titles">
-          <label>Right answers:</label>
-          <label>Wrong answers:</label>
-          <label>Total score:</label>
+          <label>🟩 Right answers:</label>
+          <label>🟥 Wrong answers:</label>
+          <label>🟦 Total score:</label>
         </div>
         <div class="window-body_title_scores_results">
           <b><label>[{{this.rightAnswers}}] answers</label></b>
@@ -17,8 +17,27 @@
       </div>
     </div>
 
+    <div class="window-body_previous-scores">
+      <label class="window-body_previous-scores_title">Here are your previous results:</label>
+      <ul class="tree-view">
+        <li>
+          <ng-container *ngFor="let keyValue of previousScores! | keyvalue">
+            <details>
+              <summary>🗓 Week <b>{{keyValue.key}}</b></summary>
+              <ul>
+                <li>🟩 <b>{{keyValue.value.rightAnswers}}</b> right answers</li>
+                <li>🟥 <b>{{keyValue.value.wrongAnswers}}</b> wrong answers</li>
+                <li>🟦 <b>{{keyValue.value.score}}</b> total points</li>
+              </ul>
+            </details>
+          </ng-container>
+        </li>
+      </ul>
+    </div>
+
     <div class="window-body_buttons">
-      <app-icon-button iconPath="copy.png" title="Share score" [copy-clipboard]="this.clipboardText" (click)="this.showClipboardMessage()"></app-icon-button>
+      <app-icon-button iconPath="copy.png" title="Share score" [copy-clipboard]="this.clipboardText"
+                       (click)="this.showClipboardMessage()"></app-icon-button>
       <app-icon-button iconPath="home.png" title="Return to home"
                        (onButtonClick)="this.returnHome()"></app-icon-button>
     </div>

src/app/score-window/score-window.component.sass

@@ -45,3 +45,17 @@
     color: green
     font-weight: bold
     margin: 5px
+
+  &_previous-scores
+    width: 100%
+    display: flex
+    flex-direction: column
+    align-items: center
+    justify-content: center
+
+    .tree-view
+      margin: 5px
+      width: 200px
+      max-height: 200px
+      overflow: auto
+

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

@@ -1,11 +1,11 @@
 import {Component, OnInit} from '@angular/core';
-import {StorageService} from "../../service/storage.service";
 import {Router} from "@angular/router";
 import {PathsEnum} from "../../model/enums/PathsEnum";
-import {AppStorage, WeekScore} from "../../model/AppStorage";
-import * as moment from "moment";
+import {WeekScore} from "../../model/AppStorage";
+import moment from "moment";
 import {TemplateService} from "../../service/template.service";
 import {TemplateEnum, WeekScoreTemplateParams} from "../../model/enums/Template";
+import {AppStorageService} from "../../service/app-storage.service";
 
 @Component({
   selector: 'app-score-window',
@@ -17,31 +17,19 @@ export class ScoreWindowComponent implements OnInit {
   public currentWeek: number = 0;
   public rightAnswers: number = 0;
   public wrongAnswers: number = 0;
+  public previousScores: Map<number, WeekScore> | null = null;
   public clipboardText: string = '';
   public displayClipboardMessage: boolean = false;
 
   constructor(
     private readonly router: Router,
-    private readonly storageService: StorageService,
-    private readonly templateService: TemplateService
+    private readonly templateService: TemplateService,
+    private readonly appStorageService: AppStorageService
   ) {
   }
 
   public async ngOnInit(): Promise<void> {
-    const currentWeek: number = moment().isoWeek();
-    const appStorage: AppStorage = this.storageService.get();
-    const currentWeekScoreMap: Map<number, WeekScore> | undefined = appStorage.weekScoreMap;
-
-    this.currentWeek = currentWeek;
-
-    if (currentWeekScoreMap === undefined) return;
-
-    const currentWeekScore: WeekScore = currentWeekScoreMap.get(currentWeek)!;
-
-    this.currentScore = currentWeekScore.score;
-    this.rightAnswers = currentWeekScore.rightAnswers;
-    this.wrongAnswers = currentWeekScore.wrongAnswers;
-
+    this.retrieveScore();
     await this.assembleClipboardText();
   }
 
@@ -67,4 +55,18 @@ export class ScoreWindowComponent implements OnInit {
 
     this.clipboardText = await this.templateService.render(TemplateEnum.WEEK_SCORE, templateParams);
   }
+
+  private retrieveScore(): void {
+    const currentWeek: number = moment().isoWeek();
+    const currentWeekScore: WeekScore = this.appStorageService.retrieveScoreByWeek(currentWeek);
+    const previousScoresMap: Map<number, WeekScore> = this.appStorageService.retrieveAppStorage().weekScoreMap!;
+
+    previousScoresMap.delete(currentWeek);
+
+    this.previousScores = previousScoresMap;
+    this.currentScore = currentWeekScore.score;
+    this.rightAnswers = currentWeekScore.rightAnswers;
+    this.wrongAnswers = currentWeekScore.wrongAnswers;
+    this.currentWeek = currentWeek;
+  }
 }