#22 creating map for score on cache

src/app/correct-answer-window/correct-answer-window.component.ts

@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from "@angular/router";
 import {PathsEnum} from "../../model/PathsEnum";
 import {StorageService} from "../../service/storage.service";
-import {AppStorage} from "../../model/AppStorage";
+import {AppStorage, WeekScore} from "../../model/AppStorage";
 import * as moment from "moment";
 
 @Component({
@@ -35,11 +35,23 @@ export class CorrectAnswerWindowComponent implements OnInit {
 
   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,
-        currentScore: appStorage.currentScore + this.questionScore,
+        weekScoreMap: currentWeekScoreMap,
         lastQuizResponseDate: moment().toISOString()
       }
     )

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

@@ -2,9 +2,20 @@
   <app-window-title-bar iconPath="score.png" title="Score"></app-window-title-bar>
   <div class="window-body">
     <div class="window-body_title">
-      <label>You currently have &nbsp;<b>[{{this.score}}]</b>&nbsp; points!</label>
+      <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>
+        </div>
+        <div class="window-body_title_scores_results">
+          <b><label>[{{this.rightAnswers}}] answers</label></b>
+          <b><label>[{{this.wrongAnswers}}] answers</label></b>
+          <b><label>[{{this.currentScore}}] points</label></b>
+        </div>
+      </div>
     </div>
-
     <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

@@ -10,6 +10,24 @@
     align-items: center
     justify-content: center
 
-    label
-      margin: 5px
+    &_main
+      margin: 10px
       text-align: center
+
+    &_scores
+      display: flex
+      flex-direction: row
+      align-items: center
+      justify-content: space-between
+      width: 200px
+      margin: 10px
+
+      &_titles
+        display: flex
+        flex-direction: column
+        margin: 3px
+
+      &_results
+        display: flex
+        flex-direction: column
+        margin: 3px

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

@@ -2,15 +2,19 @@ import {Component, OnInit} from '@angular/core';
 import {StorageService} from "../../service/storage.service";
 import {Router} from "@angular/router";
 import {PathsEnum} from "../../model/PathsEnum";
-import {AppStorage} from "../../model/AppStorage";
+import {AppStorage, WeekScore} from "../../model/AppStorage";
+import * as moment from "moment";
 
 @Component({
   selector: 'app-score-window',
   templateUrl: './score-window.component.html',
   styleUrls: ['./score-window.component.sass']
 })
 export class ScoreWindowComponent implements OnInit {
-  public score: number = 0;
+  public currentScore: number = 0;
+  public currentWeek: number = 0;
+  public rightAnswers: number = 0;
+  public wrongAnswers: number = 0;
 
   constructor(
     private readonly router: Router,
@@ -19,8 +23,19 @@ export class ScoreWindowComponent implements OnInit {
   }
 
   public ngOnInit(): void {
+    const currentWeek: number = moment().isoWeek();
     const appStorage: AppStorage = this.storageService.get();
-    this.score = appStorage.currentScore;
+    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;
   }
 
   public async returnHome(): Promise<void> {

src/app/wrong-answer-window/wrong-answer-window.component.ts

@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from "@angular/router";
 import {PathsEnum} from "../../model/PathsEnum";
 import {StorageService} from "../../service/storage.service";
-import {AppStorage} from "../../model/AppStorage";
+import {AppStorage, WeekScore} from "../../model/AppStorage";
 import * as moment from "moment";
 
 @Component({
@@ -25,20 +25,33 @@ export class WrongAnswerWindowComponent implements OnInit {
 
   public async ngOnInit(): Promise<void> {
     await this.wrongAnswerSound.play();
-    this.updateStorage();
+    this.saveCurrentScore();
   }
 
   public async returnHome(): Promise<void> {
     await this.router.navigateByUrl(PathsEnum.HOME);
   }
 
-  private updateStorage() {
+  private saveCurrentScore() {
     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)!;
 
-    this.storageService.save({
-      ...appStorage,
-      currentScore: appStorage.currentScore,
-      lastQuizResponseDate: moment().toISOString()
-    });
+    currentWeekScore!.wrongAnswers += 1;
+    currentWeekScoreMap.set(currentWeek, currentWeekScore!);
+
+    this.storageService.save(
+      {
+        ...appStorage,
+        weekScoreMap: currentWeekScoreMap,
+        lastQuizResponseDate: moment().toISOString()
+      }
+    )
   }
 }

src/model/AppStorage.ts

@@ -1,4 +1,10 @@
 export interface AppStorage {
-  currentScore: number,
-  lastQuizResponseDate: string | null
+  lastQuizResponseDate: string | null,
+  weekScoreMap: Map<number, WeekScore> | undefined
+}
+
+export interface WeekScore {
+  score: number,
+  rightAnswers: number,
+  wrongAnswers: number
 }

src/service/storage.service.ts

@@ -16,7 +16,7 @@ export class StorageService {
   }
 
   public save(value: AppStorage): void {
-    const stringfiedObject: string = JSON.stringify(value);
+    const stringfiedObject: string = JSON.stringify(value, this.replacer);
     const encryptedObject: string = this.encrypt(stringfiedObject);
 
     this.localStorage.setItem(this.storageKey, encryptedObject);
@@ -29,7 +29,7 @@ export class StorageService {
         currentScore: 0,
         lastQuizResponseDate: null
       } :
-      JSON.parse(this.decrypt(encryptedItem));
+      JSON.parse(this.decrypt(encryptedItem), this.reviver);
   }
 
   private encrypt(value: string): string {
@@ -41,4 +41,25 @@ export class StorageService {
     const decrypted = AES.decrypt(value, this.encryptionkey);
     return decrypted.toString(enc.Utf8);
   }
+
+  private replacer(key: any, value: any) {
+    if(value instanceof Map) {
+      return {
+        dataType: 'Map',
+        value: Array.from(value.entries()), // or with spread: value: [...value]
+      };
+    } else {
+      return value;
+    }
+  }
+
+  private reviver(key: any, value: any) {
+    if(typeof value === 'object' && value !== null) {
+      if (value.dataType === 'Map') {
+        return new Map(value.value);
+      }
+    }
+    return value;
+  }
+
 }