From bdbe7e4d855cc2a6cf9dc7762012ba55123aa99d Mon Sep 17 00:00:00 2001 From: Alexis Leroy Date: Wed, 20 Apr 2022 19:54:06 +0200 Subject: [PATCH] lobby config integration + new audio api --- package-lock.json | 144 +++++++++++++++--- package.json | 1 + src/app/core/store/lobby.store.ts | 10 +- .../audio-player/audio-player.component.html | 9 +- .../audio-player/audio-player.component.ts | 47 +++--- .../button-play/button-play.component.html | 20 ++- .../button-play/button-play.component.ts | 9 +- .../components/config/config.component.html | 116 +++++++++++++- .../components/config/config.component.ts | 40 ++++- .../components/users/users.component.html | 7 +- .../lobby/create/create.component.html | 4 +- src/app/modules/lobby/lobby.component.html | 3 +- src/app/modules/lobby/lobby.component.ts | 8 +- src/app/modules/lobby/lobby.module.ts | 14 +- .../lobby/waiting/waiting.component.html | 7 +- src/app/shared/models/lobby.ts | 3 + src/assets/scss/components/_forms.scss | 4 +- .../scss/components/{game.scss => _game.scss} | 0 src/assets/scss/components/_lobby.scss | 46 ++++++ src/assets/scss/main.scss | 1 + src/styles.scss | 1 - 21 files changed, 415 insertions(+), 79 deletions(-) rename src/assets/scss/components/{game.scss => _game.scss} (100%) create mode 100644 src/assets/scss/components/_lobby.scss diff --git a/package-lock.json b/package-lock.json index fca1e1f..bc43e96 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "vgmq", - "version": "0.4.0", + "version": "0.5.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "vgmq", - "version": "0.4.0", + "version": "0.5.0", "dependencies": { "@angular/animations": "~13.2.4", "@angular/cdk": "^13.2.4", @@ -23,6 +23,7 @@ "@fortawesome/free-brands-svg-icons": "^6.1.1", "@fortawesome/free-regular-svg-icons": "^6.1.1", "@fortawesome/free-solid-svg-icons": "^6.1.1", + "angular-audio-context": "^32.0.7", "bootstrap": "^5.1.1", "chart.js": "^3.1.1", "jwt-decode": "^2.2.0", @@ -449,9 +450,9 @@ "peer": true }, "node_modules/@angular-eslint/builder": { - "version": "13.1.0", - "resolved": "https://registry.npmjs.org/@angular-eslint/builder/-/builder-13.1.0.tgz", - "integrity": "sha512-RdyeetctnipVdCBrU/mipJ2XKiLC1yGmK1Sfbbgwu0s49CAdOArY/b+b8OU3yyy4EO1EGKQMlzs6F3wTYgiZCA==", + "version": "13.2.1", + "resolved": "https://registry.npmjs.org/@angular-eslint/builder/-/builder-13.2.1.tgz", + "integrity": "sha512-79378DhlZ+hUlsTYvFs/BauiCQPN0RGlN5IuvzZs62yWquPecwK0nHcSasUe5OtiknuwIy7SwFq/AXyJVI+Ouw==", "dev": true, "dependencies": { "@nrwl/devkit": "13.1.3" @@ -2529,7 +2530,6 @@ "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz", "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==", - "dev": true, "dependencies": { "regenerator-runtime": "^0.13.4" }, @@ -4667,6 +4667,20 @@ "ajv": "^8.8.2" } }, + "node_modules/angular-audio-context": { + "version": "32.0.7", + "resolved": "https://registry.npmjs.org/angular-audio-context/-/angular-audio-context-32.0.7.tgz", + "integrity": "sha512-XnFd3ieIW6E6nQejRCeiBrDirCdNyyLWLlzhULqu5f0/ZfNcBNO6YgVvP2tN9TO1/r5wktvEg94kSsreIS9idw==", + "dependencies": { + "@babel/runtime": "7.16.7", + "standardized-audio-context": "^25.3.23", + "tslib": "^2.3.1" + }, + "peerDependencies": { + "@angular/common": "^13.0.0", + "@angular/core": "^13.0.0" + } + }, "node_modules/angular-cli-ghpages": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/angular-cli-ghpages/-/angular-cli-ghpages-1.0.0.tgz", @@ -4868,9 +4882,9 @@ } }, "node_modules/async": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", - "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", "dev": true, "dependencies": { "lodash": "^4.17.14" @@ -4897,6 +4911,29 @@ "node": ">= 4.5.0" } }, + "node_modules/automation-events": { + "version": "4.0.15", + "resolved": "https://registry.npmjs.org/automation-events/-/automation-events-4.0.15.tgz", + "integrity": "sha512-58S7TZEii10lx4SABD/B52uMZXN30FWbfM06+3Kgo602YvWbhPQG2IiOvr/7iI5x7fjrqPNVjAigA0C/kOA28g==", + "dependencies": { + "@babel/runtime": "^7.17.9", + "tslib": "^2.3.1" + }, + "engines": { + "node": ">=12.20.1" + } + }, + "node_modules/automation-events/node_modules/@babel/runtime": { + "version": "7.17.9", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz", + "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==", + "dependencies": { + "regenerator-runtime": "^0.13.4" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/autoprefixer": { "version": "10.4.4", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.4.tgz", @@ -12534,8 +12571,7 @@ "node_modules/regenerator-runtime": { "version": "0.13.9", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", - "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==", - "dev": true + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" }, "node_modules/regenerator-transform": { "version": "0.14.5", @@ -13491,6 +13527,27 @@ "node": ">= 8" } }, + "node_modules/standardized-audio-context": { + "version": "25.3.23", + "resolved": "https://registry.npmjs.org/standardized-audio-context/-/standardized-audio-context-25.3.23.tgz", + "integrity": "sha512-4pDsYpOql/qAe+3iWnV0otsUyZYGCPA8h5UVSBclwc3gzsPN9pHCPWXGgI453JoM7IGLxNIdX0W1LOIdi5AgHQ==", + "dependencies": { + "@babel/runtime": "^7.17.9", + "automation-events": "^4.0.15", + "tslib": "^2.3.1" + } + }, + "node_modules/standardized-audio-context/node_modules/@babel/runtime": { + "version": "7.17.9", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz", + "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==", + "dependencies": { + "regenerator-runtime": "^0.13.4" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/statuses": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", @@ -15068,9 +15125,9 @@ } }, "@angular-eslint/builder": { - "version": "13.1.0", - "resolved": "https://registry.npmjs.org/@angular-eslint/builder/-/builder-13.1.0.tgz", - "integrity": "sha512-RdyeetctnipVdCBrU/mipJ2XKiLC1yGmK1Sfbbgwu0s49CAdOArY/b+b8OU3yyy4EO1EGKQMlzs6F3wTYgiZCA==", + "version": "13.2.1", + "resolved": "https://registry.npmjs.org/@angular-eslint/builder/-/builder-13.2.1.tgz", + "integrity": "sha512-79378DhlZ+hUlsTYvFs/BauiCQPN0RGlN5IuvzZs62yWquPecwK0nHcSasUe5OtiknuwIy7SwFq/AXyJVI+Ouw==", "dev": true, "requires": { "@nrwl/devkit": "13.1.3" @@ -16502,7 +16559,6 @@ "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz", "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==", - "dev": true, "requires": { "regenerator-runtime": "^0.13.4" } @@ -18093,6 +18149,16 @@ "fast-deep-equal": "^3.1.3" } }, + "angular-audio-context": { + "version": "32.0.7", + "resolved": "https://registry.npmjs.org/angular-audio-context/-/angular-audio-context-32.0.7.tgz", + "integrity": "sha512-XnFd3ieIW6E6nQejRCeiBrDirCdNyyLWLlzhULqu5f0/ZfNcBNO6YgVvP2tN9TO1/r5wktvEg94kSsreIS9idw==", + "requires": { + "@babel/runtime": "7.16.7", + "standardized-audio-context": "^25.3.23", + "tslib": "^2.3.1" + } + }, "angular-cli-ghpages": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/angular-cli-ghpages/-/angular-cli-ghpages-1.0.0.tgz", @@ -18234,9 +18300,9 @@ "dev": true }, "async": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", - "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", "dev": true, "requires": { "lodash": "^4.17.14" @@ -18254,6 +18320,25 @@ "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==", "dev": true }, + "automation-events": { + "version": "4.0.15", + "resolved": "https://registry.npmjs.org/automation-events/-/automation-events-4.0.15.tgz", + "integrity": "sha512-58S7TZEii10lx4SABD/B52uMZXN30FWbfM06+3Kgo602YvWbhPQG2IiOvr/7iI5x7fjrqPNVjAigA0C/kOA28g==", + "requires": { + "@babel/runtime": "^7.17.9", + "tslib": "^2.3.1" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.17.9", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz", + "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + } + } + }, "autoprefixer": { "version": "10.4.4", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.4.tgz", @@ -23828,8 +23913,7 @@ "regenerator-runtime": { "version": "0.13.9", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", - "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==", - "dev": true + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" }, "regenerator-transform": { "version": "0.14.5", @@ -24578,6 +24662,26 @@ "minipass": "^3.1.1" } }, + "standardized-audio-context": { + "version": "25.3.23", + "resolved": "https://registry.npmjs.org/standardized-audio-context/-/standardized-audio-context-25.3.23.tgz", + "integrity": "sha512-4pDsYpOql/qAe+3iWnV0otsUyZYGCPA8h5UVSBclwc3gzsPN9pHCPWXGgI453JoM7IGLxNIdX0W1LOIdi5AgHQ==", + "requires": { + "@babel/runtime": "^7.17.9", + "automation-events": "^4.0.15", + "tslib": "^2.3.1" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.17.9", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz", + "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + } + } + }, "statuses": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", diff --git a/package.json b/package.json index 2af91a3..fb48173 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@fortawesome/free-brands-svg-icons": "^6.1.1", "@fortawesome/free-regular-svg-icons": "^6.1.1", "@fortawesome/free-solid-svg-icons": "^6.1.1", + "angular-audio-context": "^32.0.7", "bootstrap": "^5.1.1", "chart.js": "^3.1.1", "jwt-decode": "^2.2.0", diff --git a/src/app/core/store/lobby.store.ts b/src/app/core/store/lobby.store.ts index c27c1d9..c36dc87 100644 --- a/src/app/core/store/lobby.store.ts +++ b/src/app/core/store/lobby.store.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core' -import {BehaviorSubject, Observable, ReplaySubject, Subject} from 'rxjs' +import { BehaviorSubject, Observable } from 'rxjs' import { Lobby } from '../../shared/models/lobby' import { LobbyUser } from '../../shared/models/lobby-user' import { AuthService } from '../services/auth.service' @@ -12,13 +12,13 @@ export class LobbyStore { private usersBehaviorSubject = new BehaviorSubject(null) private meBehaviorSubject = new BehaviorSubject(null) private lobbyBehaviorSubject = new BehaviorSubject(null) - private currentLobbyMusicIdBehaviorSubject = new BehaviorSubject(null) + private currentLobbyMusicIdBehaviorSubject = new BehaviorSubject(null) private currentLobbyMusicAnswerBehaviorSubject = new BehaviorSubject(null) public readonly lobby: Observable = this.lobbyBehaviorSubject.asObservable() public readonly users: Observable = this.usersBehaviorSubject.asObservable() public readonly me: Observable = this.meBehaviorSubject.asObservable() - public readonly currentLobbyMusicId: Observable = + public readonly currentLobbyMusicId: Observable = this.currentLobbyMusicIdBehaviorSubject.asObservable() public readonly currentLobbyMusicAnswer: Observable = this.currentLobbyMusicAnswerBehaviorSubject.asObservable() @@ -56,11 +56,11 @@ export class LobbyStore { } } - getCurrentLobbyMusicId(): string | null { + getCurrentLobbyMusicId(): ArrayBuffer | null { return this.currentLobbyMusicIdBehaviorSubject.getValue() } - setCurrentLobbyMusicId(lobbyMusicId: string | null): void { + setCurrentLobbyMusicId(lobbyMusicId: ArrayBuffer | null): void { this.currentLobbyMusicIdBehaviorSubject.next(lobbyMusicId) } diff --git a/src/app/modules/lobby/components/audio-player/audio-player.component.html b/src/app/modules/lobby/components/audio-player/audio-player.component.html index fbb81a3..49c7aaf 100644 --- a/src/app/modules/lobby/components/audio-player/audio-player.component.html +++ b/src/app/modules/lobby/components/audio-player/audio-player.component.html @@ -1 +1,8 @@ - + diff --git a/src/app/modules/lobby/components/audio-player/audio-player.component.ts b/src/app/modules/lobby/components/audio-player/audio-player.component.ts index 5e39fb8..9014e2e 100644 --- a/src/app/modules/lobby/components/audio-player/audio-player.component.ts +++ b/src/app/modules/lobby/components/audio-player/audio-player.component.ts @@ -4,6 +4,10 @@ import { LobbyStore } from '../../../../core/store/lobby.store' import { LobbyMusicHttpService } from '../../../../core/http/lobby-music.http.service' import { CustomSocket } from '../../../../core/socket/custom.socket' import { Subscription } from 'rxjs' +import { IGainNode } from 'standardized-audio-context/src/interfaces/gain-node' +import { AudioContext, IAudioContext } from 'angular-audio-context' +import { MatSliderChange } from '@angular/material/slider' +import { IAudioBufferSourceNode } from 'standardized-audio-context/src/interfaces/audio-buffer-source-node' @Component({ selector: 'app-lobby-audio-player', @@ -13,46 +17,49 @@ export class AudioPlayerComponent implements OnInit, OnDestroy { audio?: HTMLAudioElement lobby: Lobby subscriptions: Subscription[] = [] + gainNode: IGainNode + source: IAudioBufferSourceNode constructor( private lobbyStore: LobbyStore, private lobbyMusicHttpService: LobbyMusicHttpService, - private socket: CustomSocket + private socket: CustomSocket, + private audioContext: AudioContext ) {} ngOnInit(): void { - this.audio = new Audio() - this.audio.volume = 0.5 + this.gainNode = this.audioContext.createGain() + this.gainNode.gain.value = 0.5 + this.gainNode.connect(this.audioContext.destination) this.subscriptions = [ - this.lobbyStore.currentLobbyMusicId.subscribe((lobbyMusicId) => { + this.lobbyStore.currentLobbyMusicId.subscribe(async (lobbyMusicId) => { if (lobbyMusicId !== null) { - this.lobbyMusicHttpService.get(lobbyMusicId).subscribe((res) => { - const reader = new FileReader() - reader.onload = (e): void => { - const srcUrl = e.target.result - if (typeof srcUrl === 'string') { - this.audio.src = srcUrl - void this.audio.play() - } - } - reader.readAsDataURL(res) - }) + await this.audioContext.resume() + const buffer = await this.audioContext.decodeAudioData(lobbyMusicId) + this.source = this.audioContext.createBufferSource() + + this.source.buffer = buffer + this.source.connect(this.gainNode) + this.source.start() } else { - this.audio.pause() + this.source?.stop() } }), this.lobbyStore.lobby.subscribe((lobby) => { if (lobby && lobby.status !== LobbyStatuses.PlayingMusic) { - this.audio.pause() + this.source?.stop() } }), ] } ngOnDestroy(): void { - this.audio.pause() - this.audio = undefined + this.source?.stop() + void this.audioContext.suspend() this.subscriptions.forEach((sb) => sb.unsubscribe()) - console.log('yoo') + } + + updateVolume($event: MatSliderChange) { + this.gainNode.gain.value = $event.value } } diff --git a/src/app/modules/lobby/components/button-play/button-play.component.html b/src/app/modules/lobby/components/button-play/button-play.component.html index c958682..8a94061 100644 --- a/src/app/modules/lobby/components/button-play/button-play.component.html +++ b/src/app/modules/lobby/components/button-play/button-play.component.html @@ -1,6 +1,16 @@ - - + + - + diff --git a/src/app/modules/lobby/components/button-play/button-play.component.ts b/src/app/modules/lobby/components/button-play/button-play.component.ts index 8eb30b3..a4910b5 100644 --- a/src/app/modules/lobby/components/button-play/button-play.component.ts +++ b/src/app/modules/lobby/components/button-play/button-play.component.ts @@ -5,6 +5,7 @@ import { LobbyUserRoles } from '../../../../shared/models/lobby-user' import { Subscription } from 'rxjs' import { LobbyStore } from '../../../../core/store/lobby.store' import { CustomSocket } from '../../../../core/socket/custom.socket' +import { Router } from '@angular/router' @Component({ selector: 'app-button-play', @@ -20,7 +21,8 @@ export class ButtonPlayComponent implements OnInit, OnDestroy { constructor( private lobbyHttpService: LobbyHttpService, private lobbyStore: LobbyStore, - private socket: CustomSocket + private socket: CustomSocket, + private router: Router ) {} ngOnInit(): void { @@ -43,4 +45,9 @@ export class ButtonPlayComponent implements OnInit, OnDestroy { play(): void { this.socket.emit('play', this.lobby.code) } + leave(): void { + this.lobbyHttpService.leave().subscribe(() => { + void this.router.navigate(['/']) + }) + } } diff --git a/src/app/modules/lobby/components/config/config.component.html b/src/app/modules/lobby/components/config/config.component.html index 15c77d1..8e36b4e 100644 --- a/src/app/modules/lobby/components/config/config.component.html +++ b/src/app/modules/lobby/components/config/config.component.html @@ -1,5 +1,111 @@ -
- - - -
+
+
+ + Lobby name + + + + Password + + keep it empty if this is public lobby + +

