From 1e59b8bc6c9e491222e651837908417fac01142f Mon Sep 17 00:00:00 2001
From: Isahann Hanacleto <isahanacleto@gmail.com>
Date: Tue, 20 Aug 2024 14:23:50 -0300
Subject: [PATCH 1/3] #64 checkpoint

---
 db.json                                       | 162 ++++++++++++++++--
 package.json                                  |   2 +-
 src/app/app-routing.module.ts                 |  12 +-
 src/app/app.module.ts                         |   8 +-
 .../icon-text-button.component.html           |   7 +
 .../icon-text-button.component.sass           |  13 ++
 .../icon-text-button.component.spec.ts        |  21 +++
 .../icon-text-button.component.ts             |  25 +++
 .../game-mode-window.component.html           |  20 +++
 .../game-mode-window.component.sass           |  17 ++
 .../game-mode-window.component.spec.ts        |  21 +++
 .../game-mode-window.component.ts             |  25 +++
 .../main-window/main-window.component.html    |   2 +-
 .../question-trifecta-window.component.html   |  84 +++++++++
 .../question-trifecta-window.component.sass   | 126 ++++++++++++++
 ...question-trifecta-window.component.spec.ts |  21 +++
 .../question-trifecta-window.component.ts     | 129 ++++++++++++++
 .../question-window.component.html            |   6 +-
 .../question-window.component.ts              |  51 ++----
 src/assets/icons/30x30/normal.png             | Bin 0 -> 7238 bytes
 src/assets/icons/30x30/trifecta.png           | Bin 0 -> 7647 bytes
 src/assets/icons/trifecta.png                 | Bin 0 -> 8800 bytes
 src/model/enums/GameModesEnum.ts              |  21 +++
 src/model/enums/PathsEnum.ts                  |   4 +-
 src/model/questions/Question.ts               |   7 +-
 src/service/trivia.service.ts                 |  65 +++++--
 26 files changed, 766 insertions(+), 83 deletions(-)
 create mode 100644 src/app/common/icon-text-button/icon-text-button.component.html
 create mode 100644 src/app/common/icon-text-button/icon-text-button.component.sass
 create mode 100644 src/app/common/icon-text-button/icon-text-button.component.spec.ts
 create mode 100644 src/app/common/icon-text-button/icon-text-button.component.ts
 create mode 100644 src/app/game-mode-window/game-mode-window.component.html
 create mode 100644 src/app/game-mode-window/game-mode-window.component.sass
 create mode 100644 src/app/game-mode-window/game-mode-window.component.spec.ts
 create mode 100644 src/app/game-mode-window/game-mode-window.component.ts
 create mode 100644 src/app/question-trifecta-window/question-trifecta-window.component.html
 create mode 100644 src/app/question-trifecta-window/question-trifecta-window.component.sass
 create mode 100644 src/app/question-trifecta-window/question-trifecta-window.component.spec.ts
 create mode 100644 src/app/question-trifecta-window/question-trifecta-window.component.ts
 create mode 100644 src/assets/icons/30x30/normal.png
 create mode 100644 src/assets/icons/30x30/trifecta.png
 create mode 100644 src/assets/icons/trifecta.png
 create mode 100644 src/model/enums/GameModesEnum.ts

diff --git a/db.json b/db.json
index bb690b6..4ca9439 100644
--- a/db.json
+++ b/db.json
@@ -1,39 +1,106 @@
 {
   "theTriviaApi": [
     {
-      "category": "society_and_culture",
-      "id": "622a1c367cc59eab6f950408",
-      "correctAnswer": "Rosa Parks",
+      "category": "sport_and_leisure",
+      "id": "62417da50f96c4efe8d773db",
+      "correctAnswer": "San Francisco 49ers",
       "incorrectAnswers": [
-        "Angela Davis",
-        "Dorothy Cotton",
-        "Fanny Lou Hamer"
+        "San Francisco Jaguars",
+        "San Francisco Pistons",
+        "San Francisco Predators"
       ],
       "question": {
-        "text": "Which civil right activist is famous for refusing to give up her seat on a bus to make way for a white person?"
+        "text": "Which of these is an American Football team based in San Francisco?"
       },
       "tags": [
-        "general_knowledge",
-        "people",
-        "society_and_culture"
+        "sport"
       ],
       "type": "text_choice",
       "difficulty": "medium",
       "regions": [],
       "isNiche": false
+    },
+    {
+      "category": "history",
+      "id": "622a1c367cc59eab6f9503ac",
+      "correctAnswer": "Germany",
+      "incorrectAnswers": [
+        "Switzerland",
+        "Denmark",
+        "France"
+      ],
+      "question": {
+        "text": "Which country was first to operate an old age pension scheme?"
+      },
+      "tags": [
+        "history"
+      ],
+      "type": "text_choice",
+      "difficulty": "hard",
+      "regions": [],
+      "isNiche": false
+    },
+    {
+      "category": "arts_and_literature",
+      "id": "649b4f4f828109028d236251",
+      "correctAnswer": "A Spider",
+      "incorrectAnswers": [
+        "A Pig",
+        "A Sheep",
+        "A Horse"
+      ],
+      "question": {
+        "text": "In E.B. White's classic children's book \"Charlotte's Web\", what kind of animal is Charlotte?"
+      },
+      "tags": [
+        "animals",
+        "childrens_literature",
+        "arts_and_literature",
+        "literature"
+      ],
+      "type": "text_choice",
+      "difficulty": "easy",
+      "regions": [],
+      "isNiche": false
     }
   ],
   "openTriviaDb": {
     "response_code": 0,
     "results": [
       {
-        "type": "Ym9vbGVhbg==",
+        "type": "bXVsdGlwbGU=",
+        "difficulty": "bWVkaXVt",
+        "category": "SGlzdG9yeQ==",
+        "question": "V2hlbiBkaWQgdGhlIENyaXNpcyBvZiB0aGUgVGhpcmQgQ2VudHVyeSBiZWdpbj8=",
+        "correct_answer": "MjM1IEFE",
+        "incorrect_answers": [
+          "MjM1IEJD",
+          "MjQyIEFE",
+          "MjEwIEFE"
+        ]
+      },
+      {
+        "type": "bXVsdGlwbGU=",
+        "difficulty": "bWVkaXVt",
+        "category": "RW50ZXJ0YWlubWVudDogVmlkZW8gR2FtZXM=",
+        "question": "V2hpY2ggb2YgdGhlc2UgQ291bnRlci1TdHJpa2UgbWFwcyBpcyBhIGJvbWIgZGVmdXNlIHNjZW5hcmlvPw==",
+        "correct_answer": "UHJvZGlneQ==",
+        "incorrect_answers": [
+          "NzQ3",
+          "SGF2YW5h",
+          "T2lscmln"
+        ]
+      },
+      {
+        "type": "bXVsdGlwbGU=",
         "difficulty": "bWVkaXVt",
-        "category": "RW50ZXJ0YWlubWVudDogSmFwYW5lc2UgQW5pbWUgJiBNYW5nYQ==",
-        "question": "VGhlIGFuaW1hdGVkIGZpbG0gIlNwaXJpdGVkIEF3YXkiIHdvbiB0aGUgQWNhZGVteSBBd2FyZCBmb3IgQmVzdCBBbmltYXRlZCBGZWF0dXJlIGF0IHRoZSA3NXRoIEFjYWRlbXkgQXdhcmRzIGluIDIwMDMu",
-        "correct_answer": "VHJ1ZQ==",
+        "category": "RW50ZXJ0YWlubWVudDogVmlkZW8gR2FtZXM=",
+        "question": "V2hhdCBpcyB0aGUgd29ybGQncyBmaXJzdCB2aWRlbyBnYW1lIGNvbnNvbGU/",
+        "correct_answer": "TWFnbmF2b3ggT2R5c3NleQ==",
         "incorrect_answers": [
-          "RmFsc2U="
+          "Q29sZWNvIFRlbHN0YXI=",
+          "TmludGVuZG8gQ29sb3IgVFYgR2FtZQ==",
+          "QXRhcmkgMjYwMA=="
         ]
       }
     ]
@@ -70,6 +137,71 @@
       ],
       "category": "Code",
       "difficulty": "Easy"
+    },
+    {
+      "id": 1,
+      "question": "How to delete a directory in Linux?",
+      "description": "delete folder",
+      "answers": {
+        "answer_a": "ls",
+        "answer_b": "delete",
+        "answer_c": "remove",
+        "answer_d": "rmdir",
+        "answer_e": null,
+        "answer_f": null
+      },
+      "multiple_correct_answers": "false",
+      "correct_answers": {
+        "answer_a_correct": "false",
+        "answer_b_correct": "false",
+        "answer_c_correct": "false",
+        "answer_d_correct": "true",
+        "answer_e_correct": "false",
+        "answer_f_correct": "false"
+      },
+      "explanation": "rmdir deletes an empty directory",
+      "tip": null,
+      "tags": [],
+      "category": "linux",
+      "difficulty": "Easy"
+    },
+    {
+      "id": 3,
+      "question": "How to check the current disk usage on Linux?",
+      "description": "check current disk usage",
+      "answers": {
+        "answer_a": "df",
+        "answer_b": "usage",
+        "answer_c": "uptime",
+        "answer_d": "free",
+        "answer_e": null,
+        "answer_f": null
+      },
+      "multiple_correct_answers": "false",
+      "correct_answers": {
+        "answer_a_correct": "true",
+        "answer_b_correct": "false",
+        "answer_c_correct": "false",
+        "answer_d_correct": "false",
+        "answer_e_correct": "false",
+        "answer_f_correct": "false"
+      },
+      "correct_answer": "answer_a",
+      "explanation": "df shows you the current disk usage",
+      "tip": "df",
+      "tags": [
+        {
+          "name": "Linux"
+        },
+        {
+          "name": "BASH"
+        },
+        {
+          "name": "cmd"
+        }
+      ],
+      "category": "uncategorized",
+      "difficulty": "easy"
     }
   ]
 }
