#24 using moment

package.json

@@ -21,6 +21,7 @@
     "@types/crypto-js": "^4.1.1",
     "angular-cli-ghpages": "^1.0.6",
     "crypto-js": "^4.1.1",
+    "moment": "^2.29.4",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "xp.css": "^0.2.6",

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

@@ -3,6 +3,7 @@ import {ActivatedRoute, Router} from "@angular/router";
 import {PathsEnum} from "../../model/PathsEnum";
 import {StorageService} from "../../service/storage.service";
 import {AppStorage} from "../../model/AppStorage";
+import * as moment from "moment";
 
 @Component({
   selector: 'app-correct-answer-window',
@@ -39,7 +40,7 @@ export class CorrectAnswerWindowComponent implements OnInit {
       {
         ...appStorage,
         currentScore: appStorage.currentScore + this.questionScore,
-        lastQuizResponseDate: new Date()
+        lastQuizResponseDate: moment().toISOString()
       }
     )
   }

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

@@ -6,7 +6,7 @@
     <ng-container *ngIf="!this.quizCanBeAnswered">
       <div class="window-body_quiz-answered">
         <label>You already answered for now... </label>
-        <label>Come back in: &nbsp;<b>[{{this.countdown}}]</b></label>
+        <label>Come back in: &nbsp;<b>[{{this.remainingTime}}]</b></label>
       </div>
     </ng-container>
 

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

@@ -3,6 +3,8 @@ import {StorageService} from "../../service/storage.service";
 import {Router} from "@angular/router";
 import {PathsEnum} from "../../model/PathsEnum";
 import {AppStorage} from "../../model/AppStorage";
+import * as moment from "moment";
+import {Duration, Moment} from "moment";
 
 @Component({
   selector: 'app-main-window',
@@ -12,7 +14,7 @@ import {AppStorage} from "../../model/AppStorage";
 export class MainWindowComponent implements OnInit {
 
   public quizCanBeAnswered: boolean = true;
-  public countdown: string = '';
+  public remainingTime: string = '';
 
   protected readonly PathsEnum = PathsEnum;
 
@@ -24,7 +26,7 @@ export class MainWindowComponent implements OnInit {
 
   public async ngOnInit(): Promise<void> {
     const appStorage: AppStorage = this.storageService.get();
-    const lastQuizResponseDate: Date | null = appStorage.lastQuizResponseDate;
+    const lastQuizResponseDate: string | null = appStorage.lastQuizResponseDate;
 
     this.quizCanBeAnswered = this.checkIfQuizCanBeAnswered(lastQuizResponseDate);
 
@@ -36,50 +38,34 @@ export class MainWindowComponent implements OnInit {
     await this.router.navigateByUrl(route);
   }
 
-  private checkIfQuizCanBeAnswered(lastQuizResponseDate: Date | null): boolean {
+  private checkIfQuizCanBeAnswered(lastQuizResponseDate: string | null): boolean {
     if (lastQuizResponseDate === null) return true;
 
-    const now: Date = new Date();
-    const lastAnsweredDate: Date = new Date();
-    const threeHoursInMs: number = 1000 * 60 * 60 * 3;
+    const now: Moment = moment();
+    const nextResponseMinimumDate: Moment = moment(lastQuizResponseDate).add(3, "hours");
 
-    lastAnsweredDate.setTime(new Date(lastQuizResponseDate).getTime() + threeHoursInMs);
-
-    return now.getTime() >= lastAnsweredDate.getTime();
+    return now.isSame(nextResponseMinimumDate) || now.isAfter(nextResponseMinimumDate);
   }
 
-  private startCountdown(lastQuizResponseDate: Date | null): void {
+  private startCountdown(lastQuizResponseDate: string | null): void {
     if (lastQuizResponseDate === null) return;
 
-    const nextAnswerDate: Date = new Date();
-    const threeHoursInMs: number = 1000 * 60 * 60 * 3;
-
-    nextAnswerDate.setTime(new Date(lastQuizResponseDate).getTime() + threeHoursInMs);
+    const nextResponseMinimumDate: Moment = moment(lastQuizResponseDate).add(3, "hours");
 
-    new Promise<void>(async (resolve, reject): Promise<void> => {
+    new Promise<void>(async (resolve): Promise<void> => {
       while (true) {
-        const now: Date = new Date();
-
-        const sameHour: boolean = now.getUTCHours() === nextAnswerDate.getUTCHours();
-        const sameMinute: boolean = now.getUTCMinutes() === nextAnswerDate.getUTCMinutes();
-        const sameSecond: boolean = now.getUTCSeconds() === nextAnswerDate.getUTCSeconds();
+        const now: Moment = moment();
 
-        if (sameHour && sameMinute && sameSecond) {
+        if (now.isSame(nextResponseMinimumDate) || now.isAfter(nextResponseMinimumDate)) {
           this.quizCanBeAnswered = true;
           this.clearLastAnsweredDate();
           resolve();
           break;
         }
 
-        const newTime: Date = new Date();
-
-        newTime.setTime(nextAnswerDate.getTime() - now.getTime());
-
-        const hours: number = newTime.getUTCHours();
-        const minutes: number = newTime.getUTCMinutes();
-        const seconds: number = newTime.getUTCSeconds();
+        const timeLeft: Duration = moment.duration(nextResponseMinimumDate.valueOf() - now.valueOf());
 
-        this.countdown = `${hours} h, ${minutes} min, ${seconds} s`
+        this.remainingTime = `${timeLeft.hours()} hours, ${timeLeft.minutes()} minutes, ${timeLeft.seconds()} seconds`
 
         await new Promise(f => setTimeout(f, 1000));
       }

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

@@ -3,6 +3,7 @@ import {ActivatedRoute, Router} from "@angular/router";
 import {PathsEnum} from "../../model/PathsEnum";
 import {StorageService} from "../../service/storage.service";
 import {AppStorage} from "../../model/AppStorage";
+import * as moment from "moment";
 
 @Component({
   selector: 'app-wrong-answer-window',
@@ -37,7 +38,7 @@ export class WrongAnswerWindowComponent implements OnInit {
     this.storageService.save({
       ...appStorage,
       currentScore: appStorage.currentScore,
-      lastQuizResponseDate: new Date()
+      lastQuizResponseDate: moment().toISOString()
     });
   }
 }

src/model/AppStorage.ts

@@ -1,4 +1,4 @@
 export interface AppStorage {
   currentScore: number,
-  lastQuizResponseDate: Date | null
+  lastQuizResponseDate: string | null
 }