diff --git a/apollo-frontend/src/app/minigame-biotrivia/minigame-biotrivia.component.html b/apollo-frontend/src/app/minigame-biotrivia/minigame-biotrivia.component.html index a985b60..3ce4af5 100644 --- a/apollo-frontend/src/app/minigame-biotrivia/minigame-biotrivia.component.html +++ b/apollo-frontend/src/app/minigame-biotrivia/minigame-biotrivia.component.html @@ -27,13 +27,16 @@ Верни отговори:
-
Грешни отговори
-
- {{answer.question.question}}
- Вашият отговор: {{answer.answer}} - Правилен отговор: {{answer.question.answer.correctChoise}} +
Грешни отговори:
+
+
+ {{answer.index}}. {{answer.question.question}}
+
Вашият отговор: {{answer.answer}}
+
Правилен отговор: {{answer.question.answer.correctChoise}}
+
+
\ No newline at end of file diff --git a/apollo-frontend/src/app/minigame-biotrivia/minigame-biotrivia.component.scss b/apollo-frontend/src/app/minigame-biotrivia/minigame-biotrivia.component.scss index 8695930..1ad0b10 100644 --- a/apollo-frontend/src/app/minigame-biotrivia/minigame-biotrivia.component.scss +++ b/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; + } } \ No newline at end of file diff --git a/apollo-frontend/src/app/minigame-biotrivia/minigame-biotrivia.component.ts b/apollo-frontend/src/app/minigame-biotrivia/minigame-biotrivia.component.ts index eef7a26..50f7346 100644 --- a/apollo-frontend/src/app/minigame-biotrivia/minigame-biotrivia.component.ts +++ b/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); } } diff --git a/apollo-frontend/src/app/mock.minigames.ts b/apollo-frontend/src/app/mock.minigames.ts new file mode 100644 index 0000000..0685c28 --- /dev/null +++ b/apollo-frontend/src/app/mock.minigames.ts @@ -0,0 +1,19 @@ +import { Saved, Minigame } from "./db.service"; + +export const mock_minigames: Saved[] = [ + { + id: '0', + el: { + name: 'Рециклиране', + url: '/minigames/conveyor-belt', + comingSoon: true, + } + }, + { + id: '0', + el: { + name: 'BioTrivia', + url: '/minigames/biotrivia', + } + } +]; diff --git a/apollo-frontend/src/assets/images/cards/image_1.jpg b/apollo-frontend/src/assets/images/cards/image_1.jpg new file mode 100644 index 0000000..4d0500a Binary files /dev/null and b/apollo-frontend/src/assets/images/cards/image_1.jpg differ diff --git a/apollo-frontend/src/assets/images/cards/image_10.jpg b/apollo-frontend/src/assets/images/cards/image_10.jpg new file mode 100644 index 0000000..fdec9d0 Binary files /dev/null and b/apollo-frontend/src/assets/images/cards/image_10.jpg differ diff --git a/apollo-frontend/src/assets/images/cards/image_2.jpg b/apollo-frontend/src/assets/images/cards/image_2.jpg new file mode 100644 index 0000000..e7ef465 Binary files /dev/null and b/apollo-frontend/src/assets/images/cards/image_2.jpg differ diff --git a/apollo-frontend/src/assets/images/cards/image_3.jpg b/apollo-frontend/src/assets/images/cards/image_3.jpg new file mode 100644 index 0000000..640ed3a Binary files /dev/null and b/apollo-frontend/src/assets/images/cards/image_3.jpg differ diff --git a/apollo-frontend/src/assets/images/cards/image_4.jpg b/apollo-frontend/src/assets/images/cards/image_4.jpg new file mode 100644 index 0000000..5419e06 Binary files /dev/null and b/apollo-frontend/src/assets/images/cards/image_4.jpg differ diff --git a/apollo-frontend/src/assets/images/cards/image_5.jpg b/apollo-frontend/src/assets/images/cards/image_5.jpg new file mode 100644 index 0000000..f2f8b1e Binary files /dev/null and b/apollo-frontend/src/assets/images/cards/image_5.jpg differ diff --git a/apollo-frontend/src/assets/images/cards/image_6.jpg b/apollo-frontend/src/assets/images/cards/image_6.jpg new file mode 100644 index 0000000..81ebca4 Binary files /dev/null and b/apollo-frontend/src/assets/images/cards/image_6.jpg differ diff --git a/apollo-frontend/src/assets/images/cards/image_7.jpg b/apollo-frontend/src/assets/images/cards/image_7.jpg new file mode 100644 index 0000000..abcc170 Binary files /dev/null and b/apollo-frontend/src/assets/images/cards/image_7.jpg differ diff --git a/apollo-frontend/src/assets/images/cards/image_8.jpg b/apollo-frontend/src/assets/images/cards/image_8.jpg new file mode 100644 index 0000000..5ba5ed5 Binary files /dev/null and b/apollo-frontend/src/assets/images/cards/image_8.jpg differ diff --git a/apollo-frontend/src/assets/images/cards/image_9.jpg b/apollo-frontend/src/assets/images/cards/image_9.jpg new file mode 100644 index 0000000..8fed28c Binary files /dev/null and b/apollo-frontend/src/assets/images/cards/image_9.jpg differ diff --git a/apollo-frontend/src/styles.scss b/apollo-frontend/src/styles.scss index 21cde94..677cf0a 100644 --- a/apollo-frontend/src/styles.scss +++ b/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; + } \ No newline at end of file