gestion du scoreBoard finit et formulaire de connexion #15 #17

client/src/GestionScoresClient.js

+export class GestionScore {
+	async afficherScores(fichier) {
+		try {
+			const response = await fetch(fichier);
+			const scores = await response.json();
+			let html =
+				'<table><thead><tr><th>Nom</th><th>Score</th></tr></thead><tbody>';
+			scores.results.forEach(result => {
+				html += `<tr><td>${result.nom}</td><td>${result.score}</td></tr>`;
+			});
+			html += '</tbody></table>';
+			console.log(html);
+			return html;
+		} catch (error) {
+			console.error('Erreur lors de la lecture du fichier JSON :', error);
+			return null;
+		}
+	}
+}

client/src/afficher.js

@@ -8,13 +8,12 @@ export default class Afficher {
 		this.gameStarted = false;
 		this.afficherMenu = this.afficherMenu.bind(this);
 		this.startGame = this.startGame.bind(this);
+		this.afficherScores = this.afficherScores.bind(this);
 	}
 
 	afficherCredits(event) {
-		//event.preventDefault();
+		event.preventDefault();
 		document.querySelector('.divMain').innerHTML = setHtml.credits();
-		console.log(document.querySelector('.retourMenu'));
-		console.log(divMain.innerHTML);
 		document
 			.querySelector('.retourMenu')
 			.addEventListener('click', this.afficherMenu);
@@ -27,9 +26,7 @@ export default class Afficher {
 		document
 			.querySelector('.buttonStart')
 			.addEventListener('click', this.startGame);
-		document
-			.querySelector('.credits')
-			.addEventListener('click', this.afficherCredits);
+
 		location.reload();
 	}
 
@@ -62,4 +59,18 @@ export default class Afficher {
 	isGameStarted() {
 		return this.gameStarted;
 	}
+
+	afficherScores(scores) {
+		const boutonRetourMenu = document.querySelector('.retourMenu');
+		if (boutonRetourMenu) {
+			boutonRetourMenu.removeEventListener('click', this.afficherMenu);
+		}
+
+		document.querySelector('.divMain').innerHTML =
+			scores + `<button class="retourMenu">Retour au menu</button>`;
+
+		document
+			.querySelector('.retourMenu')
+			.addEventListener('click', this.afficherMenu);
+	}
 }

client/src/main.js

@@ -13,6 +13,12 @@ let renderObject = new Render();
 const affichage = new Afficher();
 let gameStarted = false;
 
+let clientScores = '';
+
+socket.on('scores', scores => {
+	clientScores = scores;
+});
+
 const canvas = document.querySelector('.gameCanvas');
 const context = canvas.getContext('2d');
 const avatar = new Avatar('1', 1);
@@ -184,3 +190,6 @@ socket.once('endGame', () => {
 		avatarsScore[4]
 	);
 });
+document
+	.querySelector('.scoreBoard')
+	.addEventListener('click', () => affichage.afficherScores(clientScores));

client/src/scoreboard.json

@@ -5,82 +5,38 @@
       "score": 100
     },
     {
-      "nom": "Joueur 2",
-      "score": 200
-    },
-    {
-      "nom": "Joueur 3",
-      "score": 150
-    },
-    {
-      "nom": "Joueur 4",
-      "score": 180
-    },
-    {
-      "nom": "Joueur 4",
-      "score": 180
-    },
-    {
-      "nom": "Joueur 4",
-      "score": 180
-    },
-    {
-      "nom": "Joueur 4",
-      "score": 180
-    },
-    {
-      "nom": "Joueur 4",
-      "score": 180
-    },
-    {
-      "nom": "Joueur 4",
-      "score": 180
-    },
-    {
-      "nom": "Joueur 4",
-      "score": 180
-    },
-    {
-      "nom": "Joueur 4",
-      "score": 180
+      "score": -15
     },
     {
-      "nom": "Joueur 4",
-      "score": 180
+      "nom": "dd",
+      "score": -15
     },
     {
-      "nom": "Joueur 4",
-      "score": 180
+      "score": -15
     },
     {
-      "nom": "Joueur 4",
-      "score": 180
+      "score": -15
     },
     {
-      "nom": "Joueur 4",
-      "score": 180
+      "nom": "dd",
+      "score": -15
     },
     {
-      "nom": "Joueur 4",
-      "score": 180
+      "nom": "dd",
+      "score": -15
     },
     {
-      "nom": "Joueur 4",
-      "score": 180
+      "score": -15
     },
     {
-      "nom": "Joueur 4",
-      "score": 180
+      "score": -15
     },
     {
+      "nom": "dd",
       "score": -15
     },
     {
       "score": -10
-    },
-    {
-      "nom": "julien",
-      "score": -15
     }
   ]
 }
\ No newline at end of file

client/src/setHtml.js

+import { GestionScore } from './GestionScoresClient.js';
 export default class setHtml {
 	static credits() {
 		return `
@@ -40,4 +41,8 @@ export default class setHtml {
 		<button>ScoreBoard</button>
 		<button class="credits">Credits</button>`;
 	}
+
+	static scoreBoard(scores) {
+		return scores;
+	}
 }

server/ScoreBoard.js

@@ -9,10 +9,17 @@ export class GestionScore {
 		try {
 			const data = fs.readFileSync(this.jsonFilePath);
 			const scores = JSON.parse(data);
-			console.log('Scores actuels :');
-			console.log(scores.results);
+			let html =
+				'<table><thead><tr><th>Nom</th><th>Score</th></tr></thead><tbody>';
+			scores.results.forEach(result => {
+				html += `<tr><td>${result.nom}</td><td>${result.score}</td></tr>`;
+			});
+			html += '</tbody></table>';
+
+			return html;
 		} catch (error) {
 			console.error('Erreur lors de la lecture du fichier JSON :', error);
+			return null;
 		}
 	}
 

server/index.js

@@ -52,6 +52,7 @@ let LVL2start = false;
 let LVL3start = false;
 let firstAvatar = false;
 const gestionScore = new GestionScore('client/src/scoreboard.json');
+let scores = gestionScore.afficherScores();
 
 io.on('connection', socket => {
 	cpt++;
@@ -63,6 +64,7 @@ io.on('connection', socket => {
 		socket.on('pseudo', pseudo => {
 			avatar.pseudo = pseudo;
 		});
+		io.emit('scores', scores);
 
 		socket.on('disconnect', () => {
 			avatars.forEach(avatar => {
@@ -191,7 +193,11 @@ setInterval(() => {
 						}, 100);
 					}
 					if (avatar.getVies() == 0) {
+						scores = gestionScore.afficherScores();
+						io.emit('scores', scores);
+
 						gestionScore.ajouterScore(avatar.pseudo, avatar.score);
+
 						avatar.setSpectateur();
 						io.emit('dead', avatar.id);
 					}