BioTrivia finally finished

apollo-frontend/src/app/minigame-biotrivia/minigame-biotrivia.component.html

@@ -27,13 +27,16 @@
         Верни отговори:
         <igx-linear-bar [max]="questions.length" [value]="guessedQuestions"></igx-linear-bar>
         <div *ngIf="guessedQuestions < questions.length">
-            <h6>Грешни отговори</h6>
-            <div *ngFor="let answer of getIncorrectAnswers()">
-                <b>{{answer.question.question}}</b><br>
-                Вашият отговор: {{answer.answer}}
-                Правилен отговор: {{answer.question.answer.correctChoise}}
+            <h6>Грешни отговори:</h6>
+            <div class="wrongAnswers">
+                <div *ngFor="let answer of getIncorrectAnswers()">
+                    <b>{{answer.index}}. {{answer.question.question}}</b><br>
+                    <div><div class="identation"></div> Вашият отговор: {{answer.answer}}</div>
+                    <div><div class="identation"></div> Правилен отговор: {{answer.question.answer.correctChoise}}</div>
+                </div>
             </div>
         </div>
         <button igxButton igxRipple routerLink="">Върни се в началния екран</button>
+        <button igxButton igxRipple (click)="restartGame()">Играй отново</button>
     </div>
 </div>

apollo-frontend/src/app/minigame-biotrivia/minigame-biotrivia.component.scss

@@ -47,4 +47,15 @@
         top: 0;
         left: 0;
     }
+
+    .wrongAnswers {
+        max-height: 50vh;
+        overflow-y: auto;
+    }
+
+    .identation {
+        width: 2em;
+        height: 1em;
+        display: inline-block;
+    }
 }

apollo-frontend/src/app/minigame-biotrivia/minigame-biotrivia.component.ts

@@ -2,6 +2,7 @@ import { Component, ElementRef, NgZone, OnInit, ViewChild, ViewChildren } from '
 import { IgxRadioComponent, IgxRadioGroupDirective } from 'igniteui-angular';
 import { Observable, Subject } from 'rxjs';
 import { Answer, DbService, Question } from '../db.service';
+import { UserdataService } from '../userdata.service';
 
 
 @Component({
@@ -33,7 +34,8 @@ export class MinigameBiotriviaComponent implements OnInit {
     }
 
     constructor(
-        private db: DbService
+        private db: DbService,
+        private userdata: UserdataService,
     ) { }
 
     ngOnInit(): void {
@@ -126,7 +128,7 @@ export class MinigameBiotriviaComponent implements OnInit {
         startingEl.style.position = 'absolute';
 
         this.stage = 'starting-ongoing';
-        this.questions = this.db.getRandomQuestions(1, this.db.getRandomCategory());
+        this.questions = this.db.getRandomQuestions(5, this.db.getRandomCategory());
         this.loadNextQuestion();
 
         setTimeout(() => {
@@ -160,7 +162,39 @@ export class MinigameBiotriviaComponent implements OnInit {
         return array;
     }
 
-    getIncorrectAnswers(): { question: Question, answer: string }[] {
-        return this.answers.filter(v => v.answer === v.question.answer.correctChoise);
+    getIncorrectAnswers(): { question: Question, answer: string, index: number }[] {
+        return this.answers.map((v, i) => {
+            return { ...v, index: i + 1 };
+        }).filter((v) => v.answer !== v.question.answer.correctChoise);
+    }
+
+    restartGame(): void {
+        if (this.stage !== 'ended') return;
+
+        const endingEl = this.endingElementRef.first.nativeElement as HTMLElement;
+        endingEl.style.position = 'absolute';
+
+        this.stage = 'ongoing-ended';
+
+        this.questions = this.db.getRandomQuestions(5, this.db.getRandomCategory());
+
+        this.displayError = false;
+
+        this.guessedQuestions = 0;
+        this.currQuestionN = 0;
+        this.answers = [];
+
+        this.selectedAnswer = '';
+
+        this.loadNextQuestion();
+
+        setTimeout(() => {
+            const ongoingEl = this.ongoingElementRef.first.nativeElement as HTMLElement;
+
+            // tslint:disable-next-line: deprecation
+            this.animateElements(endingEl, ongoingEl).subscribe(() => {
+                this.stage = 'ongoing';
+            });
+        }, 20);
     }
 }

apollo-frontend/src/app/mock.minigames.ts

@@ -0,0 +1,19 @@
+import { Saved, Minigame } from "./db.service";
+
+export const mock_minigames: Saved<Minigame>[] = [
+    {
+        id: '0',
+        el: {
+            name: 'Рециклиране',
+            url: '/minigames/conveyor-belt',
+            comingSoon: true,
+        }
+    },
+    {
+        id: '0',
+        el: {
+            name: 'BioTrivia',
+            url: '/minigames/biotrivia',
+        }
+    }
+];

apollo-frontend/src/styles.scss

@@ -23,8 +23,8 @@ html {
 
 @import "~igniteui-angular/lib/core/styles/themes/index";
 
-$company-color: rgb(139, 39, 39); // Some green shade I like
-$secondary-color: rgb(139, 39, 39); // Watermelon pink
+$company-color: rgb(17, 90, 48); // Some green shade I like
+$secondary-color: rgb(156, 28, 28); // Watermelon pink
 
 $my-color-palette: igx-palette($primary: $company-color,
     $secondary: $secondary-color);
@@ -41,4 +41,5 @@ $my-color-palette: igx-palette($primary: $company-color,
     background-color: #f8f8f855;
     backdrop-filter: blur(10px);
     box-shadow: #0004 3px 3px 5px;
+
 }