Settings

+
+
+

Lobby

+
+
+
+ +
+ +
+ +
+
+
+
+ +
+
+ +
+ s +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+

Modifiers

+ Duplicate games + + Skip guessing + + Skip result +
+
+
+
+ +
+
+
+
diff --git a/src/app/modules/lobby/components/config/config.component.ts b/src/app/modules/lobby/components/config/config.component.ts index 915a10d..9c16703 100644 --- a/src/app/modules/lobby/components/config/config.component.ts +++ b/src/app/modules/lobby/components/config/config.component.ts @@ -7,6 +7,8 @@ import { Subscription } from 'rxjs' import { CustomSocket } from '../../../../core/socket/custom.socket' import { LobbyStore } from '../../../../core/store/lobby.store' import { LobbyUserRoles } from '../../../../shared/models/lobby-user' +import { AuthService } from '../../../../core/services/auth.service' +import { finalize } from 'rxjs/operators' @Component({ selector: 'app-lobby-config', @@ -15,6 +17,7 @@ import { LobbyUserRoles } from '../../../../shared/models/lobby-user' export class ConfigComponent implements OnInit, OnDestroy { lobbyForm?: FormGroup lobby?: Lobby + loading = false userCanEdit = true subscriptions: Subscription[] = [] @@ -24,14 +27,21 @@ export class ConfigComponent implements OnInit, OnDestroy { private router: Router, private route: ActivatedRoute, private socket: CustomSocket, - private lobbyStore: LobbyStore + private lobbyStore: LobbyStore, + private authService: AuthService ) {} ngOnInit(): void { this.lobby = this.lobbyStore.getLobby() this.lobbyForm = this.fb.group({ - name: [this.lobby?.name, Validators.required.bind(this)], + name: [ + this.lobby ? this.lobby.name : `${this.authService.decodeJwt().username}'s lobby`, + Validators.required.bind(this), + ], password: [this.lobby?.password], + musicNumber: [this.lobby ? this.lobby.musicNumber : 20, [Validators.max(100), Validators.min(5)]], + guessTime: [this.lobby ? this.lobby.guessTime : 20, [Validators.max(60), Validators.min(5)]], + allowDuplicates: [this.lobby ? this.lobby.allowDuplicates : false], }) if (this.lobby) { this.subscriptions = [ @@ -40,6 +50,9 @@ export class ConfigComponent implements OnInit, OnDestroy { this.lobbyForm.patchValue({ name: this.lobby.name, ...(this.lobby?.password && { password: this.lobby?.password }), + musicNumber: this.lobby.musicNumber, + guessTime: this.lobby.guessTime, + allowDuplicates: this.lobby.allowDuplicates, }) }), this.lobbyStore.me.subscribe((me) => { @@ -50,6 +63,20 @@ export class ConfigComponent implements OnInit, OnDestroy { }), ] } + this.lobbyForm.get('musicNumber').valueChanges.subscribe({ + next: (value) => { + this.lobbyForm + .get('musicNumber') + .setValue(value, { onlySelf: true, emitEvent: false, emitModelToViewChange: true }) + }, + }) + this.lobbyForm.get('guessTime').valueChanges.subscribe({ + next: (value) => { + this.lobbyForm + .get('guessTime') + .setValue(value, { onlySelf: true, emitEvent: false, emitModelToViewChange: true }) + }, + }) } ngOnDestroy(): void { @@ -57,12 +84,17 @@ export class ConfigComponent implements OnInit, OnDestroy { } submit(): void { + this.loading = true if (this.lobby === null) { this.lobbyHttpService .create({ name: this.lobbyForm.get('name').value, password: this.lobbyForm.get('password').value, + musicNumber: this.lobbyForm.get('musicNumber').value, + guessTime: this.lobbyForm.get('guessTime').value, + allowDuplicates: this.lobbyForm.get('allowDuplicates').value, }) + .pipe(finalize(() => (this.loading = false))) .subscribe((res) => { void this.router.navigate([`/lobby/${res.code}`]) }) @@ -71,7 +103,11 @@ export class ConfigComponent implements OnInit, OnDestroy { .update(this.lobby.code, { name: this.lobbyForm.get('name').value, password: this.lobbyForm.get('password').value, + musicNumber: this.lobbyForm.get('musicNumber').value, + guessTime: this.lobbyForm.get('guessTime').value, + allowDuplicates: this.lobbyForm.get('allowDuplicates').value, }) + .pipe(finalize(() => (this.loading = false))) .subscribe((res) => { console.log(res) }) diff --git a/src/app/modules/lobby/components/users/users.component.html b/src/app/modules/lobby/components/users/users.component.html index 6776d94..c716b86 100644 --- a/src/app/modules/lobby/components/users/users.component.html +++ b/src/app/modules/lobby/components/users/users.component.html @@ -1,6 +1,5 @@ - - gg -
+
+
-> {{ user.answer }}
- +
diff --git a/src/app/modules/lobby/create/create.component.html b/src/app/modules/lobby/create/create.component.html index 1ac9b4c..b5cf541 100644 --- a/src/app/modules/lobby/create/create.component.html +++ b/src/app/modules/lobby/create/create.component.html @@ -1 +1,3 @@ - +
+ +
diff --git a/src/app/modules/lobby/lobby.component.html b/src/app/modules/lobby/lobby.component.html index 834c638..b63b05a 100644 --- a/src/app/modules/lobby/lobby.component.html +++ b/src/app/modules/lobby/lobby.component.html @@ -1,5 +1,4 @@ - @@ -7,6 +6,6 @@ - + loading diff --git a/src/app/modules/lobby/lobby.component.ts b/src/app/modules/lobby/lobby.component.ts index 59abe00..8992653 100644 --- a/src/app/modules/lobby/lobby.component.ts +++ b/src/app/modules/lobby/lobby.component.ts @@ -73,7 +73,7 @@ export class LobbyComponent implements OnInit, OnDestroy { this.lobby = event this.lobbyStore.setLobby(this.lobby) }), - this.socket.fromEvent('lobbyMusic').subscribe((lobbyMusicId: string) => { + this.socket.fromEvent('lobbyMusic').subscribe((lobbyMusicId: ArrayBuffer) => { this.lobbyStore.setCurrentLobbyMusicId(lobbyMusicId) }), this.socket.fromEvent('lobbyAnswer').subscribe((answer: string) => { @@ -106,10 +106,4 @@ export class LobbyComponent implements OnInit, OnDestroy { ] this.lobbyService.join(this.lobbyCode) } - - leave(): void { - this.lobbyHttpService.leave().subscribe(() => { - void this.router.navigate(['/']) - }) - } } diff --git a/src/app/modules/lobby/lobby.module.ts b/src/app/modules/lobby/lobby.module.ts index 6392b3b..9520d18 100644 --- a/src/app/modules/lobby/lobby.module.ts +++ b/src/app/modules/lobby/lobby.module.ts @@ -17,6 +17,9 @@ import { CountdownComponent } from './components/countdown/countdown.component' import { CenterContainerComponent } from './components/center-container/center-container.component' import { MatSliderModule } from '@angular/material/slider' 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' const routes: Routes = [ { path: 'create', component: CreateComponent }, @@ -41,7 +44,16 @@ const routes: Routes = [ CountdownComponent, CenterContainerComponent, ], - imports: [CommonModule, RouterModule.forChild(routes), SharedModule, MatSliderModule, MatSnackBarModule], + imports: [ + CommonModule, + RouterModule.forChild(routes), + SharedModule, + MatSliderModule, + MatSnackBarModule, + MatRadioModule, + MatTooltipModule, + AudioContextModule.forRoot('balanced'), + ], providers: [LobbyHttpService], }) export class LobbyModule {} diff --git a/src/app/modules/lobby/waiting/waiting.component.html b/src/app/modules/lobby/waiting/waiting.component.html index 3c052d4..4e9d043 100644 --- a/src/app/modules/lobby/waiting/waiting.component.html +++ b/src/app/modules/lobby/waiting/waiting.component.html @@ -1,2 +1,5 @@ - - +
+ + + +
diff --git a/src/app/shared/models/lobby.ts b/src/app/shared/models/lobby.ts index 4b8583f..7ed09ab 100644 --- a/src/app/shared/models/lobby.ts +++ b/src/app/shared/models/lobby.ts @@ -28,6 +28,9 @@ export type Lobby = { export type LobbyConfig = { name: string password?: string + guessTime: number + musicNumber: number + allowDuplicates: boolean } export interface LobbyJoinResponse { diff --git a/src/assets/scss/components/_forms.scss b/src/assets/scss/components/_forms.scss index ca8be40..2ae63a8 100644 --- a/src/assets/scss/components/_forms.scss +++ b/src/assets/scss/components/_forms.scss @@ -2,6 +2,6 @@ color: red } -mat-checkbox { - margin-left: 30px; +.mat-form-field-appearance-fill .mat-form-field-flex { + background: transparent; } diff --git a/src/assets/scss/components/game.scss b/src/assets/scss/components/_game.scss similarity index 100% rename from src/assets/scss/components/game.scss rename to src/assets/scss/components/_game.scss diff --git a/src/assets/scss/components/_lobby.scss b/src/assets/scss/components/_lobby.scss new file mode 100644 index 0000000..89d4d68 --- /dev/null +++ b/src/assets/scss/components/_lobby.scss @@ -0,0 +1,46 @@ +app-lobby-config { + .mat-radio-label { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + .mat-radio-label-content { + padding-right: 8px; + } + } + + .mat-checkbox-layout { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + .mat-checkbox-inner-container { + margin-right: 0; + margin-left: 0; + } + } +} + +app-lobby-users { + @include media-breakpoint-down(sm) { + .users-container { + flex-wrap: nowrap; + overflow-x: auto; + -ms-overflow-style: none; /* IE and Edge */ + + &::-webkit-scrollbar { + display: none; + } + + & > div { + flex: 0 0 auto; + } + } + } + .user-card { + width: 150px; + height: 220px; + } +} diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index 966fc20..db32b25 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -17,6 +17,7 @@ @import "components/card"; @import "components/snackbar"; @import "components/game"; +@import "components/lobby"; // layout @import "layout/background"; diff --git a/src/styles.scss b/src/styles.scss index 856c787..1eed79f 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,4 +1,3 @@ @import "assets/scss/main"; -html, body { height: 100%; } body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; background-color: $background; color: $white }