diff --git a/src/app/components/game-queue/game-queue.component.html b/src/app/components/game-queue/game-queue.component.html index 09c4789..cd5d043 100644 --- a/src/app/components/game-queue/game-queue.component.html +++ b/src/app/components/game-queue/game-queue.component.html @@ -1,10 +1,14 @@ -
+
-
-
- +
+
+
-
+

Ура, приз!

@@ -29,8 +33,22 @@
-
- Question results +
+
+

Результаты

+

Ответили правильно

+
+ +
+

Не смогли

+
+ +
+
+
+

Результаты (не утешительные)

+

Так вышло, что никто не ответил на вопросы вообще

+
diff --git a/src/app/components/game-queue/game-queue.component.scss b/src/app/components/game-queue/game-queue.component.scss index 7aca17c..a402e52 100644 --- a/src/app/components/game-queue/game-queue.component.scss +++ b/src/app/components/game-queue/game-queue.component.scss @@ -2,12 +2,12 @@ @keyframes wrong-answer { - from { background-color: inherit} + from { background-color: $thg_yellow} to { background-color: $thg_red } } @keyframes valid-answer { - from { background-color: inherit } + from { background-color: $thg_yellow } to { background-color: $thg_orange } } @@ -18,6 +18,7 @@ display: flex; align-items: center; justify-content: center; + z-index: 100; } .queue-info { @@ -40,3 +41,9 @@ h1,h3 { color: white; background-color: $thg_orange; } + +.results { + //animation: ; + background-color: $thg_yellow; + color: black; +} \ No newline at end of file diff --git a/src/app/components/game-queue/game-queue.component.ts b/src/app/components/game-queue/game-queue.component.ts index 8fb4de7..b83ad11 100644 --- a/src/app/components/game-queue/game-queue.component.ts +++ b/src/app/components/game-queue/game-queue.component.ts @@ -3,21 +3,37 @@ import { EventGameQueue, QueueTypes } from "../../../types/server-event"; import { Participant } from "../../../types/participant"; import { ApiService } from "../../services/api.service"; import { Subject } from "rxjs"; -import { takeUntil } from "rxjs/operators"; +import {map, takeUntil} from "rxjs/operators"; import { Question } from "../../../types/question"; import { getAudioPath } from "../../helper/tts.helper"; import { PrizeDto } from "../../../types/prize.dto"; + +class ResultEntity { + valid: { + user: number; + time: Date; + valid: boolean; + }[]; + invalid: { + user: number; + time: Date; + valid: boolean; + }[]; +} @Component({ selector: 'app-game-queue', templateUrl: './game-queue.component.html', styleUrls: ['./game-queue.component.scss'] }) + export class GameQueueComponent implements OnInit { @Input() action: EventGameQueue; readonly gameQueueTypes = QueueTypes participant: Participant | null; + participants: Participant[] = []; destroyed$ = new Subject(); + results: ResultEntity; penalty = ''; countdown: number; showCountdown: boolean; @@ -62,7 +78,12 @@ export class GameQueueComponent implements OnInit { this.screpaText = this.action.text ?? ''; } + + if(this.action.type == this.gameQueueTypes.showresults) { + this.getResults(); + } console.log(this.action); + } getPenalty() { @@ -110,4 +131,27 @@ export class GameQueueComponent implements OnInit { this.prizeAudioSrc = getAudioPath(`Поздравляю, ${this.participant?.name} получает ${this.prize.name}`); }); } + + private getResults() { + this.apiService.getQuestionResults().pipe(takeUntil(this.destroyed$), map(result => { + result.map(r => { + this.apiService.getParticipant(r.user).pipe(takeUntil(this.destroyed$)).subscribe((particip) => { + if(!this.participants[r.user]) { + this.participants[r.user] = particip; + } + }) + }) + return result; + }) + ).subscribe((results) => { + this.results = { + valid: [], + invalid: [], + } + let sortedByTime = results.sort((a,b) => a.time.getTime() - b.time.getTime()); + this.results.valid = sortedByTime.filter((r) => r.valid); + this.results.invalid = sortedByTime.filter((r) => !r.valid); + console.log(this.results) + }) + } } diff --git a/src/app/components/question/question.component.scss b/src/app/components/question/question.component.scss index 3669dd9..b0bc1a7 100644 --- a/src/app/components/question/question.component.scss +++ b/src/app/components/question/question.component.scss @@ -37,16 +37,14 @@ section { .countdown { &.warn { color: $thg_red; - //background-color: $thg_black; transition: color 2000ms linear, font-size 5000ms ease; border-radius: 10px; font-size: 3em; } min-width: 40px; position: absolute; - bottom: 50px; + bottom: 60px; right: 20px; - z-index: 1000; span { font-size: 3em; font-weight: bold; diff --git a/src/app/components/question/question.component.ts b/src/app/components/question/question.component.ts index 68f59e7..6ec0a0a 100644 --- a/src/app/components/question/question.component.ts +++ b/src/app/components/question/question.component.ts @@ -26,9 +26,17 @@ export class QuestionComponent implements OnInit, OnDestroy { return; } setTimeout(() => this.getQuestion(), 3000); + + this.eventService.gameQueueEvent.pipe(takeUntil(this.destroyed$)).subscribe(() => { + this.countdown = -1; + }); + this.countdown = this.countDownTimer; setInterval(() => { console.log(`question countdown`); + if(this.countdown === 0) { + this.continueGame(); + } this.countdown--; }, 1000) diff --git a/src/app/services/api.service.ts b/src/app/services/api.service.ts index cb0332d..29341ec 100644 --- a/src/app/services/api.service.ts +++ b/src/app/services/api.service.ts @@ -9,6 +9,7 @@ import { CardItem } from "../../types/card-item"; import { GameState } from "./gameState"; import { PenaltyDto } from "../../types/penalty.dto"; import { PrizeDto } from "../../types/prize.dto"; +import {QuestionresultsDto} from "../../types/questionresults.dto"; @Injectable({ providedIn: 'root' @@ -89,4 +90,8 @@ export class ApiService { getPrize(): Observable { return this.httpClient.get(`${API_URL}/gifts`); } + + getQuestionResults() { + return this.httpClient.get(`${API_URL}/quiz/question-results`) + } } diff --git a/src/types/questionresults.dto.ts b/src/types/questionresults.dto.ts new file mode 100644 index 0000000..a2969df --- /dev/null +++ b/src/types/questionresults.dto.ts @@ -0,0 +1,5 @@ +export class QuestionresultsDto { + user: number; + time: Date; + valid: boolean; +} \ No newline at end of file