First workingish BioTrivia thing

apollo-frontend/src/app/app.module.ts

@@ -7,6 +7,7 @@ import { AppComponent } from './app.component';
 import {
   IgxButtonModule,
   IgxIconModule,
+  IgxRadioModule,
   IgxRippleModule,
 } from 'igniteui-angular';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -33,10 +34,12 @@ import { MinigameBiotriviaComponent } from './minigame-biotrivia/minigame-biotri
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
+    BrowserModule,
 
     IgxButtonModule,
     IgxRippleModule,
     IgxIconModule,
+    IgxRadioModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

apollo-frontend/src/app/db.service.ts

@@ -16,8 +16,7 @@ export interface Card {
     name: string;
     types: Array<"endangered" | "normal">;
 }
-export interface MultipleChoiseAnswer {
-    type: 'multiple-choise';
+export interface Answer {
     choises: string[];
     correctChoise: string;
 }
@@ -25,7 +24,7 @@ export interface Question {
     category: string;
     question: string;
     photoUrlsAbove?: string[];
-    answer: MultipleChoiseAnswer;
+    answer: Answer;
 }
 
 export interface Saved<T> {
@@ -317,7 +316,6 @@ export class DbService {
                 photoUrlsAbove: [ '/assets/images/questions/slon.jpg' ],
                 question: 'Защо бройката на слоновете в Африка намалява?',
                 answer: {
-                    type: 'multiple-choise',
                     choises: [
                         'Убиван е от други животни',
                         'Липса на храна',
@@ -335,7 +333,6 @@ export class DbService {
                 photoUrlsAbove: [ '/assets/images/questions/carski orel.jpg' ],
                 question: 'Каква е главната причина за намаляването на бройките Царски орли?',
                 answer: {
-                    type: 'multiple-choise',
                     choises: [
                         'Бракониери',
                         'Замърсяване',
@@ -353,7 +350,6 @@ export class DbService {
                 photoUrlsAbove: [ '/assets/images/questions/carski orel.jpg' ],
                 question: 'Каква е главната причина за намаляването на бройките Царски орли?',
                 answer: {
-                    type: 'multiple-choise',
                     choises: [
                         'Бракониери',
                         'Замърсяване',
@@ -371,7 +367,6 @@ export class DbService {
                 photoUrlsAbove: [ '/assets/images/questions/zlatna zhaba.png' ],
                 question: 'Каква е причината за изчезването на Златната жаба?',
                 answer: {
-                    type: 'multiple-choise',
                     choises: [
                         'Глобално затопляне',
                         'Замърсяване на реките',
@@ -389,7 +384,6 @@ export class DbService {
                 photoUrlsAbove: [ '/assets/images/questions/shtigga.png' ],
                 question: 'Каква е причината за намаляването на бройките на Черният щъркел?',
                 answer: {
-                    type: 'multiple-choise',
                     choises: [
                         'Замърсяването на блатата и езерата',
                         'Недостиг на храна',
@@ -400,7 +394,40 @@ export class DbService {
                 }
             }
         },
+        {
+            id: '5',
+            el: {
+                category: 'animals',
+                photoUrlsAbove: [ '/assets/images/questions/tulen.jpg' ],
+                question: 'Вярно или грешно. От 1996г. тюлените в Черно море намаляват, като днес те са почти изчезнали у нас.',
+                answer: {
+                    choises: [
+                        'Вярно',
+                        'Грешно',
+                    ],
+                    correctChoise: 'Грешно',
+                }
+            }
+        },
+        {
+            id: '6',
+            el: {
+                category: 'animals',
+                photoUrlsAbove: [ '/assets/images/questions/ris.jpg' ],
+                question: 'Каква е причината за намаляването на бройките рисове в България?',
+                answer: {
+                    choises: [
+                        'Глобално затопляне',
+                        'Незаконно избиване за козината им',
+                        'Разрушаването на местообитанията им',
+                        'Убиван е от естествени врагове',
+                    ],
+                    correctChoise: 'Незаконно избиване за козината им',
+                }
+            }
+        },
     ];
+    private mock_question_categories: string[] = [ 'animals' ];
 
     private getRandomEls<T>(array: T[], n: number): T[] {
         const result: T[] = new Array(n);
@@ -441,6 +468,9 @@ export class DbService {
             .filter(v => v.el.category === category)
             .map(v => v.el), n);
     }
+    getRandomCategory(): string {
+        return this.getRandomEls(this.mock_question_categories, 1)[0];
+    }
 
     constructor() { }
 }

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

@@ -9,7 +9,13 @@
         <div class="separator"></div>
         <button igxButton igxRipple routerLink="" >Върни се в началния екран</button>
     </div>
-    <div class="question dialog" *ngIf="stage === 'ongoing' || stage === 'starting-ongoing'" #ongoingDialog>
-        <h4></h4>
+    <div class="question dialog" *ngIf="stage === 'ongoing' || stage === 'starting-ongoing'" #ongoingDialog style="opacity: 0;">
+        <h6>{{currQuestion.question}}</h6>
+
+        <igx-radio-group #choise>
+            <igx-radio [(ngModel)]="selected" *ngFor="let choise of currAnswers" name="choise">{{choise}}</igx-radio>
+        </igx-radio-group>
+
+        <button igxButton igxRipple ></button>
     </div>
 </div>

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

@@ -11,6 +11,7 @@
         max-width: 100%;
     }
     .dialog {
+        width: 600px;
         padding: 2em;
         box-sizing: border-box;
         border-radius: .5em;
@@ -21,7 +22,11 @@
         h4 {
             text-align: center;
             margin: 0 2em;
-            margin-top: 0;
+        }
+        h6 {
+            text-align: center;
+            margin: 0 2em;
+            margin-bottom: .5em;
         }
         .separator {
             height: .5em;
@@ -30,5 +35,9 @@
         p {
             text-align: center;
         }
+        igx-radio {
+            display: block;
+            margin: .25em;
+        }
     }
 }

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

@@ -1,5 +1,6 @@
 import { Component, ElementRef, NgZone, OnInit, ViewChild, ViewChildren } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
+import { Answer, DbService, Question } from '../db.service';
 
 
 @Component({
@@ -14,13 +15,26 @@ export class MinigameBiotriviaComponent implements OnInit {
     guessedQuestions = 0;
     stage: 'starting' | 'starting-ongoing' | 'ongoing' | 'ended' = 'starting';
 
+    questions: Question[];
+
+    currQuestionN = 0;
+    currQuestion: Question;
+    currAnswers: string[];
+
+    selected: string;
+
     constructor(
         private zone: NgZone,
+        private db: DbService
     ) { }
 
     ngOnInit(): void {
     }
 
+    test() {
+        console.log('sdfgui s');
+    }
+
     animateElements(el1: HTMLElement, el2: HTMLElement): Observable<void> {
         const a = new Subject<void>();
         el1.style.position = 'absolute';
@@ -52,27 +66,60 @@ export class MinigameBiotriviaComponent implements OnInit {
             duration: 200,
             easing: 'ease-out',
         }).onfinish = () => {
+            el2.style.opacity = '1';
             a.next();
         };
         return a;
     }
 
+    loadQuestion(i: number): void {
+        this.currQuestion = this.questions[i];
+        this.currAnswers = this.shuffle(this.questions[i].answer.choises);
+    }
+    loadNextQuestion(): void {
+        this.loadQuestion(this.currQuestionN++);
+    }
+
     startGame(): void {
         if (this.stage !== 'starting') return;
-        console.log(this.ongoingElementRef);
 
         const startingEl = this.startingElementRef.first.nativeElement as HTMLElement;
         startingEl.style.position = 'absolute';
 
         this.stage = 'starting-ongoing';
+        this.questions = this.db.getRandomQuestions(5, this.db.getRandomCategory());
+        this.loadNextQuestion();
 
         setTimeout(() => {
             const ongoingEl = this.ongoingElementRef.first.nativeElement as HTMLElement;
 
+            console.log(this.questions);
+
             // tslint:disable-next-line: deprecation
             this.animateElements(startingEl, ongoingEl).subscribe(() => {
                 this.stage = 'ongoing';
             });
-        }, 10);
+        }, 20);
+    }
+
+    shuffle<T>(array: T[]): T[] {
+        let currentIndex = array.length;
+        let temporaryValue;
+        let randomIndex;
+
+        // While there remain elements to shuffle...
+        while (0 !== currentIndex) {
+
+            // Pick a remaining element...
+            randomIndex = Math.floor(Math.random() * currentIndex);
+            currentIndex -= 1;
+
+            // And swap it with the current element.
+            temporaryValue = array[currentIndex];
+            array[currentIndex] = array[randomIndex];
+            array[randomIndex] = temporaryValue;
+        }
+
+        return array;
     }
 }