Skip to content
Snippets Groups Projects
Commit fe1e2b8e authored by narindra.rajohnso's avatar narindra.rajohnso
Browse files

add players ready logic and fetch the begin question

parent a0e5de2c
No related branches found
No related tags found
No related merge requests found
Showing with 166 additions and 28 deletions
<div class="flex h-screen">
<div class="w-1/4 flex h-screen flex-col justify-between border-e bg-white">
<div class="bg-white p-8">
<h1 class="text-2xl font-bold mb-4">Joueurs Connectés</h1>
<ul class="text-gray-600">
<li *ngFor="let player of players" class="mb-2">{{ player.firstname }} {{ player.lastname }}</li>
<div class="flex flex-col space-y-4">
<h2 class="text-lg font-bold">Joueurs connectés</h2>
<ul class="max-w-md divide-y divide-gray-200 dark:divide-gray-700">
<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">
<p class="text-sm font-medium text-gray-900 truncate dark:text-white">
{{ player.firstname }} {{ player.lastname }}
</p>
<p class="text-sm text-gray-500 truncate dark:text-gray-400">
{{ player.username }}
</p>
</div>
<div class="inline-flex pr-2.5 items-center text-base font-semibold text-gray-900 dark:text-white">
<span [ngClass]="{'bg-green-500': player.ready, 'bg-red-500': !player.ready}" class="w-2 h-2 rounded-full"></span>
</div>
</div>
</li>
</ul>
<ng-container *ngIf="players.length === 3">
<p class="text-green-500 mt-4">Tous les joueurs sont connectés ! La partie peut commencer.</p>
</ng-container>
</div>
</div>
<div class="w-3/4 h-screen">
<router-outlet></router-outlet>
......
import {Component, OnInit} from '@angular/core';
import {User} from "../manage/users/user-model";
import {ActivatedRoute, Router} from "@angular/router";
import {QuizzService} from "./quizz.service";
import {SessionService} from "../login/session.service";
import {Session} from "../login/session-model";
@Component({
selector: 'app-homepage',
......@@ -11,7 +11,7 @@ import {SessionService} from "../login/session.service";
})
export class HomepageComponent implements OnInit {
loading=false;
players: User[]= [];
players: Session[]= [];
constructor(private sessionService: SessionService, private actRoute: ActivatedRoute, private quizzService: QuizzService, private router: Router) {
}
......@@ -25,17 +25,20 @@ 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.players.push(new Session("test", "voila", "moi"));
}
//this.players.push(new User("test", "voila", "moi", "sdfg@sdf.th", "user", "fsfdss"));
logOut(){
this.router.navigate(['/', 'login']);
//this.sessionService.deleteToken();
this.quizzService.socket.emit("player-not-ready");
this.quizzService.socket.disconnect();
}
onUserConnect(user:User){
this.players.push(user);
}
}
<p>quizz-play works!</p>
<div class="max-w-md mx-auto bg-white rounded shadow p-6">
<h2 class="text-2xl font-bold mb-4">Question du quizz</h2>
<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>
<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>
<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>
<button class="mt-6 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
Valider
</button>
</div>
import { Component } from '@angular/core';
import {Component, 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";
@Component({
selector: 'app-quizz-play',
templateUrl: './quizz-play.component.html',
styleUrls: ['./quizz-play.component.css']
})
export class QuizzPlayComponent {
export class QuizzPlayComponent implements OnInit{
question!: Question;
loadingQuestion!:boolean;
constructor(private quizzService: QuizzService) {
}
ngOnInit() {
this.loadingQuestion=true;
this.quizzService.socket.emit("on-game")
this.quizzService.socket.on("question", (question)=>{
this.question=question;
console.log(this.question);
this.loadingQuestion=false;
});
}
}
import { Injectable } from '@angular/core';
import {BehaviorSubject, Subject} from "rxjs";
import {BehaviorSubject, map, Subject, tap} from "rxjs";
import {HttpClient} from "@angular/common/http";
import {Session} from "../login/session-model";
import {SessionService} from "../login/session.service";
......@@ -46,11 +46,13 @@ export class QuizzService {
this.httpClient.get<any>('http://localhost:30992/api/v1/gamer/' + this.username).subscribe(
response => {
this._userInfo=new Session(
response.access_user.username,
response.access_user.firstname,
response.access_user.lastname
)
this.userInfoSubject.next(this.userInfo);
this.connetToSocketIo();
this.getNbPlayers();
resolve(this._userInfo);
},
error => {
......@@ -64,10 +66,58 @@ export class QuizzService {
const token = this.sessionService.token;
this._socket= io('http://localhost:30992', {
auth: {
token: token // Inclure le JWT dans la requête d'authentification
token: token
}
});
}
getNbPlayers(){
this.socket.on('players', (players) => {
console.log("players: ", players);
this._players.next(players);
});
}
onPlayerReady(){
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
map((players: Session[]) => {
return players.map(player => {
if (player.username === username) {
player.ready = true;
}
return player;
});
}),
tap(playersUpdated => {
this._players.next(playersUpdated);
})
).subscribe();
})
}
onPlayerNotReady(){
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
map((players: Session[]) => {
return players.map(player => {
if (player.username === username) {
player.ready = false;
}
return player;
});
}),
tap(playersUpdated => {
this._players.next(playersUpdated);
})
).subscribe();
})
}
}
......@@ -15,6 +15,13 @@
</div>
<div *ngIf="gameBegin">
<h2 class="text-2xl font-bold mb-4">Le jeu peut maintenant commencé</h2>
<div class="relative">
<button (click)="playGame()"
[disabled]="waitConfirmPlayer"
class="absolute top-0 right-0 px-4 py-2 bg-blue-500 text-white font-semibold rounded disabled:opacity-50">
{{waitConfirmPlayer?"Attente confirmation joueurs": "Jouer"}}
</button>
</div>
</div>
</div>
......
......@@ -14,6 +14,7 @@ export class WaitingPlayersComponent implements OnInit, OnDestroy{
userInfo!: Session;
userSub!: Subscription;
loading!: boolean;
waitConfirmPlayer=false;
private startGameSubscription!: any;
private playersLeftSub!:any;
gameBegin!:boolean;
......@@ -38,6 +39,12 @@ export class WaitingPlayersComponent implements OnInit, OnDestroy{
console.log("start game");
this.gameBegin=true;
});
this.quizzService.onPlayerReady();
this.quizzService.onPlayerNotReady();
this.quizzService.socket.on("game-ready-start", ()=>{
console.log("game is ready to start");
this.router.navigate(["/"+userInfo.username+"/play/quizz-play"]);
})
}
this.loading=false;
......@@ -48,23 +55,24 @@ export class WaitingPlayersComponent implements OnInit, OnDestroy{
alert("Votre session a expiré, veuillez vous reconnecter");
this.router.navigate(['/', 'login']);
//this.sessionService.deleteToken();
if(this.quizzService.socket) {
this.quizzService.socket.emit("player-not-ready")
this.quizzService.socket.disconnect();
}
}
})
}
playGame(){
this.waitConfirmPlayer=true;
this.quizzService.socket.emit("player-ready");
}
ngOnDestroy() {
if(this.userSub)
this.userSub.unsubscribe();
/*
if(this.startGameSubscription)
this.startGameSubscription.unsubscribe();
if(this.playersLeftSub)
this.playersLeftSub.unsubscribe();
*/
}
}
export class Session {
constructor(
public username: string,
public firstname: string,
public lastname: string
public lastname: string,
public ready?: boolean
) {}
}
......@@ -44,7 +44,7 @@ export class SignInComponent implements OnInit{
response => {
console.log("reponse sign in:", response);
this.sessionService.token=response.token;
this.sessionService.session=new Session(response.firstname, response.lastname);
this.sessionService.session=new Session(username, response.firstname, response.lastname);
if(response.message === "USER_ALLOWED"){
this.router.navigate(['/'+username+'/play']);
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment