results page

src/app/components/game-queue/game-queue.component.html

@@ -1,10 +1,14 @@
-<div class="queue-container" [ngClass]="{ 'penalty': action.type === gameQueueTypes.penalty, 'prize': action.type === gameQueueTypes.giveOutAPrize }">
+<div class="queue-container" [ngClass]="{
+'penalty': action.type === gameQueueTypes.penalty,
+'prize': action.type === gameQueueTypes.giveOutAPrize,
+'results': action.type === gameQueueTypes.showresults
+}">
     <div class="queue-info p-2">
-        <div class="row row-cols-2">
-            <div class="col-4">
-                <app-participant-item [participant]="participant" *ngIf="participant" [small]="true"></app-participant-item>
+        <div class="row justify-content-around">
+            <div class="col" *ngIf="action.type !== gameQueueTypes.showresults">
+                <app-participant-item *ngIf="participant" [participant]="participant" [small]="true"></app-participant-item>
             </div>
-            <div class="col-8" *ngIf="action.type !== gameQueueTypes.showresults">
+            <div class="col" *ngIf="action.type !== gameQueueTypes.showresults">
                 <div *ngIf="action.type === gameQueueTypes.giveOutAPrize">
                     <h1 class="animate__flip animate__animated">Ура, приз!</h1>
                     <audio src="assets/sfx/prize.mp3" autoplay></audio>
@@ -29,8 +33,22 @@
                 </div>
 
             </div>
-            <div class="col-8" *ngIf="action.type === gameQueueTypes.showresults">
-                Question results
+            <div class="col" *ngIf="action.type === gameQueueTypes.showresults">
+                <div *ngIf="results && (results.valid.length > 0  || results.invalid.length > 0)">
+                    <h1>Результаты</h1>
+                    <h2>Ответили правильно</h2>
+                    <div *ngFor="let item of results.valid" class="justify-content-center">
+                        <app-participant-item [participant]="participants[item.user]" [small]="true"></app-participant-item>
+                    </div>
+                    <h2>Не смогли</h2>
+                    <div *ngFor="let item of results.invalid" class="justify-content-center">
+                        <app-participant-item [participant]="participants[item.user]" [small]="true"></app-participant-item>
+                    </div>
+                </div>
+                <div *ngIf="!results || (results.valid.length === 0  && results.invalid.length === 0)">
+                    <h1>Результаты (не утешительные)</h1>
+                    <h2>Так вышло, что никто не ответил на вопросы вообще</h2>
+                </div>
             </div>
         </div>
     </div>

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;
+}

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<void>();
+  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)
+    })
+  }
 }

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;

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)
 

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<PrizeDto> {
     return this.httpClient.get<PrizeDto>(`${API_URL}/gifts`);
   }
+
+  getQuestionResults() {
+    return this.httpClient.get<QuestionresultsDto[]>(`${API_URL}/quiz/question-results`)
+  }
 }

src/types/questionresults.dto.ts

@@ -0,0 +1,5 @@
+export class QuestionresultsDto {
+  user: number;
+  time: Date;
+  valid: boolean;
+}