diff --git a/apollo-frontend/src/app/app.module.ts b/apollo-frontend/src/app/app.module.ts index df1cda9..a69d40e 100644 --- a/apollo-frontend/src/app/app.module.ts +++ b/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] diff --git a/apollo-frontend/src/app/db.service.ts b/apollo-frontend/src/app/db.service.ts index 8c26783..11eab06 100644 --- a/apollo-frontend/src/app/db.service.ts +++ b/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 { @@ -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(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() { } } 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 ec04886..bd5b2ee 100644 --- a/apollo-frontend/src/app/minigame-biotrivia/minigame-biotrivia.component.html +++ b/apollo-frontend/src/app/minigame-biotrivia/minigame-biotrivia.component.html @@ -9,7 +9,13 @@
-
-

+
+
{{currQuestion.question}}
+ + + {{choise}} + + +
\ 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 06ccf6d..9259520 100644 --- a/apollo-frontend/src/app/minigame-biotrivia/minigame-biotrivia.component.scss +++ b/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; + } } } \ 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 aba8e9d..f794702 100644 --- a/apollo-frontend/src/app/minigame-biotrivia/minigame-biotrivia.component.ts +++ b/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 { const a = new Subject(); 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(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; } } diff --git a/apollo-frontend/src/assets/images/questions/ris.jpg b/apollo-frontend/src/assets/images/questions/ris.jpg new file mode 100644 index 0000000..c2111cc Binary files /dev/null and b/apollo-frontend/src/assets/images/questions/ris.jpg differ diff --git a/apollo-frontend/src/assets/images/questions/tulen.jpg b/apollo-frontend/src/assets/images/questions/tulen.jpg new file mode 100644 index 0000000..2dc2bad Binary files /dev/null and b/apollo-frontend/src/assets/images/questions/tulen.jpg differ