leaderboard

This commit is contained in:
Baptiste 2023-12-06 20:25:49 +01:00
parent 6a637fcf60
commit 70f5d4d857
2 changed files with 19 additions and 13 deletions

View file

@ -12,7 +12,6 @@ function CookiePseudo() {
Renderer = new Render("canvas", "./assets/map/map7_recadr.png"); Renderer = new Render("canvas", "./assets/map/map7_recadr.png");
LB = new LeaderBoard("canvas"); LB = new LeaderBoard("canvas");
let Net = new Network("ws://129.151.227.50:8080?name="+CookiePseudo(), Renderer); let Net = new Network("ws://129.151.227.50:8080?name="+CookiePseudo(), Renderer);
//let ClientKeyboard = new Keyboard()
let playerId = null; //id of client player let playerId = null; //id of client player

View file

@ -16,16 +16,19 @@ class LeaderBoard {
}) })
this.players.push(player); this.players.push(player);
// Dessiner le tableau du leaderboard this.players.sort(function (a, b) {
this.ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'; // Couleur de fond du tableau return b.kill - a.kill;
this.ctx.fillRect(this.px, this.py, this.px+240, this.py+100+this.nbjoueur*20); // Position et dimensions du tableau });
// tableau du leaderboard (le fonc "blanc")
this.ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
this.ctx.fillRect(this.px, this.py, this.px+240, this.py+100+this.nbjoueur*20);
this.nbjoueur=0 this.nbjoueur=0
// Dessiner le texte du leaderboard
this.ctx.font = '20px Arial'; this.ctx.font = '20px Arial';
this.ctx.fillStyle = '#000000'; this.ctx.fillStyle = '#000000';
this.ctx.fillText('Leaderboard', this.px+80, this.py+30); this.ctx.fillText('Leaderboard', this.px+80, this.py+30);
// Dessiner les lignes du tableau // lignes noires
this.ctx.strokeStyle = '#000000'; this.ctx.strokeStyle = '#000000';
this.ctx.lineWidth = 2; this.ctx.lineWidth = 2;
this.ctx.beginPath(); this.ctx.beginPath();
@ -35,19 +38,23 @@ class LeaderBoard {
this.ctx.lineTo(this.px+250, this.py+100); this.ctx.lineTo(this.px+250, this.py+100);
this.ctx.stroke(); this.ctx.stroke();
// Dessiner les données du leaderboard (exemple) //donné user
this.ctx.fillStyle = '#000000'; this.ctx.fillStyle = '#000000';
this.ctx.font = '15px Arial'; this.ctx.font = '15px Arial';
this.ctx.fillText('#', this.px+20, this.py+80); this.ctx.fillText('#', this.px+10, this.py+80);
this.ctx.fillText('Username', this.px+50, this.py+80); this.ctx.fillText('Username', this.px+30, this.py+80);
this.ctx.fillText('K/D', this.px+180, this.py+80); this.ctx.fillText('K', this.px+180, this.py+80);
this.ctx.fillText('D', this.px+200, this.py+80);
this.ctx.fillText('K/D', this.px+220, this.py+80);
this.ctx.font = '10px Arial'; this.ctx.font = '10px Arial';
this.players.forEach((p) => { this.players.forEach((p) => {
if(p != null) { if(p != null) {
this.ctx.fillText('1', this.px+20, this.py+120+20*this.nbjoueur); this.ctx.fillText((this.nbjoueur+1), this.px+10, this.py+120+20*this.nbjoueur);
this.ctx.fillText(p.name, this.px+50, this.py+120+20*this.nbjoueur); this.ctx.fillText(p.name, this.px+30, this.py+120+20*this.nbjoueur);
this.ctx.fillText('10/20', this.px+180, this.py+120+20*this.nbjoueur); this.ctx.fillText(p.kill, this.px+180, this.py+120+20*this.nbjoueur);
this.ctx.fillText(p.death, this.px+200, this.py+120+20*this.nbjoueur);
this.ctx.fillText(p.kill/p.death, this.px+220, this.py+120+20*this.nbjoueur);
this.nbjoueur++ this.nbjoueur++
} }