2024 edition initial

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

@@ -4,7 +4,7 @@
             <div class="col-4">
                 <app-participant-item [participant]="participant" *ngIf="participant" [small]="true"></app-participant-item>
             </div>
-            <div class="col-8">
+            <div class="col-8" *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,10 +29,9 @@
                 </div>
 
             </div>
+            <div class="col-8" *ngIf="action.type === gameQueueTypes.showresults">
+                Question results
+            </div>
         </div>
-
-
     </div>
-
-
 </div>

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

@@ -16,7 +16,7 @@ import { PrizeDto } from "../../../types/prize.dto";
 export class GameQueueComponent implements OnInit {
   @Input() action: EventGameQueue;
   readonly gameQueueTypes = QueueTypes
-  participant: Participant;
+  participant: Participant | null;
   destroyed$ = new Subject<void>();
   penalty = '';
   countdown: number;
@@ -31,11 +31,14 @@ export class GameQueueComponent implements OnInit {
   constructor(private apiService: ApiService) { }
 
   ngOnInit(): void {
-    this.apiService.getParticipant(this.action.target).pipe(
+    if(this.action.target) {
+      this.apiService.getParticipant(this.action.target).pipe(
         takeUntil(this.destroyed$)
-    ).subscribe(e => {
-      this.participant = e;
-    });
+      ).subscribe(e => {
+        this.participant = e;
+      });
+    }
+
     if(this.action.type === this.gameQueueTypes.penalty) {
       this.getPenalty();
     }
@@ -98,10 +101,13 @@ export class GameQueueComponent implements OnInit {
     }
 
   private getPrize() {
+    if(!this.participant === null) {
+      return;
+    }
     this.apiService.getPrize().pipe(takeUntil(this.destroyed$)).subscribe((r) => {
       this.prize = r;
       this.showPrize = true;
-      this.prizeAudioSrc = getAudioPath(`Поздравляю, ${this.participant.name} получает ${this.prize.name}`);
+      this.prizeAudioSrc = getAudioPath(`Поздравляю, ${this.participant?.name} получает ${this.prize.name}`);
     });
   }
 }

src/app/components/question/question.component.html

@@ -1,10 +1,10 @@
 <div class="container">
   <section *ngIf="question">
     <div class="question-container">
-      <h1 class="question-number mt-4">
-        Вопрос
+      <h1 class="question-number ">
+          Вопрос <button type="button" class="btn" (click)="continueGame()">next</button>
       </h1>
-      <h1 class="question-text mt-4">
+      <h1 class="question-text ">
 <!--        <audio *ngIf="audioSrc" [src]="audioSrc" autoplay></audio>-->
         {{ question.text }}
       </h1>
@@ -15,7 +15,14 @@
           </div>
         </div>
       </div>
+        <div class="row row-cols-md-2">
+            <div class="col">
 
+            </div>
+        </div>
     </div>
   </section>
 </div>
+<div class="countdown" [ngClass]="{ 'warn': countdown < 6 }">
+    <span *ngIf="countdown >= 0">{{ countdown }} </span>
+</div>

src/app/components/question/question.component.scss

@@ -25,8 +25,7 @@ section {
       margin: 15px;
       background: $yellow_gradient;
       font-size: 1.5em;
-      padding: 10px;
-      padding-top: 20px;
+      padding: 20px 10px 10px;
       border-radius: 23px;
       p {
         text-align: center;
@@ -34,3 +33,23 @@ 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;
+  right: 20px;
+  z-index: 1000;
+  span {
+    font-size: 3em;
+    font-weight: bold;
+  }
+  color: $thg_brown;
+}

src/app/components/question/question.component.ts

@@ -15,6 +15,8 @@ export class QuestionComponent implements OnInit, OnDestroy  {
   @Input() question: Question;
   destroyed$ = new Subject<void>();
   private questionSubscription: Subscription;
+  countdown = 0;
+  readonly countDownTimer =20;
 
 
   constructor(private apiService:ApiService, private eventService: EventService, private voiceService: VoiceService) { }
@@ -24,12 +26,25 @@ export class QuestionComponent implements OnInit, OnDestroy  {
       return;
     }
     setTimeout(() => this.getQuestion(), 3000);
+    this.countdown = this.countDownTimer;
+    setInterval(() => {
+      console.log(`question countdown`);
+      this.countdown--;
+    }, 1000)
+
     this.questionSubscription = this.eventService.questionChangedEvent.subscribe(() =>{
       this.getQuestion();
+      this.countdown = 20;
     });
 
   }
 
+  continueGame() {
+      this.apiService.continueGame().subscribe((r) => {
+        console.log(r);
+      });
+  }
+
   getQuestion() {
     this.apiService.getQuestion().pipe(
         takeUntil(this.destroyed$)

src/app/views/onboarding/onboarding.component.ts

@@ -114,7 +114,7 @@ export class OnboardingComponent implements OnInit, OnDestroy {
   }
   ngOnDestroy(): void {
     this.destroyed$.complete();
-    this.voiceSubscription.unsubscribe();
+    this.voiceSubscription?.unsubscribe();
   }
 
   shakeCard(card: ElementRef) {

src/types/server-event.ts

@@ -6,6 +6,7 @@ export enum QueueTypes {
   penalty = 'penalty',
   playExtraCard = 'play_extra_card',
   screpa = 'screpa',
+  showresults = 'show_results',
 }
 
 export interface EventPhotosUpdated {