From aaf4b226aef85d163342329702e6cf6c58b85aaa Mon Sep 17 00:00:00 2001
From: "narindra.rajohnso" <narindra-hasimanjaka-david.rajohnson@etu.hesge.ch>
Date: Sun, 11 Jun 2023 19:12:41 +0200
Subject: [PATCH] add point render and game finished logic
---
.../src/app/homepage/homepage.component.html | 4 +-
.../src/app/homepage/homepage.component.ts | 26 ++++++--
.../quizz-play/quizz-play.component.html | 61 ++++++++++++-------
.../quizz-play/quizz-play.component.ts | 40 +++++++++---
.../src/app/homepage/quizz.service.ts | 32 ++++++++--
.../src/app/manage/manage.component.html | 2 +-
.../src/app/manage/manage.component.ts | 12 +++-
7 files changed, 130 insertions(+), 47 deletions(-)
diff --git a/Frontend/quizz-game/src/app/homepage/homepage.component.html b/Frontend/quizz-game/src/app/homepage/homepage.component.html
index a290fd7..f5fd49f 100644
--- a/Frontend/quizz-game/src/app/homepage/homepage.component.html
+++ b/Frontend/quizz-game/src/app/homepage/homepage.component.html
@@ -5,7 +5,7 @@
<h2 class="text-lg font-bold">Joueurs connectés</h2>
- <ul class="max-w-md divide-y divide-gray-200 dark:divide-gray-700">
+ <ul class="max-w-md divide-y divide-gray-200 dark:divide-gray-700" *ngIf="!loading">
<li class="pb-3 sm:pb-4" *ngFor="let player of players">
<div class="flex items-center space-x-4">
<div class="flex-1 pl-2.5 min-w-0">
@@ -32,7 +32,7 @@
</div>
<div class="w-3/4 h-screen">
- <router-outlet></router-outlet>
+ <router-outlet *ngIf="!loading"></router-outlet>
<div class="fixed w-3/4 bottom-0 left-1/4 right-0 flex justify-center mb-4">
<button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded" (click)="logOut()">
Se déconnecter
diff --git a/Frontend/quizz-game/src/app/homepage/homepage.component.ts b/Frontend/quizz-game/src/app/homepage/homepage.component.ts
index 8099c4e..5a62cd3 100644
--- a/Frontend/quizz-game/src/app/homepage/homepage.component.ts
+++ b/Frontend/quizz-game/src/app/homepage/homepage.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, HostListener, OnDestroy, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from "@angular/router";
import {QuizzService} from "./quizz.service";
import {SessionService} from "../login/session.service";
@@ -9,15 +9,18 @@ import {Session} from "../login/session-model";
templateUrl: './homepage.component.html',
styleUrls: ['./homepage.component.css']
})
-export class HomepageComponent implements OnInit {
+export class HomepageComponent implements OnInit, OnDestroy {
loading=false;
players: Session[]= [];
constructor(private sessionService: SessionService, private actRoute: ActivatedRoute, private quizzService: QuizzService, private router: Router) {
}
- ngOnInit() {
- this.loading=true;
+
+
+ async ngOnInit() {
+ this.loading = true;
+ this.quizzService.connetToSocketIo();
this.actRoute.paramMap.subscribe((paramM) => {
if (!paramM.has('username')) {
this.router.navigate(['/', 'login']);
@@ -25,10 +28,16 @@ export class HomepageComponent implements OnInit {
}
this.quizzService.username = paramM.get('username')!!;
console.log(this.quizzService.username);
- this.quizzService.players.subscribe((players)=>{
- this.players=players;
+ this.quizzService.players.subscribe((players) => {
+ this.players = players;
});
+ this.quizzService.getUserInfo().then((userInfo)=>{
+ console.log(userInfo);
+ this.quizzService.onPlayerNotReady();
+ this.loading=false;
+ })
+
})
//this.players.push(new Session("test", "voila", "moi"));
@@ -41,4 +50,9 @@ export class HomepageComponent implements OnInit {
}
+ ngOnDestroy() {
+ this.quizzService.socket.emit("player-not-ready");
+ }
+
+
}
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 5792c59..442ba46 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,31 +1,48 @@
-<div class="max-w-md mx-auto bg-white rounded shadow p-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">
+ <p class="text-lg mb-4">{{ question.question }}</p>
- <p class="text-lg mb-4">Quelle est la capitale de la France ?</p>
-
- <div class="space-y-4">
- <div class="flex items-center">
- <input type="radio" id="reponse1" name="reponse" class="form-radio text-indigo-600 h-4 w-4" />
- <label for="reponse1" class="ml-2 text-gray-700">Paris</label>
+ <div class="space-y-4">
+ <div class="flex items-center" *ngFor="let response of question.possibleResponse; let i = index">
+ <input type="radio" id="reponse{{ i }}" name="reponse" class="form-radio text-indigo-600 h-4 w-4"
+ [(ngModel)]="selectedResponseIndex" [value]="i"/>
+ <label for="reponse{{ i }}" class="ml-2 text-gray-700">{{ response }}</label>
+ </div>
</div>
+ </div>
- <div class="flex items-center">
- <input type="radio" id="reponse2" name="reponse" class="form-radio text-indigo-600 h-4 w-4" />
- <label for="reponse2" class="ml-2 text-gray-700">Londres</label>
- </div>
- <div class="flex items-center">
- <input type="radio" id="reponse3" name="reponse" class="form-radio text-indigo-600 h-4 w-4" />
- <label for="reponse3" class="ml-2 text-gray-700">Berlin</label>
- </div>
+ <button [disabled]="selectedResponseIndex === undefined" (click)="validateResponse()"
+ class="mt-6 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
+ Valider
+ </button>
+</div>
- <div class="flex items-center">
- <input type="radio" id="reponse4" name="reponse" class="form-radio text-indigo-600 h-4 w-4" />
- <label for="reponse4" class="ml-2 text-gray-700">Madrid</label>
- </div>
+<div class="max-w-md mx-auto bg-white shadow p-6 mt-auto" *ngIf="quizzService.gameFinished">
+ <div class="relative overflow-x-auto">
+ <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+ <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+ <tr>
+ <th scope="col" class="px-6 py-3">
+ Joueur
+ </th>
+ <th scope="col" class="px-6 py-3">
+ Point
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700" *ngFor="let score of quizzService.score">
+ <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+ {{ score.username }}
+ </th>
+ <td class="px-6 py-4">
+ {{ score.score }}
+ </td>
+ </tr>
+ </tbody>
+ </table>
</div>
- <button class="mt-6 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
- Valider
- </button>
</div>
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 cee86d1..e4b7204 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
@@ -1,32 +1,52 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
import {Subscription} from "rxjs";
import {ManageService} from "../../manage/manage.service";
import {Question} from "../../manage/questions/question-model";
import {QuizzService} from "../quizz.service";
+import {Session} from "../../login/session-model";
+import {Router} from "@angular/router";
@Component({
selector: 'app-quizz-play',
templateUrl: './quizz-play.component.html',
styleUrls: ['./quizz-play.component.css']
})
-export class QuizzPlayComponent implements OnInit{
+export class QuizzPlayComponent implements OnInit, OnDestroy {
question!: Question;
- loadingQuestion!:boolean;
- constructor(private quizzService: QuizzService) {
+ private questionSubject!: Subscription
+ loadingQuestion!: boolean;
+ loadingPlayers!: boolean;
+ selectedResponseIndex!: number | undefined;
+ gameFinished!: boolean;
+
+ constructor(public quizzService: QuizzService, private router: Router) {
}
- ngOnInit() {
- this.loadingQuestion=true;
- this.quizzService.socket.emit("on-game")
- this.quizzService.socket.on("question", (question)=>{
+ async ngOnInit() {
+ this.loadingQuestion = true;
+ this.loadingPlayers = true;
+ 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.selectedResponseIndex = undefined;
this.question=question;
+ this.loadingQuestion = false;
console.log(this.question);
- this.loadingQuestion=false;
- });
+ })
+ this.quizzService.getQuestion();
+
+ }
+ validateResponse() {
+ console.log("validate response:", this.question.possibleResponse[this.selectedResponseIndex!!]);
+ this.quizzService.socket.emit("validate-question", this.selectedResponseIndex);
}
+ ngOnDestroy() {
+ }
}
diff --git a/Frontend/quizz-game/src/app/homepage/quizz.service.ts b/Frontend/quizz-game/src/app/homepage/quizz.service.ts
index c2ff93b..eb546b3 100644
--- a/Frontend/quizz-game/src/app/homepage/quizz.service.ts
+++ b/Frontend/quizz-game/src/app/homepage/quizz.service.ts
@@ -4,7 +4,7 @@ import {HttpClient} from "@angular/common/http";
import {Session} from "../login/session-model";
import {SessionService} from "../login/session.service";
import { io, Socket } from 'socket.io-client';
-
+import {Question} from "../manage/questions/question-model";
@Injectable({
providedIn: 'root'
@@ -15,6 +15,9 @@ export class QuizzService {
private _userInfo!: Session;
public userInfoSubject = new Subject<Session>();
private _socket!: Socket;
+ public question= new Subject<Question>;
+ public score: { username: string; score: any; }[]=[];
+ public gameFinished!: any;
get players(){
@@ -33,6 +36,8 @@ export class QuizzService {
return this._userInfo;
}
+
+
get socket(): Socket{
return this._socket;
}
@@ -44,8 +49,8 @@ export class QuizzService {
async getUserInfo(): Promise<Session> {
return new Promise<any>((resolve, reject) => {
this.httpClient.get<any>('http://localhost:30992/api/v1/gamer/' + this.username).subscribe(
- response => {
- this._userInfo=new Session(
+ response => {
+ this._userInfo = new Session(
response.access_user.username,
response.access_user.firstname,
response.access_user.lastname
@@ -62,15 +67,22 @@ export class QuizzService {
});
}
- private connetToSocketIo(){
+ public getQuestion(){
+ this._socket.on("question", (question) => {
+ this.question.next(question);
+ });
+ }
+
+ public connetToSocketIo() {
const token = this.sessionService.token;
- this._socket= io('http://localhost:30992', {
+ this._socket = io('http://localhost:30992', {
auth: {
token: token
}
});
}
+
getNbPlayers(){
this.socket.on('players', (players) => {
console.log("players: ", players);
@@ -117,6 +129,16 @@ export class QuizzService {
})
}
+ onGameFinished(){
+ this.socket.on("game-finished", (playersScore)=>{
+ Object.entries(playersScore).forEach(([key, value]) => {
+ this.score.push({username: key, score: value})
+ });
+ this.gameFinished=true;
+ console.log(this.score);
+ })
+ }
+
diff --git a/Frontend/quizz-game/src/app/manage/manage.component.html b/Frontend/quizz-game/src/app/manage/manage.component.html
index 01f470f..4353332 100644
--- a/Frontend/quizz-game/src/app/manage/manage.component.html
+++ b/Frontend/quizz-game/src/app/manage/manage.component.html
@@ -203,7 +203,7 @@
<form>
<button
- routerLink="/login/sign-in"
+ (click)="logOut()"
type="submit"
class="flex w-full items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>
diff --git a/Frontend/quizz-game/src/app/manage/manage.component.ts b/Frontend/quizz-game/src/app/manage/manage.component.ts
index 21dfa98..426e511 100644
--- a/Frontend/quizz-game/src/app/manage/manage.component.ts
+++ b/Frontend/quizz-game/src/app/manage/manage.component.ts
@@ -1,6 +1,7 @@
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from "@angular/router";
import {ManageService} from "./manage.service";
+import {SessionService} from "../login/session.service";
@Component({
selector: 'app-manage',
@@ -14,7 +15,7 @@ export class ManageComponent implements OnInit {
loading=false;
- constructor(private actRoute: ActivatedRoute, private router: Router, private manageService: ManageService) {
+ constructor(private actRoute: ActivatedRoute, private router: Router, private manageService: ManageService, private sessionService: SessionService) {
}
ngOnInit() {
@@ -41,11 +42,20 @@ export class ManageComponent implements OnInit {
alert("Votre session a expiré, veuillez vous reconnecter");
this.router.navigate(['/', 'login']);
}
+ if(error === "Invalid token"){
+ alert("Veuillez vous connecter pour pouvoir accéder à cette page");
+ this.router.navigate(['/', 'login']);
+ }
})
})
}
+ logOut(){
+ this.sessionService.deleteToken();
+ this.router.navigate(['/login']);
+ }
+
}
--
GitLab