Merge pull request #34 from xpquiz/develop

isahann · web-flow · commit f61ddcad6f19 · 2023-08-08T19:04:15.000-03:00
v1.2.0
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "xpquiz.github.io",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -22,6 +22,7 @@
     "angular-cli-ghpages": "^1.0.6",
     "crypto-js": "^4.1.1",
     "moment": "^2.29.4",
+    "mustache": "^4.2.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "xp.css": "^0.2.6",
@@ -32,6 +33,7 @@
     "@angular/cli": "~16.1.6",
     "@angular/compiler-cli": "^16.1.0",
     "@types/jasmine": "~4.3.0",
+    "@types/mustache": "^4.2.2",
     "jasmine-core": "~4.6.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
diff --git a/src/app/about-window/about-window.component.html b/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.1.0</label>
+    <label><b>XPQuiz</b>&nbsp;- Version 1.2.0</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>
diff --git a/src/app/about-window/about-window.component.ts b/src/app/about-window/about-window.component.ts
@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {Router} from "@angular/router";
-import {PathsEnum} from "../../model/PathsEnum";
+import {PathsEnum} from "../../model/enums/PathsEnum";
 
 @Component({
   selector: 'app-about-window',
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -3,7 +3,7 @@ import {RouterModule, Routes} from '@angular/router';
 import {QuestionWindowComponent} from "./question-window/question-window.component";
 import {MainWindowComponent} from "./main-window/main-window.component";
 import {ScoreWindowComponent} from "./score-window/score-window.component";
-import {PathsEnum} from "../model/PathsEnum";
+import {PathsEnum} from "../model/enums/PathsEnum";
 import {CorrectAnswerWindowComponent} from "./correct-answer-window/correct-answer-window.component";
 import {WrongAnswerWindowComponent} from "./wrong-answer-window/wrong-answer-window.component";
 import {AboutWindowComponent} from "./about-window/about-window.component";
diff --git a/src/app/correct-answer-window/correct-answer-window.component.ts b/src/app/correct-answer-window/correct-answer-window.component.ts
@@ -1,9 +1,10 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from "@angular/router";
-import {PathsEnum} from "../../model/PathsEnum";
+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";
 
 @Component({
   selector: 'app-correct-answer-window',
@@ -25,10 +26,29 @@ export class CorrectAnswerWindowComponent implements OnInit {
   }
 
   public async ngOnInit(): Promise<void> {
+    const quizCanBeAnswered: boolean = this.checkIfQuizCanBeAnswered();
+
+    if (!quizCanBeAnswered) {
+      await this.returnHome();
+      return;
+    }
+
     await this.correctAnswerSound.play();
     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);
   }
diff --git a/src/app/main-window/main-window.component.ts b/src/app/main-window/main-window.component.ts
@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {StorageService} from "../../service/storage.service";
 import {Router} from "@angular/router";
-import {PathsEnum} from "../../model/PathsEnum";
+import {PathsEnum} from "../../model/enums/PathsEnum";
 import {AppStorage} from "../../model/AppStorage";
 import * as moment from "moment";
 import {Duration, Moment} from "moment";
diff --git a/src/app/question-window/question-window.component.ts b/src/app/question-window/question-window.component.ts
@@ -2,7 +2,11 @@ import {Component, OnInit} from '@angular/core';
 import {TriviaService} from "../../service/trivia.service";
 import {TriviaResponse} from "../../model/TriviaResponse";
 import {Router} from "@angular/router";
-import {PathsEnum} from "../../model/PathsEnum";
+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";
 
 @Component({
   selector: 'app-question-window',
@@ -27,15 +31,35 @@ export class QuestionWindowComponent implements OnInit {
 
   constructor(
     private readonly triviaService: TriviaService,
-    private readonly router: Router
+    private readonly router: Router,
+    private readonly storageService: StorageService
   ) {
   }
 
   public async ngOnInit(): Promise<void> {
+    const quizCanBeAnswered: boolean = this.checkIfQuizCanBeAnswered();
+
+    if (!quizCanBeAnswered) {
+      await this.returnHome();
+      return;
+    }
+
     this.startLoadingProgressBar();
     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();
@@ -124,4 +148,8 @@ export class QuestionWindowComponent implements OnInit {
       }
     });
   }
+
+  private async returnHome() {
+    await this.router.navigateByUrl(PathsEnum.HOME);
+  }
 }
diff --git a/src/app/score-window/score-window.component.html b/src/app/score-window/score-window.component.html
@@ -18,9 +18,12 @@
     </div>
 
     <div class="window-body_buttons">
-      <app-icon-button iconPath="copy.png" title="Copy score to clipboard" [copy-clipboard]="this.clipboardMessage"></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>
+    <div *ngIf="this.displayClipboardMessage">
+      <label class="window-body_clipboard-text">Score copied to clipboard!</label>
+    </div>
   </div>
 </div>
diff --git a/src/app/score-window/score-window.component.sass b/src/app/score-window/score-window.component.sass
@@ -40,3 +40,8 @@
 
     app-icon-button
       margin: 3px
+
+  &_clipboard-text
+    color: green
+    font-weight: bold
+    margin: 5px
diff --git a/src/app/score-window/score-window.component.ts b/src/app/score-window/score-window.component.ts
@@ -1,9 +1,11 @@
 import {Component, OnInit} from '@angular/core';
 import {StorageService} from "../../service/storage.service";
 import {Router} from "@angular/router";
-import {PathsEnum} from "../../model/PathsEnum";
+import {PathsEnum} from "../../model/enums/PathsEnum";
 import {AppStorage, WeekScore} from "../../model/AppStorage";
 import * as moment from "moment";
+import {TemplateService} from "../../service/template.service";
+import {TemplateEnum, WeekScoreTemplateParams} from "../../model/enums/Template";
 
 @Component({
   selector: 'app-score-window',
@@ -15,15 +17,17 @@ export class ScoreWindowComponent implements OnInit {
   public currentWeek: number = 0;
   public rightAnswers: number = 0;
   public wrongAnswers: number = 0;
-  public clipboardMessage: string = '';
+  public clipboardText: string = '';
+  public displayClipboardMessage: boolean = false;
 
   constructor(
     private readonly router: Router,
-    private readonly storageService: StorageService
+    private readonly storageService: StorageService,
+    private readonly templateService: TemplateService
   ) {
   }
 
-  public ngOnInit(): void {
+  public async ngOnInit(): Promise<void> {
     const currentWeek: number = moment().isoWeek();
     const appStorage: AppStorage = this.storageService.get();
     const currentWeekScoreMap: Map<number, WeekScore> | undefined = appStorage.weekScoreMap;
@@ -37,19 +41,30 @@ export class ScoreWindowComponent implements OnInit {
     this.currentScore = currentWeekScore.score;
     this.rightAnswers = currentWeekScore.rightAnswers;
     this.wrongAnswers = currentWeekScore.wrongAnswers;
-    this.assembleClipboardMessage();
+
+    await this.assembleClipboardText();
   }
 
   public async returnHome(): Promise<void> {
     await this.router.navigateByUrl(PathsEnum.HOME);
   }
 
-  private assembleClipboardMessage() {
-    this.clipboardMessage = `Here's my score for the week on xpquiz.github.io!
+  public async showClipboardMessage(): Promise<void> {
+    this.displayClipboardMessage = true;
+
+    await new Promise(f => setTimeout(f, 5000));
+
+    this.displayClipboardMessage = false;
+  }
 
-Right answers: ${this.rightAnswers}
-Wrong answers: ${this.wrongAnswers}
-Total score: ${this.currentScore}`;
+  private async assembleClipboardText(): Promise<void> {
+    const templateParams: WeekScoreTemplateParams = {
+      week: this.currentWeek,
+      rightAnswers: this.rightAnswers,
+      wrongAnswers: this.wrongAnswers,
+      totalScore: this.currentScore
+    };
 
+    this.clipboardText = await this.templateService.render(TemplateEnum.WEEK_SCORE, templateParams);
   }
 }
diff --git a/src/app/wrong-answer-window/wrong-answer-window.component.ts b/src/app/wrong-answer-window/wrong-answer-window.component.ts
@@ -1,9 +1,10 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from "@angular/router";
-import {PathsEnum} from "../../model/PathsEnum";
+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";
 
 @Component({
   selector: 'app-wrong-answer-window',
@@ -24,10 +25,29 @@ export class WrongAnswerWindowComponent implements OnInit {
   }
 
   public async ngOnInit(): Promise<void> {
+    const quizCanBeAnswered: boolean = this.checkIfQuizCanBeAnswered();
+
+    if (!quizCanBeAnswered) {
+      await this.returnHome();
+      return;
+    }
+
     await this.wrongAnswerSound.play();
     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);
   }
diff --git a/src/assets/templates/week_score.mustache b/src/assets/templates/week_score.mustache
@@ -0,0 +1,6 @@
+❔ XP Quiz - xpquiz.github.io 🤔
+Here's my week score!
+
+🟩 Right answers: {{rightAnswers}}
+🟥 Wrong answers: {{wrongAnswers}}
+🟦 Total score: {{totalScore}}
diff --git a/src/model/enums/PathsEnum.ts b/src/model/enums/PathsEnum.ts
diff --git a/src/model/enums/Template.ts b/src/model/enums/Template.ts
@@ -0,0 +1,13 @@
+export enum TemplateEnum {
+  WEEK_SCORE = "/assets/templates/week_score.mustache"
+}
+
+export interface TemplateParams {
+}
+
+export interface WeekScoreTemplateParams extends TemplateParams {
+  week: number,
+  rightAnswers: number,
+  wrongAnswers: number,
+  totalScore: number
+}
diff --git a/src/service/template.service.spec.ts b/src/service/template.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TemplateService } from './template.service';
+
+describe('TemplateService', () => {
+  let service: TemplateService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TemplateService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/service/template.service.ts b/src/service/template.service.ts
diff --git a/tsconfig.json b/tsconfig.json
