v1.3.0

angular.json

@@ -24,7 +24,8 @@
               "zone.js"
             ],
             "allowedCommonJsDependencies": [
-              "crypto-js"
+              "crypto-js",
+              "moment"
             ],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "sass",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "xpquiz.github.io",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

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

@@ -1,7 +1,7 @@
 <div class="window">
   <app-window-title-bar iconPath="about.png" title="About XPQuiz"></app-window-title-bar>
   <div class="window-body">
-    <label><b>XPQuiz</b>&nbsp;- Version 1.2.2</label>
+    <label><b>XPQuiz</b>&nbsp;- Version 1.3.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>

src/app/app-routing.module.ts

@@ -31,11 +31,11 @@ const routes: Routes = [
       component: QuestionWindowComponent,
     },
     {
-      path: `${PathsEnum.CORRECT_ANSWER}/:points`,
+      path: `${PathsEnum.CORRECT_ANSWER}/:points/:result`,
       component: CorrectAnswerWindowComponent,
     },
     {
-      path: `${PathsEnum.WRONG_ANSWER}/:answer`,
+      path: `${PathsEnum.WRONG_ANSWER}/:result`,
       component: WrongAnswerWindowComponent
     }
   ]

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

@@ -6,8 +6,14 @@
       <label>You earned {{this.questionScore}} points!</label>
       <label>Come back in 3 hours for another question!</label>
     </div>
-
-    <app-icon-button iconPath="home.png" title="Return to home"
-                     (onButtonClick)="this.returnHome()"></app-icon-button>
+    <div class="window-body_buttons">
+      <app-icon-button iconPath="copy.png" title="Share result" [copy-clipboard]="this.clipboardText"
+                       (onButtonClick)="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">Question result copied to clipboard!</label>
+    </div>
   </div>
 </div>

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

@@ -14,3 +14,17 @@
     label
       text-align: center
       margin: 5px
+
+  &_buttons
+    display: flex
+    flex-direction: row
+    align-items: center
+    justify-content: space-between
+
+    app-icon-button
+      margin: 3px
+
+  &_clipboard-text
+    color: green
+    font-weight: bold
+    margin: 5px

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

