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

add point render and game finished logic

parent a8399bd7
No related branches found
No related tags found
No related merge requests found
......@@ -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
......
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() {
async ngOnInit() {
this.loading = true;
this.quizzService.connetToSocketIo();
this.actRoute.paramMap.subscribe((paramM) => {
if (!paramM.has('username')) {
this.router.navigate(['/', 'login']);
......@@ -29,6 +32,12 @@ export class HomepageComponent implements OnInit {
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");
}
}
<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>
<p class="text-lg mb-4">Quelle est la capitale de la France ?</p>
<div *ngIf="!loadingQuestion">
<p class="text-lg mb-4">{{ question.question }}</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="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 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">
<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="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>
</div>
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;
private questionSubject!: Subscription
loadingQuestion!: boolean;
constructor(private quizzService: QuizzService) {
loadingPlayers!: boolean;
selectedResponseIndex!: number | undefined;
gameFinished!: boolean;
constructor(public quizzService: QuizzService, private router: Router) {
}
ngOnInit() {
async ngOnInit() {
this.loadingQuestion = true;
this.quizzService.socket.emit("on-game")
this.quizzService.socket.on("question", (question)=>{
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;
console.log(this.question);
this.loadingQuestion = false;
});
console.log(this.question);
})
this.quizzService.getQuestion();
}
validateResponse() {
console.log("validate response:", this.question.possibleResponse[this.selectedResponseIndex!!]);
this.quizzService.socket.emit("validate-question", this.selectedResponseIndex);
}
ngOnDestroy() {
}
}
......@@ -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;
}
......@@ -62,7 +67,13 @@ 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', {
auth: {
......@@ -71,6 +82,7 @@ export class QuizzService {
});
}
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);
})
}
......
......@@ -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"
>
......
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']);
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment