diff --git a/client/src/GestionScoresClient.js b/client/src/GestionScoresClient.js
new file mode 100644
index 0000000000000000000000000000000000000000..3e58122fe5cd16a3ab8ab6d24a9a7371d49c1fdf
--- /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 540067c0762a06cd4259a60d71cfe26ed21437ed..8f8da099ce08a9dabc06d159952cd57e4cf177c7 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 260b5f8b0d26619ea7704bb386987599d9e05592..32989bf3ffff9874f8712ba76cdf5badb1fe03b2 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 9db723e49aa28e15ce0fbf4d713a0238a2ac5e82..6dff0e90f3f96fbb113aa738868dfc5c721bc568 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 728702294e138b16ec09b3c890ceefa4ea7d239f..823533502b165f17956fce5d900316fc28b50ae5 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 fd04dcb7ce25fd114fbcaca0911000fe96d8f8ec..f7fa6fc29897576eb10a8888d732f6c9e70f24da 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 2f86d3cb9346d7c08074db4acd5d608c3aeb905c..1c0dea29c3cfed95623bc457f2d3b1b334e3b930 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);
}