Added music to Biotrivia hopefully Im done with it

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

@@ -24,5 +24,4 @@ export class AppComponent implements OnInit {
     prepareRoute(outlet: RouterOutlet): void {
         return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation;
     }
-
 }

apollo-frontend/src/app/card/card.component.html

@@ -1,4 +1,4 @@
-<div class="container dialog" #container>
+<div [class]="{ container: true, dialog: true, mini: mini }" #container>
     <div class="tags">
         <div class="contents" *ngFor="let type of card.types" >
             <div [class]="[type, 'icon']" *ngIf="type !== 'normal'"></div>

apollo-frontend/src/app/card/card.component.scss

@@ -76,8 +76,8 @@
     display: flex;
     flex-direction: column;
 
-    width: 200px;
+    width: 13em;
-    height: 300px;
+    height: 20em;
 
     border-radius: 1em;
     padding: 1em;
@@ -88,3 +88,7 @@
         height: min-content;
     }
 }
+
+.mini {
+    font-size: .75em;
+}

apollo-frontend/src/app/card/card.component.ts

@@ -28,8 +28,9 @@ export class CardComponent implements OnInit {
             },
         ],
     };
+    @Input() mini = false;
 
-    flipped: boolean = false;
+    flipped = false;
 
     constructor(
         private icons: IgxIconService,

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

@@ -9,10 +9,17 @@
         <div class="separator"></div>
         <button igxButton igxRipple routerLink="">Върни се в началния екран</button>
     </div>
-    <div class="question dialog" *ngIf="stage === 'ongoing' || stage === 'starting-ongoing' || stage === 'ongoing-ended'" #ongoingDialog
+    <div class="question dialog"
+        *ngIf="stage === 'ongoing' || stage === 'starting-ongoing' || stage === 'ongoing-ended'" #ongoingDialog
         style="opacity: 0;">
         <igx-linear-bar [max]="questions.length" [value]="currQuestionN - 1" class="progress"></igx-linear-bar>
-        <div class="container2">
+        <div class="container2" *ngIf="currQuestion.photoUrlsAbove.length > 0">
+            <div class="photos">
+                <div *ngFor="let photo of currQuestion.photoUrlsAbove"
+                    class="photo" [style.background-image]="'url(\'' + photo + '\')'">
+                </div>
+            </div>
+
             <h6>{{currQuestion.question}}</h6>
 
             <div style="color: red;" *ngIf="displayError">Нужен е отговор, за да продължите</div>
@@ -25,24 +32,28 @@
         </div>
     </div>
     <div class="dialog" style="opacity: 0;" *ngIf="stage === 'ended' || stage === 'ongoing-ended'" #endDialog>
-            <h4>Завършихте викторината</h4>
+        <h4>Завършихте викторината</h4>
-            Верни отговори:
+        Верни отговори:
-            <igx-linear-bar [max]="questions.length" [value]="guessedQuestions"></igx-linear-bar>
+        <igx-linear-bar [max]="questions.length" [value]="guessedQuestions"></igx-linear-bar>
-            <div *ngIf="guessedQuestions < questions.length">
+        <div *ngIf="guessedQuestions < questions.length">
-                <h6>Грешни отговори:</h6>
+            <h6>Грешни отговори:</h6>
-                <div class="wrongAnswers">
+            <div class="wrongAnswers">
-                    <div *ngFor="let answer of getIncorrectAnswers()">
+                <div *ngFor="let answer of getIncorrectAnswers()">
-                        <b>{{answer.index}}. {{answer.question.question}}</b><br>
+                    <b>{{answer.index}}. {{answer.question.question}}</b><br>
-                        <div><div class="identation"></div> Вашият отговор: {{answer.answer}}</div>
+                    <div>
-                        <div><div class="identation"></div> Правилен отговор: {{answer.question.answer.correctChoise}}</div>
+                        <div class="identation"></div> Вашият отговор: {{answer.answer}}
+                    </div>
+                    <div>
+                        <div class="identation"></div> Правилен отговор: {{answer.question.answer.correctChoise}}
                     </div>
                 </div>
             </div>
-            <div class="wonCard" style="display: flex; flex-direction: column; align-items: center;" *ngIf="wonCard">
+        </div>
-                <h4>You've won this card:</h4>
+        <div class="wonCard" style="display: flex; flex-direction: column; align-items: center;" *ngIf="wonCard">
-                <app-card [card]="wonCard" style="margin: auto; display: block;"></app-card>
+            <h4>Вие спечелихте тази карта:</h4>
-            </div>
+            <app-card [card]="wonCard" [mini]="true" style="margin: auto; display: block;"></app-card>
-            <button igxButton igxRipple routerLink="">Върни се в началния екран</button>
+        </div>
-            <button igxButton igxRipple (click)="restartGame()">Играй отново</button>
+        <button igxButton igxRipple routerLink="">Върни се в началния екран</button>
+        <button igxButton igxRipple (click)="restartGame()">Играй отново</button>
     </div>
 </div>

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

@@ -63,4 +63,17 @@
         height: 1em;
         display: inline-block;
     }