diff --git a/package.json b/package.json
index 0eed12e..4237d7a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "xpquiz.github.io",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 4a8fb88..8b9711c 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -7,6 +7,8 @@ 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";
+import {GameModeWindowComponent} from "./game-mode-window/game-mode-window.component";
+import {QuestionTrifectaWindowComponent} from "./question-trifecta-window/question-trifecta-window.component";
 
 const routes: Routes = [
     {
@@ -27,9 +29,17 @@ const routes: Routes = [
       component: ScoreWindowComponent
     },
     {
-      path: PathsEnum.QUIZ,
+      path: PathsEnum.GAME_MODE,
+      component: GameModeWindowComponent,
+    },
+    {
+      path: `${PathsEnum.QUIZ_NORMAL}`,
       component: QuestionWindowComponent,
     },
+    {
+      path: `${PathsEnum.QUIZ_TRIFECTA}`,
+      component: QuestionTrifectaWindowComponent,
+    },
     {
       path: `${PathsEnum.CORRECT_ANSWER}/:result`,
       component: CorrectAnswerWindowComponent,
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 220cfc0..b46d839 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -14,6 +14,9 @@ import { CorrectAnswerWindowComponent } from './correct-answer-window/correct-an
 import { WrongAnswerWindowComponent } from './wrong-answer-window/wrong-answer-window.component';
 import { AboutWindowComponent } from './about-window/about-window.component';
 import {CopyClipboardDirective} from "./directives/CopyClipboardDirective";
+import { GameModeWindowComponent } from './game-mode-window/game-mode-window.component';
+import { IconTextButtonComponent } from './common/icon-text-button/icon-text-button.component';
+import { QuestionTrifectaWindowComponent } from './question-trifecta-window/question-trifecta-window.component';
 
 @NgModule({
   declarations: [
@@ -26,7 +29,10 @@ import {CopyClipboardDirective} from "./directives/CopyClipboardDirective";
     CorrectAnswerWindowComponent,
     WrongAnswerWindowComponent,
     AboutWindowComponent,
-    CopyClipboardDirective
+    CopyClipboardDirective,
+    GameModeWindowComponent,
+    IconTextButtonComponent,
+    QuestionTrifectaWindowComponent
   ],
     imports: [
         BrowserModule,
diff --git a/src/app/common/icon-text-button/icon-text-button.component.html b/src/app/common/icon-text-button/icon-text-button.component.html
new file mode 100644
index 0000000..b288d0c
--- /dev/null
+++ b/src/app/common/icon-text-button/icon-text-button.component.html
@@ -0,0 +1,7 @@
+<button (click)="this.onClick()">
+  <img
+    [ngSrc]="'assets/icons/30x30/' + this.iconPath"
+    alt="" [height]="this.iconSize" [width]="this.iconSize"/>
+  <label>{{this.title}}</label>
+  <p>{{this.description}}</p>
+</button>
diff --git a/src/app/common/icon-text-button/icon-text-button.component.sass b/src/app/common/icon-text-button/icon-text-button.component.sass
new file mode 100644
index 0000000..7e310a9
--- /dev/null
+++ b/src/app/common/icon-text-button/icon-text-button.component.sass
@@ -0,0 +1,13 @@
+button
+  display: flex
+  flex-direction: column
+  align-items: center
+  justify-content: center
+  min-height: 100px
+  width: 170px
+
+  img
+    margin: 5px
+
+  label
+    font-weight: bold
diff --git a/src/app/common/icon-text-button/icon-text-button.component.spec.ts b/src/app/common/icon-text-button/icon-text-button.component.spec.ts
new file mode 100644
index 0000000..753ad7b
--- /dev/null
+++ b/src/app/common/icon-text-button/icon-text-button.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IconTextButtonComponent } from './icon-text-button.component';
+
+describe('IconTextButtonComponent', () => {
+  let component: IconTextButtonComponent;
+  let fixture: ComponentFixture<IconTextButtonComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [IconTextButtonComponent]
+    });
+    fixture = TestBed.createComponent(IconTextButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/common/icon-text-button/icon-text-button.component.ts b/src/app/common/icon-text-button/icon-text-button.component.ts
new file mode 100644
index 0000000..71e45dc
--- /dev/null
+++ b/src/app/common/icon-text-button/icon-text-button.component.ts
@@ -0,0 +1,25 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+
+@Component({
+  selector: 'app-icon-text-button',
+  templateUrl: './icon-text-button.component.html',
+  styleUrls: ['./icon-text-button.component.sass']
+})
+export class IconTextButtonComponent {
+
+  @Input()
+  public iconPath: string = '';
+  @Input()
+  public title: string = '';
+  @Input()
+  public description: string = '';
+  @Output()
+  public onButtonClick: EventEmitter<void> = new EventEmitter<void>();
+
+  public readonly iconSize: number = 30;
+
+  public onClick(): void {
+    this.onButtonClick.emit();
+  }
+
+}
diff --git a/src/app/game-mode-window/game-mode-window.component.html b/src/app/game-mode-window/game-mode-window.component.html
new file mode 100644
index 0000000..9cec22d
--- /dev/null
+++ b/src/app/game-mode-window/game-mode-window.component.html
@@ -0,0 +1,20 @@
+<div class="window">
+  <app-window-title-bar iconPath="question.png" title="Pick your game mode!"></app-window-title-bar>
+  <div class="window-body">
+    <label>Pick your game mode!</label>
+
+    <div class="window-body_modes">
+      <ng-container *ngFor="let mode of this.gameModes">
+        <app-icon-text-button
+          [iconPath]="mode.title + '.png'"
+          [title]="mode.title.toUpperCase()"
+          [description]="mode.description"
+          (onButtonClick)="this.router.navigateByUrl('quiz-' + mode.title)"
+        ></app-icon-text-button>
+      </ng-container>
+    </div>
+
+    <app-icon-button iconPath="home.png" title="Return home"
+                     (onButtonClick)="this.router.navigateByUrl(PathsEnum.HOME)"></app-icon-button>
+  </div>
+</div>
diff --git a/src/app/game-mode-window/game-mode-window.component.sass b/src/app/game-mode-window/game-mode-window.component.sass
new file mode 100644
index 0000000..fa65a9d
--- /dev/null
+++ b/src/app/game-mode-window/game-mode-window.component.sass
@@ -0,0 +1,17 @@
+.window-body
+  display: flex
+  flex-direction: column
+  align-items: center
+  justify-content: center
+
+  &_modes
+    display: inherit
+    flex-direction: row
+    align-items: center
+    justify-content: center
+
+    app-icon-text-button
+      margin: 5px
+
+  app-icon-button
+    margin: 5px
diff --git a/src/app/game-mode-window/game-mode-window.component.spec.ts b/src/app/game-mode-window/game-mode-window.component.spec.ts
new file mode 100644
index 0000000..091c4c3
--- /dev/null
+++ b/src/app/game-mode-window/game-mode-window.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GameModeWindowComponent } from './game-mode-window.component';
+
+describe('GameModeWindowComponent', () => {
+  let component: GameModeWindowComponent;
+  let fixture: ComponentFixture<GameModeWindowComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [GameModeWindowComponent]
+    });
+    fixture = TestBed.createComponent(GameModeWindowComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/game-mode-window/game-mode-window.component.ts b/src/app/game-mode-window/game-mode-window.component.ts
new file mode 100644
index 0000000..14607d9
--- /dev/null
+++ b/src/app/game-mode-window/game-mode-window.component.ts
@@ -0,0 +1,25 @@
+import {Component} from '@angular/core';
+import {Router} from "@angular/router";
+import {PathsEnum} from "../../model/enums/PathsEnum";
+import {GameMode} from "../../model/enums/GameModesEnum";
+
+@Component({
+  selector: 'app-game-mode-window',
+  templateUrl: './game-mode-window.component.html',
+  styleUrls: ['./game-mode-window.component.sass']
+})
+export class GameModeWindowComponent {
+
+  protected readonly PathsEnum = PathsEnum;
+
+  protected readonly gameModes: GameMode[] = [
+    GameMode.NORMAL,
+    GameMode.TRIFECTA
+  ];
+
+  constructor(
+    protected readonly router: Router
+  ) {
+  }
+
+}
diff --git a/src/app/main-window/main-window.component.html b/src/app/main-window/main-window.component.html
index 0dcd1a5..8932e2a 100644
--- a/src/app/main-window/main-window.component.html
+++ b/src/app/main-window/main-window.component.html
@@ -12,7 +12,7 @@
 
     <div class="window-body_buttons">
       <app-icon-button iconPath="quiz.png" title="New quiz"
-                       (onButtonClick)="this.redirectTo(PathsEnum.QUIZ)"
+                       (onButtonClick)="this.redirectTo(PathsEnum.GAME_MODE)"
                        [disabled]="!this.quizCanBeAnswered"></app-icon-button>
       <app-icon-button iconPath="score.png" title="My score"
                        (onButtonClick)="this.redirectTo(PathsEnum.SCORES)"></app-icon-button>
diff --git a/src/app/question-trifecta-window/question-trifecta-window.component.html b/src/app/question-trifecta-window/question-trifecta-window.component.html
new file mode 100644
index 0000000..2687f51
--- /dev/null
+++ b/src/app/question-trifecta-window/question-trifecta-window.component.html
@@ -0,0 +1,84 @@
+<div class="host">
+  <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.showQuestions">
+        <div class="window_question_body_image">
+          <img ngSrc="assets/icons/question-loading.png"
+               alt="" height="40" width="40"/>
+        </div>
+        <div class="window_question_body_loading">
+          <label class="window_question_body_loading_title">Loading three questions, please hold on a moment...</label>
+          <progress class="window_question_body_loading_progress" max="100"
+                    [value]="this.loadingProgressBar"></progress>
+        </div>
+      </ng-container>
+
+      <div *ngIf="this.showQuestions" class="window_question_body_questions">
+        <label class="window_question_body_questions_total-points">{{ this.getTotalPointsLabel() }}</label>
+        <label class="window_question_body_questions_sum-points">{{ this.getSumPointsLabel() }}</label>
+
+        <div class="window_question_body_questions_tri">
+          <ng-container *ngFor="let question of questions; index as index">
+            <ul class="tree-view">
+              <div class="window_question_body_loaded">
+                <label class="window_question_body_loaded_title" [innerHTML]="this.question!.question"></label>
+                <label class="window_question_body_loaded_points">[{{ this.question!.points }} point(s) for this
+                  question]</label>
+                <div class="window_question_body_loaded_list">
+                  <ng-container *ngFor="let answer of this.question!.answers">
+                    <button [disabled]="this.shouldDisableAnswer(index, answer)"
+                            [ngClass]="'window_question_body_loaded_list_option-button ' + (answer === this.selectedAnswers[index] ? 'window_question_body_loaded_list_option-button_bold' : '') "
+                            (click)="this.onClickAnswer(index, answer)">{{ this.getAnswerLabel(index, answer) }}
+                    </button>
+                  </ng-container>
+                </div>
+              </div>
+            </ul>
+          </ng-container>
+        </div>
+
+        <label class="window_question_body_questions_hint">To change your answer, click on the selected answer to
+          re-enable all
+          answers.</label>
+      </div>
+    </div>
+  </div>
+
+  <div class="window window_check-answer" *ngIf="this.showQuestions">
+    <app-window-title-bar iconPath="check-question.png"
+                          title="Check your answers!"></app-window-title-bar>
+    <div class="window-body window_check-answer_body">
+      <div class="window_check-answer_body_image">
+        <img *ngIf="this.isSelectingAnswers()"
+             ngSrc="assets/icons/trifecta.png"
+             alt="" height="40" width="40"/>
+        <img *ngIf="this.selectedAllAnswers()"
+             ngSrc="assets/icons/alert.png"
+             alt="" height="40" width="40"/>
+        <img *ngIf="this.confirmedAnswers"
+             ngSrc="assets/icons/loading.png"
+             alt="" height="40" width="40"/>
+      </div>
+      <div class="window_check-answer_body_question">
+        <label class="window_check-answer_body_question_title" *ngIf="this.isSelectingAnswers()">
+          Select 3 answers before continuing...
+        </label>
+        <label class="window_check-answer_body_question_title" *ngIf="this.selectedAllAnswers()">
+          Are you sure about that?
+        </label>
+        <div class="window_check-answer_body_question_buttons"
+             *ngIf="this.selectedAllAnswers() || this.confirmedAnswers">
+          <app-icon-button iconPath="yes.png" title="Yes!"
+                           (onButtonClick)="this.confirmAnswers()"></app-icon-button>
+          <app-icon-button iconPath="no.png" title="No..."
+                           (onButtonClick)="this.validateAnswers()"></app-icon-button>
+        </div>
+        <ng-container *ngIf="this.confirmedAnswers">
+          <label class="window_check-answer_body_question_title">Ok, checking your answer...</label>
+          <progress [max]="this.progressBarMax" [value]="this.answerProgressBar"></progress>
+        </ng-container>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/question-trifecta-window/question-trifecta-window.component.sass b/src/app/question-trifecta-window/question-trifecta-window.component.sass
new file mode 100644
index 0000000..a369a02
--- /dev/null
+++ b/src/app/question-trifecta-window/question-trifecta-window.component.sass
@@ -0,0 +1,126 @@
+.host
+  display: flex
+  flex-direction: column
+  align-items: center
+  justify-content: center
+
+  .window
+    margin: 10px
+
+    &_question
+      &_body
+        display: flex
+        flex-direction: column
+        align-items: center
+        justify-content: center
+
+        &_questions
+          display: flex
+          flex-direction: column
+          align-items: center
+          justify-content: center
+          margin: 5px
+
+          &_total-points
+            font-weight: bold
+
+          &_sum-points
+            font-style: italic
+
+          &_tri
+            display: flex
+            align-items: stretch
+            justify-content: center
+
+            @media(200px < width < 1000px)
+              flex-direction: column
+
+            @media(width > 1000px)
+              flex-direction: row
+
+            ul
+              margin: 5px
+
+          &_hint
+            font-style: italic
+
+        &_loading
+          display: flex
+          flex-direction: column
+          align-items: center
+          justify-content: center
+
+          &_title
+            margin: 5px
+            text-align: center
+
+          &_progress
+            margin: 5px
+
+        &_image
+          width: 30%
+          display: flex
+          align-items: initial
+          justify-content: center
+
+        &_loaded
+          display: flex
+          flex-direction: column
+          align-items: center
+          justify-content: center
+
+          &_title
+            text-align: center
+            margin: 15px
+            font-weight: bold
+            max-width: 250px
+
+          &_points
+            font-style: italic
+            margin: 0px 5px 5px 5px
+
+          &_list
+            display: flex
+            flex-direction: column
+            align-items: center
+            justify-content: center
+            width: 100%
+
+            &_option-button
+              margin: 3px
+              width: 100%
+
+              &_bold
+                font-weight: bold
+
+
+    &_check-answer
+      &_body
+        display: flex
+        flex-direction: row
+        align-items: center
+        justify-content: center
+
+        &_image
+          width: 30%
+          display: flex
+          align-items: initial
+          justify-content: center
+
+        &_question
+          display: flex
+          flex-direction: column
+          align-items: center
+          justify-content: center
+
+          &_title
+            margin: 5px
+
+          &_buttons
+            display: flex
+            flex-direction: row
+            align-items: center
+            justify-content: center
+
+            app-icon-button
+              margin: 3px
diff --git a/src/app/question-trifecta-window/question-trifecta-window.component.spec.ts b/src/app/question-trifecta-window/question-trifecta-window.component.spec.ts
new file mode 100644
index 0000000..d4c9f94
--- /dev/null
+++ b/src/app/question-trifecta-window/question-trifecta-window.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuestionTrifectaWindowComponent } from './question-trifecta-window.component';
+
+describe('QuestionTrifectaWindowComponent', () => {
+  let component: QuestionTrifectaWindowComponent;
+  let fixture: ComponentFixture<QuestionTrifectaWindowComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [QuestionTrifectaWindowComponent]
+    });
+    fixture = TestBed.createComponent(QuestionTrifectaWindowComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/question-trifecta-window/question-trifecta-window.component.ts b/src/app/question-trifecta-window/question-trifecta-window.component.ts
new file mode 100644
index 0000000..6f82564
--- /dev/null
+++ b/src/app/question-trifecta-window/question-trifecta-window.component.ts
@@ -0,0 +1,129 @@
+import {Component} from '@angular/core';
+import {Question} from "../../model/questions/Question";
+import {TriviaService} from "../../service/trivia.service";
+import {Router} from "@angular/router";
+import {EncryptionService} from "../../service/encryption.service";
+import {AppStorageService} from "../../service/app-storage.service";
+import {PathsEnum} from "../../model/enums/PathsEnum";
+import {first} from "rxjs";
+
+@Component({
+  selector: 'app-question-trifecta-window',
+  templateUrl: './question-trifecta-window.component.html',
+  styleUrls: ['./question-trifecta-window.component.sass']
+})
+export class QuestionTrifectaWindowComponent {
+
+  public questions: Question[] = [];
+  public selectedAnswers: string[] | undefined[] = [];
+  public showQuestions: boolean = false;
+  public confirmedAnswers: boolean = false;
+
+  private questionLoaded: boolean = false;
+  private questionAmount: number = 3;
+
+  public loadingProgressBar: number = 0;
+  public answerProgressBar: number = 0;
+  public progressBarMax: number = 100;
+
+  private questionReadySound: HTMLAudioElement = new Audio('assets/sounds/logon.wav');
+  private confirmAnswerSound: HTMLAudioElement = new Audio('assets/sounds/exclamation.wav');
+
+  constructor(
+    private readonly triviaService: TriviaService,
+    private readonly router: Router,
+    private readonly encryptionService: EncryptionService,
+    private readonly appStorageService: AppStorageService
+  ) {
+  }
+
+  public async ngOnInit(): Promise<void> {
+    if (!this.appStorageService.canQuizBeAnswered()) {
+      await this.router.navigateByUrl(PathsEnum.HOME);
+      return;
+    }
+
+    this.startLoadingProgressBar();
+    await this.loadQuestions();
+  }
+
+  private async loadQuestions(): Promise<void> {
+    this.questions = await this.triviaService.fetchQuestion(this.questionAmount);
+    this.questionLoaded = true;
+  }
+
+  private async startLoadingProgressBar(): Promise<void> {
+    let revertProgressBar: boolean = false;
+
+    while (true) {
+      if (this.loadingProgressBar === 100) {
+        revertProgressBar = true;
+
+        if (this.questionLoaded) {
+          this.showQuestions = true;
+          await this.questionReadySound.play();
+          break;
+        }
+      } else if (this.loadingProgressBar === 0) {
+        revertProgressBar = false;
+      }
+
+      this.loadingProgressBar += revertProgressBar ? -10 : 10;
+
+      await new Promise(f => setTimeout(f, 300));
+    }
+  }
+
+  public async onClickAnswer(index: number, answer: string): Promise<void> {
+    if (this.selectedAnswers[index] !== undefined)
+      this.selectedAnswers[index] = undefined;
+    else
+      this.selectedAnswers[index] = answer;
+
+    if (this.selectedAllAnswers())
+      await this.confirmAnswerSound.play();
+  }
+
+  public shouldDisableAnswer(index: number, answer: string): boolean {
+    const selectedAnswer = this.selectedAnswers[index];
+
+    return (selectedAnswer !== undefined && selectedAnswer !== answer) || this.confirmedAnswers;
+  }
+
+  public getTotalPointsLabel(): string {
+    return `This trifecta is worth ${(this.questions[0].points + this.questions[1].points + this.questions[2].points) * 3} points!`;
+  }
+
+  public getSumPointsLabel(): string {
+    const firstQuestionPoints: number = this.questions[0].points;
+    const secondQuestionPoints: number = this.questions[1].points;
+    const thirdQuestionPoints: number = this.questions[2].points;
+    const totalPoints: number = firstQuestionPoints + secondQuestionPoints + thirdQuestionPoints;
+
+    return `(${firstQuestionPoints} + ${secondQuestionPoints} + ${thirdQuestionPoints}) = ${totalPoints} * 3 = ${totalPoints * 3}`;
+  }
+
+  public getAnswerLabel(index: number, answer: string): string {
+    return this.selectedAnswers[index] === answer ? `> ${answer} <` : answer;
+  }
+
+  confirmAnswers() {
+
+  }
+
+  public validateAnswers(): void {
+    this.selectedAnswers = [];
+  }
+
+  public isSelectingAnswers(): boolean {
+    return this.selectedAnswers[0] === undefined ||
+      this.selectedAnswers[1] === undefined ||
+      this.selectedAnswers[2] === undefined;
+  }
+
+  public selectedAllAnswers(): boolean {
+    return this.selectedAnswers[0] !== undefined &&
+      this.selectedAnswers[1] !== undefined &&
+      this.selectedAnswers[2] !== undefined;
+  }
+}
diff --git a/src/app/question-window/question-window.component.html b/src/app/question-window/question-window.component.html
index 04fe100..c8cb0f3 100644
--- a/src/app/question-window/question-window.component.html
+++ b/src/app/question-window/question-window.component.html
@@ -15,10 +15,10 @@
 
       <ng-container *ngIf="this.showQuestion">
         <div class="window_question_body_loaded">
-          <label class="window_question_body_loaded_title" [innerHTML]="this.question"></label>
-          <label class="window_question_body_loaded_points">[{{this.questionPoints}} point(s) for this question]</label>
+          <label class="window_question_body_loaded_title" [innerHTML]="this.question!.question"></label>
+          <label class="window_question_body_loaded_points">[{{this.question!.points}} point(s) for this question]</label>
           <div class="window_question_body_loaded_list">
-            <ng-container *ngFor="let answer of this.answers">
+            <ng-container *ngFor="let answer of this.question!.answers">
               <button [disabled]="this.selectedAnswer"
                       [ngClass]="'window_question_body_loaded_list_option-button ' + (answer === this.selectedAnswer ? 'window_question_body_loaded_list_option-button_bold' : '')"
                       (click)="this.onClickAnswer(answer)">{{ this.getAnswerLabel(answer) }}</button>
diff --git a/src/app/question-window/question-window.component.ts b/src/app/question-window/question-window.component.ts
index 35cdd59..86d7151 100644
--- a/src/app/question-window/question-window.component.ts
+++ b/src/app/question-window/question-window.component.ts
@@ -15,20 +15,19 @@ import {Question} from "../../model/questions/Question";
 })
 export class QuestionWindowComponent implements OnInit, OnDestroy {
 
-  public questionLoaded: boolean = false;
+  public question: Question | undefined;
+
+  private questionLoaded: boolean = false;
   public showQuestion: boolean = false;
-  public question: string = '';
-  public questionPoints: number = 0;
-  public answers: string[] = [];
   public selectedAnswer: string = '';
   public confirmedAnswer: boolean = false;
+
   public progressBarMax: number = 100;
   public answerProgressBar: number = 0;
   public loadingProgressBar: number = 0;
 
   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(
@@ -41,7 +40,7 @@ export class QuestionWindowComponent implements OnInit, OnDestroy {
 
   public async ngOnInit(): Promise<void> {
     if (!this.appStorageService.canQuizBeAnswered()) {
-      await this.returnHome();
+      await this.router.navigateByUrl(PathsEnum.HOME);
       return;
     }
 
@@ -65,17 +64,8 @@ export class QuestionWindowComponent implements OnInit, OnDestroy {
   }
 
   private async loadQuestion(): Promise<void> {
-    const questions: Question[] = await this.triviaService.fetchQuestion();
-    const singleQuestion: Question = questions[0];
-
-    this.question = singleQuestion.question;
-    this.correctAnswer = singleQuestion.correctAnswer;
-    this.answers = [singleQuestion.correctAnswer, ...singleQuestion.incorrectAnswers]
-      .map((value) => ({value, sort: Math.random()}))
-      .sort((a, b) => a.sort - b.sort)
-      .map(({value}) => value);
-
-    this.questionPoints = this.sumQuestionPoints(singleQuestion.difficulty, singleQuestion.isNiche);
+    const questions: Question[] = await this.triviaService.fetchQuestion(1);
+    this.question = questions[0];
     this.questionLoaded = true;
   }
 
@@ -99,32 +89,19 @@ export class QuestionWindowComponent implements OnInit, OnDestroy {
   }
 
   private async redirectFromAnswer(): Promise<void> {
-    const correctAnswer: boolean = this.selectedAnswer === this.correctAnswer;
+    const correctAnswer: boolean = this.selectedAnswer === this.question!.correctAnswer;
     const questionResult: QuestionResultTemplateParams = {
-      question: this.question,
-      questionPoints: correctAnswer ? this.questionPoints : null,
+      question: this.question!.question,
+      questionPoints: correctAnswer ? this.question!.points : null,
       selectedAnswer: `${correctAnswer ? '🟩' : '🟥'} ${this.selectedAnswer}`,
-      rightAnswer: this.correctAnswer,
-      wrongAnswers: this.answers.filter(value => value !== this.correctAnswer)
+      rightAnswer: this.question!.correctAnswer,
+      wrongAnswers: this.question!.answers.filter(value => value !== this.question!.correctAnswer)
     };
     const questionResultData: string = this.encryptionService.encrypt(JSON.stringify(questionResult));
 
     await this.router.navigate([correctAnswer ? PathsEnum.CORRECT_ANSWER : PathsEnum.WRONG_ANSWER, questionResultData]);
   }
 
-  private sumQuestionPoints(questionDifficulty: string, isNiche: boolean): number {
-    const difficultyPointsMap: Map<string, number> = new Map<string, number>([
-      ['easy', 1],
-      ['medium', 3],
-      ['hard', 5]
-    ]);
-
-    const questionPoints: number = difficultyPointsMap.get(questionDifficulty)!;
-    const nichePoints: number = isNiche ? 10 : 0;
-
-    return questionPoints + nichePoints;
-  }
-
   private async startLoadingProgressBar(): Promise<void> {
     let revertProgressBar: boolean = false;
 
@@ -146,8 +123,4 @@ export class QuestionWindowComponent implements OnInit, OnDestroy {
       await new Promise(f => setTimeout(f, 300));
     }
   }
-
-  private async returnHome() {
-    await this.router.navigateByUrl(PathsEnum.HOME);
-  }
 }
diff --git a/src/assets/icons/30x30/normal.png b/src/assets/icons/30x30/normal.png
new file mode 100644
index 0000000000000000000000000000000000000000..88c28b2d7e7174d55ccca55c11f6fee4ca3476a2
GIT binary patch
literal 7238
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
A8vp<R

literal 0
HcmV?d00001

diff --git a/src/assets/icons/30x30/trifecta.png b/src/assets/icons/30x30/trifecta.png
new file mode 100644
index 0000000000000000000000000000000000000000..d6d417c313e1d6efb38e1d858dd835cc1aaa43c0
GIT binary patch
literal 7647
zcmeHLc~}$I77qx8hoV#zcSwUp5ht0M>;aUuECNM|3RsoN%mfC=ViF)IDo|0Wh_bm<
zfvTmVVhhiLyW&bMil|SdQYuBQKDDB)OSLNRPQq%n>etuzy*~`x%$<AB{LXsMIg`xL
z5I<|H;Z_U=!#cp<X9~F5)5G!|@a+nJxe;9I$?yPqK)^VLCAa~UCT0v1ng$G$9&=NZ
zK8!wKZ7~=F!JMX{$8ZyK!!--cM|8~d!F+574gCyaV#=@v*Y#kaU_J<3w}L?}G4eV9
z=JdzX@b|=-!I%N=I<I~K!J$l)jlgWK2s{s?JP9n4AVMZ0mLOaS%m@5UKI@i<Mv5B!
z5P+I2qP)FB1H8SNYK=-x#ghz%e*OF$cmE?EBah9VQRzF5W%ur!Z$b-iZDeIvTKSgR
z#AZwz6~um;?qnVC$+Ar?k?K2m#f_HMvTYx4V_Ggq6}gI>_xNYFPqKn!Zlc>Yd*`j#
zo0NKRGPd=*!4}d}=-CsCR-W2!b!hq`IQ6|nXB?5RV%uYb+-fekr=;v(c6WT6c478}
z_f=^17@L~4%J8Ejj&j$ns!J{w9S+R(N(php>diA9cC+_BIllXPd2#dySwVA)L|)?u
zxrX14nubbSsn*hsvH5MM_mruBXf2x-TbA(Qv%~6HGa`PHoSHnkV(I%!ZJ3)DqvOhL
zHcfRr=JV+TTl;74)^KtsIZYpyHL`E1SH_j!4z;%=?UZA&XM?TAq~0FV^lWIK^t~QC
zluegvs+!$QOix!AG(4C-qWadDf8VdNb2ojwGi}+;DyKG+)vncd^4P<29nE7N_cd>M
znsvb0qTdgu`{R_V?eo`9U<|u4E}_rJk*1e@zn%3^pH#YI=fcxpKmOgsV}T}@syx1&
z!5I7#B@New2M0-Tm4b~CDjCVvE7Y{Z7;Y2wY7CDfbxau<O)1@3ZF>*0m=xj8n$8b~
zgVo+-4COypLx#-_k>YdXa52G}IKj$IF984wQin11ig=|~qIYK*a3x?)FLPK-1Bouq
zofQt^$Xlf$nLIX+4MV<qDiLK(uwuGt2)Sg6&j%e4;Le>DqtmG+98OYF5<7{@R%xO+
zh*&J<z$gbrAwU6Xla)G54=J^dG=veuht%R4O0A<*N+yko$y5nCcNPomGdtx|sDp#M
z;Fa1AD*$_N^q881uwjlu!Rh&gR_B`tKsp3^;S*YEvYO;fA+@Rm4Nm$dl1iOpZ-^;m
zw@$AC0myp+5O|jW>I6-^!5#$8A>&B};H3p(BfVrM_0&uF(K`k$d&)<j@Gb_l$)hQS
z+Q0-jw->NFMx|3}V^r!c@?P3>ZU2FVj*`DbB6{Z!<bdysIdnS7AU>c94wm?+@C4cn
z0Y06vN2qX$kaP(nk&`%2Cd4raMld0S2zX*hjG;IL^Kb#5FA@n+p{xgBfKsc&lsHKP
z0v2ovfN{l`K)~h6Apt2zAfAAaL1F>MgJgsp<>NTaC*;B&5FctNaEP$@p0d$U1b~7u
zf<(kT6cWlw9>n7VC>adol8In0%tH_q!^8$C0++~D8U+TTk5XXKBuA}`Hf+#Nlz6M+
zRhlqxW=VGz(!Cr?>B;zT9|~AR3(f)90}1=N?T8m`(?KBd3=ME+p={XjfMF#x9@EiM
zxU+&NWrDtYLkd`g=`h++h!Ew9xu{Si5WxZg%<U$cMrw>wbkq;SPPbzWIs~f-pn~zC
z?k!L?LXAbkou!@P=fw>0^%fvvfdB$f1{gYUB*4(X^%#BRJI!ENrw?O%0=+y{NdW_*
z-H(KK?*X>3;ln}bOE*o#pVI(WO1w2BrXzj80O&9xhF}yz_)-*=(EmIL7D_r0yQozf
zsY(^^&g!bD28Q%@Fi4dIro%enI%}-7v&KR&sI*1_4fHC4k|)24nof*NH$V?gi9e;)
zsWi!kC1bV>Bj*_JjJNTWAx$!whJ+`<aHCCegPMdvQh;XMq+W1BUOTM2P_!z!E(z0+
zp3%UC?krEb9x+2ZGYk{74YXaEV}miAQqpP1xwjNaF(h#M%Wcnj4fV8GBKe$hcnqeD
zCPCrr$b5gMv`mP=git7kL?DkqJXj!xWFWObe3%fSA{ovVkjBjNHz|#xQj{y<!4fXq
z5pe$lrFjAomk?kigosf-#FNQE?h+CtgmVd!FW`yfFpBr~)GIuVqHO-F-3$spf`C&-
zYmAB|s0e}u^qF`ajd7JSk<{p(ceNVRV4zC@Ny?oi*QgXsOs$Tma6>xbBr1uH?w~6x
zF?A|tcPf4z#ssOM{t#h3*>*|B{CfoWivcd@iRl7DK%|@i#Y&EdAQ>qVLPAio_&ih~
zAo%?MGhhEjjY+;-j$(2GC`*#YFHq?b2!X`}4g<A$vgZ=UbJ6VwnkU2i5_7DfWWFS8
z(Ir9zA;QiSFX%||9Z}`Rp*z^l9PP&WV;1j7>^{Z_`v8QmA%SakpnH^n7U&gC5rWCY
zI9Du(aJdkNL>P~RFfo0oF@zL~WL&;nW~{Ry=hKKU%K5LK35*!3zuFcVjpNpJAiJ7B
zPtdQ?1y0+ez<FWOy(_>3U_?U;Cc+4WPhv167QvvK<MA*^M9M&GhzbRWkO$g90d90a
zJoOR?QUH?}PfS335(lw@@o@-4xO|9@hy+|Y0*mAVes2ilU8hiPoL4AeB=7M`0|YUy
zfmbE)=EdoH_3Dril$gKs)6pILoh+Elw@lv1zHiO-)?9C7fj1(48(nYB^+pzWBjUHw
z^<OiWRrim#q!PTiCV`)3_egw8z|Xqx$R_#uFxu(A&-QQ511tYf`$uRQ47MXZO!Ora
z6TzZ|E+E*~;=1L#cGmA~RR`5E80P&0d_1N8HQQIujF<Wjs#%z{vk98Hr@W-3q&_mT
z<X_Uz^iq$zj%gk|v-@dBZEOchWrO%<ev3-a%$zVbbEVDv)<YJ)#|D`C=MN1X&Kww+
zQ<Xoki3P<sHCO3&mN(xn6i>KyVSm#<o1H???{-8x{aW0<wq4A<z;JW0zoCaN%?uyS
zTG|k^J;!H7lhyWt?FFCwo*#G-y`#Fe!s6k+vvvI<?OV3ZkUoBPoILicuUXEOl}uJl
z$>hil`Ce<S!kmN7`8a1#<JhwgdK13qAH3IYu`VR#>D}{d8JAI>{m!&4);=Cl-_9=l
zI&VSR#wdr1T;KB#6^#q@&CM0jAGYuN%4JBDh0Oq$yBRwkTp3yTz`10owRipW8Ph8k
zT+69kmo)WSzp{c5<ZOh18TP2s3GMG~TOaY!!>EYMwSE^SJd{t(&MJUXSmN@Xu=4i3
zyi4bf?8~lQ^p2x-!6f^3`#T}?j&Ce@+Ryf6*oYIYaiw2<UX_ws9^nBChHOmc6%XHH
zlHxJewLGx6VrppQ?f2NVde5{G57Wo(GaYPN0YCW})`V3SrQiL!y1|mDn>x-firna1
zFT2uj{i%k)Yg=P88e~J3*V#<Ymf2>;9Y33uw6Ey#ij*IMJ#t1h2BCG>oWdU#{j<?|
z;<TtEm2o%ws@$4e6v=m!FWvpvCGgYKR%vMg^~KPnC0|&6r3gb$tR7$4ciH+Y%hDQ#
z+m*4C=iLk|j{mOwr}t}$oc3jyOY6u-^JblHIPH~mAgHh+kl}EkAbT>7=znqI){P&_
zQd8kSCb*8Z>l5~U(WtiD?OU*rxbshIS81=VovE{boPTEWu3_BDj5*_vHD0t!u3k5Q
zwb=LA;$VFM_NXoPYY$aa)-MIythPCf-F{>5_09XYTjN(ZeRSiJV9x!<3Wo!k_v|Y(
zBB}SnmW{Ef&iu?Qf0cenMdRm!TPtD@&p(p?=$9>}&Lu9TyTtSO%~15Ag;;6j?nl3V
zadZD{h9lLoCbMBUSzUMWq!b-kRk($}!tt`xHMV)gN0%K5$u2>RMk_t%3fCQbklFBK
z-odt?8XjG)UIeWu7`BX?SY0d(`u)5`%+aEz(PrjrezeTKGb(m<e#?NkxqgG5t!yp6
z>6!5CUd5&-4;qwN`>KxS5{xlkit3y+UH=1-mk-|*phE*cp|pNBm&RLYw@tckKjmKY
zwD0$f+O%VTT<f<Evwz-@+&+t$x+ZM;mm++5VxvVtc9KhYZo<RL1$L|FWwrz^ns#Q$
z((<{h0!}o}-r#cT_W_KwviHw@S~Fr&Vdjzn_p&Ks{HWN%JL@)iE{=4?nr-i8ulddU
zlS9vJW~@q%DP41VgWYCE?8V6K1Cz^mWf5zlC)vjB54q_5^Cjel)trr+ib~Hd|K6Ug
z$-8=TZCI+0?S>Qo&V|pJ6F+as`B#g4MV_f&%8=aB<?b`5M_k&mdg_3Qhw;nNRL+v6
zcBkaC!%{Dds13hfclv3?=9A%D2SqkjmDs0bgv>B|99XO77dfds2j4eM_(yuM;>Z@U
zxX%pLn7F<54kh0dNE6b<SN)~eZ};E)gjLTUL{e981;ho-a~R`tW~a-(RkgEF_QHz6
zD@T`FO6y#zxwRRk!x%2LeLvq-PYr31a<b=T)y#I_GWz!$u3K;2qBc{D%$Are#+I*b
z3^M8GRJ=LO=H$mCHvG6gwXI0}Yi*kL+JgH>59XP@8~lswxP+>KZM(nm+Y)ZJD^HPa
n(xTZt^2uq)ZW%dW|I|WToj;Q2?579Gk`dq=;`60fRQi7aaKe>O

literal 0
HcmV?d00001

diff --git a/src/assets/icons/trifecta.png b/src/assets/icons/trifecta.png
new file mode 100644
index 0000000000000000000000000000000000000000..b9173b233bce03e98cc0f33ece0bf69e0159faca
GIT binary patch
literal 8800
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
L*ISiZ`o#PX&-o|E

literal 0
HcmV?d00001

diff --git a/src/model/enums/GameModesEnum.ts b/src/model/enums/GameModesEnum.ts
new file mode 100644
index 0000000..5c4ef55
--- /dev/null
+++ b/src/model/enums/GameModesEnum.ts
@@ -0,0 +1,21 @@
+export class GameMode {
+  static readonly NORMAL = new GameMode('normal', 'Standard mode. Answer a question, wait 3 hours to play again. Simple as that.', 1);
+  static readonly TRIFECTA = new GameMode('trifecta', 'Three questions for three times the score! At the risk of waiting 24 hours to play again.', 3);
+
+  private constructor(public readonly title: string,
+                      public readonly description: string,
+                      public readonly questions: number) {
+  }
+
+  public static getByTitle(title: string): GameMode {
+    switch(title) {
+      case 'normal':
+        return GameMode.NORMAL;
+      case 'trifecta':
+        return GameMode.TRIFECTA;
+      default:
+        return GameMode.NORMAL;
+    }
+  }
+}
+
diff --git a/src/model/enums/PathsEnum.ts b/src/model/enums/PathsEnum.ts
index b642f28..bef3279 100644
--- a/src/model/enums/PathsEnum.ts
+++ b/src/model/enums/PathsEnum.ts
@@ -2,7 +2,9 @@ export enum PathsEnum {
   HOME = 'home',
   SCORES = 'scores',
   ABOUT = 'about',
-  QUIZ = 'quiz',
+  GAME_MODE = 'game-mode',
+  QUIZ_NORMAL = 'quiz-normal',
+  QUIZ_TRIFECTA = 'quiz-trifecta',
   CORRECT_ANSWER = 'correct-answer',
   WRONG_ANSWER = 'wrong-answer',
 }
diff --git a/src/model/questions/Question.ts b/src/model/questions/Question.ts
index b1e14e6..bfa8ea1 100644
--- a/src/model/questions/Question.ts
+++ b/src/model/questions/Question.ts
@@ -1,7 +1,10 @@
 export interface Question {
   question: string;
+  answers: string[];
   correctAnswer: string;
-  incorrectAnswers: string[];
-  difficulty: 'easy' | 'medium' | 'hard';
+  points: number;
+  difficulty: DifficultyType;
   isNiche: boolean;
 }
+
+export type DifficultyType = 'easy' | 'medium' | 'hard';
diff --git a/src/service/trivia.service.ts b/src/service/trivia.service.ts
index baa1dca..4cd732a 100644
--- a/src/service/trivia.service.ts
+++ b/src/service/trivia.service.ts
@@ -3,7 +3,7 @@ import {HttpClient} from "@angular/common/http";
 import {firstValueFrom} from "rxjs";
 import {TheTriviaApiResponse} from "../model/questions/TheTriviaApiResponse";
 import {OpenTriviaDBResponse} from "../model/questions/OpenTriviaDBResponse";
-import {Question} from "../model/questions/Question";
+import {DifficultyType, Question} from "../model/questions/Question";
 import {
   QuizAPIResponse,
   QuizAPIResponseAnswers,
@@ -11,12 +11,18 @@ import {
 } from "../model/questions/QuizAPIResponse";
 import {environment} from "../environments/environment";
 
+
 @Injectable({
   providedIn: 'root'
 })
 export class TriviaService {
 
-  private readonly questionLimit: number = 1;
+  private readonly difficultyPointsMap: Map<DifficultyType, number> = new Map<DifficultyType, number>([
+    ['easy', 1],
+    ['medium', 3],
+    ['hard', 5]
+  ]);
+
   private readonly questionMethods: Function[] = [
     this.getQuestionsTheTriviaApi,
     this.getQuestionsOpenTriviaDB,
@@ -28,13 +34,13 @@ export class TriviaService {
   ) {
   }
 
-  public async fetchQuestion(): Promise<Question[]> {
-    while(true) {
+  public async fetchQuestion(questionNumber: number): Promise<Question[]> {
+    while (true) {
       const randomNumber: number = this.randomIntFromInterval(0, this.questionMethods.length - 1);
       const randomQuestionMethod: Function = this.questionMethods[randomNumber];
-      const questions: Question[] = await randomQuestionMethod.call(this);
+      const questions: Question[] = await randomQuestionMethod.call(this, questionNumber);
 
-      if(questions.length !== 0) return questions;
+      if (questions.length !== 0) return questions;
     }
   }
 
@@ -42,44 +48,58 @@ export class TriviaService {
     return Math.floor(Math.random() * (max - min + 1) + min)
   }
 
-  private async getQuestionsTheTriviaApi(): Promise<Question[]> {
-    const url: string = `${environment.theTriviaApiUrl}?limit=${this.questionLimit}`;
-
+  private async getQuestionsTheTriviaApi(questionNumber: number): Promise<Question[]> {
+    const url: string = `${environment.theTriviaApiUrl}?limit=${questionNumber}`;
     const response: TheTriviaApiResponse[] = await firstValueFrom(
       this.httpClient.get<TheTriviaApiResponse[]>(url)
     );
 
     return response.map(res => {
+      const answers = [res.correctAnswer, ...res.incorrectAnswers]
+        .map((value) => ({value, sort: Math.random()}))
+        .sort((a, b) => a.sort - b.sort)
+        .map(({value}) => value);
+
       return {
         question: res.question.text,
+        answers,
         correctAnswer: res.correctAnswer,
-        incorrectAnswers: res.incorrectAnswers,
+        points: this.difficultyPointsMap.get(res.difficulty)!,
         difficulty: res.difficulty,
         isNiche: res.isNiche,
       }
     });
   }
 
-  private async getQuestionsOpenTriviaDB(): Promise<Question[]> {
-    const url: string = `${environment.openTriviaDBUrl}?amount=${this.questionLimit}&encode=base64`;
+  private async getQuestionsOpenTriviaDB(questionNumber: number): Promise<Question[]> {
+    const url: string = `${environment.openTriviaDBUrl}?amount=${questionNumber}&encode=base64`;
 
     const response: OpenTriviaDBResponse = await firstValueFrom(
       this.httpClient.get<OpenTriviaDBResponse>(url)
     );
 
     return response.results.map(res => {
+      const correctAnswer: string = atob(res.correct_answer)
+
+      const answers = [correctAnswer, ...res.incorrect_answers.map(r => atob(r))]
+        .map((value) => ({value, sort: Math.random()}))
+        .sort((a, b) => a.sort - b.sort)
+        .map(({value}) => value);
+      const difficulty: DifficultyType = atob(res.difficulty) as DifficultyType;
+
       return {
         question: atob(res.question),
-        correctAnswer:  atob(res.correct_answer),
-        incorrectAnswers: res.incorrect_answers.map(r =>  atob(r)),
-        difficulty: atob(res.difficulty) as 'easy' | 'medium' | 'hard',
+        correctAnswer,
+        answers,
+        points: this.difficultyPointsMap.get(difficulty)!,
+        difficulty,
         isNiche: false,
       }
     });
   }
 
-  private async getQuestionsQuizAPI(): Promise<Question[]> {
-    const url: string = `${environment.quizAPIUrl}?limit=${this.questionLimit}`;
+  private async getQuestionsQuizAPI(questionNumber: number): Promise<Question[]> {
+    const url: string = `${environment.quizAPIUrl}?limit=${questionNumber}`;
     const response: QuizAPIResponse[] = await firstValueFrom(
       this.httpClient.get<QuizAPIResponse[]>(url, {
         headers: {'X-Api-Key': environment.quizAPIKey}
@@ -87,6 +107,7 @@ export class TriviaService {
     );
 
     return response.map(res => {
+      const difficulty: DifficultyType = res.difficulty.toLowerCase() as DifficultyType;
       let incorrectAnswers: string[] = [];
       let correctAnswer: string | undefined = undefined;
 
@@ -107,11 +128,17 @@ export class TriviaService {
         incorrectAnswers.push(answer);
       }
 
+      const answers = [correctAnswer!, ...incorrectAnswers]
+        .map((value) => ({value, sort: Math.random()}))
+        .sort((a, b) => a.sort - b.sort)
+        .map(({value}) => value);
+
       return {
         question: res.question,
         correctAnswer: correctAnswer!,
-        incorrectAnswers: incorrectAnswers,
-        difficulty: res.difficulty.toLowerCase() as 'easy' | 'medium' | 'hard',
+        answers,
+        points: this.difficultyPointsMap.get(difficulty)!,
+        difficulty,
         isNiche: false
       }
     });

From 8be0b60cf044808297471cd9a66a8060a990ff46 Mon Sep 17 00:00:00 2001
From: Isahann Hanacleto <isahanacleto@gmail.com>
Date: Fri, 23 Aug 2024 09:21:06 -0300
Subject: [PATCH 2/3] #64 checkpoint

---
 src/app/app-routing.module.ts                 |  4 +-
 .../correct-answer-window.component.html      |  2 +-
 .../correct-answer-window.component.ts        | 11 ++--
 .../question-trifecta-window.component.html   | 11 ++--
 .../question-trifecta-window.component.sass   |  2 +-
 .../question-trifecta-window.component.ts     | 53 +++++++++++++++++--
 .../question-window.component.ts              |  3 +-
 .../wrong-answer-window.component.html        |  5 +-
 .../wrong-answer-window.component.ts          | 18 ++++---
 .../question_result_trifecta.mustache         | 19 +++++++
 src/model/Template.ts                         | 22 +++++++-
 src/model/enums/GameModesEnum.ts              |  9 ++--
 src/service/app-storage.service.ts            | 22 ++------
 src/service/storage.service.ts                |  1 -
 14 files changed, 134 insertions(+), 48 deletions(-)
 create mode 100644 src/assets/templates/question_result_trifecta.mustache

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 8b9711c..0d41511 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -41,11 +41,11 @@ const routes: Routes = [
       component: QuestionTrifectaWindowComponent,
     },
     {
-      path: `${PathsEnum.CORRECT_ANSWER}/:result`,
+      path: `${PathsEnum.CORRECT_ANSWER}/:mode/:result`,
       component: CorrectAnswerWindowComponent,
     },
     {
-      path: `${PathsEnum.WRONG_ANSWER}/:result`,
+      path: `${PathsEnum.WRONG_ANSWER}/:mode/:result`,
       component: WrongAnswerWindowComponent
     }
   ]
diff --git a/src/app/correct-answer-window/correct-answer-window.component.html b/src/app/correct-answer-window/correct-answer-window.component.html
index c2826ee..9ae8083 100644
--- a/src/app/correct-answer-window/correct-answer-window.component.html
+++ b/src/app/correct-answer-window/correct-answer-window.component.html
@@ -3,7 +3,7 @@
   <div class="window-body">
     <div class="window-body_title">
       <label><b>Congratulations!</b></label>
-      <label>You earned {{this.questionScore}} points!</label>
+      <label>You earned {{ this.questionScore }} points!</label>
       <label>Come back in 3 hours for another question!</label>
     </div>
     <div class="window-body_buttons">
diff --git a/src/app/correct-answer-window/correct-answer-window.component.ts b/src/app/correct-answer-window/correct-answer-window.component.ts
index c0bfdbf..6693fb3 100644
--- a/src/app/correct-answer-window/correct-answer-window.component.ts
+++ b/src/app/correct-answer-window/correct-answer-window.component.ts
@@ -4,7 +4,8 @@ import {PathsEnum} from "../../model/enums/PathsEnum";
 import {AppStorageService} from "../../service/app-storage.service";
 import {EncryptionService} from "../../service/encryption.service";
 import {TemplateService} from "../../service/template.service";
-import {QuestionResultTemplateParams, TemplateEnum} from "../../model/Template";
+import {QuestionResultTemplateParams, QuestionResultTrifectaTemplateParams} from "../../model/Template";
+import {GameMode} from "../../model/enums/GameModesEnum";
 
 @Component({
   selector: 'app-correct-answer-window',
@@ -53,15 +54,17 @@ export class CorrectAnswerWindowComponent implements OnInit {
   }
 
   private saveCurrentScore(): void {
-    this.appStorageService.saveAnswer(true, this.questionScore);
+    this.appStorageService.saveAnswer(true, this.questionScore, 3);
   }
 
   private async retrieveRouteParams(): Promise<void> {
+    const routeGameModeTitle: string = this.route.snapshot.paramMap.get('mode')!;
     const encryptedQuestionResult: string = this.route.snapshot.paramMap.get('result')!;
 
     const decryptedQuestionResult: string = this.encryptionService.decrypt(encryptedQuestionResult);
-    const questionResult: QuestionResultTemplateParams = JSON.parse(decryptedQuestionResult);
-    const questionResultText: string = await this.templateService.render(TemplateEnum.QUESTION_RESULT, questionResult);
+    const questionResult: QuestionResultTemplateParams | QuestionResultTrifectaTemplateParams = JSON.parse(decryptedQuestionResult);
+    const mode: GameMode = GameMode.getByTitle(routeGameModeTitle);
+    const questionResultText: string = await this.templateService.render(mode.templateEnum, questionResult);
 
     this.questionScore = questionResult.questionPoints!;
     this.clipboardText = questionResultText;
diff --git a/src/app/question-trifecta-window/question-trifecta-window.component.html b/src/app/question-trifecta-window/question-trifecta-window.component.html
index 2687f51..c87a810 100644
--- a/src/app/question-trifecta-window/question-trifecta-window.component.html
+++ b/src/app/question-trifecta-window/question-trifecta-window.component.html
@@ -53,10 +53,10 @@
         <img *ngIf="this.isSelectingAnswers()"
              ngSrc="assets/icons/trifecta.png"
              alt="" height="40" width="40"/>
-        <img *ngIf="this.selectedAllAnswers()"
+        <img *ngIf="this.selectedAllAnswers() && !this.confirmedAnswers"
              ngSrc="assets/icons/alert.png"
              alt="" height="40" width="40"/>
-        <img *ngIf="this.confirmedAnswers"
+        <img *ngIf="this.selectedAllAnswers() && this.confirmedAnswers"
              ngSrc="assets/icons/loading.png"
              alt="" height="40" width="40"/>
       </div>
@@ -64,17 +64,18 @@
         <label class="window_check-answer_body_question_title" *ngIf="this.isSelectingAnswers()">
           Select 3 answers before continuing...
         </label>
-        <label class="window_check-answer_body_question_title" *ngIf="this.selectedAllAnswers()">
+        <label class="window_check-answer_body_question_title"
+               *ngIf="this.selectedAllAnswers() && !this.confirmedAnswers">
           Are you sure about that?
         </label>
         <div class="window_check-answer_body_question_buttons"
-             *ngIf="this.selectedAllAnswers() || this.confirmedAnswers">
+             *ngIf="this.selectedAllAnswers() && !this.confirmedAnswers">
           <app-icon-button iconPath="yes.png" title="Yes!"
                            (onButtonClick)="this.confirmAnswers()"></app-icon-button>
           <app-icon-button iconPath="no.png" title="No..."
                            (onButtonClick)="this.validateAnswers()"></app-icon-button>
         </div>
-        <ng-container *ngIf="this.confirmedAnswers">
+        <ng-container *ngIf="this.selectedAllAnswers() && this.confirmedAnswers">
           <label class="window_check-answer_body_question_title">Ok, checking your answer...</label>
           <progress [max]="this.progressBarMax" [value]="this.answerProgressBar"></progress>
         </ng-container>
diff --git a/src/app/question-trifecta-window/question-trifecta-window.component.sass b/src/app/question-trifecta-window/question-trifecta-window.component.sass
index a369a02..77ebefb 100644
--- a/src/app/question-trifecta-window/question-trifecta-window.component.sass
+++ b/src/app/question-trifecta-window/question-trifecta-window.component.sass
@@ -93,7 +93,6 @@
               &_bold
                 font-weight: bold
 
-
     &_check-answer
       &_body
         display: flex
@@ -115,6 +114,7 @@
 
           &_title
             margin: 5px
+            text-align: center
 
           &_buttons
             display: flex
diff --git a/src/app/question-trifecta-window/question-trifecta-window.component.ts b/src/app/question-trifecta-window/question-trifecta-window.component.ts
index 6f82564..f057fa8 100644
--- a/src/app/question-trifecta-window/question-trifecta-window.component.ts
+++ b/src/app/question-trifecta-window/question-trifecta-window.component.ts
@@ -5,7 +5,8 @@ import {Router} from "@angular/router";
 import {EncryptionService} from "../../service/encryption.service";
 import {AppStorageService} from "../../service/app-storage.service";
 import {PathsEnum} from "../../model/enums/PathsEnum";
-import {first} from "rxjs";
+import {QuestionResultTrifectaTemplateParams} from "../../model/Template";
+import {GameMode} from "../../model/enums/GameModesEnum";
 
 @Component({
   selector: 'app-question-trifecta-window',
@@ -15,7 +16,8 @@ import {first} from "rxjs";
 export class QuestionTrifectaWindowComponent {
 
   public questions: Question[] = [];
-  public selectedAnswers: string[] | undefined[] = [];
+  public selectedAnswers: string[] | undefined[] = [undefined, undefined, undefined
+  ];
   public showQuestions: boolean = false;
   public confirmedAnswers: boolean = false;
 
@@ -107,8 +109,53 @@ export class QuestionTrifectaWindowComponent {
     return this.selectedAnswers[index] === answer ? `> ${answer} <` : answer;
   }
 
-  confirmAnswers() {
+  public async confirmAnswers(): Promise<void> {
+    this.confirmedAnswers = true;
 
+    while (true) {
+      await new Promise(f => setTimeout(f, 400));
+
+      if (this.answerProgressBar === this.progressBarMax)
+        break;
+
+      this.answerProgressBar += 10;
+    }
+
+    await this.redirectFromAnswer();
+  }
+
+  private async redirectFromAnswer(): Promise<void> {
+    let correctAnswers: boolean = true;
+    let totalPoints: number = 0;
+
+    for (let i = 0; i <= 2; i++) {
+      if (this.selectedAnswers[i] !== this.questions[i].correctAnswer) {
+        correctAnswers = false;
+        break;
+      }
+    }
+
+    const questionResultTrifecta: QuestionResultTrifectaTemplateParams = {
+      questions: this.questions.map(question => question.question),
+      correctAnswers: this.questions.map(question => question.correctAnswer),
+      selectedAnswers: this.selectedAnswers.map((answer, index) => {
+        const question = this.questions[index];
+        const correctAnswer: boolean = answer === question.correctAnswer
+
+        totalPoints += question.points * 3;
+
+        return {
+          icon: correctAnswer ? '🟩' : '🟥',
+          answer: answer!,
+          points: correctAnswer ? `(${question.points} * 3) = ${question.points * 3} points` : '0'
+        }
+      }),
+      questionPoints: correctAnswers ? totalPoints : 0,
+    };
+
+    const questionResultTrifectaData: string = this.encryptionService.encrypt(JSON.stringify(questionResultTrifecta));
+
+    await this.router.navigate([(correctAnswers ? PathsEnum.CORRECT_ANSWER : PathsEnum.WRONG_ANSWER), GameMode.TRIFECTA.title, questionResultTrifectaData]);
   }
 
   public validateAnswers(): void {
diff --git a/src/app/question-window/question-window.component.ts b/src/app/question-window/question-window.component.ts
index 86d7151..8dc14a1 100644
--- a/src/app/question-window/question-window.component.ts
+++ b/src/app/question-window/question-window.component.ts
@@ -7,6 +7,7 @@ import {QuestionResultTemplateParams} from "../../model/Template";
 import {EncryptionService} from "../../service/encryption.service";
 import {Subscription} from "rxjs";
 import {Question} from "../../model/questions/Question";
+import {GameMode} from "../../model/enums/GameModesEnum";
 
 @Component({
   selector: 'app-question-window',
@@ -99,7 +100,7 @@ export class QuestionWindowComponent implements OnInit, OnDestroy {
     };
     const questionResultData: string = this.encryptionService.encrypt(JSON.stringify(questionResult));
 
-    await this.router.navigate([correctAnswer ? PathsEnum.CORRECT_ANSWER : PathsEnum.WRONG_ANSWER, questionResultData]);
+    await this.router.navigate([(correctAnswer ? PathsEnum.CORRECT_ANSWER : PathsEnum.WRONG_ANSWER), GameMode.NORMAL.title, questionResultData]);
   }
 
   private async startLoadingProgressBar(): Promise<void> {
diff --git a/src/app/wrong-answer-window/wrong-answer-window.component.html b/src/app/wrong-answer-window/wrong-answer-window.component.html
index 54b42e5..ae1fa6d 100644
--- a/src/app/wrong-answer-window/wrong-answer-window.component.html
+++ b/src/app/wrong-answer-window/wrong-answer-window.component.html
@@ -2,8 +2,9 @@
   <app-window-title-bar iconPath="critical.png" title="Oh no!"></app-window-title-bar>
   <div class="window-body">
     <div class="window-body_title">
-      <label>That was not the right answer! The answer was &nbsp;<b>[{{this.correctAnswer}}]</b></label>
-      <label>Come back in 3 hours for another question!</label>
+      <label>You got it wrong! The correct answer(s) was/were:</label>
+      <label><b>[{{ this.correctAnswers }}]</b></label>
+      <label>Come back in {{ this.hoursToPlayAgain }} hours for another question!</label>
     </div>
 
     <div class="window-body_buttons">
diff --git a/src/app/wrong-answer-window/wrong-answer-window.component.ts b/src/app/wrong-answer-window/wrong-answer-window.component.ts
index 0f008d1..4de4d60 100644
--- a/src/app/wrong-answer-window/wrong-answer-window.component.ts
+++ b/src/app/wrong-answer-window/wrong-answer-window.component.ts
@@ -2,9 +2,10 @@ import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from "@angular/router";
 import {PathsEnum} from "../../model/enums/PathsEnum";
 import {AppStorageService} from "../../service/app-storage.service";
-import {QuestionResultTemplateParams, TemplateEnum} from "../../model/Template";
+import {QuestionResultTemplateParams, QuestionResultTrifectaTemplateParams} from "../../model/Template";
 import {EncryptionService} from "../../service/encryption.service";
 import {TemplateService} from "../../service/template.service";
+import {GameMode} from "../../model/enums/GameModesEnum";
 
 @Component({
   selector: 'app-wrong-answer-window',
@@ -13,9 +14,10 @@ import {TemplateService} from "../../service/template.service";
 })
 export class WrongAnswerWindowComponent implements OnInit {
 
-  public correctAnswer: string | null = '';
+  public correctAnswers: string[] = [];
   public clipboardText: string = '';
   public displayClipboardMessage: boolean = false;
+  public hoursToPlayAgain: number = 0;
 
   private wrongAnswerSound: HTMLAudioElement = new Audio('assets/sounds/critical_stop.wav');
 
@@ -53,16 +55,20 @@ export class WrongAnswerWindowComponent implements OnInit {
   }
 
   private saveCurrentScore() {
-    this.appStorageService.saveAnswer(false);
+    this.appStorageService.saveAnswer(false, undefined, this.hoursToPlayAgain);
   }
 
   private async retrieveRouteParams(): Promise<void> {
+    const routeGameModeTitle: string = this.route.snapshot.paramMap.get('mode')!;
     const encryptedQuestionResult: string = this.route.snapshot.paramMap.get('result')!;
 
     const decryptedQuestionResult: string = this.encryptionService.decrypt(encryptedQuestionResult);
-    const questionResult: QuestionResultTemplateParams = JSON.parse(decryptedQuestionResult);
+    const questionResult: QuestionResultTemplateParams | QuestionResultTrifectaTemplateParams = JSON.parse(decryptedQuestionResult);
+    const gameMode: GameMode = GameMode.getByTitle(routeGameModeTitle);
 
-    this.correctAnswer = questionResult.rightAnswer;
-    this.clipboardText = await this.templateService.render(TemplateEnum.QUESTION_RESULT, questionResult);
+    this.hoursToPlayAgain = gameMode === GameMode.TRIFECTA ? 24 : 3;
+
+    this.correctAnswers = 'questions' in questionResult ? questionResult.correctAnswers : [questionResult.rightAnswer];
+    this.clipboardText = await this.templateService.render(gameMode.templateEnum, questionResult);
   }
 }
diff --git a/src/assets/templates/question_result_trifecta.mustache b/src/assets/templates/question_result_trifecta.mustache
new file mode 100644
index 0000000..18175bb
--- /dev/null
+++ b/src/assets/templates/question_result_trifecta.mustache
@@ -0,0 +1,19 @@
+{{#questions}}
+  👉 {{{.}}} 👈
+{{/questions}}
+
+The answers were...
+
+{{#correctAnswers}}
+  🟥 {{{.}}}
+{{/correctAnswers}}
+
+I picked...
+
+{{#selectedAnswers}}
+  {{{icon}}} {{{answer}}} {{{points}}}
+{{/selectedAnswers}}
+
+{{totalPoints}}
+
+🤔 XPQuiz - xpquiz.github.io ❔
diff --git a/src/model/Template.ts b/src/model/Template.ts
index d5acb8d..9767f69 100644
--- a/src/model/Template.ts
+++ b/src/model/Template.ts
@@ -1,11 +1,14 @@
 export enum TemplateEnum {
   WEEK_SCORE = "/assets/templates/week_score.mustache",
-  QUESTION_RESULT = "/assets/templates/question_result.mustache"
+  QUESTION_RESULT = "/assets/templates/question_result.mustache",
+  QUESTION_RESULT_TRIFECTA = "/assets/templates/question_result_trifecta.mustache"
 }
 
 export interface TemplateParams {
 }
 
+// Score
+
 export interface WeekScoreTemplateParams extends TemplateParams {
   year: number,
   week: number,
@@ -14,6 +17,8 @@ export interface WeekScoreTemplateParams extends TemplateParams {
   totalScore: number
 }
 
+// Normal question
+
 export interface QuestionResultTemplateParams extends TemplateParams {
   question: string,
   questionPoints: number | null,
@@ -21,3 +26,18 @@ export interface QuestionResultTemplateParams extends TemplateParams {
   rightAnswer: string,
   wrongAnswers: string[]
 }
+
+// Trifecta
+
+export interface QuestionResultTrifectaTemplateParams extends TemplateParams {
+  questions: string[],
+  correctAnswers: string[],
+  selectedAnswers: TrifectaSelectedAnswer[],
+  questionPoints: number
+}
+
+interface TrifectaSelectedAnswer {
+  icon: string,
+  answer: string,
+  points: string
+}
diff --git a/src/model/enums/GameModesEnum.ts b/src/model/enums/GameModesEnum.ts
index 5c4ef55..8e889ac 100644
--- a/src/model/enums/GameModesEnum.ts
+++ b/src/model/enums/GameModesEnum.ts
@@ -1,10 +1,13 @@
+import {TemplateEnum} from "../Template";
+
 export class GameMode {
-  static readonly NORMAL = new GameMode('normal', 'Standard mode. Answer a question, wait 3 hours to play again. Simple as that.', 1);
-  static readonly TRIFECTA = new GameMode('trifecta', 'Three questions for three times the score! At the risk of waiting 24 hours to play again.', 3);
+  static readonly NORMAL = new GameMode('normal', 'Standard mode. Answer a question, wait 3 hours to play again. Simple as that.', 1, TemplateEnum.QUESTION_RESULT);
+  static readonly TRIFECTA = new GameMode('trifecta', 'Three questions for three times the score! At the risk of waiting 24 hours to play again.', 3, TemplateEnum.QUESTION_RESULT);
 
   private constructor(public readonly title: string,
                       public readonly description: string,
-                      public readonly questions: number) {
+                      public readonly questions: number,
+                      public readonly templateEnum: TemplateEnum) {
   }
 
   public static getByTitle(title: string): GameMode {
diff --git a/src/service/app-storage.service.ts b/src/service/app-storage.service.ts
index 6622963..6e9989e 100644
--- a/src/service/app-storage.service.ts
+++ b/src/service/app-storage.service.ts
@@ -27,7 +27,7 @@ export class AppStorageService {
     }
   }
 
-  public saveAnswer(correctAnswer: boolean, questionScore?: number | null): void {
+  public saveAnswer(correctAnswer: boolean, questionScore: number | undefined, hoursToPlayAgain: number): void {
     const currentYear: number = moment().year();
     const currentWeek: number = moment().isoWeek();
 
@@ -67,7 +67,9 @@ export class AppStorageService {
     this.storageService.save(
       {
         ...appStorage,
-        lastQuizResponseDate: moment().toISOString(),
+        // using - 3 because i fucked up no the main window, should have been saving something
+        // like "nextQuizResponseDate" instead of this shit
+        lastQuizResponseDate: moment().add(hoursToPlayAgain - 3, 'hours').toISOString(),
         yearScoreMap: yearScoreMap
       }
     );
@@ -88,22 +90,6 @@ export class AppStorageService {
     return this.storageService.get()??this.createNewAppStorage();
   }
 
-  public clearWeek(currentYear: number, currentWeek: number) {
-    const appStorage: AppStorage = this.storageService.get()!;
-
-    appStorage.yearScoreMap.get(currentYear)?.delete(currentWeek);
-
-    this.storageService.save(appStorage);
-  }
-
-  public clearYear(currentYear: number) {
-    const appStorage: AppStorage = this.storageService.get()!;
-
-    appStorage.yearScoreMap.delete(currentYear);
-
-    this.storageService.save(appStorage);
-  }
-
   public retrieveScoreForYear(currentYear: number): Map<number, WeekScore> {
     const appStorage: AppStorage = this.retrieveAppStorage();
 
diff --git a/src/service/storage.service.ts b/src/service/storage.service.ts
index c7f7af3..e330aa5 100644
--- a/src/service/storage.service.ts
+++ b/src/service/storage.service.ts
@@ -1,5 +1,4 @@
 import {Injectable} from '@angular/core';
-import {AES, enc} from 'crypto-js';
 import {AppStorage} from "../model/AppStorage";
 import {EncryptionService} from "./encryption.service";
 

From 3a2d28414ac6ea7c0dff56b354681de792131d1a Mon Sep 17 00:00:00 2001
From: Isahann Hanacleto <isahanacleto@gmail.com>
Date: Fri, 23 Aug 2024 16:39:36 -0300
Subject: [PATCH 3/3] #64 adjusting template

---
 src/app/about-window/about-window.component.html |   2 +-
 .../icon-text-button.component.html              |   2 +-
 .../icon-text-button.component.sass              |   2 +-
 .../icon-text-button.component.ts                |   2 ++
 .../game-mode-window.component.html              |   3 ++-
 .../game-mode-window.component.ts                |   3 ++-
 .../question-trifecta-window.component.ts        |   2 +-
 src/assets/icons/30x30/time-rush.png             | Bin 0 -> 8256 bytes
 .../templates/question_result_trifecta.mustache  |  13 +++++++++----
 src/model/enums/GameModesEnum.ts                 |   5 ++++-
 10 files changed, 23 insertions(+), 11 deletions(-)
 create mode 100644 src/assets/icons/30x30/time-rush.png

diff --git a/src/app/about-window/about-window.component.html b/src/app/about-window/about-window.component.html
index 3995a74..a162ad4 100644
--- 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.4.2</label>
+    <label><b>XPQuiz</b>&nbsp;- Version 1.5.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/common/icon-text-button/icon-text-button.component.html b/src/app/common/icon-text-button/icon-text-button.component.html
index b288d0c..423d56c 100644
--- a/src/app/common/icon-text-button/icon-text-button.component.html
+++ b/src/app/common/icon-text-button/icon-text-button.component.html
@@ -1,4 +1,4 @@
-<button (click)="this.onClick()">
+<button (click)="this.onClick()" [disabled]="this.disabled">
   <img
     [ngSrc]="'assets/icons/30x30/' + this.iconPath"
     alt="" [height]="this.iconSize" [width]="this.iconSize"/>
diff --git a/src/app/common/icon-text-button/icon-text-button.component.sass b/src/app/common/icon-text-button/icon-text-button.component.sass
index 7e310a9..f82da82 100644
--- a/src/app/common/icon-text-button/icon-text-button.component.sass
+++ b/src/app/common/icon-text-button/icon-text-button.component.sass
@@ -3,7 +3,7 @@ button
   flex-direction: column
   align-items: center
   justify-content: center
-  min-height: 100px
+  height: 130px
   width: 170px
 
   img
diff --git a/src/app/common/icon-text-button/icon-text-button.component.ts b/src/app/common/icon-text-button/icon-text-button.component.ts
index 71e45dc..2ab149e 100644
--- a/src/app/common/icon-text-button/icon-text-button.component.ts
+++ b/src/app/common/icon-text-button/icon-text-button.component.ts
@@ -13,6 +13,8 @@ export class IconTextButtonComponent {
   public title: string = '';
   @Input()
   public description: string = '';
+  @Input()
+  public disabled: boolean = false;
   @Output()
   public onButtonClick: EventEmitter<void> = new EventEmitter<void>();
 
diff --git a/src/app/game-mode-window/game-mode-window.component.html b/src/app/game-mode-window/game-mode-window.component.html
index 9cec22d..89b2eb4 100644
--- a/src/app/game-mode-window/game-mode-window.component.html
+++ b/src/app/game-mode-window/game-mode-window.component.html
@@ -7,9 +7,10 @@
       <ng-container *ngFor="let mode of this.gameModes">
         <app-icon-text-button
           [iconPath]="mode.title + '.png'"
-          [title]="mode.title.toUpperCase()"
+          [title]="mode.title.toUpperCase().replace('-', ' ')"
           [description]="mode.description"
           (onButtonClick)="this.router.navigateByUrl('quiz-' + mode.title)"
+          [disabled]="mode.questions < 0"
         ></app-icon-text-button>
       </ng-container>
     </div>
diff --git a/src/app/game-mode-window/game-mode-window.component.ts b/src/app/game-mode-window/game-mode-window.component.ts
index 14607d9..169eb1f 100644
--- a/src/app/game-mode-window/game-mode-window.component.ts
+++ b/src/app/game-mode-window/game-mode-window.component.ts
@@ -14,7 +14,8 @@ export class GameModeWindowComponent {
 
   protected readonly gameModes: GameMode[] = [
     GameMode.NORMAL,
-    GameMode.TRIFECTA
+    GameMode.TRIFECTA,
+    GameMode.TIME_RUSH,
   ];
 
   constructor(
diff --git a/src/app/question-trifecta-window/question-trifecta-window.component.ts b/src/app/question-trifecta-window/question-trifecta-window.component.ts
index f057fa8..e8267b6 100644
--- a/src/app/question-trifecta-window/question-trifecta-window.component.ts
+++ b/src/app/question-trifecta-window/question-trifecta-window.component.ts
@@ -147,7 +147,7 @@ export class QuestionTrifectaWindowComponent {
         return {
           icon: correctAnswer ? '🟩' : '🟥',
           answer: answer!,
-          points: correctAnswer ? `(${question.points} * 3) = ${question.points * 3} points` : '0'
+          points: correctAnswer ? `(${question.points} * 3) = ${question.points * 3}` : '0'
         }
       }),
       questionPoints: correctAnswers ? totalPoints : 0,
diff --git a/src/assets/icons/30x30/time-rush.png b/src/assets/icons/30x30/time-rush.png
new file mode 100644
index 0000000000000000000000000000000000000000..85d31c11bc9f54b603c0d977f62a9a382251ac8e
GIT binary patch
literal 8256
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
KuVRmcMgI$_ulyVU

literal 0
HcmV?d00001

diff --git a/src/assets/templates/question_result_trifecta.mustache b/src/assets/templates/question_result_trifecta.mustache
index 18175bb..bd9512f 100644
--- a/src/assets/templates/question_result_trifecta.mustache
+++ b/src/assets/templates/question_result_trifecta.mustache
@@ -1,19 +1,24 @@
 {{#questions}}
-  👉 {{{.}}} 👈
+👉 {{{.}}}
 {{/questions}}
 
 The answers were...
 
 {{#correctAnswers}}
-  🟥 {{{.}}}
+  🟩 {{{.}}}
 {{/correctAnswers}}
 
 I picked...
 
 {{#selectedAnswers}}
-  {{{icon}}} {{{answer}}} {{{points}}}
+  {{{icon}}} {{{answer}}} - {{{points}}} points
 {{/selectedAnswers}}
 
-{{totalPoints}}
+{{#questionPoints}}
+Earned {{questionPoints}} points in total!
+{{/questionPoints}}
+{{^questionPoints}}
+Need some luck next time...
+{{/questionPoints}}
 
 🤔 XPQuiz - xpquiz.github.io ❔
diff --git a/src/model/enums/GameModesEnum.ts b/src/model/enums/GameModesEnum.ts
index 8e889ac..119f148 100644
--- a/src/model/enums/GameModesEnum.ts
+++ b/src/model/enums/GameModesEnum.ts
@@ -2,7 +2,8 @@ import {TemplateEnum} from "../Template";
 
 export class GameMode {
   static readonly NORMAL = new GameMode('normal', 'Standard mode. Answer a question, wait 3 hours to play again. Simple as that.', 1, TemplateEnum.QUESTION_RESULT);
-  static readonly TRIFECTA = new GameMode('trifecta', 'Three questions for three times the score! At the risk of waiting 24 hours to play again.', 3, TemplateEnum.QUESTION_RESULT);
+  static readonly TRIFECTA = new GameMode('trifecta', 'Three questions for three times the score! At the risk of waiting 24 hours to play again.', 3, TemplateEnum.QUESTION_RESULT_TRIFECTA);
+  static readonly TIME_RUSH = new GameMode('time-rush', 'Coming soon...', -1, TemplateEnum.QUESTION_RESULT);
 
   private constructor(public readonly title: string,
                       public readonly description: string,
@@ -16,6 +17,8 @@ export class GameMode {
         return GameMode.NORMAL;
       case 'trifecta':
         return GameMode.TRIFECTA;
+      case 'time-rush':
+        return GameMode.TIME_RUSH;
       default:
         return GameMode.NORMAL;
     }