some css

Author: littlegubs

src/app/core/store/lobby.store.ts

@@ -4,6 +4,7 @@ import { Lobby } from '../../shared/models/lobby'
 import { LobbyUser } from '../../shared/models/lobby-user'
 import { AuthService } from '../services/auth.service'
 import { Router } from '@angular/router'
+import { LobbyMusic } from '../../shared/models/lobby-music'
 
 @Injectable({
   providedIn: 'root',
@@ -13,14 +14,14 @@ export class LobbyStore {
   private meBehaviorSubject = new BehaviorSubject<LobbyUser>(null)
   private lobbyBehaviorSubject = new BehaviorSubject<Lobby | null>(null)
   private currentLobbyMusicIdBehaviorSubject = new BehaviorSubject<ArrayBuffer | null>(null)
-  private currentLobbyMusicAnswerBehaviorSubject = new BehaviorSubject<string | null>(null)
+  private currentLobbyMusicAnswerBehaviorSubject = new BehaviorSubject<LobbyMusic<number> | null>(null)
 
   public readonly lobby: Observable<Lobby | null> = this.lobbyBehaviorSubject.asObservable()
   public readonly users: Observable<LobbyUser[] | null> = this.usersBehaviorSubject.asObservable()
   public readonly me: Observable<LobbyUser | null> = this.meBehaviorSubject.asObservable()
   public readonly currentLobbyMusicId: Observable<ArrayBuffer | null> =
     this.currentLobbyMusicIdBehaviorSubject.asObservable()
-  public readonly currentLobbyMusicAnswer: Observable<string | null> =
+  public readonly currentLobbyMusicAnswer: Observable<LobbyMusic<number> | null> =
     this.currentLobbyMusicAnswerBehaviorSubject.asObservable()
 
   constructor(private authService: AuthService, private router: Router) {}
@@ -64,11 +65,11 @@ export class LobbyStore {
     this.currentLobbyMusicIdBehaviorSubject.next(lobbyMusicId)
   }
 
-  getCurrentLobbyMusicAnswer(): string | null {
+  getCurrentLobbyMusicAnswer(): LobbyMusic<number> | null {
     return this.currentLobbyMusicAnswerBehaviorSubject.getValue()
   }
 
-  setCurrentLobbyMusicAnswer(lobbyMusicAnswer: string | null): void {
+  setCurrentLobbyMusicAnswer(lobbyMusicAnswer: LobbyMusic<number> | null): void {
     this.currentLobbyMusicAnswerBehaviorSubject.next(lobbyMusicAnswer)
   }
 

src/app/modules/lobby/components/audio-player/audio-player.component.html

@@ -1,8 +1,10 @@
 <mat-slider
   aria-label="unit(s)"
   [value]="gainNode.gain.value"
+  [vertical]="true"
   (input)="updateVolume($event)"
   [min]="0"
   [max]="1"
   [step]="0.001"
+  color="primary"
 ></mat-slider>

src/app/modules/lobby/components/button-play/button-play.component.html

@@ -1,5 +1,5 @@
 <div class="row">
-  <ng-container *ngIf="role === lobbyUsersRoles.Host">
+  <ng-container *ngIf="showPlayButton()">
     <button class="btn btn-primary col-md-6" type="button" (click)="play()">
       Play
       <ng-container *ngIf="lobby.status === lobbyStatus.Loading">(loading)</ng-container>
@@ -8,7 +8,7 @@
   <button
     type="button"
     class="btn btn-outline-primary"
-    [ngClass]="{ 'col-md-6': role === lobbyUsersRoles.Host, 'col-md-12': role !== lobbyUsersRoles.Host }"
+    [ngClass]="{ 'col-md-6': showPlayButton(), 'col-md-12': !showPlayButton() }"
     (click)="leave()"
   >
     Leave

src/app/modules/lobby/components/button-play/button-play.component.ts

@@ -50,4 +50,11 @@ export class ButtonPlayComponent implements OnInit, OnDestroy {
       void this.router.navigate(['/'])
     })
   }
+
+  showPlayButton(): boolean {
+    return (
+      this.role === this.lobbyUsersRoles.Host &&
+      [LobbyStatuses.Waiting.toString(), LobbyStatuses.Loading.toString()].includes(this.lobby.status)
+    )
+  }
 }

src/app/modules/lobby/components/center-container/center-container.component.html

@@ -1,7 +1,7 @@
-music {{ lobby?.currentLobbyMusicPosition }}/{{ lobby?.lobbyMusics }}
-
-{{ answer }}
-
-<app-lobby-audio-player></app-lobby-audio-player>
-<app-lobby-countdown></app-lobby-countdown>
-<app-lobby-answer></app-lobby-answer>
+<div class="bg-dark p-4 h-100">
+  <div class="d-flex flex-column justify-content-between">
+    <app-lobby-audio-player class="row justify-content-end"></app-lobby-audio-player>
+    <app-lobby-countdown></app-lobby-countdown>
+    <app-lobby-answer></app-lobby-answer>
+  </div>
+</div>

src/app/modules/lobby/components/center-container/center-container.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { LobbyStore } from '../../../../core/store/lobby.store'
-import { Lobby, LobbyStatuses } from '../../../../shared/models/lobby'
+import { Lobby } from '../../../../shared/models/lobby'
 import { Subscription } from 'rxjs'
 
 @Component({
@@ -14,17 +14,7 @@ export class CenterContainerComponent implements OnInit, OnDestroy {
   constructor(private lobbyStore: LobbyStore) {}
 
   ngOnInit(): void {
-    this.subscriptions = [
-      this.lobbyStore.currentLobbyMusicAnswer.subscribe((res) => {
-        this.answer = res
-      }),
-      this.lobbyStore.lobby.subscribe((lobby) => {
-        this.lobby = lobby
-        if (lobby.status !== LobbyStatuses.AnswerReveal) {
-          this.answer = null
-        }
-      }),
-    ]
+    this.subscriptions = []
   }
 
   ngOnDestroy(): void {

src/app/modules/lobby/lobby.component.ts

@@ -11,6 +11,7 @@ import { AuthService } from '../../core/services/auth.service'
 import { LobbyStore } from '../../core/store/lobby.store'
 import { LobbyUser } from '../../shared/models/lobby-user'
 import { MatSnackBar } from '@angular/material/snack-bar'
+import { LobbyMusic } from '../../shared/models/lobby-music'
 
 @Component({
   selector: 'app-lobby',
@@ -76,7 +77,7 @@ export class LobbyComponent implements OnInit, OnDestroy {
       this.socket.fromEvent('lobbyMusic').subscribe((lobbyMusicId: ArrayBuffer) => {
         this.lobbyStore.setCurrentLobbyMusicId(lobbyMusicId)
       }),
-      this.socket.fromEvent('lobbyAnswer').subscribe((answer: string) => {
+      this.socket.fromEvent('lobbyAnswer').subscribe((answer: LobbyMusic<number>) => {
         this.lobbyStore.setCurrentLobbyMusicAnswer(answer)
       }),
       this.socket.fromEvent('lobbyUserAnswer').subscribe((answer: LobbyUser) => {

src/app/modules/lobby/lobby.module.ts

@@ -20,6 +20,9 @@ import { MatSnackBarModule } from '@angular/material/snack-bar'
 import { MatRadioModule } from '@angular/material/radio'
 import { MatTooltipModule } from '@angular/material/tooltip'
 import { AudioContextModule } from 'angular-audio-context'
+import { InformationComponent } from './components/information/information.component';
+import { AnswerRevealComponent } from './components/answer-reveal/answer-reveal.component'
+import {MatIconModule} from "@angular/material/icon";
 
 const routes: Routes = [
   { path: 'create', component: CreateComponent },
@@ -43,6 +46,8 @@ const routes: Routes = [
     AnswerSelectComponent,
     CountdownComponent,
     CenterContainerComponent,
+    InformationComponent,
+    AnswerRevealComponent,
   ],
   imports: [
     CommonModule,
@@ -53,6 +58,7 @@ const routes: Routes = [
     MatRadioModule,
     MatTooltipModule,
     AudioContextModule.forRoot('balanced'),
+    MatIconModule,
   ],
   providers: [LobbyHttpService],
 })

src/app/modules/lobby/playing/playing.component.html

@@ -1 +1,10 @@
-<app-lobby-center-container></app-lobby-center-container>
+<div class="row">
+  <div class="col-md-3">
+    <div><app-lobby-information></app-lobby-information></div>
+    <div class="mt-2"><app-lobby-answer-reveal></app-lobby-answer-reveal></div>
+  </div>
+  <div class="col-md-6">
+    <app-lobby-center-container></app-lobby-center-container>
+  </div>
+  <div class="col-md-3"><app-button-play></app-button-play></div>
+</div>

src/app/shared/models/lobby-music.ts

@@ -1,9 +1,10 @@
 import { Music } from './music'
 import { Game } from './game'
+import { GameToMusic } from './game-to-music'
 
-export interface LobbyMusic {
+export interface LobbyMusic<T = GameToMusic[]> {
   id: string
   music: Music
-  expectedAnswer?: Game
+  expectedAnswer?: Game<T>
   startAt: number
 }

src/assets/scss/components/_game.scss

@@ -7,3 +7,18 @@ app-game-item {
     outline: black solid 2px;
   }
 }
+.mat-mini-fab.large {
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+
+  .mat-button-wrapper {
+    padding: 0;
+  }
+  .mat-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+  }
+}