+
+    .photos {
+        display: flex;
+        justify-content: center;
+        gap: .5em;
+        margin: 1em 0;
+        .photo {
+            flex: 0 0 150px;
+            height: 150px;
+            background-size: cover;
+            background-position: center;
+        }
+    }
 }

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

@@ -2,7 +2,7 @@ import { Component, ElementRef, NgZone, OnInit, ViewChild, ViewChildren } from '
 import { IgxRadioComponent, IgxRadioGroupDirective } from 'igniteui-angular';
 import { Observable, Subject } from 'rxjs';
 import { Answer, Card, DbService, Question, Saved } from '../db.service';
-import { UserdataService } from '../userdata.service';
+import { Medal, UserdataService } from '../userdata.service';
 
 
 @Component({
@@ -20,6 +20,7 @@ export class MinigameBiotriviaComponent implements OnInit {
     questions: Question[];
 
     displayError = false;
+    player: HTMLAudioElement;
 
     guessedQuestions = 0;
     currQuestionN = 0;
@@ -45,6 +46,8 @@ export class MinigameBiotriviaComponent implements OnInit {
 
     endGame(): void {
         this.stage = 'ongoing-ended';
+        this.player.pause();
+        this.player.remove();
 
         const successRate = (this.guessedQuestions) / this.questions.length;
 
@@ -61,6 +64,20 @@ export class MinigameBiotriviaComponent implements OnInit {
             this.wonCard = this.db.getCard(newCard);
         }
 
+        const id = this.db.getAllMinigames().filter(v => v.el.name === 'BioTrivia')[0].id;
+        const data = this.userdata.getMinigameUserdata(id);
+
+        let medal = Medal.None;
+
+        if (successRate > .5) medal = Medal.Bronze;
+        if (successRate > .75) medal = Medal.Silver;
+        if (successRate > .9) medal = Medal.Gold;
+
+        if (data.medal < medal) data.medal = medal;
+        data.played = true;
+
+        this.userdata.saveMinigameUserdata(id, data);
+
         setTimeout(() => {
             this.endingElementRef.first.nativeElement.style.opacity = 0;
             this.animateElements(
@@ -145,11 +162,17 @@ export class MinigameBiotriviaComponent implements OnInit {
     startGame(): void {
         if (this.stage !== 'starting') return;
 
+        this.player = document.createElement('audio');
+
+        this.player.src = '/assets/sound/music/biotrivia.wav';
+        this.player.loop = true;
+        this.player.play();
+
         const startingEl = this.startingElementRef.first.nativeElement as HTMLElement;
         startingEl.style.position = 'absolute';
 
         this.stage = 'starting-ongoing';
-        this.questions = this.db.getRandomQuestions(1);
+        this.questions = this.db.getRandomQuestions(5);
         this.loadNextQuestion();
 
         setTimeout(() => {
@@ -197,7 +220,7 @@ export class MinigameBiotriviaComponent implements OnInit {
 
         this.stage = 'ongoing-ended';
 
-        this.questions = this.db.getRandomQuestions(1);
+        this.questions = this.db.getRandomQuestions(5);
 
         this.displayError = false;
 

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

@@ -36,7 +36,7 @@ export class MinigameCardComponent implements OnInit {
         switch (this.minigameUserdata.medal) {
             case Medal.None: return 'никакъв';
             case Medal.Bronze: return 'бронзов';
-            case Medal.Silfer: return 'сребърен';
+            case Medal.Silver: return 'сребърен';
             case Medal.Gold: return 'златен';
         }
     }

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

@@ -10,7 +10,7 @@ export const mock_minigames: Saved<Minigame>[] = [
         }
     },
     {
-        id: '0',
+        id: '1',
         el: {
             name: 'BioTrivia',
             url: '/minigames/biotrivia',

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

@@ -73,7 +73,7 @@ export const mock_questions: Saved<Question>[] = [
         id: '4',
         el: {
             category: 'animals',
-            photoUrlsAbove: [ '/assets/images/questions/shtigga.png' ],
+            photoUrlsAbove: [ '/assets/images/questions/shtigga.jpg' ],
             question: 'Каква е причината за намаляването на бройките на Черният щъркел?',
             answer: {
                 choises: [
@@ -137,7 +137,7 @@ export const mock_questions: Saved<Question>[] = [
         id: '8',
         el: {
             category: 'animals',
-            photoUrlsAbove: [ '/assets/images/questions/kozirog.png' ],
+            photoUrlsAbove: [ '/assets/images/questions/kozirog.jpg' ],
             question: 'Вярно или невярно. През 2009г. е клониран Пиринейският козирог,който е изчезнал през 2000г.',
             answer: {
                 choises: [
@@ -150,21 +150,6 @@ export const mock_questions: Saved<Question>[] = [
     },
     {
         id: '9',
-        el: {
-            category: 'animals',
-            photoUrlsAbove: [ '/assets/images/questions/kozirog.png' ],
-            question: 'Вярно или невярно. През 2009г. е клониран Пиринейският козирог,който е изчезнал през 2000г.',
-            answer: {
-                choises: [
-                    'Вярно',
-                    'Грешно',
-                ],
-                correctChoise: 'Вярно',
-            }
-        }
-    },
-    {
-        id: '10',
         el: {
             category: 'animals',
             photoUrlsAbove: [ '/assets/images/questions/ara.jpg' ],
@@ -181,7 +166,7 @@ export const mock_questions: Saved<Question>[] = [
         }
     },
     {
-        id: '11',
+        id: '10',
         el: {
             category: 'recycling',
             photoUrlsAbove: [ '/assets/images/questions/teniski.png' ],
@@ -198,7 +183,7 @@ export const mock_questions: Saved<Question>[] = [
         }
     },
     {
-        id: '12',
+        id: '11',
         el: {
             category: 'recycling',
             photoUrlsAbove: [ '/assets/images/questions/dunki.png' ],
@@ -215,7 +200,7 @@ export const mock_questions: Saved<Question>[] = [
         }
     },
     {
-        id: '13',
+        id: '12',
         el: {
             category: 'recycling',
             photoUrlsAbove: [ '/assets/images/questions/bonishte.png' ],
@@ -234,7 +219,7 @@ export const mock_questions: Saved<Question>[] = [
         }
     },
     {
-        id: '14',
+        id: '13',
         el: {
             category: 'recycling',
             photoUrlsAbove: [ '/assets/images/questions/kapeshto kranche.png' ],
@@ -253,7 +238,7 @@ export const mock_questions: Saved<Question>[] = [
         }
     },
     {
-        id: '15',
+        id: '14',
         el: {
             category: 'recycling',
             photoUrlsAbove: [ '/assets/images/questions/roklq.png' ],
@@ -271,10 +256,10 @@ export const mock_questions: Saved<Question>[] = [
         }
     },
     {
-        id: '16',
+        id: '15',
         el: {
             category: 'recycling',
-            photoUrlsAbove: [ '/assets/images/questions/roklq.png' ],
+            photoUrlsAbove: [ '/assets/images/questions/sudomiqlnq.png' ],
             question: 'Вярно или грешно. Миенето на чинии ръчно хаби почти толкова вода, колкото със съдомиялна машина.',
             answer: {
                 choises: [

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

@@ -2,10 +2,10 @@ import { Injectable } from '@angular/core';
 import { Card, DbService } from './db.service';
 
 export enum Medal {
-    None,
+    None = 0,
-    Bronze,
+    Bronze = 1,
-    Silfer,
+    Silver = 2,
-    Gold,
+    Gold = 3,
 }
 export interface MinigameUserdata {
     played: boolean;
@@ -30,7 +30,7 @@ export class UserdataService {
             localStorage['minigame-' + id] = JSON.stringify(a);
             return a;
         }
-        return localStorage['minigame-' + id] as MinigameUserdata | undefined;
+        return JSON.parse(localStorage['minigame-' + id]);
     }
     getAllMinigameUserdata(): MinigameUserdata[] {
         const minigames: MinigameUserdata[] = [];
@@ -62,7 +62,7 @@ export class UserdataService {
     saveMinigameUserdata(id: string, userdata: MinigameUserdata): void {
         const saved = {...userdata, cardId: id};
 
-        localStorage['minigame-' + id] = saved;
+        localStorage['minigame-' + id] = JSON.stringify(saved);
     }
     addCard(id: string): void {
         let saved = this.getOwnedCardIds();