From 121e7eb0068c7d64459052d98f1c8eb4da77826d Mon Sep 17 00:00:00 2001
From: "julien.bouin.etu" <julien.bouin.etu@univ-lille.fr>
Date: Sun, 7 Apr 2024 11:45:55 +0200
Subject: [PATCH] gestion du scoreBoard finit et formulaire de connexion #15
#17
---
client/src/GestionScoresClient.js | 19 +++++++++
client/src/afficher.js | 23 ++++++++---
client/src/main.js | 9 ++++
client/src/scoreboard.json | 68 ++++++-------------------------
client/src/setHtml.js | 5 +++
server/ScoreBoard.js | 11 ++++-
server/index.js | 6 +++
7 files changed, 77 insertions(+), 64 deletions(-)
create mode 100644 client/src/GestionScoresClient.js
diff --git a/client/src/GestionScoresClient.js b/client/src/GestionScoresClient.js
new file mode 100644
index 0000000..3e58122
--- /dev/null
+++ b/client/src/GestionScoresClient.js
@@ -0,0 +1,19 @@
+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;
+ }
+ }
+}
diff --git a/client/src/afficher.js b/client/src/afficher.js
index 540067c..8f8da09 100644
--- a/client/src/afficher.js
+++ b/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);
+ }
}
diff --git a/client/src/main.js b/client/src/main.js
index 260b5f8..32989bf 100644
--- a/client/src/main.js
+++ b/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));
diff --git a/client/src/scoreboard.json b/client/src/scoreboard.json
index 9db723e..6dff0e9 100644
--- a/client/src/scoreboard.json
+++ b/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
diff --git a/client/src/setHtml.js b/client/src/setHtml.js
index 7287022..8235335 100644
--- a/client/src/setHtml.js
+++ b/client/src/setHtml.js
@@ -1,3 +1,4 @@
+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;
+ }
}
diff --git a/server/ScoreBoard.js b/server/ScoreBoard.js
index fd04dcb..f7fa6fc 100644
--- a/server/ScoreBoard.js
+++ b/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;
}
}
diff --git a/server/index.js b/server/index.js
index 2f86d3c..1c0dea2 100644
--- a/server/index.js
+++ b/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);
}
--
GitLab