@@ -2,6 +2,9 @@ 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 {EncryptionService} from "../../service/encryption.service";
+import {TemplateService} from "../../service/template.service";
+import {QuestionResultTemplateParams, TemplateEnum} from "../../model/enums/Template";
 
 @Component({
   selector: 'app-correct-answer-window',
@@ -11,18 +14,23 @@ import {AppStorageService} from "../../service/app-storage.service";
 export class CorrectAnswerWindowComponent implements OnInit {
 
   public questionScore: number = 0;
+  public clipboardText: string = '';
+  public displayClipboardMessage: boolean = false;
 
   private correctAnswerSound: HTMLAudioElement = new Audio('assets/sounds/tada.wav');
 
   constructor(
     private readonly router: Router,
     private readonly route: ActivatedRoute,
+    private readonly encryptionService: EncryptionService,
+    private readonly templateService: TemplateService,
     private readonly appStorageService: AppStorageService
   ) {
-    this.questionScore = parseInt(this.route.snapshot.paramMap.get('points') ?? '0');
   }
 
   public async ngOnInit(): Promise<void> {
+    await this.retrieveRouteParams();
+
     if (!this.appStorageService.canQuizBeAnswered()) {
       await this.returnHome();
       return;
@@ -36,7 +44,28 @@ export class CorrectAnswerWindowComponent implements OnInit {
     await this.router.navigateByUrl(PathsEnum.HOME);
   }
 
+  public async showClipboardMessage(): Promise<void> {
+    this.displayClipboardMessage = true;
+
+    await new Promise(f => setTimeout(f, 5000));
+
+    this.displayClipboardMessage = false;
+  }
+
   private saveCurrentScore(): void {
     this.appStorageService.saveAnswer(true, this.questionScore);
   }
+
+  private async retrieveRouteParams(): Promise<void> {
+    const encryptedQuestionScore: string = this.route.snapshot.paramMap.get('points')!;
+    const encryptedQuestionResult: string = this.route.snapshot.paramMap.get('result')!;
+
+    const decryptedQuestionScore: string = this.encryptionService.decrypt(encryptedQuestionScore);
+    const decryptedQuestionResult: string = this.encryptionService.decrypt(encryptedQuestionResult);
+    const questionResult: QuestionResultTemplateParams = JSON.parse(decryptedQuestionResult);
+    const questionResultText: string = await this.templateService.render(TemplateEnum.QUESTION_RESULT, questionResult);
+
+    this.questionScore = parseInt(decryptedQuestionScore);
+    this.clipboardText = questionResultText;
+  }
 }

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

@@ -4,6 +4,8 @@ import {TriviaResponse} from "../../model/TriviaResponse";
 import {Router} from "@angular/router";
 import {PathsEnum} from "../../model/enums/PathsEnum";
 import {AppStorageService} from "../../service/app-storage.service";
+import {QuestionResultTemplateParams} from "../../model/enums/Template";
+import {EncryptionService} from "../../service/encryption.service";
 
 @Component({
   selector: 'app-question-window',
@@ -29,6 +31,7 @@ export class QuestionWindowComponent implements OnInit {
   constructor(
     private readonly triviaService: TriviaService,
     private readonly router: Router,
+    private readonly encryptionService: EncryptionService,
     private readonly appStorageService: AppStorageService
   ) {
   }
@@ -96,11 +99,21 @@ export class QuestionWindowComponent implements OnInit {
 
   private async redirectFromAnswer(): Promise<void> {
     const correctAnswer: boolean = this.selectedAnswer === this.correctAnswer;
+    const questionResult: QuestionResultTemplateParams = {
+      question: this.question,
+      selectedAnswer: `${correctAnswer ? '🟩' : '🟥'} ${this.selectedAnswer}`,
+      rightAnswer: this.correctAnswer,
+      wrongAnswers: this.answers.filter(value => value !== this.correctAnswer)
+    };
+
+    const questionResultData: string = this.encryptionService.encrypt(JSON.stringify(questionResult));
 
     if (correctAnswer) {
-      await this.router.navigate([PathsEnum.CORRECT_ANSWER, this.questionPoints]);
+      const questionPointsData: string = this.encryptionService.encrypt(this.questionPoints.toString());
+
+      await this.router.navigate([PathsEnum.CORRECT_ANSWER, questionPointsData, questionResultData]);
     } else {
-      await this.router.navigate([PathsEnum.WRONG_ANSWER, this.correctAnswer]);
+      await this.router.navigate([PathsEnum.WRONG_ANSWER, questionResultData]);
     }
   }
 

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

@@ -6,7 +6,14 @@
       <label>Come back in 3 hours for another question!</label>
     </div>
 
-    <app-icon-button iconPath="home.png" title="Return to home"
-                     (onButtonClick)="this.returnHome()"></app-icon-button>
+    <div class="window-body_buttons">
+      <app-icon-button iconPath="copy.png" title="Share result" [copy-clipboard]="this.clipboardText"
+                       (onButtonClick)="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">Question result copied to clipboard!</label>
+    </div>
   </div>
 </div>

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

@@ -13,4 +13,16 @@
     label
       margin: 5px
 
+  &_buttons
+    display: flex
+    flex-direction: row
+    align-items: center
+    justify-content: space-between
+
+    app-icon-button
+      margin: 3px
 
+  &_clipboard-text
+    color: green
+    font-weight: bold
+    margin: 5px

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

@@ -2,6 +2,9 @@ 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/enums/Template";
+import {EncryptionService} from "../../service/encryption.service";
+import {TemplateService} from "../../service/template.service";
 
 @Component({
   selector: 'app-wrong-answer-window',
@@ -11,17 +14,23 @@ import {AppStorageService} from "../../service/app-storage.service";
 export class WrongAnswerWindowComponent implements OnInit {
 
   public correctAnswer: string | null = '';
+  public clipboardText: string = '';
+  public displayClipboardMessage: boolean = false;
+
   private wrongAnswerSound: HTMLAudioElement = new Audio('assets/sounds/critical_stop.wav');
 
   constructor(
     private readonly router: Router,
     private readonly route: ActivatedRoute,
+    private readonly encryptionService: EncryptionService,
+    private readonly templateService: TemplateService,
     private readonly appStorageService: AppStorageService
   ) {
-    this.correctAnswer = this.route.snapshot.paramMap.get('answer');
   }
 
   public async ngOnInit(): Promise<void> {
+    await this.retrieveRouteParams();
+
     if (!this.appStorageService.canQuizBeAnswered()) {
       await this.returnHome();
       return;
@@ -35,7 +44,25 @@ export class WrongAnswerWindowComponent implements OnInit {
     await this.router.navigateByUrl(PathsEnum.HOME);
   }
 
+  public async showClipboardMessage(): Promise<void> {
+    this.displayClipboardMessage = true;
+
+    await new Promise(f => setTimeout(f, 5000));
+
+    this.displayClipboardMessage = false;
+  }
+
   private saveCurrentScore() {
     this.appStorageService.saveAnswer(false);
   }
+
+  private async retrieveRouteParams(): Promise<void> {
+    const encryptedQuestionResult: string = this.route.snapshot.paramMap.get('result')!;
+
+    const decryptedQuestionResult: string = this.encryptionService.decrypt(encryptedQuestionResult);
+    const questionResult: QuestionResultTemplateParams = JSON.parse(decryptedQuestionResult);
+
+    this.correctAnswer = questionResult.rightAnswer;
+    this.clipboardText = await this.templateService.render(TemplateEnum.QUESTION_RESULT, questionResult);
+  }
 }

src/assets/templates/question_result.mustache

@@ -0,0 +1,15 @@
+❔ XPQuiz - xpquiz.github.io 🤔
+The question was...
+
+👉 {{{question}}} 👈
+
+With the following answers...
+
+🟩 {{{rightAnswer}}}
+{{#wrongAnswers}}
+🟥 {{{.}}}
+{{/wrongAnswers}}
+
+And i picked...
+
+{{{selectedAnswer}}}

src/assets/templates/week_score.mustache

@@ -1,4 +1,4 @@
-❔ XP Quiz - xpquiz.github.io 🤔
+❔ XPQuiz - xpquiz.github.io 🤔
 Here's my week score!
 
 🟩 Right answers: {{rightAnswers}}

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>XP Quiz</title>
+  <title>XPQuiz</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">

src/model/enums/Template.ts

@@ -1,5 +1,6 @@
 export enum TemplateEnum {
-  WEEK_SCORE = "/assets/templates/week_score.mustache"
+  WEEK_SCORE = "/assets/templates/week_score.mustache",
+  QUESTION_RESULT = "/assets/templates/question_result.mustache"
 }
 
 export interface TemplateParams {
@@ -11,3 +12,10 @@ export interface WeekScoreTemplateParams extends TemplateParams {
   wrongAnswers: number,
   totalScore: number
 }
+
+export interface QuestionResultTemplateParams extends TemplateParams {
+  question: string,
+  selectedAnswer: string,
+  rightAnswer: string,
+  wrongAnswers: string[]
+}

src/service/encryption.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { EncryptionService } from './encryption.service';
+
+describe('EncryptionService', () => {
+  let service: EncryptionService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(EncryptionService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/service/encryption.service.ts

@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import {AppStorage} from "../model/AppStorage";
+import {AES, enc} from "crypto-js";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EncryptionService {
+
+  private readonly encryptionkey: string = 'ENCRYPTION_KEY_XPQUIZ';
+
+  constructor() {
+  }
+
+  public encrypt(value: string): string {
+    const encrypted = AES.encrypt(value, this.encryptionkey);
+    return encrypted.toString();
+  }
+
+  public decrypt(value: string): string {
+    const decrypted = AES.decrypt(value, this.encryptionkey);
+    return decrypted.toString(enc.Utf8);
+  }
+
+  public replacer(key: any, value: any) {
+    if (value instanceof Map) {
+      return {
+        dataType: 'Map',
+        value: Array.from(value.entries()), // or with spread: value: [...value]
+      };
+    } else {
+      return value;
+    }
+  }
+
+  public reviver(key: any, value: any) {
+    if (typeof value === 'object' && value !== null) {
+      if (value.dataType === 'Map') {
+        return new Map(value.value);
+      }
+    }
+    return value;
+  }
+}