diff --git a/Frontend/quizz-game/src/app/homepage/homepage.component.ts b/Frontend/quizz-game/src/app/homepage/homepage.component.ts index 4fa3d41ed02bab29117ec0e48ca2ae3af3f169ee..355e6dd79d6b3343ae273f9ea5eb83f0d45d9693 100644 --- a/Frontend/quizz-game/src/app/homepage/homepage.component.ts +++ b/Frontend/quizz-game/src/app/homepage/homepage.component.ts @@ -3,6 +3,7 @@ import {ActivatedRoute, Router} from "@angular/router"; import {QuizzService} from "./quizz.service"; import {SessionService} from "../login/session.service"; import {Session} from "../login/session-model"; +import {Subscription} from "rxjs"; @Component({ selector: 'app-homepage', @@ -20,7 +21,6 @@ export class HomepageComponent implements OnInit, OnDestroy { async ngOnInit() { this.loading = true; - this.quizzService.connetToSocketIo(); this.actRoute.paramMap.subscribe((paramM) => { if (!paramM.has('username')) { this.router.navigate(['/', 'login']); @@ -34,7 +34,6 @@ export class HomepageComponent implements OnInit, OnDestroy { this.quizzService.getUserInfo().then((userInfo)=>{ console.log(userInfo); - this.quizzService.onPlayerNotReady(); this.loading=false; }) @@ -43,16 +42,17 @@ export class HomepageComponent implements OnInit, OnDestroy { } logOut(){ + this.quizzService.socket?.emit("player-not-ready"); + this.quizzService.removeSocket(); this.sessionService.deleteToken(); this.router.navigate(['/', 'login']); //this.sessionService.deleteToken(); - this.quizzService.socket.emit("player-not-ready"); - this.quizzService.socket.disconnect(); } ngOnDestroy() { - this.quizzService.socket.emit("player-not-ready"); + this.quizzService.socket?.emit("player-not-ready"); + this.quizzService.removeSocket(); } diff --git a/Frontend/quizz-game/src/app/homepage/quizz-play/quizz-play.component.html b/Frontend/quizz-game/src/app/homepage/quizz-play/quizz-play.component.html index c8b5b866f07c8f1f348c25dfae80f837833a21ca..d70f04baf7cea51b2c47e9efcd8003e1cdd3ff90 100644 --- a/Frontend/quizz-game/src/app/homepage/quizz-play/quizz-play.component.html +++ b/Frontend/quizz-game/src/app/homepage/quizz-play/quizz-play.component.html @@ -1,6 +1,6 @@ <div class="max-w-md mx-auto bg-white rounded shadow p-6" *ngIf="!quizzService.gameFinished"> - <h2 class="text-2xl font-bold mb-4">Question du quizz</h2> <div *ngIf="!loadingQuestion"> + <h2 class="text-2xl font-bold mb-4">Catégorie: {{ question.category }}</h2> <p class="text-lg mb-4">{{ question.question }}</p> <div class="space-y-4"> diff --git a/Frontend/quizz-game/src/app/homepage/quizz-play/quizz-play.component.ts b/Frontend/quizz-game/src/app/homepage/quizz-play/quizz-play.component.ts index 8820d52a4ec5229a5dcc889078a24ecf3b4dec00..4bb77eae29b834a1e8b438fdd8a42c49a1332b28 100644 --- a/Frontend/quizz-game/src/app/homepage/quizz-play/quizz-play.component.ts +++ b/Frontend/quizz-game/src/app/homepage/quizz-play/quizz-play.component.ts @@ -25,14 +25,14 @@ export class QuizzPlayComponent implements OnInit, OnDestroy { async ngOnInit() { this.loadingQuestion = true; this.loadingPlayers = true; - this.quizzService.onPlayerReady(); this.quizzService.onPlayerNotReady(); + this.quizzService.onPlayerReady(); this.quizzService.onGameFinished(); - this.quizzService.socket.emit("player-ready"); - this.quizzService.socket.emit("on-game"); - this.questionSubject=this.quizzService.question.subscribe((question)=>{ + this.quizzService.socket?.emit("player-ready"); + this.quizzService.socket?.emit("on-game"); + this.questionSubject = this.quizzService.question.subscribe((question) => { this.selectedResponseIndex = undefined; - this.question=question; + this.question = question; this.loadingQuestion = false; console.log(this.question); }) @@ -43,13 +43,14 @@ export class QuizzPlayComponent implements OnInit, OnDestroy { validateResponse() { console.log("validate response:", this.question.possibleResponse[this.selectedResponseIndex!!]); - this.quizzService.socket.emit("validate-question", this.selectedResponseIndex); + this.quizzService.socket?.emit("validate-question", this.selectedResponseIndex); } - restartGame(){ - this.quizzService.gameFinished=false; - this.quizzService.socket.emit("player-not-ready"); - this.quizzService.socket.emit("restart-game"); + restartGame() { + this.quizzService.score = []; + this.quizzService.gameFinished = false; + this.quizzService.socket?.emit("player-not-ready"); + this.quizzService.socket?.emit("restart-game"); this.router.navigate([`/${this.quizzService.username}/play/waiting-players`]); } diff --git a/Frontend/quizz-game/src/app/homepage/quizz.service.ts b/Frontend/quizz-game/src/app/homepage/quizz.service.ts index 607a92c700e4dd0fa06acc56fc5185984723d68a..0884373136ccbfad1e9f3fa755de8a3b5176a18c 100644 --- a/Frontend/quizz-game/src/app/homepage/quizz.service.ts +++ b/Frontend/quizz-game/src/app/homepage/quizz.service.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import {BehaviorSubject, map, Subject, tap} from "rxjs"; +import {BehaviorSubject, map, Subject, Subscriber, Subscription, tap} from "rxjs"; import {HttpClient} from "@angular/common/http"; import {Session} from "../login/session-model"; import {SessionService} from "../login/session.service"; @@ -14,7 +14,7 @@ export class QuizzService { private _username!: string; private _userInfo!: Session; public userInfoSubject = new Subject<Session>(); - private _socket!: Socket; + private _socket!: Socket | undefined; public question= new Subject<Question>; public score: { username: string; score: any; }[]=[]; public gameFinished!: any; @@ -38,16 +38,29 @@ export class QuizzService { - get socket(): Socket{ + get socket(): Socket | undefined{ return this._socket; } + constructor(private httpClient: HttpClient, private sessionService: SessionService) { } + removeSocket() { + if (this._socket) { + this._socket?.off("question"); + this._socket?.off('players'); + this._socket?.off("ready-player"); + this._socket?.off("not-ready-player"); + this._socket?.off("game-finished"); + this._socket.disconnect(); + this._socket=undefined; + } + } async getUserInfo(): Promise<Session> { return new Promise<any>((resolve, reject) => { + this.sessionService.username=this.username; this.httpClient.get<any>('http://localhost:30992/api/v1/users/' + this.username).subscribe( response => { this._userInfo = new Session( @@ -68,13 +81,14 @@ export class QuizzService { } public getQuestion(){ - this._socket.on("question", (question) => { + this._socket?.on("question", (question) => { this.question.next(question); }); } public connetToSocketIo() { const token = this.sessionService.token; + console.log("connect socket token=", token) this._socket = io('http://localhost:30992', { auth: { token: token @@ -84,14 +98,14 @@ export class QuizzService { getNbPlayers(){ - this.socket.on('players', (players) => { + this.socket?.on('players', (players) => { console.log("players: ", players); this._players.next(players); }); } onPlayerReady(){ - this.socket.on("ready-player", (username)=>{ + this.socket?.on("ready-player", (username)=>{ console.log("ready-player: ", username); this.players.pipe( // Utilisez l'opérateur map pour itérer sur chaque élément du tableau @@ -107,10 +121,10 @@ export class QuizzService { this._players.next(playersUpdated); }) ).subscribe(); - }) + }); } onPlayerNotReady(){ - this.socket.on("not-ready-player", (username)=>{ + this.socket?.on("not-ready-player", (username)=>{ console.log("not-ready-player: ", username); this.players.pipe( // Utilisez l'opérateur map pour itérer sur chaque élément du tableau @@ -126,11 +140,12 @@ export class QuizzService { this._players.next(playersUpdated); }) ).subscribe(); - }) + }); } onGameFinished(){ - this.socket.on("game-finished", (playersScore)=>{ + this.socket?.on("game-finished", (playersScore)=>{ + this.score=[]; Object.entries(playersScore).forEach(([key, value]) => { this.score.push({username: key, score: value}) }); diff --git a/Frontend/quizz-game/src/app/homepage/waiting-players/waiting-players.component.ts b/Frontend/quizz-game/src/app/homepage/waiting-players/waiting-players.component.ts index a0c4895130e93d280f715d80afc4d1da8efc1c37..7a35eb501e9eeca087dd8acbae7b3b8d5e6c38ad 100644 --- a/Frontend/quizz-game/src/app/homepage/waiting-players/waiting-players.component.ts +++ b/Frontend/quizz-game/src/app/homepage/waiting-players/waiting-players.component.ts @@ -65,7 +65,7 @@ export class WaitingPlayersComponent implements OnInit, OnDestroy{ playGame(){ this.waitConfirmPlayer=true; - this.quizzService.socket.emit("player-ready"); + this.quizzService.socket?.emit("player-ready"); } diff --git a/Frontend/quizz-game/src/app/login/session.service.ts b/Frontend/quizz-game/src/app/login/session.service.ts index 2ad77d8b488e2792a108440764d73435a3e8b569..c7f52f0b6975eedc5832c15f5af024216f60219b 100644 --- a/Frontend/quizz-game/src/app/login/session.service.ts +++ b/Frontend/quizz-game/src/app/login/session.service.ts @@ -12,6 +12,9 @@ export class SessionService { public sessionSubject: Subject<Session> = new Subject<Session>() + private _username!: string; + + get session(): Session { return this._session } @@ -21,9 +24,13 @@ export class SessionService { this.sessionSubject.next(this._session) } + set username(id: string){ + this._username=id; + } + + get token(): string { - const username = this.session?.username ?? ""; - const storedToken = localStorage.getItem(`${SessionService.LS_SESSION_TOKEN_PREFIX}${username}`); + const storedToken = localStorage.getItem(`${SessionService.LS_SESSION_TOKEN_PREFIX}${this._username}`); return storedToken ?? ""; } @@ -33,8 +40,7 @@ export class SessionService { } deleteToken() { - const username = this.session?.username ?? ""; - localStorage.removeItem(`${SessionService.LS_SESSION_TOKEN_PREFIX}${username}`); + localStorage.removeItem(`${SessionService.LS_SESSION_TOKEN_PREFIX}${this._username}`); } diff --git a/Frontend/quizz-game/src/app/manage/manage.service.ts b/Frontend/quizz-game/src/app/manage/manage.service.ts index 8f748377cc5643ce204ba397962e5c40d713fe3d..dbfaba70ba93121f34b96cc3b5a5ee4ddc5dc6f2 100644 --- a/Frontend/quizz-game/src/app/manage/manage.service.ts +++ b/Frontend/quizz-game/src/app/manage/manage.service.ts @@ -5,6 +5,7 @@ import {User} from "./users/user-model"; import {FormGroup} from "@angular/forms"; import {LoginService} from "../login/login.service"; import {Question} from "./questions/question-model"; +import {SessionService} from "../login/session.service"; interface UserData { username: string; @@ -32,7 +33,7 @@ export class ManageService { private _users = new BehaviorSubject<User[]>([]); private _questions = new BehaviorSubject<Question[]>([]); - constructor(private httpClient: HttpClient, private loginService: LoginService) { + constructor(private httpClient: HttpClient, private loginService: LoginService, private sessionService: SessionService) { } get username(): string { @@ -53,6 +54,7 @@ export class ManageService { async getUserInfo(): Promise<any> { return new Promise<any>((resolve, reject) => { + this.sessionService.username=this.username; this.httpClient.get<any>('http://localhost:30992/api/v1/admins/' + this.username).subscribe( response => { resolve(response.info_user); @@ -240,7 +242,7 @@ export class ManageService { let userEdited=this.changeAccountTypeKey(editUsers[usernameSearch]); console.log(userEdited); return this.httpClient.put( - `http://localhost:30992/api/v1/admins/${this.username}/users/'${username}`, + `http://localhost:30992/api/v1/admins/${this.username}/users/${username}`, { ...userEdited } );